:root{--color-bg: oklch(12% .005 220);--color-surface: oklch(17% .008 220);--color-surface-raised: oklch(21% .01 220);--color-text: oklch(90% .008 220);--color-text-muted: oklch(58% .01 220);--color-text-dim: oklch(42% .008 220);--color-accent: oklch(68% .1 25);--color-accent-deep: oklch(55% .085 22);--color-accent-soft: oklch(68% .07 25);--color-accent-glow: oklch(68% .1 25 / .18);--color-error: oklch(60% .12 20);--color-error-bg: oklch(60% .12 20 / .1);--font-display: "Onest", "Helvetica Neue", system-ui, sans-serif;--font-body: "Manrope", "Helvetica Neue", system-ui, sans-serif;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1.25rem}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);text-rendering:optimizeLegibility;font-synthesis:none}button,input{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:var(--font-body);font-size:inherit}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer}.app-shell{position:relative;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 10% 15%,oklch(68% .04 25 / .04),transparent 50%),radial-gradient(ellipse at 90% 85%,oklch(55% .03 220 / .05),transparent 50%),var(--color-bg)}.game-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.panel{position:absolute;right:7vw;left:auto;top:50%;transform:translateY(-50%);width:min(440px,calc(100vw - 2rem));padding:var(--space-2xl);background:var(--color-surface);border:1px solid oklch(35% .015 220 / .4);border-radius:var(--radius-sm) var(--radius-lg) var(--radius-sm) var(--radius-lg);box-shadow:0 16px 48px #00000059;z-index:10}.hud{position:absolute;top:var(--space-md);left:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs);z-index:5;text-shadow:0 1px 4px oklch(0% 0 0 / .5)}.hud-time{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:600;line-height:.9;color:var(--color-accent);font-variant-numeric:tabular-nums}.hud-turnover{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600;line-height:.95;color:var(--color-error)}.score-center{position:absolute;top:var(--space-md);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);z-index:5;text-shadow:0 1px 4px oklch(0% 0 0 / .5)}.audio-toggle{position:absolute;top:var(--space-md);right:var(--space-md);z-index:7}.score-big{font-family:var(--font-display);font-size:clamp(3rem,8vw,6rem);font-weight:600;line-height:.85;color:var(--color-accent);font-variant-numeric:tabular-nums}.score-center--celebrating .score-big{animation:score-pop .62s cubic-bezier(.22,1,.36,1)}.goal-toast{position:absolute;top:calc(100% + var(--space-xs));white-space:nowrap;pointer-events:none;font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);font-weight:600;line-height:.95;letter-spacing:.03em;color:#edd4ab;text-shadow:0 2px 10px oklch(0% 0 0 / .6);animation:goal-toast-rise 1.35s cubic-bezier(.22,1,.36,1) forwards}@keyframes score-pop{0%{opacity:.82;transform:scale(.9)}45%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes goal-toast-rise{0%{opacity:0;transform:translateY(.4rem) scale(.94)}18%{opacity:1}72%{opacity:1}to{opacity:0;transform:translateY(-.45rem) scale(1.02)}}.countdown-overlay{position:absolute;left:50%;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);pointer-events:none;text-align:center;text-shadow:0 2px 12px oklch(0% 0 0 / .5),0 0 24px var(--color-accent-glow);transform:translate(-50%,-50%)}.countdown-kicker{color:var(--color-accent-soft)}.countdown-number{min-width:1.1em;font-family:var(--font-display);font-size:clamp(7rem,20vw,15rem);font-weight:600;line-height:.85;color:var(--color-accent)}.display{font-family:var(--font-display);font-weight:600;line-height:.9;letter-spacing:.02em}h1{margin:0 0 var(--space-sm);font-family:var(--font-display);font-size:clamp(2.4rem,8vw,5rem);font-weight:600;line-height:.9;letter-spacing:.02em;color:var(--color-accent)}h2{margin:0 0 var(--space-md);font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3rem);font-weight:600;line-height:1;color:var(--color-accent)}p{margin:0}.muted{color:var(--color-text-muted)}.small{font-size:.85rem}.eyebrow{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-soft);margin-bottom:var(--space-xs)}.hud-label{display:block;font-family:var(--font-body);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-dim)}.btn-primary{padding:.75rem 1.25rem;font-weight:700;color:#030607;background:var(--color-accent);border-radius:var(--radius-sm);transition:background .15s,transform .1s}.btn-primary:hover{background:#e3928b}.btn-primary:active{transform:scale(.98)}.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn-secondary{padding:.6rem 1rem;font-weight:700;color:var(--color-accent);background:transparent;border:1px solid oklch(68% .1 25 / .25);border-radius:var(--radius-sm);transition:background .15s,border-color .15s}.btn-secondary:hover{background:#cf7f791a;border-color:#cf7f7973}.btn-secondary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.input{min-width:0;padding:.75rem 1rem;color:var(--color-text);background:var(--color-bg);border:1px solid oklch(35% .012 220 / .45);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}.input::placeholder{color:var(--color-text-dim)}.input:focus{outline:none;border-color:var(--color-accent-soft);box-shadow:0 0 0 2px #cf7f791f}.join-form{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-sm);margin:var(--space-lg) 0}.player-list{display:grid;gap:var(--space-xs);margin-top:var(--space-md)}.player-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) 0}.player-row strong{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim)}.winner-star{color:var(--color-accent)}.error{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);color:var(--color-error);background:var(--color-error-bg);border-radius:var(--radius-sm);font-weight:700;font-size:.9rem}.lobby-copy{color:var(--color-text-muted);margin-bottom:var(--space-sm);line-height:1.5}.hud-hint{margin-top:.75rem}.results-actions{margin-top:var(--space-lg)}@media(max-width:700px){.panel{right:auto;left:50%;transform:translate(-50%,-50%)}.join-form{grid-template-columns:1fr}.hud{top:var(--space-sm);left:var(--space-sm)}.score-center{top:var(--space-sm)}.audio-toggle{top:var(--space-sm);right:var(--space-sm);padding:.5rem .75rem}}@media(prefers-reduced-motion:reduce){.score-center--celebrating .score-big,.goal-toast{animation:none}.goal-toast{opacity:1;transform:none}}