:root{--bg:#0b1220;--panel:#121a2be0;--ink:#e8eefc;--muted:#8b9bb8;--accent:#3ecf8e;--warn:#f0b429;--danger:#ef6b6b;--border:#243049;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{background:var(--bg);width:100%;height:100%;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;font-family:ui-rounded,Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}canvas#c{width:100%;height:100%;display:block;position:absolute;inset:0}#hud{pointer-events:none;z-index:2;position:absolute;inset:0}#hud .top,#hud .bot-bar,#hud .aim-ui,#hud select,#hud button,#hud a{pointer-events:auto}.top{background:linear-gradient(#070c16d9,#0000);align-items:center;gap:10px;padding:12px 14px;display:flex}.top h1{flex:1;font-size:1rem;font-weight:700}.back{color:var(--muted);font-size:.75rem;font-weight:600;text-decoration:none}.back:hover{color:var(--accent)}.score{font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:.02em;font-size:.95rem;font-weight:800}.banner{background:var(--panel);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;max-width:min(90vw,360px);padding:10px 16px;font-size:.9rem;font-weight:600;position:absolute;top:22%;left:50%;transform:translate(-50%,-50%)}.banner.hidden{display:none}.aim-ui{left:50%;bottom:calc(88px + var(--safe-bottom));background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;width:min(92vw,360px);padding:12px 14px;position:absolute;transform:translate(-50%)}.aim-ui.hidden{display:none}.aim-hint{color:var(--muted);text-align:center;margin-bottom:10px;font-size:.78rem}.power-wrap{gap:6px;display:grid}.power-label{color:var(--muted);font-size:.72rem;font-weight:600}.power-track{border:1px solid var(--border);background:#1a2438;border-radius:999px;height:12px;overflow:hidden}.power-fill{background:linear-gradient(90deg, var(--accent), var(--warn), var(--danger));border-radius:999px;width:0%;height:100%}.crosshair{border:2px solid var(--accent);border-radius:50%;width:18px;height:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0006}.crosshair.hidden{display:none}.crosshair:before,.crosshair:after{content:"";background:var(--accent);position:absolute}.crosshair:before{width:2px;height:6px;top:-6px;left:50%;transform:translate(-50%)}.crosshair:after{width:2px;height:6px;bottom:-6px;left:50%;transform:translate(-50%)}.bot-bar{padding:10px 12px calc(12px + var(--safe-bottom));background:var(--panel);border-top:1px solid var(--border);justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}.bot-bar select#serve-side{appearance:none;min-width:110px;color:var(--ink);border:1px solid var(--border);font:inherit;background:#0e1628;border-radius:10px;flex:none;padding:10px 12px;font-size:.85rem;font-weight:600}.btn{appearance:none;cursor:pointer;font:inherit;background:var(--accent);color:#062016;border:none;border-radius:10px;padding:10px 16px;font-weight:700}.btn:active{transform:scale(.98)}#power-slider{width:100%;accent-color:var(--accent);height:28px;margin:4px 0 6px}.hit-btn{pointer-events:auto;width:100%;margin-top:8px}.hit-btn:disabled{opacity:.45}