@import "https://fonts.googleapis.com/css2?family=Oxanium:wght@500;700;900&family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#080412;--cabinet:#130e28;--screen:#1e0f38;--screen-2:#0b1e42;--cream:#fff3c4;--gold:#ffd23f;--hot:#ff3df2;--cyan:#35f8ff;--green:#7cff4f;--red:#ff4d5d;--shadow:#000;background:var(--ink);color:var(--cream);font-synthesis:none;text-rendering:optimizelegibility;font-family:Oxanium,Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--ink)}body{background:linear-gradient(#ffffff05 1px,#0000 1px) 0 0/40px 40px,linear-gradient(90deg,#ffffff05 1px,#0000 1px) 0 0/40px 40px,radial-gradient(130% 55% at 50% 0,#ffd23f26 0%,#0000 62%),radial-gradient(at 16% 80%,#ff3df23d,#0000 32rem),radial-gradient(at 86% 24%,#35f8ff2e,#0000 28rem),linear-gradient(#18092c 0%,#080413 78%);min-height:100vh;margin:0}body:before{content:"";pointer-events:none;mix-blend-mode:soft-light;opacity:.24;z-index:5;background:repeating-linear-gradient(#ffffff0a 0 1px,#0000 1px 5px);position:fixed;inset:0}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1120px,100%);padding:max(24px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom));gap:18px;margin:0 auto;display:grid}.hero-card,.panel,.status-card,.challenge-card{border:3px solid var(--cream);box-shadow:8px 8px 0 var(--shadow), 0 0 0 2px #ff3df247, 0 0 42px #35f8ff1a;background:linear-gradient(145deg,#1e0f38f5,#0b1e42eb)}.hero-card{isolation:isolate;border-radius:0;padding:clamp(22px,5vw,42px);position:relative;overflow:hidden}.hero-card.landing-card{background:repeating-conic-gradient(#ffd23f0c 0deg 9deg,#0000 9deg 18deg) right -120px top -160px/540px 540px no-repeat,linear-gradient(145deg,#1e0f38f5,#0b1e42eb)}.hero-card.landing-card:after{content:"INSERT HARMONICA";color:#ffd23f1a;z-index:-1;pointer-events:none;white-space:nowrap;font:900 clamp(18px,4vw,48px)/1 "Press Start 2P",monospace;position:absolute;bottom:14px;right:18px;transform:rotate(-6deg)}.hero-card.room-hero:after{content:"DON'T BLOW IT!";color:#ffd23f12;z-index:-1;pointer-events:none;white-space:nowrap;font:900 clamp(14px,3vw,38px)/1 "Press Start 2P",monospace;position:absolute;bottom:14px;right:18px;transform:rotate(-6deg)}.on-air-dot{background:var(--red);width:10px;height:10px;box-shadow:0 0 8px var(--red), 0 0 16px #ff4d5d80;border-radius:50%;flex-shrink:0;animation:1.1s step-end infinite blink-on-air;display:inline-block}@keyframes blink-on-air{0%,48%{opacity:1}50%,to{opacity:0}}.eyebrow,.panel-label,.challenge-card>span,.room-code span{color:var(--cyan);letter-spacing:.04em;text-transform:uppercase;text-shadow:2px 2px #000,0 0 12px #35f8ff99;align-items:center;gap:8px;margin:0 0 14px;font-family:"Press Start 2P",monospace;font-size:10px;font-weight:400;display:inline-flex}h1{letter-spacing:-.04em;max-width:960px;color:var(--gold);text-shadow:5px 5px #000,7px 7px #00000080,0 0 22px #ff3df280,0 0 60px #ffd23f2e;margin:0;font-family:"Press Start 2P",monospace;font-size:clamp(28px,5.4vw,62px);line-height:1.05}h2{letter-spacing:-.04em;text-transform:uppercase;color:var(--cream);text-shadow:3px 3px #000;margin:0 0 8px;font-size:clamp(22px,3.8vw,44px)}h3{letter-spacing:-.04em;color:var(--green);text-shadow:3px 3px #000,0 0 18px #7cff4f59;margin:10px 0;font-size:clamp(22px,3.8vw,44px);line-height:.96}p{color:#fff3c4d1;font-family:Space Mono,monospace;line-height:1.55}.hero-card>p{max-width:780px;font-size:16px}.hero-actions,.ref-controls{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}button{color:#130716;background:var(--gold);text-transform:uppercase;border:3px solid #000;border-radius:0;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:0 18px;font-weight:900;transition:transform .12s,box-shadow .12s,filter .12s;display:inline-flex;box-shadow:5px 5px #000}button:hover{filter:saturate(1.15);transform:translate(-2px,-2px);box-shadow:7px 7px #000}button:active{transform:translate(2px,2px);box-shadow:2px 2px #000}button.secondary{color:#08151a;background:var(--cyan);border-color:#000}button.danger{color:#fff;background:var(--red);border-color:#000}button.active{background:var(--green);color:#061205}button.tiny{min-height:34px;padding:0 11px;font-size:12px}button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}input{border:3px solid var(--cream);width:100%;min-height:50px;color:var(--green);background:#06060a;border-radius:0;outline:none;padding:0 14px;font-family:"Press Start 2P",monospace;font-size:13px;box-shadow:inset 4px 4px #000}input:focus{border-color:var(--cyan);box-shadow:inset 4px 4px #000,0 0 0 3px #35f8ff38}label{color:#fff3c4c7;text-transform:uppercase;gap:7px;font-size:13px;font-weight:900;display:grid}.connection-pill{border:2px solid var(--green);color:var(--green);text-transform:uppercase;letter-spacing:.06em;background:#7cff4f12;align-items:center;gap:8px;margin-top:18px;padding:10px 14px;font-family:Space Mono,monospace;font-size:12px;display:inline-flex}.join-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.form-panel{align-content:start;gap:14px;display:grid}.status-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.status-card{align-content:space-between;min-height:132px;padding:18px;display:grid}.status-icon{width:46px;height:46px;color:var(--hot);border:2px solid var(--hot);background:#090713;place-items:center;display:grid;box-shadow:4px 4px #000}.status-card span{color:var(--cyan);text-transform:uppercase;letter-spacing:.04em;font-family:"Press Start 2P",monospace;font-size:9px}.status-card strong{overflow-wrap:anywhere;text-transform:uppercase;color:var(--cream);text-shadow:2px 2px #000;font-size:24px}@keyframes arcade-pulse{0%,to{filter:brightness()}50%{filter:brightness(1.22)}}.room-code strong,.status-icon{animation:1.8s steps(2,end) infinite arcade-pulse}.panel{grid-template-columns:minmax(0,1fr) 360px;gap:22px;padding:22px;display:grid}.referee-panel,.referee-panel.player-device-panel{grid-template-columns:minmax(0,1fr) minmax(280px,420px)}.challenge-card{border:3px solid var(--hot);background:linear-gradient(145deg,#ff3df221,#35f8ff12);padding:22px;box-shadow:6px 6px #000,0 0 24px #ff3df240}.room-code-block{grid-template-columns:minmax(0,1fr) minmax(220px,320px);align-items:center;gap:22px;display:grid}.room-code{background:var(--cream);color:#130716;text-align:center;box-shadow:8px 8px 0 #000, 0 0 0 4px var(--gold), 0 0 36px #ffd23f47;border:4px solid #000;padding:22px}.room-code span{color:#5b3324;text-shadow:none;margin-bottom:10px;display:block}.room-code strong{letter-spacing:.06em;font-family:"Press Start 2P",monospace;font-size:clamp(46px,8vw,76px);line-height:1;display:block}ul{margin:0;padding:0;list-style:none}.player-list,.event-list{gap:10px;display:grid}.player-list li{background:#090713c7;border:2px solid #fff3c466;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;display:grid;box-shadow:4px 4px #000}.player-list span{color:var(--cream);align-items:center;gap:8px;font-weight:900;display:inline-flex}.player-list strong{color:var(--green);text-align:right;font-family:Space Mono,monospace}.player-list .ref-player{border-color:var(--gold);background:#ffd23f1a}.player-list .out-player{opacity:.52;filter:grayscale(.6)}.event-panel{grid-template-columns:320px minmax(0,1fr)}.event-list li{color:#fff3c4db;background:#090713c7;border:2px solid #35f8ff47;padding:12px 14px;font-family:Space Mono,monospace;box-shadow:4px 4px #000}.error-banner{color:#fff;border:3px solid var(--red);background:#ff4d5d3d;padding:12px 14px;box-shadow:5px 5px #000}.alert-panel{border:3px solid var(--red);color:#fff;background:#ff4d5d24;align-items:center;gap:12px;padding:14px 16px;font-family:"Press Start 2P",monospace;font-size:11px;line-height:1.5;animation:1.6s steps(2,end) infinite alert-flash;display:flex;box-shadow:6px 6px #000}@keyframes alert-flash{0%,to{border-color:var(--red);background:#ff4d5d24}50%{background:#ff4d5d0f;border-color:#ff4d5d59}}.role-picker{grid-template-columns:1fr 1fr;gap:10px;display:grid}.need-ref{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.control-board{grid-template-columns:minmax(0,1fr) minmax(280px,380px)}.control-board .player-control-list{grid-column:1/-1}.animation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;display:grid}.player-control-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;display:grid}.player-control-card{border-top:3px solid var(--gold);background:#090713d9;border-bottom:2px solid #fff3c459;border-left:2px solid #fff3c459;border-right:2px solid #fff3c459;gap:9px;padding:14px;display:grid;box-shadow:4px 4px #000,0 0 18px #ffd23f14}.player-control-card strong{color:var(--gold);text-transform:uppercase;font-size:20px}.player-control-card span{color:var(--cyan);font-family:Space Mono,monospace;font-size:14px}.player-control-card div{flex-wrap:wrap;gap:8px;display:flex}.player-stage{align-items:stretch;min-height:360px}.personal-meter{border:3px solid var(--green);background:#7cff4f12;gap:6px;margin-top:16px;padding:14px;display:inline-grid;box-shadow:5px 5px #000}.personal-meter span{color:var(--cream);text-transform:uppercase;font-weight:900}.personal-meter strong{color:var(--green);letter-spacing:.06em;font-family:"Press Start 2P",monospace;font-size:13px}.animation-overlay{z-index:50;pointer-events:none;background:#07050ec7;place-items:center;animation:1.65s steps(4,end) both overlay-pop;display:grid;position:fixed;inset:0}.animation-overlay span{border:5px solid var(--cream);background:var(--hot);color:#fff;text-align:center;text-shadow:5px 5px #000;max-width:min(92vw,900px);padding:clamp(18px,5vw,44px);font-family:"Press Start 2P",monospace;font-size:clamp(26px,8vw,86px);line-height:1.12;display:block;box-shadow:12px 12px #000,0 0 90px #ff3df2e6}.anim-countdown span{background:var(--green);color:#041404;box-shadow:12px 12px #000,0 0 90px #7cff4fcc}.anim-harmonica-blast span{background:var(--red);box-shadow:12px 12px #000,0 0 90px #ff4d5dd9}.anim-freeze span{background:var(--cyan);color:#071116;box-shadow:12px 12px #000,0 0 90px #35f8ffd9}.anim-survived span{background:var(--gold);color:#130716;box-shadow:12px 12px #000,0 0 90px #ffd23fcc}.anim-game-over span{color:var(--red);border-color:var(--red);background:#111;box-shadow:12px 12px #000,0 0 90px #ff4d5db3}@keyframes overlay-pop{0%{opacity:0;transform:scale(.8)}10%{opacity:1;transform:scale(1.07)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}.room-mode{animation-duration:.62s;animation-timing-function:steps(3,end)}.event-hype .hero-card,.event-phase-challenge .hero-card{animation:.68s steps(2,end) 2 arcade-hype}.event-freeze .hero-card,.event-phase-rules .hero-card{animation:.9s steps(2,end) arcade-freeze}.event-laugh-alarm .hero-card,.event-laugh .hero-card,.event-buzz .hero-card{animation:.52s steps(2,end) 3 arcade-danger}.event-score-pop .hero-card,.event-survived .hero-card{animation:.72s steps(2,end) 2 arcade-score}.event-ref-claimed .hero-card{animation:.72s steps(2,end) arcade-score}@keyframes arcade-hype{0%,to{box-shadow:8px 8px 0 var(--shadow), 0 0 0 2px #ff3df247, 0 0 42px #35f8ff1a}50%{box-shadow:10px 10px 0 #000, 0 0 0 5px var(--hot), 0 0 90px #ff3df2d9}}@keyframes arcade-freeze{0%,to{filter:saturate()}50%{filter:saturate(.15)brightness(1.55)}}@keyframes arcade-danger{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes arcade-score{0%,to{transform:scale(1)}50%{filter:brightness(1.3);transform:scale(1.025)}}.event-marquee{border:2px solid var(--cyan);color:var(--cream);text-transform:uppercase;background:#35f8ff12;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;font-family:Space Mono,monospace;display:flex;box-shadow:4px 4px #000}.mark-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));width:100%;display:grid}.mark-card{background:#090713c7;border:2px solid #fff3c466;gap:8px;padding:12px;display:grid;box-shadow:4px 4px #000}.mark-card strong{color:var(--gold);text-transform:uppercase}@media (width<=860px){.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel,.referee-panel,.event-panel,.join-grid,.room-code-block,.control-board,.animation-grid,.referee-panel.player-device-panel{grid-template-columns:1fr}}@media (width<=520px){.status-grid,.player-list li{grid-template-columns:1fr}.player-list strong{text-align:left}h1{font-size:clamp(22px,8vw,36px)}}