:root{color:#213f36;font-synthesis:none;--ink:#213f36;--cream:#fff6e2;--orange:#dc774c;--control-size:clamp(84px, 24dvh, 108px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);background:#d4dfd8;font-family:Inter,Segoe UI,Noto Sans TC,sans-serif}*{box-sizing:border-box}html,body,#shell{overscroll-behavior:none}#shell,#shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#shell img,#shell canvas{-webkit-user-drag:none}#shell{touch-action:manipulation}#match,#match *,#view{touch-action:none}#setup,#modal{touch-action:pan-y}body{overscroll-behavior:none;margin:0;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline-offset:4px;outline:3px solid #eab465}[hidden]{display:none!important}#shell,#view{position:fixed;inset:0}#view canvas{width:100%;height:100%;display:block}header{align-items:center;gap:14px;display:flex}.wordmark{letter-spacing:-6px;font-size:39px;font-weight:800}header small{letter-spacing:3px;margin-top:5px;font-size:9px;display:block}.quiet{color:inherit;background:0 0;border:0;padding:12px;font-size:12px}.primary{background:var(--ink);color:var(--cream);border:0;border-radius:6px;padding:17px 25px;font-size:14px;font-weight:600;box-shadow:0 6px 18px #213f3618}.primary span{padding-left:45px}#home{isolation:isolate;background:#061431;position:absolute;inset:0}.home-art{object-fit:cover;object-position:50% 46%;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute}#enter{color:#fff;background:0 0;border:0;border-radius:0;width:100%;height:100%;padding:0;position:absolute;inset:0}#enter span{white-space:nowrap;letter-spacing:.08em;text-shadow:0 2px 5px #001029,0 0 22px #03254d,0 0 50px #0751a4;font-size:clamp(22px,3.1vw,44px);font-weight:600;animation:2.6s ease-in-out infinite tap-breathe;position:absolute;top:78%;left:50%;transform:translate(-50%,-50%)}#enter:focus-visible{outline-offset:-7px;outline:3px solid #a7ecff}#enter:focus-visible span{text-underline-offset:9px;text-decoration:underline}@keyframes tap-breathe{50%{opacity:.68}}@media (prefers-reduced-motion:reduce){#enter span{animation:none}}.setup-tools{justify-content:center;gap:14px;margin-top:8px;display:flex}.setup-tools .quiet{padding:6px 10px}.eyebrow{letter-spacing:2.5px;font-size:9px;font-weight:700}h1{letter-spacing:1px;margin:20px 0 16px;font-size:clamp(26px,4.8vw,60px);font-weight:700;line-height:1.3}h1 em{color:#527766;font-style:normal}#loading{text-align:center;color:#fff;z-index:10;background:#061431 url(../art/title-duel.png) 50% 46%/cover no-repeat;place-content:center;display:grid;position:absolute;inset:0}#loading h2{font-weight:600}#loading p{text-shadow:0 2px 6px #061431;font-size:12px}.load-line{background:#ffffff45;width:180px;height:2px;margin:14px auto;position:absolute;top:80%;left:50%;overflow:hidden;transform:translate(-50%)}.load-line:after{content:"";background:#fff;width:70px;height:2px;animation:1.3s infinite load;display:block}@keyframes load{0%{transform:translate(-70px)}to{transform:translate(180px)}}#setup,#modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:6;background:#233c3640;place-items:center;display:grid;position:absolute;inset:0}.setup-card,.dialog{text-align:center;background:#faf6e8f2;border-radius:12px;width:min(560px,90vw);max-height:94dvh;padding:27px 35px;overflow:auto;box-shadow:0 18px 60px #13342b24}h2{margin:12px 0 20px;font-size:25px;font-weight:600}.cast{gap:10px;display:flex}.cast button{text-align:left;color:var(--ink);background:#e4eadd;border:1px solid #b6c4b4;border-radius:6px;flex:1;padding:16px 10px}.cast span{float:right;color:#698670;font-size:30px}.cast b,.cast small{display:block}.cast b{margin:9px 0;font-size:13px}.cast small{font-size:10px}.selected{background:#f1bd83!important;border-color:#c07c4c!important}.difficulty{gap:7px;margin-top:15px;display:flex}.difficulty button{color:var(--ink);background:#edf0e5;border:1px solid #b7c5b6;border-radius:4px;flex:1;padding:11px;font-size:12px}.muted,.dialog p:not(.eyebrow){color:#617369;font-size:12px;line-height:1.9}#match{pointer-events:none;position:absolute;inset:0}.hud{top:max(16px, var(--safe-top));left:max(20px, var(--safe-left));right:max(20px, var(--safe-right));align-items:center;gap:20px;display:flex;position:absolute}.score{color:#25453c;background:#f6f6e4e6;border-radius:5px;align-items:center;gap:10px;min-width:135px;padding:7px 15px 30px;display:flex;position:relative;box-shadow:0 3px 8px #17372c0b}.score small{letter-spacing:1px;font-size:9px;font-weight:600}.score strong{font-size:30px;line-height:1}.energy{color:#25453c;height:20px;padding:0 8px;position:absolute;bottom:5px;left:0;right:0}.energy>span{justify-content:space-between;font-size:9px;font-weight:600;line-height:11px;display:flex}.energy-track{background:#28483c;border:1px solid #254d42;border-radius:3px;height:9px;overflow:hidden}.energy i{transform-origin:0;background:#52c89b;height:100%;display:block}.energy[data-energy=tired] i{background:#e5b64b}.energy[data-energy=critical] i{background:#f17650}.energy[data-energy=critical] b{color:#ae3e28}.score.cpu{margin-left:auto}.status-rail{top:calc(max(16px, var(--safe-top)) + 76px);left:calc(16px + var(--safe-left));pointer-events:none;flex-direction:column;align-items:flex-start;gap:6px;width:clamp(108px,17vw,148px);display:flex;position:absolute}.middle{text-align:left;color:#edf7ff;text-shadow:0 1px 4px #06152e,0 0 8px #06152e}.middle small{letter-spacing:2px;font-size:8px;display:block}.middle span{letter-spacing:1px;margin-top:3px;font-size:11px;display:block}.pause{pointer-events:auto;width:38px;height:38px;color:var(--ink);background:#eef2e3d9;border:0;border-radius:50%;font-weight:700}.control-left{left:calc(16px + var(--safe-left));bottom:calc(12px + var(--safe-bottom));pointer-events:auto;position:absolute}.control-left>small{letter-spacing:2px;color:#edf7ff;text-shadow:0 1px 4px #06152e;margin-bottom:8px;font-size:14px;display:block}#aim{height:var(--control-size);touch-action:none;-webkit-user-select:none;user-select:none;gap:12px;display:flex}#aim button{width:var(--control-size);height:var(--control-size);text-align:center;color:#4a7460;text-shadow:0 1px 2px #ffffff9c;touch-action:none;background:#eaf0e26b;border:1px solid #fff9df;border-radius:18px;place-content:center;font-size:29px;display:grid}#aim b{margin-top:4px;font-size:14px;font-weight:400}#shot-buttons{right:calc(16px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));grid-template-columns:repeat(2, var(--control-size));grid-template-rows:repeat(2, var(--control-size));pointer-events:auto;grid-template-areas:".return""drop smash";gap:10px;display:grid;position:absolute}#shot-buttons button{touch-action:none;-webkit-user-select:none;user-select:none;color:#eef3d9;text-shadow:0 1px 2px #173b31;width:var(--control-size);height:var(--control-size);background:#22483e78;border:1px solid #fff7dbad;border-radius:50%;font-size:18px;font-weight:600;position:relative;box-shadow:0 4px 14px #153c3330}#shot-buttons button[data-charging=true][data-serve-grade=PERFECT]{color:#264335;background:#f5df8799;box-shadow:0 0 0 4px #ffe17e90,0 0 24px #ffe17e}#shot-buttons button small{letter-spacing:1px;opacity:.65;margin-top:4px;font-size:10px;display:block}#shot-buttons #return{color:#284636;background:#efd3a378;border-color:#fff0c8;grid-area:return}#shot-buttons #smash{background:#ba6a4778;grid-area:smash}#shot-buttons #drop{grid-area:drop}#shot-buttons[data-mode=player-serve]{grid-template-areas:".smash""drop return"}#shot-buttons button:disabled{opacity:.34;cursor:default;box-shadow:none}#shot-buttons button[data-timing=approach]{box-shadow:0 0 0 3px #eaffee75,0 4px 14px #153c3330}#shot-buttons button[data-timing=perfect]{filter:brightness(1.2);border:3px solid #fff09a;box-shadow:0 0 0 5px #f6d14a70,0 0 24px #ffe17ebd}.pressed{filter:brightness(1.2);transform:scale(.93)}#feedback{text-align:left;letter-spacing:1px;color:#fef5d6;text-shadow:0 2px 10px #3f6133;width:100%;font-size:14px;font-weight:700;transform:translateZ(0)}#feedback.perfect{color:#fff3a1;text-shadow:0 0 16px #ffc331,0 2px 6px #254636}#feedback.miss{color:#edbaa1}#feedback.point{font-size:16px}#hint{color:#35563d;overflow-wrap:anywhere;background:#e9efdfdf;border-radius:3px;max-width:100%;padding:5px 6px;font-size:11px;line-height:1.4}#hint:empty,#feedback:empty,#passive:empty,#quality-note:empty{display:none}#hint.now{color:#d4e5bb;background:#225747e6}#passive{color:#fdf6d6;text-shadow:0 1px 6px #233d33;font-size:9px}#quality-note{color:#fff4d4;overflow-wrap:anywhere;background:#763e2ee6;border-left:3px solid #f2b374;border-radius:3px;max-width:100%;padding:4px 6px;font-size:10px;line-height:1.4}#rotate{text-align:center;z-index:20;background:#e4ebdf;place-content:center;display:none;position:absolute;inset:0}#rotate>span{font-size:80px}#rotate p{font-size:12px}.result-score{letter-spacing:5px;font-size:55px}.result-score small{opacity:.45;font-size:35px}.dialog .quiet{margin:8px auto;display:block}#debug{color:#fff;z-index:25;background:#18372edc;padding:4px;font:10px monospace;position:absolute;bottom:3px;left:10px}@media (height<=450px){h1{margin:14px 0 10px;font-size:32px}.primary{padding:13px 20px}.wordmark{font-size:30px}.setup-card{padding:18px 25px}.setup-card h2{margin:8px 0 12px;font-size:20px}.cast button{padding:8px 12px}.setup-card .muted{margin:10px 0;font-size:10px}.difficulty{margin-top:10px}.difficulty button{padding:8px}.hud{top:max(14px, var(--safe-top));gap:13px}.score{min-width:115px;padding:5px 11px 29px}.score strong{font-size:24px}.status-rail{top:calc(max(14px, var(--safe-top)) + 70px)}.control-left{left:calc(16px + var(--safe-left))}#shot-buttons{right:calc(16px + var(--safe-right))}.dialog{padding:20px 30px}.dialog h2{margin:9px 0 12px}.dialog p:not(.eyebrow){font-size:11px}}@media (orientation:portrait){#rotate{display:grid}}@media (width<=600px) and (orientation:landscape){.status-rail{gap:4px;width:142px}#quality-note{padding:3px 5px;font-size:9px;line-height:1.3}}.opponent{margin-top:10px}.opponent small{color:#506d61;font-size:11px}.cast button{min-width:0}.difficulty button:disabled{opacity:.35}@media (height<=600px){.setup-card{padding:10px 20px}.setup-card>.eyebrow{margin:0 0 4px}.setup-card h2{margin:0 0 8px}.setup-card .cast{gap:7px}.setup-card .cast button{padding:6px 8px}.setup-card .cast span{font-size:20px}.setup-card .cast b{margin:4px 0;font-size:11px;line-height:1.25}.setup-card .cast small{font-size:9px;line-height:1.25}.setup-card .opponent{margin-top:6px}.setup-card .opponent .difficulty{margin-top:3px}.setup-card>.difficulty{margin-top:6px}.setup-card .difficulty button{padding:6px 8px}.setup-card .muted{margin:7px 0;line-height:1.35}.setup-card>.primary{padding:10px 20px}.setup-card>.quiet{margin-top:4px}}#setup{--u:min(1vw, 1.777dvh);--menu-cut:polygon(0 9%, 5% 5%, 20% 5%, 25% 0, 75% 0, 80% 5%, 95% 5%, 100% 9%, 100% 87%, 94% 96%, 77% 96%, 73% 100%, 23% 100%, 19% 96%, 6% 96%, 0 87%);padding:max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left));-webkit-backdrop-filter:none;backdrop-filter:none;color:#f4faff;background:#03142e url(../art/player-select.png) 50%/cover no-repeat;overflow-y:auto}#setup .setup-card{isolation:isolate;width:calc(51 * var(--u));max-height:none;padding:calc(1.25 * var(--u)) calc(2.3 * var(--u)) calc(.7 * var(--u));box-shadow:none;filter:drop-shadow(0 0 6px #38b9ff80)drop-shadow(0 16px 30px #00112e80);background:0 0;border-radius:0;position:relative;overflow:visible}#setup .setup-card:before,#setup .setup-card:after{content:"";clip-path:var(--menu-cut);z-index:-2;pointer-events:none;background:linear-gradient(125deg,#fff9c6,#ffca48 26%,#e3faff 45%,#30bfff 64%,#edfaff 80%,#ffc243);position:absolute;inset:0}#setup .setup-card:after{z-index:-1;background:repeating-linear-gradient(133deg,#184a8310 0 2px,#0000 2px 8px),linear-gradient(125deg,#062347f5,#02152ff5 45%,#073466f5);inset:2px}#setup .eyebrow{margin:0 0 calc(.4 * var(--u));font-size:calc(1 * var(--u));letter-spacing:.26em;color:#d7ecff}#setup h2{font-synthesis:weight style;font-family:DFKai-SB,KaiTi,Noto Serif TC,serif;font-size:calc(4.6 * var(--u));letter-spacing:.07em;text-shadow:2px 3px #3a78b0,0 0 22px #2189d7;margin:0;font-style:italic;font-weight:900;line-height:1.18}#setup .roster-label{margin:calc(.4 * var(--u)) 0;font-size:calc(1.35 * var(--u));letter-spacing:.12em;justify-content:center;align-items:center;gap:12px;line-height:1.25;display:flex}#setup .roster-label:before,#setup .roster-label:after{content:"";background:linear-gradient(90deg,#0000,#5bc9ff);flex:1;height:1px}#setup .roster-label:after{transform:rotate(180deg)}#setup .cast{gap:calc(.75 * var(--u));grid-template-columns:repeat(4,minmax(0,1fr));display:grid}#setup .cast button{min-width:0;min-height:0;height:calc(12.2 * var(--u));color:#f4faff;background:linear-gradient(115deg,#1169b9,#063166);border:1px solid #81d6ff;border-radius:2px 9px;padding:0;transition:border-color .15s,box-shadow .15s,filter .15s;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 18px #218aff8a,0 0 9px #008cff55}#setup .cast-portrait{background-image:url(../art/roster-reference.png);background-repeat:no-repeat;background-size:965%;background-position:var(--portrait-x) 27.8%;display:block;position:absolute;inset:0}#setup .tai{--portrait-x:30.3%}#setup .chou{--portrait-x:43.2%}#setup .an{--portrait-x:56.2%}#setup .axelsen{--portrait-x:69.2%}#setup .cast-copy{z-index:1;padding:calc(.3 * var(--u)) 0;text-align:center;white-space:nowrap;background:linear-gradient(90deg,#031b37eb,#073568eb);position:absolute;inset:auto 0 0}#setup .cast b{font-size:calc(1.02 * var(--u));margin:0;line-height:1.45;display:block}#setup .cast small{color:#e3f3ff;font-size:calc(.86 * var(--u));line-height:1.4;display:block}#setup .cast .selection-tag{color:#fff2a6;font-size:calc(1.1 * var(--u));opacity:1;background:#573500d9;border:1px solid;border-radius:0 5px;margin:0;padding:0 .22em;font-style:normal;font-weight:700;line-height:1.4;display:none;position:absolute;top:0;right:0}#setup .cast button.selected .selection-tag{display:block}#setup .player-cast button.selected{border-color:#fff3aa;box-shadow:inset 0 0 0 2px #ffd33f,0 0 5px 2px #ffe56b,0 0 18px #ffb900}#setup .cpu-cast button{height:calc(8.9 * var(--u))}#setup .cpu-cast .cast-portrait{background-position-y:27%}#setup .cpu-cast button.selected{border-color:#e4faff;box-shadow:inset 0 0 0 2px #41baff,0 0 5px 2px #6cd8ff,0 0 18px #008cff}#setup .cpu-cast .selection-tag{color:#ecfaff;background:#03417de6}#setup .cpu-cast button:disabled{cursor:not-allowed;filter:saturate(.65)brightness(.82)}#setup .levels{margin-top:calc(.95 * var(--u));gap:calc(.75 * var(--u));padding:0 calc(2 * var(--u))}#setup .levels button,#setup #back{min-height:0;padding:calc(.36 * var(--u)) calc(.9 * var(--u));color:#f1faff;font-size:calc(1.45 * var(--u));letter-spacing:.08em;background:linear-gradient(125deg,#123b69,#07508a 48%,#032553);border:1px solid #7bceff;border-radius:2px 8px;box-shadow:inset 0 0 10px #1c9dec65}#setup .levels button.selected{color:#061b33;background:linear-gradient(125deg,#ffe894,#ffc238 40%,#fff29e 64%,#eaa027);border-color:#fff1b2;font-weight:800;box-shadow:inset 0 0 12px #fff1b2,0 0 13px #ffc2389e}#setup .muted{margin:calc(.7 * var(--u)) 0;font-size:calc(1.22 * var(--u));letter-spacing:.07em;color:#e3f0ff;line-height:1.4}#setup .setup-actions{align-items:center;gap:calc(1.3 * var(--u));grid-template-columns:1fr auto;padding-left:26%;display:grid}#setup #play{justify-content:center;align-items:center;gap:calc(2 * var(--u));padding:calc(.2 * var(--u)) calc(1.2 * var(--u));color:#071b34;font-size:calc(3 * var(--u));letter-spacing:.18em;background:linear-gradient(140deg,#fff2a4,#ffcb43 22%,#ffe376 52%,#ee9a15);border:2px solid #fff0b3;border-radius:3px 15px;font-style:italic;font-weight:900;display:flex;box-shadow:inset 0 0 0 3px #d78b2880,0 0 16px #ffb82b80}#setup #play span{color:#fff;letter-spacing:0;background:#072c53;border-radius:3px;padding:0 .1em;font-size:.8em;line-height:1.2}#setup #back{min-width:calc(10 * var(--u))}#setup .setup-tools{margin-top:calc(.5 * var(--u));gap:0}#setup .setup-tools button{padding:calc(.2 * var(--u)) calc(1.8 * var(--u));color:#e6f3ff;font-size:calc(.95 * var(--u));letter-spacing:.06em}#setup #sound{border-right:1px solid #4a86af}#setup #sound:before{content:"♪";margin-right:.6em}#setup #sound[aria-pressed=false]:before{opacity:.4}#setup #help span{margin-left:.7em}#setup button:focus-visible{outline-offset:3px;outline:2px solid #fff}@media (hover:hover){#setup button:not(:disabled):hover{filter:brightness(1.17)}}#rotate{background:#031631;place-content:normal;place-items:center}#rotate img{object-fit:contain;width:100%;height:100dvh;display:block}@media (orientation:landscape) and (height<=540px){#setup{--u:min(1.17vw, 1.92dvh)}#setup .setup-card{width:calc(69 * var(--u));padding:calc(1.2 * var(--u)) calc(3 * var(--u)) calc(.6 * var(--u))}#setup .eyebrow{font-size:9px}#setup h2{font-size:calc(3.5 * var(--u));line-height:1.1}#setup .roster-label{margin:calc(.4 * var(--u)) 0;font-size:11px}#setup .cast button{height:calc(10.5 * var(--u))}#setup .cpu-cast button{height:calc(8.5 * var(--u))}#setup .cast-portrait{background-position-y:27%}#setup .cast b{font-size:10px}#setup .cast small{font-size:9px}#setup .cast .selection-tag{font-size:10px}#setup .levels{margin-top:calc(.7 * var(--u))}#setup .levels button,#setup #back{min-height:28px;font-size:12px}#setup .muted{margin:calc(.5 * var(--u)) 0;font-size:10px;line-height:1.35}#setup #play{min-height:36px;font-size:25px}#setup .setup-tools button{min-height:26px;font-size:10px}}@media (orientation:landscape) and (height<=330px){#setup{place-items:start center}}#setup .cast-copy{background:linear-gradient(90deg,#031b37,#073568)}#setup .player-cast button.selected .cast-copy{background:linear-gradient(90deg,#60400b,#967213,#513305)}#setup .tai.cast-portrait{background-image:url(../art/player-select.png);background-position:8% 29%;background-size:500%}#setup .cpu-cast .cast-portrait:not(.tai){background-position-y:30%}#setup .cpu-cast .tai.cast-portrait{background-position-y:34%}@media (orientation:landscape) and (height<=540px){#setup .cast-portrait:not(.tai){background-position-y:33%}#setup .tai.cast-portrait{background-position-y:36%}#setup .cpu-cast .tai.cast-portrait{background-position-y:37%}#setup .cpu-cast .cast-portrait:not(.tai){background-position-y:34%}}@media (orientation:landscape) and (height<=380px){#setup{--u:min(1.17vw, 1.72dvh)}}#match{--court-blue:#65cbff;--court-gold:#ffe28b;--shuttle-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='white'%3E%3Cpath d='M5 22l5 5-3 3a3.54 3.54 0 01-5-5zM7 19L13 2l4 1-7 17zM12 20L20 3l4 3-10 16zM16 22L27 8l3 4-12 12zM19 26l11-10 2 4-11 8z'/%3E%3C/g%3E%3C/svg%3E")}#match .score{color:#f3f8ff;background:linear-gradient(135deg,#0c2c57ed,#04142eed 70%,#16346bed);border-radius:3px 9px;box-shadow:inset 0 0 0 1px #8dc5ff9c,inset 0 0 19px #185cab45,0 4px 14px #00143370}#match .score:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#0000 6px,#ffe28b 6px 8px,#0000 8px) 0 0/22px 22px no-repeat,linear-gradient(135deg,#0000 calc(100% - 8px),#ffe28b calc(100% - 8px) calc(100% - 6px),#0000 calc(100% - 6px)) 100% 100%/22px 22px no-repeat;position:absolute;inset:0}#match .score small{color:#ebf5ff;text-shadow:0 0 9px #66abff70}#match .score.you strong{color:var(--court-gold);text-shadow:0 0 12px #ffce6445}#match .score.cpu strong{color:#f2f7ff;text-shadow:0 0 12px #65bdff55}#match .energy{color:#e5efff}#match .energy-track{background:#03152d;border-color:#4c91b1;box-shadow:0 0 6px #19e8c333}#match .energy i{background:linear-gradient(90deg,#11cbb0,#57f8d5);box-shadow:0 0 7px #48ffda80}#match .energy[data-energy=tired] i{background:linear-gradient(90deg,#e09b28,#ffe18a)}#match .energy[data-energy=critical] i{background:linear-gradient(90deg,#e95156,#ffa38b)}#match .energy[data-energy=critical] b{color:#ffaaa2}#match .pause{color:var(--court-gold);text-shadow:0 0 10px #ffda8370;background:radial-gradient(circle at 35% 22%,#234679,#071b3d 68%);box-shadow:inset 0 0 0 1.5px #ffe49f,inset 0 0 10px #628ec14d,0 0 10px #88beff40}#match .status-rail{isolation:isolate;left:max(20px, var(--safe-left));width:calc(clamp(108px,17vw,148px) + 16px);padding:8px}#status-content{flex-direction:column;align-items:flex-start;gap:6px;width:100%;display:flex}#match .status-rail .middle{padding-right:24px}#match .status-rail .middle small{letter-spacing:1px;font-size:7px}#match #status-toggle{color:#ffe6a3;pointer-events:auto;background:linear-gradient(135deg,#205596,#081f47);border:1px solid #7bc8ff;border-radius:5px;width:26px;height:26px;padding:0;font-size:20px;line-height:1;position:absolute;top:4px;right:4px;box-shadow:inset 0 0 8px #5abaff40}#match .status-rail.collapsed{width:32px;height:32px;padding:0}#match .status-rail.collapsed:before,#match .status-rail.collapsed:after{display:none}#match .status-rail.collapsed #status-toggle{width:32px;height:32px;inset:0}#match .status-rail:before,#match .status-rail:after{content:"";z-index:-2;pointer-events:none;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:linear-gradient(135deg,#c3eaff,#398dff 28%,#1e497e 62%,#ffe490);position:absolute;inset:0}#match .status-rail:after{z-index:-1;background:repeating-linear-gradient(130deg,#317be010 0 1px,#0000 1px 6px),linear-gradient(135deg,#0a2855f5,#03152ff5);inset:1px}#match .middle{color:#f3f8ff;text-shadow:0 1px 3px #00122b}#match .middle small{color:#bdd9fc}#match #rally{color:var(--court-gold);text-shadow:0 0 8px #ffd36655}#match #hint{color:#e6f2ff;background:linear-gradient(100deg,#1e45866b,#10316250);box-shadow:inset 0 1px #6994c04d}#match #hint.now{color:#ffea9d;background:#20477dcc;box-shadow:inset 2px 0 #ffe28b,0 0 8px #3baeff40}#match #feedback{color:#e8f7ff;text-shadow:0 1px 5px #021631,0 0 8px #5dbfff70}#match #feedback.perfect{color:#ffe790;text-shadow:0 0 14px #ffc63c90,0 2px 5px #001c46}#match #feedback.miss{color:#ffada6}#match #passive{color:#bdf;text-shadow:0 1px 5px #001b3c}#match #quality-note{color:#ffe0cc;background:#492342e8;border-color:#ffc074}#match .control-left>small{color:#f1f7ff;text-shadow:0 0 7px #58c4ffb0,0 2px 3px #03132c}#match #aim button{color:#f5fbff;text-shadow:0 0 10px #9edbff65,0 2px 3px #051c42;background:linear-gradient(135deg,#ffeaa9 0 1%,#0000 1% 96%,#ffeaa9 96%),linear-gradient(145deg,#317bcac9,#123f80df 46%,#082755e8);border-color:#bcecff;border-radius:14px;box-shadow:inset 0 0 13px #54b8ffad,inset 0 0 0 2px #76ccff50,0 0 7px #44b8ff8c,0 5px 12px #00163870}#match #aim button.pressed{color:#fff0b3;background:linear-gradient(135deg,#275e9b,#12376e);border-color:#fff1b6;box-shadow:inset 0 0 15px #71cdff,0 0 0 2px #ffe295,0 0 16px #ffd26790}#match #shot-buttons #return{--shot-rgb:45, 161, 255;--shot-dark:#082d68}#match #shot-buttons #smash{--shot-rgb:149, 100, 255;--shot-dark:#261163}#match #shot-buttons #drop{--shot-rgb:40, 211, 224;--shot-dark:#063e59}#match #shot-buttons button{color:#f5faff;background:radial-gradient(circle at 35% 18%, rgba(var(--shot-rgb), .65), transparent 58%), linear-gradient(145deg, var(--shot-dark), #061a3a);box-shadow:inset 0 0 0 3px #0a2150, inset 0 0 0 4px rgba(var(--shot-rgb), .9), inset 0 0 20px rgba(var(--shot-rgb), .7), 0 0 10px rgba(var(--shot-rgb), .35), 0 4px 12px #00143270;text-shadow:0 2px 3px #04142e;border-color:#b2e7ff}#match #shot-buttons button:before{content:"";width:23%;height:23%;-webkit-mask:var(--shuttle-mark) center / contain no-repeat;mask:var(--shuttle-mark) center / contain no-repeat;pointer-events:none;background:#ddf3ff;position:absolute;top:10%;left:38.5%}#match #shot-buttons button:after{content:"";pointer-events:none;border:1px solid #0000;border-color:#a3e0ff #0000 #ffe6a4;border-radius:50%;position:absolute;inset:-4px;transform:rotate(-28deg)}#match #shot-buttons button small{color:#c1e5ff;opacity:1;text-shadow:0 1px 3px #04132c}#match #shot-buttons button:disabled{opacity:.34;box-shadow:inset 0 0 0 2px #7998b040}#match #shot-buttons button[data-timing=approach]:not(:disabled){box-shadow:inset 0 0 0 3px #0b3260, inset 0 0 18px rgba(var(--shot-rgb), .85), 0 0 0 3px #95e8ff90, 0 0 19px #3ac4ff80}#match #shot-buttons button[data-timing=perfect]:not(:disabled),#match #shot-buttons button[data-charging=true][data-serve-grade=PERFECT]:not(:disabled){color:#fff4bd;background:radial-gradient(circle at 40% 25%,#756232,#192e4d 65%);border-color:#fff3ad;box-shadow:inset 0 0 16px #ffdd7670,0 0 0 5px #f6d14a70,0 0 24px #ffe17ebd}#match #shot-buttons button[data-timing=perfect]:before,#match #shot-buttons button[data-serve-grade=PERFECT]:before{background:#fff0b2}#match button:focus-visible{outline-color:#ffe8a0}#modal{background:#02163470}#modal .dialog{isolation:isolate;color:#eef6ff;background:repeating-linear-gradient(130deg,#1a5ca215 0 1px,#0000 1px 5px),linear-gradient(120deg,#0c2a59f5,#031530fa 50%,#11346af5);border-radius:3px;position:relative;box-shadow:inset 0 0 0 1px #64bfff,inset 0 0 40px #24599b30,0 0 20px #0089ff45,0 16px 60px #000c2970}#modal .dialog:before{content:"";pointer-events:none;background:linear-gradient(135deg,#0000 13px,#ffe699 13px 16px,#0000 16px) 0 0/30px 30px no-repeat,linear-gradient(225deg,#0000 13px,#ffe699 13px 16px,#0000 16px) 100% 0/30px 30px no-repeat,linear-gradient(45deg,#0000 13px,#ffe699 13px 16px,#0000 16px) 0 100%/30px 30px no-repeat,linear-gradient(315deg,#0000 13px,#ffe699 13px 16px,#0000 16px) 100% 100%/30px 30px no-repeat;position:absolute;inset:0}#modal .eyebrow{color:#9ecaff;text-shadow:0 0 12px #4cafff70}#modal h2{color:#f4f9ff;text-shadow:0 2px #3577bb,0 0 16px #3295ff50}#modal .dialog p:not(.eyebrow){color:#a8cef5}#modal .primary{color:#f4f8ff;text-shadow:0 1px 3px #071c46;background:repeating-linear-gradient(125deg,#0000 0 16px,#276ac532 16px 25px,#0000 25px 45px),linear-gradient(125deg,#224d96,#0a2862 52%,#154685);border-radius:3px;box-shadow:inset 0 0 0 1px #ffe5a0,inset 0 0 11px #5aabff80,0 0 12px #78bfff50}#modal .quiet{color:#abd6ff;text-underline-offset:5px;-webkit-text-decoration:underline #448acc;text-decoration:underline #448acc}#modal .result-score{color:#ffe59b;text-shadow:0 0 15px #ffd87550}#modal a{color:#8bcfff}#modal button:focus-visible{outline-color:#ffe5a0}@media (hover:hover){#match .pause:hover,#modal button:hover{filter:brightness(1.18)}}#view-controls{top:calc(max(16px, var(--safe-top)) + 82px);right:max(20px, var(--safe-right));pointer-events:auto;color:#edf7ff;font-size:12px;position:absolute}#view-toggle,#view-reset{color:#ffe6a3;min-height:36px;font:inherit;background:linear-gradient(135deg,#143d70f5,#061b3df5);border:1px solid #7bc8ff;border-radius:6px;padding:6px 12px}#view-toggle{margin-left:auto;display:block}#view-angle{font-variant-numeric:tabular-nums;min-width:32px;display:inline-block}#view-settings{background:#061b3df5;border:1px solid #598fbb;border-radius:8px;grid-template-rows:20px 10px;grid-template-columns:112px 50px;column-gap:8px;width:188px;height:36px;padding:2px 8px;display:grid;position:absolute;top:0;right:calc(100% + 8px);box-shadow:0 5px 16px #00102c60}#view-settings label{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}#view-slider{accent-color:#ffe28b;touch-action:pan-y;grid-area:1/1;width:100%;height:22px;margin:0;display:block}.view-scale{color:#bdd9fc;grid-area:2/1;justify-content:space-between;font-size:8px;line-height:10px;display:flex}#view-reset{grid-area:1/2/3;min-height:30px;padding:0;font-size:10px}#view-controls :focus-visible{outline-offset:2px;outline:2px solid #ffe28b}