:root{--bg: #070b16;--bg2: #0c1224;--panel: #141d34;--panel2: #1c2742;--ink: #e7ecf6;--ink-dim: #8da0c2;--accent: #46e0c8;--accent-soft: #9bf6e4;--pink: #ff7b9c;--gold: #ffcf5a;--line: rgba(120, 160, 220, .16);--radius: 14px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1000px 640px at 50% -8%,#11203f 0%,var(--bg) 62%);color:var(--ink);font-family:Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}#app{max-width:540px;margin:0 auto;padding:16px 14px 30px;min-height:100vh}.screen{animation:fade .25s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.home{text-align:center}.logo{font-size:2.6rem;letter-spacing:.02em;margin:26px 0 4px;font-weight:800;background:linear-gradient(180deg,var(--accent-soft),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--ink-dim);line-height:1.55;max-width:32em;margin:0 auto 18px}.tagline em{color:var(--accent);font-style:normal;font-weight:600}.streak{color:var(--gold);margin:2px 0 16px}.menu{display:flex;flex-direction:column;gap:12px;margin:0 auto 16px;max-width:380px}.btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;font:inherit;cursor:pointer;transition:transform .08s,border-color .15s,background .15s}.btn:hover{border-color:var(--accent);background:var(--panel2)}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(180deg,#143042,#112338);border-color:var(--accent)}.btn-title{font-size:1.12rem;color:var(--gold)}.btn-sub{font-size:.8rem;color:var(--ink-dim)}.diffs{color:var(--ink-dim);margin:4px 0 22px;font-size:.9rem}.diff{background:var(--panel);color:var(--ink-dim);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:0 3px;font:inherit;cursor:pointer}.diff.on{color:#06241b;background:var(--accent);border-color:var(--accent);font-weight:700}.how{text-align:left;background:#ffffff05;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;max-width:440px;margin:0 auto}.how h3{margin:0 0 8px;color:var(--accent);font-weight:600}.how ul{margin:0;padding-left:20px;color:var(--ink-dim);line-height:1.7}.how strong{color:var(--ink)}.hud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:10px}.quit{background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;width:36px;height:36px;font-size:1.3rem;cursor:pointer}.hud-mid{display:flex;align-items:center;gap:10px}.mode{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.score-line{color:var(--gold);font-size:1.5rem;font-weight:800;letter-spacing:.05em}.slow-pill{font-size:.74rem;border-radius:999px;padding:4px 11px;border:1px solid var(--line);color:var(--ink-dim);background:var(--panel)}.slow-pill.ready{color:var(--accent);border-color:var(--accent)}.slow-pill.active{color:#06241b;background:var(--accent);font-weight:700}.slow-pill.used{color:#6b7894}.court-wrap{display:flex;justify-content:center}canvas.court{border-radius:12px;border:1px solid var(--line);box-shadow:0 8px 30px #00000080;touch-action:none;image-rendering:auto}.controls{margin-top:16px;display:flex;flex-direction:column;gap:10px;max-width:460px;margin-left:auto;margin-right:auto}.ctrl-row{display:flex;gap:10px}.cbtn{flex:1;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 10px;font:inherit;font-size:.95rem;cursor:pointer;transition:background .1s,border-color .1s}.cbtn:active{background:var(--panel2);border-color:var(--accent)}.slow-btn{color:var(--accent);border-color:#46e0c866;font-weight:600}.hint{color:var(--ink-dim);font-size:.82rem;text-align:center;line-height:1.5;margin:4px 0 0}.hint em{color:var(--accent);font-style:normal;font-weight:600}.results{text-align:center}.results h2{color:var(--gold);margin:32px 0 10px;font-size:1.8rem}.big-total{font-size:3.2rem;color:var(--accent-soft);font-weight:800;letter-spacing:.06em}.result-actions{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:26px auto 0}.copied-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%);background:var(--accent);color:#042519;padding:9px 18px;border-radius:999px;font-size:.9rem;box-shadow:0 6px 20px #0006}@media(max-width:420px){.logo{font-size:2.2rem}}