:root{--bg-0: #05070c;--bg-1: #0b1018;--bg-2: #0e1420;--ink: #eef3f8;--ink-dim: #9fb0c3;--muted: #64758a;--neon: #00e5ff;--neon-2: #7cfcff;--gold: #ffb545;--blue: #3d7dff;--red: #ff4d4d;--green: #3dffb0;--panel: rgba(14, 20, 32, .78);--panel-2: rgba(18, 26, 40, .9);--line: rgba(0, 229, 255, .2);--line-soft: rgba(255, 255, 255, .08);--shadow: 0 18px 48px rgba(0, 0, 0, .55);--radius: 18px;--radius-sm: 12px;--font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%}body{font-family:var(--font);color:var(--ink);background:radial-gradient(ellipse at 50% -10%,#10243a 0%,var(--bg-1) 45%,var(--bg-0) 100%),var(--bg-0);background-attachment:fixed;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden}#app{position:relative;min-height:100dvh}.conn{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink-dim);box-shadow:var(--shadow)}.conn .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}.conn.ok .dot{background:var(--green)}.screen{max-width:1080px;margin:0 auto;padding:clamp(18px,4vw,44px) clamp(16px,4vw,32px) 64px;min-height:100dvh;display:flex;flex-direction:column;gap:22px}.brand{text-align:center;margin-top:clamp(10px,5vh,48px)}.brand-title{font-size:clamp(32px,7vw,56px);font-weight:800;letter-spacing:.02em;text-shadow:0 0 24px rgba(0,229,255,.35)}.brand-title .accent{color:var(--neon)}.brand-sub{color:var(--ink-dim);margin-top:8px;letter-spacing:.04em;font-size:clamp(13px,2.6vw,16px)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(6px);padding:clamp(18px,3vw,28px)}.menu-card{width:min(440px,100%);margin:0 auto;display:flex;flex-direction:column;gap:18px}.menu-actions{display:flex;flex-direction:column;gap:12px}.join-row{display:flex;gap:10px}.join-row .input-code{flex:1;text-align:center;letter-spacing:.35em;text-transform:uppercase;font-weight:700}.rejoin-banner{width:min(440px,100%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;border-color:#ffb54559}.rejoin-actions{display:flex;gap:8px;flex-shrink:0}.field{display:flex;flex-direction:column;gap:7px}.field-label{font-size:13px;color:var(--ink-dim);letter-spacing:.03em}.input{width:100%;background:#00000052;border:1px solid var(--line-soft);border-radius:var(--radius-sm);color:var(--ink);font-size:16px;padding:13px 15px;transition:border-color .15s,box-shadow .15s;font-family:inherit}.input::placeholder{color:#5c6a7c}.input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px #00e5ff2e}.btn{font-family:inherit;font-size:15px;font-weight:600;border:1px solid transparent;border-radius:var(--radius-sm);padding:12px 18px;cursor:pointer;transition:transform .1s,filter .15s,background .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:var(--neon);color:#04151c}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-secondary{background:var(--panel-2);border-color:var(--line);color:var(--ink)}.btn-secondary:hover:not(:disabled){border-color:var(--neon)}.btn-ghost{background:transparent;border-color:var(--line-soft);color:var(--ink-dim)}.btn-ghost:hover:not(:disabled){border-color:var(--line);color:var(--ink)}.btn-gold{background:var(--gold);color:#2a1700}.btn-gold:hover:not(:disabled){filter:brightness(1.08)}.btn-big{width:100%;padding:15px 18px;font-size:16px}.btn-small{padding:8px 12px;font-size:13px;width:100%;margin-top:10px}.btn-back{padding:10px 14px}.btn-copy{background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:15px;margin-left:6px}.btn-copy:hover{color:var(--neon)}.btn-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--line-soft);color:var(--ink-dim);border-radius:50%;font-size:18px;line-height:1;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}.btn-icon:hover{border-color:var(--neon);color:var(--neon)}.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#020408b8;backdrop-filter:blur(2px)}.modal-panel{position:relative;width:min(420px,100%);max-height:86vh;overflow-y:auto;display:flex;flex-direction:column;gap:18px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-head h3{font-size:18px}.slider{width:100%;accent-color:var(--neon);height:6px;cursor:pointer}.keybinds-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.keybind-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 10px}.keybind-label{flex:1;font-size:13px;color:var(--ink-dim)}.keybind-key{min-width:90px;text-align:center;font-size:13px;font-weight:700;color:var(--ink);background:#00000047;border-radius:8px;padding:4px 8px}.keybind-key.listening{color:var(--gold)}.keybind-row .btn-small{width:auto;margin-top:0;flex-shrink:0}.game-topbar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;padding:14px;pointer-events:none}.game-topbar-left,.game-topbar-right{display:flex;align-items:center;gap:8px;pointer-events:auto}.game-topbar-host-btn{font-size:13px;padding:10px 14px}.topbar{display:flex;align-items:center;gap:14px}.topbar-title{flex:1;text-align:center;font-size:18px}.code-badge{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--ink-dim);letter-spacing:.05em}.code-badge strong{color:var(--neon);font-size:16px}.lobby-list{display:flex;flex-direction:column;gap:10px}.lobby-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 18px}.lobby-row .meta{flex:1}.r-title{font-weight:600}.r-code{color:var(--neon);letter-spacing:.1em}.r-sub{color:var(--muted);font-size:13px;margin-top:2px}.empty{color:var(--muted);text-align:center;padding:40px 0}.pill{background:#ffffff0f;border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ink-dim)}.pill.live{color:var(--gold);border-color:#ffb54566}#screen-lobby{max-width:1000px}.lobby-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(240px,340px);gap:18px}@media (max-width: 720px){.lobby-grid{grid-template-columns:1fr}}.teams-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media (max-width: 560px){.teams-panel{grid-template-columns:1fr}}.team-col{display:flex;flex-direction:column}.team-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.team-title{font-size:15px}.team-blue{color:var(--blue)}.team-red{color:var(--red)}.color-picker{display:flex;gap:6px;margin-bottom:10px}.swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-soft);cursor:pointer;padding:0}.swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px #ffffff26}.swatch:disabled{cursor:not-allowed;opacity:.3}.player-list{list-style:none;display:flex;flex-direction:column;gap:6px;min-height:40px}.player-item{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:8px 10px;font-size:14px}.player-item.me{border-color:var(--neon)}.player-item.off{opacity:.5}.avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink-dim)}.p-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-host,.p-leader{color:var(--gold);font-size:13px}.ready-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0}.ready-dot.on{background:var(--green);box-shadow:0 0 8px #3dffb0b3}.panel-title{font-size:15px;margin-bottom:14px;color:var(--ink-dim);letter-spacing:.03em}.settings-body{display:flex;flex-direction:column;gap:16px}.opt{display:flex;flex-direction:column;gap:8px}.opt-label{font-size:13px;color:var(--ink-dim)}.opt-value{color:var(--neon);font-weight:700}.readonly-note{font-size:12px;color:var(--muted);margin-top:4px}.seg{display:flex;flex-wrap:wrap;gap:6px}.seg-btn{background:var(--panel-2);border:1px solid var(--line-soft);color:var(--ink-dim);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;cursor:pointer;font-family:inherit}.seg-btn.active{background:var(--neon);border-color:var(--neon);color:#04151c;font-weight:700}.seg-btn:disabled{cursor:default;opacity:.6}.seg.readonly .seg-btn{cursor:default}.lobby-footer{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px}.lobby-footer .btn-big{max-width:320px}.start-hint{color:var(--muted);font-size:13px}.screen-game{max-width:none;padding:0;gap:0}.game-mount{position:fixed;inset:0}.game-mount canvas{display:block}.game-hud{position:fixed;inset:0;pointer-events:none}.hud-topbar{position:absolute;top:0;left:50%;transform:translate(-50%);display:flex;align-items:flex-start}.hud-score{min-width:70px;text-align:center;background:#080c14bf;border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;padding:10px 22px 8px;font-size:22px;font-weight:800;letter-spacing:.04em;backdrop-filter:blur(6px)}.hud-score.team-blue{color:var(--blue)}.hud-score.team-red{color:var(--red)}.hud-timer{position:relative;z-index:2;margin:0 -6px;min-width:108px;text-align:center;background:#060a12e6;border:1px solid var(--neon);border-top:none;border-radius:0 0 20px 20px;padding:16px 28px 13px;font-size:32px;font-weight:900;letter-spacing:.05em;color:var(--ink);backdrop-filter:blur(6px);box-shadow:0 8px 20px #0006}.hud-boost{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;background:#080c14b8;border:1px solid var(--line);border-radius:var(--radius);padding:12px 10px;backdrop-filter:blur(6px)}.hud-boost-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-dim)}.hud-boost-track{position:relative;width:14px;height:140px;border-radius:999px;background:#ffffff14;border:1px solid var(--line-soft);overflow:hidden}.hud-boost-fill{position:absolute;bottom:0;left:0;width:100%;height:100%;border-radius:999px;background:linear-gradient(180deg,var(--neon-2),var(--neon));box-shadow:0 0 12px #00e5ff80;transition:height .12s ease-out}.hud-boost-value{font-size:15px;font-weight:800;color:var(--ink)}.hud-countdown{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(72px,14vw,140px);font-weight:900;color:var(--ink);letter-spacing:.02em;text-shadow:0 0 40px rgba(0,229,255,.6),0 4px 16px rgba(0,0,0,.5);animation:hud-countdown-pop .6s ease-out}@keyframes hud-countdown-pop{0%{transform:translate(-50%,-50%) scale(1.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.matchend-panel{margin:auto;text-align:center;max-width:460px;padding:clamp(28px,5vw,44px) clamp(24px,5vw,40px);display:flex;flex-direction:column;align-items:center;gap:20px}.matchend-title{font-size:clamp(28px,5vw,40px);font-weight:900;letter-spacing:.03em;color:var(--ink)}.matchend-title.team-blue{color:var(--blue)}.matchend-title.team-red{color:var(--red)}.matchend-score{display:flex;align-items:center;gap:14px;font-size:clamp(48px,9vw,72px);font-weight:900;letter-spacing:.04em}.matchend-score-blue{color:var(--blue)}.matchend-score-red{color:var(--red)}.matchend-score-sep{color:var(--muted);font-weight:400}.hud-goal-popup{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:22px 48px;border-radius:var(--radius);background:#060a12d1;border:2px solid var(--neon);box-shadow:0 0 40px #00e5ff59;animation:hud-goal-pop .35s ease-out}.hud-goal-popup.team-blue{border-color:var(--blue);box-shadow:0 0 40px #3d7dff66}.hud-goal-popup.team-red{border-color:var(--red);box-shadow:0 0 40px #ff4d4d66}.hud-goal-title{font-size:44px;font-weight:900;letter-spacing:.08em;color:var(--ink)}.hud-goal-speed{font-size:15px;font-weight:700;color:var(--neon-2);margin-top:2px;letter-spacing:.03em}.hud-goal-scorer{font-size:16px;color:var(--ink-dim);margin-top:4px}.hud-goal-scorer.own-goal{color:var(--gold);font-weight:700}.hud-goal-score{font-size:26px;font-weight:700;margin-top:10px;color:var(--gold)}@keyframes hud-goal-pop{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.toasts{position:fixed;bottom:18px;left:50%;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center}.toast{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-sm);padding:10px 18px;font-size:14px;box-shadow:var(--shadow)}.toast.error{border-color:#ff4d4d80;color:#ffb3b3}.muted{color:var(--muted)}