/* Preview-only background. The existing foreground stylesheet is unchanged. */
@font-face{font-family:'Seoul Signs';src:url('assets/seoul/NotoSansKR-Signs.ttf') format('truetype');font-weight:700;font-style:normal;font-display:block}
#seoul-world{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#030407}
#seoul-world canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* This fixed-height stage clips the scene, but must never scroll internally
   when a contextual button disappears after focus. The chapter still scrolls. */
#black-stage{overflow:clip}
#seoul-world:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 17% 42% at 50% 48%,rgba(0,0,0,.18),rgba(0,0,0,.06) 85%,transparent 130%),linear-gradient(180deg,rgba(0,0,0,.12),transparent 24%,transparent 80%,rgba(0,0,0,.12));}
.seoul-controls{position:absolute;inset:0;pointer-events:none;font:9px/1.35 Arial,sans-serif;letter-spacing:.04em;color:#fff}
.seoul-controls button{pointer-events:auto;min-height:30px;font:inherit;letter-spacing:inherit;touch-action:none}
.seoul-dock{position:absolute;z-index:7;right:14px;bottom:66px;display:flex;gap:5px;align-items:center;padding:4px 6px;background:#020307c9;border:1px solid #ffffff25;border-radius:3px;backdrop-filter:blur(8px)}
.seoul-dock button{padding:0 9px;color:#bfc6ce}
.seoul-dock button[aria-pressed=true]{color:#fff;background:#ffffff14}
.seoul-preview-tag{font-size:8px;color:#9da6b2;border-right:1px solid #ffffff25;padding:0 9px 0 3px}
/* Keep the controls under the existing HUD text without dimming that text. */
.seoul-stick,.seoul-jump{z-index:4;opacity:.62;transition:opacity .18s ease;background:#060a124d!important;touch-action:none;user-select:none;-webkit-user-select:none}
.seoul-stick:active,.seoul-jump:active,.seoul-jump.is-pressed{opacity:.62}
.seoul-stick:focus-visible,.seoul-jump:focus-visible{opacity:.72}
.seoul-stick{position:absolute;left:calc(10px + var(--rail,136px)*.5 - 32px);bottom:102px;width:64px;height:64px;border:1px solid #ffffffb3!important;border-radius:50%}
.seoul-stick:before{content:'';position:absolute;inset:12px;border:1px dashed #ffffff12;border-radius:50%}
.seoul-stick span{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px;border-radius:50%;background:#d9dfe9cc;border:1px solid #ffffffcc;pointer-events:none;transform:translate(var(--sx,0px),var(--sy,0px))}
.seoul-stick:after{content:'MOVE';position:absolute;top:calc(100% + 8px);left:0;right:0;text-align:center;color:#b2bac6;font-size:7px;letter-spacing:.15em}
.seoul-jump{position:absolute;right:41px;bottom:140px;border:1px solid #ffffffb3!important;border-radius:50%;width:44px;height:44px;display:grid;place-items:center}
.seoul-jump svg{width:18px;height:18px;stroke:#f1f5ff;fill:none;stroke-width:1.2}
.seoul-jump:after{content:'JUMP';position:absolute;top:calc(100% + 8px);color:#b2bac6;font-size:7px;letter-spacing:.15em}
.seoul-help{position:absolute;z-index:7;left:calc(var(--rail) + 34px);bottom:42px;font-size:8px;letter-spacing:.05em;color:#9ca6b5;background:#0203078a;padding:4px 6px;max-width:260px}
.seoul-status{position:absolute;z-index:7;right:18px;top:220px;font-size:8px;color:#aab7c6;text-align:right;letter-spacing:.07em;max-width:220px}
.seoul-status:empty{display:none}
.seoul-record-link{position:absolute;z-index:7;right:18px;bottom:108px;pointer-events:auto;background:#0b0e13eb;border:1px solid #fff4;padding:10px 14px;font-size:10px}
.seoul-off #seoul-world{visibility:hidden}.seoul-off .seoul-stick,.seoul-off .seoul-jump,.seoul-off .seoul-help{visibility:hidden}
@media(max-width:700px){
 #seoul-world:after{background:radial-gradient(ellipse 25% 34% at 50% 46%,#0003,transparent 140%),linear-gradient(180deg,#0002,transparent 25%,transparent 75%,#0003)}
 .seoul-stick{left:calc(10px + var(--rail,136px)*.5 - 28px);bottom:calc(var(--bar,28px) + 33px + env(safe-area-inset-bottom,0px));width:56px;height:56px}
 .seoul-stick span{width:20px;height:20px;margin:-10px}
 .seoul-stick:after{top:calc(100% + 6px);font-size:6px}
 .seoul-jump{right:21px;bottom:calc(var(--bar,28px) + 47px + env(safe-area-inset-bottom,0px));width:44px;height:44px}
 .seoul-jump:after{font-size:6px;top:calc(100% + 6px)}
 .seoul-dock{right:14px;bottom:calc(var(--bar) + 125px);padding:2px 4px;gap:0}
 .seoul-dock button{font-size:7px;padding:0 6px;min-height:27px}
 .seoul-preview-tag{font-size:6px;padding-right:6px}
 .seoul-help{left:auto;right:16px;bottom:calc(var(--bar) + 109px);font-size:6px;padding:0;background:transparent}
 .seoul-status{top:170px;right:12px;max-width:140px;font-size:6px}
 .seoul-record-link{right:14px;bottom:calc(var(--bar) + 166px);font-size:8px;padding:8px}
}
/* The media element supplies only a texture to the 3D screen. */
#seoul-world .seoul-video-source{position:absolute;width:1px;height:1px;left:0;bottom:0;opacity:.001;pointer-events:none}
@media(max-width:700px){.seoul-dock button{padding:0 5px}}
.seoul-interact{position:absolute;z-index:7;font-size:7px!important;color:#bec9d7;background:#0a1019b3!important;border:1px solid #c6d9f32b!important;border-radius:2px;padding:5px 9px!important;opacity:.65;min-height:30px}
.seoul-interact{left:50%;transform:translateX(-50%);bottom:calc(var(--bar,28px) + 60px)}
.seoul-interact:focus-visible{opacity:1}
.seoul-off .seoul-interact{display:none}
/* Preview layout: use the current viewport, keeping native browser zoom enabled. */
@supports(height:100dvh){
 #black-stage{height:100dvh}
 #black-stage .figure{width:75.72dvh;height:52dvh}
 @media(max-width:600px){#black-stage .figure{width:66.99dvh;height:46dvh}}
}
/* Short landscapes need their own layout, including zoomed desktop windows. */
@media(min-width:601px) and (max-height:600px){
 :root{--rail:clamp(150px,24vw,240px)}
 #black-stage .map-box{height:clamp(42px,16dvh,80px)}
 #black-stage .map-box>img{height:38px;width:57px}
 #black-stage .map-label{font-size:7px;line-height:9px}
 #black-stage .map-label>span:last-child{max-width:115px}
 #black-stage .status-panel{bottom:calc(var(--bar) + 88px);height:30dvh;max-height:135px;padding:10px 12px}
 #black-stage .status-row{font-size:7px;line-height:9px;gap:8px}
 #black-stage .status-row>span:last-child{width:90px}
 #black-stage .coordinate{top:auto;bottom:calc(var(--bar) + 49px);font-size:7px}
 #black-stage .roles{height:calc(100% - var(--bar) - 140px);max-height:155px}
 #black-stage .progress,#black-stage .scroll-label{bottom:calc(var(--bar) + 10px)}
 .seoul-stick{width:48px;height:48px;left:calc(10px + var(--rail)*.5 - 24px);bottom:calc(var(--bar) + 67px)}
 .seoul-stick span{width:18px;height:18px;margin:-9px}
 .seoul-jump{right:22px;bottom:calc(var(--bar) + 67px)}
}
@media(min-width:601px) and (max-width:1000px) and (max-height:600px){
 .bar{font-size:11px}.bar-left{gap:10px}.bar-right{gap:8px}.clock{display:none}
}
/* Biography scrolling must clear the HUD promptly, rather than trail for 1.2s. */
#black-stage #hud{transition:none}

.seoul-tiger-touch{position:absolute;z-index:6;width:54px;height:60px;min-height:44px;border:0;background:transparent;transform:translate(-50%,-50%);padding:0;border-radius:0;touch-action:manipulation;cursor:pointer}.seoul-tiger-touch:focus-visible{outline:1px solid #eee;outline-offset:4px}.seoul-tiger-touch[hidden]{display:none!important}
/* Cinema seating opens a clear view while the normal navigation, music and
   movement controls stay in their familiar positions. */
#black-stage.seoul-seated .figure,#black-stage.seoul-seated .story,#black-stage.seoul-seated .hud{opacity:0!important;pointer-events:none!important;visibility:hidden}
#black-stage.seoul-place-focus .figure,#black-stage.seoul-place-focus .story,#black-stage.seoul-place-focus .hud{opacity:0!important;pointer-events:none!important;visibility:hidden}
.seoul-controls .seoul-place-target{position:absolute;z-index:6;display:grid;place-items:center;width:52px;height:52px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;transform:translate(-50%,-50%);touch-action:manipulation;cursor:pointer}
.seoul-place-target span{display:block;width:22px;height:22px;border:1px solid #dce5ec99;box-shadow:0 0 12px #02050b8c;background:#10192338}
.seoul-place-target span:before,.seoul-place-target span:after{content:'';position:absolute;left:50%;top:50%;width:7px;height:1px;transform:translate(-50%,-50%);background:#e7edf4}
.seoul-place-target span:after{transform:translate(-50%,-50%) rotate(90deg)}
.seoul-place-target:focus-visible{outline:1px solid #e0e8f0;outline-offset:1px}
.seoul-place-target[hidden]{display:none!important}