:root{--sky-top:#6ec3f4;--sky-bottom:#c9ecff;--grass-a:#6bb843;--grass-b:#78c44f;--wall:#2f7d4a;--ink:#2b2f36;--muted:#6b7380;--card:#fff;--card-edge:#d7dde4;--accent:#2f7de1;--yellow:#ffe94a;--tag:#2e3238d1;--font:"Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;--board-font:"Barlow Semi Condensed", "Arial Narrow", sans-serif;--board-bg:#0e161aeb;--board-cell:#1d2b31;--board-line:#ffffff14;--board-green:#27d07a;--board-dim:#8fa0a8;--board-shadow:0 4px 14px #00000059}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--sky-top);height:100%;color:var(--ink);font-family:var(--font);margin:0;overflow:hidden}.lobby{isolation:isolate;flex-direction:column;justify-content:space-between;align-items:center;height:100%;padding:3vh 24px 4vh;transition:opacity .4s;display:flex;position:relative}.lobby.leaving{opacity:0}.sky,.grass{z-index:-1;position:absolute;left:0;right:0}.sky{background:linear-gradient(var(--sky-top), var(--sky-bottom));height:42%;top:0}.grass{background:linear-gradient(var(--wall) 0 26px, #3f9a5c 26px 30px, transparent 30px), repeating-linear-gradient(90deg, var(--grass-a) 0 80px, var(--grass-b) 80px 160px);top:42%;bottom:0}.brand{text-align:center}.brand h1{color:#fff;letter-spacing:-.01em;text-shadow:0 3px #0000001f;justify-content:center;align-items:center;gap:14px;margin:0;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;display:flex}.brand-logo{filter:drop-shadow(0 3px 2px #00000047);height:clamp(52px,8vw,92px)}.brand h1 span{color:var(--yellow);-webkit-text-stroke:1px #00000014}.brand p{color:#fff;opacity:.95;margin:4px 0 0;font-weight:500}.start-row{align-items:stretch;gap:14px;display:flex}.modes{background:var(--board-bg);box-shadow:var(--board-shadow);font-family:var(--board-font);text-transform:uppercase;border-radius:8px;display:inline-flex;overflow:hidden}.mode{color:var(--board-dim);flex-direction:column;align-items:center;padding:6px 18px;line-height:1.1;transition:background .3s,color .3s;display:flex}.mode+.mode{border-left:1px solid var(--board-line)}.mode b{letter-spacing:.03em;font-size:1.15rem;font-weight:800}.mode small{letter-spacing:.06em;font-size:.8rem;font-weight:700}.mode.active{background:var(--board-green);color:#0e161a}.arena{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:clamp(24px,5vw,80px);width:100%;max-width:1100px;display:grid}.join-card{background:var(--card);border:3px solid var(--card-edge);text-align:center;border-radius:24px;padding:20px 24px 18px;box-shadow:0 10px #00000014,0 20px 40px #0000001f}.join-title{color:var(--muted);margin:0 0 10px;font-size:1.2rem;font-weight:600}.join-title .p1{color:#2f7de1}.join-title .p2{color:#9b5de5}#qr{width:220px;height:220px;margin:0 auto;display:block}.code-row{justify-content:center;align-items:baseline;gap:10px;margin-top:8px;display:flex}.code-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:600}.code{letter-spacing:.14em;color:var(--accent);font-size:2.6rem;font-weight:700}.url{max-width:260px;color:var(--muted);word-break:break-all;margin:2px 0 0;font-size:.75rem}.warning{color:#7a5b00;background:#fff4cc;border-radius:10px;max-width:260px;margin:10px auto 0;padding:8px 10px;font-size:.8rem}.matchup{flex-direction:column;align-items:center;gap:16px;display:flex}.pair{align-items:flex-end;gap:clamp(6px,1.6vw,24px);display:flex}.vs{color:var(--yellow);font-family:var(--board-font);text-shadow:0 3px #00000040;align-self:center;margin-bottom:40px;font-size:clamp(2rem,3.6vw,3rem);font-style:italic;font-weight:800}.side{flex-direction:column;align-items:center;gap:8px;display:flex}.figure{aspect-ratio:148/200;width:clamp(140px,16vw,210px);position:relative}.figure canvas{z-index:1;width:100%;height:100%;transition:opacity .4s,filter .4s;display:block;position:relative}.figure:after{content:"";background:#00000038;border-radius:50%;height:9%;position:absolute;bottom:-2%;left:22%;right:22%}.figure.waiting canvas{opacity:.45;filter:grayscale(.4)}.figure.entering canvas{transform-origin:50% 100%;animation:.7s cubic-bezier(.2,1.4,.4,1) both hop-in}.tag{background:var(--board-bg);box-shadow:var(--board-shadow);color:#fff;font-family:var(--board-font);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;border-radius:7px;align-items:stretch;font-size:1.35rem;font-weight:700;display:flex;overflow:hidden}.tag-name{align-self:center;padding:0 18px 0 10px}.tag:after{content:"Waiting";background:var(--board-cell);color:var(--board-dim);letter-spacing:.06em;place-items:center;padding:0 14px;font-size:1rem;font-weight:800;transition:background .3s,color .3s;display:grid}.side.ready .tag:after{content:"Ready";background:var(--board-green);color:#0e161a}.face,.fallback-face{width:36px;height:36px;box-shadow:inset 0 -4px 0 var(--accent), 0 0 0 1px #ffffff26;background:#dff1ff;border-radius:4px;align-self:center;margin:5px 0 5px 6px;overflow:hidden}#opponent-side .face{box-shadow:inset 0 -4px #9b5de5,0 0 0 1px #ffffff26}.fallback-face{box-shadow:inset 0 -4px #f08a24,0 0 0 1px #ffffff26}.face img,.fallback-face img{width:100%;height:100%;display:block}.fallback{background:var(--board-bg);box-shadow:var(--board-shadow);color:#fff;font-family:var(--board-font);border-radius:7px;align-items:center;gap:10px;margin:0;padding-right:16px;font-size:1.15rem;font-weight:600;transition:opacity .3s;display:flex}.fallback b{color:#f6a14e}.fallback.gone{visibility:hidden;opacity:0}.joined-pop{z-index:2;white-space:nowrap;background:var(--yellow);border:3px solid var(--ink);border-radius:10px;padding:2px 12px;font-weight:700;animation:2.2s both pop;position:absolute;top:-6%;left:50%;transform:translate(-50%)}.footer{flex-direction:column;align-items:center;gap:10px;display:flex}.start-btn{background:var(--board-bg);box-shadow:var(--board-shadow);color:#fff;font-family:var(--board-font);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0;border-radius:9px;align-items:stretch;padding:0;font-size:2.1rem;font-style:italic;font-weight:800;transition:transform .1s,box-shadow .1s,filter .15s;display:flex;overflow:hidden}.start-btn .label{padding:8px 40px 8px 44px}.start-btn .go{background:var(--board-green);color:#0e161a;place-items:center;width:64px;font-size:1.5rem;font-style:normal;display:grid}.start-btn:not(:disabled){animation:1.6s ease-in-out infinite nudge}.start-btn:hover:not(:disabled){filter:brightness(1.15)}.start-btn:focus-visible{outline:3px solid var(--board-green);outline-offset:3px}.start-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 6px #00000059}.start-btn:disabled{color:var(--board-dim);cursor:not-allowed}.start-btn:disabled .go{background:var(--board-cell);color:var(--board-dim)}.status{color:#fff;text-shadow:0 1px 2px #0000004d;margin:0;font-weight:500}.game{background:#9cc35b;position:fixed;inset:0;overflow:hidden}.court-canvas{width:100%;height:100%;display:block}.hud{--hud-font:"Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;--hud-u:clamp(10px, 1.1vw, 18px);--hud-ink:#3a3f47;pointer-events:none;font-family:var(--hud-font);color:#fff;font-size:var(--hud-u);position:absolute;inset:0}.hud [hidden]{display:none!important}.hud-board{top:calc(var(--hud-u) * 1.3);left:calc(var(--hud-u) * 1.3);border-radius:calc(var(--hud-u) * .45);background:var(--board-bg);font-family:Barlow Semi Condensed,sans-serif;display:grid;position:absolute;overflow:hidden;box-shadow:0 4px 14px #00000059}.hud-row{grid-template-columns:auto 1fr calc(var(--hud-u) * 2.6) calc(var(--hud-u) * 3);min-width:calc(var(--hud-u) * 18);height:calc(var(--hud-u) * 2.6);color:#fff;align-items:stretch;display:grid}.hud-row+.hud-row{border-top:1px solid var(--board-line)}.hud-flag{width:calc(var(--hud-u) * 1.9);height:calc(var(--hud-u) * 1.25);margin:0 calc(var(--hud-u) * .7);border-radius:2px;align-self:center;box-shadow:0 0 0 1px #ffffff26}.p1 .hud-flag{background:linear-gradient(#2f7de1 0 33%,#fff 33% 67%,#2f7de1 67%)}.p2 .hud-flag{background:linear-gradient(#9b5de5 0 33%,#fff 33% 67%,#9b5de5 67%)}.hud-row.cpu .hud-flag{background:linear-gradient(#f08a24 0 33%,#fff 33% 67%,#f08a24 67%)}.hud-name{padding-right:calc(var(--hud-u) * 1.2);font-size:calc(var(--hud-u) * 1.75);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;align-self:center;font-weight:700}.hud-games,.hud-pts{font-size:calc(var(--hud-u) * 1.75);font-variant-numeric:tabular-nums;place-items:center;font-weight:800;display:grid}.hud-games{background:var(--board-cell);color:#fff}.hud-pts{background:var(--board-green);color:#0e161a}.hud-row+.hud-row .hud-pts{border-top:1px solid #0000001f}.hud-stats{top:calc(var(--hud-u) * 1.3);right:calc(var(--hud-u) * 1.3);border-radius:calc(var(--hud-u) * .45);background:#0e161aeb;font-family:Barlow Semi Condensed,sans-serif;display:flex;position:absolute;overflow:hidden;box-shadow:0 4px 14px #00000059}.hud-logo{right:calc(var(--hud-u) * 1.3);bottom:calc(var(--hud-u) * 1.1);height:calc(var(--hud-u) * 3.4);opacity:.9;filter:drop-shadow(0 2px 3px #00000073);position:absolute}.hud-rally,.hud-speed{padding:calc(var(--hud-u) * .35) calc(var(--hud-u) * 1.1);color:#fff;align-items:baseline;gap:.4em;display:flex}.hud-speed{border-left:1px solid #ffffff14}.hud-rally small,.hud-speed small{font-size:calc(var(--hud-u) * 1.15);letter-spacing:.06em;text-transform:uppercase;color:#8fa0a8;font-weight:600}.hud-rally b,.hud-speed b{font-size:calc(var(--hud-u) * 1.75);text-align:center;font-variant-numeric:tabular-nums;min-width:1.2em;font-weight:800}.hud-speed b{color:#27d07a}.hud-marker{width:0;height:0;position:absolute;top:0;left:0}.hud-marker:before{content:"";left:calc(var(--hud-u) * -.9);top:calc(var(--hud-u) * -2.2);border-left:calc(var(--hud-u) * .9) solid transparent;border-right:calc(var(--hud-u) * .9) solid transparent;border-top:calc(var(--hud-u) * 1.2) solid var(--board-green);filter:drop-shadow(0 2px 3px #00000073);animation:.9s ease-in-out infinite marker-bob;position:absolute}.hud-hint,.hud-banner-card,.hud-pop,.hud-pause-card{font-family:var(--board-font);background:var(--board-bg);box-shadow:var(--board-shadow);border-radius:calc(var(--hud-u) * .45);text-transform:uppercase;overflow:hidden}.hud-hint{left:50%;top:calc(var(--hud-u) * 1.3);font-size:calc(var(--hud-u) * 1.6);letter-spacing:.03em;white-space:nowrap;align-items:stretch;font-weight:700;display:flex;position:absolute;transform:translate(-50%)}.hud-hint-tag{padding:0 calc(var(--hud-u) * 1);background:var(--board-green);color:#0e161a;place-items:center;font-weight:800;animation:1.8s ease-in-out infinite hint-pulse;display:grid}.hud-hint-text{padding:calc(var(--hud-u) * .55) calc(var(--hud-u) * 1.2)}.hud-hint b{color:var(--board-green);font-weight:800}.hud-banner{justify-content:center;display:flex;position:absolute;top:30%;left:0;right:0}.hud-banner-card{min-width:calc(var(--hud-u) * 22);text-align:center;flex-direction:column;align-items:stretch;animation:1.9s cubic-bezier(.2,.9,.3,1) forwards banner;display:flex}.hud-banner-title{padding:calc(var(--hud-u) * .5) calc(var(--hud-u) * 2.5);font-size:calc(var(--hud-u) * 4.4);letter-spacing:.03em;font-weight:800;line-height:1.1}.hud-banner-sub{padding:calc(var(--hud-u) * .3) calc(var(--hud-u) * 2);background:var(--board-green);color:#0e161a;font-size:calc(var(--hud-u) * 1.7);letter-spacing:.06em;font-weight:800}.hud-banner-sub:empty{display:none}.hud-pop{padding:calc(var(--hud-u) * .35) calc(var(--hud-u) * .9);border-left:calc(var(--hud-u) * .35) solid var(--board-green);font-size:calc(var(--hud-u) * 1.5);letter-spacing:.03em;white-space:nowrap;font-weight:700;animation:1.3s ease-out forwards hud-pop;position:absolute;transform:translate(-50%,-100%)}.hud-pause{z-index:1;background:#080c108c;place-items:center;display:grid;position:absolute;inset:0}.hud-pause-card{min-width:calc(var(--hud-u) * 24);text-align:center;flex-direction:column;display:flex}.hud-pause-card b{padding:calc(var(--hud-u) * .7) calc(var(--hud-u) * 2);font-size:calc(var(--hud-u) * 2.6);letter-spacing:.03em;font-weight:800}.hud-pause-card span{padding:calc(var(--hud-u) * .5) calc(var(--hud-u) * 2);background:var(--board-cell);color:var(--board-dim);font-size:calc(var(--hud-u) * 1.5);letter-spacing:.06em;justify-content:center;align-items:center;gap:.6em;font-weight:700;display:flex}.hud-pause-card span:before{content:"";background:var(--board-green);border-radius:50%;width:.55em;height:.55em;animation:1s ease-in-out infinite hint-pulse}.bump{animation:.3s ease-out bump}@keyframes bump{40%{transform:scale(1.25)}}@keyframes marker-bob{50%{transform:translateY(calc(var(--hud-u) * -.6))}}@keyframes hint-pulse{50%{opacity:.55}}@keyframes banner{0%{clip-path:inset(0 100% 0 0);transform:translate(-12px)}14%{clip-path:inset(0);transform:none}84%{clip-path:inset(0);opacity:1}to{clip-path:inset(0 0 0 100%);opacity:.6}}@keyframes hud-pop{0%{opacity:0;transform:translate(-50%,-60%)}15%{opacity:1;transform:translate(-50%,-100%)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-150%)}}@keyframes hop-in{0%{opacity:0;transform:translate(-120%)translateY(0)scale(.6)}60%{opacity:1;transform:translate(6%)translateY(-14%)scale(1.05)}to{transform:none}}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(0)}15%{opacity:1;transform:translate(-50%)scale(1.15)}25%,80%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-10px)}}@keyframes nudge{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=760px){.lobby{gap:18px;overflow-y:auto}.sky,.grass{position:fixed}.arena{grid-template-columns:1fr;justify-items:center;row-gap:20px}.join-card{max-width:100%}.url{overflow-wrap:anywhere}.figure{width:clamp(100px,32vw,140px)}.vs{margin-bottom:30px}.fallback{font-size:.85rem}.pair{gap:4px}.vs{font-size:1.6rem}.tag{font-size:.9rem}.tag-name{padding:0 7px 0 6px}.tag:after{padding:0 6px;font-size:.7rem}.face,.fallback-face{width:28px;height:28px}.start-btn{font-size:1.7rem}.start-row{flex-direction:column;align-items:center;gap:10px}.mode{padding:5px 12px}.mode b{font-size:1rem}}.debug-overlay{z-index:2;color:#c8f7d8;white-space:pre;pointer-events:none;background:#000000b8;border-radius:6px;margin:0;padding:8px 10px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;bottom:12px;left:12px}.hud-divider{height:calc(var(--hud-u) * .3);background:var(--board-bg);box-shadow:0 0 0 1px var(--board-line), var(--board-shadow);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.hud.split .hud-hint.p2{top:calc(50% + var(--hud-u) * 1.3)}.hud.split .hud-banner{top:50%;transform:translateY(-50%)}