/* The game occupies exactly the visible viewport; only the laboratory scrolls. */
html:has(.game-page){height:100%;overflow:hidden}
.game-page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.game-page [hidden]{display:none!important}
.game-page .topbar{height:66px;flex:0 0 66px;padding:0 26px;gap:16px;padding-top:env(safe-area-inset-top)}
.header-actions{display:flex;align-items:center;gap:10px}
.panel-toggle{height:40px;border:1px solid var(--ink);border-radius:30px;background:transparent;padding:0 15px;font:10px var(--mono);display:flex;gap:10px;align-items:center}
.panel-toggle>span:first-child{font-size:18px}.panel-toggle[aria-expanded=true]{background:var(--ink);color:var(--acid)}
.game-page main{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 350px;overflow:hidden}
.game-page main.panel-collapsed{grid-template-columns:minmax(0,1fr)}
.game-page .playground{min-width:0;min-height:0;height:100%;border-bottom:0;container-type:size}
.game-page .controls{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b0b49e var(--paper);padding:0 23px 22px;gap:0}
.controls>*{flex-shrink:0}
.game-page .panel-heading{position:sticky;top:0;z-index:5;background:var(--paper);padding:17px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.game-page .panel-heading h2{font-size:27px;margin:2px 0 5px}
.game-page .panel-heading p{font-size:11px;margin:0}
.panel-topline{display:flex;justify-content:space-between;align-items:center}
.panel-close{width:32px;height:32px;font-size:23px;line-height:1;border:0;background:none;border-radius:50%;margin-right:-5px}
.panel-close:hover{background:var(--acid)}
.game-page .quantity{border-top:0;padding-top:13px}
.game-page .cat-grid{max-height:210px}
.game-page .cat-option img{height:51px}
.game-page .cat-option small{font-size:8px}
.game-page .control-section{padding-top:14px;margin-bottom:16px}
.game-page .disco-row{padding:13px 0}
.game-page .radio{padding:14px 0;margin-bottom:16px}
.game-page .rain-button{margin-top:0}
.game-page .rain-hint{margin-bottom:14px}
.game-page footer{min-height:34px;flex:0 0 auto;flex-direction:row;align-items:center;padding:10px 24px calc(10px + env(safe-area-inset-bottom));gap:12px;font-size:8px}
.game-page footer>span{min-width:0}
.game-page .intro{left:clamp(22px,4cqw,55px);top:clamp(20px,4cqh,35px)}
.game-page .intro h1{font-size:clamp(72px,min(19cqw,30cqh),200px);margin-top:clamp(20px,6cqh,44px);letter-spacing:-2px}
.game-page .star{width:clamp(34px,7cqw,64px);height:auto;right:calc(-1 * clamp(47px,10cqw,90px))}
.game-page .round-stamp{right:24px;top:24px}
.game-page .stage-note{bottom:100px;left:28px;font-size:11px}
.game-page .stage-toolbar{padding:13px 22px}
.game-page .toast{max-width:calc(100% - 36px);white-space:normal;text-align:center;line-height:1.5;width:max-content}
.panel-backdrop{position:absolute;inset:0;z-index:8;border:0;background:#20211e50;cursor:pointer}
@media(min-width:1500px){.game-page main{grid-template-columns:minmax(0,1fr) 380px}}
@media(max-width:1000px) and (min-width:721px){.game-page main{grid-template-columns:minmax(0,1fr) 320px}.game-page .round-stamp{width:62px;height:62px;font-size:7px;right:16px}}
@media(max-width:720px){
 .game-page .topbar{height:62px;flex-basis:62px;padding:0 12px;gap:8px}
 .game-page .brand{font-size:19px;gap:7px;letter-spacing:-1px;white-space:nowrap}.game-page .brand svg{width:27px;height:27px}.game-page .brand-dot{font-size:9px}
 .header-actions{gap:6px}.game-page .sound-button{height:40px;padding:0 10px;font-size:8px;white-space:nowrap}.game-page .sound-button #sound-icon{display:none}
 .panel-toggle{height:40px;padding:0 11px;font-size:9px;gap:6px}
 .game-page main,.game-page main.panel-collapsed{display:grid;grid-template-columns:minmax(0,1fr)}
 .game-page .playground{height:100%;border:0}
 .game-page .controls{position:absolute;z-index:10;inset:0 0 0 auto;width:min(92vw,360px);max-height:none;border-left:1px solid var(--ink);box-shadow:-12px 0 35px #20211e20;padding:0 19px 22px}
 .game-page .panel-heading{padding-top:12px}.panel-close{width:42px;height:42px;margin-top:-5px}
 .game-page .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:245px}
 .game-page .cat-option img{height:60px}.game-page .cat-option small{display:block;font-size:8px}.game-page .cat-option>span:not(.check){font-size:11px}
 .game-page .count-control button{width:36px;height:36px;flex-shrink:0}.game-page input[type=range]{margin:12px 0}
 .game-page input[type=range]::-webkit-slider-thumb{width:20px;height:20px}
 .game-page input[type=range]::-moz-range-thumb{width:17px;height:17px}
 .game-page .quantity .scale-labels{padding:0 48px;margin-top:3px}
 .game-page .text-button{min-height:30px}.game-page .section-label{margin-bottom:10px}
 .game-page .intro h1{font-size:clamp(76px,min(23cqw,27cqh),140px)}
 .game-page .intro .eyebrow{font-size:7px;letter-spacing:.5px}
 .game-page .round-stamp,.game-page .star{display:none}
 .game-page .intro h1>span{color:var(--ink);-webkit-text-stroke:0}
 .game-page .stage-note{left:24px;bottom:95px;font-size:10px}
 .game-page .stage-caption{display:none}
 .game-page footer{padding:9px 12px calc(9px + env(safe-area-inset-bottom));font-size:7px;gap:6px}
 .game-page footer>span{gap:4px}.game-page footer #chaos-status,.game-page footer .footer-divider{display:none}
 .game-page .radio-player select{font-size:11px}.game-page .radio-player button{width:36px}
}
@media(max-height:480px){
 .game-page .topbar{height:50px;flex-basis:50px}.game-page footer{padding-top:6px;padding-bottom:6px;min-height:26px}
 .game-page .stage-note,.game-page .round-stamp{display:none}.game-page .intro{top:14px}.game-page .intro h1{margin-top:18px}
 .game-page .stage-toolbar{padding:8px 16px;min-height:56px}.game-page .circle-button{width:36px;height:36px}
 .game-page .controls .panel-heading{position:relative}.game-page .cat-grid{max-height:160px}
}

/* Green controls, independent party modes and a hanging mirror ball. */
.game-page .sound-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1;height:40px;background:var(--acid)}
.game-page .sound-button #sound-icon{line-height:1;margin:0 2px 0 0;display:block;transform:translateY(-1px)}
.game-page .sound-button[aria-pressed=true]{background:var(--ink);color:var(--acid)}
.game-page .panel-toggle{background:var(--acid)}.game-page .panel-toggle[aria-expanded=true]{background:#86ce70;color:var(--ink)}
.game-page .rain-button{background:var(--acid);color:var(--ink)}.game-page .rain-button:hover{background:#92dc79}
.game-page .cat-option.selected{background:#e4f2dc}.game-page .cat-option:hover{background:#d4ebc8}.game-page .radio-player{background:#e9f3e3}
.party-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:15px 0;border-top:1px solid var(--line)}
.mode-option{border:1px solid var(--line);border-radius:4px;padding:8px}
.mode-heading{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;white-space:nowrap}
.mode-heading img{width:24px;height:26px;object-fit:contain;flex-shrink:0}.mode-bottom{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px}
.mode-bottom>span{font-size:8px;color:#767e70}.mode-bottom .audio-switch{flex-shrink:0}
.mode-option:has([aria-checked=true]){border-color:var(--ink);background:#e4f2dc}
.disco-orb,.disco-lights{position:absolute;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.disco-orb{width:105px;top:28px;left:61%;z-index:3}
.disco-orb:before{content:"";position:absolute;left:50%;bottom:100%;height:240px;border-left:1px solid var(--ink)}
.disco-orb img{width:100%;height:auto;display:block;filter:drop-shadow(2px 4px 2px #20211e20)}
@property --beam-rot{syntax:'<angle>';inherits:false;initial-value:0deg}
.disco-lights{inset:0;z-index:0;overflow:hidden;background:repeating-conic-gradient(from var(--beam-rot) at var(--orb-x,50%) var(--orb-y,0px),transparent 0deg 19deg,#ffffff30 20deg 24deg,transparent 25deg 44deg)}
.disco .disco-orb,.disco .disco-lights{opacity:1;visibility:visible}
.disco .disco-lights{animation:beam-sweep 14s linear infinite}
.circle-button{display:flex;align-items:center;justify-content:center;padding:0}
.circle-button svg{width:20px;height:20px;display:block}
.mode-letter{width:24px;text-align:center;font:900 24px/1 'Barlow Condensed',Impact,sans-serif;flex-shrink:0;background:var(--wordart-fill);-webkit-background-clip:text;background-clip:text;color:transparent}
/* WordArt mode: headlines and labels become rainbow-to-blue gradient type with an extruded shadow. */
:root{--wordart-fill:linear-gradient(90deg,#ff2d95,#ff9f1c,#f7e600,#2ee59d,#00b4ff,#3a2bff,#b400ff,#ff2d95) 0 0/200% 100%}
body.wordart :is(.eyebrow,.section-label,.stage-note,.mode-heading label,.cat-option>span:not(.check),.round-stamp,.stage-caption,footer,.panel-heading p,.scale-labels span,.mode-bottom>span,.music-status,.audio-mix summary,.cat-selection-note,.rain-hint,.reset,.text-button,.cat-option small,.radio #track-style,.effects-heading span,.control-section label,.count-control output,.section-label output,.quantity output,.disco-row label,.rain-button>span){background:var(--wordart-fill);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:wordart-shift 6s linear infinite}
body.wordart .intro h1>span{-webkit-text-stroke:2px #1b1f7a}
body.wordart :is(.brand,.intro h1,.panel-heading h2){color:#ffd000;-webkit-text-fill-color:currentColor;-webkit-text-stroke:2px #1b1f7a;paint-order:stroke fill;text-shadow:1px 1px 0 #1b1f7a,2px 2px 0 #1b1f7a,3px 3px 0 #1b1f7a,4px 4px 0 #1b1f7a,5px 5px 0 #1b1f7a,6px 6px 0 #1b1f7a,7px 7px 0 #1b1f7a}
body.wordart .wa-ch{color:var(--wa);-webkit-text-fill-color:var(--wa)}
body.wordart .brand svg{color:#3a2bff}
body.wordart .star{color:#3a2bff}
@keyframes wordart-shift{to{background-position:200% 0}}
body.wordart .wa-ch{display:inline-block;animation:wa-wave 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.15s)}
@keyframes wa-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-.09em)}}
@media(prefers-reduced-motion:reduce){body.wordart *{animation:none!important}}
/* Synthwave: neon sunset behind the stage with a perspective grid floor. */
body.synth .playground{background:linear-gradient(#170530 0%,#3c0a5e 36%,#b8256f 62%,#ff6b4a 70%,#1d0a2e 70.2%,#120422 100%)}
body.synth .playground::before{content:"";position:absolute;left:50%;top:70%;width:min(56vw,240px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:linear-gradient(#ffe45c,#ff9f1c 45%,#ff2d95);clip-path:inset(0 0 50% 0);z-index:0;pointer-events:none}
body.synth .playground::after{content:"";position:absolute;left:-60%;right:-60%;top:70%;bottom:0;background-image:linear-gradient(#ff3dbf 2px,transparent 2px),linear-gradient(90deg,#ff3dbf 2px,transparent 2px);background-size:80px 80px;transform:perspective(260px) rotateX(55deg);transform-origin:50% 0;opacity:.85;z-index:0;pointer-events:none;animation:synth-grid 1.2s linear infinite}
body.synth .intro h1{color:#ffe45c;text-shadow:0 0 14px #ff3dbf,3px 3px 0 #3c0a5e}
body.synth .intro h1>span{color:transparent;-webkit-text-stroke:2px #5ef2ff}
body.synth .intro .eyebrow,body.synth .stage-note,body.synth .stage-caption{color:#ffd6f5}
@keyframes synth-grid{from{background-position:0 0}to{background-position:0 80px}}
/* Zero gravity: the headline drifts slowly, cats float (physics lives in app.js). */
body.zerog .intro{animation:zg-drift 7s ease-in-out infinite alternate}
@keyframes zg-drift{from{transform:translate(-6px,4px) rotate(-1.5deg)}to{transform:translate(12px,-16px) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){body.synth .playground::after,body.zerog .intro{animation:none}}
/* Retro-Terminal: green phosphor on black, scanlines and a blinking cursor. */
body.terminal{--ink:#33ff66;--paper:#020a04;--acid:#0c3318;--line:#174d26;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 0 6px rgba(51,255,102,.45)}
body.terminal :where(*){font-family:var(--mono)!important}
body.terminal .playground{background:#041a0b}
body.terminal::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.28) 2px 3px)}
body.terminal .intro h1>span{color:var(--ink);-webkit-text-stroke:0}
body.terminal .intro h1 span:not(.wa-ch)::after{content:"█";margin-left:.08em;animation:term-blink 1s steps(2,jump-none) infinite}
body.terminal .mode-letter{background:none;color:var(--ink)}
@keyframes term-blink{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){body.terminal .intro h1 span:not(.wa-ch)::after{animation:none}}
.game-page .playground.rainbow{background:linear-gradient(120deg,#b9f3a2,#9ee4ef,#b8b9ff,#f4a9dc,#ffc994,#b9f3a2);background-size:400% 400%;animation:rainbow-flow 18s ease-in-out infinite}
@keyframes beam-sweep{to{--beam-rot:360deg}}
@keyframes rainbow-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:720px){.game-page .sound-button #sound-icon{display:none}.disco-orb{width:64px;top:36px;left:auto;right:18px}.mode-heading{font-size:11px}.mode-option{padding:8px}.mode-bottom>span{font-size:8px}}
@media(max-height:480px){.disco-orb{width:68px;left:69%}}
@media(prefers-reduced-motion:reduce){.disco-lights,.game-page .playground.rainbow,.disco .star{animation:none}.disco-orb,.disco-lights{transition:none}}