:root{--navy:#142d35;--teal:#12bfa6;--lime:#eaf44a;--coral:#ff805d;--white:#f7f5ed;--font:"Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{background:var(--navy);height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--white);-webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}.app{position:fixed;inset:0;overflow:hidden}.app canvas{touch-action:none;display:block}.loading,.gl-error{z-index:30;background:var(--navy);letter-spacing:2px;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-weight:800;display:flex;position:absolute;inset:0}.loading{pointer-events:none;animation:.4s 1.2s forwards fadeout}@keyframes fadeout{to{opacity:0;visibility:hidden}}.spinner{border:5px solid #f7f5ed33;border-top-color:var(--lime);border-radius:50%;width:38px;height:38px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.gl-error p{letter-spacing:0;max-width:320px;font-weight:500}.btn{font:inherit;letter-spacing:2px;min-height:52px;color:var(--navy);cursor:pointer;pointer-events:auto;border:0;border-radius:18px;padding:14px 28px;font-weight:900;transition:transform .1s}.btn:active{transform:scale(.96)}.btn.primary{background:var(--lime);box-shadow:0 6px #a9b21f,0 10px 24px #00000059}.btn.primary.big{border-radius:24px;padding:16px 64px;font-size:30px}.btn.ghost{color:var(--white);background:#f7f5ed1f}.screen{z-index:10;pointer-events:none;padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);flex-direction:column;display:flex;position:absolute;inset:0}.screen.over,.screen.settings{pointer-events:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#142d35c7;justify-content:center;align-items:center}.screen.settings{z-index:20;overflow-y:auto}.home{justify-content:space-between;align-items:center}.home-top{text-align:center;padding-top:24px}.logo{color:var(--white);text-shadow:0 5px 0 var(--teal), 0 10px 24px #0006;letter-spacing:2px;margin:0;font-size:clamp(48px,15vw,90px);font-style:italic;font-weight:900;line-height:1}.logo span{color:var(--lime)}.tagline{letter-spacing:3px;color:var(--teal);text-transform:uppercase;margin:6px 0 0;font-size:13px;font-weight:700}.home-bottom{flex-direction:column;align-items:center;gap:14px;padding-bottom:28px;display:flex}.best-pill{border:2px solid var(--teal);letter-spacing:2px;background:#142d35cc;border-radius:999px;padding:8px 20px;font-size:13px;font-weight:800}.best-pill b{color:var(--lime);margin-left:8px;font-size:20px}.credit{opacity:.55;letter-spacing:1px;margin:0;font-size:11px}.card{background:var(--navy);border:3px solid var(--teal);text-align:center;border-radius:28px;flex-direction:column;align-items:stretch;gap:12px;width:min(92vw,420px);max-height:96vh;padding:22px;animation:.3s ease-out pop;display:flex;overflow-y:auto;box-shadow:0 20px 60px #00000080}.card h2{letter-spacing:3px;color:var(--coral);margin:0;font-size:22px}.card .btn{align-self:center}.screen.settings .card>.btn.primary{box-shadow:0 0 0 10px var(--navy);flex-shrink:0;position:sticky;bottom:0}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.final{color:var(--lime);text-shadow:0 4px #0000004d;font-size:84px;font-weight:900;line-height:1}.stats{justify-content:space-around;display:flex}.stats div{flex-direction:column;display:flex}.stats b{font-size:26px}.stats span{letter-spacing:1.5px;opacity:.7;font-size:10px}.board{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.board li{background:#f7f5ed12;border-radius:10px;align-items:center;gap:12px;padding:6px 12px;font-size:14px;display:flex}.board li.me{outline:2px solid var(--lime);background:#eaf44a33}.board li span{opacity:.6;width:18px}.board li b{text-align:left;flex:1;font-size:18px}.board li em{opacity:.6;font-size:12px;font-style:normal}.toggle{font:inherit;letter-spacing:1px;color:var(--white);cursor:pointer;background:#f7f5ed14;border:0;border-radius:14px;justify-content:space-between;align-items:center;min-height:52px;padding:14px 16px;font-weight:800;display:flex}.toggle b{background:#f7f5ed26;border-radius:999px;padding:4px 12px;font-size:12px}.toggle.on b{background:var(--teal);color:var(--navy)}.group{text-align:left}.group label{letter-spacing:2px;opacity:.7;text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:800;display:block}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg button{font:inherit;color:var(--white);cursor:pointer;background:#f7f5ed14;border:2px solid #0000;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:12px 6px;font-size:12px;font-weight:800;display:flex}.seg button i{border-radius:50%;width:12px;height:12px;display:inline-block}.seg button.on{border-color:var(--lime);background:#eaf44a26}.help p{opacity:.9;margin:4px 0;font-size:13px;line-height:1.35}.help b{color:var(--lime)}.hud{z-index:5;pointer-events:none;padding-top:env(safe-area-inset-top);position:absolute;inset:0}.hud-top{text-align:center;padding-top:14px}.score{color:var(--white);text-shadow:0 4px 0 var(--teal), 0 8px 18px #0006;font-size:clamp(64px,18vw,100px);font-style:italic;font-weight:900;line-height:1;animation:.18s ease-out bump}@keyframes bump{0%{transform:scale(1.3)}}.hud-sub{letter-spacing:2px;justify-content:center;align-items:center;gap:14px;margin-top:6px;font-size:13px;font-weight:800;display:flex}.hud-sub b{color:var(--lime);font-size:18px}.combo{background:var(--coral);color:var(--navy);border-radius:999px;padding:3px 12px;animation:.2s ease-out bump}.feedback{text-align:center;letter-spacing:2px;text-shadow:0 4px #00000059;font-size:clamp(38px,11vw,62px);font-style:italic;font-weight:900;animation:.75s ease-out forwards floatup;position:absolute;top:30%;left:0;right:0}.feedback small{color:var(--white);font-size:.45em;display:block}.feedback.perfect{color:var(--lime)}.feedback.good{color:var(--teal)}.feedback.poor{color:var(--white)}.feedback.miss{color:var(--coral)}.feedback.stall{color:var(--lime)}@keyframes floatup{0%{opacity:0;transform:translateY(14px)scale(.6)}15%{opacity:1;transform:translateY(0)scale(1.15)}70%{opacity:1}to{opacity:0;transform:translateY(-34px)scale(1)}}.tap-start{text-align:center;color:var(--lime);letter-spacing:2px;text-shadow:0 4px #0006;font-size:clamp(34px,10vw,52px);font-style:italic;font-weight:900;animation:1s ease-in-out infinite pulse;position:absolute;bottom:14%;left:0;right:0}.tap-start small{color:var(--white);letter-spacing:2px;opacity:.8;font-size:13px;font-style:normal;display:block}@keyframes pulse{50%{transform:scale(1.07)}}.stall-hint{text-align:center;letter-spacing:2px;color:var(--lime);font-size:18px;font-weight:900;animation:.5s infinite pulse;position:absolute;bottom:22%;left:0;right:0}.zones{z-index:6;display:flex;position:absolute;inset:0}.zone{touch-action:none;flex:1;justify-content:center;align-items:flex-end;padding-bottom:28px;display:flex}.zone span{letter-spacing:3px;color:var(--white);opacity:.28;pointer-events:none;font-size:12px;font-weight:800}.zone:active{background:#f7f5ed0d}.zone.left{border-right:1px dashed #f7f5ed1f}.vignette{z-index:2;pointer-events:none;background:radial-gradient(at 50% 45%,#0000 55%,#05161b8c 100%);position:absolute;inset:0}.inspector{z-index:40;color:var(--white);pointer-events:auto;background:#05161be0;border-radius:10px;flex-direction:column;gap:6px;padding:8px;font-size:11px;display:flex;position:absolute;bottom:6px;left:6px;right:6px}.inspector .row{flex-wrap:wrap;gap:4px;display:flex}.inspector button{background:var(--teal);color:var(--navy);border:0;border-radius:6px;padding:6px 8px;font-size:11px;font-weight:800}.inspector pre{white-space:pre-wrap;margin:0;font-size:10px}.home-top{width:100%;padding-top:max(20px,3vh)}.court-label{letter-spacing:2px;color:#f5c94d;margin:0 0 12px;font-size:9px;font-weight:800}.court-label span{color:var(--coral);margin:0 6px}.home .logo{text-shadow:0 4px #0b8272,0 8px #142d35;font-size:clamp(46px,14vw,86px)}.tagline{color:#f7e9c5;text-transform:none;letter-spacing:.5px;margin-top:14px;font-size:13px}.home-bottom{gap:12px;width:min(100%,340px);padding-bottom:max(18px,3vh)}.home .best-pill{background:#142d35;border:1px solid #f5c94d;padding:6px 14px;font-size:10px}.home .best-pill b{color:#f5c94d}.home .btn.primary.big{background:#f5c94d;border-radius:10px;width:100%;padding:15px 20px;font-size:25px;box-shadow:0 5px #ae752e,0 10px 20px #071c2555}.home .btn.primary span{margin-left:16px;display:inline-block}.home .btn.ghost{background:#142d35;border:1px solid #e8cf9c66;border-radius:8px;min-height:44px;padding:10px 24px;font-size:11px}.home-help{color:#f7e9c5;letter-spacing:.4px;margin:0;font-size:11px}.credit{color:#f7f5ed;opacity:.75;font-size:9px}.score-label{letter-spacing:3px;color:#f5c94d;margin-bottom:4px;font-size:9px;font-weight:800;display:block}.hud-top{background:#142d35ee;border:1px solid #f5c94d66;border-radius:6px 6px 20px 20px;width:fit-content;min-width:140px;margin:12px auto 0;padding:10px 16px}.score{font-size:clamp(48px,14vw,76px)}.hud-sub{letter-spacing:1px;font-size:10px}.feedback{font-size:clamp(30px,9vw,52px);top:32%}.tap-start{font-size:clamp(22px,7vw,36px);bottom:12%}.tap-start small{margin-top:7px;font-size:12px}.zone{padding-bottom:max(20px, env(safe-area-inset-bottom))}.zone span{opacity:1;letter-spacing:1.5px;background:#142d35df;border:1px solid #e8cf9c66;border-radius:5px;padding:10px 16px;font-size:10px}.zone.left{border-right-color:#0000}.stall-hint{text-shadow:0 2px 5px #142d35;font-size:14px;bottom:15%}button:focus-visible{outline-offset:4px;outline:3px solid #f5c94d}.screen.settings,.screen.over{padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(8px, env(safe-area-inset-bottom))}.card{touch-action:pan-y;max-height:100%}.card .btn.primary.big{max-width:100%;padding-left:20px;padding-right:20px}@media (height<=700px) and (orientation:portrait){.home-top{padding-top:14px}.court-label{margin-bottom:8px;font-size:8px}.home .logo{font-size:clamp(42px,13vw,66px)}.tagline{display:none}.home-bottom{gap:8px;padding-bottom:12px}.home .btn.primary.big{min-height:48px;padding:10px 20px;font-size:22px}.home .best-pill{padding:3px 12px}.home-help{font-size:10px}}@media (orientation:landscape) and (height<=600px){.home{padding-left:max(22px, env(safe-area-inset-left));padding-right:max(22px, env(safe-area-inset-right));flex-direction:row;align-items:center}.home-top{text-align:left;align-self:flex-start;width:29%;padding-top:24px}.home .logo{letter-spacing:0;font-size:clamp(30px,5vw,50px)}.court-label{letter-spacing:1px;font-size:8px;line-height:1.8}.tagline{max-width:180px;font-size:11px;line-height:1.5}.home-bottom{gap:10px;width:27%;padding-bottom:0}.home .btn.primary.big{padding:12px 8px;font-size:18px}.home .btn.primary span{margin-left:4px}.home .best-pill{letter-spacing:1px;padding:5px 8px;font-size:8px}.home .best-pill b{font-size:16px}.home-help{text-align:center;font-size:9px}.hud-top{left:max(16px, env(safe-area-inset-left));min-width:120px;position:absolute;top:0}.score{font-size:44px}.feedback{left:auto;right:max(12px, env(safe-area-inset-right));width:26%;font-size:28px;top:24px}.tap-start{font-size:24px;bottom:15%}.zone{padding-bottom:max(12px, env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.feedback{opacity:1}}.hud-top{background:linear-gradient(#17353d,#102830);box-shadow:0 6px #0a1b20,0 12px 22px #0006}.card{border-color:#f5c94d;box-shadow:0 6px #0a1b20,0 24px 60px #0000008c}.card h2{color:#f5c94d}.final{color:#f5c94d;text-shadow:0 5px #ae752e,0 12px 24px #0006;font-size:clamp(64px,20vw,92px)}.card .btn.primary.big{white-space:nowrap;color:#142d35;background:#f5c94d;border-radius:10px;font-size:clamp(20px,6vw,26px);box-shadow:0 5px #ae752e}.stats b{color:#f7f5ed}.zone span{box-shadow:0 3px #0a1b20}@media (height<=700px) and (orientation:portrait){.hud-top{min-width:104px;margin-top:4px;padding:4px 12px 5px}.score{font-size:clamp(34px,10vw,42px)}.score-label{display:none}.hud-sub{margin-top:2px}.final{font-size:56px}.card{gap:8px;padding:16px}}@media (orientation:landscape) and (height<=600px){.card{gap:6px;width:min(70vw,400px);padding:12px 16px}.final{font-size:48px}.stats b{font-size:20px}.card .btn.primary.big{padding-top:8px;padding-bottom:8px}.board li{padding:3px 10px;font-size:12px}}