:root{--bg-0: #060910;--bg-1: #0b1120;--text: #eef2f8;--muted: #8b98ad;--glass: rgba(20, 27, 42, .62);--glass-brd: rgba(255, 255, 255, .09);--glass-hi: rgba(255, 255, 255, .14);--amber: #ff9f43;--amber-2: #ffb765;--cyan: #22d3ee;--cyan-2: #38e0f0;--radius: 16px;--shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .7);--shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:radial-gradient(1200px 800px at 50% -10%,rgba(34,211,238,.1),transparent 60%),radial-gradient(900px 700px at 85% 110%,rgba(255,159,67,.08),transparent 55%),linear-gradient(180deg,var(--bg-1),var(--bg-0))}.app{display:flex;flex-direction:column;height:100%;width:100%}.topbar{display:flex;align-items:center;gap:7px;margin:7px auto 3px;padding:5px 9px;width:min(1100px,calc(100% - 20px));background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--glass-brd);border-radius:13px;box-shadow:var(--shadow-md),inset 0 1px 0 var(--glass-hi);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:7px;padding:0 6px 0 2px;font-weight:700;font-size:13px;letter-spacing:-.01em;white-space:nowrap}.brand .logo{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:radial-gradient(circle at 32% 28%,#eaff6a,#a9d329 70%);box-shadow:0 4px 14px -4px #a9d329b3,inset 0 1px #ffffff80;font-size:12px}.brand small{display:block;font-weight:500;font-size:9.5px;letter-spacing:.02em;color:var(--muted);margin-top:1px}.divider{width:1px;height:26px;background:var(--glass-brd);margin:0 2px}.spacer{flex:1}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--glass-brd);background:#ffffff0b;color:var(--text);font-size:12px;font-weight:600;letter-spacing:-.01em;padding:5px 10px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:transform .14s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease;touch-action:manipulation}.btn svg{width:13px;height:13px}.btn:hover:not(:disabled){background:#ffffff14;border-color:var(--glass-hi);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.offense.active{background:linear-gradient(180deg,var(--amber-2),var(--amber));border-color:transparent;color:#2a1704;box-shadow:0 8px 22px -8px #ff9f43bf,inset 0 1px #fff6}.btn.defense.active{background:linear-gradient(180deg,var(--cyan-2),var(--cyan));border-color:transparent;color:#042a30;box-shadow:0 8px 22px -8px #22d3eeb3,inset 0 1px #fff6}.btn.ghost{padding:5px 9px;color:var(--muted)}.btn.ghost:hover:not(:disabled){color:var(--text)}.btn.danger:hover:not(:disabled){color:#ff8f8f;border-color:#ff787866;background:#ff5a5a1a}.segment{display:inline-flex;padding:3px;gap:2px;background:#00000047;border:1px solid var(--glass-brd);border-radius:12px}.segment button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer;transition:color .15s ease,background .15s ease,box-shadow .15s ease}.segment button.on{color:#fff;background:#ffffff1a;box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 12px -6px #0009}.court-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:10px 16px 18px}.court-wrap:before{content:"";position:absolute;top:8%;right:20%;bottom:8%;left:20%;background:radial-gradient(closest-side,rgba(56,189,248,.16),transparent 75%);filter:blur(30px);pointer-events:none}svg.court{position:relative;width:100%;height:100%;touch-action:none;display:block}.court .handle{transform-box:fill-box;transform-origin:center;transition:transform .12s ease;cursor:grab}.court .handle:hover{transform:scale(1.14)}.court .handle:active{cursor:grabbing}.court .pulse{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.85}50%{opacity:.35}}.hint{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--glass-brd);color:var(--text);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-.01em;pointer-events:none;box-shadow:var(--shadow-md);animation:fadeup .22s ease}.hint .dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor}@keyframes fadeup{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}.legend{position:absolute;bottom:16px;left:20px;display:flex;flex-direction:column;gap:6px;background:var(--glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--glass-brd);border-radius:14px;padding:11px 14px;font-size:12px;color:var(--muted);pointer-events:none;box-shadow:var(--shadow-md)}.legend .row{display:flex;align-items:center;gap:8px}.legend .swatch{width:10px;height:10px;border-radius:3px;flex:none}.legend b{color:var(--text);font-weight:600}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--muted);pointer-events:none;padding:18px 26px;border-radius:18px;background:#090d16b8;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-brd);box-shadow:var(--shadow-lg)}.empty-state .big{font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-.01em}.empty-state .sub{font-size:13px}@media (max-width: 640px){.topbar{margin:5px auto 2px;padding:4px 7px;border-radius:11px;gap:6px}.brand{font-size:12px;gap:6px;padding:0 4px 0 2px}.brand small{display:none}.brand .logo{width:19px;height:19px;border-radius:6px;font-size:11px}.btn{font-size:11px;padding:4px 8px}.btn svg{width:12px;height:12px}}