:root{--us: #3b82f6;--us-2: #93c5fd;--them: #ef4444;--gold: #ffd34d;--ink: #f8fafc;--panel: rgba(11, 20, 36, .78);--panel-2: rgba(255, 255, 255, .08);--line: rgba(255, 255, 255, .18);--sl: env(safe-area-inset-left, 0px);--sr: env(safe-area-inset-right, 0px);--st: env(safe-area-inset-top, 0px);--sb: env(safe-area-inset-bottom, 0px);font-family:Kanit,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none}.screen,.screen *{touch-action:pan-y}html,body{margin:0;height:100%;overflow:hidden;background:#0b1424;overscroll-behavior:none;-webkit-text-size-adjust:100%}body{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit;cursor:pointer}.hidden{display:none!important}#hud{position:fixed;inset:0;pointer-events:none}#hud button,#hud .seg{pointer-events:auto}#scoreboard{position:absolute;top:calc(10px + var(--st));left:calc(10px + var(--sl));min-width:196px;border-radius:6px;box-shadow:0 4px 14px #00000073}.sb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 8px;background:linear-gradient(90deg,#f59e0b,#ffd34d);color:#1b1300;font-size:10px;font-weight:800;letter-spacing:.6px;border-radius:6px 6px 0 0}.sb-target{font-weight:600;letter-spacing:0}.sb-row{display:flex;align-items:stretch;height:28px;background:#091020eb}.sb-row+.sb-row{border-top:1px solid rgba(255,255,255,.08)}.sb-row.them{border-radius:0 0 6px 6px;overflow:hidden}.sb-bar{width:5px;flex:none}.sb-row.us .sb-bar{background:var(--us)}.sb-row.them .sb-bar{background:var(--them)}.sb-names{flex:1;display:flex;align-items:center;padding:0 8px;font-size:13px;font-weight:600;white-space:nowrap}.sb-serve{width:18px;display:flex;align-items:center;justify-content:center}.sb-serve.on:before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--gold)}.sb-pts{width:38px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;background:#ffffff1a}.sb-row.serving .sb-pts{background:#fff;color:#0b1424}.sb-pts.bump{animation:bump .5s cubic-bezier(.3,1.8,.5,1)}.sb-tag{margin-top:4px;display:inline-block;padding:1px 8px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.8px;background:var(--them);color:#fff;animation:blink 1s infinite}@keyframes blink{50%{opacity:.55}}.sb-tag.us{background:var(--us)}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.6);color:var(--gold)}to{transform:scale(1)}}.icon-btn{position:absolute;top:calc(8px + var(--st));width:40px;height:40px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:15px;font-weight:800}#btnPause{right:calc(10px + var(--sr))}#btnFull{right:calc(56px + var(--sr))}#timer{position:relative;width:84px;text-align:center;align-self:flex-end;margin-right:6px}#timer svg{width:64px;height:64px;transform:rotate(-90deg)}#timer circle{fill:none;stroke-width:9}#timer .bg{stroke:#00000073}#timer .fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:276.46;transition:stroke .2s}#timer.urgent .fg{stroke:var(--them)}#timerNum{position:absolute;top:0;left:0;right:0;height:64px;line-height:64px;font-size:24px;font-weight:800;text-shadow:0 2px 6px #000}#timer.urgent #timerNum{animation:pulse .5s infinite;color:#ffb4b4}#timerLbl{font-size:11px;opacity:.85;text-shadow:0 1px 4px #000;white-space:nowrap;margin-left:-30px;margin-right:-30px}@keyframes pulse{50%{transform:scale(1.18)}}#banner{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);text-align:center;width:max-content;max-width:92vw;white-space:nowrap;animation:bannerIn .35s cubic-bezier(.2,1.6,.4,1)}#bannerMain{font-size:clamp(30px,7vw,64px);font-weight:800;letter-spacing:.5px;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 30px rgba(0,0,0,.5)}#bannerSub{font-size:clamp(14px,2.4vw,22px);font-weight:600;opacity:.95;text-shadow:0 2px 8px #000}#banner.good #bannerMain{color:#7dffb0}#banner.bad #bannerMain{color:#ff8a8a}#banner.info #bannerMain{color:var(--gold)}@keyframes bannerIn{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}}#hint{position:absolute;bottom:calc(10px + var(--sb));left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:12px;white-space:nowrap}#labels{position:absolute;inset:0}#offArrow{position:absolute;top:calc(50px + var(--st));transform:translate(-50%);font-size:12px;font-weight:800;background:#ffffffe6;color:#0b1424;padding:2px 8px;border-radius:999px;box-shadow:0 2px 10px #0006}.plabel{position:absolute;transform:translate(-50%,-100%);font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:#0009;white-space:nowrap;animation:pop .25s cubic-bezier(.2,1.8,.4,1)}.plabel.me{background:var(--gold);color:#1b1300}.plabel.mate{background:var(--us)}@keyframes pop{0%{transform:translate(-50%,-100%) scale(.3)}}#joyZone{position:absolute;left:0;top:60px;bottom:0;width:34%;pointer-events:auto;touch-action:none}#joyBase{position:absolute;width:124px;height:124px;border-radius:50%;left:calc(36px + var(--sl));bottom:calc(28px + var(--sb));background:radial-gradient(circle,#ffffff0f,#ffffff24);border:2px solid rgba(255,255,255,.28);transition:opacity .2s;opacity:.55}#joyBase.active{opacity:1;transition:none}#joyKnob{position:absolute;width:56px;height:56px;left:34px;top:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cbd5e1);box-shadow:0 4px 14px #0006}body.desktop #joyZone{pointer-events:none}body.desktop #joyBase{opacity:0}body.desktop #joyBase.active{opacity:.9}#controls{position:absolute;right:calc(18px + var(--sr));bottom:calc(18px + var(--sb));display:flex;flex-direction:column;align-items:flex-end;gap:10px}.btn-row{display:flex;align-items:flex-end;gap:14px}.ctl-btn{position:relative;width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:radial-gradient(circle at 35% 30%,#ffffff38,#00000059);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:17px;touch-action:none;box-shadow:0 6px 18px #00000059;transition:transform .08s,box-shadow .2s,background .2s}.ctl-btn.big{width:96px;height:96px;font-size:22px;background:radial-gradient(circle at 35% 30%,#ffe27873,#78460073);border-color:#ffd34db3}.ctl-btn:active,.ctl-btn.down{transform:scale(.92)}.ctl-btn svg{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg);pointer-events:none}.ctl-btn circle{fill:none;stroke-width:6}#btnHit .cd{stroke:#0000008c;stroke-dasharray:289;stroke-dashoffset:289;stroke-width:10}#btnHit:after{content:"";position:absolute;inset:-8px;border-radius:50%;box-shadow:0 0 0 5px #ffd34db3,0 0 34px 12px #ffd34dbf;opacity:0;pointer-events:none}#btnHit.inrange:after{animation:ready .6s infinite alternate}#btnHit.cooldown{filter:grayscale(.9) brightness(.7)}#btnHit.ready-mode{background:radial-gradient(circle at 35% 30%,#78ffaa80,#005a2880);border-color:#78ffaacc}@keyframes ready{0%{opacity:.55}to{opacity:1}}.ctl-btn .key{font-size:9px;font-weight:600;opacity:.6}body.touch .key{display:none}#actionPanel{display:flex;gap:8px;animation:panelIn .22s cubic-bezier(.2,1.5,.4,1)}@keyframes panelIn{0%{transform:translateY(20px) scale(.9);opacity:0}}.shot-btn{min-width:78px;padding:8px 10px 7px;border-radius:16px;border:2px solid rgba(255,255,255,.4);background:linear-gradient(180deg,#1e293beb,#0f172aeb);text-align:center;box-shadow:0 6px 18px #00000073;display:flex;flex-direction:column;align-items:center;line-height:1.1;touch-action:none}.shot-btn .fam{font-size:19px;font-weight:800}.shot-btn .nm{font-size:11px;opacity:.85;margin-top:2px;white-space:nowrap}.shot-btn .key{margin-top:3px}.shot-btn.light{border-color:#7dd3fc}.shot-btn.light .fam{color:#7dd3fc}.shot-btn.hard{border-color:#fb7185}.shot-btn.hard .fam{color:#fb7185}.shot-btn.high{border-color:#fde047}.shot-btn.high .fam{color:#fde047}.shot-btn.serve{border-color:#86efac}.shot-btn.serve .fam{color:#86efac}.shot-btn:active{transform:scale(.94)}#fade{position:fixed;inset:0;background:#05080f;opacity:0;pointer-events:none;transition:opacity .32s ease}#fade.on{opacity:1}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:12px calc(12px + var(--sr)) 12px calc(12px + var(--sl));background:radial-gradient(ellipse at center,#0b14248c,#05080feb);overflow:auto}.menu-card{width:min(760px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,#172542f5,#0b1424f5);border:1px solid var(--line);border-radius:22px;padding:16px 20px;box-shadow:0 20px 60px #0000008c}.menu-card.small{width:min(360px,100%);text-align:center;display:flex;flex-direction:column;gap:10px}.menu-card h2{margin:4px 0 6px}.logo{text-align:center;margin-bottom:8px}.logo h1{margin:0;font-size:clamp(26px,5vw,44px);letter-spacing:2px;font-weight:800;line-height:1}.logo h1 b{color:var(--gold)}.logo p{margin:2px 0 0;opacity:.8}.logo-shuttle{font-size:34px;display:inline-block;animation:float 2.4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-6px) rotate(-12deg)}}.settings{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.row{display:flex;flex-direction:column;gap:4px}.row label{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px}.seg{display:flex;background:var(--panel-2);border-radius:12px;padding:3px;gap:3px}.row.dual .segs{display:flex;flex-direction:column;gap:4px}.seg button{flex:1;border:0;background:transparent;padding:6px 4px;border-radius:9px;font-size:13px;font-weight:600;opacity:.75;white-space:nowrap}.seg button.on{background:var(--us);opacity:1;box-shadow:0 2px 8px #3b82f680}.info{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);font-size:12px;font-weight:800;padding:0;font-style:italic}button.primary,.menu-card.small button{width:100%;padding:11px;border-radius:14px;border:0;font-size:17px;font-weight:800;margin-top:10px;background:var(--panel-2);border:1px solid var(--line)}button.primary{background:linear-gradient(180deg,#ffd34d,#f59e0b);color:#1b1300;border:0;box-shadow:0 6px 20px #f59e0b66}.howto{margin-top:10px;font-size:13px;opacity:.9}.howto summary{cursor:pointer;font-weight:600}.howto ul{margin:6px 0 0;padding-left:18px}.info-card table{width:100%;border-collapse:collapse;font-size:13px}.info-card th,.info-card td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:center}.info-card td:first-child{text-align:left;font-weight:600;white-space:nowrap}.info-notes{font-size:12px;opacity:.85;padding-left:18px}button.install{width:100%;margin-top:8px;padding:8px;border-radius:12px;border:1px dashed rgba(255,211,77,.6);background:#ffd34d14;font-size:13px;font-weight:600}.install-card{text-align:left!important}.install-card p,.install-card ol{font-size:13px;margin:0}.install-card ol{padding-left:18px;display:flex;flex-direction:column;gap:6px}.ios-share{display:inline-block;padding:0 5px;border:1px solid var(--line);border-radius:5px;font-size:11px}#endScore{font-size:40px;font-weight:800;margin:0}#endStats{font-size:13px;opacity:.8;margin:0}#rotate{display:none;z-index:50;text-align:center;font-size:20px;font-weight:600;background:#0b1424}.rot-icon{font-size:54px;margin-bottom:8px;animation:rot 2s ease-in-out infinite}@keyframes rot{50%{transform:rotate(90deg)}}@media(orientation:portrait)and (pointer:coarse){#rotate{display:flex}}@media(max-height:430px){.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}.logo p{display:none}.row.dual .segs{flex-direction:row}button.primary{margin-top:6px;padding:8px}#scoreboard{top:calc(6px + var(--st));left:calc(6px + var(--sl));min-width:170px}.sb-row{height:24px}.sb-names{font-size:12px}.sb-pts{font-size:16px;width:32px}.icon-btn{width:34px;height:34px;top:calc(4px + var(--st))}#btnFull{right:calc(50px + var(--sr))}.settings{grid-template-columns:1fr 1fr 1fr;gap:6px 10px}.menu-card{padding:10px 14px}.logo h1{font-size:26px}.logo-shuttle{font-size:22px}.seg button{padding:5px 2px;font-size:12px}.ctl-btn{width:64px;height:64px;font-size:15px}.ctl-btn.big{width:84px;height:84px;font-size:20px}#joyBase{width:110px;height:110px}#joyKnob{left:27px;top:27px}.shot-btn{min-width:70px;padding:6px 8px}.shot-btn .fam{font-size:17px}}@media(max-width:640px)and (orientation:portrait){.settings{grid-template-columns:1fr}}.segs .seg{flex:1}