/* Scene v2. Transport positions remain in style.css. */
@font-face { font-family:TalkingBoard; src:url('assets/Besley.ttf') format('truetype'); font-weight:400 900; font-display:swap; }
.theater { --room-dim:.28; --vignette-inner:44%; --vignette-power:.57; --light-left:0; --light-right:0; --light-lower:0; --candle-lit1:0; --candle-lit2:0; --candle-lit3:0; --ritual-heat:0; --emblem-intensity:0; }
.tabletop { background:#332317 url('assets/walnut-table-v2.webp') center/cover no-repeat; box-shadow:none; }
.tabletop::after { background:#100c08; opacity:var(--room-dim); }
/* Lighten the emblem against the table while preserving the control highlight tint. */
.topbar { z-index:auto; }
.topbar>.text-button { position:relative; z-index:20; }
.topbar>.band-logo { z-index:20; mix-blend-mode:lighten; color:var(--paper); transition:color .45s; }
.topbar>.band-logo:hover,.topbar>.band-logo:focus-visible { color:#f2dfb7; }
.topbar>.text-button:hover { color:var(--paper); }
.band-logo #band-symbol { opacity:1; filter:drop-shadow(0 0 calc(var(--emblem-intensity)*14px) rgb(255 214 153 / calc(var(--emblem-intensity)*.8))); transition:filter .45s ease-in-out; }
.band-logo:hover #band-symbol,.band-logo:focus-visible #band-symbol { opacity:1; }
/* One physical board position and aspect ratio, in every mode. */
.theater { overflow:clip; }
.theater .scene-frame,.theater .scene-ui { inset:0 0 80px; --board-size:min(76vw,calc((100dvh - 440px)*1.6129),1040px); }
.scene-ui { position:absolute; z-index:5; pointer-events:none; }
.scene-ui .scene-actions { pointer-events:auto; }
.scene-frame,.tabletop,.candle-light,.room-shadow { transform:rotate(var(--scene-cant,0deg)) scale(var(--scene-zoom,1)); will-change:transform; }
.scene-frame { transform-origin:50% 50%; }
.tabletop,.candle-light,.room-shadow { transform-origin:50% calc(50% - 40px); }
@media(orientation:landscape) and (max-height:599px){ .tabletop,.candle-light,.room-shadow { transform-origin:50% calc(50% - 25px); } }
.theater .board-wrap { z-index:7; width:var(--board-size); max-width:none; aspect-ratio:1000/620; transform:perspective(1200px) translateY(var(--board-arrival-y,0px)) scale(var(--board-arrival-scale,1)) rotateX(var(--board-arrival-tilt,0deg)) rotate(var(--board-tilt,0deg)); transform-origin:center; color:#271b11; filter:none; overflow:visible; }
/* Keep the moving planchette outside a cached whole-board filter surface. */
.theater:not(.title-intro) .board-wrap { transform:rotate(var(--board-tilt,0deg)); }
.theater.title-intro .board-wrap { opacity:var(--board-arrival-opacity,0); pointer-events:none; will-change:transform; }
.board { aspect-ratio:1000/620; }
.theater.board-resumable .board-wrap { cursor:pointer; }
#playback-cursor-region { fill:transparent; pointer-events:none; }
.theater.playback-cursor-active #playback-cursor-region { cursor:none; pointer-events:all; }
#board-art { filter:drop-shadow(2px var(--board-shadow-y,13px) var(--board-shadow-blur,17px) #080503b3) saturate(.62) brightness(1.1); }
.board-title { font:700 62px TalkingBoard,Georgia,serif; letter-spacing:3px; transition:opacity .6s; }
/* Brown ink sinks into the grain; the clearance and foreground reuse the exact board.
   No backdrop blend modes or pale paper washes are involved in the animated fades. */
.title-card { --gates-opacity:.68; --glow-opacity:.72; color:#4b2a14; visibility:hidden; }
.theater.title-card-visible .title-card { visibility:visible; }
#title-card-gates { visibility:hidden; }
#title-card-gates-image { opacity:var(--gates-opacity); }
#title-card-glow { visibility:hidden; }
#title-card-glow>image { opacity:var(--glow-opacity); }
.has-gates-art #title-card-gates,.has-gates-art #title-card-glow { visibility:inherit; }
#title-card-title-image { visibility:hidden; opacity:.96; }
.has-title-art #title-card-title-image { visibility:inherit; }
.has-title-art #ritual-title { visibility:hidden; }
.lyric-line.quoted,#transcript button.quoted { font-style:italic; }
.board-byline { font:600 16px TalkingBoard,Georgia,serif; letter-spacing:5px; transition:opacity .9s; }
.board-key text { font-family:TalkingBoard,Georgia,serif; font-weight:700; }
.board-wrap { --ouija-stroke:3.25px; }
.ouija-wordmark { font:800 72px TalkingBoard,Georgia,serif; letter-spacing:5px; fill:none; stroke:currentColor; stroke-width:var(--ouija-stroke); stroke-linejoin:round; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.theater.board-mode .ouija-wordmark { opacity:.9; }
.ouija-underline { fill:none; stroke:currentColor; stroke-width:var(--ouija-stroke); stroke-linecap:round; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.ouija-underline-copy { transform:translateY(13px); }
.theater.board-mode .ouija-underline { opacity:.9; }
.ouija-game-enter { position:absolute; z-index:3; left:32%; bottom:calc(70% - 6px); width:36%; height:24%; min-height:44px; padding:0; background:transparent; border-radius:50%; }
.ouija-game-enter:focus-visible { outline:1px solid #271b1180; outline-offset:3px; }
.board-wrap:has(.ouija-game-enter:is(:hover,:focus-visible)) { --ouija-stroke:3.7px; }
.board-wrap:has(.ouija-game-enter:is(:hover,:focus-visible)) .ouija-wordmark { opacity:1; }
.pointer-follow .ouija-game-enter { cursor:none; }
.ouija-crosses { opacity:0; pointer-events:none; }
.theater.word-game .ouija-crosses { opacity:1; }
.ouija-crosses path { fill:none; stroke:currentColor; stroke-width:3.8; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; transition:stroke-dashoffset .38s ease,opacity .1s; }
.ouija-crosses .crossed path { stroke-dashoffset:0; opacity:1; }
.ouija-crosses .crossed path+path { transition-delay:.13s; }
.board-key { transition:opacity .45s ease; }
.word-game .board-key.game-guessed { opacity:.22; }
.word-game .board-key.game-missed { opacity:.12; }
.word-game .board-key.game-inactive { opacity:.35; }
.theater.quiet .ouija-crosses path,.theater.quiet .board-key { transition:none; }
.board-key[data-letter="GOOD BYE"] text,.board-key[data-letter="YES"] text,.board-key[data-letter="NO"] text { font-family:var(--ui); font-weight:700; letter-spacing:3px; }
.board-key .key-target { rx:8; }
.board-key:hover .key-target { fill:#2417090d; }
/* Keep the hover shapes transparent before they become interactive. Otherwise
   entering Explore changes the fill to brown while opacity fades from 1 to 0. */
.theater .board .board-word .key-target { rx:32px; ry:32px; stroke:none; fill:#3b2313; fill-opacity:0; transition:fill-opacity .3s ease; }
.theater.board-mode .board-word:not([aria-disabled="true"]):is(:hover,:focus-visible) .key-target { fill-opacity:.09; }
.theater.quiet .board-word .key-target { transition:none; }
.board-imprint { font:10px var(--serif); letter-spacing:3px; opacity:.66; }
.section-label { font:10px var(--ui); letter-spacing:3.4px; opacity:.63; }
.theater[data-phase="song"] .board-print,.theater[data-phase="opening"] .board-print { opacity:0; visibility:hidden; pointer-events:none; }
.theater[data-phase="song"] .board-title,.theater[data-phase="song"] .board-byline,.theater[data-phase="outro"] .board-title,.theater[data-phase="outro"] .board-byline,.theater.board-mode .board-title,.theater.board-mode .board-byline { opacity:0; }
.theater[data-phase="outro"] .board-print { opacity:var(--board-return,0); visibility:visible; pointer-events:none; transition:none; }
.theater.idle .board-print { opacity:0; visibility:hidden; }
.theater.board-mode .board-print { opacity:1; }
.lyric-ink { fill:#27190f; font-family:var(--serif); letter-spacing:0; }
.lyric-ink.spell { letter-spacing:0; }
.lyric-word { opacity:0; transition:fill .24s; }
.lyric-word.current { fill:#160c05; }
.lyric-line { pointer-events:none; }
.opening-ink { fill:#27190f; font-family:TalkingBoard,Georgia,serif; font-weight:700; pointer-events:none; }
.lyric-line.haunted,.lyric-line.spelling { font-family:TalkingBoard,Georgia,serif; font-weight:700; }
/* One composited fade owns the wood and the upright magnifier together. */
.planchette-assembly { opacity:var(--invitation-opacity,0); transition:opacity .45s; }
.theater.idle .planchette-assembly { transition:none; }
.theater .planchette,.theater.idle .planchette { opacity:1; transition:none; will-change:auto; }
#planchette-lens { transition:none; }
.gesture-surface { inset:2%; z-index:4; cursor:crosshair; touch-action:none; }
.theater.idle:not(.ritual-ready) .gesture-surface { cursor:pointer; }
.ritual-enter { position:absolute; z-index:5; left:50%; top:74%; width:29%; min-width:44px; min-height:44px; padding:0; transform:translate(-50%,-50%); border:0; background:transparent; cursor:pointer; }
.ritual-enter:focus-visible { outline:none; }
/* The raised board invitation uses native hand cursors only before Begin. */
.theater.idle:not(.ritual-activated) :is(.board-wrap,.gesture-surface,.ritual-enter,.planchette) { cursor:grab; }
.theater.idle:not(.ritual-activated) .gesture-surface { pointer-events:none; }
.theater.idle:not(.ritual-activated) .planchette { pointer-events:visiblePainted; }
.theater.idle:not(.ritual-activated) :is(.ritual-enter,.planchette):active { cursor:grabbing; }
.ritual-ribbon { pointer-events:none; opacity:var(--invitation-opacity,0); transition:opacity .24s ease; }
.theater.title-intro .ritual-ribbon { transition:none; }
.ribbon-tail { fill:#a88a5b; stroke:#543b25; stroke-width:1.1; }
.ribbon-fold { fill:#604329; }
.ribbon-face { fill:#d3b981; stroke:#543b25; stroke-width:1.15; transition:fill .25s,stroke .25s; }
.ribbon-label { fill:#382719; font:700 24px TalkingBoard,Georgia,serif; letter-spacing:1.6px; }
.board-wrap:has(.ritual-enter:hover) .ribbon-face,.board-wrap:has(.ritual-enter:focus-visible) .ribbon-face,
.theater.idle:not(.ritual-activated) .board-wrap:has(.planchette:hover) .ribbon-face { fill:#efdab0; stroke:#332215; }
.board-wrap:has(.ritual-enter:focus-visible) .ribbon-face { stroke-width:2.5; }
.theater:not(.idle) .ritual-ribbon,.theater.ritual-activated .ritual-ribbon { opacity:0; }
.theater.ritual-activated .ritual-enter { opacity:0; pointer-events:none; }
@keyframes invite-exploration { from{opacity:0} to{opacity:1} }
.theater.idle.play-shortcut :is(#explore,#splash-play) { animation:invite-exploration .7s ease both; }
.theater.quiet :is(#explore,#splash-play) { animation:none!important; }
.ritual-guide #infinity-path,.ritual-guide #ritual-ghost,.ritual-guide #ritual-trail,.ritual-guide #ritual-completed { fill:currentColor; stroke:none; }
.ritual-guide { mix-blend-mode:normal; }
/* Persistent levels: .35 → .5 → .75 → 1, inside an .8-opacity container. */
.ritual-guide #infinity-path { opacity:var(--guide-base-opacity,0); }
.ritual-guide #ritual-trail,.ritual-guide #ritual-completed { opacity:0; }
.theater.idle .ritual-guide { animation:none; opacity:.8!important; }
#ritual-hint { font:italic 19px Parlor,Georgia,serif; fill:currentColor; opacity:0; transition:opacity .35s; }
.theater.idle #ritual-hint.visible { opacity:.75; }
.theater .scene-actions { top:calc(50% + var(--board-size)*.31 + 62px); margin-top:5px; }
.theater .board-console { top:calc(50% + var(--board-size)*.31 + 8px); left:12%; right:12%; }
.board-console p { font-size:13px; }
.theater .scene-actions .text-button { display:inline-flex; align-items:center; justify-content:center; padding:12px 21px; min-height:36px; font-family:TalkingBoard,Georgia,serif; font-style:normal; font-weight:700; line-height:1; border-radius:999px; background:rgb(12 8 5 / 25%); border:0; transition:background .25s; }
.theater .scene-actions .text-button span { display:block; margin:0; color:inherit; line-height:1; transform:translateY(1px); }
@supports (text-box-trim:trim-both) { .theater .scene-actions .text-button span { text-box-trim:trim-both; text-box-edge:cap alphabetic; transform:none; } }
.theater .scene-actions .text-button:hover { background:rgb(12 8 5 / 36%); }
.theater .scene-actions #explore { transition:opacity .35s ease,background .25s,color .25s; }
.theater[data-phase="song"] #explore { opacity:.5; }
.theater[data-phase="song"] #explore:is(:hover,:focus-visible,:active) { opacity:1; }
/* The launch puzzle is the splash; the same board stays put when the player opens. */
.transport { transition:opacity .8s ease; }
.theater.idle .transport { opacity:0; visibility:hidden; pointer-events:none; }
.theater.idle #eject { visibility:hidden; }
.theater.idle .topbar { visibility:hidden; }
.theater[data-phase="opening"] .board-title { opacity:1; transition:none; }
.theater[data-phase="opening"] .ritual-guide { opacity:var(--opening-guide-start,1)!important; transition:none; }
.theater[data-phase="opening"] .scene-actions { opacity:1; pointer-events:none; }
.theater[data-phase="opening"] .topbar,.theater[data-phase="opening"] .transport { opacity:var(--opening-ui,0); transition:none; }
/* The sleeve chrome uses JUMP SCARE!'s exact outer padding and release-icon geometry. */
.splash-chrome { position:absolute; inset:0; z-index:21; padding:22px 24px 18px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .65s ease,visibility 0s .65s; }
.theater.idle .splash-chrome { opacity:1; visibility:visible; transition-delay:0s; }
.theater[data-phase="opening"] .splash-chrome { opacity:var(--opening-splash,1); visibility:visible; transition:none; }
.splash-header { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--paper); }
.splash-artist { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; white-space:nowrap; color:inherit; text-decoration:none; font:13px/1.2 TalkingBoard,Georgia,serif; letter-spacing:.2em; pointer-events:auto; }
.splash-symbol { display:block; width:30px; height:30px; flex:none; mix-blend-mode:lighten; opacity:1; color:inherit; filter:drop-shadow(0 0 calc(var(--emblem-intensity)*14px) rgb(255 214 153 / calc(var(--emblem-intensity)*.8))); transition:color .45s,filter .45s; }
.splash-artist:hover .splash-symbol,.splash-artist:focus-visible .splash-symbol { color:#f2dfb7; }
.splash-tagline { position:relative; pointer-events:auto; height:1lh; margin:0; padding:0; text-align:right; font:normal 400 8px/1.4 var(--serif); letter-spacing:.18em; opacity:.63; transition:opacity .25s,color .25s; }
.splash-tagline::after { content:""; position:absolute; inset:-12px -7px; }
button.splash-tagline:hover,button.splash-tagline:focus-visible { opacity:1; color:#f2dfb7; }
.splash-tagline>span { display:inline-block; white-space:nowrap; }
.splash-tagline strong { font-weight:700; }
.hanging-period { display:inline-block; width:0; overflow:visible; text-align:left; }
.hanging-start,.hanging-end { display:inline-block; width:0; overflow:visible; white-space:pre; text-align:left; }
.hanging-start>span { display:inline-block; transform:translateX(-100%); }
.splash-footer { display:flex; flex:none; flex-wrap:nowrap; justify-content:space-between; align-items:center; column-gap:24px; row-gap:4px; padding-top:12px; border-top:1px solid rgb(229 207 165 / 8.24%); pointer-events:auto; }
.splash-footer .release-links { flex:none; margin:0 0 0 auto; min-height:42px; justify-content:flex-end; gap:clamp(3.2px,.8vw,6.4px); }
.theater .splash-footer .service-link { width:36px; height:36px; padding:0; color:var(--muted); }
.theater .splash-footer .service-link:hover:not([aria-disabled="true"]) { color:var(--paper); }
.theater .splash-footer .service-link svg { width:21.85px; height:21.85px; }
.theater .splash-footer .service-download svg { transform:scale(1.12); }
.seance-seal { display:inline-flex; flex:none; align-items:center; padding:0; height:42px; color:var(--muted); text-align:left; transition:color .3s ease; }
.seance-seal>svg { width:124px; height:auto; }
.seance-seal:is(:hover,:focus-visible) { color:var(--paper); }
@media(min-width:700px) and (min-height:600px){ .splash-chrome { padding:30px 42px 24px; } .splash-tagline { font-size:10px; } .splash-footer { padding-top:14px; } }
@media(min-width:1100px) and (min-height:650px){ .splash-chrome { padding:36px 4.5vw 25px; } }
@media(max-width:420px){ .splash-header { gap:8px; } .splash-tagline { max-width:32%; font-size:7px; } .splash-artist { gap:8px; font-size:11px; letter-spacing:.14em; } .splash-symbol { width:26px; height:26px; } }
@media(orientation:landscape) and (max-height:599px){ .splash-chrome { padding:12px 28px; } .splash-footer { padding-top:0; } .splash-footer .release-links { min-height:32px; } .theater .splash-footer .service-link { width:32px; height:32px; } .theater .splash-footer .service-link svg { width:20.7px; height:20.7px; } .seance-seal { height:32px; } .seance-seal>svg { width:74px; } }
@media(max-width:420px){ .seance-seal>svg { width:106px; } }
@media(max-width:359px){ .splash-chrome { padding-left:18px; padding-right:18px; } .splash-artist { font-size:11px; } .splash-tagline { font-size:7px; } }
.scene-actions { display:flex; justify-content:center; align-items:center; gap:12px; height:40px; }
#splash-play-slot { display:flex; align-items:center; height:100%; flex:none; margin:0; }
#splash-play { width:max-content; white-space:nowrap; }
.scene-actions svg,.pill-button svg { width:16px; height:16px; flex:none; }
.theater .scene-actions #splash-play { gap:9px; }
.theater .end-card { position:absolute; inset:auto 16px; top:calc(50% + var(--board-size)*.31 + 16px); z-index:8; opacity:1; transition:opacity 1s; }
.theater.idle .end-card { top:calc(50% + var(--board-size)*.31 + 132px); }
.theater .end-actions { position:static; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:auto; }
.theater .end-actions .pill-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 21px; min-height:36px; border-radius:999px; background:rgb(12 8 5 / 25%); border:0; font:700 11px/1 TalkingBoard,Georgia,serif; letter-spacing:.1em; transition:background .25s; }
.theater .end-actions .pill-button:hover { background:rgb(12 8 5 / 36%); }
.end-choice-row { display:flex; justify-content:center; align-items:center; gap:12px; max-width:100%; }
.end-choice-row .pill-button { white-space:nowrap; }
.theater .end-website { font-size:9px; letter-spacing:.15em; min-height:24px; padding:5px; opacity:.55; }
.theater .end-actions .pill-button,.theater .end-website { position:relative; top:5px; }
.theater.afterglow .scene-actions { display:none; }
.theater.afterglow .end-card { animation:afterglow-arrive 1.2s ease both; }
@media(max-width:420px) {
 .theater .end-choice-row { gap:10px; }
 .theater .end-choice-row .pill-button { font-size:10px; padding:12px; gap:7px; }
}
@keyframes afterglow-arrive { from{opacity:0} to{opacity:1} }
@media(orientation:landscape) and (max-height:599px){
 .theater .end-card { top:calc(50% + var(--board-size)*.31 + 14.5px); }
 .theater.idle .end-card { top:calc(50% + var(--board-size)*.31 + 65px); }
 .theater .end-actions { flex-direction:row; justify-content:center; gap:16px; }
 .theater .end-actions .pill-button { padding:7px 12px; min-height:28px; font-size:9px; }
 .theater .end-website { display:none; }
 .theater .release-links { gap:10px; }
 .theater .service-link { width:28px; height:28px; }
 .theater .service-link svg { width:21px; height:21px; }
}
/* Pools are anchored to the actual flame centers by lighting.js. */
.candle-light { z-index:4; background:none; opacity:1; mix-blend-mode:screen; overflow:hidden; filter:brightness(calc(1 + var(--ritual-heat)*.5)); }
.light-pool { position:absolute; width:min(94vw,1100px); aspect-ratio:1; transform:translate(-50%,-50%) scale(calc(.92 + var(--pool-power)*.12)); border-radius:50%; background:radial-gradient(ellipse,#f4d09543 0%,#e9b26826 18%,#dca26514 38%,transparent 68%); opacity:clamp(0,var(--pool-power),1); filter:brightness(calc(.45 + var(--pool-power)*.7)); }
.light-left { --pool-power:var(--light-left); left:var(--candle-x1,10%); top:var(--candle-y1,25%); }
.light-right { --pool-power:var(--light-right); left:var(--candle-x2,90%); top:var(--candle-y2,37%); }
.light-lower { --pool-power:var(--light-lower); left:var(--candle-x3,16%); top:var(--candle-y3,73%); width:min(82vw,960px); }
.room-shadow { z-index:1; background:radial-gradient(ellipse at 50% 43%,transparent var(--vignette-inner),#0b0704e0 75%,#070402); opacity:var(--vignette-power); box-shadow:inset 0 -70px 90px #0a06049e; }
.candle { width:clamp(82px,9vw,122px); z-index:2; }
.candle-left { --candle-lit:var(--candle-lit1,0); left:2%; top:calc(18dvh + 60px); translate:-50% -50%; transform:rotate(-17deg); }
.candle-right { --candle-lit:var(--candle-lit2,0); right:2%; top:calc(20dvh - 50px); translate:50% -50%; transform:rotate(16deg); scale:1; }
.candle-lower { --candle-lit:var(--candle-lit3,0); left:66.5%; top:calc(100dvh - 18px); width:clamp(82px,9vw,122px); translate:-50% -50%; transform:rotate(-8deg); }
.candle::before { opacity:var(--candle-lit,0); content:""; position:absolute; inset:-90%; border-radius:50%; background:radial-gradient(circle,#f4c37a35,transparent 64%); mix-blend-mode:screen; }
.saucer { box-shadow:8px 14px 19px #0009,inset 1px 2px 5px #ead2a466; }
/* Individually drawn, continuous wax surfaces; same votive size and dishes. */
.wax { filter:brightness(calc(1.02 + var(--candle-lit,0)*.1)); background:none; box-shadow:none; border-radius:0; }
.wax::before,.wax::after { content:none; }
.wax-art { position:absolute; left:-8%; top:-8%; width:116%; height:116%; overflow:visible; filter:drop-shadow(3px 5px 6px #23170e93); }
.candle-left .wax { translate:-10% -7%; }
.candle-right .wax { translate:8% -3%; }
.candle-lower .wax { translate:-3% 11%; }
.flame { width:21%; height:30%; left:40%; top:29%; animation:none; transform:rotate(var(--flame-lean,0deg)) scale(var(--flame-x,1),var(--flame-y,1)); transform-origin:50% 75%; opacity:var(--candle-lit,0); filter:brightness(var(--flame-glow,1)); background:radial-gradient(ellipse at 50% 65%,#fff9df 15%,#ffedbc 39%,#edbd7199 68%,#c88b2f00 79%); box-shadow:0 0 13px 6px #ffe0a3a6,0 0 40px 15px #eeb8666b,0 0 95px 36px #e8ac4a2e; }
.quiet .candle-light { opacity:1!important; }
.candle-smoke { position:absolute; left:50%; top:46%; width:180%; height:auto; aspect-ratio:120/160; overflow:visible; transform:translate(-50%,-87.5%); pointer-events:none; filter:blur(1.2px); }
/* Fixed modal furniture; only the transcript is a scroll container. */
.panel-dialog { background:rgb(36 27 20 / 85%); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); }
.panel-dialog::backdrop { background:rgb(22 16 9 / 20%); -webkit-backdrop-filter:none; backdrop-filter:none; }
.panel-dialog.notes-dialog { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.notes-dialog::backdrop { background:rgb(36 27 20 / 85%); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); }
.panel-dialog .close-dialog { flex:none; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgb(229 207 165 / 7.45%); border-radius:50%; background:rgb(229 207 165 / 3.14%); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); color:var(--paper); transition:background .2s,border-color .2s; }
.dialog-header .close-dialog { align-self:flex-start; }
.notes-dialog>.close-dialog { width:44px; height:44px; }
.panel-dialog .close-dialog:hover { background:rgb(229 207 165 / 8%); border-color:rgb(229 207 165 / 16%); }
#lyrics-dialog[open] { display:flex; flex-direction:column; height:var(--reading-height); max-height:var(--reading-height); padding:0; overflow:hidden; }
#lyrics-dialog .dialog-header { flex:none; padding:24px 26px 12px; border-bottom:1px solid var(--line); background:transparent; position:relative; z-index:1; }
#lyrics-dialog .dialog-header h2 { font-family:TalkingBoard,Georgia,serif; font-weight:700; font-size:clamp(14px,calc(9.4vw - 12.2px),28px); letter-spacing:.07em; white-space:nowrap; }
#lyrics-dialog .dialog-header .dialog-hint { margin:0; }
#lyrics-dialog .close-dialog { flex:none; }
#transcript button { white-space:pre-line; }
#transcript { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 30px 28px; scrollbar-color:#806947 transparent; }
.panel-dialog.notes-dialog[open] { display:flex; flex-direction:column; justify-content:safe center; align-items:center; padding:70px 24px; }
.notes-controls { flex:none; transform:none; margin:auto 0; }
.notes-controls .note-heading { display:block; width:max-content; max-width:100%; min-height:22px; line-height:22px; }
.notes-controls .note-info { position:absolute; left:100%; top:50%; transform:translateY(-50%); width:36px; height:36px; padding:10px; color:var(--muted); opacity:1; transition:color .2s; }
.note-info:is(:hover,:focus-visible,[aria-expanded="true"]) { color:var(--paper); }
.note-help { bottom:calc(100% + 10px); transform:translateX(calc(-50% + var(--note-shift,0px))); width:min(296px,calc(100vw - 48px)); max-width:none; margin:0; padding:14px 16px; border:1px solid var(--line); background:rgb(36 27 20 / 85%); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); box-shadow:0 10px 30px #0006; color:var(--paper); font:14px/1.55 var(--serif); letter-spacing:0; text-align:left; pointer-events:auto; }
.note-help[data-placement="below"] { bottom:auto; top:calc(100% + 10px); }
#lyrics-setting[data-disabled="true"] .note-heading>span { opacity:.35; }
#lyrics-visibility:disabled { cursor:default; }
#offset-setting[data-disabled="true"] .note-heading>span,#offset-setting[data-disabled="true"] .offset-control { opacity:.35; }
.offset-control .icon-button:disabled { cursor:default; }
.offset-control .icon-button:disabled:hover { color:inherit; background:none; }
#offset-setting:not([data-disabled="true"]) .icon-button:disabled { opacity:.35; }
/* Browser range thumbs travel inside a half-thumb inset. So do chapter ticks. */
.chapter-marks { left:4.5px; right:4.5px; top:50%; height:2px; transform:translateY(-50%); }
.chapter-marks i { top:50%; height:6px; transform:translate(-50%,-50%); background:#d3bc8e8a; }
@media (max-width:699px) and (orientation:portrait) {
 .theater .scene-frame,.theater .scene-ui { --board-size:min(94vw,calc((100dvh - 440px)*1.6129)); }
 .theater .board-wrap { width:var(--board-size); aspect-ratio:1000/620; }
 .candle-left { --candle-lit:var(--candle-lit1,0); left:2%; top:calc(max(96px,18dvh) + 60px); width:76px; }
 .candle-right { --candle-lit:var(--candle-lit2,0); right:2%; top:calc(25dvh - 50px); width:76px; }
 .candle-lower { --candle-lit:var(--candle-lit3,0); left:calc(37% + 50px); top:calc(100dvh - 18px); width:76px; }
 .theater .scene-actions { top:calc(50% + var(--board-size)*.31 + 68px); }
 .theater .board-console { top:calc(50% + var(--board-size)*.31 + 10px); left:6%; right:6%; }
 .ritual { top:67%; }
 .ritual p { font-size:12px; }
 .ritual .ritual-hint { font-size:8px; margin-top:5px; }
 .ritual-progress { margin:7px 0 0; gap:7px; }
 .ritual .text-button { font-size:8px; min-height:27px; padding:4px; }
 .board-console p { font-size:12px; }
 .board-console .board-hint { font-size:9px; }
 .light-pool { width:140vw; }
 .light-lower { width:128vw; }
 #lyrics-dialog .dialog-header { padding:20px 20px 12px; }
 #transcript { padding:0 24px 24px; }
}
@media (orientation:landscape) and (max-height:599px) {
 .theater .scene-frame,.theater .scene-ui { inset:0 0 50px; --board-size:min(65vw,calc((100dvh - 255px)*1.6129)); }
 .theater .board-wrap { width:var(--board-size); }
 .candle-left { --candle-lit:var(--candle-lit1,0); left:2%; top:calc(20dvh + 60px); width:65px; }
 .candle-right { --candle-lit:var(--candle-lit2,0); right:2%; top:calc(26dvh - 50px); width:65px; }
 .candle-lower { --candle-lit:var(--candle-lit3,0); left:66.5%; top:calc(100dvh - 12px); width:65px; }
 .theater .scene-actions { top:calc(50% + var(--board-size)*.31 + 26px); height:24px; }
 .theater .scene-actions .text-button { min-height:24px; font-size:9px; padding:2px 8px; }
 .theater .board-console { top:calc(50% + var(--board-size)*.31); }
 .board-console p { font-size:10px; }
 .board-console .spelling { min-height:22px; }
 .board-console .spelling button { min-height:22px; height:22px; }
 .board-console .board-hint { display:none; }
 .ritual .ritual-hint { display:none; }
 .ritual p { font-size:10px; }
 .ritual-progress { margin:4px 0; }
 .ritual .text-button { font-size:7px; min-height:19px; padding:3px; }
 .notes-controls { grid-template-columns:repeat(4,minmax(0,1fr)); width:min(1040px,100%); gap:12px; }
 .notes-controls .offset-control { grid-template-columns:32px minmax(60px,90px) 32px; gap:4px; }
 .notes-controls .offset-control .icon-button { width:32px; }
 .notes-controls .offset-control output { width:100%; }
 .panel-dialog.notes-dialog[open] { padding:42px 24px; }
 #lyrics-dialog .dialog-header { padding-top:12px; }
 #lyrics-dialog .dialog-header h2 { margin:2px 0; }
}
@media (orientation:landscape) and (max-height:599px) and (max-width:799px) {
 .notes-controls { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(540px,100%); }
}
@media (max-height:680px) and (orientation:portrait) {
 .candle-left,.candle-right,.candle-lower { width:60px; }
 .notes-controls { gap:4px; }
 .notes-dialog .note-row { padding:4px; }
}

/* Optical cap-height correction inside the original topbar hit areas. */
.topbar .text-button span { display:block; line-height:1; transform:translateY(1px); }
.topbar .text-button svg { display:block; align-self:center; }
@supports (text-box-trim:trim-both) { .topbar .text-button span { text-box-trim:trim-both; text-box-edge:cap alphabetic; transform:none; } }
.theater .board-console { top:var(--word-bank-y,calc(50% - var(--board-size)*.31 - 60px)); transform:translateY(-50%); }
.board-console .chapter-caption { margin:0; font:9.9px/1.5 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:#cab58f; opacity:.5; }
@media(max-width:699px) { .board-console .chapter-caption { font-size:9px; } }

/* The scene planchette is the pointer; native input still reaches board letters. */
.theater.board-mode .planchette { pointer-events:none; }
.pointer-follow,.pointer-follow .board,.pointer-follow .board-key,.pointer-follow .board-spelling,.pointer-follow .spelling-actions button,.pointer-follow .gesture-surface { cursor:none; }
.board-key.hovered .key-target { fill:#482b1310; stroke:#3b29195c; stroke-width:1; }

/* Backspace sits inside the fixed box; Clear stays just outside the same edge. */
.board-spelling { --bank-font-max:46px; --bank-edit-gap:8px; --bank-edit-inset:8px; --bank-edit-outset:12px; --bank-edge-space:12px; position:absolute; z-index:6; left:50%; top:var(--word-bank-y,calc(50% - var(--board-size)*.31 - 60px)); transform:translate(-50%,-50%); width:var(--board-size); transition:width .28s ease,left .28s ease; color:#f0dbb5; }
.board-spelling output { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:64px; padding:10px .5em; border:0; border-radius:6px; background:rgb(8 5 3 / 25%); font:var(--bank-font-max)/1 var(--serif); letter-spacing:.08em; white-space:pre; overflow:hidden; text-align:center; text-shadow:0 0 3px #080503,0 0 9px #080503f0,0 0 18px #0805039c; }
.board-spelling output[data-align="left"] { justify-content:flex-start; text-align:left; }
.board-spelling output>span { display:block; flex:none; letter-spacing:.08em; transform:translateY(.08em); }
@supports(text-box-trim:trim-both){ .board-spelling output>span { text-box-trim:trim-both; text-box-edge:cap alphabetic; transform:none; } }
.game-bank output>span.game-slots { display:inline-flex; align-items:center; letter-spacing:0; transform:none; }
.game-slot,.game-space { display:inline-flex; align-items:center; justify-content:center; position:relative; flex:none; width:.72em; height:.85em; }
.game-space { width:.45em; }
.game-glyph { display:block; font-size:.62em; line-height:1; letter-spacing:0; }
.game-slot.blank .game-glyph { opacity:0; }
.game-slot.blank::after { content:""; position:absolute; width:.62em; height:1px; bottom:.13em; background:currentColor; opacity:.8; box-shadow:0 0 5px #080503; }
.spelling-actions { position:absolute; inset:0; pointer-events:none; }
.spelling-actions[inert] { visibility:hidden; }
.spelling-actions button { position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; display:grid; place-items:center; padding:0; width:32px; height:38px; font:24px/1 var(--serif); opacity:.72; text-shadow:0 0 8px #000; }
.spelling-actions #erase { right:var(--bank-edit-inset); }
.spelling-actions #clear-board { left:calc(100% + var(--bank-edit-outset)); }
.spelling-actions svg { display:block; width:1em; height:1em; overflow:visible; filter:drop-shadow(0 0 4px #0008); }
.spelling-actions button:hover { opacity:1; }
@media(max-width:699px) and (orientation:portrait){ .board-spelling { --bank-font-max:26px; --bank-edit-gap:6px; --bank-edit-inset:5px; --bank-edit-outset:6px; --bank-edge-space:4px; } .board-spelling output { height:44px; padding:8px .5em; } .spelling-actions button { width:24px; height:32px; font-size:19px; } }
@media(orientation:landscape) and (max-height:599px){ .board-spelling { --bank-font-max:18px; --bank-edit-gap:6px; --bank-edit-inset:5px; --bank-edit-outset:6px; --bank-edge-space:8px; } .board-spelling output { height:32px; padding:6px .5em; } .spelling-actions button { width:25px; height:24px; font-size:18px; } }

.theater.quiet .board-spelling { transition:none; }
.ouija-game-caption { position:absolute; top:calc(100% + 7px); left:0; width:100%; text-align:center; opacity:1; transition:opacity .28s ease; }
.ouija-game-caption.verdict { opacity:0; }
.ouija-game-caption p { margin:0; color:#e8d1a9; opacity:.68; font:10px/1.3 var(--ui); letter-spacing:.08em; text-transform:uppercase; text-wrap:balance; text-shadow:0 0 6px #080503; }
.game-bank output { transition:opacity .25s ease; }
.game-bank.game-clearing output { opacity:0; }
@media(max-width:699px) and (orientation:portrait){ .ouija-game-caption { top:calc(100% + 5px); } .ouija-game-caption p { font-size:9px; letter-spacing:.055em; } }
@media(orientation:landscape) and (max-height:599px){ .ouija-game-caption { display:none; } }
#theater:is([data-phase="song"],[data-phase="outro"]) :is(.scene-actions,#section-label) { transition:opacity .3s; }
#theater:is([data-phase="song"],[data-phase="outro"]).controls-idle :is(.scene-actions,#section-label) { opacity:0; pointer-events:none; }

/* Keep broad candle gradients painted once; animate their opacity/transform. */
.candle-light { filter:none; }
.light-pool { filter:none; opacity:clamp(0,calc(var(--pool-power)*.85),1); will-change:opacity,transform; }