:root{color-scheme:dark;--paper:#f3e8cf;--muted:#c8bea6;--gold:#dfb66d;--ink:#152824;--line:#e3c99b36;font-family:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#192e2c}button,input,a{font:inherit}button{cursor:pointer;color:var(--paper);border:1px solid var(--line);background:#20332ee6;padding:14px 19px;border-radius:2px;transition:background .18s,border-color .18s}button:hover{background:#385047;border-color:#dfb66d88}button:disabled{opacity:.43;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffe1a3;outline-offset:4px}[hidden]{display:none!important}#stage{position:relative;width:100%;height:100%;isolation:isolate}#world{display:block;width:100%;height:100%;outline:none;touch-action:none}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 40%,#10251c44);z-index:1}#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:25px;padding:25px 32px;background:linear-gradient(#0f2429c9,transparent);z-index:3;pointer-events:none}.wordmark{font-size:24px;letter-spacing:.14em;white-space:nowrap}.wordmark span{display:block;font:10px/1.5 'Segoe UI',sans-serif;letter-spacing:.17em;color:var(--gold);margin-top:7px}#objective-block{margin-left:auto;max-width:440px;text-align:right}#location-label{font:10px/1.4 'Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ead7b1}#objective{display:block;font-size:17px;line-height:1.4;margin-top:6px;text-shadow:0 2px 9px #10221f}.icon-button{font:22px/1 'Segoe UI',sans-serif;padding:10px 14px;min-width:44px;min-height:44px;pointer-events:auto}#vitals{position:absolute;bottom:78px;left:32px;display:flex;gap:12px;align-items:center;z-index:3;pointer-events:none;background:#142b26dc;padding:12px 18px 12px 12px;border:1px solid var(--line)}.character-seal{display:grid;place-items:center;border:1px solid var(--gold);width:38px;height:38px;border-radius:50%;font-size:24px;color:var(--gold)}#character-name{font:600 11px 'Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase}#health-meter{width:140px;height:4px;background:#060f0c99;margin:9px 0 7px}#health-fill{display:block;height:100%;width:100%;background:var(--gold);transition:width .15s}#ability-label{font:10px 'Segoe UI',sans-serif;color:var(--muted)}#controls-strip{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:16px 20px;background:linear-gradient(transparent,#10201fe6);z-index:3;font:10px 'Segoe UI',sans-serif;color:#e6dfcc}kbd{font:9px 'Segoe UI',sans-serif;letter-spacing:.05em;border:1px solid #e2cfaa65;padding:3px 5px;color:#fff0d7;border-radius:2px;margin-right:4px}#context{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);padding:13px 19px;z-index:4;background:#18322cea;border:1px solid #d8b36d80;font:13px 'Segoe UI',sans-serif;max-width:55%;text-align:center;box-shadow:0 8px 32px #08150e33}#context kbd{display:inline-block;padding:5px 9px;font-size:13px;margin-right:8px}#compass{position:absolute;right:30px;bottom:90px;display:flex;align-items:center;gap:9px;background:#152d28dc;border:1px solid var(--line);padding:10px 15px;z-index:3;font:12px 'Segoe UI',sans-serif}#direction-arrow{font-size:24px;color:var(--gold);display:inline-block}#toast{position:absolute;top:max(105px,calc(var(--hud-bottom,0px) + 10px));left:50%;transform:translateX(-50%);max-width:65%;background:#152e28ed;padding:13px 22px;border-left:2px solid var(--gold);z-index:7;font:14px/1.5 'Segoe UI',sans-serif;text-align:center}#save-warning{position:absolute;bottom:58px;right:20px;max-width:360px;padding:10px;background:#582d22f0;color:#fff0d4;z-index:30;font:12px/1.4 'Segoe UI',sans-serif}.screen{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center}.title-screen{justify-content:flex-start;background:linear-gradient(90deg,#102b29f5 0%,#142e2bdc 26%,#19312b66 51%,transparent 75%)}.title-copy{margin-left:7vw;width:min(560px,60vw);padding:30px 0}.eyebrow{font:10px/1.6 'Segoe UI',sans-serif;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}.title-rule{width:58px;border-top:1px solid var(--gold);margin:26px 0}h1{font-weight:400;font-size:clamp(44px,5.7vw,92px);line-height:1;letter-spacing:.035em;margin:0;color:#fff0d6;text-shadow:0 4px 35px #172a22}p.subtitle{font-size:clamp(23px,2.3vw,36px);font-style:italic;color:#e9ca90;margin:10px 0 28px}.intro-description{font:14px/1.9 'Segoe UI',sans-serif;color:#e0ddcc}.title-actions{display:flex;flex-direction:column;gap:12px;max-width:315px;margin-top:30px}.primary{background:var(--paper);color:#17332d;border-color:var(--paper);font:600 13px 'Segoe UI',sans-serif;letter-spacing:.025em;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;min-height:49px}.primary:hover{background:#ffefce;color:#10261f}.primary span{font:24px Georgia,serif}.title-links{display:flex;gap:20px}.quiet-button{border:0;background:none;padding:10px 0;color:#d7c7a7;font:11px 'Segoe UI',sans-serif;text-align:left}.quiet-button:hover{background:none;color:#fff1cf}.title-footnote{font:11px/1.8 'Segoe UI',sans-serif;color:#b8bca8;margin-top:35px}.title-side{position:absolute;right:30px;bottom:42px;display:flex;align-items:center;gap:14px;color:#ffefcd;font:9px 'Segoe UI',sans-serif;letter-spacing:.17em}.title-side i{height:1px;width:50px;background:var(--gold)}#loading-status{position:absolute;right:30px;top:30px;font:11px 'Segoe UI',sans-serif;color:var(--paper)}#continue-label{font:11px 'Segoe UI',sans-serif;color:var(--muted)}.shade{background:#081b22b0;backdrop-filter:blur(8px)}.panel{width:min(460px,calc(100vw - 36px));max-height:88vh;overflow:auto;background:#152e2cef;border:1px solid #d1b88755;padding:32px;box-shadow:0 30px 80px #0005}.panel h2{font-size:31px;line-height:1.15;font-weight:400;margin:9px 0 22px;color:#f5e6c8}.panel p{font:13px/1.75 'Segoe UI',sans-serif;color:#d2d0bd}.panel>.primary,.pause-panel>button,.panel>#confirm-cancel,.panel>#result-menu{width:100%;margin-top:11px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.panel-heading .icon-button{border:0}.journal-panel{width:min(790px,calc(100vw - 36px))}.chapter-group{border-top:1px solid var(--line);padding:15px 0}.chapter-group h3{font-size:20px;font-weight:400;margin:0 0 10px}.chapter-group h3 small{font:10px 'Segoe UI',sans-serif;color:var(--gold);margin-left:12px}.scene-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.scene-button{text-align:left;font:12px/1.5 'Segoe UI',sans-serif;padding:10px 12px}.scene-button span{color:var(--gold);margin-right:10px;font-size:10px}.scene-button.current{border-color:var(--gold);background:#3b4e3e}.small-print{font-size:11px!important;color:#adaf9c!important}.control-list{font:12px/1.5 'Segoe UI',sans-serif}.control-list div{display:flex;justify-content:space-between;gap:20px;padding:6px 0;border-bottom:1px solid #fff1}.control-list dt{color:var(--gold)}.control-list dd{margin:0;text-align:right;color:#e5dfcb}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;font:13px 'Segoe UI',sans-serif;border-bottom:1px solid #fff1}input[type=range]{width:135px;accent-color:var(--gold)}input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px}.source-panel{width:min(570px,calc(100vw - 36px))}.source-panel a{color:#edc882}.letterbox{position:absolute;left:0;right:0;z-index:5;background:#0b1d20f5;pointer-events:auto}.letterbox.top{top:0;height:70px;padding:26px 32px;display:flex;justify-content:space-between;font:10px 'Segoe UI',sans-serif;letter-spacing:.18em;color:var(--gold)}.letterbox.bottom{bottom:0;min-height:170px;padding:24px 34px 20px;display:flex;align-items:flex-end;gap:25px}.scene-caption{max-width:850px;flex:1}#cinema-speaker{font:600 11px 'Segoe UI',sans-serif;letter-spacing:.17em;color:var(--gold);text-transform:uppercase}#cinema-text{font-size:22px;line-height:1.45;color:#f3e8d4;margin:9px 0 13px}#cinema-title{font:10px 'Segoe UI',sans-serif;color:#9eaf9e;letter-spacing:.08em}.cinema-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:340px}.cinema-actions button{font:10px 'Segoe UI',sans-serif;padding:10px 12px;background:transparent}.film-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#37433a}.film-progress i{display:block;height:100%;background:var(--gold)}body.large-subtitles #cinema-text{font-size:28px}#touch-controls{position:absolute;bottom:14px;left:15px;right:15px;z-index:4;display:flex;justify-content:space-between;pointer-events:none}#touch-controls button{pointer-events:auto;touch-action:none;user-select:none;min-width:48px;min-height:46px;padding:9px;background:#18312bdd;font:12px 'Segoe UI',sans-serif}#touch-pad{display:grid;grid-template:repeat(2,46px)/repeat(3,48px);gap:4px}#touch-pad [data-move=up]{grid-column:2}#touch-pad [data-move=left]{grid-row:2;grid-column:1}#touch-pad [data-move=down]{grid-row:2;grid-column:2}#touch-pad [data-move=right]{grid-row:2;grid-column:3}.touch-actions{display:grid;grid-template-columns:repeat(2,55px);gap:4px}
@media(max-width:800px){#hud{padding:15px;gap:12px}.wordmark{font-size:17px}.wordmark span{font-size:8px;letter-spacing:.09em;max-width:150px}#objective-block{max-width:50vw}#objective{font-size:14px}#location-label{font-size:8px}#controls-strip{gap:8px;font-size:8px;padding:12px 8px}#vitals{left:15px;bottom:65px;padding:8px}#health-meter{width:90px}#compass{right:15px;bottom:65px}#context{bottom:135px;max-width:80%;width:max-content;font-size:11px}#toast{top:max(95px,calc(var(--hud-bottom,0px) + 8px));max-width:90%;font-size:12px;width:max-content}.title-copy{margin-left:6vw;width:85vw}.title-screen{background:linear-gradient(90deg,#102b29ed,#142e2b9a 65%,#142e2b33)}.title-side{display:none}.title-footnote{margin-top:20px}.intro-description{font-size:12px}.title-actions{margin-top:22px}.title-rule{margin:18px 0}.letterbox.top{height:50px;padding:18px;font-size:8px}.film-label{display:none}.letterbox.bottom{padding:17px;min-height:175px;display:block}#cinema-text{font-size:18px}.cinema-actions{max-width:none;justify-content:flex-end;margin-top:10px}.cinema-actions button{padding:7px 9px}.scene-list{grid-template-columns:1fr}.panel{padding:24px}body.large-subtitles #cinema-text{font-size:23px}}
@media(pointer:coarse){#controls-strip{display:none!important}#vitals{bottom:125px}#compass{bottom:125px}#context{bottom:185px}#save-warning{bottom:115px}}
@media(max-height:560px){.title-copy{padding:15px 0}.title-rule,.title-footnote{display:none}h1{font-size:45px}p.subtitle{font-size:23px;margin:8px 0 14px}.intro-description{font-size:12px}.title-actions{margin-top:16px;gap:8px}.letterbox.bottom{min-height:120px;padding:12px 22px}#cinema-text{font-size:17px;margin:6px 0}.letterbox.top{height:43px;padding:14px 25px}.panel{max-height:94vh;padding:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Readable, contextual play information. */
#hud{padding:22px 28px;gap:22px;background:linear-gradient(#102620e8,transparent)}
.wordmark{font-size:22px}.wordmark span,#location-label{font-size:11px;letter-spacing:.1em}
#objective-block{padding:12px 16px;max-width:460px;background:#142b26d9;border-left:2px solid var(--gold);text-align:left}
#objective{font-size:21px;margin-top:4px;line-height:1.3}
#vitals{bottom:84px}#character-name{font-size:12px}#health-meter{height:7px;width:154px}#ability-label{font-size:11px}
#controls-strip{gap:20px;font-size:12px;padding:18px 20px}kbd{font-size:11px;padding:4px 6px}
#context{bottom:90px;max-width:min(560px,48%);font-size:15px;line-height:1.5;padding:12px 18px;box-shadow:0 4px 18px #0a1b2044}
#target-panel{position:absolute;top:120px;left:28px;min-width:225px;padding:12px 16px;z-index:4;pointer-events:none;background:#182e2ce8;border:1px solid #dfb66d70}
#target-name{font:600 16px 'Segoe UI',sans-serif;color:var(--paper)}#target-meter{height:6px;margin:9px 0;background:#091a18}#target-health{display:block;height:100%;background:#dcb06b;transition:width .15s}
#target-state{display:block;font:12px/1.4 'Segoe UI',sans-serif;color:#dfd1b5}#target-panel.incoming{border-color:#f2a474;background:#4a2925ec}#target-panel.incoming #target-state{color:#ffd6a8}
#charge-panel{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);z-index:4;background:#142c28ed;padding:10px 16px;min-width:225px;text-align:center;font:13px 'Segoe UI',sans-serif;pointer-events:none}.charge-track{height:5px;background:#061510;margin-top:8px}#charge-fill{display:block;height:100%;background:#edca82}
#cinema-pacing{display:block;margin-top:8px;font:12px/1.4 'Segoe UI',sans-serif;color:#d6c6a6}
#objective-progress{display:block;margin-top:7px;font:11px/1.4 'Segoe UI',sans-serif;letter-spacing:.04em;color:#d4cbb6}
#action-readiness{position:absolute;left:28px;top:221px;display:flex;flex-wrap:wrap;gap:6px;max-width:350px;z-index:3;pointer-events:none;font:11px/1.4 'Segoe UI',sans-serif}
#action-readiness span{padding:6px 9px;color:#d0bd9c;background:#26352fe8;border:1px solid #ad94734d}
#action-readiness .ready{color:#f2deb4;border-color:#d5b26a80;background:#233d31ed}
#touch-controls button{min-width:56px;min-height:52px}#touch-pad{grid-template:repeat(2,52px)/repeat(3,56px)}.touch-actions{grid-template-columns:repeat(2,minmax(64px,1fr))}
@media(max-width:800px){#action-readiness{left:14px;top:214px;max-width:280px;font-size:10px}#objective-progress{font-size:10px}#target-panel{max-width:240px}}
@media(pointer:coarse){#vitals{bottom:186px}#compass{bottom:186px}#context{bottom:255px}#charge-panel{bottom:315px}}
@media(max-height:560px){#action-readiness{top:182px}.touch-actions{grid-template-columns:repeat(3,58px)}#touch-controls button{min-width:48px;min-height:46px}#touch-pad{grid-template:repeat(2,46px)/repeat(3,48px)}}
.letterbox.top{font-size:12px;height:62px;padding:22px 30px}.letterbox.bottom{padding:22px 30px;min-height:184px}.scene-caption{max-width:790px}#cinema-speaker{font-size:12px}#cinema-title{font-size:11px}#cinema-text{font-size:24px;line-height:1.4;margin:8px 0}
.cinema-actions{max-width:340px}.cinema-actions button{font-size:12px;min-height:44px;padding:11px 14px}#cinema-next{background:var(--paper);color:#18332b;border-color:var(--paper)}#cinema-next kbd{color:#18332b;border-color:#536a5b88}#cinema-skip{color:#bcbca8;border-color:transparent}
.title-footnote{max-width:320px}.control-list{font-size:13px}.control-list div{padding:8px 0}.setting{font-size:14px}
@media(max-width:800px){#hud{padding:14px;gap:10px}.wordmark{font-size:17px}.wordmark span{font-size:10px;max-width:125px}#objective-block{max-width:52vw;padding:9px 11px}#location-label{font-size:10px}#objective{font-size:16px}#vitals{left:14px;bottom:72px}#health-meter{width:100px}#context{bottom:150px;max-width:88%;font-size:13px;width:max-content}#target-panel{top:118px;left:14px;min-width:190px;padding:10px 12px}#target-name{font-size:14px}#target-state{font-size:11px}#controls-strip{gap:9px;font-size:10px;padding:14px 8px}#controls-strip kbd{font-size:10px}#charge-panel{bottom:208px}.letterbox.top{height:48px;padding:16px;font-size:10px}.letterbox.bottom{padding:16px;min-height:188px}#cinema-text{font-size:20px}.cinema-actions button{font-size:11px;min-height:44px}#cinema-pacing{font-size:11px}.cinema-actions{max-width:none}}
@media(pointer:coarse){#vitals{bottom:130px}#context{bottom:192px}#charge-panel{bottom:250px}}
@media(max-height:560px){#hud{padding:12px 20px}#objective-block{padding:7px 12px}#objective{font-size:16px}#target-panel{top:95px;min-width:190px;padding:8px 12px}#context{bottom:70px;font-size:12px;padding:8px 12px}#vitals{bottom:65px}#charge-panel{bottom:120px}.letterbox.bottom{min-height:135px;padding:12px 20px}#cinema-text{font-size:18px}#cinema-pacing{font-size:10px;margin-top:5px}.letterbox.top{height:40px;padding:13px 22px}}


/* Six touch actions need a clear lower safe area. */
@media(pointer:coarse){#vitals{bottom:186px}#compass{bottom:186px}#context{bottom:255px}#charge-panel{bottom:315px}}
@media(pointer:coarse) and (max-height:560px){#vitals{bottom:126px}#compass{bottom:126px}#context{bottom:185px}#charge-panel{bottom:235px}}

/* Keep the playfield and held controls usable on narrow touch screens. */
@media(pointer:coarse) and (max-width:600px){
 #hud{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:12px}
 #hud .wordmark{display:none}#objective-block{margin:0;max-width:none;min-width:0}
 #touch-controls{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:10px;align-items:end}
 #touch-pad{grid-template:repeat(2,52px)/repeat(3,44px);gap:4px}
 #touch-controls button{min-width:44px;min-height:52px;padding:6px;font-size:12px}
 .touch-actions{grid-template-columns:repeat(2,64px);gap:4px}
 #vitals,#compass{bottom:calc(188px + env(safe-area-inset-bottom))}
 #context{bottom:calc(265px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);font-size:12px;padding:9px 12px}
 #charge-panel{bottom:calc(318px + env(safe-area-inset-bottom));min-width:190px}
 #action-readiness{max-width:calc(100% - 28px)}
}
@media(pointer:coarse) and (max-height:560px) and (orientation:landscape){
 #hud{left:0;right:0;width:auto;padding:8px 12px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:start}
 #hud .wordmark{display:none}#objective-block{max-width:none;margin:0;min-width:0;padding:5px 10px}
 #location-label{font-size:9px;line-height:1.2;letter-spacing:.06em}
 #objective{font-size:15px;line-height:1.2;margin-top:3px}
 #objective-progress{display:none}
 #target-panel{top:72px;left:12px;min-width:0;width:40%;max-width:210px;padding:6px 9px}
 #target-name{font-size:12px}#target-meter{height:4px;margin:5px 0}#target-state{font-size:10px;line-height:1.25}
 #action-readiness{display:none!important}
 #touch-pad{grid-template:repeat(2,44px)/repeat(3,44px)}
 .touch-actions{grid-template-columns:repeat(3,56px)}
 #touch-controls button{min-height:44px;min-width:44px}
 #vitals,#compass{bottom:calc(112px + env(safe-area-inset-bottom))}
 #vitals{left:12px;width:120px;min-height:38px;padding:6px 8px;gap:0}
 #character-initial,#ability-label{display:none}
 #character-name{font-size:10px;letter-spacing:.06em}
 #health-meter{width:102px;height:5px;margin:5px 0 0}
 #compass{right:12px;padding:5px 8px;gap:6px;font-size:11px}#direction-arrow{font-size:18px}
 #context{top:72px;bottom:auto;left:auto;right:12px;transform:none;max-width:45%;font-size:11px;line-height:1.3;padding:6px 9px}
 #charge-panel{bottom:calc(112px + env(safe-area-inset-bottom));min-width:170px;padding:6px 10px;font-size:11px}
}

#conversation{position:absolute;z-index:30;right:4vw;bottom:6vh;width:min(460px,92vw);max-height:85dvh;overflow:auto;padding:24px;background:#f4ead4;color:#241c15;border:1px solid #ad8858;box-shadow:0 12px 40px #0007}#conversation h2{font-size:26px;margin:8px 0}#conversation p{line-height:1.5}#conversation-options{display:grid;gap:10px}#conversation-options button{min-height:48px;text-align:left;white-space:normal}#conversation-options button:disabled{opacity:.6}#conversation-options button:focus-visible{outline:3px solid #805619;outline-offset:3px}@media(max-width:600px){#conversation{right:4vw;bottom:3vh;padding:16px}}
/* Boat camera remains independent of the directional controls on keyboard and touch. */
#river-look{position:fixed;right:18px;top:max(105px,calc(var(--hud-bottom,0px) + 10px));z-index:15;min-height:44px;max-width:240px;background:#f1e4c9;color:#252b25;border:1px solid #75694f;padding:10px 14px}
#river-look[hidden]{display:none}

/* Hit feedback (Phase 2): a red flash at the screen edge when the hero is hurt. */
#vignette{transition:background .12s}#vignette.hurt{background:radial-gradient(ellipse at 50% 45%,transparent 46%,#8b1f1488)}
#stealth-panel{position:absolute;top:110px;left:50%;transform:translateX(-50%);z-index:4;background:#142c28ed;padding:8px 14px;min-width:200px;text-align:center;font:12px 'Segoe UI',sans-serif;pointer-events:none}#stealth-fill{display:block;height:100%;width:0;background:#e9cf8a;transition:width .1s}#stealth-panel.seen #stealth-fill{background:#e0543a}

#bark{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);max-width:min(720px,86%);padding:10px 18px;background:#0d1f1bd9;border-top:1px solid var(--gold);z-index:7;font:15px/1.55 Georgia,serif;text-align:center;font-style:italic;transition:opacity .4s}#bark b{display:block;font:600 11px/1.4 'Segoe UI',sans-serif;letter-spacing:.14em;color:var(--gold);font-style:normal;text-transform:uppercase}#bark b:empty{display:none}.reflections{margin-top:18px}.reflections h3{margin:0 0 8px}.reflection{margin:0 0 12px;padding-left:12px;border-left:2px solid var(--gold)}.reflection small{display:block;opacity:.7;font-size:11px;letter-spacing:.08em}.reflection p{margin:4px 0 0;font:14px/1.55 Georgia,serif;font-style:italic}@media (max-width:720px){#bark{bottom:190px;font-size:13px}}
/* HUD layout (hud-layout.js): while the look-back button stands under the objective panel, the toast
   chip drops below the button, so the two never share a row at any width. */
#stage:has(#river-look:not([hidden])) #toast{top:calc(var(--hud-bottom,95px) + 64px)}

/* Story sequence (story-sequence.js): the painted image of the current story beat, under the letterbox and subtitles. */
#story-stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:#05100e;pointer-events:none}
#story-stage .story-layer{position:absolute;inset:0;overflow:hidden}
#story-stage .story-art{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
#story-stage .story-pic{width:100%;height:100%;object-fit:cover;display:block}
#story-stage .story-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:90px 10vw;background:radial-gradient(ellipse at 50% 40%,#2a3b33,#0d1b17);color:var(--paper);border:6px solid var(--gold)}
#story-stage .story-card-tag{font-size:14px;letter-spacing:.2em;color:var(--gold)}
#story-stage .story-card-id{font-size:clamp(40px,7vw,96px);font-weight:700}
#story-stage .story-card-place{font-size:clamp(18px,2.4vw,32px);max-width:900px;line-height:1.35}
.wordmark-name{font-weight:inherit}

/* online mode */
#sync-status{position:absolute;bottom:20px;left:20px;z-index:30;padding:5px 10px;background:#152e2ccc;border:1px solid #d1b88744;color:#d7c7a7;font:11px/1.4 'Segoe UI',sans-serif;pointer-events:none}
.signin-panel{width:min(540px,calc(100vw - 36px))}
.signin-panel h3{font:11px 'Segoe UI',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:22px 0 6px}
.privacy-list{margin:0 0 14px;padding-left:18px;font:12px/1.6 'Segoe UI',sans-serif;color:#cfcdb9}
#google-button{min-height:44px;margin:14px 0 4px}
#signin-status{min-height:20px;color:#f0c9a0}
a.quiet-button{display:inline-block;text-decoration:none}
.wall-link{display:block;margin-top:11px;color:#f5e6c8;font:13px 'Segoe UI',sans-serif;text-align:center}
.account-section{margin:14px 0;padding:12px 0;border-top:1px solid #d1b88733}
.account-section p{margin:0 0 8px}
.account-section button{margin-right:10px}
/* Story films (story-video.js): intro before a new journey, ending after 9D. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#video-screen{z-index:14;background:#000;display:block}#video-screen[hidden]{display:none}
#story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#story-video::cue{font:600 clamp(16px,2.4vw,28px) Georgia,serif;color:#fff;background:rgba(0,0,0,.6)}
body.large-subtitles #story-video::cue{font-size:clamp(22px,3.4vw,40px)}
#video-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--paper);font:16px/1.5 Georgia,serif;letter-spacing:.08em;pointer-events:none}
#video-loading[hidden]{display:none}
.video-controls{position:absolute;left:0;right:0;top:0;display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:14px 22px;background:linear-gradient(rgba(0,0,0,.65),transparent);font:12px/1.4 'Segoe UI',sans-serif;color:#ded2b8}
.video-controls small{margin-right:auto;opacity:.8}.video-controls button{min-height:44px;min-width:44px;padding:10px 16px}

/* ==== DARBAR THEME (owner 2026-11-09: "that touch of Indian royalty", across the whole game) ====
   Carved teak and gold leaf of a royal court: jharokha arch over the objective, gold double rules and corner
   brackets on every panel, a Suryavansh sun seal for the hero, saffron and vermilion as the only strong colours.
   Fonts: Marcellus (labels, UI), Cormorant Garamond (titles, story, speech), Tiro Devanagari Hindi (Hindi), all OFL,
   self-hosted in vendor/fonts. Ornaments: ui/darbar/*.svg from tools/gen-darbar-ui.mjs.
   This block only restyles: colours, borders, fonts, ornaments. Positions and the phone layouts above are untouched,
   except the objective panel, which takes the jharokha shape. */
@font-face{font-family:'Marcellus';src:url(vendor/fonts/marcellus-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(vendor/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(vendor/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(vendor/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(vendor/fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Tiro Devanagari Hindi';src:url(vendor/fonts/tiro-devanagari-hindi-devanagari-400-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;font-display:swap}
:root{--paper:#f6e9cc;--muted:#e2cc9c;--gold:#d8a843;--goldl:#f3d58a;--ink:#2a1810;--line:#d8a84366;--teak:#2c190f;--teak2:#3f2617;--saff:#e07b26;--verm:#a92a1c;
 --f-ui:'Marcellus','Tiro Devanagari Hindi',Georgia,serif;--f-story:'Cormorant Garamond','Tiro Devanagari Hindi',Georgia,serif;
 --panel-bg:linear-gradient(160deg,#3f2617f2,#22120af2);--panel-rule:inset 0 0 0 3px #22120a,inset 0 0 0 4px #d8a84380;
 font-family:var(--f-ui)}
html,body{background:#1a0d07}
#stage *{font-family:var(--f-ui)!important}
#stage #objective,#stage #cinema-text,#stage #bark,#stage #toast,#stage .title-copy h1,#stage p.subtitle,#stage .panel h2,#stage #conversation h2,#stage #conversation p,#stage .story-card,#stage .scene-caption,#stage .reflection,#stage .chapter-group h3,#stage .intro-description,#stage .wordmark-name{font-family:var(--f-story)!important}
#stage #cinema-next{background:linear-gradient(#f6dc93,#c9962f);color:#2a1810;border:1px solid #7a5418}
#stage #cinema-next kbd{background:#2a1810;color:var(--goldl);border-color:var(--gold)}
/* buttons */
button{color:var(--paper);border:1px solid var(--gold);background:linear-gradient(#3f2617e6,#2a160ce6);border-radius:3px;letter-spacing:.04em}
button:hover{background:linear-gradient(#5a3820,#3a2112);border-color:var(--goldl)}
.primary{background:linear-gradient(#f6dc93,#c9962f);color:#2a1810;border:1px solid #7a5418;box-shadow:inset 0 1px 0 #fff3c4,0 3px 10px #0006}
.primary:hover{background:linear-gradient(#fbe7ad,#d8a843);color:#1a0d07}
kbd{color:#2a1810;background:linear-gradient(#f6dc93,#c9962f);border:1px solid #7a5418;border-radius:2px;padding:2px 6px}
/* top band and wordmark */
#hud{background:linear-gradient(#1a0d07c4,transparent)}
.wordmark{color:var(--goldl);text-shadow:0 2px 10px #000c;letter-spacing:.2em}
.wordmark span,#chapter-label{color:#ffe0a6;letter-spacing:.16em}
/* objective: a slim gilded label (owner 2026-11-09: the jharokha arch took too much space and hid the game).
   A gold rule on the right with a small lotus at its head, text on a soft shade that fades into the scene. */
#objective-block{position:relative;margin-top:2px;max-width:min(340px,32vw);text-align:right;padding:6px 16px 7px 40px;background:linear-gradient(90deg,transparent,#1a0d07b8 34%);border-right:2px solid var(--gold)}
#objective-block:before{content:"";position:absolute;right:-9px;top:-12px;width:16px;height:16px;background:url(ui/darbar/lotus.svg) center/contain no-repeat}
#location-label{display:block;color:var(--goldl);letter-spacing:.18em;font-size:9px}
#objective{display:block;color:#fff3d6;font-size:17px;font-weight:600;line-height:1.2;margin-top:2px;text-shadow:0 1px 6px #000c}
#objective-progress{display:block;margin-top:2px;color:#e9cf95;font-size:10px;letter-spacing:.06em;text-shadow:0 1px 4px #000c}
.icon-button{border-radius:50%;background:radial-gradient(#3f2617,#22120a);border:1.5px solid var(--gold);color:var(--goldl)}
/* panels on the playfield */
#vitals,#target-panel,#compass,#context,#charge-panel,#stealth-panel,#toast{background:var(--panel-bg);border:1.5px solid var(--gold);box-shadow:var(--panel-rule),0 8px 22px #0007;color:var(--paper)}
#vitals{border-radius:46px 6px 6px 46px;padding:10px 20px 10px 10px}
.character-seal{width:52px;height:52px;border:0;font-size:22px;color:#2a1810;background:radial-gradient(circle,#ffe9a8 0 38%,#e07b26 58%,transparent 60%),repeating-conic-gradient(#d8a843 0 7deg,transparent 7deg 15deg);border-radius:50%;box-shadow:0 0 0 2px #1a0d07,0 0 0 3.5px var(--gold)}
#character-name{color:var(--goldl);font-size:13px;letter-spacing:.18em}
#health-meter,#target-meter{position:relative;height:8px;background:#120a06;border:1px solid var(--gold);overflow:visible}
#health-meter:before,#health-meter:after,#target-meter:before,#target-meter:after{content:"";position:absolute;top:50%;width:7px;height:7px;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
#health-meter:before,#target-meter:before{left:-5px}
#health-meter:after,#target-meter:after{right:-5px}
#health-fill{background:linear-gradient(90deg,#b8862a,#f4d27a)}
#target-health{background:linear-gradient(90deg,#7d1d12,#c4391f)}
#ability-label,#target-state{color:#e6cf9c;letter-spacing:.08em}
#target-name{color:#ffd28a;font-size:15px}
#compass{border-radius:50%;width:84px;height:84px;padding:0;justify-content:center;flex-direction:column;gap:0;background:repeating-conic-gradient(#d8a84333 0 2deg,transparent 2deg 45deg),radial-gradient(circle,#3f2617,#1a0d07)}
#direction-arrow{color:var(--saff);font-size:26px;text-shadow:0 0 6px #f3d58a88}
#distance{color:var(--goldl);font-size:12px}
#context{border-radius:3px;font-size:15px}
#toast{border-left:1.5px solid var(--gold)}
#bark{background:linear-gradient(90deg,transparent,#22120ae6 18%,#22120ae6 82%,transparent);border-top:0;border-bottom:1px solid var(--gold);color:#fff0d0;font-size:17px}
#bark:before{content:"";display:block;height:14px;margin:-4px auto 4px;width:160px;background:url(ui/darbar/divider.svg) center/contain no-repeat}
#action-readiness span{background:#22120ad9;border:1px solid #d8a84380;color:#f3dfb4;border-radius:12px;padding:2px 9px}
#controls-strip{background:linear-gradient(transparent,#1a0d07ee 45%);color:#f1dfb8}
#controls-strip:before{content:"";position:absolute;left:0;right:0;top:12px;height:7px;background:url(ui/darbar/jali.svg) repeat-x center/16px 7px;opacity:.6}
/* screens and panels */
.shade{background:#120804b8;backdrop-filter:blur(6px)}
.panel{background:url(ui/darbar/corner-tl.svg) left 5px top 5px no-repeat,url(ui/darbar/corner-tr.svg) right 5px top 5px no-repeat,url(ui/darbar/corner-bl.svg) left 5px bottom 5px no-repeat,url(ui/darbar/corner-br.svg) right 5px bottom 5px no-repeat,linear-gradient(160deg,#3f2617f5,#22120af5);border:1.5px solid var(--gold);box-shadow:var(--panel-rule),0 30px 80px #000a;color:var(--paper)}
.panel h2{color:#fff0d0;font-weight:600;font-size:32px}
.panel h2:after{content:"";display:block;width:160px;height:14px;margin-top:10px;background:url(ui/darbar/divider.svg) left center/contain no-repeat}
.panel p{color:#ead8b0}
.eyebrow{color:var(--goldl);letter-spacing:.24em}
.title-screen{background:linear-gradient(90deg,#1a0d07f5 0%,#22120ae0 28%,#2a160c70 52%,transparent 76%)}
.title-copy h1{color:var(--goldl);font-weight:600;letter-spacing:.08em;text-shadow:0 4px 30px #000}
p.subtitle{color:#f0c97e}
.title-rule{border-top:0;height:14px;width:160px;background:url(ui/darbar/divider.svg) left center/contain no-repeat}
.quiet-button{color:#e8cf9a;background:none;border:0}
.quiet-button:hover{color:var(--goldl);background:none}
.setting,.control-list div{border-bottom:1px solid #d8a84333}
.control-list dt{color:var(--goldl)}
.scene-button{background:linear-gradient(#3f2617d9,#2a160cd9)}
.scene-button.current{background:linear-gradient(#6a4422,#3f2617);border-color:var(--goldl)}
.chapter-group{border-top:1px solid #d8a84340}
.chapter-group h3 small,.scene-button span{color:var(--goldl)}
/* story letterbox and captions */
.letterbox{background:linear-gradient(#1a0d07f7,#22120af7)}
.letterbox.top{color:var(--goldl);border-bottom:1px solid #d8a84366}
.letterbox.bottom{border-top:1px solid #d8a84366}
.letterbox.bottom:before{content:"";position:absolute;left:0;right:0;top:4px;height:7px;background:url(ui/darbar/jali.svg) repeat-x center/16px 7px;opacity:.5}
#cinema-speaker{color:var(--saff);letter-spacing:.2em}
#cinema-text{color:#fff0d4;font-size:25px;font-weight:500}
#cinema-title{color:#c9b083}
.film-progress{background:#3a2414}
.film-progress i{background:linear-gradient(90deg,#c9962f,#f3d58a)}
/* conversation keeps its ivory leaf, framed in gold */
#conversation{background:url(ui/darbar/corner-tl.svg) left 6px top 6px no-repeat,url(ui/darbar/corner-br.svg) right 6px bottom 6px no-repeat,linear-gradient(#f8ecd0,#ecd9ad);border:1.5px solid var(--gold);box-shadow:inset 0 0 0 3px #f8ecd0,inset 0 0 0 4px #a92a1c99,0 12px 40px #0008;color:#2a1810}
#conversation small{color:var(--verm);letter-spacing:.2em}
#conversation h2{color:#1f2f63;font-weight:700}
#conversation-options button{background:linear-gradient(#3f2617,#2a160c);color:var(--paper)}
/* S5/S7 meters: slim gilded bars, high and centred, clear of barks and prompts (hud-layout.js installMeterHud); no panels, no words */
#meter-stack{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:7px;width:min(280px,56vw);pointer-events:none}
.meter-row{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px}
.meter-bar{position:relative;width:100%;height:6px;background:#120a06cc;border:1px solid var(--gold);box-shadow:0 2px 8px #0008}
.meter-bar:before,.meter-bar:after{content:"";position:absolute;top:50%;width:6px;height:6px;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
.meter-bar:before{left:-5px}.meter-bar:after{right:-5px}
.meter-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c9962f,#f3d58a);transition:width .08s linear}
.meter-pips{display:flex;gap:6px;height:7px}
.meter-pips b{width:6px;height:6px;border:1px solid var(--gold);background:#120a06cc;transform:rotate(45deg)}
.meter-pips b.done{background:var(--goldl)}
.meter-row[data-meter=endure][data-state=calm] .meter-bar{opacity:.55}
.meter-row[data-meter=endure][data-state=surge] .meter-bar{box-shadow:0 0 10px #f3d58a99}
.meter-row[data-meter=draw][data-state=ready] .meter-bar i{background:linear-gradient(90deg,#f3d58a,#fff3c8)}
.meter-row[data-meter=ally] .meter-bar i{background:linear-gradient(90deg,#4f7d52,#a8d08a)}
.meter-row[data-meter=ally][data-state=low] .meter-bar i{background:linear-gradient(90deg,#a92a1c,#e07b26)}
.meter-row[data-meter=windup] .meter-bar i{background:linear-gradient(90deg,#a92a1c,#e65a3a)}
#conversation-options button.locked{opacity:.5}
#conversation-options button.locked:before{content:"\25C7  "}
.meter-cap{font:600 11px Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--goldl);text-shadow:0 1px 4px #000c}

.panel>#retry-error-button,.panel>#reload-button{width:100%;margin-top:11px}
/* Credits screen (credits-screen.js) and the title links row with five entries */
.title-links{flex-wrap:wrap;column-gap:20px;row-gap:0}.credits-list p{margin:0 0 10px}.credits-list p.credit-attr{font-size:12px;padding-left:14px;border-left:1px solid var(--line);overflow-wrap:anywhere}.credits-list p.credit-note{font-size:11px;color:#c9b993}
/* hud-prompts.js: a danger warning takes the one instruction slot in the alarm colour of the target panel */
#context.danger{border-color:#f2a474;background:#4a2925ec;color:#ffd6a8}