*{box-sizing:border-box}html,body{margin:0;background:#0b0a10;color:#f3e9dc;font-family:Inter,Arial,sans-serif}body{min-height:100vh;background:radial-gradient(ellipse at 50% 0,#2b2029 0,transparent 65%),#0b0a10}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid #66544e;background:#231c25;border-radius:9px;padding:10px 15px;font:inherit;touch-action:none}button:hover{background:#49313a;border-color:#c28f69}button:focus-visible,canvas:focus-visible{outline:2px solid #f6bd7d;outline-offset:3px}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}#app{max-width:1440px;margin:auto;padding:22px 32px 12px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.brand{font-size:25px;font-weight:800;letter-spacing:5px;color:#fff0de;text-decoration:none;display:flex;align-items:center;gap:22px}.brand span{font-size:9px;font-weight:500;color:#aa939f;letter-spacing:3px}.header-right{display:flex;align-items:center;gap:18px}.pill{font-size:9px;letter-spacing:2px;color:#e2b38b}#stage{position:relative;border:1px solid #54424a;border-radius:14px;overflow:hidden;background:#08090d;box-shadow:0 20px 100px #0009}canvas{display:block;width:100%;aspect-ratio:16/9;outline:none}.overlay{position:absolute;inset:0;display:flex}.title-screen{background:linear-gradient(90deg,#090a10fa 0%,#0b0b10ed 32%,#0b0b1060 65%,#090a1020),url('assets/cover.webp') center/cover}.title-content{padding:6% 5%;width:66%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.eyebrow{color:#dcb38d;font-size:10px;letter-spacing:4px}h1{font-size:clamp(36px,6.7vw,91px);font-weight:300;letter-spacing:8px;line-height:.96;margin:22px 0 10px}h1 span{display:block;font-weight:800;color:#f1c393}.subtitle{font-size:10px;letter-spacing:3px;color:#d7c4be;margin:15px 0}.story{font-size:clamp(11px,1.1vw,15px);line-height:1.8;color:#c6b8bc;margin:8px 0 25px}.primary{background:#edbd8d;border-color:#edbd8d;color:#271c24;font-weight:700;padding:15px 26px;min-width:220px;display:flex;align-items:center;justify-content:space-between;gap:22px}.primary:hover{background:#ffdbb5;color:#271c24}.fine{font-size:10px;color:#c3aebb;line-height:1.5;max-width:350px}.title-controls{display:flex;gap:18px;font-size:8px;letter-spacing:1px;margin-top:15px;color:#c1b5c3;flex-wrap:wrap}kbd{font-family:inherit;border:1px solid #776573;border-radius:4px;padding:3px 5px;font-size:9px;color:#f0d8c2;margin-right:4px}.cover-caption{position:absolute;bottom:6%;right:4%;text-align:right;display:flex;flex-direction:column;gap:8px;text-shadow:0 2px 10px #000}.cover-caption span{font-size:8px;letter-spacing:2px;color:#dfb694}.cover-caption b{font-size:16px;font-weight:500}.cover-caption small{font-size:10px;color:#c9b5bd}footer{display:flex;justify-content:space-between;align-items:center;padding:15px 0;gap:15px}.now{display:flex;gap:12px;align-items:center}.now b{display:block;font-size:11px;font-weight:500}.now span{display:block;color:#a18e9d;font-size:10px;margin-top:5px}.desktop-help{font-size:10px;color:#ac9bae}.desktop-help kbd{margin-left:12px}.bottom-note{text-align:center;color:#806e83;font-size:10px;letter-spacing:.3px;padding:4px 0 12px}#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:22px 26px 40px;pointer-events:none;background:linear-gradient(#070912ed,transparent);gap:20px}.score{display:flex;flex-direction:column;gap:3px}.score small,.act small{font-size:9px;letter-spacing:2px;color:#d6b797}.score strong{font-size:28px;font-variant-numeric:tabular-nums;letter-spacing:2px}.score span{font-size:11px;color:#c8cee8}.act{text-align:center;width:35%;padding-top:4px}.progress{height:3px;background:#4a3f50;margin:12px 0 8px}.progress i{height:3px;display:block;background:#edbd8d;width:0}.act>span{font-size:10px;color:#c4b1ca}.vitals{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.vitals strong{color:#efadb1;font-size:22px;letter-spacing:5px}.vitals span{font-size:12px;color:#c8e6d8}#toast{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:#14121deb;border:1px solid #716050;color:#edd0ad;padding:12px 22px;border-radius:8px;font-size:12px;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;max-width:85%}#toast.show{opacity:1}#chapterBanner{position:absolute;left:6%;top:25%;pointer-events:none;opacity:0;transition:opacity .5s;display:flex;flex-direction:column;text-shadow:0 2px 12px #000}#chapterBanner.show{opacity:1}#chapterBanner small{font-size:10px;letter-spacing:4px;color:#e2b087}#chapterBanner strong{font-size:34px;font-weight:300;margin-top:10px}.panel{background:#090a12ce;backdrop-filter:blur(7px);align-items:center;justify-content:center;text-align:center}.panel h2{font-size:48px;font-weight:300;margin:15px 0}.panel p{color:#c6b8c8;font-size:14px}.panel .primary{margin:25px auto 12px}.quiet{background:transparent;font-size:12px}.panel #results{display:flex;gap:35px;justify-content:center;margin:25px 0}.panel #results strong{font-size:28px;display:block;color:#f6d4ac}.panel #results small{font-size:9px;letter-spacing:2px;color:#b5a1bd;display:block;margin-top:8px}.touch{display:flex;justify-content:space-between;margin:4px 0 12px}.touch>div{display:flex;gap:9px}.touch button{min-width:60px;user-select:none;-webkit-user-select:none}#app:fullscreen{max-width:none;background:#090a10;display:flex;flex-direction:column;justify-content:center;padding:10px;height:100vh}#app:fullscreen #stage{width:min(100%,calc((100vh - 160px)*16/9));margin:0 auto}#app:fullscreen header{display:none}@media(min-width:1000px) and (pointer:fine){.touch{display:none}}@media(max-width:700px){#app{padding:9px}.brand{font-size:18px;gap:12px}.brand span{font-size:7px;letter-spacing:1px}.pill{display:none}header{margin-bottom:9px}.title-content{padding:4%;width:80%}h1{font-size:38px;letter-spacing:5px;margin:10px 0 0}.eyebrow{font-size:7px}.subtitle{font-size:7px;margin:7px 0}.story{font-size:10px;line-height:1.45;margin:5px 0 9px}.primary{min-width:170px;padding:10px 16px;font-size:11px}.fine{font-size:8px;margin:6px 0}.title-controls,.cover-caption,.desktop-help{display:none}#hud{padding:10px 12px}.score strong{font-size:19px}.score small,.act small{font-size:7px}.score span,.vitals span{font-size:9px}.vitals strong{font-size:15px;letter-spacing:2px}.act>span{display:none}.progress{margin-top:8px}.now b{font-size:10px}.now span{font-size:8px}footer{padding:9px 0}#toast{font-size:10px;padding:7px 10px}.panel h2{font-size:28px}.panel p{font-size:11px}.panel #results{margin:10px;gap:20px}.panel #results strong{font-size:20px}.panel .primary{margin:12px auto 8px}.panel .eyebrow{font-size:8px}#chapterBanner strong{font-size:23px}.bottom-note{font-size:8px}}

.lyric-settings{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:12px;color:#b9adbd;font-size:12px}.lyric-settings button{font:inherit;color:#e9d6bd;background:#24202c;border:1px solid #554557;border-radius:6px;padding:7px 12px}.lyric-settings label{display:flex;align-items:center;gap:9px}.lyric-settings input{width:110px;accent-color:#d6b792}.lyric-settings small{opacity:.65}.lyric-settings output{min-width:35px}

/* A quiet animated opening, with a reduced-motion alternative. */
.title-screen{isolation:isolate;transition:background-position .25s ease-out}
.title-screen::before,.title-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.title-screen::before{background:radial-gradient(ellipse at 75% 20%,#f0c19b18,transparent 45%);animation:title-light 9s ease-in-out infinite alternate}
.title-screen::after{background:radial-gradient(circle at 72% 30%,#e8c6a777 0 1px,transparent 2px),radial-gradient(circle at 88% 68%,#e8c6a755 0 1px,transparent 2px),radial-gradient(circle at 57% 56%,#e8c6a744 0 1px,transparent 2px);animation:title-dust 13s ease-in-out infinite alternate}
.title-content,.cover-caption{z-index:1}.title-content{position:relative;transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .3s ease-out}
.title-content>.eyebrow,.title-content>h1,.title-content>.story,.title-content>.primary{animation:title-enter .9s both}.title-content>h1{animation-delay:.12s}.title-content>.story{animation-delay:.28s}.title-content>.primary{animation-delay:.4s}
.title-content h1 span{animation:title-glow 5s ease-in-out infinite alternate}.subtitle{min-height:1.3em}.cue-enter{animation:cue-enter .7s both}
.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#edbd8d;margin-right:10px;box-shadow:0 0 10px #edbd8d88;animation:title-glow 3s ease-in-out infinite alternate}
@keyframes title-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes cue-enter{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes title-glow{from{filter:brightness(.9);text-shadow:0 0 8px #edbd8d00}to{filter:brightness(1.06);text-shadow:0 0 22px #edbd8d22}}
@keyframes title-light{from{opacity:.35}to{opacity:.9}}
@keyframes title-dust{from{transform:translate(0,0);opacity:.3}to{transform:translate(-16px,-25px);opacity:.7}}
@media(prefers-reduced-motion:reduce){.title-screen::before,.title-screen::after,.title-content>*,.title-content h1 span,.live-dot{animation:none!important}.title-content,.title-screen{transition:none!important;transform:none!important}}

#menuPortrait{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;animation:portrait-arrive 2.4s cubic-bezier(.2,.7,.2,1) both}
.menu-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#090a10fa,#0b0b10ed 32%,#0b0b1040 66%,#090a1010)}
.title-content,.cover-caption{z-index:3}.title-screen::before,.title-screen::after{z-index:2}
.title-content>h1{animation:title-enter 1.4s .35s both}.title-content>.eyebrow{animation:title-enter 1s .1s both}.title-content>.story{animation:title-enter 1.2s .7s both}.title-content>.primary{animation:title-enter 1.2s 1s both}
@keyframes portrait-arrive{from{opacity:0;transform:scale(1.06);filter:brightness(.35)}to{opacity:1;transform:scale(1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){#menuPortrait{animation:none!important}}

#musicAnalyser{width:90px;height:24px;aspect-ratio:auto;opacity:.65}#menuAnalyser{position:absolute;right:4%;bottom:19%;width:23%;height:6%;aspect-ratio:auto;z-index:3;opacity:.45;pointer-events:none}@media(max-width:700px){#menuAnalyser{display:none}#musicAnalyser{width:45px}}

#winScreen{overflow-y:auto;align-items:flex-start;padding:24px}#winScreen>div{width:min(660px,100%);margin:auto}#winScreen h2{font-size:32px;margin:10px}#winScreen #results{margin:16px}.leaderboard{border-top:1px solid #57434b;margin-top:12px;padding-top:12px;text-align:left}.leaderboard h3{font-size:12px;letter-spacing:3px;color:#e6bd94}.score-entry{display:flex;gap:8px;margin-top:7px}#scoreForm label{font-size:11px;color:#c9b4c1}.score-entry input{min-width:0;flex:1;background:#15131e;border:1px solid #776071;border-radius:6px;padding:10px;color:#f5e4ce;font:inherit}.score-entry button{font-size:12px}#scoreMessage{font-size:12px;min-height:16px;color:#d8bfa9}.scores-list{list-style:none;padding:0;margin:10px 0;max-height:190px;overflow:auto}.scores-list li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:9px 8px;border-bottom:1px solid #ffffff0d;font-size:12px;text-align:left}.scores-list li.mine{background:#edbd8d18}.scores-list strong{color:#efc493;font-variant-numeric:tabular-nums}.scores-list small{color:#a992a5}.scores-list .empty{display:block;color:#ac96a9}.refresh-scores{font-size:10px;padding:5px 8px}dialog{width:min(520px,90vw);border:1px solid #776071;border-radius:14px;background:#14111d;color:#f3e9dc;padding:28px}dialog::backdrop{background:#05040bd9}dialog h2{font-weight:400}dialog p{color:#bca5b8;font-size:12px}#closeScores{float:right;padding:4px 11px}#showScores{margin-top:8px;font-size:11px;padding:5px 0;border:0}.field-guide{font-size:11px;color:#bdaabd;margin:12px 0}.field-guide summary{cursor:pointer;color:#e5c5a4}.field-guide p{line-height:1.8}.rose{color:#f18fa5}.purple{color:#b6a0f0}.gold{color:#f0b75e}@media(max-width:700px){#winScreen{padding:12px}#winScreen h2{font-size:22px}.scores-list{max-height:120px}#showScores{font-size:9px;margin:2px 0}#winScreen #results strong{font-size:20px}}

#menuDust{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.title-content>h1{animation:title-enter 1.4s .35s both,neon-breathe 19s 3s infinite}.title-content h1 span{animation:none;text-shadow:0 0 24px #efbd8b12}@keyframes neon-breathe{0%,38%,39%,72%,73%,100%{filter:brightness(1);text-shadow:0 0 25px #efbd8b12}38.4%,72.4%{filter:brightness(.92);text-shadow:0 0 15px #efbd8b08}38.7%,72.7%{filter:brightness(.97)}}.menu-board{position:absolute;right:3.5%;top:5%;width:24%;z-index:4;padding:14px 16px;background:linear-gradient(115deg,#100e18d9,#100e1866);border:1px solid #dab69522;border-radius:9px;backdrop-filter:blur(8px)}.menu-board h2{font-size:10px;letter-spacing:3px;font-weight:500;color:#d9b99b;margin:0 0 9px}.menu-board .scores-list{margin:0;max-height:125px}.menu-board .scores-list li{font-size:11px;grid-template-columns:17px 1fr auto;gap:5px;padding:7px 0}.menu-board .quiet{font-size:9px;padding:5px 7px;margin-top:5px}.menu-board .empty{line-height:1.5;color:#b69fad}#menuAnalyser{width:30%;height:10%;right:4%;bottom:18%;opacity:.5}@media(max-width:700px){.menu-board{width:29%;right:2%;padding:8px;top:4%}.menu-board h2{font-size:7px;letter-spacing:1px}.menu-board .scores-list li{font-size:8px;grid-template-columns:10px 1fr auto}.menu-board .scores-list{max-height:85px}.menu-board .quiet{font-size:8px;padding:3px}.menu-board .empty{font-size:8px}.title-content{width:68%}.vitals{gap:3px}#ammo{font-size:9px}}@media(prefers-reduced-motion:reduce){.title-content>h1{animation:none!important;filter:none!important}}

/* Arrival stays photographic; briefing is revealed only after Enter. */
.title-screen:not(.session-ready) .session-only{display:none}.title-content>h1{animation:title-enter 1.4s .35s both}.title-content h1 .title-line{display:block;font:inherit;color:#f4f0eb;text-shadow:none;white-space:nowrap}.title-content h1 .title-join{display:inline-block;font-size:.18em;font-weight:300;letter-spacing:.14em;line-height:1;margin-left:.65em;vertical-align:middle;color:#f4f0eb}.title-content h1 .light-line{font-weight:800;color:#f29a85}.neon-letter{display:inline-block;font-style:normal;animation:letter-fault 11s infinite;text-shadow:0 0 14px #f29a8528}.neon-letter.n1,.neon-letter.n7{animation-delay:-3.2s;animation-duration:13s}.neon-letter.n3,.neon-letter.n5{animation-delay:-7.7s;animation-duration:17s}.neon-letter.n0,.neon-letter.n4,.neon-letter.n9{animation-delay:-1.7s;animation-duration:23s}.neon-letter.n2,.neon-letter.n6,.neon-letter.n8{animation-delay:-9.1s;animation-duration:19s}@keyframes letter-fault{0%,67%,69%,100%{opacity:1;text-shadow:0 0 18px #f29a8540}67.25%,68.1%{opacity:.4;text-shadow:none}67.6%,68.45%{opacity:.88;text-shadow:0 0 9px #f29a8520}}
.session-panel{position:absolute;z-index:4;right:3%;top:5%;bottom:5%;width:57%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ae8d7966 transparent;padding:1px 5px 1px 1px}.session-panel .menu-board{position:relative;inset:auto;width:100%;padding:13px 18px;background:linear-gradient(125deg,#ffffff0c,#ffffff02);border:1px solid #ffffff25;border-top-color:#fff5e34a;box-shadow:inset 0 1px 0 #ffffff14,0 10px 30px #0002;backdrop-filter:blur(14px) saturate(.8);-webkit-backdrop-filter:blur(14px) saturate(.8)}.session-panel .menu-board h2{font-size:10px}.session-panel .scores-list{display:flex;gap:15px;max-height:none}.session-panel .scores-list li{flex:1;grid-template-columns:15px 1fr;align-items:center;min-width:0}.session-panel .scores-list li strong{grid-column:2}.session-panel .scores-list li span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-panel .menu-board .quiet{margin:5px 7px 0 0}.session-guide{margin-top:12px;padding:18px;background:linear-gradient(130deg,#0e101cb5,#0c101b70);border:1px solid #ffffff1a;border-radius:9px;backdrop-filter:blur(9px)}.guide-heading>span{font-size:8px;letter-spacing:2px;color:#cfad95}.guide-heading h2{font-size:23px;font-weight:400;margin:5px 0 13px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}.guide-grid h3{font-size:10px;font-weight:600;color:#eed9bd;margin:0 0 9px}.guide-row{display:flex;align-items:center;gap:10px;margin:8px 0}.guide-row p{margin:0}.guide-row b,.case-key b{display:block;font-size:10px;font-weight:600}.guide-row p span,.case-key span{display:block;font-size:10px;line-height:1.45;color:#c5b9c5;margin-top:3px}.guide-row em{font-style:normal;color:#f4d29e}.bot-icon{position:relative;display:block;width:25px;height:29px;flex:0 0 25px;border:1px solid currentColor;border-top:4px solid currentColor;border-radius:4px;background:#141722;box-shadow:0 0 12px currentColor inset}.bot-icon:after{content:'';position:absolute;left:6px;top:8px;width:10px;height:10px;border:2px solid currentColor;border-radius:50%;background:#141722}.loot-icon{width:25px;flex:0 0 25px;text-align:center;font-style:normal;font-size:24px}.cd-icon{color:#d8d3fa}.ammo-icon{color:#9cd8ec}.health-icon{color:#a6ebba}.case-key b{margin-top:7px}.boss-brief{margin-top:15px;border-top:1px solid #ead4b422;padding-top:12px}.boss-brief b{font-size:9px;letter-spacing:1px;color:#e9bc86}.boss-brief p{font-size:10px;line-height:1.6;color:#ccbecb;margin:6px 0 0}.session-ready .title-content{width:38%;padding:5% 3.5%;justify-content:center}.session-ready h1{font-size:clamp(28px,4.5vw,64px);letter-spacing:3px}.session-ready .story{display:none}.session-ready .subtitle{font-size:9px;line-height:1.6}.session-ready .title-controls{gap:12px;line-height:2}.session-ready .cover-caption{display:none}.session-ready #menuAnalyser{right:auto;left:4%;width:30%;bottom:6%;height:7%}.session-ready .primary{min-width:0;width:100%;max-width:245px}.session-ready .fine{font-size:10px;line-height:1.6}
@media(max-width:700px){.session-panel{width:60%;right:2%;top:3%;bottom:3%}.session-ready .title-content{width:37%;padding:3%}.session-ready h1{font-size:27px;letter-spacing:1px}.session-ready .primary{padding:10px;font-size:10px}.session-ready .subtitle{font-size:7px}.session-ready .fine{font-size:8px}.session-panel .menu-board{padding:10px}.session-panel .scores-list{display:block}.session-panel .scores-list li{display:grid;grid-template-columns:15px 1fr auto;font-size:10px}.session-panel .scores-list li strong{grid-column:auto}.session-guide{padding:12px}.guide-grid{grid-template-columns:1fr;gap:14px}.guide-heading h2{font-size:19px}.guide-row b,.guide-row p span,.case-key b,.case-key span{font-size:11px}.session-ready .title-controls{display:none}.boss-brief p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.neon-letter{animation:none!important}}

.professional-brief{padding:20px}.brief-header{display:block;margin:0 0 22px}.brief-header>span{font-size:8px;letter-spacing:2.5px;color:#c9a98f}.brief-header h2{font-size:25px;font-weight:400;letter-spacing:-.5px;margin:8px 0}.brief-header p{font-size:11px;color:#bcb0c0;line-height:1.6;margin:0}.brief-section{margin:0 0 22px}.brief-section:last-child{margin-bottom:0}.brief-section>h3{display:flex;gap:10px;align-items:center;font-size:11px;font-weight:500;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid #ffffff16}.brief-section>h3>span{color:#ac8e78;font-size:9px;letter-spacing:1px}.brief-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.brief-card{border:1px solid #ffffff12;border-radius:7px;background:linear-gradient(145deg,#ffffff05,#0a0c1630);overflow:hidden}.brief-card canvas{width:100%;height:85px;aspect-ratio:auto;object-fit:contain;background:radial-gradient(ellipse at 50% 60%,#b8b0c00b,transparent 70%);border-bottom:1px solid #ffffff0a}.brief-card>div{padding:10px}.brief-card small{font-size:7px;letter-spacing:1px;color:#c5a58b}.brief-card h4{font-size:11px;font-weight:600;color:#eee1d4;margin:5px 0}.brief-card p{font-size:10px;line-height:1.6;color:#c5b8c8;margin:0}.brief-card p b{color:#f0c28b}.brief-section:last-child .brief-cards{grid-template-columns:1fr 1fr}@media(max-width:700px){.professional-brief{padding:12px}.brief-header h2{font-size:20px}.brief-cards,.brief-section:last-child .brief-cards{grid-template-columns:1fr}.brief-card{display:grid;grid-template-columns:86px 1fr;align-items:center}.brief-card canvas{height:82px;border:0}.brief-card p{font-size:11px}.brief-card h4{font-size:12px}.brief-card small{font-size:8px}}

/* Compact controls leave the portrait visible until the player asks for a panel. */
.session-panel{bottom:auto;max-height:90%;padding:1px 5px 4px 1px;pointer-events:none}.menu-drawer{margin:0 0 9px;pointer-events:none}.menu-drawer>summary{pointer-events:auto;list-style:none;cursor:pointer;width:185px;margin-left:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 15px;border:1px solid #fff4df30;border-radius:8px;background:linear-gradient(120deg,#ffffff0d,#0b0d1933);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#ebd6be;font-size:11px;letter-spacing:.7px;box-shadow:inset 0 1px 0 #ffffff12}.menu-drawer>summary::-webkit-details-marker{display:none}.menu-drawer>summary:hover{background:#ffffff16;border-color:#ead0ac55}.menu-drawer>summary:focus-visible{outline:2px solid #edbd8d;outline-offset:3px}.menu-drawer>summary>span{font-size:18px;line-height:16px;font-weight:300;transition:transform .2s}.menu-drawer[open]>summary>span{transform:rotate(45deg)}.menu-drawer[open]>summary{margin-bottom:9px}.menu-drawer>.menu-board,.menu-drawer>.session-guide{pointer-events:auto}.menu-drawer>.session-guide{margin-top:0}.menu-drawer:not([open])>*:not(summary){display:none}@media(max-width:700px){.menu-drawer>summary{width:140px;padding:9px 11px;font-size:10px}.session-panel{max-height:94%}}@media(prefers-reduced-motion:reduce){.menu-drawer>summary>span{transition:none}}

.theme-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 12px;max-width:320px;margin:14px 0;color:#e2c6a9}.theme-picker label{font-size:9px;letter-spacing:1.7px}.theme-picker select{min-width:0;background:#17121de8;color:#f8e8d5;border:1px solid #c5a48066;border-radius:5px;padding:8px 25px 8px 10px;font:inherit;font-size:12px;cursor:pointer}.theme-picker select:focus-visible{outline:2px solid #e9b47d;outline-offset:3px}.theme-picker small{grid-column:1/-1;font-size:10px;color:#c3b6ac;min-height:12px}html[data-theme="amber"] .theme-picker select{border-color:#e9ad68}html[data-theme="amber"] .primary{background:#e9bf95}@media(max-height:700px){.theme-picker{margin:7px 0;gap:3px 8px}.theme-picker select{padding:5px 20px 5px 8px}.theme-picker small{font-size:9px}}

@media(max-width:700px){.theme-picker{max-width:100%;gap:3px 6px;margin:5px 0}.theme-picker label{font-size:7px;letter-spacing:.6px}.theme-picker select{font-size:9px;padding:4px}.theme-picker small{display:none}}

html[data-theme="encore"] .theme-picker select{border-color:#dba7c6}html[data-theme="encore"] .primary{background:#e5c0cf}

html[data-theme="cinematic"] #stage{border-color:#8f6f65;border-radius:7px}html[data-theme="cinematic"] .theme-picker select{border-color:#d4b1cc}html[data-theme="cinematic"] .primary{background:#ead0bb;border-color:#ead0bb}html[data-theme="cinematic"] #hud{background:linear-gradient(#08090dbb,transparent);text-shadow:0 2px 8px #000}html[data-theme="cinematic"] .progress i{background:linear-gradient(90deg,#d59c74,#e1a7ce);box-shadow:0 0 8px #e6b0a666}

/* Album colours persist on the player controls during menus and gameplay.
   The playing HUD and the colours identifying enemies, items and notes stay intact. */
body{--menu-coral:#f29a85;--menu-ivory:#f4f0eb;--menu-muted:#cbb7b7;--menu-line:#f29a8555}
#titleScreen{color:var(--menu-ivory,#f4f0eb)}
#titleScreen .primary{background:var(--menu-ivory);border-color:var(--menu-ivory);color:#211a20}
#titleScreen .primary:hover{background:#fffdfa;border-color:#fffdfa}
#titleScreen :is(button,select,.menu-drawer>summary):focus-visible{outline-color:var(--menu-coral)}
#titleScreen :is(.eyebrow,.cover-caption span,.menu-board h2,.scores-list strong,.brief-header>span,.brief-section>h3>span,.brief-card small,.brief-card p b,.boss-brief b){color:var(--menu-coral)}
#titleScreen :is(.theme-picker,.menu-drawer>summary,kbd,.brief-card h4,.quiet){color:var(--menu-ivory)}
#titleScreen :is(.fine,.theme-picker small,.cover-caption small,.title-controls,.scores-list small,.scores-list .empty){color:var(--menu-muted)}
#titleScreen .theme-picker select{color:var(--menu-ivory);border-color:#f29a8599;color-scheme:dark}
#titleScreen .menu-drawer>summary{border-color:var(--menu-line)}
#titleScreen .menu-drawer>summary:hover{border-color:var(--menu-coral);background:#f29a8514}
#titleScreen .quiet{border-color:var(--menu-line)}
#titleScreen .quiet:hover{color:var(--menu-coral);background:#f29a8514}
#titleScreen .session-panel{scrollbar-color:#f29a8566 transparent}
#titleScreen .session-panel .menu-board{border-color:#f29a8533;border-top-color:#f4f0eb4a}
#titleScreen .scores-list li.mine{background:#f29a8518}
#titleScreen .live-dot{background:var(--menu-coral);box-shadow:0 0 10px #f29a8588;animation-name:menu-accent-glow}
@keyframes menu-accent-glow{from{filter:brightness(.9);text-shadow:0 0 8px #f29a8500}to{filter:brightness(1.06);text-shadow:0 0 22px #f29a8522}}
body :is(.brand,footer,.desktop-help kbd,.lyric-settings button,#scoresDialog){color:var(--menu-ivory)}
body :is(.pill,.lyric-settings output,#scoresDialog .scores-list strong){color:var(--menu-coral)}
body :is(footer button,.header-right button,.touch button,.lyric-settings button,#scoresDialog button){border-color:var(--menu-line)}
body :is(footer button,.header-right button,.touch button,.lyric-settings button,#scoresDialog button):hover{border-color:var(--menu-coral);background:#f29a8518}
body :is(button,input,select,summary):focus-visible{outline:2px solid var(--menu-coral);outline-offset:3px}
body .lyric-settings input{accent-color:var(--menu-coral);color-scheme:dark}
body .lyric-settings button[aria-pressed="true"]{color:var(--menu-coral);border-color:#f29a8580;background:#f29a8512}
body #scoresDialog .scores-list li.mine{background:#f29a8518}

/* Intermission and the encore share the album's coral, ivory and smoked glass. */
:is(#pauseScreen,#winScreen){color:#f4f0eb;background:radial-gradient(ellipse at 50% 10%,#f29a8510,transparent 65%),#0d0b13de;scrollbar-color:#f29a8566 transparent}
#pauseScreen{overflow-y:auto;align-items:flex-start;padding:30px 20px}
#pauseScreen>div{margin:auto;width:min(540px,100%)}
.intermission-brand{font-size:17px;font-weight:800;letter-spacing:3px;color:#f29a85;margin-bottom:24px}
.intermission-brand span{font-weight:400;font-size:10px;letter-spacing:1px;color:#f4f0eb}
:is(#pauseScreen,#winScreen) .eyebrow{color:#f29a85;font-size:9px;letter-spacing:3px}
:is(#pauseScreen,#winScreen) p{color:#cbb7b7}
:is(#pauseScreen,#winScreen) .primary{background:#f29a85;border-color:#f29a85;color:#211a20}
:is(#pauseScreen,#winScreen) .primary:hover{background:#ffb5a2;border-color:#ffb5a2}
:is(#pauseScreen,#winScreen) :is(button,input){border-color:#f29a8555;color:#f4f0eb}
:is(#pauseScreen,#winScreen) button:hover{border-color:#f29a85}
:is(#pauseScreen,#winScreen) :is(.leaderboard h3,.scores-list strong){color:#f29a85}
:is(#pauseScreen,#winScreen) .scores-list li.mine{background:#f29a8518}
#winScreen :is(#scoreMessage,#scoreForm label){color:#cbb7b7}
#winScreen .leaderboard{border-color:#f29a8533}
#winScreen .intermission-brand{margin-bottom:16px}
.pause-stats{display:flex;justify-content:center;gap:24px;font-size:11px;color:#cbb7b7;margin:25px 0 15px}
.pause-stats b{font-size:19px;color:#f4f0eb;font-variant-numeric:tabular-nums;margin-right:6px}
#pauseScreen .bonus-hint{font-size:12px;line-height:1.9;color:#f29a85}
#pauseScreen .bonus-hint small{font-size:10px;color:#cbb7b7}
#winScreen #results{display:block;margin:18px 0 20px}
#results .score-total{padding:16px 12px 20px;border:1px solid #f29a852e;border-radius:12px;background:linear-gradient(135deg,#f29a8509,#f4f0eb04);box-shadow:inset 0 1px 0 #f4f0eb0b}
#winScreen #results #tallyValue{font-size:clamp(44px,6vw,68px);line-height:1.15;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums;color:#f4f0eb;text-shadow:0 0 25px #f29a8518;transition:text-shadow .6s,color .6s}
#results #tallyLabel{margin:0 0 8px;color:#cbb7b7;font-size:9px;letter-spacing:3px}
.tally-meter{display:block;height:2px;max-width:180px;background:#f29a851a;margin:12px auto 0;overflow:hidden}
.tally-meter i{display:block;height:100%;background:#f29a85;box-shadow:0 0 10px #f29a85;width:0}
#winScreen #results.tally-complete #tallyValue{color:#f29a85;text-shadow:0 0 30px #f29a8544}
#results .run-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:17px 0}
#results .run-stats b{font-size:18px;color:#f4f0eb;font-variant-numeric:tabular-nums}
#results .run-stats small{font-size:8px;letter-spacing:1px;color:#cbb7b7;margin-top:5px}
.bonus-ledger{border-top:1px solid #f29a8522;text-align:left}
.base-row,.bonus-row{display:flex;justify-content:space-between;gap:18px;padding:10px 12px;font-size:11px}
.base-row{color:#cbb7b7}
.base-row b,.bonus-value b{font-variant-numeric:tabular-nums}
.bonus-row{border-top:1px solid #f4f0eb0a;opacity:0;transform:translateY(7px);transition:opacity .35s,transform .35s,background .6s}
.bonus-row.revealed{opacity:1;transform:translateY(0)}
.bonus-row.earned.revealed{background:linear-gradient(90deg,#f29a8514,transparent)}
.bonus-row.earned b{color:#f29a85}
.bonus-row.missed b{color:#cbb7b7}
#results .bonus-row small{font-size:9px;letter-spacing:0;color:#cbb7b7;margin-top:4px;line-height:1.5}
.bonus-value{text-align:right;flex-shrink:0}
.bonus-value b{font-size:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){#results .run-stats{gap:4px}#results .run-stats small{font-size:7px;letter-spacing:.25px}#results .run-stats b{font-size:16px}.base-row,.bonus-row{padding:9px 6px;font-size:10px}#winScreen .intermission-brand{font-size:13px}#pauseScreen{padding:22px 14px}#pauseScreen .intermission-brand{margin-bottom:18px}#winScreen #results{margin:14px 0}}
@media(prefers-reduced-motion:reduce){.bonus-row,#winScreen #results #tallyValue{transition:none}}
