:root{--ink:#1a1230;--paper:#fffaf0;--p0:#2f6bff;--p0-2:#ffc21a;--p1:#ff3b4e;--gold:#ffd23f;--good:#5fe08a;--meh:#ffa24a;--font:"Fredoka", "Baloo 2", "Trebuchet MS", system-ui, sans-serif}.ui{pointer-events:none;font-family:var(--font);color:var(--paper);-webkit-user-select:none;user-select:none;position:fixed;inset:0}.ui button{pointer-events:auto;font-family:inherit}.score{filter:drop-shadow(0 4px #00000059);align-items:stretch;gap:6px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.score,.training-hud{transition:opacity .15s}.score.faded,.training-hud.faded{opacity:.22}.shuttle-arrow{border:3px solid var(--ink);width:36px;height:36px;box-shadow:0 3px 0 var(--ink);pointer-events:none;background:#ffd23f;border-radius:50%;display:none;position:absolute;top:6px;left:-18px}.shuttle-arrow:before{content:"";border:8px solid #0000;border-bottom:12px solid var(--ink);border-top:0;position:absolute;top:7px;left:50%;transform:translate(-50%)}.shuttle-arrow.on{animation:.5s ease-in-out infinite alternate arrow-bob;display:block}@keyframes arrow-bob{to{margin-top:4px}}.score .side{border:3px solid var(--ink);letter-spacing:.06em;align-items:center;gap:10px;padding:6px 16px;font-size:15px;font-weight:700;display:flex}.score .side.left{border-radius:18px 6px 6px 18px}.score .side.right{border-radius:6px 18px 18px 6px;flex-direction:row-reverse}.score .pname{white-space:nowrap;text-overflow:ellipsis;max-width:12em;overflow:hidden}.score .side.team0{background:var(--p0)}.score .side.team1{background:var(--p1)}.score .pts{text-align:center;font-variant-numeric:tabular-nums;min-width:1.3em;font-size:30px;line-height:1}.score .pts.bump{animation:.35s ease-out bump}.score .serve-dot{background:var(--paper);border:2px solid var(--ink);opacity:0;border-radius:50%;width:12px;height:12px;transition:opacity .2s}.score .serve-dot.on{opacity:1}.tag{letter-spacing:.12em;color:var(--gold);text-shadow:0 2px 0 var(--ink);opacity:0;font-size:14px;font-weight:700;transition:opacity .2s;position:absolute;top:70px;left:50%;transform:translate(-50%)}.tag.on{opacity:1}.set-score{color:var(--paper);letter-spacing:.12em;white-space:nowrap;font-variant-numeric:tabular-nums;background:#1a1230b8;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;position:absolute;top:68px;left:50%;transform:translate(-50%)}.set-score[hidden]{display:none}.set-score:not([hidden])~.tag{top:92px}.serve-line{color:var(--paper);letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;background:#1a1230b8;border-radius:999px;max-width:calc(100vw - 32px);padding:2px 10px;font-size:12px;font-weight:700;position:absolute;top:68px;left:50%;overflow:hidden;transform:translate(-50%)}.serve-line[hidden]{display:none}.serve-line:not([hidden])~.tag{top:92px}.quality{letter-spacing:.04em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);opacity:0;font-size:44px;font-weight:800;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}.quality.show{animation:.7s ease-out forwards pop}.quality.perfect{color:var(--gold);font-size:54px}.quality.good{color:var(--good)}.quality.early,.quality.late{color:var(--meh);font-size:36px}.banner{text-align:center;opacity:0;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.banner.show{animation:1.4s ease-out forwards banner}.banner .big{-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);font-size:64px;font-weight:800}.banner.p0 .big{color:var(--p0-2)}.banner.p1 .big{color:var(--p1)}.banner .small{text-shadow:0 2px 0 var(--ink);margin-top:4px;font-size:20px;font-weight:700}.hint{white-space:nowrap;opacity:0;background:#1a1230b8;border-radius:999px;padding:8px 18px;font-size:16px;font-weight:600;transition:opacity .25s;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}.hint.on{opacity:1}.hint.coach{box-sizing:border-box;border:2px solid var(--gold);white-space:normal;text-align:left;background:#1a1230d1;align-items:center;gap:10px;width:max-content;max-width:min(640px,100vw - 32px);padding:7px 16px 7px 8px;line-height:1.25;transition:opacity .25s,transform .25s;display:flex;transform:translate(-50%,6px)}.hint.coach.on{transform:translate(-50%)}.coach-tag{background:var(--gold);color:var(--ink);letter-spacing:.1em;border-radius:999px;flex:none;padding:2px 8px;font-size:12px;font-weight:800}.practice-invite{background:#1a1230b8;border-radius:999px;align-items:center;gap:10px;padding:6px 8px 6px 16px;font-size:17px;font-weight:600;display:flex}.practice-invite[hidden]{display:none}.invite-btn{border:3px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);border-radius:999px;padding:5px 14px;font-size:15px;font-weight:800}.invite-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}kbd{background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--ink);border-radius:6px;margin:0 2px;padding:1px 7px;font-family:inherit;font-size:.9em;font-weight:700;display:inline-block}.corner{gap:8px;display:flex;position:absolute;top:14px;right:16px}.icon-btn{border:3px solid var(--ink);background:var(--paper);width:42px;height:42px;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);border-radius:12px;font-size:20px}.icon-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.screen{text-align:center;pointer-events:auto;opacity:0;visibility:hidden;background:radial-gradient(#1b153040,#1b1530cc);flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:16px;transition:opacity .3s,visibility .3s;display:flex;position:absolute;inset:0}.screen.on{opacity:1;visibility:visible}.screen:not(.on){pointer-events:none}.screen{justify-content:safe center;overflow-y:auto}.logo{color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 10px 0 var(--ink);font-size:clamp(48px,11vw,112px);font-weight:800;line-height:.9;transform:rotate(-3deg)}.logo.logo-md{font-size:52px}.logo.logo-lg{font-size:64px}.logo .kicker{color:var(--paper);-webkit-text-stroke:3px var(--ink);letter-spacing:.32em;margin-bottom:6px;font-size:.34em;display:block}.logo small{color:var(--paper);-webkit-text-stroke:3px var(--ink);letter-spacing:.3em;margin-top:10px;font-size:.32em;display:block}.big-btn{color:var(--ink);background:var(--gold);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;border-radius:18px;padding:14px 34px;font-size:24px;font-weight:800;animation:1.6s ease-in-out infinite pulse}.big-btn:active{box-shadow:0 2px 0 var(--ink);transform:translateY(4px)}.result-title{-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);font-size:clamp(40px,9vw,80px);font-weight:800}.result-title.win{color:var(--gold)}.result-title.lose{color:var(--p1)}.result-score{text-shadow:0 4px 0 var(--ink);font-size:40px;font-weight:800}.progress{border:3px solid var(--ink);background:var(--paper);border-radius:999px;width:min(320px,80vw);height:14px;overflow:hidden}.progress>div{background:var(--p0);width:0;height:100%;transition:width .2s}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}18%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}30%{transform:translate(-50%,-50%)scale(1)}75%{opacity:1;transform:translate(-50%,-62%)scale(1)}to{opacity:0;transform:translate(-50%,-75%)scale(.95)}}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)rotate(-6deg)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.1)rotate(-3deg)}25%{transform:translate(-50%,-50%)scale(1)rotate(-3deg)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1)rotate(-3deg)}}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.screen .btn-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.big-btn.friend{background:var(--good);animation:none}.big-btn.story{background:#6fb6ff;animation:none}.big-btn[hidden]{display:none}.footer-link{color:#fffaf0b3;pointer-events:auto;font-size:13px;position:absolute;bottom:12px;right:16px}.footer-link a{color:inherit}.title-pills{flex-wrap:wrap;gap:10px;display:flex;position:absolute;bottom:10px;left:16px}.opt-open-pill{letter-spacing:.06em;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:800}.opt-open-pill[hidden]{display:none}.ach-pill{position:relative}.ach-pill small{opacity:.7;font-size:.85em}.ach-pill small:empty{display:none}.ach-dot{border:3px solid var(--ink);background:var(--p1);border-radius:50%;width:14px;height:14px;position:absolute;top:-5px;right:-3px}.ach-dot[hidden]{display:none}.opt-open-pill:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.touch-mode .hint{font-size:13px;top:76px;bottom:auto}.touch-mode .screen{gap:14px}@media (max-height:460px){.logo{font-size:clamp(40px,9vh,72px)}.logo small{margin-top:4px}.big-btn{padding:10px 26px;font-size:20px}.result-score{font-size:30px}}@media (max-width:600px){.score .side{padding:4px 10px;font-size:12px}.score .pts{font-size:24px}.banner .big{font-size:44px}.hint{font-size:13px}}@media (orientation:portrait) and (max-width:600px){.corner{top:calc(10px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}.score{top:calc(62px + env(safe-area-inset-top));justify-content:center;width:calc(100vw - 24px)}.score .side{letter-spacing:.03em;flex:1 1 0;gap:6px;min-width:0;padding:5px 10px;font-size:13px}.score .side.left,.score .side.right{justify-content:flex-start}.score .pname{white-space:normal;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;flex:auto;min-width:0;max-width:none;line-height:1.05;display:-webkit-box}.score .pts{min-width:1.1em;font-size:26px}.set-score{top:calc(112px + env(safe-area-inset-top))}.tag{top:calc(114px + env(safe-area-inset-top))}.set-score:not([hidden])~.tag{top:calc(136px + env(safe-area-inset-top))}.serve-line{top:calc(112px + env(safe-area-inset-top))}.serve-line:not([hidden])~.tag{top:calc(136px + env(safe-area-inset-top))}.touch-mode .serve-line:not([hidden])~.hint{top:calc(140px + env(safe-area-inset-top))}.touch-mode .hint{box-sizing:border-box;top:calc(116px + env(safe-area-inset-top));white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 32px)}.shuttle-arrow{top:calc(6px + env(safe-area-inset-top))}.quality{font-size:38px;top:30%}.quality.perfect{font-size:46px}.banner{width:calc(100vw - 32px);top:36%}.banner .big{font-size:clamp(30px,10vw,44px);line-height:1.05}.screen{padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));justify-content:safe center;overflow-y:auto}.screen .btn-row{flex-flow:column;align-items:stretch;width:min(320px,100%)}.big-btn{padding:12px 20px;font-size:22px}.diff-btn{min-width:0}.logo{font-size:clamp(44px,13vw,64px)}.logo.logo-md{font-size:clamp(34px,10vw,44px)}.logo.logo-lg{font-size:clamp(40px,12vw,56px)}.result-title{padding:0 8px;font-size:clamp(34px,11vw,56px)}.title-pills{justify-content:center;gap:8px;position:static}.title-pills .opt-open-pill{letter-spacing:.02em;padding:5px 10px;font-size:13px}.footer-link{text-align:center;position:static}[data-ref=title]{gap:14px}}@media (prefers-reduced-motion:reduce){.big-btn{animation:none}}.training-hud{z-index:5;border:3px solid var(--ink);background:var(--paper);max-width:calc(100vw - 140px);color:var(--ink);font-family:var(--font);text-align:center;box-shadow:0 4px 0 var(--ink);pointer-events:none;border-radius:16px;flex-direction:column;align-items:center;gap:2px;padding:8px 18px 10px;font-size:13px;display:flex;position:fixed;top:12px;left:50%;transform:translate(-50%)}.training-hud b{color:#e0452b;letter-spacing:.08em}.training-count{font-size:20px;font-weight:800}.training-hud.done{background:#ffd23f}.training-hud.goal{background:#ffd23f;animation:.45s ease-out training-goal}.training-record{opacity:.75;font-size:12px;font-weight:700}@keyframes training-goal{0%{transform:translate(-50%)scale(1)}40%{transform:translate(-50%)scale(1.12)}to{transform:translate(-50%)scale(1)}}@media (prefers-reduced-motion:reduce){.training-hud.goal{animation:none}}body:has(.training-hud:not([hidden])) .hud .score{visibility:hidden}.practice .screen{z-index:6}.practice-sub{color:var(--paper);margin:0;font-size:18px}.practice-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;width:min(760px,100vw - 32px);display:grid}.practice-item{border:3px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--ink);border-radius:16px;flex-direction:column;gap:2px;padding:12px 14px;display:flex}.practice-item b{font-size:19px}.practice-item span{opacity:.8;font-size:14px}.practice-item:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.practice-note{color:#b5481f;font-size:13px;font-style:normal;font-weight:800}.practice-run{color:var(--paper);text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.practice-run[hidden],.practice-run [hidden]{display:none}.practice-run b{-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-size:clamp(22px,5vw,32px);font-weight:800}.practice-run small{font-size:16px;font-weight:700}.practice-run-new{border:3px solid var(--ink);background:var(--gold);color:var(--ink);letter-spacing:.04em;box-shadow:0 3px 0 var(--ink);border-radius:999px;padding:4px 14px;font-size:18px;font-weight:800}.diff-btn{flex-direction:column;align-items:center;min-width:180px;display:flex}.diff-btn small{opacity:.75;letter-spacing:0;font-size:14px;font-weight:600}.diff-btn.on{outline-offset:3px;outline:4px solid #fffaf0}body:has(.training-hud:not([hidden])) .touch-mode .hint{top:112px}.diff-btn[data-diff=easy]{background:#5fe08a}.diff-btn[data-diff=hard]{background:#ff7aa2}.format-btn{min-width:220px}.format-btn[data-format=singles]{background:#8ec5ff}.format-btn[data-format=doubles]{background:#ffd35a}.format-icon{letter-spacing:.08em;opacity:.7;margin-bottom:2px;font-size:13px}@media (orientation:portrait) and (max-width:600px){.training-hud{top:calc(62px + env(safe-area-inset-top));max-width:calc(100vw - 24px)}body:has(.training-hud:not([hidden])) .touch-mode .hint{top:calc(200px + env(safe-area-inset-top))}.practice-sub{font-size:16px}.practice-item{padding:10px 12px}.practice-item b{font-size:17px}.practice-item span{font-size:13px}}.rotate-tip{display:none}@media (orientation:portrait){.touch-mode .rotate-tip{color:#fff;background:#1b15308c;border-radius:999px;align-items:center;gap:8px;margin:-6px auto 14px;padding:6px 14px;font-size:13px;font-weight:600;display:flex}.touch-mode .rotate-tip span{animation:1.8s ease-in-out infinite rotate-tip;display:inline-block}}@keyframes rotate-tip{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}.btn-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.big-btn.secondary{background:var(--paper);padding:12px 22px;font-size:18px;animation:none}.big-btn:disabled{opacity:.6;cursor:default;animation:none}.text-btn{color:#fffaf0cc;cursor:pointer;pointer-events:auto;background:0 0;border:none;font-size:15px;text-decoration:underline}