:root{--hud-edge: clamp(1rem, 3vw, 2.8rem);--kill-feed-top: clamp(5.4rem, 13vw, 9.4rem);--kill-feed-stack-height: 10.9rem;color:#f7fbff;background:#061021;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow:hidden}button{color:inherit;font:inherit}button:focus-visible{outline:3px solid #fff3a6;outline-offset:4px}.game-shell{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 18%,#153769,#08172d 44%,#030711)}.game-shell:after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";background:linear-gradient(180deg,rgba(2,7,21,.6) 0%,transparent 20%,transparent 70%,rgba(2,7,21,.72) 100%),linear-gradient(90deg,rgba(3,8,19,.28),transparent 24%,transparent 76%,rgba(3,8,19,.28))}.game-world,.game-world canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.topbar,.match-card,.kill-feed,.powerup-card,.event-toast,.control-strip,.touch-controls,.welcome-panel{position:absolute;z-index:2}.touch-controls{display:none}.topbar{top:clamp(1rem,3vw,2.6rem);right:clamp(1rem,3vw,2.8rem);left:clamp(1rem,3vw,2.8rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;pointer-events:none}.brand-lockup{line-height:.84;letter-spacing:-.06em;text-shadow:0 3px 24px rgba(34,226,255,.34)}.brand-kicker,.eyebrow{display:block;color:#75eaff;font-size:.66rem;font-weight:800;letter-spacing:.18em}.brand-lockup h1{margin:.42rem 0 0;font-size:clamp(1.32rem,3.2vw,2.75rem);font-weight:950}.brand-lockup strong{color:#ffe66d;font-weight:950}.round-clock{display:grid;min-width:7.5rem;padding:.42rem 1.1rem .52rem;border:1px solid rgba(152,235,255,.38);border-radius:1rem;background:#061429a8;box-shadow:0 12px 32px #00000038,inset 0 1px #ffffff1f;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.round-clock span{color:#87edff;font-size:.58rem;font-weight:850;letter-spacing:.14em}.round-clock strong{color:#fff;font-size:clamp(1.2rem,3vw,1.8rem);font-variant-numeric:tabular-nums;letter-spacing:.05em}.icon-button{justify-self:end;width:2.8rem;height:2.8rem;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:#08172cb8;box-shadow:inset 0 1px #ffffff29;cursor:pointer;font-size:1.45rem;line-height:1;pointer-events:auto;transition:transform .18s ease,background .18s ease}.icon-button:hover{background:#28698edb;transform:rotate(-40deg)}.topbar-actions{display:flex;justify-self:end;align-items:center;gap:.58rem;pointer-events:auto}.text-button{padding:.55rem .7rem;border:1px solid rgba(178,227,255,.3);border-radius:.55rem;background:#08172ca6;color:#dff8ff;cursor:pointer;font-size:.6rem;font-weight:900;letter-spacing:.1em;transition:background .16s ease,border-color .16s ease}.text-button:hover{border-color:#75eaff;background:#22698ed9}.match-card{top:max(clamp(14.3rem,30vh,17rem),calc(var(--kill-feed-top) + var(--kill-feed-stack-height)));right:var(--hud-edge);width:min(17.4rem,calc(100vw - 2rem));overflow:hidden;border:1px solid rgba(147,220,255,.33);border-radius:1rem;background:#051125c2;box-shadow:0 20px 40px #00000042,inset 0 1px #ffffff17;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.kill-feed{top:var(--kill-feed-top);right:var(--hud-edge);width:min(18rem,calc(100vw - 2rem));pointer-events:none}.kill-feed-list{display:grid;justify-items:end;gap:.38rem;margin:0;padding:0;list-style:none}.kill-feed-entry{display:inline-flex;align-items:center;justify-content:flex-end;gap:.52rem;min-width:10.8rem;padding:.4rem .56rem;border:1px solid rgba(165,227,255,.22);border-right:3px solid rgba(117,234,255,.85);border-radius:.42rem;background:#051023c2;box-shadow:0 7px 19px #0000003d;font-size:.64rem;font-weight:900;letter-spacing:.055em;opacity:0;transform:translate(1.4rem);animation:kill-feed-enter .18s ease forwards;transition:opacity .18s ease,transform .18s ease}.kill-feed-entry.is-leaving{opacity:0;transform:translate(1rem)}.kill-feed-player{max-width:6.2rem;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 5px rgba(0,0,0,.9);white-space:nowrap}.kill-feed-icon{color:#f5f8ff;font-size:.96rem;line-height:.7;text-shadow:0 0 11px rgba(117,234,255,.72)}@keyframes kill-feed-enter{to{opacity:1;transform:translate(0)}}.card-heading{display:flex;justify-content:space-between;gap:.5rem;padding:.8rem .95rem;border-bottom:1px solid rgba(150,221,255,.16);color:#dff8ff;font-size:.64rem;font-weight:900;letter-spacing:.12em}.connection-label{color:#ffe66d;font-size:.53rem;letter-spacing:.08em}.leaderboard{display:grid;gap:.14rem;margin:0;padding:.5rem;list-style:none}.leaderboard-row{display:grid;grid-template-columns:1.65rem .55rem 1fr auto;align-items:center;gap:.44rem;min-height:2.15rem;padding:0 .42rem;border:1px solid transparent;border-radius:.58rem;color:#bdcce4;font-size:.72rem;font-weight:800}.leaderboard-row.is-local{border-color:#ffe66d73;background:linear-gradient(90deg,#ffde5c2e,#ffde5c05);color:#fffef6}.player-rank{color:#7185a4;font-size:.6rem;font-variant-numeric:tabular-nums}.player-swatch{width:.48rem;height:.48rem;border-radius:50%;box-shadow:0 0 10px currentColor}.player-identity{letter-spacing:.06em}.player-stat{color:#f4f8ff;font-size:.62rem;font-variant-numeric:tabular-nums}.match-note{margin:0;padding:.6rem .95rem .76rem;border-top:1px solid rgba(150,221,255,.13);color:#87a4c7;font-size:.61rem;line-height:1.45}.powerup-card{top:clamp(5.4rem,13vw,9.4rem);left:clamp(1rem,3vw,2.8rem);display:grid;width:min(15.8rem,calc(100vw - 2rem));gap:.24rem;padding:.88rem .98rem;border:1px solid rgba(146,221,255,.28);border-left:3px solid #587797;border-radius:.9rem;background:#051125b8;box-shadow:0 16px 34px #0000003d,inset 0 1px #ffffff14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .18s ease,box-shadow .18s ease}.powerup-kicker{color:#8ba6c8;font-size:.56rem;font-weight:900;letter-spacing:.14em}.powerup-card strong{color:#f3f8ff;font-size:.82rem;letter-spacing:.04em}.powerup-card>span:last-child{color:#a9bdd7;font-size:.63rem;line-height:1.45}.powerup-card[data-power=turbo]{border-left-color:#ffca3a;box-shadow:0 16px 34px #0000003d,-6px 0 24px #ffca3a24}.powerup-card[data-power=bumper]{border-left-color:#ff5ca8;box-shadow:0 16px 34px #0000003d,-6px 0 24px #ff5ca824}.powerup-card[data-power=shield]{border-left-color:#62e7ff;box-shadow:0 16px 34px #0000003d,-6px 0 24px #62e7ff24}.powerup-card[data-power=shockwave]{border-left-color:#b38cff;box-shadow:0 16px 34px #0000003d,-6px 0 24px #b38cff24}.event-toast{bottom:max(6.8rem,11vh);left:50%;display:grid;gap:.1rem;min-width:min(21rem,calc(100vw - 2rem));padding:.78rem 1rem;border:1px solid rgba(155,231,255,.38);border-radius:.8rem;background:#051328d6;box-shadow:0 18px 38px #0000004d;opacity:0;pointer-events:none;text-align:center;transform:translate(-50%,1rem);transition:opacity .18s ease,transform .18s ease}.event-toast.is-visible{opacity:1;transform:translate(-50%)}.event-toast strong{color:#75eaff;font-size:.72rem;letter-spacing:.15em}.event-toast span{color:#eef8ff;font-size:.76rem}.event-toast[data-tone=success] strong{color:#a8f46a}.event-toast[data-tone=danger] strong{color:#ff8fbd}.control-strip{right:clamp(1rem,3vw,2.8rem);bottom:clamp(1rem,2.7vw,2.4rem);left:clamp(1rem,3vw,2.8rem);display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 1.15rem;color:#cadcf2;font-size:.66rem;font-weight:700;letter-spacing:.03em;text-align:center;text-shadow:0 2px 5px #020611}kbd{display:inline-grid;min-width:1.18rem;min-height:1.18rem;margin-right:.14rem;padding:.06rem .24rem;border:1px solid rgba(197,232,255,.55);border-radius:.25rem;background:#091b35b3;color:#fff;font-family:inherit;font-size:.55rem;place-items:center}.control-tip{color:#ffe66d}.welcome-panel{z-index:4;top:0;right:0;bottom:0;left:0;display:grid;padding:1.5rem;background:radial-gradient(circle at 50% 42%,#0a1e4242,#020712b8);place-items:center;transition:opacity .38s ease,visibility .38s ease}.welcome-panel.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.welcome-card,.lobby-card{width:min(36rem,100%);max-height:min(50rem,calc(100svh - 2rem));overflow:auto;padding:clamp(1.5rem,5vw,3rem);border:1px solid rgba(158,229,255,.42);border-radius:1.35rem;background:#06152edb;box-shadow:0 28px 80px #0000007a,inset 0 1px #ffffff1f;text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.welcome-card .eyebrow,.lobby-card .eyebrow{margin:0}.welcome-card h2,.lobby-card h2{margin:.78rem 0 1rem;color:#f9fcff;font-size:clamp(2.3rem,9vw,5rem);font-weight:950;letter-spacing:-.09em;line-height:.83;text-shadow:0 0 32px rgba(83,224,255,.25)}.welcome-card h2 em,.lobby-card h2 em{color:#ffe66d;font-style:normal}.welcome-card>p:not(.eyebrow):not(.future-note),.lobby-card>p:not(.eyebrow):not(.future-note):not(.online-status){max-width:23rem;margin:0 auto 1.5rem;color:#b9cae2;font-size:.94rem;line-height:1.6}.start-button{display:inline-flex;align-items:center;gap:.8rem;padding:.82rem 1.05rem .82rem 1.35rem;border:0;border-radius:.66rem;background:#ffe66d;box-shadow:0 10px 30px #ffd33a4d;color:#1c2332;cursor:pointer;font-size:.76rem;font-weight:950;letter-spacing:.12em;transition:transform .16s ease,box-shadow .16s ease}.start-button:hover{box-shadow:0 14px 38px #ffd33a7a;transform:translateY(-2px) scale(1.015)}.start-button span{font-size:1.25rem;line-height:.7}.future-note{margin:1rem 0 0;color:#6f92bc;font-size:.65rem;line-height:1.45}.lobby-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.online-badge{padding:.3rem .46rem;border:1px solid rgba(139,166,200,.42);border-radius:999px;color:#9db4d1;font-size:.5rem;font-weight:900;letter-spacing:.11em}.online-badge.is-online{border-color:#75eaff99;background:#45d6ff1a;color:#75eaff}.lobby-intro{max-width:29rem!important;margin-bottom:1.15rem!important}.name-field{display:grid;gap:.45rem;max-width:18rem;margin:0 auto 1.2rem;text-align:left}.name-field>span,.room-panel-kicker,.join-panel label{color:#8bc5e8;font-size:.56rem;font-weight:900;letter-spacing:.13em}.name-field input,.join-controls input{width:100%;border:1px solid rgba(148,219,255,.32);border-radius:.52rem;outline:none;background:#020d1fb8;color:#f8fcff;font:inherit;font-size:.82rem;font-weight:800;letter-spacing:.08em;transition:border-color .16s ease,box-shadow .16s ease}.name-field input{padding:.72rem .78rem}.name-field input:focus,.join-controls input:focus{border-color:#75eaff;box-shadow:0 0 0 3px #75eaff1f}.lobby-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.64rem}.lobby-action{display:grid;min-height:7.4rem;padding:.88rem;border:1px solid rgba(146,218,255,.26);border-radius:.82rem;background:linear-gradient(155deg,#18395e9e,#06142bd6);color:#effbff;cursor:pointer;text-align:left;transition:border-color .16s ease,transform .16s ease,background .16s ease}.lobby-action:hover{border-color:#75eaffd1;background:linear-gradient(155deg,#265c84bd,#081d39f5);transform:translateY(-3px)}.lobby-action.is-primary{border-color:#ffe66d94;background:linear-gradient(155deg,#6e5926b8,#28251ef0)}.action-icon{display:grid;width:1.7rem;height:1.7rem;margin-bottom:.62rem;border-radius:.48rem;background:#75eaff29;color:#75eaff;font-size:1rem;font-weight:950;place-items:center}.lobby-action.is-primary .action-icon{background:#ffe66d2b;color:#ffe66d}.lobby-action strong,.lobby-action small{display:block}.lobby-action strong{font-size:.63rem;letter-spacing:.075em}.lobby-action small{margin-top:.3rem;color:#9bb2cf;font-size:.57rem;font-weight:650;line-height:1.35}.room-panel{display:grid;gap:.68rem;margin-top:1rem;padding:1rem;border:1px solid rgba(117,234,255,.35);border-radius:.85rem;background:#030f22b8}.room-panel[hidden]{display:none}.room-code{color:#ffe66d;font-size:clamp(1.5rem,6vw,2.25rem);font-variant-numeric:tabular-nums;letter-spacing:.2em}.room-panel p{margin:0;color:#a4bad5;font-size:.68rem;line-height:1.45}.room-panel-actions,.join-controls{display:flex;align-items:center;justify-content:center;gap:.55rem}.ghost-button{padding:.72rem .76rem;border:1px solid rgba(160,222,255,.36);border-radius:.58rem;background:transparent;color:#dff7ff;cursor:pointer;font-size:.57rem;font-weight:900;letter-spacing:.08em}.ghost-button:hover{border-color:#75eaff;background:#75eaff1a}.join-panel{text-align:left}.join-controls input{flex:1;min-width:0;padding:.74rem .72rem;text-transform:uppercase}.join-controls .start-button{flex:0 0 auto;padding:.78rem .82rem .78rem .95rem;font-size:.6rem}.supabase-panel{text-align:left}.supabase-config-form{display:grid;gap:.46rem}.supabase-config-form label{margin-top:.28rem;color:#8bc5e8;font-size:.56rem;font-weight:900;letter-spacing:.12em}.supabase-config-form input{width:100%;min-width:0;padding:.72rem;border:1px solid rgba(148,219,255,.32);border-radius:.52rem;outline:none;background:#020d1fb8;color:#f8fcff;font:inherit;font-size:.7rem;font-weight:700;transition:border-color .16s ease,box-shadow .16s ease}.supabase-config-form input:focus{border-color:#75eaff;box-shadow:0 0 0 3px #75eaff1f}.online-status{margin:.94rem 0 0;color:#7795b9;font-size:.6rem;line-height:1.45}.online-settings-button{margin-top:.6rem;padding:.46rem .62rem;border:0;background:transparent;color:#75eaff;cursor:pointer;font-size:.56rem;font-weight:900;letter-spacing:.1em;text-decoration:underline;text-decoration-color:#75eaff80;text-underline-offset:.25rem}.online-settings-button:hover{color:#ffe66d}@media(max-width:640px){:root{--kill-feed-top: 6rem;--kill-feed-stack-height: 9.8rem}.topbar{grid-template-columns:1fr auto}.brand-kicker{font-size:.52rem}.round-clock{grid-column:2;grid-row:1;min-width:5.6rem;padding-inline:.68rem}.icon-button{position:static;width:2.25rem;height:2.25rem;font-size:1.12rem}.topbar-actions{position:absolute;top:3.65rem;right:0}.text-button{padding:.48rem .56rem;font-size:.54rem}.match-card{top:5.9rem;right:.55rem;width:min(8.8rem,calc(50vw - .75rem));border-radius:.5rem}.kill-feed{top:7.1rem;right:auto;left:.55rem;width:min(9.8rem,calc(50vw - .75rem))}.kill-feed-entry{min-width:0;padding:.34rem .42rem;font-size:.56rem}.powerup-card{top:4.1rem;left:.55rem;width:min(8.6rem,calc(50vw - .75rem));padding:.42rem .5rem;border-radius:.45rem}.powerup-card strong{font-size:.56rem}.powerup-card>span:last-child{font-size:.54rem}.leaderboard-row{grid-template-columns:1.1rem .42rem minmax(0,1fr) auto;gap:.2rem;min-height:1.18rem;font-size:.46rem}.card-heading,.match-note{padding-right:.42rem;padding-left:.42rem}.card-heading{min-height:1.35rem;font-size:.44rem}.connection-label{font-size:.38rem}.player-rank,.player-score{font-size:.42rem}.player-swatch{width:.32rem;height:.32rem}.match-note{display:none}.control-strip{gap:.42rem .7rem;font-size:.55rem}.control-tip{display:none}.event-toast{bottom:6.9rem;max-width:12.5rem;padding:.55rem .68rem}.event-toast strong{font-size:.68rem}.event-toast span{font-size:.56rem}.lobby-card{padding:1.35rem}.lobby-actions{grid-template-columns:1fr}.lobby-action{grid-template-columns:auto 1fr;min-height:0;align-items:center;column-gap:.75rem}.action-icon{grid-row:span 2;margin:0}.room-panel-actions,.join-controls{align-items:stretch;flex-direction:column}.join-controls .start-button{justify-content:center}}@media(max-width:640px),(hover:none)and (pointer:coarse){.touch-controls{right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));left:1rem;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.touch-dash,.touch-joystick{width:4.6rem;height:4.6rem;border:1px solid rgba(178,241,255,.72);border-radius:50%;background:#05112794;box-shadow:inset 0 0 0 .35rem #3fcfff1f,0 0 1.4rem #1bd2ff33;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}.touch-dash{color:#fff4bd;font-size:.64rem;font-weight:900;letter-spacing:.08em}.touch-dash:active{transform:scale(.94);background:#ff70b885}.touch-joystick{position:relative}.touch-joystick:before,.touch-joystick:after{position:absolute;top:50%;left:50%;background:#c3f5ff38;content:"";transform:translate(-50%,-50%)}.touch-joystick:before{width:72%;height:1px}.touch-joystick:after{width:1px;height:72%}.touch-joystick-knob{position:absolute;top:50%;left:50%;width:1.6rem;height:1.6rem;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:#6fe3ffc2;box-shadow:0 0 .8rem #52e0ffa3;transform:translate(calc(-50% + var(--stick-x, 0rem)),calc(-50% + var(--stick-y, 0rem)))}.control-strip{display:none}.brand-kicker,.match-note,.powerup-card>span:last-child{display:none}}@media(max-width:720px)and (max-height:640px){.powerup-card{display:none}.kill-feed{top:4.65rem;right:auto;left:.75rem;width:min(12rem,calc(50vw - 1rem))}.match-card{top:4.65rem;right:.75rem;width:13.2rem}.card-heading{padding-top:.45rem;padding-bottom:.45rem}.leaderboard{gap:0;padding:.2rem}.leaderboard-row{grid-template-columns:1.4rem .5rem 1fr auto;gap:.3rem;min-height:1.42rem;font-size:.54rem}.match-note{display:none}.control-strip{right:14.5rem;bottom:.45rem;left:.75rem;justify-content:flex-start;gap:.2rem .35rem;font-size:.45rem;text-align:left}.control-strip kbd{min-width:.95rem;min-height:.95rem;padding:.03rem .16rem;font-size:.44rem}.touch-dash,.touch-joystick{width:3.85rem;height:3.85rem}}@media(max-width:640px){.match-card{top:8.8rem;right:.55rem;width:min(8.8rem,calc(50vw - .75rem))}.kill-feed{top:7.1rem;right:auto;left:.55rem;width:min(9.8rem,calc(50vw - .75rem))}.powerup-card{top:4.1rem;left:.55rem;display:grid;width:min(8.6rem,calc(50vw - .75rem))}}