:root{--bg:#0f3d2e;--bg-deep:#0a2a20;--line:#f4f1e8;--ball:#d8f24a;--ball-ink:#16210a;color:var(--line);background:var(--bg-deep);-webkit-font-smoothing:antialiased;font-family:system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% 35%, var(--bg), var(--bg-deep));margin:0}.screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:48px;min-height:100svh;padding:16px;display:flex}.title{letter-spacing:-.03em;text-transform:uppercase;margin:0;font-size:clamp(48px,12vw,112px);font-weight:800}.title-hint{opacity:.75;max-width:520px;margin:0;font-size:14px;line-height:1.5}.placeholder{opacity:.8;margin:0;font-size:24px}.start{background:var(--ball);min-width:200px;color:var(--ball-ink);font:inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;border-radius:999px;padding:16px 40px;font-size:22px;font-weight:700;transition:transform .12s,box-shadow .12s}.start:hover{transform:translateY(-2px);box-shadow:0 8px 24px #d8f24a59}.start:focus-visible{outline:3px solid var(--line);outline-offset:4px}.setup{--panel:#0e1a28eb;--muted:#e2e8f099;--lime:#d8f24a;place-items:center;min-height:100svh;padding:16px;display:grid}.setup-card{border-top:3px solid var(--lime);background:var(--panel);color:#eef2f6;border-radius:10px;flex-direction:column;gap:16px;width:min(880px,100%);padding:24px;display:flex}.setup-head h1{letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:22px}.setup-head p{color:var(--muted);margin:4px 0 0;font-size:14px}.setup-body{grid-template-columns:minmax(220px,300px) 1fr;gap:24px;display:grid}.setup-preview{flex-direction:column;gap:8px;display:flex}.preview{cursor:grab;touch-action:pan-y;background:radial-gradient(at 50% 30%,#2a5a45,#0d2a20 75%);border-radius:8px;height:360px}.preview:active{cursor:grabbing}.setup-preview-caption{align-items:baseline;gap:6px;margin:0;font-size:15px;display:flex}.setup-preview-caption span{color:var(--muted);margin-left:auto;font-size:12px}.setup-form{flex-direction:column;gap:14px;min-width:0;display:flex}.setup-row{gap:12px;display:flex}.text-field{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.text-field.number{flex:0 0 96px}.text-field>span,.setup-field legend{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:700}.text-field input{width:100%;color:inherit;font:inherit;background:#ffffff0f;border:1px solid #ffffff29;border-radius:6px;padding:10px 12px;font-size:16px;font-weight:700}.text-field input:focus-visible{outline:2px solid var(--lime);outline-offset:1px}.text-field input[aria-invalid=true]{border-color:#ff8a73}.field-error{color:#ff8a73;font-size:12px;font-style:normal}.setup-field{border:none;flex-direction:column;gap:8px;margin:0;padding:0;display:flex}.setup-field legend{margin-bottom:8px;padding:0}.swatches,.choices{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border-radius:50%;width:30px;height:30px;position:relative;box-shadow:inset 0 0 0 1px #0000004d}.swatch input,.choice input,.difficulty-option input{opacity:0;pointer-events:none;position:absolute}.swatch:has(input:checked){outline:3px solid var(--lime);outline-offset:2px}:is(.swatch:has(input:focus-visible),.choice:has(input:focus-visible),.difficulty-option:has(input:focus-visible)){outline-offset:3px;outline:2px dashed #fff}.choice span{cursor:pointer;border:1px solid #ffffff24;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;display:block}.choice input:checked+span{background:var(--lime);color:#16210a;border-color:#0000}.difficulty-options{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.difficulty-option{cursor:pointer;border:1px solid #ffffff24;border-radius:6px;flex-direction:column;gap:4px;padding:10px 12px;display:flex;position:relative}.difficulty-option:has(input:checked){border-color:var(--lime);background:#d8f24a1a}.difficulty-name{letter-spacing:.08em;text-transform:uppercase;font-weight:800}.difficulty-option:has(input:checked) .difficulty-name{color:var(--lime)}.difficulty-info{color:var(--muted);font-size:12px;line-height:1.4}.setup-actions{justify-content:flex-end;gap:10px;display:flex}.setup-actions .menu-btn{min-width:140px}.setup-actions .menu-btn:disabled{opacity:.45;cursor:not-allowed}@media (width<=680px){.setup-card{padding:16px}.setup-body{grid-template-columns:1fr}.preview{height:260px}.difficulty-options{grid-template-columns:1fr}.setup-actions .menu-btn{flex:1;min-width:0}}.match{--panel:#0e1a28eb;--panel-line:#ffffff14;--muted:#e2e8f08c;--lime:#d8f24a;-webkit-user-select:none;user-select:none;background:#9db29a;position:fixed;inset:0;overflow:hidden}.game-view{position:absolute;inset:0}.game-view canvas{width:100%;height:100%}.hud{pointer-events:none;letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:700;position:absolute;inset:0}.hud button{pointer-events:auto}.panel{background:var(--panel);color:#eef2f6;border-radius:6px;box-shadow:0 6px 18px #00000040}.hud-top-left{flex-direction:column;align-items:flex-start;gap:12px;display:flex;position:absolute;top:20px;left:20px}.scoreboard{border-top:3px solid var(--lime);width:304px;overflow:hidden}.scoreboard-head{color:var(--muted);justify-content:space-between;padding:10px 14px 6px;font-size:10px;display:flex}.scoreboard-head .brand{color:#fff;letter-spacing:.2em;font-size:11px}.scoreboard-cols,.scoreboard-row{grid-template-columns:1fr 22px 52px 60px;align-items:center;display:grid}.scoreboard-cols{color:var(--muted);padding:4px 0 6px 14px;font-size:9px}.scoreboard-cols span:first-child{grid-column:1/3}.scoreboard-cols span:not(:first-child){text-align:center}.scoreboard-row{border-top:1px solid var(--panel-line);height:38px;padding-left:14px;position:relative}.scoreboard-row .stripe{border-radius:2px;width:3px;height:16px;position:absolute;top:11px;left:14px}.scoreboard-row .name{letter-spacing:.02em;text-transform:none;padding-left:12px;font-size:13px}.serve-dot{background:var(--lime);width:7px;height:7px;box-shadow:0 0 8px var(--lime);border-radius:50%;justify-self:center}.serve-dot.hidden{visibility:hidden}.scoreboard-row .games,.scoreboard-row .points{letter-spacing:0;font-variant-numeric:tabular-nums;place-items:center;height:100%;font-size:20px;display:grid}.scoreboard-row .points{background:#ffffff0a}.scoreboard-row .points.active{background:var(--lime);color:#16210a}.scoreboard-foot{border-top:1px solid var(--panel-line);color:var(--muted);justify-content:space-between;padding:8px 14px;font-size:8.5px;display:flex}.scoreboard-foot .serve-label{color:var(--lime)}.power{width:124px;padding:8px 10px 10px}.power-head{justify-content:space-between;font-size:9px;display:flex}.power-bar{gap:3px;margin-top:6px;display:flex}.power-bar .seg{background:#ffffff26;border-radius:2px;flex:1;height:4px}.power-bar .seg.on{background:#e9f5b5}.prompt{color:#fff;white-space:nowrap;background:#0e1a28cc;border-radius:4px;padding:7px 16px;font-size:12px;position:absolute;top:26px;left:50%;transform:translate(-50%)}.hud-top-right{flex-direction:column;align-items:flex-end;gap:20px;display:flex;position:absolute;top:20px;right:20px}.icon-btn{background:var(--panel);color:#fff;cursor:pointer;border:none;border-radius:8px;place-items:center;width:50px;height:50px;display:grid;box-shadow:0 6px 18px #00000040}.icon-btn svg{fill:currentColor;width:24px;height:24px}.icon-btn .stroke,.icon-btn svg.stroke{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.icon-btn.small{border-radius:6px;width:36px;height:36px}.icon-btn.small svg{width:18px;height:18px}.icon-btn.muted{opacity:.45}.icon-btn:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}.gauge{width:148px;padding:10px 12px}.gauge-head,.gauge-foot{justify-content:space-between;font-size:8.5px;display:flex}.gauge-head .live{color:var(--muted);font-size:7.5px}.gauge-dial{width:100%;margin:4px 0;display:block}.gauge-track,.gauge-fill{fill:none;stroke-width:3px;stroke-linecap:round}.gauge-track{stroke:#ffffff26}.gauge-fill{stroke:var(--lime)}.gauge-tick{stroke:#ffffff59;stroke-width:1px}.gauge-needle{stroke:#fff;stroke-width:2.5px;stroke-linecap:round}.gauge-value{fill:#fff;text-anchor:middle;letter-spacing:0;font-size:24px;font-weight:800}.gauge-unit,.gauge-scale{fill:var(--muted);text-anchor:middle;text-transform:none;font-size:7px}.gauge-foot{border-top:1px solid var(--panel-line);color:var(--muted);padding-top:6px}.hud-bottom-left,.hud-bottom-right{color:#ffffffd9;text-shadow:0 1px 3px #0006;font-size:10px;position:absolute;bottom:18px}.hud-bottom-left{flex-direction:column;gap:6px;display:flex;left:20px}.keys-hint{opacity:.8}.hud-bottom-right{align-items:center;gap:12px;display:flex;right:20px}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#08101a8c;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.menu{border-top:3px solid var(--lime);background:var(--panel);color:#eef2f6;border-radius:10px;flex-direction:column;gap:10px;width:min(380px,100%);max-height:100%;padding:24px;display:flex;overflow-y:auto}.menu h2{letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:0 0 8px;font-size:22px}.menu-btn{color:inherit;font:inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff24;border-radius:6px;padding:12px;font-weight:700}.menu-btn:hover{background:#ffffff1a}.menu-btn.primary{background:var(--lime);color:#16210a;border-color:#0000}.controls{border-top:1px solid #ffffff1a;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;padding-top:14px;font-size:12px;display:grid}.controls dt{color:var(--lime);font-weight:800}.controls dd{color:var(--muted);margin:0}.shot-feedback{text-shadow:0 2px 6px #00000073;flex-direction:column;align-items:center;gap:2px;animation:1.6s ease-out forwards feedback-pop;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.shot-feedback-label{letter-spacing:.08em;font-size:22px;font-weight:800}.shot-feedback-detail{color:#ffffffd9;font-size:10px}.shot-feedback.good .shot-feedback-label{color:var(--lime)}.shot-feedback.ok .shot-feedback-label{color:#ffd166}.shot-feedback.bad .shot-feedback-label{color:#ff7a66}@keyframes feedback-pop{0%{opacity:0;transform:translate(-50%,6px)scale(.9)}10%{opacity:1;transform:translate(-50%)scale(1.06)}20%{transform:translate(-50%)scale(1)}80%{opacity:1}to{opacity:0}}.callout{border-top:3px solid var(--muted);color:#fff;background:#0e1a28db;border-radius:8px;flex-direction:column;align-items:center;gap:6px;min-width:240px;padding:14px 28px;animation:.22s ease-out callout-in;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.callout.good{border-top-color:var(--lime)}.callout.bad{border-top-color:#e8664f}.callout-title{letter-spacing:.1em;font-size:24px;font-weight:800}.callout-detail{color:var(--muted);font-size:11px}@keyframes callout-in{0%{opacity:0;transform:translate(-50%,-40%)}}.menu-sub{color:var(--muted);text-align:center;margin:0 0 6px;font-size:13px;line-height:1.45}.menu-section{letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:14px 0 0;font-size:12px}.menu .menu-section+.menu-sub{text-align:left}@media (width<=720px){.hud-top-left,.hud-top-right{top:10px}.hud-top-left{transform-origin:0 0;left:10px;transform:scale(.72)}.hud-top-right{transform-origin:100% 0;right:10px;transform:scale(.72)}.prompt{top:auto;bottom:52px}.shot-feedback{bottom:84px}.keys-hint{display:none}.hud-bottom-left{left:12px}.hud-bottom-right{right:12px}}.home-actions{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.start.secondary{color:var(--line);box-shadow:inset 0 0 0 2px var(--line);background:0 0}.start.secondary:hover{box-shadow:inset 0 0 0 2px var(--line), 0 8px 24px #f4f1e833}.online{position:relative}.online-card{width:min(640px,100%)}.link-btn{color:var(--lime);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:none;padding:0;font-weight:700;text-decoration:underline}.menu-btn:disabled{opacity:.45;cursor:not-allowed}.menu-btn.danger{color:#ff9a88;border-color:#ff7a6680}.online-options{grid-template-columns:1fr 1fr;gap:16px;display:grid}.online-option{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:10px;padding:16px;display:flex}.online-option h2{letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:14px}.online-option p{color:var(--muted);flex:1;margin:0;font-size:14px}.code-field input{letter-spacing:.3em;text-transform:uppercase;font-size:20px;font-weight:800}.online-error{color:#ffb4a6;background:#e8664f29;border-radius:6px;margin:0;padding:10px 12px;font-size:14px}.room-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.room-code{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.room-code-label{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:11px}.room-code strong{color:var(--lime);letter-spacing:.18em;font-variant-numeric:tabular-nums;font-size:36px;font-weight:800}.room-code-actions{gap:14px;font-size:13px;display:flex}.seats{grid-template-columns:1fr 1fr;gap:12px;display:grid}.seat{background:#ffffff08;border:2px solid #ffffff1a;border-radius:8px;align-items:center;gap:12px;padding:14px;transition:border-color .16s,background .16s;display:flex}.seat.ready{border-color:var(--lime);background:#d8f24a14}.seat.empty{border-style:dashed}.seat.away{opacity:.6}.seat-avatar{background:#ffffff14;border-radius:50%;flex:none;place-items:center;width:48px;height:48px;font-size:18px;font-weight:800;display:grid}.seat-body{flex-direction:column;gap:2px;min-width:0;display:flex}.seat-name{text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:800;overflow:hidden}.seat-you{letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;background:#ffffff1f;border-radius:4px;margin-left:8px;padding:1px 6px;font-size:11px;font-style:normal}.seat-state{color:var(--muted);font-size:13px}.seat.ready .seat-state{color:var(--lime);font-weight:700}.room-hint{color:var(--muted);text-align:center;margin:0;font-size:14px}.result-banner{text-align:center;border-radius:6px;margin:0;padding:10px 12px;font-size:14px;font-weight:700}.result-banner.good{color:var(--lime);background:#d8f24a24}.result-banner.bad{background:#ffffff0f}.countdown{text-align:center;align-items:center}.countdown-number{color:var(--lime);font-variant-numeric:tabular-nums;font-size:96px;font-weight:800;line-height:1;animation:1s ease-out countdown-tick}@keyframes countdown-tick{0%{opacity:.2;transform:scale(1.4)}}.net-banner{color:#eef2f6;text-align:center;background:#0e1a28eb;border-radius:8px;padding:14px 20px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ping.bad{color:#ff9a88}@media (width<=560px){.online-options,.seats{grid-template-columns:1fr}.room-code{align-items:flex-start}}@media (prefers-reduced-motion:reduce){.countdown-number{animation:none}}