*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#141414;--surface-2:#1e1e1e;--border:#2a2a2a;--accent:#e5ff00;--danger:#ff2d2d;--penalty:#ff6b00;--correct:#00e879;--text:#f0f0f0;--muted:#666;--muted-2:#999;--font-display:"Clash Grotesk", sans-serif;--font-body:"DM Sans", sans-serif;--font-mono:"Geist Mono", monospace;--r-sm:4px;--r-md:8px;--r-full:9999px}html{height:100%}body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-size:15px;line-height:1.5;overflow:hidden}#root{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input{font-family:var(--font-body);outline:none;font-size:16px}.screen{flex-direction:column;width:100%;max-width:480px;height:100%;padding:28px 20px 36px;display:flex;position:relative;overflow:hidden}.display{font-family:var(--font-display);letter-spacing:-.5px;font-weight:700}.mono{font-family:var(--font-mono)}.muted{color:var(--muted-2)}.label{font-family:var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-size:10px}.btn-primary{background:var(--accent);color:#0a0a0a;width:100%;font-family:var(--font-display);text-align:center;border-radius:var(--r-sm);padding:16px;font-size:17px;font-weight:700;transition:opacity .12s;display:block;transform:skew(-3deg)}.btn-primary:disabled{opacity:.4;cursor:default}.btn-primary span{display:inline-block;transform:skew(3deg)}.btn-ghost{width:100%;color:var(--muted-2);font-family:var(--font-body);text-align:center;border:1.5px solid var(--muted);border-radius:var(--r-sm);background:0 0;padding:14px;font-size:14px;font-weight:500;transition:border-color .12s,color .12s;display:block}.btn-ghost:hover{border-color:var(--muted-2);color:var(--text)}.input-field{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);width:100%;color:var(--text);padding:14px 16px;font-size:16px;transition:border-color .12s}.input-field:focus{border-color:var(--accent)}.input-field::placeholder{color:var(--muted)}.error-msg{color:var(--danger);text-align:center;min-height:20px;margin-top:8px;font-size:13px}.home-logo{font-family:var(--font-display);letter-spacing:-2px;color:var(--accent);font-size:64px;font-weight:700;line-height:1}.home-tagline{color:var(--muted-2);margin-top:6px;margin-bottom:48px;font-size:14px}.home-form{flex-direction:column;flex:1;gap:12px;display:flex}.home-divider{align-items:center;gap:12px;margin:4px 0;display:flex}.home-divider-line{background:var(--border);flex:1;height:1px}.home-divider-text{color:var(--muted);font-size:12px;font-family:var(--font-mono)}.lobby-header{margin-bottom:24px}.lobby-title{font-family:var(--font-display);color:var(--accent);letter-spacing:-1px;font-size:36px;font-weight:700;line-height:1}.lobby-subtitle{color:var(--muted-2);margin-top:4px;font-size:13px}.lobby-code-wrap{margin-bottom:24px}.lobby-code{font-family:var(--font-mono);letter-spacing:8px;color:var(--accent);font-size:42px;font-weight:700;line-height:1}.lobby-players-list{flex-direction:column;flex:1;gap:8px;margin-bottom:16px;display:flex;overflow-y:auto}.lobby-player{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);align-items:center;gap:10px;padding:11px 14px;font-size:14px;font-weight:500;display:flex}.lobby-player-dot{background:var(--correct);border-radius:50%;flex-shrink:0;width:7px;height:7px}.lobby-player.is-host{border-color:var(--accent)}.lobby-player.is-host .lobby-player-dot{background:var(--accent)}.lobby-player-you{font-family:var(--font-mono);color:var(--muted);letter-spacing:1px;margin-left:auto;font-size:10px}.lobby-waiting-msg{color:var(--muted);text-align:center;padding:12px 0;font-size:13px}.countdown-screen{justify-content:center;align-items:center}.countdown-number{font-family:var(--font-display);color:var(--accent);letter-spacing:-4px;font-size:160px;font-weight:700;line-height:1}.countdown-label{font-family:var(--font-mono);letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-top:16px;font-size:12px}.question-screen-bleed{justify-content:center;align-items:center;width:100%;height:100%;transition:background 1s linear;display:flex}.question-screen{padding:0}.q-top{justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:28px 20px 0;display:flex}.q-score-wrap{flex-direction:column;gap:2px;display:flex}.q-score-label{font-family:var(--font-mono);color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-size:10px}.q-score-value{font-family:var(--font-mono);color:var(--text);font-size:18px;font-weight:700}.q-timer{font-family:var(--font-mono);color:var(--accent);font-size:48px;font-weight:700;line-height:1;transition:color .5s}.q-timer.low{color:var(--danger)}.q-progress{background:var(--surface-2);height:3px;margin:0 20px 24px}.q-progress-fill{background:var(--accent);height:100%;transition:width 1s linear,background .5s}.q-progress-fill.low{background:var(--danger)}.q-text{font-family:var(--font-display);color:var(--text);flex:1;align-items:center;padding:0 20px;font-size:22px;font-weight:600;line-height:1.3;display:flex}.q-answers{flex-direction:column;gap:10px;padding:0 20px 28px;display:flex}.answer-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;text-align:left;align-items:center;gap:12px;width:100%;padding:15px 18px;font-size:15px;font-weight:500;transition:background 80ms,border-color 80ms,transform 80ms;display:flex;transform:skew(-3deg)}.answer-btn:active{transform:skew(-3deg)scale(1.03)}.answer-btn .key{font-family:var(--font-mono);color:var(--accent);flex-shrink:0;min-width:18px;font-size:12px;font-weight:700;transform:skew(3deg)}.answer-btn .text{transform:skew(3deg)}.answer-btn:disabled{cursor:default}.answer-btn.selected{background:var(--accent);border-color:var(--accent);color:#0a0a0a}.answer-btn.selected .key{color:#0a0a0a}.answer-btn.correct{background:var(--correct);border-color:var(--correct);color:#0a0a0a}.answer-btn.correct .key{color:#0a0a0a}.answer-btn.wrong{background:var(--penalty);border-color:var(--penalty);color:#0a0a0a}.answer-btn.wrong .key{color:#0a0a0a}.answer-btn.dimmed{opacity:.3}.q-round-info{font-family:var(--font-mono);color:var(--muted);text-align:center;letter-spacing:1px;padding-bottom:8px;font-size:10px}@keyframes flash-correct{0%{opacity:.7}to{opacity:0}}@keyframes flash-wrong{0%{opacity:.5}to{opacity:0}}.flash-overlay{pointer-events:none;z-index:100;opacity:0;position:fixed;inset:0}.flash-overlay.correct{background:var(--correct);animation:80ms ease-out forwards flash-correct}.flash-overlay.wrong{background:var(--danger);animation:.12s ease-out forwards flash-wrong}.pattern-grid{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:340px;margin:auto;padding-bottom:28px;display:grid}.pattern-cell{aspect-ratio:1;font-size:clamp(28px,10vw,56px);font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;font-weight:700;transition:border-color 80ms,background 80ms;display:flex}.pattern-cell:hover{border-color:var(--muted)}.pattern-cell:active{background:var(--surface-2)}.pattern-cell:disabled{cursor:default}.pattern-cell.correct{background:var(--correct);border-color:var(--correct);color:#0a0a0a}.pattern-cell.wrong{background:var(--penalty);border-color:var(--penalty);color:#0a0a0a}.pattern-cell.dimmed{opacity:.3}.results-header{margin-bottom:20px}.results-title{font-family:var(--font-display);color:var(--text);letter-spacing:-.5px;font-size:28px;font-weight:700}.results-round{font-family:var(--font-mono);color:var(--muted);letter-spacing:1px;margin-top:4px;font-size:11px}.results-my-result{gap:12px;margin-bottom:20px;display:flex}.result-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);flex:1;padding:14px 16px}.result-stat.correct-stat{border-color:var(--correct)}.result-stat.wrong-stat{border-color:var(--penalty)}.result-stat-label{font-family:var(--font-mono);color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;font-size:10px}.result-stat-value{font-family:var(--font-mono);font-size:24px;font-weight:700;line-height:1}.result-stat.correct-stat .result-stat-value{color:var(--correct)}.result-stat.wrong-stat .result-stat-value{color:var(--penalty)}.leaderboard{flex-direction:column;flex:1;gap:8px;display:flex;overflow-y:auto}.lb-entry{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);align-items:center;gap:12px;padding:12px 16px;display:flex;transform:skew(-2deg)}.lb-entry.rank-1{background:var(--accent);border-color:var(--accent);color:#0a0a0a}.lb-entry.is-me{border-color:var(--muted-2)}.lb-rank{font-family:var(--font-mono);min-width:22px;font-size:16px;font-weight:700;transform:skew(2deg)}.lb-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;font-weight:600;overflow:hidden;transform:skew(2deg)}.lb-score{font-family:var(--font-mono);font-size:15px;font-weight:700;transform:skew(2deg)}.lb-delta{font-family:var(--font-mono);text-align:right;min-width:40px;font-size:11px;transform:skew(2deg)}.lb-delta.pos{color:var(--correct)}.lb-delta.neg{color:var(--penalty)}.lb-entry.rank-1 .lb-delta.pos,.lb-entry.rank-1 .lb-delta.neg{color:#0a0a0a;opacity:.7}.next-btn-wrap{margin-top:16px}.gameover-title{font-family:var(--font-display);color:var(--accent);letter-spacing:-1px;margin-bottom:4px;font-size:48px;font-weight:700;line-height:1}.gameover-sub{color:var(--muted-2);margin-bottom:24px;font-size:13px}.gameover-podium{flex-direction:column;flex:1;gap:8px;margin-bottom:20px;display:flex;overflow-y:auto}.gameover-winner{background:var(--accent);border-radius:var(--r-sm);margin-bottom:8px;padding:20px}.gameover-winner-rank{font-family:var(--font-mono);letter-spacing:3px;color:#0a0a0a;opacity:.5;text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:700}.gameover-winner-name{font-family:var(--font-display);color:#0a0a0a;font-size:28px;font-weight:700}.gameover-winner-score{font-family:var(--font-mono);color:#0a0a0a;opacity:.7;margin-top:4px;font-size:14px}