@import"https://fonts.googleapis.com/css2?family=Bungee&family=Rajdhani:wght@400;600;700&display=swap";:root{color-scheme:dark;font-family:Rajdhani,Trebuchet MS,sans-serif;--bg-1: #050510;--bg-2: #10162f;--bg-3: #1a1f3b;--neon: #42f8ff;--accent: #ff4d6d;--accent-2: #f9c74f;--panel: rgba(12, 16, 36, .88);--border: rgba(102, 252, 241, .2);--muted: rgba(255, 255, 255, .6);--glow: 0 0 24px rgba(66, 248, 255, .35)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1c2350,var(--bg-1) 55%),linear-gradient(120deg,#0a1028,#1b0c3a,#06060f);color:#fff}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle at 10% 10%,rgba(66,248,255,.18),transparent 40%),radial-gradient(circle at 90% 20%,rgba(255,77,109,.2),transparent 45%),repeating-linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 2px,transparent 2px,transparent 10px);opacity:.8;pointer-events:none;z-index:-1}#root,.app{min-height:100vh}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2rem;border-bottom:1px solid var(--border);background:#050612e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{font-family:Bungee,Rajdhani,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--neon);text-shadow:0 0 16px rgba(66,248,255,.6)}.top-controls{display:flex;align-items:center;gap:.6rem}.scale-controls{display:flex;align-items:center;gap:.4rem}.scale-label{font-weight:700;color:var(--neon)}.audio-toggle{border:1px solid var(--neon);background:transparent;color:var(--neon);padding:.5rem 1rem;border-radius:999px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.audio-toggle:hover{transform:translateY(-2px);box-shadow:var(--glow)}.ghost.tiny{padding:.5rem .9rem;font-size:1rem;border-radius:999px}.restate{margin-top:.5rem}main{padding:2rem}.hero{position:relative;display:grid;place-items:center;min-height:75vh}.hero-card{background:var(--panel);border:1px solid var(--border);padding:3rem;border-radius:24px;max-width:520px;text-align:center;box-shadow:var(--glow)}.hero-card h1{font-family:Bungee,Rajdhani,sans-serif;font-size:clamp(2rem,4vw,3rem);margin:1rem 0}.badge{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:.4rem 1rem;border-radius:999px;font-weight:700;letter-spacing:2px;font-size:.75rem}.tagline{color:var(--muted)}.cta-group{display:flex;gap:1rem;justify-content:center;margin:2rem 0}.room-entry{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem}.room-entry input{padding:.6rem;font-size:1.1rem;text-align:center;background:#ffffff14;border:1px solid var(--border);color:#fff;border-radius:8px}.hero-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(66,248,255,.25),transparent 60%);filter:blur(12px);z-index:-1}.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:1.5rem;box-shadow:0 12px 30px #00000059}.primary,.ghost,.buzz{border:none;cursor:pointer;font-weight:700;font-size:1rem;padding:.75rem 1.4rem;border-radius:10px;transition:transform .2s ease,box-shadow .2s ease}.ghost.spaced{margin-left:1rem}.primary{background:linear-gradient(90deg,var(--accent),#ff758f);color:#fff;box-shadow:0 0 18px #ff4d6d73}.primary:disabled{opacity:.6;cursor:not-allowed}.ghost{background:transparent;border:1px solid var(--border);color:#fff}.primary:hover,.ghost:hover,.buzz:hover{transform:translateY(-2px)}.screen{position:relative}.screen-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:1.5rem;animation:fadeIn .6s ease}.screen-grid.centered{grid-template-columns:1fr;justify-items:center}.panel.center{text-align:center;max-width:540px;margin:0 auto}.panel h2,.panel h3{margin-top:0}.spinner{width:48px;height:48px;margin:1rem auto;border-radius:50%;border:3px solid rgba(66,248,255,.2);border-top-color:var(--neon);animation:spin 1s linear infinite}.screen-main .panel{margin-bottom:1.5rem}.screen-main .panel:last-of-type{margin-bottom:.8rem}.room-panel{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:nowrap;width:100%;align-items:flex-end}.room-panel.full-row{grid-column:1 / -1}.room-panel>div{flex:1 1 0}.room-panel .room-info{flex:0 0 150px}.room-panel .room-join{flex:2 1 0}.room-actions{justify-content:flex-end;margin-left:auto;align-items:flex-end}.room-code{font-size:2rem;font-family:Bungee,Rajdhani,sans-serif;color:var(--neon)}.label{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.status-text{font-weight:600}.join-url{font-size:1.2rem;color:var(--neon);font-weight:700;text-shadow:0 0 16px rgba(66,248,255,.6);padding:.35rem .75rem;border-radius:10px;border:1px solid rgba(66,248,255,.4);background:#060c18b3;word-break:break-all}.room-actions{display:flex;gap:.75rem;align-items:flex-end}.game-panel{min-height:340px;position:relative}.skull-pop{position:absolute;left:50%;top:58%;transform:translate(-50%);animation:skullFloat 1.2s ease-out forwards;text-shadow:0 0 18px rgba(255,77,109,.6);pointer-events:none}.penalty-pop{position:absolute;left:50%;top:64%;transform:translate(-50%);font-weight:700;color:#ff4d6d;text-shadow:0 0 12px rgba(255,77,109,.6);animation:penaltyFloat 1.4s ease-out forwards;pointer-events:none}.status-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}.status-pill{padding:.5rem 1rem;border-radius:999px;border:1px solid var(--border);background:#ffffff0d;font-size:1.05rem}.status-pill.urgent{border-color:#ff4d6d99;color:#ffb3c1;box-shadow:0 0 16px #ff4d6d59}.countdown{font-size:clamp(3.6rem,9vw,5.8rem);text-align:center;font-family:Bungee,Rajdhani,sans-serif;color:var(--accent-2)}.question{text-align:center}.prompt{font-size:clamp(2.4rem,4.8vw,3.8rem);font-family:Bungee,Rajdhani,sans-serif;margin-bottom:1rem}.answering span{color:var(--accent-2)}.reveal-answer{font-size:2.4rem;color:var(--neon)}.reveal{text-align:center}.award{font-size:1.4rem;color:var(--accent-2);margin-bottom:.4rem}.penalty{font-size:1.4rem;color:#ff4d6d;margin-bottom:.4rem}.round-deltas{display:flex;flex-direction:column;gap:.35rem}.gameover{text-align:center}.gameover-content{animation:pulse 1.6s ease-in-out infinite}.gameover .primary{margin-top:.8rem}.gameover .ghost{margin-top:.5rem}.gameover-reason{margin-bottom:.5rem;color:#ffb3c1}.winner{font-size:2rem;color:var(--accent-2)}.settings-panel label{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}.settings-panel input,.settings-panel select{padding:.7rem;font-size:1.05rem;background:#070c1ccc;border:1px solid rgba(66,248,255,.35);box-shadow:inset 0 0 12px #42f8ff14;border-radius:8px;color:#fff}.settings-panel input:focus,.settings-panel select:focus{outline:none;border-color:var(--neon);box-shadow:0 0 16px #42f8ff59}.settings-panel .field{position:relative;display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem;--field-pad-left: .9rem}.settings-panel .field input,.settings-panel .field select{padding:1.7rem var(--field-pad-left) 1rem;background:#070c1ccc;border:1px solid rgba(66,248,255,.35);border-radius:10px;color:#fff;font-size:1.05rem;box-sizing:border-box}.settings-panel .field select{padding-right:2.6rem;line-height:1.2;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(66,248,255,.8) 50%),linear-gradient(135deg,rgba(66,248,255,.8) 50%,transparent 50%);background-position:calc(100% - 1.4rem) 55%,calc(100% - 1.1rem) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}.settings-panel .field select+label{top:1.35rem}.settings-panel .field label{position:absolute;top:1.4rem;left:var(--field-pad-left);color:var(--muted);font-size:.95rem;letter-spacing:1px;text-transform:uppercase;transition:transform .2s ease,color .2s ease;transform-origin:left top;pointer-events:none}.settings-panel .field input:focus+label,.settings-panel .field input:not(:placeholder-shown)+label,.settings-panel .field.float label{transform:translateY(-.95rem) scale(.85);color:var(--neon)}.settings-panel .field select:focus{outline:none;border-color:var(--neon);box-shadow:0 0 16px #42f8ff59}@media (max-width: 900px){.settings-panel{grid-template-columns:1fr}}.hint{font-size:.9rem;color:var(--muted);text-align:left;margin-top:.2rem;margin-left:.6rem}.player-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:1rem;margin-top:.4rem;justify-content:start}.scoreboard ul{list-style:none;padding:0;margin:0}.scoreboard h4{margin-bottom:0;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.12)}.scoreboard li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:.6rem;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.player-dot{width:18px;height:18px;border-radius:50%;display:inline-block;box-shadow:0 0 10px #ffffff26}.player-card{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border-radius:14px;background:#070c1cb3;border:1px solid rgba(66,248,255,.2);box-shadow:0 0 18px #42f8ff1a}.player-swatch{width:18px;height:36px;border-radius:8px;box-shadow:0 0 16px #ffffff26}.player-name{font-weight:700;font-size:1.05rem}.player-score{font-size:.9rem;color:var(--accent-2)}.score{font-weight:700}.screen .panel h2,.screen .panel h3{font-size:calc(1.4rem * var(--screen-scale))}.screen .label{font-size:calc(.75rem * var(--screen-scale))}.screen .room-code{font-size:calc(2rem * var(--screen-scale))}.screen .join-url{font-size:calc(1.2rem * var(--screen-scale))}.screen .status-pill{font-size:calc(1.05rem * var(--screen-scale))}.screen .countdown{font-size:clamp(calc(3.6rem * var(--screen-scale)),9vw,calc(5.8rem * var(--screen-scale)))}.screen .prompt{font-size:clamp(calc(2.4rem * var(--screen-scale)),4.8vw,calc(3.8rem * var(--screen-scale)))}.screen .answering{font-size:calc(1.1rem * var(--screen-scale))}.screen .spell-blanks{font-size:calc(1.3rem * var(--screen-scale))}.screen .reveal-answer{font-size:calc(2.4rem * var(--screen-scale))}.screen .award,.screen .penalty{font-size:calc(1.4rem * var(--screen-scale))}.screen .skull-pop{font-size:calc(3rem * var(--screen-scale))}.screen .penalty-pop{font-size:calc(1.4rem * var(--screen-scale))}.controller .penalty{font-size:1.1rem;color:#ff4d6d;margin-bottom:.4rem}.screen .winner{font-size:calc(2rem * var(--screen-scale))}.screen .winner-score{font-size:calc(1.3rem * var(--screen-scale));color:var(--accent-2)}.screen .player-name{font-size:calc(1.05rem * var(--screen-scale))}.screen .player-score{font-size:calc(.9rem * var(--screen-scale))}.screen .confetti span{font-size:calc(2.2rem * var(--screen-scale))}.screen .roster p,.screen .settings-panel{font-size:calc(1rem * var(--screen-scale))}.screen .settings-panel .field input,.screen .settings-panel .field select{font-size:calc(1.05rem * var(--screen-scale))}.screen .settings-panel .hint{font-size:calc(.9rem * var(--screen-scale))}.screen .connection-alert{font-size:calc(1rem * var(--screen-scale))}.screen button{font-size:calc(1rem * var(--screen-scale));padding:calc(.6rem * var(--screen-scale)) calc(1.2rem * var(--screen-scale))}.app.screen-mode .brand{font-size:calc(1.4rem * var(--screen-scale))}.app.screen-mode .audio-toggle{font-size:calc(1rem * var(--screen-scale));padding:calc(.4rem * var(--screen-scale)) calc(1rem * var(--screen-scale))}.app.screen-mode .ghost.tiny{font-size:calc(1rem * var(--screen-scale));padding:calc(.5rem * var(--screen-scale)) calc(.9rem * var(--screen-scale))}.app.screen-mode .scale-label{font-size:calc(1rem * var(--screen-scale))}.error{color:#ffb3c1}.muted{opacity:.6}.controller{display:grid;place-items:center;min-height:70vh}.controller-panel{width:min(460px,90vw);text-align:center}.controller-panel .primary{margin-top:1rem}.color-panel{margin-top:1rem;padding:.2rem 0}.join-panel{width:min(460px,90vw)}.join-panel form{display:flex;flex-direction:column;gap:1rem}.settings-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.settings-panel h2{grid-column:1 / -1;margin-bottom:0}.settings-panel .field{margin-bottom:0}.settings-panel .field.span-2{grid-column:1 / -1}.join-panel .field{position:relative;display:flex;flex-direction:column;gap:.4rem;--field-pad-left: 1rem}.join-panel .field input{padding:1.6rem var(--field-pad-left) 1rem;background:#070c1cd9;border:1px solid rgba(66,248,255,.35);border-radius:10px;color:#fff;font-size:1.1rem}.join-panel .field input.code-input{letter-spacing:.12rem;text-transform:uppercase}.join-panel .code-field{--field-pad-left: .95rem}.join-panel .field input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 14px #42f8ff59}.join-panel .field label{position:absolute;top:1.5rem;left:var(--field-pad-left);color:var(--muted);font-size:.95rem;letter-spacing:1px;text-transform:uppercase;transition:transform .2s ease,color .2s ease;transform-origin:left top;pointer-events:none}.join-panel .field input:focus+label,.join-panel .field input:not(:placeholder-shown)+label{transform:translateY(-1.05rem) scale(.85);color:var(--neon)}.join-panel .field-label{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.color-row{display:flex;gap:.6rem;justify-content:center;flex-wrap:nowrap}.color-chip{width:32px;height:32px;border-radius:50%;border:2px solid transparent}.color-chip.active{border-color:#fff;box-shadow:var(--glow)}.color-chip:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.4)}.buzz{font-family:Bungee,Rajdhani,sans-serif;font-size:2.2rem;padding:1.2rem 2.6rem;background:radial-gradient(circle at top,#ffb3c1,var(--accent));color:#1b0c3a;box-shadow:0 0 25px #ff4d6db3}.buzz-panel{display:flex;flex-direction:column;align-items:center;gap:.4rem}.buzz-timer{font-weight:700;color:var(--accent-2)}.buzz:disabled{opacity:.5;box-shadow:none}.answer-box{display:flex;flex-direction:column;gap:.6rem;align-items:center;margin-top:1rem}.answer-box input{padding:1rem 1.2rem;font-size:1.8rem;min-width:200px;text-align:center;border-radius:8px;border:1px solid var(--border);background:#ffffff1a;color:#fff}.answer-box .primary{padding:.9rem 1.6rem;font-size:1.05rem}@media (max-width: 480px){.answer-box input{min-width:160px;font-size:1.5rem;padding:.8rem 1rem}.answer-box .primary{padding:.75rem 1.3rem;font-size:1rem}}.answer-timer{font-weight:700;color:var(--accent-2)}.controller-question{font-family:Bungee,Rajdhani,sans-serif;font-size:1.6rem;margin:.6rem 0;color:var(--accent-2)}.spell-blanks{letter-spacing:.4rem;font-size:1.3rem;color:#fff;margin-top:.3rem}.controller-header{display:flex;justify-content:space-between;margin-bottom:1rem}.ready{font-size:1.6rem;color:var(--accent-2)}.ready-timer{font-weight:700;color:#fff}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:3}.confetti span{position:absolute;left:var(--x);top:var(--y);font-size:2.2rem;animation:partyPop 2s ease-out forwards;animation-delay:calc(var(--i) * .02s)}.connection-alert{margin-top:1rem;margin-bottom:.6rem;padding:.6rem .9rem;border-radius:10px;text-align:center;font-weight:700;color:#ff4d6d;border:1px solid rgba(255,77,109,.5);background:#14080c99;animation:flashAlert 1s ease-in-out infinite}.flash{animation:flash .4s ease}.shake{animation:shake .4s ease}@keyframes partyPop{0%{transform:scale(.6) rotate(-10deg);opacity:0}25%{transform:scale(1.1) rotate(10deg);opacity:1}to{transform:translateY(30px) rotate(35deg);opacity:.6}}@keyframes flash{0%{box-shadow:none}to{box-shadow:0 0 45px #ff4d6da6}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-4px)}to{transform:translate(0)}}@keyframes skullFloat{0%{transform:translate(-50%,10px);opacity:0}20%{opacity:1}to{transform:translate(-50%,-80px);opacity:0}}@keyframes penaltyFloat{0%{transform:translate(-50%,10px);opacity:0}25%{opacity:1}to{transform:translate(-50%,-60px);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes flashAlert{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}@media (max-width: 900px){.screen-grid{grid-template-columns:1fr}.room-panel{flex-wrap:wrap}.room-panel>div{flex:1 1 100%}.top-bar{flex-direction:column;gap:.6rem}main{padding:1rem}}