:root{--ink:#1c1626;--card:#fffdf7;--card2:#f1eadc;--mute:#6b6475;--home:#2a7de1;--away:#e0483c;--sun:#ffd84d;--lime:#c8ff3d;--teal:#18c29c;--orange:#ffb020;--sky:#7fc8ff;--violet:#9b6bff;--line:3px;--pop:0 4px 0 var(--ink);--popHi:0 7px 0 var(--ink);--popLo:0 1px 0 var(--ink);--ease-out:cubic-bezier(.16,1,.3,1);--ease-snap:cubic-bezier(.34,1.56,.64,1);--display:"Barlow Condensed",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,sans-serif;--tInk:var(--ink);--tCard:var(--card);--tHome:var(--home);--tAway:var(--away);--gold:var(--sun);--amber:var(--orange);--danger:var(--away)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#7fc8ff;font-family:var(--body);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}canvas{display:block;touch-action:none}button{font:inherit;color:inherit}.hidden{display:none!important}.fade{transition:opacity .2s ease}:focus{outline:none}:focus-visible{outline:3px solid var(--home);outline-offset:3px}kbd{display:inline-block;padding:0 6px;border-radius:5px;font:900 12px/1.5 var(--display);letter-spacing:.5px;color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--ink),0 2px 0 2px var(--ink)}.titleWord,.menuAsk,.pauseTitle,#callout,#cerLine,#breakClock,#combo{-webkit-text-stroke:var(--stroke,6px) var(--ink);paint-order:stroke fill}.celBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;cursor:pointer;font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:2px;color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:var(--pop);transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out),background .15s ease}.celBtn.primary{background:var(--sun)}.celBtn.danger{background:var(--away);color:#fff}.celBtn:hover,.celBtn:focus-visible{transform:translateY(-3px);box-shadow:var(--popHi)}.celBtn:active{transform:translateY(3px);box-shadow:var(--popLo)}.celBtn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:var(--pop)}#hud{position:fixed;inset:0;pointer-events:none;z-index:10;--st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px)}body.menuOpen #hud,body.menuOpen #touch{opacity:0;pointer-events:none}body.menuOpen #hud *{pointer-events:none!important}#scoreboard{position:absolute;top:calc(10px + var(--st));left:calc(10px + var(--sl));padding:4px 8px 4px 6px;background:var(--card);color:var(--ink);border:var(--line) solid var(--ink);border-radius:12px;box-shadow:var(--pop);transform-origin:top left;scale:var(--hudScale,1);transition:box-shadow .3s ease}#scoreboard .sbHead,#scoreboard .sbMeta{display:none}.teamRow{display:grid;grid-template-columns:8px 16px 16px auto 28px;gap:5px;align-items:center;padding:1px 0}.teamRow+.teamRow{border-top:2px solid rgba(28,22,38,.12)}.serverDot{width:8px;height:8px;border-radius:50%;justify-self:center;background:transparent}.teamRow.serving .serverDot{background:var(--orange);box-shadow:0 0 0 2px var(--ink);animation:servePulse 1.6s ease-in-out infinite}@keyframes servePulse{50%{transform:scale(1.35)}}.teamRow .sets,.teamRow .games{font:800 14px var(--display);text-align:center;color:#1c162680}.teamRow .games{color:var(--ink);font-weight:900}.names{display:flex;gap:4px;align-items:baseline;min-width:0;white-space:nowrap}.n1{font:900 13px var(--display);letter-spacing:1px}.n2{font:700 11px var(--display);letter-spacing:1px;color:#1c162680}.teamRow.home .n1{color:var(--home)}.teamRow.away .n1{color:var(--away)}.score{font:900 20px/1 var(--display);text-align:right;color:var(--ink)}#scoreboard.golden{box-shadow:var(--pop),0 0 0 3px var(--sun)}#scoreboard.practice .sets,#scoreboard.practice .games,#scoreboard.golden .sets,#scoreboard.golden .games,#scoreboard.quick .sets{opacity:.28}#scoreboard.lessonOn{display:none}#infoPanel{position:absolute;top:calc(12px + var(--st));right:calc(12px + var(--sr));text-align:right}#infoServe{display:inline-block;padding:1px 9px;font:900 12px var(--display);letter-spacing:2px;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink)}#infoServe:empty{display:none}#combo{--stroke:4px;margin-top:6px;font:900 18px var(--display);letter-spacing:2px;color:var(--sun);opacity:0}#pauseBtn{display:none;position:absolute;top:calc(8px + var(--st));right:calc(8px + var(--sr));width:44px;height:44px;border-radius:50%;pointer-events:auto;cursor:pointer;align-items:center;justify-content:center;gap:5px;background:var(--card);border:var(--line) solid var(--ink);box-shadow:var(--pop)}#pauseBtn i{display:block;width:5px;height:16px;border-radius:2px;background:var(--ink)}#pauseBtn:active{transform:translateY(3px);box-shadow:var(--popLo)}#callout{--stroke:7px;position:absolute;top:18%;left:50%;transform:translate(-50%);font:900 clamp(28px,5.4vw,52px)/1 var(--display);letter-spacing:2px;white-space:nowrap;text-shadow:0 5px 0 var(--ink);opacity:0;pointer-events:none;scale:var(--hudScale,1);transition:opacity .2s ease}#vitals{position:absolute;left:50%;bottom:calc(10px + var(--sb));transform:translate(-50%);width:min(320px,70vw);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}@keyframes blink{50%{opacity:.5}}#playHint{padding:2px 12px;border-radius:999px;text-align:center;font:800 13px var(--display);letter-spacing:1px;color:var(--ink);background:var(--card);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}#playHint:empty{display:none}#bubble{position:absolute;left:0;top:0;transform:translate(-50%,-100%);font:900 18px var(--display);letter-spacing:1px;white-space:nowrap;color:var(--ink);background:var(--card);padding:4px 12px;border-radius:12px;box-shadow:0 0 0 3px var(--ink),0 4px 0 var(--ink);pointer-events:none;opacity:0;scale:var(--hudScale,1)}#bubble:after{content:"";position:absolute;left:50%;bottom:-9px;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--ink);border-bottom:0}#keys{position:absolute;right:calc(14px + var(--sr));bottom:calc(12px + var(--sb));max-width:min(560px,70vw);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 12px;pointer-events:none;font:700 12px var(--display);letter-spacing:.5px;color:#fff;text-shadow:0 1px 0 var(--ink),0 0 6px rgba(28,22,38,.7);transform-origin:bottom right;scale:var(--hudScale,1)}#keys span{white-space:nowrap}#keys kbd{margin-right:4px;text-shadow:none}#keys.off{display:none}#lesson{position:absolute;top:calc(12px + var(--st));left:calc(12px + var(--sl));width:min(420px,calc(100vw - 32px));background:var(--card);color:var(--ink);border-radius:14px;padding:10px 14px;pointer-events:none;border:var(--line) solid var(--ink);box-shadow:var(--pop);font-family:var(--display);transform-origin:top left;scale:var(--hudScale,1)}.lsHead{display:flex;gap:10px;align-items:baseline}.lsHead span{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--mute)}.lsHead b{font-size:20px;font-weight:900;letter-spacing:2px}.lsHow{font-size:15px;font-weight:600;line-height:1.25;margin:4px 0 6px}.lsMiss{font-size:12px;font-weight:900;letter-spacing:1px;margin:0 0 6px;color:#d94a2b}.lsGoal{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:900;letter-spacing:1px;color:var(--home)}.lsDots{display:flex;gap:5px}.lsDots i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px var(--ink);background:var(--card2)}.lsDots i.on{background:var(--teal)}.lsClock{font-size:22px;color:var(--ink)}#netBadge{position:absolute;top:calc(44px + var(--st));right:calc(12px + var(--sr));display:flex;align-items:center;gap:7px;padding:2px 10px;pointer-events:none;font:900 11px var(--display);letter-spacing:1.5px;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 var(--ink)}.netDot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 2px var(--ink)}#netBadge.warn .netDot{background:var(--orange)}#netBadge.bad .netDot{background:var(--away);animation:blink .8s steps(1) infinite}.netRole{color:var(--mute)}#replayBug{position:absolute;top:calc(14px + var(--st));right:calc(14px + var(--sr));z-index:12;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 12px;pointer-events:none;font-family:var(--display);background:var(--card);border:var(--line) solid var(--ink);border-radius:12px;box-shadow:var(--pop)}.replayDot{width:12px;height:12px;border-radius:50%;background:var(--away);box-shadow:0 0 0 2px var(--ink);animation:blink .9s steps(1) infinite}.replayWord{font-size:20px;font-weight:900;letter-spacing:3px}#replayLabel{font-size:13px;font-weight:800;letter-spacing:1.5px;color:var(--home)}#letterbox{position:absolute;inset:0;pointer-events:none;z-index:9}#letterbox .lbTop,#letterbox .lbBot{position:absolute;left:0;right:0;height:7.5vh;background:var(--ink)}#letterbox .lbTop{top:0}#letterbox .lbBot{bottom:0}#saveClip{position:absolute;left:50%;bottom:calc(64px + var(--sb));transform:translate(-50%);pointer-events:auto}#saveClip:hover{transform:translate(-50%) translateY(-3px)}#ceremony{position:absolute;left:50%;top:16%;transform:translate(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;pointer-events:none;font-family:var(--display)}#cerKind{padding:2px 14px;font-size:14px;font-weight:900;letter-spacing:4px;color:#fff;background:var(--violet);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:var(--pop)}#cerLine{--stroke:7px;font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:2px;color:var(--card);text-shadow:0 5px 0 var(--ink)}#cerSkip{padding:1px 10px;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px}#breakClock{--stroke:8px;position:absolute;right:calc(22px + var(--sr));bottom:22%;z-index:12;pointer-events:none;font:900 72px var(--display);color:var(--sun);text-shadow:0 6px 0 var(--ink)}#pauseMenu{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));background:#1c162680;backdrop-filter:blur(4px);pointer-events:auto}.pauseCard{position:relative;max-height:100%;overflow:auto;width:min(340px,100%);display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:20px 22px 18px;background:var(--card);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);animation:popIn .32s var(--ease-snap) both}.musicBtn{position:relative;flex:none;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);box-shadow:var(--pop);transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out)}.musicBtn svg{width:22px;height:22px;display:block}.musicBtn:hover,.musicBtn:focus-visible{transform:translateY(-2px);box-shadow:var(--popHi)}.musicBtn:active{transform:translateY(3px);box-shadow:var(--popLo)}.musicBtn.off{color:var(--ink)}.musicBtn.off .waves{opacity:0}.musicBtn.off:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:24px;margin:-12px 0 0 -1.5px;background:var(--away);border-radius:2px;transform:rotate(40deg);box-shadow:0 0 0 2px var(--card)}.pauseCard .musicBtn{position:absolute;z-index:2;top:14px;right:14px}.pauseTitle{--stroke:7px;text-align:center;font:900 46px/1 var(--display);letter-spacing:4px;color:var(--sun);text-shadow:0 5px 0 var(--ink);margin:0 52px 6px}.pauseHint{text-align:center;font:800 11px var(--display);letter-spacing:3px;color:var(--mute)}#matchOver{position:absolute;inset:0;z-index:14;display:flex;overflow:hidden;padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));background:#1c16268c;pointer-events:auto;container-type:size;container-name:result;--burst:var(--sun)}#matchOver.lose{--burst:var(--sky)}.moBurst{position:fixed;left:50%;top:50%;width:250vmax;height:250vmax;margin:-125vmax 0 0 -125vmax;pointer-events:none;background:repeating-conic-gradient(var(--burst) 0deg 9deg,transparent 9deg 18deg);opacity:.28;animation:spin 60s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.moCard{position:relative;margin:auto;width:min(440px,100%);max-height:100%;display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--card);border:4px solid var(--ink);border-radius:22px;box-shadow:0 10px 0 var(--ink);animation:popIn .45s var(--ease-snap) both}.moHead{flex:none;display:grid;align-items:center;gap:2px 10px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy music" "score score";padding:14px 14px 12px 16px;background:var(--sun);border-bottom:4px solid var(--ink)}#matchOver.lose .moHead{background:var(--sky)}.moHeadCopy{grid-area:copy;min-width:0}.moCard .musicBtn{grid-area:music;position:static;justify-self:end}.moKicker{font:900 clamp(32px,7vw,48px)/.85 var(--display);letter-spacing:1px}#matchOverTitle{margin-top:3px;font:800 clamp(14px,2.4vw,18px)/1.2 var(--display);letter-spacing:.5px}.moScore{grid-area:score;display:flex;align-items:baseline;gap:10px;font:900 clamp(52px,14vw,76px)/.85 var(--display)}.moScore:empty{display:none}.moScore .h{color:var(--home)}.moScore .a{color:var(--away)}.moScore i{font-style:normal;color:var(--ink);font-size:.55em;opacity:.45}.moScore small{font-size:13px;letter-spacing:2px;color:var(--ink);opacity:.7}.moBody{flex:1 1 auto;min-height:0;overflow:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:10px;padding:12px 14px}.moMain{display:flex;flex-direction:column;gap:10px;min-width:0}#recapStats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}.recapCell{padding:7px 4px 6px;text-align:center;background:var(--card2);border:2.5px solid var(--ink);border-radius:12px}.recapVal{font:900 clamp(20px,4.5vw,26px)/1 var(--display)}.recapLbl{margin-top:2px;font:800 10px var(--display);letter-spacing:1px;color:var(--mute)}#recapCoach{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px;background:var(--card2);border:2.5px solid var(--ink);border-radius:14px}#recapCoach:not(:has(#coachHead:not(:empty),#coachNotes li,#careerNote:not(:empty),#recapTrends li)){display:none}#coachHead{font:900 16px/1.15 var(--display);letter-spacing:1px;color:var(--home)}#coachHead:empty{display:none}#coachNotes{list-style:none;display:flex;flex-direction:column;gap:6px}#coachNotes li{font:500 13px/1.35 var(--body);padding:0 0 0 10px;border-left:4px solid var(--teal)}#careerNote{font:800 12px var(--display);letter-spacing:1px;color:var(--mute)}#careerNote:empty{display:none}#careerNote.up{color:var(--teal)}#careerNote.down{color:var(--away)}.moFoot{flex:none;display:flex;flex-direction:column;gap:6px;align-items:center;padding:0 14px 12px}#recapActions{display:flex;gap:8px;width:100%}#recapActions .celBtn{flex:1 1 0;min-width:0;min-height:46px;padding:0 8px;font-size:clamp(15px,3.2vw,20px);letter-spacing:.5px}.moHint{font:800 11px var(--display);letter-spacing:1px;color:var(--mute);text-align:center}@keyframes popIn{0%{opacity:0;transform:scale(.88) translateY(14px)}to{opacity:1;transform:none}}@container result (min-width: 640px){.moCard{width:min(920px,100%)}.moHead{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"copy score music";padding:12px 14px 12px 18px}.moScore{font-size:clamp(44px,8vh,68px);justify-self:end}.moBody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);align-items:stretch;overflow:hidden}.moMain,#recapCoach{min-height:0;overflow:auto}}@container result (max-height: 460px){.moHead{padding:8px 10px}.moKicker{font-size:26px}#matchOverTitle{font-size:13px;margin-top:0}.moScore{font-size:40px;gap:8px}.moBody{padding:8px 10px;gap:6px}.moMain{gap:6px}.recapCell{padding:3px 2px 2px}.recapVal{font-size:18px}.recapLbl{font-size:9px}#recapCoach{padding:6px 8px;gap:4px}#coachNotes li{font-size:12px;line-height:1.3}.moFoot{padding:0 10px 8px}#recapActions .celBtn{min-height:40px}.moCard .musicBtn{width:36px;height:36px}.moCard .musicBtn svg{width:18px;height:18px}}#touch{display:none;position:fixed;inset:0;z-index:9;pointer-events:none;--ring:clamp(92px,26vmin,140px);--top:clamp(84px,25vmin,132px);--btn:clamp(58px,17vmin,84px);--gap:clamp(14px,4.5vmin,26px);--edge:clamp(12px,3.5vmin,22px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);-webkit-touch-callout:none}#touch.visible{display:block}#stickZone{position:absolute;left:0;bottom:0;width:48%;height:72%;pointer-events:auto;touch-action:none}#stickBase{position:absolute;left:calc(var(--sl) + var(--edge) + var(--ring) / 2);top:calc(100% - var(--sb) - var(--edge) - var(--ring) / 2);width:var(--ring);height:var(--ring);transform:translate(-50%,-50%);border-radius:50%;opacity:.7;border:var(--line) solid var(--ink);background:#fffdf740;box-shadow:0 4px #1c16268c}#stickZone.live #stickBase{opacity:1}#stickKnob{position:absolute;left:50%;top:50%;width:44%;height:44%;border-radius:50%;background:var(--card);border:var(--line) solid var(--ink);box-shadow:0 3px 0 var(--ink);transform:translate(-50%,-50%)}.shotBtn{position:absolute;border-radius:50%;pointer-events:auto;touch-action:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--display);font-weight:900;letter-spacing:1px;font-size:clamp(13px,3.6vmin,17px);color:var(--ink);border:var(--line) solid var(--ink);box-shadow:0 4px 0 var(--ink);opacity:.92;transition:transform .06s ease,box-shadow .06s ease;--d:calc(var(--top) / 2 + var(--gap) + var(--btn) / 2);--cx:calc(var(--sr) + var(--edge) + var(--top) / 2);--cy:calc(var(--sb) + var(--edge) + var(--top) / 2)}#swingZone{right:calc(var(--sr) + var(--edge));bottom:calc(var(--sb) + var(--edge));width:var(--top);height:var(--top);background:var(--lime);font-size:clamp(15px,4.2vmin,20px);letter-spacing:2px}#sliceBtn{right:calc(var(--cx) + var(--d) * .966 - var(--btn) / 2);bottom:calc(var(--cy) + var(--d) * .259 - var(--btn) / 2);width:var(--btn);height:var(--btn);background:var(--sky)}#lobBtn{right:calc(var(--cx) + var(--d) * .174 - var(--btn) / 2);bottom:calc(var(--cy) + var(--d) * .985 - var(--btn) / 2);width:var(--btn);height:var(--btn);background:var(--orange)}.shotBtn.hot{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 var(--ink);opacity:1;filter:brightness(1.08)}#smashBtn{--r:calc(var(--d) + var(--btn) * .85);right:calc(var(--cx) + var(--r) * .682 - var(--btn) * .55);bottom:calc(var(--cy) + var(--r) * .731 - var(--btn) * .55);width:calc(var(--btn) * 1.1);height:calc(var(--btn) * 1.1);background:var(--away);color:#fff;text-shadow:0 2px 0 var(--ink);opacity:.38;filter:saturate(.35);transform:scale(.8);transition:opacity .12s ease,transform .18s var(--ease-snap,ease),filter .12s ease}#smashBtn.on,#smashBtn.hot{opacity:1;filter:none;transform:none}#smashBtn.hot{transform:translateY(3px) scale(.96)}#start{position:fixed;inset:0;z-index:20;color:var(--ink);--st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px)}#start.leaving{pointer-events:none}#start.leaving .menuStep.on,#start.leaving .menuChrome,#start.leaving .menuRail{opacity:0;transform:translate3d(0,10px,0)}#start.leaving:not([data-step=title]) .menuStep.on{transform:translate(-50%) translateY(16px)}.menuWash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(28,22,38,.28),transparent 22%,transparent 70%,rgba(28,22,38,.4))}#start[data-step=title] .menuWash{background:radial-gradient(ellipse at 50% 42%,#ffd84d33,#1c16260d 46%,#1c162680)}.menuRail{position:absolute;left:0;top:0;bottom:0;width:min(720px,64vw);pointer-events:none;opacity:0;background:linear-gradient(100deg,#100c18d1,#100c189e 58%,#100c1800)}#start:not([data-step=title]) .menuRail{opacity:0}#start:not([data-step=title]) .menuWash{background:linear-gradient(90deg,rgba(16,12,24,.5),transparent 16%,transparent 84%,rgba(16,12,24,.5)),linear-gradient(180deg,rgba(16,12,24,.28),transparent 22%,transparent 78%,rgba(16,12,24,.4))}.menuChrome{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(14px + var(--st)) calc(18px + var(--sr)) 0 calc(18px + var(--sl))}#start[data-step=title] .menuBack,#start[data-step=title] .menuCrumbs,#start[data-step=title] .menuMark{display:none}#start[data-step=title] .musicBtn{margin-left:auto}.menuBack{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 10px;cursor:pointer;font:900 17px var(--display);letter-spacing:2px;color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:var(--pop);transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out)}.menuBack b{font-size:28px;line-height:0;margin-top:-3px}.menuBack:hover,.menuBack:focus-visible{transform:translateY(-2px);box-shadow:var(--popHi)}.menuBack:active{transform:translateY(3px);box-shadow:var(--popLo)}.menuCrumbs{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;flex:1}.crumb{flex:none;padding:3px 10px;border:0;border-radius:999px;cursor:pointer;background:#1c16268c;font:800 13px var(--display);letter-spacing:2px;color:#ffffffd9}.crumb:hover,.crumb:focus-visible{background:var(--card);color:var(--ink)}.crumb.on{background:var(--sun);color:var(--ink);box-shadow:0 0 0 2px var(--ink);cursor:default}.crumbSep{flex:none;color:#fff;font:900 14px var(--display);text-shadow:0 1px 0 var(--ink)}.menuMark{--stroke:4px;margin-left:auto;flex:none;font:900 22px var(--display);letter-spacing:4px;color:var(--card);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}.menuStep{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;padding:calc(80px + var(--st)) calc(24px + var(--sr)) calc(28px + var(--sb)) calc(24px + var(--sl));overflow-y:auto;overflow-x:hidden;touch-action:pan-y;opacity:0;pointer-events:none;transform:translate3d(24px,0,0);transition:opacity .25s ease,transform .3s var(--ease-out)}.menuStep.back{transform:translate3d(-24px,0,0)}.menuStep.on{opacity:1;pointer-events:auto;transform:none}#start:not([data-step=title]) .menuStep{inset:auto;top:calc(68px + var(--st));bottom:calc(22px + var(--sb));left:50%;width:min(680px,calc(100% - 32px));height:auto;max-height:none;align-items:stretch;justify-content:flex-start;gap:12px;padding:16px 16px 14px;overflow:auto;background:linear-gradient(180deg,#fffdf7 0%,var(--card) 55%,color-mix(in srgb,var(--card) 90%,var(--ink)) 100%);color:var(--ink);border:4px solid var(--ink);border-radius:22px;box-shadow:0 10px 0 var(--ink),0 28px 54px #100c1873,inset 0 3px #ffffffe6;transform:translate(-50%);transition:opacity .2s ease}#start:not([data-step=title]) #stepMain{width:min(1080px,calc(100% - 40px));overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.9fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch}#start:not([data-step=title]) :is(#stepName,#stepFormat,#stepSide,#stepOnline,#stepRoom,#stepDiff){top:50%;bottom:auto;height:auto;max-height:calc(100dvh - 120px - var(--st) - var(--sb));transform:translate(-50%,-50%);overflow:auto}#start:not([data-step=title]) .menuStep.on{animation:boardIn .55s var(--ease-snap) backwards;transform-origin:50% 100%}@keyframes boardIn{0%{opacity:0;transform:translate(-50%) perspective(900px) rotateX(26deg) translateY(44px) scale(.92)}to{opacity:1;transform:translate(-50%) perspective(900px) rotateX(0) translateY(0) scale(1)}}#start:not([data-step=title]) :is(#stepName,#stepFormat,#stepSide,#stepOnline,#stepRoom,#stepDiff).on{animation:boardInMid .55s var(--ease-snap) backwards}@keyframes boardInMid{0%{opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateX(26deg) translateY(44px) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) perspective(900px) rotateX(0) translateY(0) scale(1)}}#start:not([data-step=title]) .menuStep.on>*{animation:itemIn .38s var(--ease-out) backwards}#start:not([data-step=title]) .menuStep.on>*:nth-child(1){animation-delay:.05s}#start:not([data-step=title]) .menuStep.on>*:nth-child(2){animation-delay:.1s}#start:not([data-step=title]) .menuStep.on>*:nth-child(3){animation-delay:.16s}@keyframes itemIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}#start:not([data-step=title]) .menuKicker{align-self:stretch;margin:0;text-align:center;border-radius:12px;box-shadow:0 3px 0 var(--ink);background:repeating-linear-gradient(-45deg,var(--sun) 0 14px,color-mix(in srgb,var(--sun) 82%,#fff) 14px 28px)}#start{--stepAcc:var(--home)}#start:is([data-step=academy],[data-step=side]){--stepAcc:var(--teal)}#start[data-step=tour]{--stepAcc:var(--orange)}#start:is([data-step=online],[data-step=room],[data-step=lobby]){--stepAcc:var(--away)}#start:is([data-step=diff],[data-step=daily]){--stepAcc:var(--violet)}#start:not([data-step=title]) .menuStep>.menuAsk{--stroke:6px;position:relative;align-self:flex-start;max-width:calc(100% - 12px);margin:4px 0 10px 8px;padding:6px 22px 12px;font-size:clamp(28px,4.2vw,46px);line-height:1;letter-spacing:1.5px;color:#fff;text-shadow:0 3px 0 var(--ink),0 6px 0 var(--ink);background:repeating-linear-gradient(-55deg,rgba(255,255,255,.13) 0 10px,transparent 10px 22px),linear-gradient(180deg,color-mix(in srgb,var(--stepAcc) 72%,#fff) 0%,var(--stepAcc) 50%,color-mix(in srgb,var(--stepAcc) 78%,#000) 100%);border:4px solid var(--ink);border-radius:14px;box-shadow:0 6px 0 var(--ink),inset 0 3px #ffffff73;transform:skew(-8deg) rotate(-1.5deg);overflow:hidden}#start:not([data-step=title]) .menuStep.on>.menuAsk{animation:askSlam .6s var(--ease-snap) .1s backwards}#start:not([data-step=title]) .menuStep>.menuAsk:after{content:"";position:absolute;top:-30%;bottom:-30%;left:-45%;width:28%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skew(-20deg);animation:sweep 3.4s ease-in-out .9s infinite}@keyframes askSlam{0%{opacity:0;transform:skew(-8deg) rotate(-7deg) scale(1.4)}60%{opacity:1;transform:skew(-8deg) rotate(.5deg) scale(.96)}to{opacity:1;transform:skew(-8deg) rotate(-1.5deg) scale(1)}}@keyframes sweep{0%{left:-45%}32%,to{left:135%}}#start:not([data-step=title]) .menuNote{color:var(--ink);background:var(--card2)}#start:not([data-step=title]) #playerName,#start:not([data-step=title]) #roomCode{width:100%;background:#fff}.menuStep>*{flex:none}#stepMain>*{min-width:0;min-height:0}.menuKicker{margin:0 0 10px;padding:3px 14px;border-radius:999px;font:900 13px var(--display);letter-spacing:3px;color:var(--ink);background:var(--sun);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink)}.menuAsk{--stroke:7px;margin:0 0 18px;max-width:18ch;font:900 clamp(32px,5.4vw,52px)/.95 var(--display);letter-spacing:1.5px;color:var(--card);text-shadow:0 5px 0 var(--ink)}.menuNote{margin-top:14px;max-width:40ch;padding:8px 12px;border-radius:12px;font:600 13px/1.45 var(--body);color:#fff;background:#1c162699}.menuNote:empty{display:none}.menuList{display:grid;grid-template-columns:1fr;gap:10px;width:min(520px,100%);padding-top:4px}.mainList{grid-template-columns:repeat(3,1fr);counter-reset:mode}.mainList .menuChoice:not(.quiet){grid-column:1 / -1;counter-increment:mode}.menuChoice,.menuRow{position:relative;display:flex;cursor:pointer;text-align:left;min-height:62px;padding:8px 16px 8px 14px;font-family:var(--display);color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);border-left-width:14px;border-left-color:var(--acc,var(--home));border-radius:16px;box-shadow:var(--pop);transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out),background .12s ease,color .12s ease}.menuChoice{flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.menuChoice span{font-size:clamp(26px,4.4vw,34px);font-weight:900;letter-spacing:1.5px;line-height:1}.menuChoice em,.menuRow em{font-style:normal;font-family:var(--body);font-size:13px;font-weight:600;color:var(--mute);letter-spacing:0}.menuChoice.quiet{min-height:52px;border-left-width:var(--line);border-left-color:var(--ink);background:var(--card2);align-items:center}.menuChoice.quiet span{font-size:22px;letter-spacing:2px}.menuRow{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;min-height:58px;font-size:clamp(22px,3.6vw,28px);font-weight:900;letter-spacing:1.5px;line-height:1}.menuRow em{text-align:right}.menuChoice:hover,.menuChoice:focus-visible,.menuRow:hover,.menuRow:focus-visible{transform:translateY(-3px);box-shadow:var(--popHi);background:color-mix(in srgb,var(--acc,var(--sun)) 18%,var(--card))}.menuChoice:focus-visible,.menuRow:focus-visible{outline:3px solid var(--card);outline-offset:3px}.menuChoice:active,.menuRow:active{transform:translateY(3px);box-shadow:var(--popLo)}#start .menuList{width:100%}#start .menuChoice,#start .menuRow{overflow:hidden;box-shadow:0 5px 0 var(--ink),inset 0 2px #ffffffbf;transition:transform .18s var(--ease-snap),box-shadow .18s var(--ease-out),background .12s ease,color .12s ease}#start .menuChoice:not(.quiet),#start .menuRow{background:linear-gradient(180deg,#fffaf0,var(--card2));color:var(--ink);border-left-width:12px;border-left-color:var(--acc,var(--home))}#start .menuChoice:before,#start .menuRow:before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:24%;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:skew(-20deg)}#start .menuChoice:is(:hover,:focus):before,#start .menuRow:is(:hover,:focus):before{opacity:1;animation:sweep 1.6s ease-out infinite}#start .menuChoice:not(.quiet){min-height:64px;padding:8px 16px}#start .menuChoice:not(.quiet) span{font-size:clamp(26px,3.6vw,34px);letter-spacing:1px}#start .menuChoice:not(.quiet) span:before{content:counter(mode,decimal-leading-zero);margin-right:10px;font-size:.45em;letter-spacing:1px;color:var(--acc,var(--home));vertical-align:.28em}#start .menuChoice:not(.quiet) em,#start .menuRow em{color:var(--mute);text-shadow:none}#start .menuRow{min-height:56px;padding:8px 14px;font-size:clamp(22px,3.2vw,28px);text-shadow:none}#start .menuRow span{-webkit-text-stroke:0;text-shadow:none}#start .menuChoice:not(.quiet):is(:hover,:focus),#start .menuRow:is(:hover,:focus){background:linear-gradient(180deg,color-mix(in srgb,var(--acc,var(--sun)) 70%,#fff),var(--acc,var(--sun)) 60%);color:var(--ink);border-left-color:var(--ink);box-shadow:0 8px 0 var(--ink),0 16px 24px #100c1838,inset 0 2px #fff9;transform:translateY(-3px) scale(1.012)}#start .menuList:hover .menuChoice:not(.quiet):focus:not(:hover),#start .menuList:hover .menuRow:focus:not(:hover){background:linear-gradient(180deg,#fffaf0,var(--card2));color:var(--ink);border-left-color:var(--acc,var(--home));box-shadow:0 5px 0 var(--ink),inset 0 2px #ffffffbf;transform:none}#start .menuList:hover :is(.menuChoice,.menuRow):focus:not(:hover):before{opacity:0;animation:none}#start :is(.menuChoice,.menuRow):focus-visible{outline:none}#start .menuChoice:not(.quiet):is(:hover,:focus) span:before,#start .menuChoice:not(.quiet):is(:hover,:focus) em,#start .menuRow:is(:hover,:focus) em{color:var(--ink)}#start .menuList:hover .menuChoice:not(.quiet):focus:not(:hover) span:before{color:var(--acc,var(--home))}#start .menuList:hover .menuChoice:not(.quiet):focus:not(:hover) em,#start .menuList:hover .menuRow:focus:not(:hover) em{color:var(--mute)}#start .menuList>*{animation:itemIn .36s var(--ease-out) backwards}#start .menuList>*:nth-child(1){animation-delay:.12s}#start .menuList>*:nth-child(2){animation-delay:.16s}#start .menuList>*:nth-child(3){animation-delay:.2s}#start .menuList>*:nth-child(4){animation-delay:.24s}#start .menuList>*:nth-child(5){animation-delay:.28s}#start .menuList>*:nth-child(6){animation-delay:.32s}#start .menuChoice.quiet:is(:hover,:focus){background:var(--sun);transform:translateY(-3px);box-shadow:0 8px 0 var(--ink),0 14px 20px #100c1833,inset 0 2px #fff9}#start .menuRow.locked:is(:hover,:focus){background:var(--card2);transform:none;box-shadow:0 5px 0 var(--ink)}#start .menuRow.locked:before{display:none}#start .menuChoice:active,#start .menuRow:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink),inset 0 3px #1c162633;transition-duration:.05s}#start .menuRow.picked:after{left:auto;right:12px;transform:translateY(-50%)}#stepMain .menuKicker{grid-column:1 / -1}#stepMain .mainList{grid-column:1;grid-row:2;width:100%;height:100%;padding:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,minmax(0,1fr)) auto;gap:8px}#stepMain .menuChoice:not(.quiet){grid-column:1 / -1;min-height:0;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 0 14px;border-radius:14px;border-left-width:14px}#stepMain .menuChoice:not(.quiet) span{font-size:clamp(28px,2.8vw,44px);letter-spacing:.5px;white-space:nowrap}#stepMain .menuChoice:not(.quiet) em{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#stepMain .menuChoice.quiet{min-height:48px;border-radius:14px}#stepMain .menuChoice:is(:hover,:focus){transform:translateY(-2px)}.modeStage{position:relative;border:4px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--ink);box-shadow:0 6px 0 var(--ink),inset 0 0 0 3px #ffffff2e}.modePlate{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 18px 20px;color:var(--ink);pointer-events:none;background:repeating-linear-gradient(-16deg,transparent,transparent 16px,rgba(28,22,38,.07) 16px,rgba(28,22,38,.07) 18px),var(--acc);opacity:0;transform:scale(1.08) rotate(1deg);transition:opacity .16s ease,transform .38s var(--ease-snap)}.modePlate b{position:absolute;top:-6px;right:8px;font:900 clamp(88px,12vw,150px)/.8 var(--display);letter-spacing:-2px;color:var(--ink);opacity:.22}.modePlate strong{font:900 clamp(40px,4.6vw,68px)/.88 var(--display);letter-spacing:1px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink),0 8px 0 var(--ink);transform:skew(-6deg);transform-origin:left bottom}.modePlate span{font:700 16px/1.3 var(--body);max-width:22ch}#stepMain:not(:has(.menuChoice:is(:hover,:focus))) .modePlate[data-mode=academy],#stepMain:not(:has(.menuChoice:hover)):has([data-go=academy]:focus) .modePlate[data-mode=academy],#stepMain:not(:has(.menuChoice:hover)):has([data-go=tour]:focus) .modePlate[data-mode=tour],#stepMain:not(:has(.menuChoice:hover)):has([data-go=challenges]:focus) .modePlate[data-mode=challenges],#stepMain:not(:has(.menuChoice:hover)):has([data-go=player]:focus) .modePlate[data-mode=player],#stepMain:not(:has(.menuChoice:hover)):has([data-go=play]:focus) .modePlate[data-mode=play],#stepMain:not(:has(.menuChoice:hover)):has([data-go=online]:focus) .modePlate[data-mode=online],#stepMain:not(:has(.menuChoice:hover)):has([data-go=practice]:focus) .modePlate[data-mode=practice],#stepMain:not(:has(.menuChoice:hover)):has([data-open=options]:focus) .modePlate[data-mode=options],#stepMain:has([data-go=academy]:hover) .modePlate[data-mode=academy],#stepMain:has([data-go=tour]:hover) .modePlate[data-mode=tour],#stepMain:has([data-go=challenges]:hover) .modePlate[data-mode=challenges],#stepMain:has([data-go=player]:hover) .modePlate[data-mode=player],#stepMain:has([data-go=play]:hover) .modePlate[data-mode=play],#stepMain:has([data-go=online]:hover) .modePlate[data-mode=online],#stepMain:has([data-go=practice]:hover) .modePlate[data-mode=practice],#stepMain:has([data-open=options]:hover) .modePlate[data-mode=options]{opacity:1;transform:none}.menuRow.picked{background:color-mix(in srgb,var(--sun) 30%,var(--card))}.menuRow.picked:after{content:"✓";position:absolute;left:-7px;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:900 13px var(--body);color:var(--ink);background:var(--sun);box-shadow:0 0 0 2.5px var(--ink)}.menuRow.locked{opacity:.5;cursor:not-allowed;filter:grayscale(.7)}.menuRow.locked:hover{transform:none;box-shadow:var(--pop);background:var(--card)}#stepFormat .menuRow{--acc:var(--home)}#stepSide .menuRow,#stepDiff [data-diff=club]{--acc:var(--teal)}#stepDiff [data-diff=challenger]{--acc:var(--orange)}#stepDiff [data-diff=pro],#stepOnline .menuRow{--acc:var(--away)}#academyList{gap:8px}#academyList .menuRow{--acc:var(--teal);min-height:46px}#tourBody .menuRow{--acc:var(--orange)}.recTag{position:absolute;top:8px;right:10px;transform:rotate(2deg);padding:1px 8px;border-radius:999px;font:900 11px/1.6 var(--display);letter-spacing:2px;color:var(--ink);background:var(--lime);box-shadow:0 0 0 2.5px var(--ink)}#start .menuChoice.hot:not(:hover):not(:focus){animation:nudge 2.4s ease-in-out infinite}@keyframes nudge{0%,80%,to{transform:none}88%{transform:rotate(-1deg) translateY(-2px)}94%{transform:rotate(1deg)}}#stepTitle{align-items:center;justify-content:center;text-align:center}.titleWord{--stroke:12px;display:inline-block;font:900 clamp(88px,20vw,190px)/.9 var(--display);letter-spacing:.06em;padding-left:.06em;color:var(--card);text-shadow:0 10px 0 var(--ink);transform:rotate(-4deg)}.titleSub{margin-top:14px;padding:2px 18px 2px 28px;transform:rotate(-4deg);font:900 22px var(--display);letter-spacing:10px;color:#fff;background:var(--home);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:var(--pop)}.titleCue{margin-top:36px;min-height:64px;padding:0 40px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font:900 30px var(--display);letter-spacing:4px;color:var(--ink);background:var(--sun);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:6px 6px 0 var(--ink);animation:bob 1.6s ease-in-out infinite}.titleCue:hover,.titleCue:focus-visible{background:var(--lime)}@keyframes bob{50%{transform:translateY(-5px);box-shadow:var(--popHi)}}#playerName,#roomCode{width:min(420px,100%);margin-bottom:16px;padding:8px 16px;font:900 clamp(28px,5vw,40px) var(--display);letter-spacing:2px;color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);border-radius:14px;box-shadow:var(--pop);outline:none;-webkit-user-select:text;user-select:text;touch-action:auto}#playerName::placeholder,#roomCode::placeholder{color:#1c16264d}#playerName:focus,#roomCode:focus{box-shadow:var(--pop),0 0 0 4px var(--sun)}#roomCode{text-transform:uppercase;letter-spacing:clamp(6px,2vw,12px)}#roomCode[readonly]{background:var(--sun);cursor:default}.lobbyList{list-style:none;display:flex;flex-direction:column;gap:8px;width:min(440px,100%);margin:0 0 16px}.lobbySlot{display:grid;grid-template-columns:1fr auto;grid-template-areas:"team tag" "name tag";align-items:center;gap:0 12px;padding:6px 14px;background:var(--card);border:var(--line) solid var(--ink);border-left-width:12px;border-left-color:var(--mute);border-radius:14px;box-shadow:var(--pop);animation:popIn .3s var(--ease-out) both}.lobbySlot[role=button]{cursor:pointer}.lobbySlot.human{border-left-color:var(--home)}.lobbySlot.you{border-left-color:var(--sun);background:color-mix(in srgb,var(--sun) 25%,var(--card))}.lobbySlot.bot{background:var(--card2)}.lobbyTeam{grid-area:team;font:800 11px var(--display);letter-spacing:2px;color:var(--mute)}.lobbyName{grid-area:name;font:900 22px var(--display);letter-spacing:1.5px}.lobbySlot.bot .lobbyName{color:var(--mute)}.lobbySlot em{grid-area:tag;font:900 11px var(--display);font-style:normal;letter-spacing:2px;color:var(--mute)}.lobbySlot .lobbyYou{color:var(--ink)}.lobbySlot.human em{color:var(--home)}.lobbyFoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:min(440px,100%)}.netStat{padding:2px 10px;border-radius:999px;font:900 12px var(--display);letter-spacing:2px;color:var(--ink);background:var(--card);border:2px solid var(--ink)}.netStat.bad{background:var(--away);color:#fff}#lobbyCode{letter-spacing:4px}#tourBody{width:min(460px,100%);display:flex;flex-direction:column;gap:12px}#tourBody .menuList{width:100%}.tourRank{display:flex;align-items:baseline;gap:14px;align-self:flex-start;padding:4px 16px;font-family:var(--display);background:var(--card);border:var(--line) solid var(--ink);border-radius:14px;box-shadow:var(--pop)}.tourRank b{font-size:32px;font-weight:900;letter-spacing:2px;color:var(--home)}.tourRank span{font-size:15px;font-weight:800;letter-spacing:2px;color:var(--mute)}.tourLocker{padding:8px 14px;color:var(--ink);background:var(--card);border:var(--line) solid var(--ink);border-radius:16px;box-shadow:var(--pop)}.tourLocker .optRow{font-family:var(--display)}#lockerBody{width:min(620px,100%)}.kitChip{width:32px;height:32px;border-radius:50%;cursor:pointer;border:0;background:linear-gradient(135deg,var(--kit) 60%,var(--kit2) 60%);box-shadow:0 0 0 2.5px var(--ink)}.kitChip.on{box-shadow:0 0 0 2.5px var(--ink),0 0 0 6px var(--sun),0 0 0 8px var(--ink)}.kitChip:disabled,.optChip:disabled{opacity:.3;cursor:not-allowed}#options{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));background:#1c16268c;backdrop-filter:blur(4px)}.optPanel{width:min(520px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:16px 16px 14px;font-family:var(--display);color:var(--ink);background:var(--card);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);animation:popIn .3s var(--ease-snap) both}.optHead{display:flex;align-items:center;gap:10px;min-width:0}.optHead h2{margin:0;font-size:28px;font-weight:900;letter-spacing:3px;line-height:1}.optBack{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 8px;cursor:pointer;font:900 16px var(--display);letter-spacing:1px;color:var(--ink);background:var(--card2);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:var(--pop)}.optBack b{font-size:26px;line-height:0;margin-top:-2px}.optBack:active{transform:translateY(2px);box-shadow:var(--popLo)}.optBody{flex:1 1 auto;min-height:0;overflow:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:12px}.optLang{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.optLang>span{font-size:15px;font-weight:900;letter-spacing:2px}.optHub{display:grid;grid-template-columns:1fr 1fr;gap:10px}.optGo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title value chev" "blurb blurb chev";align-items:center;column-gap:8px;row-gap:2px;min-height:78px;padding:10px 12px 10px 14px;cursor:pointer;text-align:left;color:var(--ink);background:var(--card2);border:var(--line) solid var(--ink);border-left-width:10px;border-left-color:var(--acc,var(--home));border-radius:16px;box-shadow:var(--pop)}.optGo span{grid-area:title;font-size:20px;font-weight:900;letter-spacing:1px;line-height:1}.optGo em{grid-area:blurb;min-width:0;font:600 12px/1.3 var(--body);font-style:normal;color:var(--mute)}.optGo b{grid-area:value;font-size:16px;font-weight:900;letter-spacing:1px}.optGo b:empty{display:none}.optGo:after{content:"›";grid-area:chev;font-size:26px;font-weight:900;line-height:1}.optGo:active{transform:translateY(2px);box-shadow:var(--popLo)}.optRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;font-size:17px;font-weight:800;letter-spacing:1px}.optPanel .optRow{min-height:48px;padding:8px 0}.optPanel .optSplit{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:10px 0}.optRow input[type=range]{flex:1;width:auto;min-width:100px;height:28px;accent-color:var(--home);touch-action:pan-x;cursor:pointer}.optPct{flex:none;min-width:2.4ch;text-align:right;font-size:18px;font-weight:900}.optChips{display:flex;gap:8px;flex-wrap:wrap}.optChip,.optToggle,.optKey{font:900 14px var(--display);letter-spacing:1px;cursor:pointer;min-height:36px;padding:6px 12px;border-radius:10px;border:0;color:var(--ink);background:var(--card2);box-shadow:0 0 0 2.5px var(--ink),0 3px 0 2.5px var(--ink);transition:transform .1s ease,box-shadow .1s ease}.optPanel .optChip,.optPanel .optToggle,.optPanel .optKey{background:var(--card2)}.optChip:active,.optToggle:active,.optKey:active{transform:translateY(2px);box-shadow:0 0 0 2.5px var(--ink),0 1px 0 2.5px var(--ink)}.optChip.on,.optToggle.on{background:var(--home);color:#fff}.optKey{min-width:96px}.optKey.wait{background:var(--sun);animation:blink .8s ease-in-out infinite}.optReset{display:flex;justify-content:flex-end;padding-top:4px}.optDone{width:100%;flex:none}@media (max-width: 520px){.optHub{grid-template-columns:1fr}.optGo{min-height:68px}}@media (max-height: 520px) and (orientation: landscape){.optPanel{width:min(680px,100%);padding:10px 12px;gap:8px}.optHead h2{font-size:22px}.optHub{grid-template-columns:1fr 1fr}.optGo{min-height:58px;padding:8px 10px 8px 12px}.optGo em{display:none}.optDone{min-height:40px}}#boot{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:linear-gradient(180deg,#7fc8ff,#2a7de1);transition:opacity .5s ease}#boot.gone{opacity:0;pointer-events:none}.bootBar{width:min(220px,50vw);height:14px;border-radius:999px;overflow:hidden;background:var(--card);border:var(--line) solid var(--ink);box-shadow:var(--pop)}.bootBar i{display:block;width:40%;height:100%;background:var(--sun);animation:bootRun 1s ease-in-out infinite}@keyframes bootRun{0%{transform:translate(-100%)}to{transform:translate(250%)}}#contextLost{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#1c1626e6}#contextLost p{padding:14px 20px;font:900 20px var(--display);letter-spacing:1px;background:var(--card);border:var(--line) solid var(--ink);border-radius:14px;box-shadow:var(--pop)}#err{position:fixed;bottom:0;left:0;right:0;background:#3a1018;color:#ffd7e0;font:12px/1.6 monospace;padding:10px 14px;z-index:99;display:none;white-space:pre-wrap}.muted{font:700 11px var(--display);letter-spacing:2px;color:var(--mute)}@media (pointer: coarse){#pauseBtn{display:flex}#infoPanel{right:calc(62px + var(--sr));top:calc(18px + var(--st))}#netBadge{right:calc(62px + var(--sr))}#keys,.moHint,.pauseHint{display:none}#vitals{bottom:auto;top:calc(76px + var(--st))}#callout{top:26%}}@media (max-width: 720px){.menuStep{padding-left:calc(16px + var(--sl));padding-right:calc(16px + var(--sr))}#start:not([data-step=title]) .menuRail{width:100%;background:#1c162680}#start:not([data-step=title]) #stepMain{grid-template-columns:1fr;grid-template-rows:auto 112px minmax(0,1fr);width:min(1080px,calc(100% - 16px))}#stepMain .modeStage{grid-column:1;grid-row:2}#stepMain .mainList{grid-column:1;grid-row:3}.modePlate{padding:10px 14px 12px}.modePlate b{font-size:64px;top:-10px}.modePlate strong{font-size:28px}.modePlate span{font-size:13px}.crumb:not(:nth-last-child(-n+5)),.crumbSep:not(:nth-last-child(-n+4)){display:none}.menuMark{display:none}#recapStats{gap:6px}.recapVal{font-size:22px}.mainList .menuChoice.quiet{padding:4px 6px}.mainList .menuChoice.quiet span{font-size:18px;letter-spacing:1px}}@media (max-height: 520px) and (orientation: landscape){.menuChrome{padding-top:calc(8px + var(--st))}.menuBack{min-height:38px}.menuStep{justify-content:flex-start;padding-top:calc(60px + var(--st));padding-bottom:calc(14px + var(--sb))}#start:not([data-step=title]) .menuStep{top:calc(50px + var(--st));bottom:8px;width:min(680px,calc(100% - 16px));padding:12px 12px 10px}#start:not([data-step=title]) #stepMain{width:min(1080px,calc(100% - 16px))}#start:not([data-step=title]) .menuKicker{padding:2px 10px;font-size:11px}#start:not([data-step=title]) .menuAsk{--stroke:0;font-size:22px;margin-bottom:8px;text-shadow:none}.menuList{gap:8px;width:min(560px,100%)}.menuRow{min-height:44px;font-size:21px}.menuList:not(.mainList){grid-template-columns:1fr 1fr}#tourBody .menuList,.lobbyList{grid-template-columns:1fr}.mainList .menuChoice:not(.quiet){grid-column:auto}.menuChoice{min-height:50px;padding:4px 12px}.menuChoice span{font-size:24px}.menuChoice em{font-size:11px}#stepMain .menuChoice:not(.quiet) span{font-size:22px}#stepMain .menuChoice:not(.quiet) em{display:none}#stepMain .mainList{grid-template-rows:none;grid-auto-rows:minmax(0,1fr)}#stepMain .menuChoice:not(.quiet){grid-column:auto}#stepMain .recTag{top:-10px;right:6px}#stepMain .menuChoice.quiet{min-height:36px}.modePlate b{font-size:72px}.modePlate strong{font-size:32px}.modePlate span{font-size:13px}#start .menuChoice:not(.quiet){min-height:40px;padding:2px 10px}#start .menuChoice:not(.quiet) span{font-size:20px}#start .menuRow{min-height:40px;font-size:16px}.menuChoice.quiet{min-height:42px}.menuRow em{display:none}.titleWord{--stroke:9px;font-size:96px}.titleCue{margin-top:22px;min-height:50px}#playerName,#roomCode{margin-bottom:10px;padding:4px 14px;font-size:28px}.lobbySlot{padding:3px 12px}.lobbyName{font-size:18px}.pauseCard{gap:8px;padding:12px 18px 14px}.pauseCard .musicBtn{top:10px}.pauseTitle{font-size:36px;margin-bottom:2px}.pauseCard .celBtn{min-height:44px}#callout{top:20%}#vitals{top:calc(12px + var(--st))}}#scoreboard,#keys,#lesson{scale:var(--hudScale,1)}body.cb .lsDots i.on{background:#0072b2}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}body.calm *,body.calm *:before,body.calm *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}#saveClip{left:auto;right:calc(16px + var(--sr));bottom:calc(3.75vh + var(--sb));transform:translateY(50%);z-index:13;display:inline-flex;align-items:center;gap:7px;padding:3px 8px 3px 10px;cursor:pointer;pointer-events:auto;font:900 13px/1.4 var(--display);letter-spacing:2px;color:var(--card);background:transparent;border:2px solid rgba(255,253,247,.55);border-radius:999px;transition:background .12s ease,border-color .12s ease}#saveClip:hover,#saveClip:focus-visible{transform:translateY(50%);background:#fffdf71f;border-color:var(--card)}#saveClip .clipDot{width:9px;height:9px;border-radius:50%;background:var(--away);box-shadow:0 0 0 2px var(--card);animation:blink .9s steps(1) infinite}#saveClip kbd{font-size:11px;padding:0 5px}#saveClip.kept{color:var(--ink);background:var(--lime);border-color:var(--ink)}#saveClip.kept .clipDot{background:var(--teal);animation:none}#stepMain:not(:has(.menuChoice:hover)):has([data-go=challenges]:focus) .modePlate[data-mode=challenges],#stepMain:has([data-go=challenges]:hover) .modePlate[data-mode=challenges]{opacity:1;transform:none}#stepMain:has([data-go=challenges]:is(:hover,:focus)) .modePlate[data-mode=academy]{opacity:0}.chalList .chalRow{min-height:64px;align-items:center}.chalRow>span{display:flex;flex-direction:column;gap:3px;min-width:0}.chalRow small{font:600 12px/1.25 var(--body);letter-spacing:0;color:var(--mute);white-space:normal}.chalRow em{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}.chalRow em b{font:900 18px/1 var(--display);letter-spacing:1px;color:var(--ink)}.chalRow em i{font:700 12px/1 var(--body);font-style:normal;color:var(--violet)}.chalWorld{margin-top:12px;width:min(520px,100%);padding:10px 12px;border-radius:14px;background:var(--card);border:var(--line) solid var(--ink);box-shadow:var(--pop)}.chalTabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.chalTab{font:900 13px/1 var(--display);letter-spacing:1px;padding:8px 10px;min-height:36px;border-radius:999px;cursor:pointer;color:var(--ink);background:var(--card2);border:2px solid var(--ink)}.chalTab.on{background:var(--sun)}.chalHead{font:900 12px/1 var(--display);letter-spacing:2px;color:var(--mute);margin:6px 0 4px}.chalTop{list-style:none;display:grid;gap:2px}.chalTop li{display:grid;grid-template-columns:2.2em 1fr auto;gap:8px;align-items:baseline;padding:3px 6px;border-radius:8px;font:700 14px/1.2 var(--body)}.chalTop li b{font-family:var(--display);color:var(--mute)}.chalTop li em{font:900 16px/1 var(--display);font-style:normal}.chalTop li.me{background:color-mix(in srgb,var(--sun) 55%,var(--card))}.chalOff,.chalYou{font:600 13px/1.3 var(--body);color:var(--mute);padding:4px 6px}.chalYou{color:var(--ink);font-weight:800}#chalResult{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#1c162673}#chalResult.hidden{display:none}.chalCard{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:16px 18px;border-radius:18px;background:var(--card);color:var(--ink);border:var(--line) solid var(--ink);box-shadow:var(--popHi);animation:chalIn .32s var(--ease-snap)}.chalKick{font:900 13px/1 var(--display);letter-spacing:2px;color:var(--mute)}.chalScore{display:flex;align-items:baseline;gap:12px;margin:6px 0 4px}.chalScore b{font:900 64px/.9 var(--display)}.chalScore span{font:900 18px/1 var(--display);letter-spacing:1px;color:var(--violet)}.chalBtns{display:flex;gap:10px;margin-top:12px}.chalBtns .celBtn{flex:1 1 0}@keyframes chalIn{0%{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}.shotBtn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.shotBtn:before{content:"";position:absolute;inset:-9px;border-radius:50%}#dailyBody{display:flex;flex-direction:column;gap:12px;width:100%}.dailyCard{position:relative;padding:14px 16px 12px;color:var(--ink);font-family:var(--display);background:repeating-linear-gradient(-16deg,transparent 0 16px,rgba(28,22,38,.06) 16px 18px),color-mix(in srgb,var(--violet) 22%,var(--card));border:var(--line) solid var(--ink);border-left-width:14px;border-left-color:var(--violet);border-radius:16px;box-shadow:var(--pop)}.dailyCard.done{border-left-color:var(--teal)}.dailyDate{font:800 12px var(--display);letter-spacing:3px;color:var(--mute)}.dailyTitle{font:900 clamp(34px,6vw,48px)/1 var(--display);letter-spacing:1px}.dailyGoal{margin:4px 0 10px;font:600 16px/1.35 var(--body)}.dailyChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.dailyChips span{padding:2px 10px;border-radius:999px;font:900 13px var(--display);letter-spacing:1.5px;background:var(--card);box-shadow:0 0 0 2px var(--ink)}.dailyMeta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;font-weight:900;letter-spacing:1.5px}.dailyStreak{display:inline-flex;align-items:baseline;gap:6px;font-size:15px}.dailyStreak b{font-size:34px;line-height:1;color:var(--violet);-webkit-text-stroke:1.5px var(--ink)}.dailyBest{font-size:14px;color:var(--mute)}#dailyBody .menuRow{--acc:var(--violet)}.dailyDone{margin-left:auto;padding:2px 10px;border-radius:999px;font-size:16px;background:var(--teal);box-shadow:0 0 0 2.5px var(--ink)}#chalBody .dailyRow{--acc:#ff5fa2;width:min(520px,100%);min-height:64px;margin-bottom:10px}#chalBody .dailyRow.done .recTag{background:var(--teal)}.stars{position:absolute;right:12px;top:6px;display:flex;gap:1px;font-size:14px;line-height:1}.stars i{font-style:normal;color:#1c162633}.stars i.on{color:var(--orange);-webkit-text-stroke:1px var(--ink)}#academyList .menuRow{padding-top:14px}.lookChip{position:relative;width:28px;height:28px;background:var(--kit)}.lookChip small{position:absolute;inset:0;display:grid;place-items:center;font:900 11px var(--display);color:var(--card);text-shadow:0 1px 0 var(--ink)}.lookChip:disabled{opacity:.45}.tourLocker .optRow{align-items:flex-start}.tourLocker .optRow>span{padding-top:4px;flex:none}.tourLocker .optChips{justify-content:flex-end}.tourRank em{font-style:normal;font-size:14px;font-weight:900;letter-spacing:2px;padding:1px 8px;border-radius:999px;background:var(--orange);box-shadow:0 0 0 2px var(--ink)}.tourTable{list-style:none;display:flex;flex-direction:column;gap:3px;padding:8px 10px;font-family:var(--display);background:var(--card);border:var(--line) solid var(--ink);border-radius:14px;box-shadow:var(--pop)}.tourTable li{display:grid;grid-template-columns:40px 1fr auto 60px;align-items:baseline;gap:8px;padding:2px 6px;border-radius:8px;font-size:17px;font-weight:800;letter-spacing:1px}.tourTable li.you{background:var(--sun)}.tourTable b{font-weight:900;color:var(--home)}.tourTable em{font-style:normal;font-size:11px;letter-spacing:1.5px;color:var(--mute)}.tourTable i{font-style:normal;text-align:right;font-weight:900}#tourBody .seasonGo{--acc:var(--lime)}#recapBadges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%;padding-top:4px}#recapBadges:empty{display:none}.badge{display:inline-flex;align-items:baseline;gap:6px;padding:3px 12px;border-radius:999px;font:800 13px var(--display);letter-spacing:1.5px;background:var(--card2);box-shadow:0 0 0 2.5px var(--ink),0 3px 0 2.5px var(--ink)}.badge b{font-size:20px;font-weight:900}.badge.hot{background:var(--lime)}#recapDaily{width:100%;text-align:center;font:900 14px var(--display);letter-spacing:2px;color:var(--away)}#recapDaily.ok{color:var(--teal)}#recapTrends{list-style:none;display:flex;flex-direction:column;gap:2px;font:600 14px/1.35 var(--body)}#recapTrends:empty{display:none}#recapTrends .trendHead{font:800 11px var(--display);letter-spacing:2px;color:var(--mute)}#recapTrends i{font-style:normal;font-weight:900}#recapTrends li.up i{color:var(--teal)}#recapTrends li.down i{color:var(--away)}@media (max-width: 720px){.menuCrumbs .crumb:not(.on),.menuCrumbs .crumbSep{display:none}.menuCrumbs .crumb.on{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tourLocker .optRow{flex-direction:column;align-items:stretch;gap:4px}.tourLocker .optRow>span{padding-top:0}.tourLocker .optChips{justify-content:flex-start}.tourTable li{grid-template-columns:34px 1fr 52px;font-size:15px}.tourTable em{display:none}}@media (min-width: 900px){#start:not([data-step=title]) :is(#stepVenue,#stepAcademy,#stepOnline){width:min(880px,calc(100% - 40px))}:is(#stepVenue,#stepAcademy,#stepOnline) .menuList{width:100%;grid-template-columns:1fr 1fr}}.chalRow:is(:hover,:focus) small{color:inherit;opacity:.85}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{overscroll-behavior:none}@media (pointer: coarse){#lesson{width:auto;max-width:440px;right:calc(64px + var(--sr));padding:8px 12px}.lsHead b{font-size:17px;letter-spacing:1px}.lsHow{font-size:13px;line-height:1.3;margin:3px 0 5px}body.live #lesson .lsHow,body.live #lesson .lsMiss{display:none}body.live #lesson{padding:6px 10px}#hud:has(#lesson:not(.hidden)) #infoPanel{display:none}#vitals{top:40%;bottom:auto;width:min(360px,86vw)}#playHint{font-size:12px;line-height:1.3;padding:4px 12px;border-radius:14px}#callout{top:24%;white-space:normal;text-align:center;width:max-content;max-width:92vw;font-size:clamp(26px,7vw,46px)}#combo{font-size:15px}}@media (max-width: 720px){#start:not([data-step=title]) #stepMain{grid-template-rows:auto minmax(0,1fr);overflow-y:auto;touch-action:pan-y}#stepMain .modeStage{display:none}#stepMain .mainList{grid-row:2;height:auto;grid-template-rows:none;grid-auto-rows:auto}#stepMain .menuChoice:not(.quiet){min-height:54px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:6px 14px 6px 12px}#stepMain .menuChoice:not(.quiet) span{font-size:24px}#stepMain .menuChoice:not(.quiet) em{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-size:12px}#stepMain .menuChoice.quiet{min-height:46px}#academyList .menuRow{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:12px 70px 8px 12px;font-size:19px}#academyList .menuRow em{display:block;text-align:left;font-size:12px}}@media (max-height: 520px) and (orientation: landscape){#stepMain .menuChoice:not(.quiet){min-height:42px}#stepMain .menuChoice:not(.quiet) em{display:none}#academyList .menuRow{min-height:44px;padding-top:8px;padding-bottom:6px}#academyList .menuRow em{display:none}}
