/* The opening owns input and the viewport until a journey is explicitly entered. */
body.opening-active > :not(#opening-screen):not(#audio-dialog):not(script):not(noscript){display:none!important}
#opening-screen[hidden],#opening-screen [hidden]{display:none!important}
#opening-screen{position:fixed;inset:0;z-index:5000;isolation:isolate;overflow:auto;background:#101713;color:#e8dfc9;min-height:100%;font-family:var(--pixel-font);line-height:1.7}
#opening-screen::before{content:'';position:fixed;inset:0;z-index:-3;background:#111b18 url('art/title-seoul-pixel.png') center center/cover no-repeat;image-rendering:pixelated}
#opening-screen[data-scene=shelter]::before{background-image:url('art/prologue-shelter.png')}
#opening-screen::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#080f0ee8 0%,#0a121ac2 24%,#09141240 65%,#08100b10),linear-gradient(0deg,#080d11c9,transparent 35%,#07110b45)}
.opening-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.14;background:repeating-linear-gradient(0deg,#0008 0 1px,transparent 1px 4px)}
.opening-frame{min-height:100svh;padding:clamp(20px,5vh,56px) clamp(24px,6vw,100px);padding-left:max(env(safe-area-inset-left),clamp(24px,6vw,100px));padding-right:max(env(safe-area-inset-right),clamp(24px,6vw,100px));display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.opening-topline{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:2px;color:#b5b7a2;text-shadow:1px 2px #000}
.opening-topline strong{font-weight:normal;color:#d59e73}.opening-topline .opening-coordinate{opacity:.7}
.title-body{max-width:470px;width:44%;padding:12px 0 22px}.opening-kicker{font-size:10px;letter-spacing:5px;color:#b5b496;margin:0 0 2px}
#opening-title-name{font-size:clamp(68px,8.4vw,126px);font-weight:bold;line-height:1.12;letter-spacing:.19em;margin:0 -0.19em 0 0;color:#ede2c4;text-shadow:4px 0 #343e37,0 4px #343e37,4px 4px #343e37,8px 8px #0d1519;outline:none}
.opening-subtitle{font-size:clamp(13px,1.5vw,20px);letter-spacing:.37em;color:#cbc8ac;margin:14px 0 22px;padding-left:3px}
.title-motto{color:#bdc1ae;font-size:13px;line-height:1.9;margin:0 0 24px;text-shadow:1px 2px #000}
.title-menu{display:grid;gap:10px;max-width:360px}#opening-screen button{font:inherit;cursor:pointer;touch-action:manipulation;border-radius:0;transition:background .15s,border-color .15s;box-shadow:none}
#opening-screen button:focus-visible{outline:2px solid #edd197;outline-offset:4px}
.title-menu>button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:12px 18px;min-height:56px;border:1px solid #83917b80;background:#17261ddc;color:#d0d4bd;font-size:16px}
.title-menu>button:hover{background:#2c3d2fe8;border-color:#cbd0ad}.title-menu .title-primary{background:#c5b78dde;color:#1a221a;border-color:#e2d5ab}.title-menu .title-primary:hover{background:#daceaa}
.title-menu button .menu-number{font-size:10px;opacity:.6;width:18px}.title-menu button .menu-arrow{margin-left:auto}.title-menu button small{display:block;font-size:10px;line-height:1.6;margin-top:2px;color:inherit;opacity:.8}
.title-secondary{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}#opening-screen .text-button{padding:3px 0;border:0;border-bottom:1px solid #a5b18a60;background:none;color:#bac4ad;font-size:11px;min-height:32px}
#opening-screen .text-button:hover{color:#eee5c8;border-color:#eee5c8}.title-save-status{font-size:10px;color:#99a38e;margin:12px 0 0;line-height:1.6}
.opening-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:#879b88;font-size:10px;letter-spacing:1px}.opening-footer p{margin:0}.title-scene-note{text-align:right;border-right:2px solid #bb886356;padding-right:14px;color:#c0ad8e}.title-scene-note strong{display:block;letter-spacing:4px;font-weight:normal;font-size:12px}
.prologue-frame{justify-content:flex-start;gap:0}.prologue-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
.prologue-top .text-button{color:#c1c6b1}.prologue-story{max-width:640px;width:57%;padding:clamp(18px,6vh,72px) 0 24px}.prologue-place{font-size:11px;color:#b89c6d;letter-spacing:2px;margin:0 0 16px}
#prologue-title{font-size:clamp(20px,2.4vw,34px);font-weight:normal;line-height:1.6;margin:0 0 22px;color:#eee6d0;outline:none;word-break:keep-all}
#prologue-text{font-size:clamp(12px,1.2vw,16px);color:#c2c8b7;line-height:2.05;word-break:keep-all;text-shadow:1px 2px #000}#prologue-text p{margin:0 0 15px}
#prologue-quote{margin:20px 0 0;padding:12px 16px;border-left:2px solid #c29b61;color:#ddc18c;background:#16231bbd;font-size:clamp(12px,1.4vw,18px)}
.prologue-navigation{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;width:100%;border-top:1px solid #b2b69e44;padding-top:18px}.prologue-navigation>div{max-width:260px}.prologue-navigation output{font-size:10px;letter-spacing:2px;color:#b3bb9f}
#prologue-progress{display:block;appearance:none;width:100%;height:3px;margin-top:10px;border:0;background:#344035;color:#b7bf94}#prologue-progress::-webkit-progress-bar{background:#344035}#prologue-progress::-webkit-progress-value{background:#b7bf94}#prologue-progress::-moz-progress-bar{background:#b7bf94}
#opening-screen .opening-button{min-height:44px;min-width:100px;padding:10px 20px;border:1px solid #7d8e71;background:#1c2c21e8;color:#dce1c7}#opening-screen .opening-button.primary{background:#c6b990;border-color:#ddcfa5;color:#152319}#opening-screen .opening-button:disabled{opacity:.3;cursor:default}
.opening-card{max-width:580px;width:56%;padding:30px;border:1px solid #a7aa8266;background:#142018e8;margin:auto 0}.opening-card h2{font-size:24px;font-weight:normal;margin:0 0 16px;color:#ece3c8;outline:none}.opening-card p,.opening-card li{font-size:13px;line-height:1.9;color:#bdc9b6}.opening-card ol{padding-left:22px}.opening-card li{margin:12px 0}.opening-card strong{color:#e1c796}.opening-card-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
#title-replace-detail{padding:9px 12px;background:#080e0c66;border-left:2px solid #aa8e64;color:#e0cfaa}
@media(min-width:1100px){.opening-frame{padding-top:40px;padding-bottom:32px}.title-body{padding-top:20px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.opening-frame{padding:16px max(env(safe-area-inset-right),28px) 16px max(env(safe-area-inset-left),28px);gap:8px}.opening-topline{font-size:8px}.title-body{width:47%;max-width:380px;padding:6px 0}.opening-kicker{font-size:8px;letter-spacing:3px}#opening-title-name{font-size:56px}.opening-subtitle{font-size:11px;margin:5px 0 8px}.title-motto{font-size:10px;line-height:1.7;margin-bottom:9px}.title-menu{gap:7px;max-width:310px}.title-menu>button{min-height:41px;padding:7px 12px;font-size:13px}.title-menu button small{font-size:9px}.title-secondary{margin-top:5px;gap:18px}.title-save-status{font-size:8px;margin:3px 0}.opening-footer{font-size:8px}.title-scene-note strong{font-size:10px}.prologue-top{margin-bottom:0}.prologue-story{padding:10px 0 7px;width:65%;max-width:640px}.prologue-place{font-size:9px;margin-bottom:6px}#prologue-title{font-size:20px;margin-bottom:10px}#prologue-text{font-size:11px;line-height:1.9}#prologue-text p{margin-bottom:8px}#prologue-quote{font-size:12px;padding:5px 10px;margin-top:8px}.prologue-navigation{padding-top:9px;gap:10px;margin-top:auto}#opening-screen .opening-button{min-height:36px;padding:6px 14px;font-size:11px;min-width:82px}.prologue-navigation output{font-size:8px}.opening-card{width:65%;padding:20px;margin:14px 0}.opening-card h2{font-size:20px}.opening-card p,.opening-card li{font-size:11px}.opening-card-actions{margin-top:16px}}
@media(max-aspect-ratio:1/1){#opening-screen::before{background-position:65% center}#opening-screen::after{background:linear-gradient(90deg,#080f0eee,#0a121a88),linear-gradient(0deg,#080d11,transparent)}.opening-frame{padding:24px;min-height:100svh;gap:24px}.title-body{width:100%;max-width:420px}.opening-topline .opening-coordinate{display:none}.title-menu{max-width:none}.title-scene-note{display:none}.prologue-story{width:100%;padding:30px 0 20px}.prologue-navigation{grid-template-columns:1fr auto auto;gap:8px}#opening-screen .opening-button{min-width:70px;padding:10px 12px;font-size:12px}.prologue-navigation output{font-size:8px;letter-spacing:0}.opening-card{width:100%;max-width:none;padding:22px}.opening-card h2{font-size:22px}.prologue-top{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){#opening-screen button{transition:none}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.title-motto{display:none}#prologue-text{font-size:12px}}

/* Flat ink, stepped edges and hard shadows keep the title in the game's pixel palette. */
#opening-screen[data-mode=title]::after{background:linear-gradient(90deg,#101a23b8 0%,#101a2360 34%,#101a2318 56%,transparent 72%),linear-gradient(0deg,#0c151bbb,transparent 19%)}
#opening-screen[data-mode=title] .opening-noise{display:none}
#opening-title .opening-topline{color:#c4c9b3;letter-spacing:1px}
#opening-title .opening-topline>span:first-child{padding-left:13px;border-left:4px solid #b79766}
#opening-title .opening-coordinate{opacity:1;color:#a8b2ae}
#opening-title .opening-kicker{color:#c0b78f;letter-spacing:3px}
#opening-title .opening-subtitle{color:#d3cfb2}
#opening-title .title-menu>button{border:2px solid #78806a;background:#202b29;color:#dfddc1;box-shadow:inset 2px 2px #3b4840,inset -2px -2px #121e21,4px 4px #0c151b;transition:none}
#opening-title .title-menu>button:hover{background:#344039;border-color:#ded3a8}
#opening-title .title-menu>.title-primary{border-color:#e0d0a0;background:#b6a479;color:#172123;box-shadow:inset 2px 2px #d4c394,inset -2px -2px #776b4e,4px 4px #0c151b}
#opening-title .title-menu>.title-primary:hover{background:#cbb88a}
#opening-title .title-menu>button:active{box-shadow:inset 2px 2px #121e2155,2px 2px #0c151b;transform:translate(2px,2px)}
#opening-title .title-menu .menu-number{opacity:1;color:#b2aa87}
#opening-title .title-primary .menu-number{color:#404633}
#opening-title .text-button{color:#c9cfbc;border-bottom:2px solid #68766b}
#opening-title .title-save-status{color:#b3bdac}
#opening-title .opening-footer{color:#b9c4b1;text-shadow:2px 2px #0d151b}
#opening-title .title-scene-note{color:#dcc7a0;border-right:4px solid #a88457}
@media(max-aspect-ratio:1/1){#opening-screen[data-mode=title]::after{background:#101a2399}}