#journey-opening{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:#fff4de;background:linear-gradient(#071b28a8,transparent 28%,transparent 56%,#071b28e8)}
.opening-heading{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 16px) 24px;gap:12px;background:#102630b8;font-size:10px;letter-spacing:.14em}
.opening-heading button{pointer-events:auto;min-height:44px;padding:8px 16px;border:1px solid #d5bd8c;border-radius:24px;color:#fff2d7;background:#213d48;font-size:12px;letter-spacing:0}
#journey-dialog-copy{white-space:pre-line}
.opening-caption{text-align:center;padding:25px 20px calc(env(safe-area-inset-bottom) + 30px);text-shadow:0 2px 8px #000}
.opening-caption h1{font-size:clamp(22px,4.5vw,42px);letter-spacing:.06em}.opening-caption p{font-size:clamp(12px,2vw,16px);line-height:1.8}.opening-caption progress{display:block;width:120px;height:2px;margin:20px auto 0;accent-color:#d9bc7c}
.opening-letter{align-self:flex-end;margin-right:6vw;padding:22px 30px;color:#514733;background:#efe2c4;box-shadow:0 8px 35px #0005;transform:rotate(3deg);font-family:serif;opacity:0;transition:opacity .6s;max-width:65vw;font-size:16px;line-height:1.9}.opening-letter span{font-size:10px;letter-spacing:.12em}#journey-opening[data-shot="1"] .opening-letter{opacity:1}
body.is-opening #title-overlay,body.is-opening #explore-hud,body.is-opening #touch-controls,body.is-opening #survival-hud{visibility:hidden!important}
#interior-wait{width:min(450px,90vw);border:1px solid #b7a179;border-radius:18px;background:#eee5d4;color:#283944;padding:28px;line-height:1.8}#interior-wait progress{width:100%;height:5px}#interior-wait button{min-height:44px;width:100%;margin-top:16px;border-radius:10px}#interior-wait small{display:block;font-size:11px}
#journey-dialog{width:min(440px,90vw);border:1px solid #c4ad7e;border-radius:18px;padding:26px;background:#f3e9d7;color:#2b3f47;line-height:1.9}#journey-dialog button{min-height:44px;width:100%;border-radius:10px}
@media(max-height:500px){.opening-caption{padding:8px 20px}.opening-caption h1{font-size:23px;margin:6px}.opening-caption p{margin:4px}.opening-letter{padding:10px 18px;margin-right:20px;font-size:13px}.opening-heading{padding:8px 16px}.opening-caption progress{margin:8px auto}}
@media(prefers-reduced-motion:reduce){.opening-letter{transition:none;transform:none}}

#district-guide{width:min(530px,92vw);padding:22px;border:1px solid #baa271;border-radius:18px;background:#f6eddd;color:#263e47;max-height:82dvh}#district-guide section{padding:12px 0;border-bottom:1px solid #cdbd9e}#district-guide h3{margin:0;font-size:15px}#district-guide p{font-size:12px;line-height:1.7}#district-guide button{min-height:44px;border-radius:10px;padding:8px 14px}#district-guide button:disabled{opacity:.5}#district-close{width:100%;margin-top:14px}

/* v0.18 opening: cinema bars, fades, title logo */
#journey-opening{background:linear-gradient(transparent 60%,#071b28b0)}
.opening-bar{position:absolute;left:0;right:0;height:9vh;background:#05080b;z-index:0;transition:height .9s ease}
.opening-bar.top{top:0}.opening-bar.bottom{bottom:0}
#journey-opening[data-shot="5"] .opening-bar{height:13vh}
.opening-heading{position:relative;z-index:2;background:transparent}
.opening-caption{position:relative;z-index:2;padding-bottom:calc(env(safe-area-inset-bottom) + 9vh)}
.opening-caption h1{animation:openingIn 1.2s ease both}.opening-caption p{animation:openingIn 1.6s .2s ease both}
#journey-opening[data-shot] .opening-caption h1,#journey-opening[data-shot] .opening-caption p{animation-name:openingIn}
@keyframes openingIn{from{opacity:0;transform:translateY(8px);letter-spacing:.14em}to{opacity:1;transform:none}}
#opening-fade{position:absolute;inset:0;background:#05080b;opacity:0;z-index:3;pointer-events:none}
.opening-logo{position:absolute;left:0;right:0;top:34%;text-align:center;opacity:0;transition:opacity 1.2s ease,transform 3s ease;transform:scale(.96);z-index:2;text-shadow:0 4px 24px #000a}
.opening-logo strong{display:block;font:700 clamp(46px,11vw,120px)/1 'Cinzel',serif;letter-spacing:.32em;color:#fff4de;padding-left:.32em}
.opening-logo em{display:block;margin-top:14px;font:500 clamp(13px,2.2vw,20px)/1.4 'Noto Serif JP',serif;letter-spacing:.3em;color:#e8cf98;font-style:normal}
#journey-opening[data-shot="5"] .opening-logo{opacity:1;transform:none}
#journey-opening[data-shot="5"] .opening-caption h1{visibility:hidden}
.opening-letter{position:relative;z-index:2}
@media(max-width:650px){.opening-bar{height:6vh}.opening-caption{padding-bottom:calc(env(safe-area-inset-bottom) + 6vh)}.opening-letter{max-width:78vw;font-size:14px;padding:14px 18px}.opening-heading span{display:none}}
@media(prefers-reduced-motion:reduce){.opening-caption h1,.opening-caption p{animation:none}.opening-logo{transition:none}}