@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;700&display=swap');
:root{--ink:#123438;--cream:#f2efdf;--lime:#d7ef70;--orange:#fc7147}*{box-sizing:border-box}body{margin:0;background:var(--cream);font-family:'DM Sans',sans-serif;color:var(--ink)}button,select{font-family:inherit;cursor:pointer}button{border:0;font-weight:700}header{max-width:1260px;margin:auto;display:flex;align-items:center;gap:30px;padding:24px 40px;border-bottom:1px solid #12343825}.brand{font:900 italic 49px/.8 'Barlow Condensed',Impact,sans-serif;text-decoration:none;letter-spacing:-2px;color:var(--ink)}.brand span{display:block;font:700 8px/2.6 'DM Sans',sans-serif;letter-spacing:2px}.edition{margin-left:auto;text-align:right;font-size:9px;letter-spacing:1.5px;line-height:1.8}header button{background:none;border:1px solid #12343840;padding:10px;font-size:9px}main{max-width:1120px;margin:34px auto 45px;display:grid;grid-template-columns:1fr 480px;gap:90px;padding:0 30px}aside{padding-top:26px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700}h1{font:900 94px/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:-2px;margin:25px 0}h1 em{color:var(--orange)}aside>p{font-size:15px;line-height:1.7}.setting{margin-top:30px}.setting label{display:block;font-size:9px;letter-spacing:1.5px;font-weight:700;margin-bottom:9px}select{width:100%;max-width:300px;background:#e5e5d2;border:1px solid #12343830;padding:12px;color:var(--ink);font-size:12px}#holdState{font-size:9px;letter-spacing:1px;font-weight:700;margin-top:16px}aside .hint{max-width:300px;font-size:11px;line-height:1.6;color:#6a7c71}.guide{max-width:300px;border-top:1px solid #12343825;margin-top:28px;padding-top:24px}.guide b{font-size:10px;letter-spacing:1px}.guide p{font-size:11px;line-height:1.7;margin:7px 0 19px;color:#5b7066}.signature{font:800 23px 'Barlow Condensed',Impact,sans-serif;margin-top:30px}.signature small{display:block;font:500 8px/2.5 'DM Sans';letter-spacing:1px}.game-shell{background:#103b40;border-radius:20px;box-shadow:12px 14px 0 #153e3510;overflow:hidden;align-self:start}.canvas-wrap{position:relative;overflow:hidden;border-radius:20px 20px 0 0;background:#0e3439}canvas{width:100%;height:auto;display:block;touch-action:none}.scoreboard{position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);width:170px;height:65px;display:flex;align-items:center;justify-content:space-evenly;background:#072e34e8;border-radius:18px;color:var(--cream);box-shadow:0 3px 12px #03262d20;pointer-events:none}.scoreboard>div:first-child,.scoreboard>div:last-child{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:54px}.scoreboard>div:last-child{border-left:1px solid #a5c9bd25;padding-left:14px}.scoreboard>div>span{font-size:8px;letter-spacing:1px}.scoreboard strong{font:800 32px/1 'Barlow Condensed',Impact,sans-serif;color:#d9f569}.scoreboard>div:last-child strong{color:#f5edcf}.match-label,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.pause-button{position:absolute;z-index:6;right:16px;top:16px;width:38px;height:38px;border-radius:50%;background:#073039c9;color:#f3edcf;font-size:21px;line-height:1;box-shadow:0 2px 12px #10303120}#overlay{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--cream);background:linear-gradient(#102d3140,#102d31ed)}h2{font:900 78px/.83 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:24px 0}#overlay p{font-size:13px;line-height:1.8;color:#e2e7cb}#start{background:var(--lime);color:var(--ink);font-size:12px;letter-spacing:1px;padding:18px 30px;margin:15px 0}#overlay small{font-size:9px;color:#d4dcb7}#toast{position:absolute;z-index:3;left:0;right:0;top:28%;text-align:center;font:900 italic 29px 'Barlow Condensed',Impact,sans-serif;color:#f9f3c6;text-shadow:2px 3px #143234;pointer-events:none}.thumb-controls{position:absolute;z-index:4;bottom:22px;left:18px;right:18px;height:26%;display:grid;grid-template-columns:1fr 68px 1fr;align-items:end;pointer-events:none}.thumb-controls:before{content:'';position:absolute;z-index:-1;left:-18px;right:-18px;bottom:-22px;height:135%;background:linear-gradient(transparent,#0b343b77 25%,#0b343be8 85%);pointer-events:none}.move-zone,.swing-zone{display:flex;flex-direction:column;align-items:center;min-width:0;pointer-events:auto}.movement-pad{position:relative;width:min(100%,150px);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;border-radius:50%;background:radial-gradient(circle,#315c5930,#16474b18);outline-offset:4px}.pad-boundary{position:absolute;inset:7px;border:1.6px solid #e0e7ba88;border-radius:50%;box-shadow:inset 0 0 25px #47685917}.pad-inner{position:absolute;inset:27%;border:1px solid #95b4a51c;border-radius:50%}.movement-puck{position:absolute;left:50%;top:50%;width:32%;height:32%;border-radius:50%;background:linear-gradient(145deg,#e2fb83,#c7eb50);box-shadow:0 3px 14px #021f2e33;transform:translate(-50%,-50%);pointer-events:none}.movement-pad.active{cursor:grabbing}.movement-pad.active .pad-boundary{border-color:#e5f6b8bb}.control-caption{display:block;margin-top:10px;min-height:10px;text-align:center;color:#d9e4bd;font-size:7px;letter-spacing:1.7px;line-height:1.5;white-space:nowrap;pointer-events:none}.swing-wrap{position:relative;width:min(100%,158px);aspect-ratio:1;touch-action:none}.aim-dots{position:absolute;top:-25px;left:10%;width:80%;height:28px;overflow:visible;pointer-events:none}.aim-dots path{fill:none;stroke:#c6dfb840;stroke-width:1.4}.aim-dots circle{fill:#78958d;transition:fill .1s,r .1s}.aim-dots circle.selected{fill:#d9f56b;r:4.3;filter:drop-shadow(0 0 3px #d9f55b35)}#swing{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:transparent;color:#0c3941;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .13s ease;isolation:isolate}#swing:before{content:'';position:absolute;z-index:-1;inset:13px;border-radius:50%;background:linear-gradient(135deg,#fbf5dc,#e7e6c5);box-shadow:0 4px 18px #001d2c24,inset 0 1px 0 #ffffee99}.paddle-icon{width:31%;height:40%;fill:currentColor;pointer-events:none}#swingLabel{font-size:10px;letter-spacing:1.6px;pointer-events:none}#swing.holding{transform:scale(1.035)}#swing.holding:before{background:linear-gradient(135deg,#fbf9dd,#ebefc9)}.charge-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:filter .13s,transform .13s;overflow:visible}.charge-ring circle{fill:none;stroke-width:5}.ring-track{stroke:#87b7a22b}.ring-fill{stroke:#d7f669;stroke-linecap:round}#swing.holding+.charge-ring{filter:drop-shadow(0 0 4px #dbf87944);transform:scale(1.02)}#swing.holding+.charge-ring .ring-track{stroke:#b6d9b655}.rally-chip{align-self:center;justify-self:center;min-width:68px;margin-top:16px;padding:9px 7px;border:1px solid #92bcb52e;border-radius:20px;text-align:center;color:#dfe7c3;font-size:8px;letter-spacing:1.2px;background:#07323a38;white-space:nowrap}.court-bottom{display:flex;justify-content:space-between;align-items:center;padding:10px 15px 12px;color:#abc7bb;font-size:7px;letter-spacing:1px}.court-bottom button{background:none;color:#dfe9c6;font-size:8px;padding:5px}footer{max-width:1120px;margin:auto;padding:20px 30px;border-top:1px solid #12343820;font-size:8px;letter-spacing:1.3px;display:flex;justify-content:space-between}button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffad55;outline-offset:3px}@media(prefers-reduced-motion:reduce){#swing,.charge-ring,.aim-dots circle{transition:none}}@media(max-width:850px){main{gap:30px;grid-template-columns:1fr 440px}h1{font-size:70px}}@media(max-width:700px){header{padding:17px 18px;gap:15px}.brand{font-size:39px}.edition{font-size:7px}header button{font-size:7px;padding:8px}main{display:flex;flex-direction:column;max-width:500px;padding:0 10px;margin:12px auto 22px;gap:12px}aside{padding:0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}aside .eyebrow,aside>p,aside h1,.guide,.signature,.setting label{display:none}.setting{margin:0;flex:1}select{padding:9px;font-size:10px;max-width:none}#holdState{margin:0;font-size:7px;flex:1;text-align:right}aside .hint{display:block;margin:0;max-width:none;font-size:9px;flex-basis:100%}.game-shell{width:100%}.scoreboard{top:10px;width:150px;height:59px;border-radius:15px}.scoreboard strong{font-size:29px}.pause-button{right:12px;top:12px;width:34px;height:34px;font-size:18px}.thumb-controls{bottom:18px;left:12px;right:12px;grid-template-columns:1fr 61px 1fr}.thumb-controls:before{left:-12px;right:-12px;bottom:-18px}.control-caption{font-size:6px;letter-spacing:1.2px;margin-top:8px}.aim-dots{top:-23px;height:25px}.rally-chip{min-width:61px;font-size:7px;letter-spacing:.8px;padding:8px 5px}.court-bottom{font-size:6px;padding:6px 12px 8px}footer{font-size:6px;padding:15px}h2{font-size:70px}}
@media(max-width:700px){.movement-pad,.swing-wrap{width:min(100%,30vw,124px)}.aim-dots{top:-18px}}

.opponent-note{max-width:300px;margin-top:9px;font-size:11px;line-height:1.6}.opponent-note strong,.opponent-note span{display:block}.opponent-note span{color:#60766b;font-size:10px}@media(max-width:700px){.opponent-note{margin-top:5px;font-size:10px}.opponent-note span{font-size:9px}.setting{flex-basis:100%}#holdState{display:none}}

.slam-control{position:absolute;z-index:5;bottom:calc(100% + 28px);left:50%;transform:translateX(-50%);width:88px;height:29px;border-radius:18px;background:#103c41cf;color:#cbdab6;font-size:7px;letter-spacing:1px;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #afcfa333}.slam-control:disabled{cursor:default;opacity:.8}.slam-dots{display:flex;gap:3px}.slam-dots i{width:5px;height:5px;border-radius:50%;background:#77958b}.slam-dots i.lit{background:#d9f56b;box-shadow:0 0 5px #d9f56b66}.slam-control.ready{background:#dcf47a;color:#153d3d;box-shadow:0 0 12px #dcf47a55;border-color:#e9ffa9}.slam-control.ready .slam-dots{display:none}.slam-control.armed{background:#ffd28b;box-shadow:0 0 16px #ffba7766}

.character-picker{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;max-width:300px;margin-top:16px}.character-picker label{display:block;font-size:8px;font-weight:700;letter-spacing:1px;margin-bottom:6px}.character-picker select{width:100%;padding:10px 8px;font-size:11px}.character-picker small{grid-column:1/-1;font-size:9px;line-height:1.5;color:#60766b}@media(max-width:700px){.character-picker{flex-basis:100%;margin-top:0;max-width:none;gap:6px}.character-picker select{padding:8px;font-size:10px}.character-picker label{font-size:7px;margin-bottom:4px}.character-picker small{font-size:8px}}

#rallyMilestone{position:absolute;z-index:6;top:6px;left:8px;width:138px;height:82px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 2px #09252b80)}#rallyMilestone svg{display:block;width:100%;height:100%}#rallyMilestone.visible{animation:milestone-pop 2s both}#rallyMilestone .badge-ember{animation:ember-fade 2s both;animation-delay:calc(var(--i)*8ms)}#rallyMilestone.reduced.visible{animation:milestone-soft 2s both}#rallyMilestone.reduced .badge-ember{display:none}
#pointOverlay{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;background:#082d35d9;color:#f8edce;text-align:center;pointer-events:auto}#pointTitle{font:900 italic 32px Impact,sans-serif;letter-spacing:1px}#pointBadge,#matchBadge{width:78%;max-width:350px}#pointBadge:empty,#matchBadge:empty{display:none}#pointBadge svg,#matchBadge svg{width:100%;display:block}#pointOverlay p{font-size:11px;max-width:85%;line-height:1.6}#nextPoint{background:#d9ee81;color:#17393c;padding:12px 22px;font-size:10px;letter-spacing:1px}#matchBadge:not(:empty)~h2{font-size:42px;margin:10px 0}#matchBadge:not(:empty)~p{margin:7px 0}#matchBadge:not(:empty)~.eyebrow{display:none}
@keyframes milestone-pop{0%{opacity:0;transform:scale(.65)}8%{opacity:1;transform:scale(1.06)}15%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.03)}}@keyframes ember-fade{0%,80%{opacity:.9}100%{opacity:0;transform:translate(7px,-13px)}}@keyframes milestone-soft{0%,100%{opacity:0}8%,90%{opacity:1}}@media(max-width:700px){#rallyMilestone{top:9px;width:96px;height:57px}}@media(prefers-reduced-motion:reduce){#rallyMilestone.visible{animation:milestone-soft 2s both}#rallyMilestone .badge-ember{display:none}}

.effect-preferences{max-width:300px;margin:14px 0 6px;font-size:11px}.effect-preferences summary{cursor:pointer;padding:7px 0;font-weight:700}.effect-preferences label{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-right:10px;font-size:10px}.effect-preferences input{accent-color:#245b58;width:17px;height:17px}@media(max-width:700px){.effect-preferences{margin:0;flex-basis:100%;max-width:none;font-size:10px}.effect-preferences summary{padding:4px 0}.effect-preferences label{font-size:10px}}

#rallyMilestone.paused .badge-ember{animation-play-state:paused}#nextPoint{min-height:44px}

.milestone-art{display:block;width:100%;height:auto}#rallyMilestone{width:138px;height:92px}#pointBadge{width:96%;max-width:450px}#pointTitle{font-size:34px;color:#fff4ca;text-shadow:2px 3px #092e33}#pointRally{padding:9px 22px;border:1px solid #a6c6b955;border-radius:24px;background:#062d34a8;font-size:12px;font-weight:800;letter-spacing:1px}#pointRally strong{font-size:22px;color:#dff37b;margin-left:8px}#pointOverlay p{margin:10px 0;color:#c7d5c5}#nextPoint{min-width:65%;border-radius:40px;font-size:18px;background:linear-gradient(#ecffab,#d2f05c);margin-top:8px;padding:14px 20px;box-shadow:inset 0 -3px #a7c64c;color:#072c31}@media(max-width:700px){#rallyMilestone{width:96px;height:64px;top:4px}#pointTitle{font-size:28px}#pointRally{font-size:10px;padding:7px 20px}#nextPoint{font-size:16px}}

.character-picker .animation-link{grid-column:1/-1;font-size:9px;color:#245b58;letter-spacing:.5px;padding:6px 0;min-height:30px;display:block}

/* Each meter segment can fill by halves, including a quiet draining transition. */
.slam-dots i{position:relative;width:10px;height:6px;border-radius:2px;overflow:hidden;background:#5c7a73}.slam-dots i:after{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--fill,0)*100%);background:#d9f56b;transition:width .28s ease-out}.slam-control{width:94px;min-height:34px}.slam-control.earned{animation:slam-earned .65s ease-out}.slam-control.earned.reduced{animation:none;outline:2px solid #f5ffd2}.locker{max-width:300px;border-top:1px solid #12343825;margin-top:16px;padding:14px 0;font-size:10px}.locker summary{font-weight:700;letter-spacing:1px;cursor:pointer}.locker label{display:block;font-size:8px;letter-spacing:1px;margin:12px 0 7px}.locker p{font-size:10px;line-height:1.5;color:#60766b}.locker a{font-size:9px;color:#285b56;letter-spacing:.7px}@keyframes slam-earned{0%{transform:translateX(-50%) scale(.94)}35%{transform:translateX(-50%) scale(1.18);box-shadow:0 0 28px #e2ff9d}100%{transform:translateX(-50%) scale(1)}}@media(max-width:700px){.locker{flex-basis:100%;max-width:none;width:100%;margin:0;padding:8px 0}.locker select{max-width:none}.locker p{margin:5px 0}}@media(prefers-reduced-motion:reduce){.slam-control.earned{animation:none}.slam-dots i:after{transition:none}}

.audio-preferences{max-width:300px;margin:12px 0;color:#28554e;font-size:10px}.audio-preferences summary{cursor:pointer;font-weight:700}.audio-preferences label{display:block;font-size:10px;margin:12px 0 5px}.audio-preferences input{width:100%;accent-color:#40756a}.audio-preferences small{display:block;font-size:9px;line-height:1.5;margin:8px 0}.audio-preferences a{color:#28554e;font-size:9px}@media(max-width:700px){.audio-preferences{flex-basis:100%;max-width:none;width:100%}}