:root{--bg: #0a0e16;--bg-2: #0f1420;--panel: rgba(18, 24, 38, .88);--panel-border: rgba(255, 255, 255, .08);--text: #eef3ff;--muted: #93a0bd;--teal: #3ee6c8;--violet: #8b6bff;--gold: #f7c948;--danger: #ff5d5d;--radius: 16px}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%}body{background:radial-gradient(circle at 20% 12%,rgba(62,230,200,.1),transparent 32%),radial-gradient(circle at 82% 88%,rgba(139,107,255,.12),transparent 32%),var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;min-height:100vh;overflow-x:hidden}#app{min-height:100vh;position:relative}button,input{font:inherit}.conn{position:fixed;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:#141824eb;border:1px solid var(--panel-border);padding:7px 14px;border-radius:999px;font-size:13px;color:var(--muted);z-index:500}.conn .dot{width:8px;height:8px;border-radius:50%;background:var(--danger)}.conn.ok .dot{background:var(--teal)}.screen{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;padding:48px 20px 32px}.menu-glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(62,230,200,.14),transparent 60%)}.brand{position:relative;z-index:1;text-align:center;margin-bottom:28px}.brand-logo{display:block;width:min(560px,92vw);height:auto;margin:0 auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}.brand-sub{color:var(--muted);margin-top:6px;letter-spacing:.03em;font-size:clamp(13px,2.6vw,16px)}.hex{stroke-width:3}.hex-n{fill:#ffffff0a;stroke:#ffffff38}.hex-a{fill:#3ee6c838;stroke:var(--teal);filter:drop-shadow(0 0 10px rgba(62,230,200,.65));animation:hex-pulse 2.6s ease-in-out infinite}.hex-b{fill:#8b6bff38;stroke:var(--violet);filter:drop-shadow(0 0 10px rgba(139,107,255,.65));animation:hex-pulse 2.6s ease-in-out infinite;animation-delay:1.3s}@keyframes hex-pulse{0%,to{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@media (prefers-reduced-motion: reduce){.hex-a,.hex-b{animation:none}}.panel{position:relative;z-index:1;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(10px)}.menu-card{width:min(420px,92vw);padding:24px;display:flex;flex-direction:column;gap:16px;margin-top:8px}.rejoin-banner{width:min(420px,92vw);padding:16px 20px;margin-bottom:16px;text-align:center}.rejoin-banner p{margin-bottom:10px;color:var(--muted)}.rejoin-actions{display:flex;gap:10px;justify-content:center}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.input{background:#ffffff0d;border:1px solid var(--panel-border);color:var(--text);border-radius:10px;padding:12px 14px;font-size:15px;outline:none;transition:border-color .15s}.input:focus{border-color:var(--teal)}.input-code{text-transform:uppercase;letter-spacing:.2em;text-align:center;font-weight:700}.menu-actions{display:flex;flex-direction:column;gap:10px}.join-row{display:flex;gap:10px}.join-row .input-code{flex:1;min-width:0}.btn{border:none;border-radius:10px;padding:12px 18px;cursor:pointer;font-weight:700;font-size:14px;letter-spacing:.01em;transition:transform .1s,filter .15s,opacity .15s;color:var(--text)}.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(120deg,var(--teal),#26b3a0);color:#052420}.btn-secondary{background:#ffffff1a}.btn-ghost{background:transparent;border:1px solid var(--panel-border)}.btn-gold{background:linear-gradient(120deg,var(--gold),#d69f1f);color:#3a2a00}.btn-big{padding:15px 20px;font-size:15px;width:100%}.btn-icon{background:#ffffff14;border:none;color:var(--text);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:16px}.btn-copy{background:none;border:none;color:var(--teal);cursor:pointer;font-size:15px;margin-left:6px}.btn-back{padding:10px 14px}.topbar{width:min(760px,96vw);display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;z-index:1}.topbar-title{font-size:18px;font-weight:700}.code-badge{background:#ffffff0f;border:1px solid var(--panel-border);padding:8px 16px;border-radius:999px;font-size:14px;color:var(--muted)}.code-badge strong{color:var(--gold);letter-spacing:.15em;margin-left:4px}.lobby-list{width:min(760px,96vw);display:flex;flex-direction:column;gap:10px;z-index:1}.lobby-list .empty{text-align:center;color:var(--muted);padding:40px 0}.lobby-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:14px 18px}.lobby-row .meta{min-width:0}.r-title{font-weight:700}.r-code{color:var(--teal);letter-spacing:.12em}.r-sub{color:var(--muted);font-size:13px;margin-top:2px}.pill{background:#ffffff14;border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted)}.pill.live{background:#ff5d5d2e;color:var(--danger)}.lobby-grid{width:min(760px,96vw);display:grid;grid-template-columns:1.1fr 1fr;gap:18px;z-index:1}@media (max-width: 720px){.lobby-grid{grid-template-columns:1fr}}.players-panel,.settings-panel{padding:18px}.panel-title{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}.player-list{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto}.player-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#ffffff08}.player-swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0}.player-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-tag{font-size:11px;color:var(--muted);border:1px solid var(--panel-border);border-radius:999px;padding:2px 8px}.player-tag.ready{color:var(--teal);border-color:var(--teal)}.player-tag.host{color:var(--gold);border-color:var(--gold)}.player-tag.offline{color:var(--danger);border-color:var(--danger)}.settings-body{display:flex;flex-direction:column;gap:14px}.opt{display:flex;flex-direction:column;gap:6px}.opt-label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}.opt-value{color:var(--text);font-weight:700}.slider{width:100%;accent-color:var(--teal)}.readonly-note{font-size:12px;color:var(--muted)}.grid-preview{margin-top:14px;font-size:13px;color:var(--muted);background:#ffffff0a;border-radius:10px;padding:10px 12px}.grid-preview b{color:var(--teal)}.lobby-footer{width:min(760px,96vw);display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;z-index:1}.lobby-footer .btn{max-width:320px}.start-hint{color:var(--muted);font-size:13px;min-height:16px}.matchend-panel{width:min(460px,92vw);padding:32px;text-align:center;margin-top:60px}.matchend-title{font-size:30px;margin-bottom:18px;background:linear-gradient(120deg,var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}.matchend-ranking{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}.rank-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#ffffff0a;text-align:left}.rank-row.first{background:#f7c9481f;border:1px solid rgba(247,201,72,.4)}.rank-pos{font-weight:800;color:var(--muted);width:22px}.rank-row.first .rank-pos{color:var(--gold)}.rank-swatch{width:12px;height:12px;border-radius:4px}.rank-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-pct{color:var(--muted);font-variant-numeric:tabular-nums}.screen-game{padding:0;display:block}.game-mount{position:fixed;inset:0;background:#05070c}.game-mount canvas{display:block;width:100%;height:100%}.game-hud{position:fixed;inset:0;pointer-events:none;z-index:20}.hud-timer{position:absolute;top:16px;left:50%;transform:translate(-50%);background:#0a0e16bf;border:1px solid var(--panel-border);border-radius:12px;padding:8px 20px;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.03em}.hud-timer.low{color:var(--danger)}.hud-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(64px,16vw,160px);font-weight:900;color:var(--teal);text-shadow:0 0 40px rgba(62,230,200,.6)}.hud-leaderboard{position:absolute;top:16px;right:16px;width:220px;background:#0a0e16bf;border:1px solid var(--panel-border);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.hud-lb-row{display:flex;align-items:center;gap:8px;font-size:13px}.hud-lb-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}.hud-lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-lb-bar{flex:1;height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}.hud-lb-bar span{display:block;height:100%;border-radius:3px}.hud-lb-pct{width:36px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.hud-lb-row.me .hud-lb-name{color:var(--text);font-weight:700}.hud-minimap{position:absolute;bottom:16px;right:16px;border-radius:12px;overflow:hidden;border:1px solid var(--panel-border);background:#0a0e16bf}.hud-status{position:absolute;bottom:16px;left:16px;display:flex;gap:8px}.hud-badge{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:#0a0e16cc;border:1px solid var(--panel-border);font-size:12px;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}.hud-badge.show{opacity:1;transform:translateY(0)}.hud-badge.stun{color:var(--danger)}.hud-badge.speed{color:var(--teal)}.hud-badge.shield{color:#6bb8ff}.hud-badge.invert{color:var(--violet)}.hud-toplay{position:absolute;top:16px;left:16px}.hud-exit{pointer-events:auto}.game-hud.inverted:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:30;box-shadow:inset 0 0 0 6px #8b6bff8c,inset 0 0 90px 20px #8b6bff59;animation:invert-pulse .9s ease-in-out infinite}@keyframes invert-pulse{0%,to{opacity:.7}50%{opacity:1}}.hud-event-feed{position:absolute;top:70px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:min(360px,90vw)}.hud-event{background:#0a0e16d1;border:1px solid var(--panel-border);border-radius:999px;padding:6px 16px;font-size:12px;color:var(--text);opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}.hud-event.show{opacity:1;transform:translateY(0)}.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}.modal-backdrop{position:absolute;inset:0;background:#0009}.modal-panel{position:relative;width:min(420px,92vw);padding:22px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.modal-head{display:flex;align-items:center;justify-content:space-between}.toasts{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:400}.toast{background:#121826f2;border:1px solid var(--panel-border);border-radius:10px;padding:10px 16px;font-size:14px}.toast.error{border-color:var(--danger);color:var(--danger)}.muted{color:var(--muted)}