:root{color:#eefcff;font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;--cyan:#6bf2ff;--amber:#ffcf7a;--glass:#d8fcff24;background:#061014;font-family:Geist,Plus Jakarta Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}#app{grid-template-rows:auto minmax(0,1fr);display:grid}body{background:radial-gradient(circle at 50% 42%,#3abcff2e,#0000 34rem),radial-gradient(circle at 18% 18%,#ffc4701f,#0000 22rem),linear-gradient(135deg,#071216 0%,#09191c 48%,#041013 100%)}#game{cursor:none;touch-action:none;grid-row:2;width:100%;min-width:0;height:100%;min-height:0;display:block}.hud{z-index:2;pointer-events:none;color:#eefcffeb;text-shadow:0 0 24px #6bf2ff42;grid-row:1;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 28px 10px;display:grid;position:relative}.score-row{grid-template-columns:1fr auto 1fr;align-items:start;gap:18px;display:grid}.player-tag,.match-core,.readout,.ladder-panel,.online-panel,.connection-panel{outline-offset:-1px;background:#0310145c;border-radius:999px;outline:1px solid #d6fcff24;box-shadow:inset 0 1px #ffffff29,0 0 28px #6bf2ff14}.player-tag{letter-spacing:.18em;justify-content:space-between;justify-self:start;align-items:center;gap:18px;min-width:118px;padding:10px 14px;font-size:11px;font-weight:700;display:inline-flex}.player-tag--away{justify-self:end}.player-tag strong{letter-spacing:0;font-size:30px;line-height:1}.player-tag--home strong{color:var(--cyan)}.player-tag--away strong{color:var(--amber)}.player-tag.is-score-pulse,.match-core.is-score-pulse{animation:.46s cubic-bezier(.2,.9,.18,1) score-slam}.match-core{text-align:center;justify-items:center;gap:3px;min-width:180px;padding:10px 18px;display:grid}.match-core span{letter-spacing:.22em;color:#eefcff8f;font-size:10px}.match-core strong{letter-spacing:.12em;font-size:14px}.readout{grid-template-columns:1fr 1fr;justify-self:center;gap:14px;width:min(460px,100vw - 48px);padding:10px 14px;display:grid}.readout div{grid-template-columns:42px 1fr;align-items:center;gap:10px;display:grid}.readout span{letter-spacing:.2em;color:#eefcff99;font-size:10px}.ladder-panel{grid-template-columns:auto minmax(0,1fr);justify-self:center;align-items:center;gap:14px;width:min(560px,100vw - 48px);min-height:38px;padding:8px 14px;display:grid}.ladder-panel.is-hidden{display:none}.ladder-panel.is-paused{opacity:.72}.ladder-panel__status{align-items:baseline;gap:10px;min-width:0;display:flex}.ladder-panel__status span,.ladder-panel__progress span,.ladder-panel__progress strong{letter-spacing:.14em;white-space:nowrap;font-size:10px;font-weight:800}.ladder-panel__status span{color:#6bf2ffd1}.ladder-panel__status strong{color:#eefcffe6;letter-spacing:.12em;overflow-wrap:anywhere;min-width:0;font-size:11px}.ladder-panel__progress{grid-template-columns:minmax(92px,160px) auto auto;justify-content:end;align-items:center;gap:10px;min-width:0;display:grid}.ladder-panel__progress span{color:#eefcffa3}.ladder-panel__progress strong{color:#ffcf7adb}.online-panel{pointer-events:auto;grid-template-columns:auto minmax(0,1fr);justify-self:center;align-items:center;gap:12px;width:min(680px,100vw - 48px);min-height:38px;padding:8px 10px 8px 14px;display:grid}.online-panel__status{align-items:baseline;gap:10px;min-width:0;display:flex}.online-panel__status span{letter-spacing:.16em;color:#ffcf7adb;white-space:nowrap;font-size:10px;font-weight:800}.online-panel__status strong{letter-spacing:.12em;color:#eefcffb8;overflow-wrap:anywhere;min-width:0;font-size:10px}.online-panel__controls{justify-content:end;align-items:center;gap:8px;min-width:0;display:flex}.online-panel__controls.is-hidden{display:none}.online-panel__join{grid-template-columns:minmax(54px,74px) auto;align-items:center;gap:6px;min-width:126px;display:grid}.online-panel input{appearance:none;color:#eefcffeb;outline-offset:-1px;width:100%;height:26px;font:inherit;letter-spacing:.08em;text-transform:uppercase;background:#eefcff1a;border:0;border-radius:999px;outline:1px solid #d6fcff2e;padding:0 10px;font-size:11px;font-weight:800}.online-panel input::placeholder{color:#eefcff6b}.online-panel button{appearance:none;color:#eefcffdb;outline-offset:-1px;min-height:26px;font:inherit;letter-spacing:.1em;white-space:nowrap;cursor:pointer;background:#eefcff1f;border:0;border-radius:999px;outline:1px solid #d6fcff33;padding:0 10px;font-size:9px;font-weight:800}.online-panel button:hover,.online-panel button:focus-visible,.online-panel input:focus-visible{color:#eefcfff5;background:#6bf2ff29;outline-color:#6bf2ff70}.connection-panel{pointer-events:auto;justify-content:center;justify-self:center;align-items:center;gap:12px;width:min(520px,100vw - 48px);min-height:36px;padding:8px 10px 8px 14px;display:flex}.connection-panel.is-hidden{display:none}.connection-panel.has-direct-failure{outline-color:#ffcf7a6b;box-shadow:inset 0 1px #ffffff2e,0 0 30px #ffcf7a1a,0 0 34px #6bf2ff14}.connection-panel__copy{align-items:baseline;gap:10px;min-width:0;display:flex}.connection-panel__copy span{letter-spacing:.16em;color:#6bf2ffdb;white-space:nowrap;font-size:10px;font-weight:800}.connection-panel__copy strong{letter-spacing:.12em;color:#eefcffad;overflow-wrap:anywhere;min-width:0;font-size:10px}.connection-panel__actions{align-items:center;gap:8px;display:flex}.connection-panel button{appearance:none;color:#eefcffdb;outline-offset:-1px;min-height:24px;font:inherit;letter-spacing:.1em;cursor:pointer;background:#eefcff1f;border:0;border-radius:999px;outline:1px solid #d6fcff33;padding:0 10px;font-size:9px;font-weight:800}.connection-panel button:hover,.connection-panel button:focus-visible{color:#eefcfff5;background:#6bf2ff29}.match-panel{color:#eefcffeb;outline-offset:-1px;pointer-events:auto;background:#031014b3;border-radius:8px;outline:1px solid #d6fcff2e;justify-self:center;justify-items:center;gap:8px;width:min(420px,100vw - 48px);padding:14px 18px;display:grid;box-shadow:inset 0 1px #ffffff29,0 16px 52px #00000042,0 0 36px #6bf2ff1a}.match-panel.is-hidden{display:none}.match-panel span{letter-spacing:.18em;color:#ffcf7adb;font-size:10px;font-weight:800}.match-panel strong{letter-spacing:0;font-size:28px;line-height:1}.match-panel p{color:#eefcffad;letter-spacing:.12em;text-align:center;margin:0;font-size:10px;font-weight:800}.match-panel__actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.match-panel button{appearance:none;color:#eefcffeb;outline-offset:-1px;min-height:30px;font:inherit;letter-spacing:.12em;cursor:pointer;background:#6bf2ff26;border:0;border-radius:999px;outline:1px solid #d6fcff38;padding:0 14px;font-size:9px;font-weight:800}.match-panel button:hover,.match-panel button:focus-visible{background:#ffcf7a2e}meter{background:#ffffff1f;border:0;border-radius:999px;width:100%;height:6px;overflow:hidden}meter::-webkit-meter-bar{background:#ffffff1f;border:0;border-radius:999px}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg, var(--cyan), var(--amber));border-radius:999px}meter::-moz-meter-bar{background:linear-gradient(90deg, var(--cyan), var(--amber));border-radius:999px}.audio-toggle{appearance:none;color:#eefcffb8;outline-offset:-1px;width:124px;min-height:34px;font:inherit;letter-spacing:.16em;text-align:center;cursor:pointer;pointer-events:auto;background:#03101470;border:0;border-radius:999px;outline:1px solid #d6fcff29;justify-self:center;padding:0 14px;font-size:10px;font-weight:800;box-shadow:inset 0 1px #ffffff29,0 0 28px #6bf2ff14}.audio-toggle.is-on{color:#eefcfff2;box-shadow:inset 0 1px #fff3,0 0 30px #ffcf7a1f,0 0 34px #6bf2ff1f}.audio-toggle:focus-visible{outline-offset:3px;outline:2px solid #6bf2ffad}.serve-hint{color:#eefcffe6;outline-offset:-1px;pointer-events:none;background:#03101470;border-radius:999px;outline:1px solid #d6fcff29;justify-items:center;gap:8px;padding:14px 20px;transition:transform .56s cubic-bezier(.32,.72,0,1),opacity .56s cubic-bezier(.32,.72,0,1);display:grid;position:fixed;bottom:42px;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffff29,0 0 38px #6bf2ff24}.serve-hint span{letter-spacing:.22em;color:#eefcff99;font-size:10px}.serve-hint strong{letter-spacing:.16em;font-size:13px}.serve-hint.is-hidden{opacity:0;transform:translate(-50%)translateY(18px)}.network-debug-overlay{z-index:4;color:#eefcffe6;outline-offset:-1px;font-variant-numeric:tabular-nums;pointer-events:none;background:#031014c2;border-radius:8px;outline:1px solid #d6fcff33;gap:10px;width:min(380px,100vw - 44px);max-height:min(72dvh,560px);padding:14px;display:grid;position:fixed;bottom:22px;left:22px;overflow:auto;box-shadow:inset 0 1px #ffffff24,0 16px 48px #0000003d,0 0 34px #6bf2ff1a}.network-debug-overlay__title{letter-spacing:.18em;color:#ffcf7ae6;font-size:10px;font-weight:800}.network-debug-overlay__grid{grid-template-columns:minmax(112px,auto) minmax(0,1fr);gap:6px 12px;margin:0;display:grid}.network-debug-overlay dt,.network-debug-overlay dd{min-width:0;margin:0;font-size:11px;line-height:1.35}.network-debug-overlay dt{color:#eefcff8f;letter-spacing:.12em;font-weight:800}.network-debug-overlay dd{overflow-wrap:anywhere;color:#eefcffeb}.network-debug-overlay.is-offline dd{color:#eefcffa8}@media (width<=700px){.hud{gap:10px;padding:14px 12px 8px}.score-row{grid-template-columns:1fr 1fr;gap:10px}.match-core{order:3;grid-column:1/-1;justify-self:center;min-width:156px;padding:8px 14px}.player-tag{width:100%;min-width:0;padding:9px 12px}.player-tag strong{font-size:24px}.readout{grid-template-columns:1fr;gap:8px;width:calc(100vw - 24px);padding:9px 12px}.ladder-panel{border-radius:18px;grid-template-columns:1fr;gap:8px;width:calc(100vw - 24px)}.ladder-panel__status,.ladder-panel__progress{justify-content:center}.ladder-panel__status{flex-wrap:wrap;gap:4px 10px}.ladder-panel__progress{grid-template-columns:minmax(92px,1fr) auto;gap:8px}.ladder-panel__progress strong{grid-column:1/-1;justify-self:center}.online-panel{border-radius:18px;grid-template-columns:1fr;justify-items:stretch;gap:8px;width:calc(100vw - 24px)}.online-panel__status,.online-panel__controls{flex-wrap:wrap;justify-content:center}.online-panel__join{min-width:136px}.connection-panel{border-radius:18px;flex-wrap:wrap;gap:8px;width:calc(100vw - 24px)}.connection-panel__copy{flex-wrap:wrap;justify-content:center;gap:4px 10px;width:100%}.connection-panel__actions{justify-content:center;width:100%}.audio-toggle{width:116px;min-height:32px;font-size:9px}.serve-hint{width:calc(100vw - 28px);bottom:18px}.network-debug-overlay{width:calc(100vw - 20px);max-height:44dvh;padding:12px;bottom:86px;left:10px}.network-debug-overlay__grid{grid-template-columns:minmax(104px,auto) minmax(0,1fr);gap:5px 10px}.network-debug-overlay dt,.network-debug-overlay dd{font-size:10px}}@media (height<=420px) and (orientation:landscape){:root{--compact-hud-width:clamp(270px, 34vw, 330px)}#app{grid-template-columns:var(--compact-hud-width) minmax(0, 1fr);grid-template-rows:minmax(0,1fr)}#game{grid-area:1/2}.hud{grid-area:1/1;grid-auto-rows:max-content;align-content:start;gap:8px;max-height:100dvh;padding:10px;overflow:auto}.score-row{grid-template-columns:1fr 1fr;gap:8px}.match-core{order:3;grid-column:1/-1;justify-self:stretch;min-width:0;padding:7px 12px}.player-tag{gap:10px;width:100%;min-width:0;padding:8px 10px;font-size:9px}.player-tag strong{font-size:22px}.readout{grid-template-columns:1fr;gap:6px;width:100%;padding:8px 10px}.readout div{grid-template-columns:38px 1fr}.ladder-panel{border-radius:8px;grid-template-columns:1fr;grid-auto-rows:max-content;gap:7px;width:100%;padding:8px 10px}.ladder-panel__status{flex-wrap:wrap;justify-content:center;gap:3px 8px}.ladder-panel__progress{grid-template-columns:minmax(74px,1fr) auto;justify-content:stretch;gap:7px}.ladder-panel__progress strong{grid-column:1/-1;justify-self:center}.online-panel{border-radius:8px;grid-template-columns:1fr;grid-auto-rows:max-content;place-items:stretch stretch;gap:8px;width:100%;height:auto;min-height:0;padding:9px 10px}.online-panel__status,.online-panel__controls{flex-wrap:wrap;justify-content:center}.online-panel__join{min-width:132px}.online-panel button{min-height:24px;padding:0 8px;font-size:8px}.connection-panel{border-radius:8px;flex-wrap:wrap;gap:8px;width:100%}.connection-panel__copy,.connection-panel__actions{flex-wrap:wrap;justify-content:center;width:100%}.audio-toggle{width:100%;min-height:30px;font-size:9px}.serve-hint{left:var(--compact-hud-width);width:min(390px, calc(100vw - var(--compact-hud-width) - 24px));margin:0 auto;bottom:12px;right:0;transform:none}.serve-hint.is-hidden{transform:translateY(18px)}}@keyframes score-slam{0%{filter:brightness();transform:translateY(0)scale(1)}38%{filter:brightness(1.85);transform:translateY(-2px)scale(1.08)}to{filter:brightness();transform:translateY(0)scale(1)}}