*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#183e53;font-family:system-ui,-apple-system,"PingFang SC",sans-serif;color:#f5fbf7}button{font:inherit;cursor:pointer;touch-action:manipulation}#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;left:24px;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 24px);display:flex;gap:27px;pointer-events:none}.metric{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}.metric span{position:absolute;top:0;font-size:12px;letter-spacing:.18em;color:#c6dbe2}.metric b{font-size:34px;margin-top:17px;font-weight:550}.metric small{font-size:12px;color:#c6dbe2}.score b{color:#e1f49a}#pause{position:absolute;left:24px;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 103px);width:44px;height:44px;border:1px solid #ffffff28;border-radius:50%;background:#153c4e70;color:#fff;font-size:19px}#cue{position:absolute;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 119px);left:80px;right:28px;text-align:center;min-height:28px;font-size:16px;letter-spacing:.08em;color:#f3f9dd;pointer-events:none;text-shadow:0 2px 6px #143548}#bottom{position:absolute;bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 22px);left:0;right:0;text-align:center;font-size:13px;letter-spacing:.14em;color:#bad0d9;pointer-events:none}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#102f466b;backdrop-filter:blur(5px);padding:100px 22px 50px}#overlay.hidden{display:none}section{text-align:center;width:100%;max-width:380px;width:min(100%,380px);border:1px solid #efffee28;border-radius:30px;background:linear-gradient(160deg,#244e60e8,#12364ceb);box-shadow:0 24px 80px #10203038;padding:30px 20px}.eyebrow{font-size:12px;letter-spacing:.2em;color:#bcd3db}h1{font-size:38px;letter-spacing:.08em;font-weight:600;margin:13px 0 8px}p{font-size:15px;line-height:1.95;color:#dbe6e7;margin:16px 0 25px}#start{min-width:200px;min-height:54px;border:0;border-radius:18px;background:#e1f29b;color:#263d3b;font-size:17px;font-weight:650;box-shadow:0 5px 0 #a9c377}.gesture{height:60px;position:relative;width:50px;margin:auto}.gesture i{position:absolute;top:14px;left:20px;width:12px;height:12px;border-radius:50%;background:#e6f8a3;box-shadow:0 0 22px #d8ec9d66;animation:gesture 2.5s infinite}.gesture span{position:absolute;bottom:0;left:21px;color:#dce9bf;opacity:.6}@keyframes gesture{0%,15%{transform:translateY(0)}65%,100%{transform:translateY(24px)}}@media(max-height:500px){header{top:16px}#pause{top:95px}#cue{top:38px;left:200px}section{padding:18px;max-width:440px}#overlay{padding:18px}h1{font-size:28px}.gesture{display:none}p{margin:10px 0 15px}#bottom{bottom:12px}}@media(prefers-reduced-motion:reduce){.gesture i{animation:none}}

#level{font-size:20px}.celebrate section{animation:celebrate .7s ease-out}@keyframes celebrate{0%{transform:scale(.94);box-shadow:0 0 0 0 #e1f29b70}55%{transform:scale(1.025);box-shadow:0 0 0 24px #e1f29b00}100%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.celebrate section{animation:none}}

.stage{position:absolute;left:60px;top:90px;white-space:nowrap;pointer-events:none}.stage span{top:-10px;font-size:10px}.stage b{margin-top:2px;font-size:16px;font-weight:500}.score{position:relative}.score-goal{position:absolute;left:0;top:100%;white-space:nowrap;font-size:10px!important;letter-spacing:0;color:#c6dbe2}

button:focus-visible{outline:3px solid #e1f29b;outline-offset:3px}

#stars{position:absolute;right:calc(var(--safe-area-inset-right,env(safe-area-inset-right,0px)) + 18px);top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 27px);z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;min-width:74px;height:46px;padding:0 12px;border:1px solid #fff7c140;border-radius:18px;background:#1c456dc9;pointer-events:none;font-variant-numeric:tabular-nums}#stars span{font-size:24px;color:#ffe68b;text-shadow:0 2px 0 #ba843b80}#stars b{font-size:24px;font-weight:650;color:#fff6d4}#star-flight{position:absolute;left:-15px;top:-15px;z-index:6;width:30px;height:30px;line-height:30px;text-align:center;font-style:normal;font-size:30px;color:#ffe68b;opacity:0;pointer-events:none;text-shadow:0 2px 4px #4f534740;will-change:transform,opacity}.star-pop{animation:star-pop .28s ease-out}@keyframes star-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}@media(prefers-reduced-motion:reduce){.star-pop{animation:none}#star-flight{transition:none}}

#safe-insets{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;padding:var(--safe-area-inset-top,env(safe-area-inset-top,0px)) var(--safe-area-inset-right,env(safe-area-inset-right,0px)) var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) var(--safe-area-inset-left,env(safe-area-inset-left,0px))}

.gesture{width:100px}.gesture i{left:7px;top:8px;animation:gesture-send 3s infinite}@keyframes gesture-send{0%,12%{transform:translate(0,0)}38%{transform:translate(0,34px)}48%{transform:translate(24px,34px)}70%{transform:translate(49px,7px)}92%,100%{transform:translate(75px,23px)}}#bottom{opacity:.5;bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 12px)}@media(prefers-reduced-motion:reduce){.gesture i{animation:none}}

/* R17: exact target outline and quiet, read-only teaching cues. */
[hidden]{display:none!important}#score{font-size:30px;letter-spacing:-.02em}
#level-goal{margin:8px 0;color:#e4f3af;font-size:14px;font-weight:650}#instructions{margin-top:8px}
#aim-status{position:absolute;left:12px;right:12px;bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 55px);text-align:center;color:#eff6df;font-size:12px;letter-spacing:.07em;opacity:.8;pointer-events:none;text-shadow:0 1px 6px #143548}
#timing-cue{position:absolute;left:50%;top:61%;width:180px;height:78px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
#timing-text{position:relative;color:#f3ffcf;font-size:20px;font-weight:650;text-shadow:0 2px 7px #183d4f,0 0 18px #173e4f;background:#16394dc7;border:1px solid #ecffc54d;border-radius:20px;padding:8px 14px;white-space:nowrap}
#timing-ring{position:absolute;width:72px;height:72px;border:2px solid #e7fbb1a8;border-radius:50%;box-shadow:0 0 0 8px #e7fbb115}
#overlay.intro{align-items:end;padding:18px 22px calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 18px);backdrop-filter:none;background:#102f462b}
#overlay.intro section{padding:18px 20px}#overlay.intro h1{font-size:28px;margin:8px 0}#overlay.intro .gesture{height:48px}#overlay.intro #instructions{margin:6px 0 14px;font-size:14px}
.gesture i{left:44px;top:8px;animation:gesture-pull 2.5s infinite}@keyframes gesture-pull{0%,20%{transform:translateY(0)}60%,100%{transform:translateY(28px)}}
#start:disabled{background:#849994;color:#e0e6e4;box-shadow:none;border:1px solid #bec9c244;opacity:.65;cursor:not-allowed}button:disabled{cursor:not-allowed}.webgl-unavailable #gameHUD,.webgl-unavailable .gesture,.webgl-unavailable #level-goal{display:none}.webgl-unavailable #overlay{align-items:center;background:#183e53}.webgl-unavailable #instructions{line-height:1.8;margin:16px 0 22px}
@media(orientation:landscape) and (max-height:600px){#overlay.intro{justify-items:start;align-items:center;padding:16px calc(var(--safe-area-inset-right,env(safe-area-inset-right,0px)) + 16px) 16px calc(var(--safe-area-inset-left,env(safe-area-inset-left,0px)) + 16px)}#overlay.intro section{width:300px;max-width:40vw;padding:18px 12px}#overlay.intro h1{font-size:25px}#overlay.intro .gesture{display:none}#overlay.intro #instructions{font-size:12px}#overlay.intro #level-goal{font-size:12px}#start{min-width:170px}#timing-cue{top:66%;left:62%;height:62px}#timing-text{font-size:16px}#aim-status{bottom:45px}.webgl-unavailable #overlay.intro{justify-items:center}.webgl-unavailable #overlay.intro section{max-width:440px;width:90%}}
@media(prefers-reduced-motion:reduce){.gesture i{animation:none}}

@media(orientation:portrait) and (max-height:700px){#overlay.intro{padding:12px 16px calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 12px)}#overlay.intro section{padding:12px 16px}#overlay.intro .gesture,#overlay.intro .eyebrow{display:none}#overlay.intro h1{font-size:24px;margin:3px 0 6px}#overlay.intro #level-goal,#overlay.intro #instructions{font-size:12px}#overlay.intro #instructions{margin:4px 0 10px}#overlay.intro #start{min-height:48px}}

/* R18: keep phone HUD controls left of the real incoming-ball corridor.
   The level remains accessible by its existing aria-label and number. */
@media(max-width:480px){header{left:8px;gap:2px}header>.metric:not(.stage){width:44px;min-width:0;gap:3px}header>.metric:not(.stage) b{font-size:24px}#time{font-size:22px;font-weight:500;width:30px;display:inline-block;flex-shrink:0}#score{font-size:20px;font-weight:500;max-width:58px;display:inline-block;flex-shrink:0;white-space:nowrap;overflow:hidden}#pause{left:12px;top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 154px)}#game .stage{left:0;width:64px;min-width:64px;padding:0;gap:0;justify-content:flex-start;background:none;border:0;border-radius:0}#game .stage span{display:none}#game .stage #level{font-size:13px;font-weight:500;max-width:64px;white-space:nowrap;overflow:hidden}#game .stage:after{display:none}}

/* R21: one entry path; quiet sequential progression and accessible sound. */
#game.ready #gameHUD{visibility:hidden}
#overlay:not(.intro) .gesture,#overlay:not(.intro) #level-goal{display:none}
#mute{position:absolute;right:18px;top:82px;right:calc(var(--safe-area-inset-right,env(safe-area-inset-right,0px)) + 18px);top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 82px);min-width:64px;min-height:44px;padding:6px 10px;border:1px solid #ffffff35;border-radius:14px;background:#153c4eb8;color:#f5fbf7;font-size:12px;z-index:4}
#celebration{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);max-width:90%;white-space:nowrap;border:1px solid #e1f29b90;border-radius:22px;padding:18px 24px;background:#183e53ed;color:#e1f29b;font-size:20px;font-weight:650;text-align:center;pointer-events:none;z-index:4}
#celebration:before{content:'★';display:block;font-size:36px;margin-bottom:6px;color:#ffe68b}
#celebration.pop{animation:stage-clear .9s ease-out}
@keyframes stage-clear{0%{opacity:0;transform:translate(-50%,-40%) scale(.94)}25%,85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){#celebration.pop{animation:none}}

/* Baseline placement when safe-area env() is unsupported (Chrome 61). */
@supports not (top:env(safe-area-inset-top)){header{top:24px}#pause{top:103px}#stars{top:27px;right:18px}#aim-status{bottom:55px}#overlay.intro{padding-bottom:18px}}
@media(max-width:480px){@supports not (top:env(safe-area-inset-top)){#pause{top:154px}}}

/* Keep counters readable against the pale sky; stage stays on the court. */
header{color:#173d4d;text-shadow:0 1px 1px #ffffff80}
header>.metric:not(.stage)>span,header>.metric:not(.stage)>small{color:#31565f}
header .score #score{color:#344f17}
header .stage{color:#f5fbf7;text-shadow:0 1px 3px #173d4d}