:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#edf5e8;background:#0c211c;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #d9fa65;outline-offset:2px}button:hover{filter:brightness(1.12)}.app{max-width:1230px;margin:auto;padding:0 28px}header{height:77px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2e443a}.brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:#d9fa65;font-size:21px;font-weight:800;letter-spacing:-1px}.brand b{font-weight:400;color:#edf5e8}.brand small{color:#cbdcbe;font-size:10px;letter-spacing:2px;border:1px solid #3c5844;padding:5px 6px;border-radius:4px;margin-left:9px}nav{display:flex;gap:8px}nav button{border:1px solid #395144;background:#17382d;border-radius:7px;min-width:38px;height:38px;font-size:14px}.game-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:38px;padding-top:24px}.game{background:#14372c;border:1px solid #2e4b3d;border-radius:14px;overflow:hidden}.scoreboard{height:63px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#102d24}.scoreboard>div{display:flex;align-items:center;gap:9px;font-weight:700;font-size:10px;letter-spacing:.6px}.scoreboard strong{font-size:32px;font-weight:500;margin:0 5px;font-variant-numeric:tabular-nums}.scoreboard i{width:8px;height:8px;border-radius:50%}.green{background:#d9fa65}.coral{background:#ff897a}#status{font-size:10px;letter-spacing:1px;color:#b4c8b7;text-align:center}.aimbar{display:flex;align-items:center;gap:12px;padding:9px 20px;justify-content:center;font-size:10px;color:#a9c0ab;letter-spacing:1px}.aimbar>div{display:flex;gap:4px}.aimbar button{border:1px solid #44614c;background:#204331;color:#c4d7bd;border-radius:5px;font-size:12px;padding:7px 12px;min-height:32px}.aimbar button.active{background:#d9fa65;color:#153627;border-color:#d9fa65}.auto-hit{margin-left:auto;font-size:9px}.playfield{position:relative;display:flex;align-items:center;justify-content:center;height:min(62vh,590px);min-height:350px;background:#163c30;overflow:hidden}canvas{display:block;max-width:100%;height:100%;aspect-ratio:420/640;object-fit:contain;touch-action:none;outline:none}#overlay{position:absolute;inset:0;background:#09271cb3;backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px}#overlay.hidden{display:none}.overlay-card{text-align:center;max-width:330px;width:100%}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#b5d579}h1{font-size:35px;font-weight:600;letter-spacing:-1.4px;margin:12px 0}p{line-height:1.6;font-size:15px;color:#aec2b1;margin:0 0 20px}.overlay-card p{color:#d0dec6;font-size:15px}.overlay-card>button{width:100%;background:#d9fa65;border:0;border-radius:8px;color:#163729;padding:15px 20px;font-size:16px;font-weight:750}.overlay-card>small{display:block;color:#aabcaa;font-size:11px;margin-top:13px}.toast{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:max-content;max-width:92%;padding:8px 14px;border:1px solid #5f795555;border-radius:24px;background:#092519e8;color:#e6f6c5;pointer-events:none;font-size:12px;text-align:center;opacity:0;transition:opacity .15s}.toast.show{opacity:1}.controls{display:flex;gap:18px;align-items:center;padding:15px 18px;background:#102f25;border-top:1px solid #38503d;user-select:none}.movement{display:flex;flex-direction:column;align-items:center;gap:6px}.movement>span{font-size:9px;color:#88a287;letter-spacing:1.5px}#joystick{position:relative;width:86px;height:86px;flex-shrink:0;border:1px solid #58764c;background:#25422c;border-radius:50%;touch-action:none;cursor:grab}.pad-arrows{display:block;text-align:center;color:#a5bc8e;line-height:26px;font-size:15px}#stick{position:absolute;left:27px;top:27px;width:30px;height:30px;border:1px solid #95b375;background:#536b43;border-radius:50%;pointer-events:none;box-shadow:0 3px 8px #092019}.shot-controls{flex:1;min-width:0}.control-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#9ab393;margin-bottom:8px}#chosen{color:#d9fa65;letter-spacing:0}#shots{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}#shots button{position:relative;min-height:58px;background:#204331;border:1px solid #456344;border-radius:7px;font-size:12px;color:#d1dfc6;padding:5px 2px}#shots button b{display:block;font-size:21px;font-weight:400;line-height:25px}#shots button small{position:absolute;right:4px;top:3px;font-size:8px;opacity:.5}#shots button.active{background:#d9fa65;border-color:#d9fa65;color:#153a25}#tip{font-size:11px;color:#93af8e;min-height:28px;padding-top:7px;line-height:1.4}aside{padding:15px 0}h2{font-size:34px;letter-spacing:-1.3px;font-weight:500;margin:10px 0 12px}aside>p{max-width:350px}aside section{margin:24px 0}.settings{background:#17372c;border:1px solid #35513d;border-radius:10px;padding:18px}.label-row{display:flex;align-items:center;justify-content:space-between;font-size:14px}.label-row b{color:#d9fa65;font-size:20px}.settings input{width:100%;accent-color:#d9fa65;margin:14px 0 10px}.range-label{display:flex;justify-content:space-between;font-size:11px;color:#a6ba9c}.settings small{display:block;margin-top:10px;font-size:10px;color:#829c7c}.coach{border-left:3px solid #91b559;padding:8px 0 8px 18px}.coach h3,.guide h3{font-size:17px;font-weight:600;margin:10px 0}.coach p{font-size:14px;margin-bottom:15px;min-height:65px}.rally-stat{display:flex;align-items:center;gap:10px;font-size:11px;color:#8fac88}.rally-stat b{color:#d9fa65;font-size:18px;margin-right:10px}.guide p{font-size:13px;line-height:2}.guide .muted{line-height:1.6;font-size:12px}.muted{color:#8ca387}kbd{font-family:inherit;font-size:11px;color:#d5e3ca}.new-game{width:100%;border:1px solid #476444;background:#1e3d2b;border-radius:7px;padding:12px;color:#ccdebe}.footnote{font-size:10px;line-height:1.5;color:#829b7e;margin:14px 0}.mobile-settings{display:none}dialog{max-width:520px;width:calc(100% - 28px);max-height:90dvh;overflow:auto;background:#183a2b;color:#edf5e8;border:1px solid #5c7449;border-radius:16px;padding:25px}dialog::backdrop{background:#071e16cc}dialog h2{font-size:27px}dialog p,dialog li{font-size:14px;line-height:1.5}dialog li{margin-bottom:8px;color:#b9cbb0}.close{float:right;background:transparent;border:0;font-size:25px}.close-help{width:100%;background:#d9fa65;border:0;color:#183a2b;border-radius:7px;padding:12px;font-weight:700}
@media(max-width:780px){.app{height:100dvh;padding:0 max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column}header{height:48px;flex-shrink:0;border:0}.brand{font-size:17px}.brand small{font-size:8px;padding:3px 5px;margin-left:3px}nav{gap:5px}nav button{height:32px;min-width:32px;font-size:11px}.game-layout{display:flex;flex:1;min-height:0;padding:0;gap:0}.game{display:flex;flex-direction:column;width:100%;border-radius:10px;min-height:0}aside{display:none}.scoreboard{height:43px;flex-shrink:0;padding:0 10px}.scoreboard>div{font-size:8px;gap:5px;letter-spacing:0}.scoreboard strong{font-size:26px;margin:0 2px}#status{font-size:8px;letter-spacing:0}.aimbar{height:40px;flex-shrink:0;padding:4px 9px;gap:7px}.aimbar button{padding:5px 15px;min-height:30px;font-size:11px}.auto-hit{font-size:8px}.playfield{flex:1;height:auto;min-height:0}canvas{width:auto;max-height:100%;max-width:100%;height:100%;min-height:0}.controls{padding:9px 10px 4px;gap:12px;flex-shrink:0}.movement{gap:3px}#joystick{width:78px;height:78px}.pad-arrows{line-height:23px}#stick{left:23px;top:23px}.control-heading{font-size:8px;margin-bottom:5px}#shots{gap:4px}#shots button{min-height:53px;font-size:11px}#shots button b{font-size:19px}#shots button small{display:none}#tip{font-size:9px;min-height:29px;line-height:1.3}.mobile-settings{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:9px;color:#a6bb97;padding:4px 10px 7px;background:#102f25;flex-shrink:0}.mobile-settings select{background:#1e402d;border:1px solid #476444;color:#d9fa65;border-radius:4px;padding:3px;font:inherit;font-size:11px}.mobile-settings button{background:none;border:0;font-size:19px;min-width:28px;min-height:28px}.overlay-card{max-width:280px}h1{font-size:29px}.overlay-card p{font-size:13px;margin-bottom:14px}.overlay-card>button{padding:12px 15px}.overlay-card>small{font-size:10px;margin-top:8px}.toast{font-size:10px;bottom:8px;padding:6px 10px}}
@media(max-height:500px) and (orientation:landscape){.app{padding:0 8px;height:100dvh}header{height:40px}.game-layout{padding:0;min-height:0;display:block;flex:1}.game{height:calc(100dvh - 45px);display:grid;grid-template-columns:1fr 210px;grid-template-rows:37px 1fr 32px}.scoreboard{grid-column:1;grid-row:1;height:37px}.aimbar{grid-column:2;grid-row:1;height:37px}.aimbar>span{display:none}.aimbar button{padding:4px 6px}.playfield{grid-column:1;grid-row:2/4;min-height:0;height:100%}.controls{grid-column:2;grid-row:2;flex-direction:column;gap:6px;padding:8px}.shot-controls{width:100%}.movement>span{display:none}#tip{font-size:9px}.mobile-settings{grid-column:2;grid-row:3;padding:2px 5px;display:flex}.mobile-settings>span{display:none}aside{display:none}.overlay-card h1{font-size:24px;margin:8px 0}.overlay-card p{font-size:12px;margin-bottom:8px}.overlay-card>small{display:none}}

.charge-meter{height:9px;background:#345038;border-radius:8px;position:relative;overflow:hidden;margin-bottom:8px}.charge-meter>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#bce874,#d9fa65 55%,#ffbc68);border-radius:8px}.charge-meter>i{position:absolute;left:55%;top:0;height:100%;border-left:2px solid #163524}#charge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:63px;padding:10px;background:#d9fa65;color:#153a25;border:1px solid #e9ffb1;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#charge.charging{background:#f3cf6c;box-shadow:inset 0 0 0 2px #fff4a1}#charge b{font-size:14px;letter-spacing:1px}#charge span{font-size:11px;opacity:.8}#tip{font-size:11px;line-height:1.4}.control-heading{min-height:12px}@media(max-width:780px){#charge{min-height:60px;padding:8px 4px}#charge b{font-size:12px;letter-spacing:.5px}#charge span{font-size:10px}.charge-meter{height:7px;margin-bottom:6px}#tip{font-size:10px;min-height:30px}.controls{gap:13px}.control-heading{font-size:9px}}@media(max-height:500px) and (orientation:landscape){#charge{min-height:52px;padding:5px}#charge b{font-size:10px}#charge span{font-size:9px}#tip{font-size:9px}.charge-meter{margin-bottom:4px}.control-heading{font-size:8px}}

/* Block accidental double-tap zoom across the play surface while preserving pinch zoom outside direct controls. */
.app{touch-action:manipulation}.game{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.controls,.aimbar,.scoreboard,.mobile-settings{touch-action:manipulation}#joystick,#charge,#court{touch-action:none}#joystick .pad-arrows{pointer-events:none}@media(max-width:780px){.mobile-settings select{font-size:16px}}

@media(max-width:780px){.aimbar{gap:5px;padding-left:5px;padding-right:5px}.aimbar button{padding:5px 9px;font-size:10px}.aimbar>.auto-hit{display:none}}@media(max-width:360px){.aimbar>span:first-child{display:none}.aimbar button{padding:5px 7px}}

/* The court is a continuous game surface: touches never request browser zoom. */
.game{touch-action:none}.game button,.game select{touch-action:none}

/* A larger mobile thumb area; movement capture continues when the finger leaves its circle. */
@media(max-width:780px){.movement{width:120px;flex:0 0 120px;touch-action:none}#joystick{width:108px;height:108px}#stick{left:39px;top:39px}.pad-arrows{line-height:33px;font-size:17px}.movement>span{pointer-events:none}}
@media(max-height:500px) and (orientation:landscape){.movement{width:120px;flex:0 0 auto}}
@media(max-height:500px) and (orientation:landscape){#joystick{width:108px;height:108px}#stick{left:39px;top:39px}.pad-arrows{line-height:33px;font-size:17px}}

/* Anywhere movement uses the court as a floating thumb pad. */
.game{position:relative}.playfield{touch-action:none}#move-indicator{position:absolute;z-index:2;width:82px;height:82px;margin:-41px 0 0 -41px;border:2px solid #d9fa6599;border-radius:50%;background:#d9fa651e;pointer-events:none;opacity:0;transform:scale(.85);transition:opacity .12s,transform .12s}#move-indicator::after{content:'';position:absolute;left:25px;top:25px;width:28px;height:28px;border-radius:50%;background:#d9fa65a8;transform:translate(var(--move-x,0px),var(--move-y,0px))}#move-indicator.active{opacity:1;transform:scale(1)}
#share-result[hidden]{display:none}#share-result{margin-top:9px;background:#214b37;color:#ecffd3;border:1px solid #9ac85f}
@media(max-width:780px){.mobile-settings #move-mode{border:1px solid #77965c;background:#294d37;border-radius:6px;padding:5px 10px;color:#e6f8c3;min-height:32px;font-size:11px}.game.anywhere .movement{display:none}.game.anywhere .controls{padding-left:16px;padding-right:16px}.game.anywhere #charge{min-height:76px}}
@media(max-height:500px) and (orientation:landscape){.game.anywhere .movement{display:none}.game.anywhere #charge{min-height:52px}}

#ai-style{position:absolute;top:9px;left:10px;max-width:calc(100% - 20px);padding:5px 8px;border:1px solid #b7d89b66;border-radius:5px;background:#102f25dc;color:#e4f5cf;font-size:10px;font-weight:700;letter-spacing:.2px;pointer-events:none}#overlay{z-index:1}@media(max-width:780px){#ai-style{font-size:9px;padding:4px 6px}}

html,body{overscroll-behavior:none}.toast{z-index:3}#share-game,#mobile-share-game{white-space:nowrap}#share-game:active,#mobile-share-game:active{transform:scale(.96)}@media(hover:none){button:hover{filter:none}}
@media(max-width:780px){#share-game{display:none}.mobile-settings #mobile-share-game{border:1px solid #77965c;background:#294d37;border-radius:6px;padding:5px 8px;color:#e6f8c3;min-height:32px;font-size:11px}}
@media(max-width:780px){.app{padding-top:env(safe-area-inset-top)}}

/* Echo the app icon's blue and charcoal while keeping the court green for quick reads. */
:root{color:#eef8ff;background:#0b111a}
button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible,input:focus-visible{outline-color:#55d8ff}
header{border-bottom-color:#273949}
.brand{color:#32caff}.brand b{color:#eef8ff}.brand small{color:#b9d3e3;border-color:#38566a}
nav button{background:#162737;border-color:#35556a}
.game{background:#10202c;border-color:#30475a}
.scoreboard{background:#101c29}.green{background:#32caff}
#status,.aimbar{color:#b4cad8}
.aimbar button{background:#1b3244;border-color:#446379;color:#d8ebf6}
.aimbar button.active{background:#32caff;border-color:#32caff;color:#092331}
.playfield{background:#102b30}
#overlay{background:#07131fba}.eyebrow{color:#67dcff}
p{color:#b3c9d5}.overlay-card p{color:#deedf4}
.overlay-card>button,.close-help{background:#32caff;color:#092331}
.overlay-card>small{color:#a9c2d0}
.toast{background:#102333ec;border-color:#47748a;color:#e6faff}
.controls,.mobile-settings{background:#122230;border-color:#355267}
.movement>span,.control-heading{color:#a1becf}
#joystick{background:#1b3546;border-color:#4f7890}.pad-arrows{color:#9bcfe6}
#stick{background:#3a718c;border-color:#80cce9;box-shadow:0 3px 8px #091a28}
#chosen,.label-row b,.rally-stat b{color:#32caff}
#tip,.rally-stat,.muted,.footnote{color:#9bb7c6}
.settings{background:#142635;border-color:#385468}.settings input{accent-color:#32caff}
.range-label,.settings small{color:#a1b8c7}.coach{border-left-color:#32caff}
.new-game{background:#1b3444;border-color:#4a6a7e;color:#deedf5}
dialog{background:#152838;color:#eef8ff;border-color:#527187}dialog::backdrop{background:#07131ecc}dialog li{color:#bfd5e1}
.charge-meter{background:#304554}.charge-meter>span{background:linear-gradient(90deg,#35c9ff,#7be6ff 55%,#ffbc68)}.charge-meter>i{border-left-color:#0e2634}
#charge{background:#32caff;color:#092331;border-color:#81e1ff}#charge.charging{background:#ffd071;box-shadow:inset 0 0 0 2px #fff4b0}
.mobile-settings select,.mobile-settings #move-mode,.mobile-settings #mobile-share-game{background:#1b3444;border-color:#4a6a7e;color:#e4f6ff}
#move-indicator{border-color:#32caff99;background:#32caff1e}#move-indicator::after{background:#32caffa8}
#share-result{background:#1b3444;color:#e4f6ff;border-color:#4a6a7e}
#ai-style{background:#102333dc;border-color:#5da3c066;color:#e4f6ff}