:root{--bg: #101418;--bg-deep: #0a0d10;--panel: #1a2028;--panel-hi: #242c38;--ink: #eef2e6;--ink-dim: #8a94a0;--accent: #d4ec3c;--accent-dark: #8fa31c;--p1: #9b4fd4;--p2: #e04848;--blue: #3a7bd4;--danger: #ff4040;--font: "Press Start 2P", "Courier New", monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg-deep);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-user-select:none;user-select:none}#root{height:100%}.app{height:100%;display:flex;align-items:center;justify-content:center;position:relative;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.015) 6px 7px),var(--bg-deep)}.credit-link{color:var(--bg-deep);background:var(--accent);border:2px solid var(--ink);box-shadow:3px 3px #00000073;padding:5px 7px 4px;font-size:8px;line-height:1.6;letter-spacing:1px;text-decoration:none;opacity:.92}.credit-link--icon{display:inline-flex;align-items:center;justify-content:center;background:#1877f2;padding:5px 6px 4px}.credit-link--icon .facebook-icon{display:block;width:12px;height:12px;fill:#fff}.site-footer{position:fixed;right:12px;bottom:10px;z-index:20;display:flex;align-items:stretch;gap:8px}.site-footer .credit-link:hover,.site-footer .credit-link:focus-visible{color:var(--bg-deep);opacity:1;transform:translate(-1px,-1px)}.site-footer .credit-link:focus-visible{outline:2px dashed var(--accent);outline-offset:3px}.screen{width:min(100vw,480px);height:100%;max-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 16px;overflow-y:auto;animation:screen-in .26s steps(6) both}.screen.game-screen{padding:0;overflow:hidden;justify-content:center}@keyframes screen-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.screen{animation:none}.px-title-ball,.blink,.marquee{animation:none!important}}.px-panel{background:var(--panel);border:3px solid var(--ink);box-shadow:inset 3px 3px #ffffff0f,inset -3px -3px #00000059,6px 6px #00000073;padding:16px;image-rendering:pixelated}.px-title{font-size:clamp(38px,13vw,64px);letter-spacing:2px;line-height:1;color:var(--accent);text-shadow:3px 3px 0 var(--accent-dark),6px 6px 0 rgba(0,0,0,.6);margin:0}.px-sub{font-size:9px;color:var(--ink-dim);letter-spacing:3px;margin-top:14px}.title-tagline{max-width:360px;text-align:center;line-height:1.8;padding:0 8px}.px-h2{font-size:14px;color:var(--accent);letter-spacing:1px;margin:0 0 14px;text-shadow:2px 2px 0 rgba(0,0,0,.6)}.px-label{font-size:8px;color:var(--ink-dim);letter-spacing:1px}.px-value{font-size:12px}.blink{animation:blink 1.1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.px-btn{font-family:var(--font);font-size:11px;letter-spacing:1px;color:var(--bg-deep);background:var(--accent);border:3px solid var(--ink);box-shadow:inset -3px -3px 0 var(--accent-dark),4px 4px #0000008c;padding:13px 18px 11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;text-transform:uppercase;transition:none}.px-btn:active{transform:translate(3px,3px);box-shadow:inset -3px -3px 0 var(--accent-dark),1px 1px #0000008c}.px-btn:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}.px-btn.secondary{background:var(--panel-hi);color:var(--ink);box-shadow:inset -3px -3px #0006,4px 4px #0000008c}.px-btn.danger{background:var(--danger);box-shadow:inset -3px -3px #8a1c1c,4px 4px #0000008c;color:#fff}.px-btn.small{font-size:9px;padding:9px 12px 8px;width:auto}.px-btn.auth-btn{font-size:8px;gap:8px;padding:12px 10px 10px;white-space:nowrap}.px-btn:disabled{opacity:.45;cursor:default}.menu-list{display:flex;flex-direction:column;gap:14px;width:100%;max-width:300px}.opt-row{display:flex;align-items:center;gap:8px;width:100%}.opt-row .opt-value{flex:1;text-align:center;font-size:10px;padding:12px 4px 10px;background:var(--bg);border:3px solid var(--ink);color:var(--accent);letter-spacing:1px;overflow:hidden;white-space:nowrap}.opt-arrow{font-family:var(--font);font-size:12px;background:var(--panel-hi);color:var(--ink);border:3px solid var(--ink);padding:11px 12px 9px;cursor:pointer;box-shadow:3px 3px #00000080}.opt-arrow:active{transform:translate(2px,2px);box-shadow:1px 1px #00000080}.field-row{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:16px}.px-input{font-family:var(--font);font-size:12px;letter-spacing:2px;background:var(--bg);color:var(--ink);border:3px solid var(--ink);padding:12px 10px 10px;width:100%;text-transform:uppercase}.px-input:focus{outline:3px dashed var(--accent);outline-offset:2px}.volume-row{display:grid;grid-template-columns:1fr 54px;align-items:center;gap:10px}.volume-value{font-size:10px;color:var(--accent);text-align:right;letter-spacing:1px}.px-range{width:100%;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}.px-range:focus{outline:3px dashed var(--accent);outline-offset:2px}.px-range::-webkit-slider-runnable-track{height:10px;background:var(--bg);border:3px solid var(--ink);box-shadow:inset 2px 2px #000}.px-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:22px;margin-top:-9px;background:var(--accent);border:3px solid var(--ink)}.px-range::-moz-range-track{height:10px;background:var(--bg);border:3px solid var(--ink);box-shadow:inset 2px 2px #000}.px-range::-moz-range-thumb{width:18px;height:22px;background:var(--accent);border:3px solid var(--ink);border-radius:0}.game-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}canvas.game-canvas{image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;display:block}.hud{position:absolute;top:6px;left:6px;display:flex;align-items:stretch;z-index:4;max-width:calc(100% - 156px);border:3px solid var(--ink);box-shadow:4px 4px #00000080;font-size:10px}.hud .pane{padding:8px 10px 7px;min-width:64px;max-width:82px;text-align:center;overflow:hidden}.hud .pane .who{font-size:7px;display:block;opacity:.9;letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud .pane .pts{font-size:20px;display:block;margin-top:4px}.hud .pane.p1{background:var(--p1)}.hud .pane.p2{background:var(--p2)}.hud .pane.serving{box-shadow:inset 0 0 0 3px var(--accent)}.hud .mid{background:var(--bg-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 8px;gap:4px;min-width:52px}.hud .mid .srv{color:var(--accent);font-size:7px;letter-spacing:1px;line-height:1.25;text-align:center}.hud .mid .games{color:var(--ink);font-size:7px;letter-spacing:1px;line-height:1.25;text-align:center}.banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;text-align:center;font-size:16px;letter-spacing:2px;color:var(--accent);text-shadow:3px 3px 0 rgba(0,0,0,.8);animation:banner-pop .24s steps(4) both}.banner .reason{display:block;font-size:9px;color:var(--ink);margin-top:10px}@keyframes banner-pop{0%{transform:translate(-50%,-50%) scale(.4)}to{transform:translate(-50%,-50%) scale(1)}}.prompt{position:absolute;left:50%;bottom:12%;transform:translate(-50%);z-index:4;pointer-events:none;font-size:9px;letter-spacing:1px;background:#0a0d10d9;border:3px solid var(--ink);padding:10px 14px 8px;color:var(--accent)}.game-buttons{position:absolute;top:6px;right:6px;z-index:6;display:flex;gap:8px}.icon-btn{width:40px;height:54px;background:#0a0d10cc;border:3px solid var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.icon-btn:active{transform:translate(2px,2px)}.icon-btn:focus-visible{outline:3px dashed var(--accent);outline-offset:2px}.court-name{position:absolute;left:50%;bottom:10px;transform:translate(-50%);z-index:4;pointer-events:none;max-width:calc(100% - 24px);background:#0a0d10d1;border:3px solid var(--ink);padding:8px 12px 6px;color:var(--accent);font-size:8px;letter-spacing:1px;text-align:center;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;background:#06080adb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;animation:screen-in .2s steps(5) both}.overlay .result{font-size:22px;letter-spacing:2px;text-shadow:3px 3px 0 rgba(0,0,0,.8)}.overlay .result.win{color:var(--accent)}.overlay .result.lose{color:var(--danger)}.overlay .score-line{font-size:13px;color:var(--ink-dim)}.overlay .record-line{font-size:10px;color:var(--accent)}.profile-prompt-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#06080ae0;padding:18px}.profile-prompt{width:min(100%,360px);display:flex;flex-direction:column;gap:14px}.profile-prompt .px-h2{margin-bottom:0;text-align:center}.profile-prompt .field-row{margin-bottom:0}.qr-box{background:#fff;padding:10px;border:3px solid var(--ink);box-shadow:6px 6px #00000080;image-rendering:pixelated}.room-code{font-size:26px;letter-spacing:8px;color:var(--accent);background:var(--bg);border:3px dashed var(--accent);padding:14px 10px 12px 18px;text-align:center}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.stat-cell{background:var(--bg);border:3px solid var(--ink);padding:12px 8px;text-align:center}.stat-cell .num{font-size:18px;color:var(--accent);display:block}.stat-cell .lbl{font-size:7px;color:var(--ink-dim);display:block;margin-top:7px;letter-spacing:1px}.match-list{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:12px}.match-row{display:flex;align-items:center;gap:8px;font-size:8px;background:var(--bg);border:2px solid var(--panel-hi);padding:8px}.match-row .res{width:14px;text-align:center}.match-row .res.w{color:var(--accent)}.match-row .res.l{color:var(--danger)}.match-row .opp{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-row .sc{color:var(--ink-dim)}.leader-head,.leader-row{display:grid;grid-template-columns:28px minmax(0,1fr) 38px 54px 54px;gap:6px;align-items:center}.leader-head{color:var(--ink-dim);font-size:6px;letter-spacing:1px;margin-bottom:8px}.leader-list{display:flex;flex-direction:column;gap:6px}.leader-row{background:var(--bg);border:2px solid var(--panel-hi);padding:8px 6px;font-size:8px}.leader-row .rank{color:var(--accent);text-align:center}.leader-row .player{display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.theme-card{border:3px solid var(--panel-hi);background:var(--bg);cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:6px;align-items:center}.theme-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.theme-card .swatch{width:100%;height:44px;position:relative;image-rendering:pixelated}.theme-card .name{font-size:6px;letter-spacing:1px;color:var(--ink-dim)}.theme-card.selected .name{color:var(--accent)}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.character-card{border:3px solid var(--panel-hi);background:var(--bg);cursor:pointer;padding:8px 6px;display:flex;flex-direction:column;gap:6px;align-items:center;min-height:88px}.character-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.character-card .name{font-size:6px;letter-spacing:1px;color:var(--ink-dim)}.character-card.selected .name{color:var(--accent)}.character-preview{display:grid;grid-template-columns:repeat(8,4px);grid-auto-rows:4px;gap:0;image-rendering:pixelated}.character-preview span{width:4px;height:4px;display:block}.paddle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}.paddle-card{border:3px solid var(--panel-hi);background:var(--bg);cursor:pointer;padding:8px 6px;display:grid;grid-template-columns:38px 1fr 12px;gap:8px;align-items:center;min-height:58px;text-align:left}.paddle-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.paddle-card .name{font-size:6px;line-height:1.5;letter-spacing:1px;color:var(--ink-dim);overflow-wrap:anywhere}.paddle-card.selected .name{color:var(--accent)}.paddle-preview{width:34px;height:38px;position:relative;display:flex;align-items:flex-start;justify-content:center}.paddle-face{width:28px;height:28px;border:3px solid var(--ink);display:block;position:relative}.paddle-face>span{position:absolute;left:5px;right:5px;top:4px;height:4px}.paddle-handle{position:absolute;left:14px;top:26px;width:6px;height:12px;border-left:2px solid rgba(0,0,0,.35);border-right:2px solid rgba(0,0,0,.35)}.legal-screen{align-items:stretch}.legal-panel{width:100%;max-width:420px;margin:0 auto}.legal-updated{color:var(--ink-dim);font-size:7px;line-height:1.8;margin-bottom:14px;letter-spacing:1px}.legal-section{margin-bottom:18px}.legal-section h3{color:var(--accent);font-size:9px;line-height:1.7;letter-spacing:1px;margin:0 0 8px}.legal-section p,.legal-section li{color:var(--ink);font-size:8px;line-height:1.9;letter-spacing:0}.legal-section p{margin:0}.legal-section ul{margin:0;padding-left:18px}.legal-section.disclaimer{border-top:3px dashed var(--panel-hi);padding-top:14px;margin-bottom:0}.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin-top:18px;max-width:320px}.legal-links button{font-family:var(--font);border:0;background:transparent;color:var(--ink-dim);cursor:pointer;font-size:6px;line-height:1.6;letter-spacing:1px;padding:0;text-decoration:underline}.legal-links button:focus-visible{outline:2px dashed var(--accent);outline-offset:3px}.row{display:flex;gap:10px;width:100%}.spacer{flex:1}.top-bar{display:flex;align-items:center;width:100%;margin-bottom:18px;gap:10px}.top-bar .px-h2{margin:0;flex:1;text-align:center}.err-text{color:var(--danger);font-size:9px;letter-spacing:1px}.dim-text{color:var(--ink-dim);font-size:8px;line-height:1.9;letter-spacing:1px}.marquee{animation:float 2.2s steps(8) infinite alternate}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(-8px)}}