: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;transition:opacity .15s;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.score.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}.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}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}.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)}.controls{text-align:left;background:#1a1230bf;border-radius:16px;grid-template-columns:auto auto;align-items:center;gap:8px 16px;padding:14px 20px;font-size:16px;display:grid}.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}.lang-pick{color:#fffaf0b3;pointer-events:auto;font-size:13px;position:absolute;bottom:10px;left:16px}.lang-pick[hidden]{display:none}.lang-pick select{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:2px 6px}.touch-mode .hint{font-size:13px;top:76px;bottom:auto}.touch-mode .controls{font-size:14px}.touch-mode .screen{gap:14px}@media (max-height:460px){.logo{font-size:clamp(40px,9vh,72px)}.logo small{margin-top:4px}.controls{gap:4px 12px;padding:10px 14px;font-size:13px}.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))}.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)}.controls{gap:6px 12px;width:min(340px,100%);padding:12px 14px;font-size:13px}.lang-pick{left:50%;bottom:calc(40px + env(safe-area-inset-bottom));transform:translate(-50%)}.footer-link{left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center}[data-ref=title]{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}@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}body:has(.training-hud) .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)}.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) .touch-mode .hint{top:112px}.diff-btn[data-diff=easy]{background:#5fe08a}.diff-btn[data-diff=hard]{background:#ff7aa2}@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) .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)}}.touch{z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:Fredoka,Trebuchet MS,system-ui,sans-serif;position:fixed;inset:0}.touch[hidden]{display:none}.joy-zone{left:0;top:calc(70px + env(safe-area-inset-top));pointer-events:auto;touch-action:none;position:absolute;bottom:0}.joy-base{opacity:0;background:#fffaf024;border:3px solid #fffaf08c;border-radius:50%;width:128px;height:128px;margin:-64px 0 0 -64px;transition:opacity .12s;position:fixed}.joy-base.active{opacity:1}.joy-knob{background:#fffaf0;border:3px solid #1a1230;border-radius:50%;width:58px;height:58px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px #1a1230}.joy-hint{left:calc(28px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));color:#fffaf0;background:#1a123099;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;transition:opacity .4s;position:absolute}.touch.joy-used .joy-hint{opacity:0}.touch-buttons{right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:230px;height:200px;position:absolute}.tbtn{color:#1a1230;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;border:4px solid #1a1230;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-family:inherit;font-weight:800;display:flex;position:absolute;box-shadow:0 5px #1a1230}.tbtn span{font-size:26px;line-height:1}.tbtn small{letter-spacing:.06em;font-size:10px}.tbtn.down{filter:brightness(1.1);transform:translateY(4px);box-shadow:0 1px #1a1230}.tbtn.swing{background:#ffd23f;width:104px;height:104px;bottom:0;right:0}.tbtn.swing span{font-size:36px}.tbtn.dive{background:#5fe08a;width:76px;height:76px;bottom:6px;right:118px}.tbtn.jump{background:#6fb6ff;width:76px;height:76px;bottom:118px;right:22px}@media (max-height:380px){.tbtn.swing{width:90px;height:90px}.tbtn.dive{width:66px;height:66px;right:102px}.tbtn.jump{width:66px;height:66px;bottom:102px}}.tbtn[hidden]{display:none}@media (orientation:portrait){.joy-zone{height:52%;top:auto}.joy-base{width:144px;height:144px;margin:-72px 0 0 -72px}.joy-knob{width:64px;height:64px}.joy-hint{left:calc(16px + env(safe-area-inset-left));bottom:calc(150px + env(safe-area-inset-bottom));font-size:13px}.touch-buttons{right:calc(14px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:236px;height:226px}.tbtn.swing{width:118px;height:118px}.tbtn.swing span{font-size:40px}.tbtn.dive{width:86px;height:86px;bottom:4px;right:128px}.tbtn.jump{width:86px;height:86px;bottom:132px;right:16px}.tbtn small{font-size:11px}}@media (orientation:portrait) and (max-width:374px){.touch-buttons{width:216px;height:212px}.tbtn.swing{width:108px;height:108px}.tbtn.dive{width:80px;height:80px;right:116px}.tbtn.jump{width:80px;height:80px;bottom:122px;right:14px}}.online .screen{z-index:6}.online-card{box-sizing:border-box;border:4px solid var(--ink);width:min(460px,100%);box-shadow:0 8px 0 var(--ink);text-align:center;background:#1a1230eb;border-radius:22px;flex-direction:column;align-items:center;gap:12px;padding:22px 20px;display:flex}.online-card p{margin:0;font-size:17px}.online-title{font-weight:800;font-size:24px!important}.online-kicker{letter-spacing:.3em;color:var(--gold);font-weight:700;font-size:13px!important}.online-muted{color:#fffaf0bf;font-size:15px!important}.room-code{letter-spacing:.12em;color:var(--gold);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);font-weight:800;font-size:48px!important}.room-code.small{font-size:26px!important}.link-box{overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;background:#fffaf01a;border-radius:12px;max-width:100%;padding:8px 14px;font-size:14px}.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}.online .big-btn{animation:none}.text-btn{color:#fffaf0cc;cursor:pointer;pointer-events:auto;background:0 0;border:none;font-size:15px;text-decoration:underline}.waiting{color:var(--gold);font-weight:700}.dots:after{content:"";animation:1.4s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.rematch-note{color:var(--good);min-height:1.2em;font-weight:700}.spinner{border:5px solid #fffaf040;border-top-color:var(--gold);border-radius:50%;width:44px;height:44px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.countdown{z-index:6;pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0}.countdown[hidden]{display:none}.versus{background:#1a1230bf;border-radius:999px;padding:6px 16px;font-size:18px;font-weight:700}.countdown-num{color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink);font-size:120px;font-weight:800;line-height:1}.countdown-sub{text-shadow:0 2px 0 var(--ink);font-weight:700}.net-banner{z-index:6;border:3px solid var(--ink);white-space:nowrap;background:#1a1230e6;border-radius:14px;padding:12px 20px;font-size:17px;font-weight:700;position:absolute;top:40%;left:50%;transform:translate(-50%)}.net-banner[hidden]{display:none}.ping{color:var(--good);background:#1a123099;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;position:absolute;top:16px;left:16px}.ping[hidden]{display:none}.ping.bad{color:var(--meh)}@media (max-height:460px){.online-card{gap:8px;padding:14px 16px}.room-code{font-size:36px!important}.countdown-num{font-size:88px}}@media (orientation:portrait) and (max-width:600px){.online-card{gap:10px;padding:18px 14px}.room-code{letter-spacing:.08em;font-size:clamp(34px,11vw,48px)!important}.link-box{font-size:13px}.net-banner{white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 32px)}.ping{top:calc(16px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}.countdown-num{font-size:104px}.versus{max-width:calc(100vw - 32px)}}