html,body,#root{width:100%;height:100%;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0d1117}body{color:#e6edf3;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.45 system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{overflow:hidden}.app{background:#0d1117;width:100%;height:100%;position:relative}.app>canvas{touch-action:none;display:block;width:100%!important;height:100%!important}:root{--bg:#0b1220;--bg-deep:#070c16;--panel:#131c2df0;--panel-solid:#131c2d;--border:#ffffff1c;--border-strong:#ffffff38;--text:#eef3fb;--text-dim:#9aa8bf;--text-faint:#6b7a91;--accent:#c8f24a;--accent-deep:#a6cf2c;--accent-ink:#16220a;--court:#2f7fe8;--danger:#e8503a;--ok:#37b46b;--radius:14px;--radius-sm:9px;--gap:14px;--shadow:0 18px 44px #0000008c;--focus:0 0 0 3px #c8f24a8c;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace}html,body{max-width:100%;overflow-x:hidden}.screen{z-index:10;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;background:radial-gradient(120% 90% at 50% 0,#2f7fe829,#0000 60%),linear-gradient(#070c16db,#070c16f5);justify-content:center;align-items:center;padding:clamp(12px,4vw,32px);display:flex;position:fixed;inset:0;overflow-y:auto}.panel{box-sizing:border-box;gap:var(--gap);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:440px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;margin:auto;padding:clamp(18px,5vw,30px);display:flex}.panel-wide{max-width:620px}.panel-tight{text-align:center;align-items:center;gap:16px;max-width:360px}.brand{text-align:center;flex-direction:column;gap:6px;display:flex}.brand-title{letter-spacing:-.02em;margin:0;font-size:clamp(1.7rem,7vw,2.6rem);font-weight:800;line-height:1.1}.brand-compact .brand-title{font-size:clamp(1.4rem,5.5vw,1.9rem)}.brand-sub{color:var(--text-dim);margin:0;font-size:.95rem}.body-text{color:var(--text-dim);margin:0;font-size:.95rem;line-height:1.55}.body-text strong{color:var(--text)}.mono{font-family:var(--font-mono)}.btn{appearance:none;font:inherit;border-radius:var(--radius-sm);cursor:pointer;min-height:44px;color:var(--text);background:0 0;border:1px solid #0000;padding:12px 18px;font-weight:650;transition:background-color .12s,border-color .12s,transform 90ms,opacity .12s}.btn:focus-visible{box-shadow:var(--focus);outline:none}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.45}.btn-primary{background:var(--accent);color:var(--accent-ink);font-size:1.02rem}.btn-primary:hover:not(:disabled){background:var(--accent-deep)}.btn-secondary{border-color:var(--border-strong);background:#ffffff12}.btn-secondary:hover:not(:disabled){background:#ffffff24}.btn-ghost{color:var(--text-dim);border-color:var(--border)}.btn-ghost:hover:not(:disabled){color:var(--text);background:#ffffff0f}.btn-chip{min-width:0;min-height:38px;color:var(--text-dim);border-color:var(--border);background:#ffffff0d;flex:1 1 0;padding:9px 6px;font-size:.88rem;font-weight:600}.btn-chip:hover:not(:disabled){color:var(--text);background:#ffffff1a}.btn-chip-on,.btn-chip-on:hover{color:var(--accent);background:#c8f24a24;border-color:#c8f24a99}.row{flex-wrap:wrap;gap:10px;display:flex}.row>.btn{flex:140px}.menu-actions{flex-direction:column;gap:10px;display:flex}.menu-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:#ffffff08;flex-direction:column;gap:8px;padding:12px;display:flex}.menu-note{color:var(--text-faint);margin:0;font-size:.82rem}.difficulty{gap:6px;display:flex}.howto{border-top:1px solid var(--border);padding-top:4px}.howto-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:12px 0 10px;font-size:.78rem;font-weight:700}.howto-list{gap:8px;margin:0;display:grid}.howto-row{flex-wrap:wrap;align-items:baseline;gap:4px 10px;display:flex}.howto-row dt{min-width:108px;color:var(--text);flex:none;gap:3px;font-size:.85rem;font-weight:650;display:flex}.howto-row dd{color:var(--text-dim);flex:160px;margin:0;font-size:.88rem}kbd{font-family:var(--font-mono);color:var(--text);border:1px solid var(--border-strong);background:#ffffff14;border-bottom-width:2px;border-radius:5px;padding:2px 6px;font-size:.74rem;line-height:1.3;display:inline-block}.howto-tip{color:var(--text-dim);border-left:3px solid var(--court);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#2f7fe81f;margin:12px 0 0;padding:9px 11px;font-size:.84rem}.form{gap:var(--gap);flex-direction:column;display:flex}.field{border:0;flex-direction:column;gap:7px;min-width:0;margin:0;padding:0;display:flex}.field-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:0;font-size:.78rem;font-weight:700}.input{box-sizing:border-box;width:100%;min-width:0;font:inherit;color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#00000052;padding:12px 14px;font-size:1rem}.input::placeholder{color:var(--text-faint)}.input:focus-visible{border-color:var(--accent);box-shadow:var(--focus);outline:none}.input[readonly]{color:var(--text-dim);font-size:.85rem}.swatches{flex-wrap:wrap;gap:10px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:42px;height:42px;padding:0;transition:transform .11s,box-shadow .11s;box-shadow:inset 0 0 0 1px #00000073}.swatch:hover{transform:scale(1.08)}.swatch:focus-visible{box-shadow:var(--focus);outline:none}.swatch-on{border-color:var(--text);transform:scale(1.08);box-shadow:0 0 0 3px #00000080}.code-block{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:#0000004d;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;display:flex}.code-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-size:.72rem;font-weight:700}.code-value{letter-spacing:.14em;color:var(--accent);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;font-size:clamp(1.9rem,10vw,2.9rem);font-weight:800;line-height:1.1}.copy-row{flex-wrap:wrap;gap:8px;display:flex}.copy-row .input{flex:180px}.btn-copy{flex:none;min-width:112px}.status{color:var(--text-dim);align-items:center;gap:8px;margin:2px 0 0;font-size:.86rem;display:flex}.lobby-players{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.vs{letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-size:.78rem;font-weight:700}.chip{border:1px solid var(--border);background:#ffffff0f;border-radius:999px;align-items:center;gap:8px;min-width:0;padding:8px 13px;display:flex}.chip-empty{color:var(--text-faint);border-style:dashed}.chip-dot{border-radius:50%;flex:none;width:13px;height:13px;box-shadow:inset 0 0 0 1px #00000080}.chip-name{text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;font-weight:650;overflow:hidden}.chip-you{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:.7rem;font-weight:700}.spinner{border:2px solid #fff3;border-top-color:var(--accent);border-radius:50%;flex:none;width:13px;height:13px;animation:.9s linear infinite spin}.spinner-lg{border-width:3px;width:26px;height:26px}@keyframes spin{to{transform:rotate(360deg)}}.hud{z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:var(--font);color:var(--text);position:fixed;inset:0}.scoreboard{border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#070c16a8;border-radius:999px;align-items:center;gap:clamp(8px,2vw,16px);max-width:calc(100vw - 16px);padding:8px clamp(10px,3vw,20px);display:flex;position:absolute;top:clamp(8px,2vw,18px);left:50%;transform:translate(-50%)}.score-side{align-items:center;gap:8px;min-width:0;display:flex}.score-side-right{justify-content:flex-end}.score-dot{border-radius:50%;flex:none;width:12px;height:12px;box-shadow:inset 0 0 0 1px #00000080}.score-name{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:clamp(60px,22vw,170px);font-size:clamp(.78rem,2.4vw,.98rem);font-weight:650;overflow:hidden}.score-value{font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,5vw,2rem);font-weight:800;line-height:1}.score-sep{color:var(--text-faint);font-size:clamp(1.1rem,4vw,1.5rem);font-weight:800}.serve-hint{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-shadow:0 2px 8px #000c;white-space:nowrap;margin:0;font-size:.78rem;font-weight:700;position:absolute;top:calc(clamp(8px,2vw,18px) + 62px);left:50%;transform:translate(-50%)}.net-indicator{font-variant-numeric:tabular-nums;color:var(--text-dim);border:1px solid var(--border);background:#070c1699;border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:.76rem;display:flex;position:absolute;top:clamp(8px,2vw,18px);right:clamp(8px,2vw,18px)}.net-dot{border-radius:50%;width:8px;height:8px}.net-dot-ok{background:var(--ok)}.net-dot-bad{background:var(--danger)}.callout{text-align:center;letter-spacing:.04em;text-transform:uppercase;max-width:calc(100vw - 24px);color:var(--accent);text-shadow:0 4px 22px #000000e6;font-size:clamp(2.1rem,11vw,4.4rem);font-weight:900;animation:.38s cubic-bezier(.18,1.3,.4,1) both callout-pop;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}@keyframes callout-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.72)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.hud-blocker{pointer-events:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#070c16c7;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.waiting-text{margin:0;font-size:1rem;font-weight:650;line-height:1.5}.final-score{flex-direction:column;gap:8px;display:flex}.final-side{border:1px solid var(--border);border-radius:var(--radius-sm);background:#ffffff0a;align-items:center;gap:10px;padding:11px 14px;display:flex}.final-name{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;font-weight:650;overflow:hidden}.final-value{font-variant-numeric:tabular-nums;flex:none;font-size:1.6rem;font-weight:800;line-height:1}@media (prefers-reduced-motion:reduce){.btn,.swatch{transition:none}.spinner,.callout{animation:none}}.camera-switcher{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;background:#0d1117b8;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;bottom:clamp(8px,2vw,18px);left:clamp(8px,2vw,18px)}.cam-btn{appearance:none;font:inherit;color:#e6edf3b8;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:7px;padding:6px 10px;font-size:clamp(11px,1.1vw,13px);transition:background .12s,color .12s}.cam-btn:hover{color:#e6edf3;background:#ffffff14}.cam-btn.is-active{background:var(--accent,#2d7dd2);color:#fff}.cam-btn:focus-visible{outline:2px solid var(--focus,#7cc4ff);outline-offset:2px}.cam-hint{color:#e6edf366;white-space:nowrap;padding:0 8px 0 4px;font-size:clamp(10px,1vw,11px)}.cam-divider{background:#ffffff24;align-self:stretch;width:1px;margin:4px}@media (width<=560px){.cam-hint{display:none}}.power-meter{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text-dim);opacity:.6;background:#0d1117b8;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;font-size:clamp(11px,1.1vw,13px);transition:opacity .12s;display:flex;position:absolute;bottom:clamp(8px,2vw,18px);right:clamp(8px,2vw,18px)}.power-meter.is-charging{opacity:1}.power-label{letter-spacing:.06em;text-transform:uppercase;font-weight:700}.power-track{background:#ffffff1f;border-radius:999px;width:clamp(110px,18vw,220px);height:10px;overflow:hidden}.power-fill{border-radius:inherit;transform-origin:0;background:#ff8a1f;width:100%;height:100%;transform:scaleX(0)}.power-meter.is-full .power-fill{background:var(--accent)}.power-meter.is-full .power-label{color:var(--accent)}.power-hint{color:var(--text-faint)}@media (width<=960px){.power-hint,.cam-hint{display:none}}@media (width<=640px){.power-meter{bottom:calc(clamp(8px,2vw,18px) + 48px)}}