/* The menus belong to the room: restrained type over the live scene. */
:root{color-scheme:dark;font-family:Arial,sans-serif;color:#eee9dc;background:#171a17;font-synthesis:none;--menu-font:"Courier New",Courier,monospace;--paper:#eee9dc;--muted:#c1c0b2}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button{font:inherit;cursor:pointer;border:1px solid #d8d0b380;background:#e6dec9;color:#20251e;padding:14px 25px;border-radius:0;min-height:44px}
button:hover{background:#fff3d3}
button:focus-visible,summary:focus-visible{outline:1px solid var(--paper);outline-offset:5px}
button:disabled{cursor:wait;opacity:.6}
p{line-height:1.6}
#world{display:block;width:100%;height:100%;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 15vw 4vw #17170e60}
#grain{position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;padding:5vh 7vw;background:linear-gradient(90deg,#0b100bb8, #0b100b38 54%,transparent 85%);font-family:var(--menu-font);text-shadow:0 2px 5px #000b}
.opening-copy{width:min(390px,100%);padding-bottom:4vh}
h1{font-family:var(--menu-font);font-size:clamp(32px,3.6vw,48px);font-weight:400;letter-spacing:-.04em;line-height:1.12;margin:0 0 40px}
.title-menu{display:grid;gap:4px;max-width:340px}
.menu-option{display:block;position:relative;width:fit-content;max-width:100%;padding:10px 0 10px 22px;min-height:44px;background:none;border:0;color:var(--paper);font:16px/1.45 var(--menu-font);text-align:left;text-shadow:0 2px 4px #000b;transition:color .12s}
.menu-option::before{content:"";position:absolute;left:2px;top:19px;width:5px;height:5px;background:currentColor;opacity:0}
.menu-option:hover,.menu-option:focus-visible{background:none;color:#fff}
.menu-option:hover::before,.menu-option:focus-visible::before{opacity:1}
.menu-option:disabled::before{opacity:0}
#begin{margin:0}
.controls-menu{font:14px/1.5 var(--menu-font);color:var(--muted)}
.controls-menu summary{cursor:pointer;list-style:none;min-height:44px;padding:10px 0 10px 22px;width:fit-content}
.controls-menu summary::-webkit-details-marker{display:none}
.controls-menu summary:hover{color:var(--paper)}
.controls-menu[open] summary{color:var(--paper)}
.key-guide{font:14px/1.6 var(--menu-font);color:var(--muted);margin:20px 0 0 22px}
.key-guide div{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:3px 0}
.key-guide dt{color:var(--paper)}
.key-guide dd{margin:0}
.controls-menu .key-guide{margin-top:8px}
.touch-guide{display:none;font:14px/1.6 var(--menu-font);max-width:290px;color:var(--muted);margin-left:22px}
.opening-footer{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:7vw;right:5vw;display:flex;justify-content:space-between;align-items:end;gap:24px;font:12px/1.8 var(--menu-font);color:var(--muted)}
#time-of-day{color:#aaaFA3;text-transform:lowercase}
.build-note{white-space:nowrap}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 1px 4px #000}
.location{position:absolute;top:28px;left:30px;font-size:11px;letter-spacing:.2em;color:#eee9d4}
.location span{display:block;margin-top:8px;font-size:10px;color:#dad9c9}
.quiet{background:transparent;border:0;color:#f4eedc;padding:7px 10px;font-size:11px;letter-spacing:.15em;pointer-events:auto;text-shadow:0 1px 4px #000}
.quiet:hover{background:#242a2160}
#audio-toggle{position:absolute;top:18px;right:20px}
#crosshair{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff9;transform:translate(-50%,-50%)}
#prompt{position:absolute;top:calc(50% + 26px);left:50%;transform:translateX(-50%);background:#171b15c9;color:#fff8e2;border:1px solid #c3bdaa65;font-size:14px;white-space:nowrap;padding:10px 18px;pointer-events:auto}
#toast{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);font:14px/1.6 var(--menu-font);text-align:center;width:min(90%,600px);transition:opacity .5s;opacity:0}
#inventory{position:absolute;left:30px;bottom:70px;font:12px var(--menu-font)}
.hud-bottom{position:absolute;bottom:22px;left:30px;right:20px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:#e1decc}
dialog{color:var(--paper);border:0;background:transparent;padding:0;max-height:100dvh;box-shadow:none}
dialog::backdrop{background:#080d0970}
.game-menu{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:8vh 7vw;font-family:var(--menu-font);background:linear-gradient(90deg,#0b100bbf,#0b100b40 55%,transparent 85%);text-shadow:0 2px 5px #000b;overflow:auto}
.game-menu[open]{display:flex;align-items:center}
.menu-content{width:min(400px,100%);padding:20px 0}
.game-menu h2{font:400 28px/1.2 var(--menu-font);margin:0 0 28px;letter-spacing:-.03em}
.menu-options{display:grid;gap:5px;margin-bottom:36px}
.secondary-option{color:var(--muted)}
.game-menu .key-guide{margin-bottom:28px}
.menu-clock{font:12px/1.6 var(--menu-font);color:var(--muted);margin:35px 0 0 22px}
.discovery-label{font:13px/1.5 var(--menu-font);color:var(--muted);margin:0 0 22px}
#song-title{font-size:clamp(28px,3.1vw,40px);margin-bottom:18px}
.recording-status{font:14px/1.6 var(--menu-font);color:var(--muted);margin:0 0 36px}
#page-dialog{padding:16px;width:min(92vw,540px);max-height:95dvh;background:transparent}
#page-dialog::backdrop{background:#080d09a8}
.paper-head{display:flex;justify-content:space-between;gap:16px;align-items:center;font:12px/1.5 var(--menu-font);text-shadow:0 2px 4px #000}
.paper-head button{padding:10px 0;background:transparent;border:0;margin:0;color:var(--paper);font:14px var(--menu-font)}
.paper-caption{font:12px/1.6 var(--menu-font);color:var(--muted);margin:10px 0 0;text-shadow:0 2px 4px #000}
#page-image{display:block;width:100%;max-height:70dvh;object-fit:contain;margin-top:12px}
body:has(dialog[open]) #hud,body:has(dialog[open]) #touch-controls{visibility:hidden}
#touch-controls{display:none;position:fixed;bottom:75px;left:20px;right:20px;pointer-events:none;justify-content:space-between;align-items:end}
.dpad{display:grid;grid-template-columns:48px 48px 48px;gap:5px}
.dpad button{padding:0;background:#19241980;color:#fff;border-color:#ffffff40;font-size:23px;pointer-events:auto;touch-action:none}
.dpad button:first-child{grid-column:2}
.dpad button:nth-child(2){grid-row:2;grid-column:1}
.dpad button:nth-child(3){grid-row:2;grid-column:2}
.dpad button:nth-child(4){grid-row:2;grid-column:3}
#touch-use{pointer-events:auto;background:#19241980;color:#fff;touch-action:none;padding:12px}
#error{position:fixed;inset:20%;padding:30px;background:#20281f;color:white;font-size:18px}
[hidden]{display:none!important}
@media(pointer:coarse){#touch-controls:not([hidden]){display:flex}.hud-bottom>span{display:none}#toast{bottom:215px}#inventory{bottom:210px}.key-guide{display:none}.touch-guide{display:block}}
@media(max-width:650px){.overlay,.game-menu{padding:5vh 28px}.opening-copy{padding-bottom:8vh}h1{font-size:36px;margin-bottom:30px}.opening-footer{left:28px;right:28px;font-size:12px;gap:12px}.location{left:20px;top:20px}#prompt{white-space:normal;text-align:center;min-width:190px}#touch-controls:not([hidden]){display:flex}.hud-bottom>span{display:none}#toast{bottom:215px}#inventory{bottom:210px}.key-guide{display:none}.touch-guide{display:block}.menu-content{padding:24px 0}.game-menu h2{font-size:26px}}
@media(max-height:560px){.overlay{justify-content:flex-start;padding-top:28px}.opening-copy{padding-bottom:95px}h1{font-size:28px;margin-bottom:16px}.overlay{overflow-y:auto}.opening-footer{position:fixed;bottom:12px;font-size:11px}.game-menu[open]{align-items:flex-start}.game-menu{padding-top:24px;padding-bottom:24px}.menu-options{margin-bottom:18px}.game-menu h2{margin-bottom:18px}.menu-clock{margin-top:20px}.controls-menu .key-guide{font-size:12px}.key-guide div{padding:0}}
@media(prefers-reduced-motion:reduce){#toast,.menu-option{transition:none}}

/* A quiet, uninterrupted ending, over the scene until the fall reaches black. */
#ending-dialog{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;overflow:hidden;font-family:var(--menu-font);background:transparent;color:#ece8dc}
#ending-dialog::backdrop{background:transparent}
#ending-black{position:absolute;inset:0;background:#050505;opacity:0;pointer-events:none}
#ending-inscription{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:24px 24px 5vh;background:linear-gradient(transparent 60%,#050605aa);text-shadow:0 2px 6px #000;outline:0}
#ending-inscription p{font:18px/1.6 var(--menu-font);letter-spacing:.13em;margin:0 0 22px}
#ending-inscription span{font:italic 17px Georgia,serif;color:#d2c9b4}
#ending-credits{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:#050505}
/* Measured row positions follow the MP3 clock, never a CSS animation timer. */
.credits-window{position:relative;height:72dvh;width:min(100%,820px);overflow:hidden;mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent)}
.credits-roll{position:absolute;top:0;left:0;width:100%;will-change:transform}
.credit-row{min-height:130px;padding:32px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#9a978e}
.credit-row[data-current]{color:#ece8dc}
.credit-row p{margin:0;font:400 clamp(17px,2.1vw,25px)/1.7 var(--menu-font);max-width:720px}
.credit-row[data-kind="title"]{min-height:240px;padding:48px 12px}
.credit-row .credits-artist{font:12px/1.7 var(--menu-font);letter-spacing:.14em;margin:0 0 26px}
.credits-song-title{font:400 clamp(25px,3.8vw,42px)/1.4 var(--menu-font);letter-spacing:.03em;margin:0;outline:0;white-space:pre-line}
.credit-row[data-kind="closing"] p{font-size:13px;letter-spacing:.12em}
.credits-controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;align-items:center}
#credits-music-status{flex-basis:100%;margin:0 0 8px;font:12px/1.5 var(--menu-font);color:#9a998f}
#credits-music-status:empty{display:none}
.credits-controls .menu-option{font-size:13px}
@media(prefers-reduced-motion:reduce){.credits-window{display:flex;align-items:center;justify-content:center;mask-image:none;-webkit-mask-image:none}.credits-roll{position:static;will-change:auto}.credit-row:not([data-current]){display:none}}
@media(max-width:650px){.credit-row{min-height:146px;padding:28px 5px}.credits-window{height:70dvh}}
@media(max-height:500px){.credits-window{height:66dvh;margin-top:-8dvh}.credit-row{min-height:120px}.credits-controls{bottom:10px}.credits-song-title{font-size:24px}}

#ending-inscription h2{font:400 clamp(19px,3vw,27px)/1.4 Georgia,serif;letter-spacing:.10em;margin:0 0 10px}
#ending-inscription .memorial-dates{font:14px/1.6 var(--menu-font);letter-spacing:.025em;margin:0 0 20px}
#ending-inscription .memorial-epitaph{font:16px/1.6 Georgia,serif;letter-spacing:.10em;margin:0}