:root{color-scheme:dark;--bg:#080810;--panel:#121224;--ink:#fff7ca;--gold:#ffe35b;--hot:#ff4d8d;--cyan:#39f6ff;--green:#5cff9a}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#20204a,#080810 55%);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
.shell{width:min(1500px,96vw);margin:0 auto;padding:24px}
.hero{display:grid;grid-template-columns:1fr 310px;gap:18px;align-items:stretch}
.hero>div,.connect,.hud,.notes{background:rgba(18,18,36,.82);border:1px solid rgba(255,227,91,.24);border-radius:22px;box-shadow:0 20px 60px #0008;padding:22px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);font-weight:800}
h1{font-size:clamp(38px,6vw,84px);line-height:.85;margin:0 0 14px;text-shadow:0 0 22px #ffe35b55}
.lede{font-size:1.05rem;max-width:820px}
.controls{color:#c9c9ee;font-size:.92rem}
.joinbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
input,button{border:0;border-radius:999px;padding:14px 18px;font-weight:800}
input{min-width:170px;background:#fff;color:#111}
button{background:linear-gradient(135deg,var(--gold),#ff9d00);color:#1a1200;cursor:pointer}
button:hover{filter:brightness(1.12)}
.connect{text-align:center}
.connect h2{margin-top:0}
.connect img{width:200px;max-width:100%;background:var(--gold);border-radius:18px;padding:8px}
.connect ol{text-align:left;line-height:1.5}
.hud{margin:16px 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:12px 18px}
.hud span{padding:8px 12px;border-radius:999px;background:#050510;border:1px solid #ffffff24}
/* in-game the hud collapses to the ☰ chip; pinch/tap toggles it */
#hudtoggle{display:none;cursor:pointer;color:var(--gold);font-weight:800}
#mute{cursor:pointer}
body.playing #hudtoggle{display:inline-block}
body.playing .hud.min{background:none;border:0;box-shadow:none;padding:0;margin:0 0 8px}
body.playing .hud.min span{display:none}
body.playing .hud.min #hudtoggle{display:inline-block}
.stage{position:relative}
#game{display:block;width:100%;height:min(72vh,760px);background:#03030a;border:2px solid #ffe35b66;border-radius:24px;box-shadow:inset 0 0 80px #000,0 0 40px #39f6ff22;touch-action:none}
.notes{margin-top:16px;line-height:1.5;color:#fff4b1}
body.playing .hero{display:none}
body.playing{touch-action:none;overscroll-behavior:none}
/* While playing, fit everything inside the *visible* viewport (dvh tracks the
   iOS Safari URL bar; vh line is the fallback) so the canvas bottom is never
   cut off below the fold. */
body.playing .shell{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:10px}
body.playing .hud{margin:0 0 10px}
body.playing .stage{flex:1;min-height:0}
body.playing #game{height:100%}
body.playing .notes{display:none}
@media(max-width:900px){.hero{grid-template-columns:1fr}.shell{padding:12px}.joinbar input,.joinbar button{width:100%}#game{height:68vh}}