:root{color-scheme:dark;--ink:#101614;--panel:#151d19;--line:#354039;--text:#ecebe2;--muted:#abb6a9;--accent:#d5bb80;font-family:Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--ink);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{border:0}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none;outline:0}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 42%,#03090665 100%)}#hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:max(25px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) 46px;background:linear-gradient(#050b0be0,transparent);pointer-events:none}#hud>*{pointer-events:auto}.brand{display:flex;gap:12px;align-items:center;background:none;letter-spacing:.22em;text-align:left;font-size:18px}.brand b{font-weight:400}.brand small{display:block;color:var(--accent);font-size:12px;letter-spacing:.14em;margin-top:7px}.brand-ring{border:1px solid #87917b;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-family:Georgia,serif;letter-spacing:-.08em;font-size:25px}.location{text-align:center}.eyebrow{font-size:12px;letter-spacing:.17em;line-height:1.6;color:var(--muted)}.accent{color:var(--accent)}.location strong{display:block;font-family:Georgia,serif;font-size:23px;font-weight:400;margin:4px 0}.location small{color:#c0c7b9;font-size:12px}nav{display:flex;gap:8px}.nav-button,.icon-button{background:#172019cc;border:1px solid #64735b70;border-radius:3px;padding:12px 16px;font-size:14px;backdrop-filter:blur(10px)}.nav-button span{margin-right:10px}.icon-button{font-size:20px;padding:8px 13px}.bottom-hud{position:fixed;left:32px;right:32px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.05em;text-shadow:0 2px 5px #000}.bottom-hud>div{display:flex;align-items:center;gap:9px}.mode-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.bottom-hud p{margin:0;color:#d5d9cf}.bottom-hud p span{margin:0 12px}kbd{font:12px Arial;padding:4px 6px;background:#162119a6;border:1px solid #6f806653;border-radius:3px}.bottom-hud button{background:#1b251c99;border:1px solid #677b5360;border-radius:3px;padding:9px 12px;font-size:13px}#crosshair{position:fixed;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#f9f5ddaa;box-shadow:0 0 4px #000;pointer-events:none;transform:translate(-50%,-50%)}#interaction{position:fixed;top:58%;left:50%;transform:translateX(-50%);border:1px solid #8b976a;background:#152017e8;padding:12px 20px;font-size:14px;max-width:90vw;border-radius:3px;white-space:nowrap}#interaction kbd{margin-right:10px}#levelRail{position:fixed;right:26px;top:36%;height:26%;display:flex;flex-direction:column;align-items:center;gap:12px;color:#bac3aa;font-size:12px;pointer-events:none}#levelRail>div{height:100%;width:1px;background:#ceddc640;position:relative}#depthMarker{position:absolute;left:-3px;width:7px;height:15px;background:var(--accent);border-radius:2px;top:0}#toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);opacity:0;transition:.2s;background:#142119ed;border:1px solid #788569;padding:14px 22px;text-align:center;font-size:14px;border-radius:4px;max-width:calc(100vw - 32px);pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#fade{position:fixed;inset:0;background:#0e1511;opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}#fade.show{opacity:1}dialog{color:var(--text);border:1px solid var(--line);padding:0}dialog::backdrop{background:#07100cac;backdrop-filter:blur(5px)}.welcome{width:calc(100% - 96px);height:calc(100% - 96px);max-width:1450px;max-height:900px;background:linear-gradient(90deg,#0e1715f0 0%,#0e1715be 38%,#0e171522 75%);border:1px solid #a1b18a45;border-radius:0;overflow:hidden}.welcome::backdrop{background:#050b0824;backdrop-filter:none}.welcome-top{display:flex;justify-content:space-between;margin:28px 34px}.edition{font-size:12px;color:#bec7b5;letter-spacing:.1em}.welcome-body{position:absolute;top:50%;left:6.2%;transform:translateY(-46%)}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(80px,11vw,160px);line-height:1;letter-spacing:-.025em;margin:15px 0 25px}h1 em{font-style:normal;color:var(--accent)}.welcome-body p{font-family:Georgia,serif;color:#c8cec0;font-size:clamp(18px,2vw,24px);line-height:1.55}.welcome-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}.primary{background:var(--accent);color:#111d16;padding:16px 25px;border:1px solid var(--accent);font-size:15px;font-weight:bold;border-radius:2px}.primary:hover{background:#ead8aa}.secondary{padding:15px 21px;background:#19231caf;border:1px solid #73826794;border-radius:2px;font-size:14px}.secondary:hover{background:#304031}.secondary span{margin-left:18px}.welcome-meta{display:flex;gap:23px;color:#8fa088;font-size:12px;letter-spacing:.06em;margin-top:29px}.welcome footer{position:absolute;left:34px;right:34px;bottom:22px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#afbaa9}.welcome footer button{font-size:12px;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.panel{width:580px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 36px);background:var(--panel);border-radius:6px;box-shadow:0 30px 100px #0008}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px 20px;border-bottom:1px solid var(--line)}h2{font-family:Georgia,serif;font-size:29px;font-weight:400;margin:5px 0 0}.close{font-size:29px;background:none;color:var(--muted);width:40px;height:40px}.directory-tabs{display:flex;gap:22px;margin:0 26px;border-bottom:1px solid var(--line)}.directory-tabs button{padding:18px 0 14px;background:none;font-size:14px;color:var(--muted);border-bottom:2px solid transparent}.directory-tabs button.active{color:var(--accent);border-color:var(--accent)}.search{display:flex;align-items:center;gap:12px;margin:18px 26px;background:#0e1712;border:1px solid var(--line);padding:11px 13px;border-radius:3px}.search input{width:100%;color:var(--text);border:0;background:transparent;outline:0;font-size:15px}.search>span{font-size:24px;color:var(--muted)}.location-list{max-height:48dvh;overflow:auto;padding:0 14px 12px;scrollbar-color:#5f715d transparent}.location-item{display:flex;width:100%;text-align:left;align-items:center;gap:17px;padding:16px 12px;border-bottom:1px solid #303e31;background:none}.location-item:hover{background:#253428}.location-number{font-family:Georgia,serif;font-size:27px;color:var(--accent);min-width:46px;text-align:center}.location-copy{flex:1}.location-copy strong{display:block;font-size:15px;font-weight:500;margin-bottom:5px}.location-copy small{display:block;font-size:12px;color:var(--muted);line-height:1.45}.location-item>span:last-child{font-size:20px;color:#a1ad94}.zone-divider{font-size:12px;letter-spacing:.16em;color:var(--accent);padding:20px 12px 7px}.panel-foot{padding:17px 26px;border-top:1px solid var(--line);font-size:14px}.panel-foot small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:6px}.compact{width:440px}.settings-content,.about-content{padding:24px 26px;max-height:70dvh;overflow:auto}.settings-content>label{display:block;margin-bottom:24px;font-size:15px}.settings-content output{float:right;font-size:13px;color:var(--accent)}input[type=range]{display:block;width:100%;margin-top:16px;accent-color:var(--accent)}select{display:block;width:100%;margin-top:12px;padding:10px;background:#0c1610;border:1px solid var(--line);color:var(--text)}.settings-content>.toggle{display:flex;justify-content:space-between;gap:12px}.toggle input{accent-color:var(--accent);width:20px;height:20px}.wide{width:100%;margin:0 0 12px}.help{font-size:14px;line-height:1.6;color:var(--muted)}.about-content p{font-size:16px;line-height:1.7;color:#c6d0bf;margin:0 0 19px}.about-content h3{font-size:16px;font-weight:500;margin:30px 0 15px}.about-content a{display:block;color:var(--accent);font-size:15px;margin:17px 0 5px}.about-content small{font-size:13px;line-height:1.5;color:var(--muted)}#touchControls{display:none}#fatal{position:fixed;z-index:100;inset:15%;background:#151f19;border:1px solid #738267;padding:35px}#fatal p{line-height:1.7}#fatal button{padding:14px;background:var(--accent);color:#111}.paused #crosshair,.paused #interaction,.paused #touchControls,.paused .bottom-hud{visibility:hidden}#hud.hidden{visibility:hidden}
@media(pointer:coarse){#touchControls{display:block}.bottom-hud p{display:none}.bottom-hud{bottom:15px;left:20px;right:20px}.bottom-hud>div{font-size:12px}#joystick{position:fixed;left:max(25px,env(safe-area-inset-left));bottom:max(80px,calc(env(safe-area-inset-bottom) + 60px));width:116px;height:116px;border:1px solid #b6c39d55;border-radius:50%;background:#18201944;touch-action:none;display:grid;place-items:center}#joystick i{width:48px;height:48px;border:1px solid #d5dfbe77;border-radius:50%;background:#53694780;pointer-events:none}.touch-actions{position:fixed;right:max(25px,env(safe-area-inset-right));bottom:max(76px,calc(env(safe-area-inset-bottom) + 54px));display:flex;gap:14px;align-items:center}.touch-actions button{border:1px solid #bbcda067;border-radius:50%;height:59px;width:59px;background:#1a2619a0;font-size:14px;touch-action:none}.touch-actions #touchUse{height:70px;width:70px}.touch-actions button.active{background:#b19a58;color:#101a13}#lookHint{position:fixed;right:24px;bottom:163px;color:#dce3cd99;font-size:12px;pointer-events:none}#interaction kbd{display:none}#interaction{top:60%;font-size:13px}#levelRail{right:16px}.nav-button{padding:11px 13px}}
@media(max-width:650px){#hud{padding:18px 16px 40px;gap:9px}.brand{font-size:14px;gap:8px}.brand-ring{width:34px;height:34px;font-size:20px}.brand small{font-size:12px;letter-spacing:.03em}.location{position:fixed;top:98px;left:16px;text-align:left;max-width:calc(100% - 65px)}.location strong{font-size:21px}.location small{font-size:12px}.nav-button{font-size:13px}.icon-button{font-size:19px}.welcome{width:calc(100% - 28px);height:calc(100dvh - 28px);max-height:none;background:linear-gradient(90deg,#0e1715ec,#0e171555)}.welcome-top{margin:21px 22px}.welcome-top .eyebrow{font-size:12px}.edition{display:none}.welcome-body{left:24px;right:24px;top:45%;transform:translateY(-37%)}h1{font-size:85px}.welcome-body p{font-size:21px}.welcome-actions{display:flex;flex-direction:column;gap:12px;margin-top:29px;max-width:300px}.welcome-meta{gap:12px;font-size:12px;flex-wrap:wrap;line-height:1.7}.welcome footer{left:22px;right:22px;bottom:22px;display:block;line-height:1.6}.welcome footer button{padding:8px 0;display:block}.panel-head{padding:20px}.directory-tabs{margin:0 20px}.search{margin:16px 20px}.location-list{max-height:45dvh}.panel-foot{padding:14px 20px}.location-item{gap:9px}.location-copy strong{font-size:14px}.about-content,.settings-content{padding:20px}.bottom-hud #controlHint{display:none}}
@media(max-height:540px) and (min-width:651px){.welcome{height:calc(100dvh - 24px);width:calc(100% - 32px)}.welcome-top{margin:15px 22px}.welcome-body{top:50%;left:5%;transform:translateY(-45%)}h1{font-size:74px;margin:2px 0 10px}.welcome-body p{font-size:17px;line-height:1.25;margin:10px 0}.welcome-actions{margin-top:18px}.welcome-meta{margin-top:14px}.welcome footer{bottom:13px;left:22px;right:22px}.welcome-body>.eyebrow{font-size:12px}.location strong{font-size:18px}.location small{display:none}#hud{padding:15px 20px 30px}.location-list{max-height:35dvh}#joystick{bottom:52px;width:95px;height:95px}.touch-actions{bottom:50px}#lookHint{bottom:131px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}#fade,#toast{transition:none}}

/* Floor-first navigation: every level and every wing is directly accessible. */
.room-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:0 8px 16px 62px}.room-links button{font:inherit;font-size:.78rem;line-height:1.35;padding:9px 7px;text-align:left;background:#24342e;border:1px solid #4a5b4d;color:#d6dacb;border-radius:3px;cursor:pointer;min-height:42px}.room-links button:hover,.room-links button:focus-visible{background:#3a4b3e;border-color:#c2aa77}.location-copy small{font-size:.75rem}.location-item{padding-bottom:12px}.welcome .edition{letter-spacing:.12em}#vignette{opacity:.28}@media(max-width:600px){.room-links{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:12px}.room-links button{font-size:.8rem}.location-copy small{line-height:1.5}}

.landmark-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 26px 14px}.landmark-shortcuts button{min-height:44px;background:#36453b;color:#e1d4b0;border:1px solid #67715a;border-radius:3px;padding:8px 5px;font-size:.875rem;line-height:1.3}.landmark-shortcuts button:hover{background:#4b5b4e}.location-list{max-height:42dvh}@media(max-width:600px){.landmark-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 10px}.location-list{max-height:35dvh}}

.cast-panel{max-width:920px;width:calc(100vw - 32px)}.cast-intro{margin:0 26px 20px;color:var(--muted);line-height:1.6}.character-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 26px 24px;max-height:68dvh;overflow:auto}.character-card{display:flex;flex-direction:column;text-align:left;padding:0;background:#1e2923;border:1px solid #4a584b;border-radius:4px;overflow:hidden}.character-card[aria-pressed=true]{border-color:#d5bb80;box-shadow:inset 0 0 0 1px #d5bb80}.character-card img{width:100%;height:260px;object-fit:cover;object-position:50% 18%;background:#1a1c1d}.character-card .character-copy{padding:15px;display:grid;gap:7px}.character-card strong{font-family:Georgia,serif;font-size:21px;font-weight:400}.character-card small{font-size:13px;color:var(--muted);line-height:1.5}.character-card .selection-label{font-size:12px;letter-spacing:.1em;color:var(--accent);margin-top:8px}.relic-image{display:block;width:100%;max-height:340px;object-fit:contain;background:#1a1c1d}.bottom-hud{gap:10px}.bottom-hud #controlHint{flex:1;text-align:center}#viewButton{white-space:nowrap}.character-card:hover{background:#2a392f}@media(max-width:650px){#characterButton{padding:11px 10px;font-size:12px}#hud nav{gap:5px}.character-list{grid-template-columns:1fr;padding:0 18px 20px;gap:10px}.character-card{display:grid;grid-template-columns:105px 1fr;min-height:156px}.character-card img{height:100%;max-height:185px}.character-card strong{font-size:19px}.character-card .character-copy{padding:12px}.cast-intro{margin:0 20px 15px;font-size:14px}.bottom-hud>div{max-width:100px}.bottom-hud #viewButton{font-size:12px;padding:10px}.bottom-hud #torchButton span{display:none}}@media(max-height:550px){.character-list{max-height:55dvh}.character-card img{height:170px}.cast-intro{margin-bottom:10px}}

/* The opening keeps its objectives within thumb reach and leaves the view open. */
[hidden]{display:none!important}#chapterHud{position:fixed;left:28px;bottom:104px;z-index:12;width:min(360px,calc(100vw - 56px));padding:17px 20px;border-left:2px solid #b6a275;background:linear-gradient(90deg,rgba(14,24,20,.96),rgba(14,24,20,.78));box-shadow:0 10px 45px #0003;pointer-events:auto}#chapterHud .eyebrow{font-size:12px;letter-spacing:.12em;color:#bcb598}#chapterHud strong{display:block;font:25px/1.2 Georgia,serif;color:#e6e3d4;margin:9px 0}#chapterHud p{font-size:15px;line-height:1.5;color:#bac4b7;margin:0}.chapter-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.chapter-actions:has(button:not([hidden])){min-height:44px}.chapter-actions button{font:inherit;font-size:14px;padding:11px 13px;min-height:44px;border:1px solid #74816c;border-radius:3px;color:#e5e3d5;background:#334639;cursor:pointer}.chapter-actions #skipOpening{background:transparent;border-color:transparent;color:#c3cbbb}.paused #chapterHud{display:none}.screen-focused #touchControls,.screen-focused #crosshair,.screen-focused #interaction,.screen-focused #levelRail{display:none!important}.screen-focused #chapterHud{bottom:95px}.screen-focused .location{visibility:hidden}.welcome-actions{flex-wrap:wrap}.welcome-actions #replayOpening{font-size:14px;padding:12px 14px}.resident-card{min-height:210px;background:linear-gradient(150deg,#25392f,#19221d);justify-content:center;border-top:3px solid #897951}.resident-card .character-copy{padding:23px}.book-panel{background:#d1c4a5;color:#302e26;border:8px solid #405647;border-left:18px solid #304438;box-shadow:inset 5px 0 14px #55492c44,0 28px 100px #0009}.book-panel .panel-head{border-bottom-color:#a89c7e}.book-panel .accent,.book-panel .panel-head .eyebrow{color:#5d654d}.book-panel h2{color:#303c30}.book-panel .close{color:#303c30}.book-inscription{margin:0 26px 18px;font:17px/1.5 Georgia,serif;color:#565340}.book-panel .directory-tabs button,.book-panel .search input{color:#313b30}.book-panel .directory-tabs .active{color:#233c2c;border-color:#617257}.book-panel .search{background:#bcae8d;border-color:#9c9075}.book-panel .search input::placeholder{color:#585e4e}.book-panel .zone-divider{color:#5b5a40;border-bottom-color:#9e9476}.book-panel .location-item{color:#28352a;border-bottom-color:#b3a686}.book-panel .location-number{color:#617056}.book-panel .location-copy small,.book-panel .panel-foot{color:#5d604d}.book-panel .location-item:hover{background:#c0b698}.book-panel .room-links button,.book-panel .landmark-shortcuts button{background:#b9b093;border-color:#9a9276;color:#283d2d}.book-panel .panel-foot{border-color:#a3997b}.book-panel .location-copy strong{font-family:Georgia,serif;font-weight:400;font-size:20px}
@media(max-width:650px){#chapterHud{left:16px;bottom:210px;width:calc(100vw - 32px);padding:12px 15px}#chapterHud strong{font-size:21px;margin:5px 0}#chapterHud p{font-size:14px}.chapter-actions{margin-top:8px}.chapter-actions button{padding:10px 12px}.screen-focused #chapterHud{bottom:125px}.resident-card{display:flex;min-height:145px}.resident-card .character-copy{padding:17px}.book-panel{border-width:5px;border-left-width:10px}.book-inscription{margin:0 20px 14px;font-size:16px}.welcome-actions #replayOpening{font-size:14px;min-height:44px}}
@media(max-height:550px){#chapterHud{left:18px;bottom:65px;width:300px;padding:10px 13px}#chapterHud strong{font-size:20px}.chapter-actions{margin-top:7px}.screen-focused #chapterHud{bottom:66px}.welcome-meta{display:none}.welcome-actions{margin-top:12px}.welcome-body p{margin:8px 0}.welcome-actions #replayOpening{padding:10px;font-size:13px}}

/* The world owns the screen. Extra navigation appears only when requested. */
#controlsButton{position:fixed;z-index:12;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;border:1px solid #d1d6ce40;border-radius:50%;background:#10171288;backdrop-filter:blur(8px);font-size:21px;opacity:.65}
#hud,.bottom-hud{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}#hud>*{pointer-events:none}
.hud-open.playing #hud,.hud-open.playing .bottom-hud{opacity:1;visibility:visible;pointer-events:auto}.hud-open.playing #hud>*{pointer-events:auto}
#hud{padding:14px 76px 20px 18px;background:linear-gradient(#0b100eee,transparent);gap:16px;align-items:flex-start}.brand{font-size:14px}.brand-ring{width:36px;height:36px;font-size:22px}.brand small{display:none}.location strong{font-size:18px;max-width:36ch}.location small{display:none}.nav-button,.icon-button{min-height:44px;padding:10px 12px}.bottom-hud{background:#111813dc;border:1px solid #7b8b6b55;border-radius:8px;padding:8px;left:50%;right:auto;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}.bottom-hud>div,.bottom-hud #controlHint{display:none}#levelRail,#lookHint{display:none!important}#vignette{opacity:.13}
#chapterHud{left:50%;top:auto;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:min(430px,calc(100vw - 160px));padding:10px 14px;background:#111916b8;border:1px solid #a8b29444;border-radius:5px;text-align:center;pointer-events:none}#chapterHud>.eyebrow,#chapterHud>strong{display:none}#chapterHud p{margin:0;font:14px/1.4 Arial,sans-serif}.chapter-actions{margin:6px 0 0;pointer-events:auto}.chapter-actions button{min-height:44px;padding:8px 18px;font-size:14px}#chapterHud:has(.chapter-actions button[hidden]) .chapter-actions{margin:0}
#cinemaControls{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:15;display:none;gap:10px}#cinemaControls button{min-height:44px;padding:10px 16px;font-size:14px;background:#0c1412cc;border:1px solid #cad1c64d;border-radius:4px}.hud-open #cinemaControls{display:flex}
.screen-focused #hud,.screen-focused .bottom-hud,.screen-focused #touchControls,.screen-focused #crosshair,.screen-focused #interaction,.screen-focused #toast,.screen-focused #chapterHud{display:none!important}.screen-focused #controlsButton{opacity:0}.screen-focused.hud-open #controlsButton{opacity:.8}
#interaction{top:auto;bottom:115px;max-width:min(360px,calc(100vw - 36px));white-space:normal;padding:9px 13px;min-height:44px;font-size:14px;background:#111914ca;border-color:#a8b68a66}
.conversation-panel{position:fixed;inset:auto 0 22px;margin:auto;max-width:min(540px,calc(100vw - 28px));max-height:70dvh;background:#121a17f5;border:1px solid #4d5b4d55;box-shadow:0 18px 48px #0008}
/* Talking no longer blacks the room out: the panel docks at the bottom, the
   silo carries on behind it and the person you are speaking to is in shot. */
.conversation-panel[open]{display:block}
#dialogueChoices button kbd{margin-right:9px;opacity:.66}
#dialogueChoices button[aria-pressed=true] kbd{opacity:1}
#dialogueHint{padding:0 20px;margin:0 0 12px;font-size:12px;letter-spacing:.02em}
body.talking #crosshair,body.talking #bottomHud,body.talking #interaction{opacity:0;pointer-events:none}
#interaction small{display:block;font-size:12px;opacity:.7;letter-spacing:.03em}.conversation-panel::backdrop{background:#03080544;backdrop-filter:none}.conversation-panel .panel-head{padding:16px 20px 12px}.conversation-panel h2{font-size:24px}#dialogueLine{padding:0 20px;font:18px/1.55 Georgia,serif;min-height:3em}#dialogueChoices{display:grid;gap:7px;padding:0 20px 14px}#dialogueChoices button{min-height:44px;text-align:left;background:#29352d;border:1px solid #5b695747;border-radius:4px;padding:11px 13px;font-size:15px}#dialogueChoices button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.conversation-panel>#leaveConversation{width:calc(100% - 40px);margin:0 20px 18px}
@media(pointer:coarse){#joystick,.touch-actions{opacity:0;transition:opacity .3s}#joystick:active,.touch-actions:active,.touch-awake #joystick,.touch-awake .touch-actions{opacity:.6}.touch-actions{right:max(16px,env(safe-area-inset-right));bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));gap:9px}.touch-actions button{width:48px;height:48px;font-size:14px;background:#101c146e}.touch-actions #touchUse{width:54px;height:54px}#joystick{left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:94px;height:94px;background:#18201920}#joystick i{width:38px;height:38px;background:#69746460}#interaction{bottom:94px}.hud-open #joystick,.hud-open .touch-actions{opacity:.7}}
@media(max-width:650px){#hud{flex-wrap:wrap;padding:14px 70px 20px 14px;gap:8px}.brand{display:none}.location{position:static;flex:1;text-align:left;max-width:100%;min-width:100%}.location strong{font-size:17px}.location .eyebrow{font-size:12px}#hud nav{gap:6px;flex-wrap:wrap}#chapterHud{max-width:calc(100vw - 40px);bottom:136px}#interaction{max-width:calc(100vw - 28px)}#bottomHud{bottom:98px}.conversation-panel{bottom:12px}}
@media(max-height:550px){#hud .brand,#hud .location{display:none}#hud{justify-content:center;padding:10px 70px 15px 12px}#chapterHud{bottom:12px;max-width:calc(100vw - 370px);padding:6px 10px}#chapterHud p{font-size:14px}.chapter-actions{margin:0}.chapter-actions button{min-height:38px;padding:5px 12px}#joystick{width:82px;height:82px}.conversation-panel{max-height:88dvh;bottom:10px}.conversation-panel .panel-head{padding:10px 18px}#dialogueLine{font-size:16px;margin:12px 0;min-height:0}#dialogueChoices{gap:5px}#dialogueChoices button{min-height:40px;padding:8px 12px}.conversation-panel>#leaveConversation{margin-bottom:12px}#interaction{bottom:82px}}

/* --- story mode ---------------------------------------------------------- */
#modeNote{margin:.9rem 0 0;max-width:34rem;font-size:.78rem;line-height:1.5;opacity:.72}
#crosshair{position:fixed;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;z-index:6}
#crosshair::before,#crosshair::after{content:"";position:absolute;background:rgba(233,226,198,.82);box-shadow:0 0 6px rgba(0,0,0,.7)}
#crosshair::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px}
#crosshair::after{top:50%;left:0;height:1px;width:100%;margin-top:-.5px}
#fireButton{position:fixed;right:1.1rem;bottom:9.2rem;z-index:7;padding:.85rem 1.15rem;border-radius:999px;
  border:1px solid rgba(190,92,70,.7);background:rgba(60,26,20,.82);color:#f0d9c8;font:600 .74rem/1 inherit;letter-spacing:.14em}
#fireButton:active{background:rgba(120,44,32,.92)}
.satchel-item{display:flex;gap:.85rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.08)}
.satchel-item:first-child{border-top:0}
.satchel-item .tick{color:#9ec08a;font-weight:700}
.satchel-item h3{margin:0 0 .2rem;font-size:.92rem}
.satchel-item p{margin:0;font-size:.78rem;line-height:1.5;opacity:.78}
.satchel-item .src{margin-top:.35rem;font-size:.71rem;opacity:.55;font-style:italic}
body.armed #crosshair{display:block}

/* The ammunition readout, low and to the right of the crosshair where a
   shooter's eye already is. Hidden entirely when empty-handed. */
#weaponHud{position:fixed;right:calc(env(safe-area-inset-right,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 92px);
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none;z-index:6;
  font:600 12px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;
  color:#cfd6cc;text-shadow:0 1px 3px rgba(0,0,0,.85)}
#weaponHud b{font-size:23px;letter-spacing:.05em;color:#eef2ea}
#weaponHud.empty b{color:#e2725b}

/* Recovered terminal files: legible on phones and at text zoom. */
[hidden]{display:none!important}
.terminal-panel{width:min(760px,calc(100vw - 24px));max-height:90dvh;background:#0b1715;border:1px solid #547b69;color:#c6dcc8}
.terminal-content{padding:0 24px 26px;font:16px/1.6 ui-monospace,monospace}
.terminal-content button,.terminal-content input{min-height:44px;padding:10px 12px;background:#1a2c27;color:#d5e5cf;border:1px solid #47695a;border-radius:2px;font:inherit}
.terminal-content button:disabled{opacity:.45}.terminal-controls{display:flex;flex-wrap:wrap;gap:8px}
#terminalStatus{padding:10px;border-left:3px solid #a1b475;background:#15271f}#terminalPath,#blueprintProvenance{font-size:14px;color:#8dac98;overflow-wrap:anywhere}
.terminal-search-row{display:flex;gap:8px}.terminal-search-row input{min-width:0;flex:1}
#terminalRows{display:grid;gap:8px;margin:22px 0}#terminalRows button{text-align:left}
#terminalBlueprint{border-top:1px solid #47695a;padding-top:14px}#terminalBlueprint h3{font-size:18px}.pipe-schematic{width:100%;height:auto;stroke:#b5d5b7;fill:none;stroke-width:3}.pipe-schematic text{fill:#c6dcc8;stroke:none;font:16px monospace}#blueprintRoute{padding-left:22px}
#reloadButton{position:fixed;right:18px;bottom:210px;min-height:44px;z-index:8;background:#1a2924;border:1px solid #9cab86;border-radius:4px;padding:8px 14px;color:#e7e9d8;font-size:14px}
#weaponHud{bottom:260px}.satchel-item p{font-size:16px}.satchel-item .src,#modeNote{font-size:14px}#satchelObjective{padding:0 24px;font-size:16px;line-height:1.5}
@media(max-width:650px){.terminal-content{padding:0 16px 20px}.terminal-controls button{flex:1 1 45%}.terminal-panel .panel-head{padding:16px}}

#terminalRows p{white-space:pre-wrap;line-height:1.65}

/* Where the current chapter is sending you, under the objective. A level
   number is the one piece of information the directory can act on, so it is
   given its own line rather than buried in a sentence. */
#chapterWhere{margin:.45rem 0 0;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;text-transform:uppercase;color:#9fd6b4}
#chapterWhere::before{content:"↗ ";opacity:.8}
/* A hint, once it has been asked for or earned by being stuck. Set apart from
   the objective so it never reads as part of the story's own voice. */
#chapterHint{margin:.5rem 0 0;padding:.45rem .6rem;border-left:2px solid #6f8f79;
  background:rgba(120,160,132,.10);font-size:12.5px;line-height:1.42;color:#cfdcd2}
#hintButton[data-exhausted="true"]{opacity:.45}

/* The level the story is pointing at, marked where the player already looks
   for somewhere to travel. */
.location-item.objective{border-color:#6f9c7d;box-shadow:inset 3px 0 0 #7fb890}
.location-item.objective .location-number{color:#9fd6b4}
.room-links button.objective{border-color:#6f9c7d;color:#cfe9d8;font-weight:600}

/* The journal's record of the story so far: what is done, what is open, and
   the hints already worked out on the open one. Chapters ahead are not listed. */
.journal-chapters{margin:0 0 1.1rem;padding:0 0 .9rem;border-bottom:1px solid rgba(180,196,184,.16)}
.journal-chapters>h3{margin:0 0 .55rem;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:#8fae99}
.journal-chapter{display:flex;gap:.6rem;align-items:flex-start;padding:.3rem 0}
.journal-chapter span{flex:0 0 1rem;text-align:center;font-size:12px;line-height:1.5}
.journal-chapter strong{font-size:13.5px;font-weight:600}
.journal-chapter p{margin:.2rem 0 0;font-size:12.5px;line-height:1.45;color:#c3cfc6}
.journal-chapter.done{opacity:.5}
.journal-chapter.done span{color:#7fb890}
.journal-chapter.now span{color:#e0c37a}
.journal-hint{border-left:2px solid #6f8f79;padding-left:.5rem;color:#a9c1b1 !important}

#chapterWhere.here{color:#e0c37a}
#chapterWhere.here::before{content:"◆ "}
/* The chapter card grows with its destination line and its hint, and on a short
   screen it reached the toast. Lift the toast clear while the card is up. */
body:has(#chapterHud:not([hidden])) #toast{bottom:calc(24px + var(--card-h,0px) + 20px)}
body:has(#chapterHud:not([hidden])) #interaction{top:auto;bottom:calc(24px + var(--card-h,0px) + 20px)}
body:has(#chapterHud:not([hidden])) #toast.show ~ #interaction{bottom:calc(24px + var(--card-h,0px) + 92px)}

.relic-panel{width:min(760px,95vw);max-height:94dvh;overflow:auto}.relic-stage{height:clamp(230px,43dvh,430px);background:#111819;margin:0 1.3rem;border:1px solid #3a4845;border-radius:8px;overflow:hidden}#relicCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#relicCanvas:active{cursor:grabbing}#relicCanvas:focus-visible{outline:2px solid #d9ba78;outline-offset:-4px}.relic-controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.8rem 1.3rem}.relic-controls p{flex:1 1 220px;font-size:14px;color:#bdc9c3}.relic-controls button{min-height:44px}.satchel-item .secondary{margin-top:.7rem;min-height:44px}.relic-panel .about-content{font-size:16px}

/* A readable directory with one scrolling list and explicit travel actions. */
.book-panel[open]{display:flex;flex-direction:column;height:min(850px,94dvh);max-height:94dvh;width:min(660px,96vw);overflow:hidden}
.book-panel .panel-head{padding:18px 22px 14px;flex:none}.book-panel .close{min-width:44px;min-height:44px}
.directory-context{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;background:#c6bb9e;border-bottom:1px solid #a89c7e;font-size:14px}
.directory-context-actions{display:flex;gap:6px;flex-wrap:wrap}.directory-context-actions button{min-height:44px;padding:9px 12px;background:#405647;color:#f0eddf;border-radius:3px;font-size:13px}
.book-panel .directory-tabs{margin:0 22px;flex:none}.book-panel .directory-tabs button{min-height:48px}
.book-panel .search{margin:12px 22px;padding:0 10px;min-height:48px;flex:none}.book-panel .search input{min-width:0;min-height:44px;font-size:16px}.book-panel .search:focus-within{outline:2px solid #405647;outline-offset:2px}
#clearSearch{background:transparent;color:#304438;min-width:44px;min-height:44px;font-size:24px}
#directoryResults{padding:0 22px 10px;color:#4c513f;font-size:13px;flex:none}
.book-panel .landmark-shortcuts{padding:0 22px 10px;grid-template-columns:repeat(4,minmax(0,1fr));flex:none}
.book-panel .location-list{flex:1;min-height:80px;max-height:none;padding:0 14px 16px;overscroll-behavior:contain}
.directory-entry{border:1px solid #aaa082;border-radius:4px;margin:8px 0;overflow:hidden;background:#d9ceb3}
.book-panel .location-item{min-height:74px;padding:14px 12px;border:0;gap:12px}.book-panel .location-item.current{background:#c3cbb1;box-shadow:inset 3px 0 #405647}
.book-panel .location-item.objective{box-shadow:inset 3px 0 #566b42}.book-panel .location-item.objective .location-number{color:#344c30}
.book-panel .location-copy strong{font-size:17px}.book-panel .location-copy small{font-size:13px;color:#4d5343}.book-panel .location-item .travel-label{font:600 13px Arial;color:#405647}
.book-panel button:disabled{cursor:not-allowed;opacity:.65}.wing-disclosure{border-top:1px solid #b7ac90}.wing-disclosure summary{padding:13px 18px;min-height:44px;font-size:14px;color:#40513c;cursor:pointer}.wing-disclosure summary:focus-visible{outline:2px solid #405647;outline-offset:-3px}
.book-panel .room-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 12px 12px;margin:0}.book-panel .room-links button{min-height:44px;padding:9px;font-size:14px;border-radius:3px}.book-panel .room-links button.objective{background:#405647;color:#f0eddf;border-color:#405647}.book-panel .panel-foot{flex:none;padding:12px 22px}
/* The viewing controls remain discoverable while the cinematic is focused. */
.watching-cleaning #cinemaControls,.screen-focused #cinemaControls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;position:fixed;left:50%;right:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);padding:8px 10px;background:#101b18eb;border:1px solid #6d7b69;border-radius:8px;z-index:20;pointer-events:auto;opacity:1}
#cinemaStatus{font-size:14px;color:#d6ddcf;padding:0 10px;font-variant-numeric:tabular-nums}
.watching-cleaning #cinemaControls button,.screen-focused #cinemaControls button{min-height:44px;padding:10px 14px;opacity:1;background:#33483b;color:#f0eddf;border:1px solid #6d7b69;border-radius:4px;font-size:14px}
#cinemaControls #skipOpening{background:transparent;color:#c5cdbf}.watching-cleaning #chapterHud,.paused #cinemaControls{display:none!important}
@media(max-width:650px){.directory-context{align-items:flex-start;flex-direction:column;gap:8px;padding:10px 16px}.book-panel .panel-head{padding:14px 16px}.book-panel .directory-tabs{margin:0 16px}.book-panel .search{margin:10px 16px}.book-panel .landmark-shortcuts{padding:0 16px 8px}#directoryResults{padding:0 16px 8px}.book-panel .location-list{padding:0 8px 12px}.book-panel .location-number{font-size:24px;min-width:38px}#cinemaStatus{flex-basis:100%;text-align:center;padding:4px}.watching-cleaning #cinemaControls{gap:6px}}
@media(max-height:740px),(max-width:650px){.welcome{overflow:auto;height:auto;max-height:calc(100dvh - 24px)}.welcome-body{position:relative;top:auto;left:auto;right:auto;transform:none;padding:12px 26px 22px}.welcome-body h1{font-size:clamp(64px,12vw,100px);margin:10px 0 16px}.welcome-body p{font-size:19px}.welcome-actions{margin-top:20px;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.welcome-actions button{min-height:48px;padding:12px}.welcome-meta{margin-top:20px}.welcome footer{position:static;margin:0 26px 20px;line-height:1.5}.welcome-top{margin:20px 26px 8px}}
@media(prefers-reduced-motion:reduce){#toast,#fade{transition:none}}

.book-panel .panel-foot small{color:#515842}.book-panel .help{color:#515842}.directory-context-actions{flex-shrink:0}

#directoryResults{margin:0}.book-panel .landmark-shortcuts button{padding-inline:2px}.directory-context-actions button{font-size:14px}
@media(max-width:650px){.book-panel .panel-head h2{font-size:25px}.book-panel .panel-foot{padding:10px 16px}.book-panel .location-copy strong{font-size:16px}}

#algorithmQuery{margin:0 20px 16px}#algorithmQuery[hidden]{display:none}#algorithmQuery label{display:block;font-size:12px;letter-spacing:.08em;color:#c0ac7b;margin-bottom:7px}#algorithmQuery>div{display:flex;gap:8px}#archiveQuestion{min-width:0;flex:1;background:#141815;border:1px solid #635d49;color:#eee9dc;padding:12px;font:16px Georgia,serif;border-radius:4px}.archive-conversation{background:#1a1e1b}.archive-conversation #dialogueLine{color:#dfd3b8}.archive-conversation #dialogueChoices button{background:#252923}.conversation-panel{overflow-y:auto;overscroll-behavior:contain}#dialogueChoices button:focus-visible,#archiveQuestion:focus-visible{outline:2px solid #d1bd83;outline-offset:2px}

/* --- the conversation panel -------------------------------------------
   It was a box of boxes: a flat slab, a flat line of text and four filled
   rectangles under it, all the same weight. Nothing told you what to read
   first. This makes it a card that has been typeset — the person's name is
   the loudest thing on it, what they said gets room and a rule of its own,
   and the questions are quiet rows rather than four competing buttons. */
.conversation-panel{
  inset:auto 0 26px;margin:auto;width:min(566px,calc(100vw - 24px));max-width:none;
  padding:0;overflow:hidden;border-radius:14px;
  background:linear-gradient(180deg,#18211ef2,#101816f7);
  border:1px solid #6d7c6a4d;
  box-shadow:0 26px 70px #000a,inset 0 1px 0 #ffffff0f;
  backdrop-filter:blur(14px) saturate(1.04);
}
/* A lit filament along the top edge: the one warm thing on the card. */
.conversation-panel::before{content:'';display:block;height:2px;
  background:linear-gradient(90deg,transparent,#d5bb8066 16%,#d5bb80 50%,#d5bb8066 84%,transparent)}
.conversation-panel .panel-head{padding:19px 24px 13px;border-bottom:0;align-items:flex-start}
.conversation-panel #speakerRole{display:block;font-size:11px;letter-spacing:.23em;text-transform:uppercase}
.conversation-panel h2{font-size:27px;margin-top:8px;line-height:1.12}
.conversation-panel .close{width:36px;height:36px;font-size:24px;border-radius:8px;line-height:1}
.conversation-panel .close:hover{background:#ffffff0f;color:var(--text)}
/* What they said. Given air, and marked as speech by a rule rather than by
   being trapped in another rectangle. */
#dialogueLine{margin:2px 24px 18px;padding:1px 0 1px 17px;border-left:2px solid #d5bb8040;
  font:19px/1.62 Georgia,serif;color:#efeade;min-height:4.3em}
/* Questions as rows. Hairlines instead of borders, so five of them read as a
   list you can scan rather than five things shouting at once. */
#dialogueChoices{display:flex;flex-direction:column;gap:0;padding:0 12px 4px}
#dialogueChoices button{display:flex;align-items:center;gap:13px;min-height:46px;
  text-align:left;background:none;border:0;border-top:1px solid #ffffff0d;border-radius:9px;
  padding:11px 12px;font-size:15.5px;color:#dfe3d7;transition:background .13s,color .13s}
#dialogueChoices button:first-child{border-top:0}
#dialogueChoices button:hover{background:#ffffff0c;color:#fbfaf4}
#dialogueChoices button kbd{flex:none;width:25px;height:25px;display:grid;place-items:center;margin:0;
  font:11px/1 Arial,sans-serif;background:#ffffff0d;border:1px solid #ffffff17;border-radius:7px;color:#a9b3a3}
#dialogueChoices button[aria-pressed=true]{background:#d5bb8016;color:var(--accent)}
#dialogueChoices button[aria-pressed=true] kbd{border-color:#d5bb8059;color:var(--accent);opacity:1}
/* Already asked, but not the one showing: dimmed, so you can see your way
   through a long conversation without losing where you have been. */
#dialogueChoices button.asked:not([aria-pressed=true]){color:#94a190}
/* A question with more behind it says so. */
#dialogueChoices button.has-more span::after{content:'›';margin-left:9px;opacity:.55;font-size:17px;line-height:0}
#dialogueChoices .dialogue-back{color:#a2b09c;margin-top:2px}
#dialogueChoices .dialogue-back span{font-style:italic}
#dialogueChoices .dialogue-back kbd{background:none}
/* One footer band rather than a hint floating above a slab of a button. */
.dialogue-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 20px 13px 24px;margin-top:4px;border-top:1px solid #ffffff0f;background:#0b100e5c}
.dialogue-foot #dialogueHint{padding:0;margin:0;border:0;font-size:11.5px;letter-spacing:.07em;color:#8b968a}
.dialogue-foot #leaveConversation{flex:none;width:auto;margin:0;padding:9px 15px;font-size:13px;
  background:none;border:1px solid #ffffff17;border-radius:9px;color:#b7c0b1}
.dialogue-foot #leaveConversation:hover{background:#ffffff0d;color:var(--text)}
#dialogueChoices button.has-more span::after{line-height:1;position:relative;top:1px}
.archive-conversation{background:linear-gradient(180deg,#1c201cf2,#121513f7)}
.archive-conversation #dialogueLine{color:#e3d7ba;border-left-color:#c0ac7b55;font-family:Georgia,serif}
.archive-conversation #dialogueChoices button[aria-pressed=true]{background:#c0ac7b16}
@media(max-width:650px){
  .conversation-panel{width:calc(100vw - 16px);bottom:12px;border-radius:12px}
  .conversation-panel .panel-head{padding:15px 18px 10px}
  .conversation-panel h2{font-size:23px}
  #dialogueLine{margin:0 18px 14px;font-size:17px;min-height:4em}
  #dialogueChoices{padding:0 8px 2px}
  #dialogueChoices button{font-size:15px;min-height:44px;padding:10px}
  #dialogueHint{padding:9px 18px 0}
  .dialogue-foot{padding:10px 14px 11px 18px;gap:10px}
}
@media(max-height:550px){
  .conversation-panel{max-height:92dvh}
  #dialogueLine{min-height:0;margin-bottom:10px;font-size:16px}
  #dialogueChoices button{min-height:40px;padding:8px 10px}
  .dialogue-foot{padding:8px 14px 9px 18px}
}

/* --- the directory book on a short screen ------------------------------
   Turn a phone sideways and the book had no book in it. The head, the
   context bar, the tabs, the search field, the shortcuts and the footer are
   every one of them fixed height, and on a 390px-tall viewport they add up
   to more than the panel does: the level list was laid out past the bottom
   edge and clipped away entirely, the footer with it. Nothing scrolled,
   because the clipping happened on the panel and not inside the list — so
   the directory opened onto no levels at all and no way to reach them.

   A landscape screen is short but wide, so the fix is to stop stacking. The
   book opens into two pages: the apparatus you use down the left, the
   levels down the right at the panel's full height. That is what the width
   is for, and it is what a book looks like anyway. */
@media (max-height:560px) and (min-height:300px) and (min-width:560px){
  .book-panel[open]{
    display:grid;
    grid-template-columns:minmax(190px,min(18rem,42%)) minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto;
    width:min(940px,96vw);height:98dvh;max-height:98dvh;
    /* the board and the spine are the cheapest 14px on the screen */
    border-width:5px;border-left-width:12px}

  /* the left page: everything you do to the list */
  .book-panel .panel-head{grid-column:1;grid-row:1;padding:12px 17px 10px;border-bottom:1px solid #a89c7e}
  .book-panel .panel-head h2{font-size:21px;margin-top:2px}
  /* SILO 18 · RESIDENT'S HANDBOOK is the one line here that wraps, and where
     it wraps depends on the width — which made the head 68px on one phone and
     86px on another and left the whole budget guessing. The board, the spine
     and the footer all say what this is. */
  .book-panel .panel-head .eyebrow{display:none}
  .book-panel .directory-context{grid-column:1;grid-row:2;flex-direction:column;align-items:stretch;
    gap:5px;padding:8px 17px;font-size:12px}
  .book-panel .directory-context-actions button{flex:1;min-height:38px;padding:5px 9px;font-size:12px}
  .book-panel .search{grid-column:1;grid-row:3;margin:9px 17px 0;min-height:40px}
  .book-panel .search input{min-height:36px}
  .book-panel .landmark-shortcuts{grid-column:1;grid-row:4;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;padding:9px 17px 0}
  .book-panel .landmark-shortcuts button{min-height:38px;padding:5px 4px;font-size:13px}
  .book-panel #directoryResults{grid-column:1;grid-row:5;padding:9px 17px 0;font-size:12px}
  .book-panel .panel-foot{grid-column:1;grid-row:7;align-self:end;padding:9px 17px;font-size:12px}
  .book-panel .panel-foot small{display:none}

  /* the right page: the levels, floor to ceiling */
  .book-panel .directory-tabs{grid-column:2;grid-row:1;margin:0;padding:0 17px;
    border-bottom:1px solid #a89c7e;border-left:1px solid #b7ac90}
  .book-panel .directory-tabs button{min-height:0;padding:13px 0 10px;font-size:13px}
  .book-panel .location-list{grid-column:2;grid-row:2/-1;min-height:0;padding:0 9px 10px;
    border-left:1px solid #b7ac90}
  .book-panel .location-item{min-height:0;padding:10px;gap:10px}
  .book-panel .location-number{font-size:21px;min-width:34px}
  .book-panel .location-copy strong{font-size:15px}
  .book-panel .location-copy small{font-size:12px;line-height:1.4}
  .book-panel .wing-disclosure summary{min-height:0;padding:8px 14px;font-size:13px}
  .book-panel .room-links{padding:0 10px 10px}
  .book-panel .room-links button{min-height:36px;padding:6px 7px;font-size:13px}
}

/* Shorter still and the left page has to give up the result count too — the
   list says the same thing, at more length. It is a live region, so it comes
   out of the layout rather than out of the document, and still announces. */
@media (max-height:365px) and (min-height:300px) and (min-width:560px){
  .book-panel #directoryResults{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .book-panel .directory-context{padding:6px 17px}
  .book-panel .directory-context-actions button{min-height:32px}
  .book-panel .landmark-shortcuts{gap:4px;padding-top:8px}
  .book-panel .landmark-shortcuts button{min-height:30px;font-size:12px}
  .book-panel .panel-foot{padding:6px 17px;font-size:11px}
}

/* Narrower than two pages, or shorter than one will go, and there is no
   layout left to find. Rather than clip anything, collapse the book to a
   single column that scrolls as one document — the head scrolls away with
   it, but everything in the book stays reachable, which is the part that
   was broken in the first place. */
@media (max-height:299px), (max-height:560px) and (max-width:559px){
  .book-panel[open]{overflow:auto;overscroll-behavior:contain}
  .book-panel .panel-head{padding:12px 16px 9px}
  .book-panel .panel-head h2{font-size:21px}
  .book-panel .directory-context{padding:8px 16px;font-size:13px}
  .book-panel .search{margin:9px 16px}
  .book-panel .location-list{flex:none;min-height:0;overflow:visible}
  .book-panel .panel-foot small{display:none}
}

/* Watching is the default; screen controls only appear briefly or on request. */
.watching-cleaning #cinemaControls,.screen-focused #cinemaControls{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s;gap:6px;padding:5px 7px;border-color:#7c8a7045;background:#101b18c9;border-radius:5px}
.cinema-awake #cinemaControls{opacity:1;visibility:visible;pointer-events:auto}
#cinemaStatus{font-size:12px;padding:0 6px}
.watching-cleaning #cinemaControls button,.screen-focused #cinemaControls button{font-size:13px;min-height:44px;padding:8px 11px}
.screen-focused #controlsButton{opacity:.42}
.screen-focused #controlsButton:hover,.screen-focused #controlsButton:focus-visible{opacity:.9}
.watching-cleaning #toast,.watching-cleaning #interaction,.watching-cleaning #crosshair{display:none!important}
@media(max-width:650px){#cinemaStatus{flex-basis:auto;padding:0 5px}.watching-cleaning #cinemaControls{gap:5px}}
@media(prefers-reduced-motion:reduce){#cinemaControls{transition:none}}

body:not(.cinema-awake) #cinemaControls{opacity:0;visibility:hidden;pointer-events:none}
/* --- the controller map in Settings ------------------------------------ */
.pad-map{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 16px;
  font-size:14px;line-height:1.45}
.pad-map dt{color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.pad-map dd{margin:0;color:#c6d0bf}
@media(max-width:650px){.pad-map{gap:5px 10px;font-size:13px}}

/* --- George's terminal, and the sheet it recovers ------------------------
   The panel is capped at 90dvh but nothing inside it ever scrolled, so a
   recovered schematic — a drawing and nine numbered steps — ran straight off
   the bottom of the box and out of the window. Measured with the sheet on
   screen: the content stood 475 px below the panel on a 1280 × 760 desktop,
   691 px on a phone in portrait and 808 px in landscape, where all the player
   could actually read was the words SCHEMATIC RECOVERED. Nothing in the panel
   reported a scrollable overflow, because nothing in it was scrollable.

   The head stays put and the content scrolls, the way Settings and the
   directory list already did. */
.terminal-panel[open]{display:flex;flex-direction:column}
.terminal-panel[open] .panel-head{flex:none}
.terminal-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  scrollbar-color:#5f715d transparent}
.terminal-machine{min-width:0}

/* Landscape on a phone is short and wide, so stop stacking — the same answer
   the directory book gets. The machine goes down the left and the sheet it
   recovered down the right, each scrolling on its own at the panel's full
   height, so the drawing and the route are both on screen at once. Only when
   there is a sheet to show: with the blueprint hidden a second column would
   be an empty half of the panel. */
@media (max-height:560px) and (min-height:300px) and (min-width:560px){
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])){width:min(960px,96vw);height:96dvh;max-height:96dvh}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .panel-head{padding:11px 20px 9px}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .panel-head h2{font-size:21px}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .panel-head .eyebrow{display:none}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .terminal-content{
    display:grid;grid-template-columns:minmax(190px,32%) minmax(0,1fr);
    gap:0 18px;overflow:hidden;padding:12px 20px 14px}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .terminal-machine{
    min-height:0;overflow:auto;padding-right:4px}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) #terminalBlueprint{
    min-height:0;overflow:auto;border-top:0;border-left:1px solid #47695a;
    padding:0 0 0 18px;margin:0}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .terminal-controls button{flex:1 1 100%}
  .terminal-panel[open]:has(#terminalBlueprint:not([hidden])) .pipe-schematic{max-height:26dvh}
}

/* Close examination remains usable in portrait and landscape. Closed dialogs
   retain the browser's display:none; only the opened panel becomes a grid. */
.relic-panel[open]{display:grid;grid-template-rows:auto auto minmax(190px,1fr) auto auto;max-height:94dvh;overflow:auto}
.relic-features{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 10px}
.relic-features:empty{display:none}.relic-features button{min-height:44px;font-size:14px;padding:10px 14px}
.relic-features button[aria-pressed=true]{background:#d5bb80;color:#162119;border-color:#d5bb80}
.relic-panel .relic-stage{height:clamp(220px,38dvh,410px);min-height:190px}
#relicDetail{font-size:16px;line-height:1.65;color:#e7dcc4;border-left:2px solid #b9a573;padding-left:14px}
.relic-panel #relicSource{font-size:13px;line-height:1.5}.relic-panel .about-content{max-height:25dvh;overflow:auto}
.relic-panel.record-only .relic-stage,.relic-panel.record-only #relicControlsHint,.relic-panel.record-only #relicFlip,.relic-panel.record-only #relicReset{display:none}
.relic-panel.record-only[open]{grid-template-rows:auto auto auto}.relic-panel.record-only .about-content{max-height:65dvh}
.journal-memories{display:grid;gap:8px;margin-top:24px}.journal-memories button{text-align:left;min-height:44px}
@media(max-height:550px) and (min-width:600px){
 .relic-panel[open]{width:min(1100px,97vw);grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto 1fr;height:94dvh;overflow:hidden}
 .relic-panel>.panel-head{grid-column:1 / -1;padding:10px 18px}.relic-panel .panel-head h2{font-size:22px}
 .relic-panel .relic-stage{grid-column:1;grid-row:2 / 4;height:auto;min-height:0;margin:8px 12px 14px}
 .relic-panel .relic-features{grid-column:2;grid-row:2;padding:6px 12px;gap:5px}
 .relic-panel .about-content{grid-column:2;grid-row:3;max-height:none;overflow:auto;padding:0 14px 16px}
 .relic-panel .relic-controls{grid-column:1;grid-row:3;align-self:end;z-index:1;background:#111819e8;margin:0 13px 14px;padding:5px;gap:5px}
 .relic-controls p{display:none}.relic-controls button{font-size:12px;padding:8px;min-height:40px}
 .relic-panel.record-only[open]{display:block;height:auto;max-height:94dvh;overflow:auto}.relic-panel.record-only .relic-controls{margin:0;background:none}
}