:root{--bg: #1b2436;--ink: #f5f7fb;--muted: #a9b4c8;--home: #3b82f6;--away: #ef4444;--gold: #ffcf5c;--card: rgba(18, 25, 40, .88);--line: rgba(255, 255, 255, .14);--safe-t: env(safe-area-inset-top, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--btn: clamp(64px, 15vh, 104px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Kanit,system-ui,sans-serif;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:100%;touch-action:none;overscroll-behavior:none}body{position:fixed;top:0;right:0;bottom:0;left:0}#app,#hud,#fade,.screen,#rotate{position:fixed;top:0;left:0;width:100%;height:100%;height:var(--vvh, 100dvh);touch-action:none}#app canvas{display:block;width:100%;height:100%;touch-action:none}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:none}.hidden{display:none!important}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud>*{pointer-events:auto}#hud #banner,#hud #bubbles,#hud #strokeInfo,#hud #timer,#hud #scoreboard,#hud #keyHint{pointer-events:none}#scoreboard{position:absolute;top:calc(8px + var(--safe-t));left:calc(10px + var(--safe-l));width:10.4em;font-size:clamp(13px,3.4vh,17px);line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}#scoreboard .head{display:flex;align-items:center;gap:.45em;width:max-content;height:1.55em;padding:0 1.5em 0 .75em;clip-path:polygon(0 0,100% 0,calc(100% - .8em) 100%,0 100%);border-radius:3px 0 0;background:linear-gradient(90deg,#ffd56e,#f2a93b);color:#1d1404;font-size:.7em;font-weight:700;letter-spacing:.05em;transition:background .3s}#scoreboard .head .dot{width:.32em;height:.32em;border-radius:50%;background:currentColor;opacity:.55}#scoreboard .head.mp{background:linear-gradient(90deg,#ff6a4f,#d93a2b);color:#fff}#scoreboard .team{display:grid;grid-template-columns:.3em 1fr 1.1em 1.95em;column-gap:.5em;align-items:center;height:1.8em;background:linear-gradient(90deg,#090e1bf2,#18223af2)}#scoreboard .team+.team{border-top:1px solid rgba(255,255,255,.09)}#scoreboard .away,#scoreboard .away .pts{border-radius:0 0 3px}#scoreboard .bar{align-self:stretch}#scoreboard .home .bar{background:var(--home)}#scoreboard .away .bar{background:var(--away)}#scoreboard .name{font-size:.95em;font-weight:600;letter-spacing:.02em;white-space:nowrap}#scoreboard .srv{width:1.1em;height:1.1em;opacity:0;transform:scale(.3) rotate(-40deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.4)}#scoreboard .srv.on{opacity:1;transform:none}#scoreboard .srv svg{display:block;width:100%;height:100%;fill:var(--gold)}#scoreboard .srv .rib{fill:none;stroke:#0b1222;stroke-width:.7}#scoreboard .pts{align-self:stretch;display:grid;place-items:center;background:#f4f6fb;color:#0b1222;font-size:1.2em;font-weight:800;font-variant-numeric:tabular-nums;transition:background .3s}#scoreboard .serving .pts{background:var(--gold)}#scoreboard .pts.bump{animation:flip .5s cubic-bezier(.2,.9,.3,1.3)}@keyframes flip{0%{transform:perspective(6em) rotateX(-90deg);background:#fff;color:#d93a2b}55%{transform:perspective(6em) rotateX(14deg)}to{transform:none}}.icon{position:absolute;top:calc(8px + var(--safe-t));right:calc(10px + var(--safe-r));width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13px}#decisionHead{display:flex;align-items:center;gap:8px;pointer-events:none}#timer{position:relative;width:58px;height:58px;display:grid;place-items:center}#timer svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}#timer circle{fill:#0a0e18bf;stroke-width:8}#timer .bg{stroke:#ffffff26}#timer .fg{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-dasharray:276.5;transition:stroke .2s}#timer.urgent .fg{stroke:#ff5a4f}#timer.urgent #timerText{color:#ff8a80;animation:pulse .5s infinite alternate}#timerText{position:relative;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}@keyframes pulse{to{transform:scale(1.18)}}#strokeInfo{padding:3px 12px;border-radius:999px;background:var(--card);font-size:13px;color:var(--muted);white-space:nowrap}#banner{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);font-size:clamp(28px,8vh,64px);font-weight:800;letter-spacing:.02em;text-shadow:0 4px 18px rgba(0,0,0,.6);opacity:0;text-align:center;line-height:1.05}#banner small{display:block;font-size:.42em;font-weight:600;opacity:.9;margin-top:6px}#banner.show{animation:banner 1.5s ease-out forwards}#banner.good{color:#bff7d0}#banner.bad{color:#ffc2bd}#banner.neutral{color:#fff}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-60%) scale(1)}}#bubbles .bubble{position:absolute;transform:translate(-50%,-100%);padding:3px 10px;border-radius:10px;background:#fff;color:#13203a;font-weight:700;font-size:13px;white-space:nowrap;animation:pop 1.1s ease-out forwards}#bubbles .bubble.whiff{background:#ff5a4f;color:#fff}@keyframes pop{0%{opacity:0;margin-top:8px}15%{opacity:1;margin-top:0}80%{opacity:1}to{opacity:0;margin-top:-12px}}#joyZone{position:absolute;left:0;bottom:0;width:40%;height:62%}#joyBase{position:absolute;left:calc(28px + var(--safe-l));bottom:calc(24px + var(--safe-b));width:calc(var(--btn) * 1.45);height:calc(var(--btn) * 1.45);border-radius:50%;background:radial-gradient(circle,#ffffff14,#ffffff29);border:2px solid rgba(255,255,255,.25);transform:translate(0)}#joyBase.active{background:radial-gradient(circle,#ffffff1f,#ffffff38)}#joyBase.aim{border-color:var(--gold);box-shadow:0 0 18px #ffcf5c80}#joyKnob{position:absolute;left:50%;top:50%;width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c9d3e6);box-shadow:0 4px 12px #0006}#rightPad{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(18px + var(--safe-b));display:flex;flex-direction:column;align-items:flex-end;gap:10px}.btnRow{display:flex;align-items:flex-end;gap:14px}.round{position:relative;border-radius:50%;display:grid;place-items:center;font-weight:800;box-shadow:0 6px 18px #0006,inset 0 -4px #00000040;transition:transform .08s,filter .2s,box-shadow .2s;overflow:hidden}.round:active,.round.down{transform:scale(.93)}.action{width:var(--btn);height:var(--btn);background:radial-gradient(circle at 35% 30%,#ffb15c,#e2662b);font-size:20px}.action.ready{animation:glow .5s infinite alternate}.action.dim{filter:grayscale(.7) brightness(.7)}.action.serve{background:radial-gradient(circle at 35% 30%,#ffe07a,#e0a91d);color:#2a1d00}.action.go{background:radial-gradient(circle at 35% 30%,#7dd3fc,#2563eb)}#cd{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(rgba(10,14,24,.7) var(--cd, 0%),transparent 0);pointer-events:none}#actionLabel{position:relative;z-index:1}@keyframes glow{0%{box-shadow:0 0 #ffcf5ce6,0 6px 18px #0006}to{box-shadow:0 0 0 12px #ffcf5c00,0 6px 18px #0006}}#panel{display:flex;gap:8px;padding:8px;border-radius:18px;background:var(--card);border:1px solid rgba(255,207,92,.5);box-shadow:0 8px 26px #00000073;animation:rise .18s ease-out}@keyframes rise{0%{transform:translateY(14px);opacity:0}}#panel button{min-width:calc(var(--btn) * .95);padding:8px 10px 7px;border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:1px;background:#2b3954;box-shadow:inset 0 -3px #0000004d;transition:transform .08s}#panel button:active{transform:scale(.94)}#panel button b{font-size:18px;line-height:1.1}#panel button span{font-size:12px;color:#d9e2f2;white-space:nowrap}#panel button em{font-style:normal;font-size:11px;font-weight:700;color:#ffd27a;min-height:1em;white-space:nowrap}#panel button em.bad{color:#ff8a80}#panel button kbd{font-family:inherit;font-size:10px;color:var(--muted)}#panel .soft{background:linear-gradient(#3a6e5a,#295245)}#panel .strong{background:linear-gradient(#b4483a,#85322a)}#panel .lift{background:linear-gradient(#3e5fa8,#2b4380)}#panel .serve{background:linear-gradient(#b38a1e,#84650f)}#keyHint{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:12px;color:#ffffff8c;white-space:nowrap}.touch #keyHint{display:none}#fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#070a12;opacity:0;pointer-events:none}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0c12208c,#080c16d9);padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));overflow:hidden}.card{width:min(680px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px 22px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;gap:10px}.card.small{width:min(380px,100%);align-items:stretch;text-align:center}.card.wide{width:min(760px,100%)}h1{margin:0;font-size:clamp(26px,6vh,40px);line-height:1;font-weight:800}h1 b{color:var(--gold)}h2{margin:0;font-size:26px}.sub{margin:0;color:var(--muted);font-size:14px}.card button{padding:10px 14px;border-radius:12px;background:#2b3954;font-weight:600}.card button.primary{background:linear-gradient(#ffb15c,#e2662b);font-size:18px;font-weight:800}.hint{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:12px;background:#ffcf5c1f;border:1px solid rgba(255,207,92,.35);font-size:13px;line-height:1.35;color:#f3e3bd}.hint span{flex:1}.hint b{color:var(--gold);font-weight:600}.hint svg{width:14px;height:14px;vertical-align:-2px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.card .hint button{padding:4px 8px;background:transparent;color:var(--muted);font-size:13px}#settings{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;align-items:center}#settings label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}.seg{display:flex;flex-wrap:wrap;gap:4px;background:#ffffff0f;padding:3px;border-radius:11px}.seg button{flex:1;padding:6px 8px;border-radius:8px;background:transparent;font-size:14px;font-weight:500;color:#cfd8e8;white-space:nowrap}.seg button.on{background:#f5f7fb;color:#13203a;font-weight:700}.info{width:22px;height:22px;padding:0!important;border-radius:50%!important;background:#3b4b6b!important;font-size:12px;font-weight:800;font-style:italic}.bigscore{font-size:44px;font-weight:800}.bigscore .h{color:#93c5fd}.bigscore .a{color:#fca5a5}.stats{color:var(--muted);font-size:14px;line-height:1.6}#infoBody{font-size:14px;color:#dbe3f0}#infoBody table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-variant-numeric:tabular-nums}#infoBody th,#infoBody td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:center}#infoBody th:first-child,#infoBody td:first-child{text-align:left}#infoBody dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px}#infoBody dt{font-weight:700;color:var(--gold)}#infoBody dd{margin:0;color:var(--muted)}#rotate{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;align-content:center;background:var(--bg);text-align:center;z-index:50}#rotate div{font-size:64px;animation:spin 2s ease-in-out infinite}@keyframes spin{50%{transform:rotate(90deg)}}@media (orientation: portrait) and (pointer: coarse){#rotate{display:grid}}@media (max-height: 430px){#timer{width:48px;height:48px}#timerText{font-size:19px}.card{padding:12px 16px;gap:7px}#settings{gap:5px 10px}.seg button{padding:4px 6px;font-size:13px}#menu .card{width:min(860px,100%)}#menu .sub{display:none}#menu h1{font-size:24px}#settings{grid-template-columns:auto 1fr auto 1fr}}