:root{color:#183e40;font-synthesis:none;--teal:#087c75;--coral:#de684e;--ink:#183e40;--muted:#617b75;--line:#d8dfd5;background:#f4f5ed;font-family:Inter,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #f4a65c}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,p{margin:0}em{color:var(--teal);font-style:normal}.app-shell{max-width:1680px;height:100dvh;min-height:320px;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));flex-direction:column;margin:auto;display:flex}.app-header{height:76px;padding-top:env(safe-area-inset-top);flex-shrink:0;justify-content:space-between;align-items:center;gap:18px;display:flex}.brand{letter-spacing:.08em;align-items:center;gap:10px;font-size:13px;font-weight:850;display:flex}.brand-ball{color:var(--teal);font-size:33px;font-weight:400}.build-label{letter-spacing:.16em;align-items:center;gap:12px;font-size:9px;font-weight:750;display:flex}.build-label i,.live-dot{background:#369c70;border-radius:50%;width:7px;height:7px;display:inline-block}.app-content{flex:1;min-height:0;position:relative}.app-footer{height:43px;color:var(--muted);letter-spacing:.12em;padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;justify-content:space-between;align-items:center;font-size:9px;display:flex}.menu-page{border:1px solid var(--line);background:#fffef6;border-radius:24px;grid-template-columns:minmax(340px,.9fr) 1.1fr;gap:25px;height:100%;padding:clamp(24px,4vh,52px) clamp(28px,5vw,76px);display:grid;overflow:auto}.menu-card{z-index:1;align-self:center;max-width:430px;position:relative}.eyebrow{letter-spacing:.15em;color:var(--teal);align-items:center;gap:9px;margin-bottom:22px;font-size:10px;font-weight:800;display:flex}h1{letter-spacing:-.052em;font-size:clamp(35px,4.7vw,67px);font-weight:800;line-height:1.02}.menu-description{color:var(--muted);margin:20px 0 24px;font-size:14px;line-height:1.7}.mode-select{border:0;gap:10px;margin:0 0 18px;padding:0;display:flex}.mode-select legend{clip:rect(0,0,0,0);position:absolute}.mode-select label{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:8px;padding:11px 12px;font-size:11px;display:flex}.mode-select label:has(input:checked){border-color:var(--teal);background:#edf5ee}.mode-select input{accent-color:var(--teal);margin:0}.mode-select small{color:var(--muted);margin-top:3px;font-size:9px;display:block}.primary,.secondary{border-radius:12px;width:100%;min-height:47px;padding:12px 18px;font-size:12px;font-weight:750}.primary{background:var(--teal);color:#fff;justify-content:space-between;align-items:center;gap:20px;display:flex}.primary span{font-size:22px;line-height:1}.primary:hover{background:#086c67}.secondary{border:1px solid var(--line);color:var(--ink);background:0 0;margin-top:10px}.secondary:hover{background:#edf2e9}.small-note{color:var(--muted);letter-spacing:.02em;margin-top:17px;font-size:9px}.muted{color:var(--muted);margin:16px 0;font-size:13px;line-height:1.6}.menu-art{background:linear-gradient(#dcecdf 0 63%,#abd0bb 63% 67%,#ead0a1 67%);border-radius:200px 200px 24px 24px;align-self:stretch;min-height:340px;margin:0 0 0 25px;position:relative;overflow:hidden}.art-sun{background:#f7d796;border-radius:50%;width:80px;height:80px;position:absolute;top:15%;right:17%}.art-net{background:repeating-linear-gradient(#f2f3df 0 3px,#376964 3px 12px);border-top:6px solid #fff;width:7px;height:31%;position:absolute;bottom:24%;left:50%}.art-ball{width:48px;height:48px;color:var(--teal);background:#fff;border-radius:50%;place-items:center;font-size:42px;display:grid;position:absolute;top:32%;left:38%;transform:rotate(25deg);box-shadow:-18px 18px 0 -8px #fff5}.art-player{border-radius:50%;width:72px;height:72px;position:absolute;bottom:24%;box-shadow:0 20px 0 -12px #325c4d22}.art-player.alpha{background:#138d84;left:18%}.art-player.beta{background:#ed7053;right:15%}.art-player i{background:#173f43;border-radius:12px;width:36px;height:14px;position:absolute;top:29px;left:18px}.art-player i:before,.art-player i:after{content:"";background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;top:5px}.art-player i:before{left:9px}.art-player i:after{right:9px}.art-caption{flex-direction:column;gap:12px;display:flex;position:absolute;bottom:5%;left:8%}.art-caption span{letter-spacing:.13em;font-size:9px}.art-caption strong{letter-spacing:-.025em;font-size:24px;line-height:1.1}.settings-card{width:min(450px,100%);max-width:none}.settings-card h1{font-size:50px}.setting-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:32px;padding:17px 0;display:flex}.setting-row strong{font-size:13px}.setting-row small{color:var(--muted);margin-top:5px;font-size:10px;display:block}.setting-row input{width:21px;height:21px;accent-color:var(--teal)}.settings-card>.primary{margin-top:20px}.result-page{text-align:center;background:radial-gradient(#f8ebc9,#eef3e6);grid-template-columns:1fr}.result-card{width:350px;max-width:100%;margin:auto}.result-card .eyebrow{justify-content:center}.winner-symbol{border:2px solid;border-radius:50%;place-items:center;width:60px;height:60px;margin:0 auto 18px;font-size:27px;font-weight:850;display:grid}.result-card h1{font-size:54px}.final-score{letter-spacing:.06em;margin-top:18px;font-size:50px;font-weight:750}.final-score span{color:#87998a;vertical-align:middle;margin:0 18px;font-size:20px}.alpha-color{color:var(--teal)}.beta-color{color:var(--coral)}.game-screen{background:#eaf2e3;border:1px solid #ceded2;border-radius:24px;outline:none;position:absolute;inset:0;overflow:hidden}.court-canvas{position:absolute;inset:0}.court-canvas canvas{display:block}.match-tools{gap:8px;display:flex;position:absolute;top:18px;left:18px}.glass-button{min-width:40px;min-height:38px;color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffff5dc;border:1px solid #d4e0d0;border-radius:11px;padding:8px 13px;font-size:11px;font-weight:700}.glass-button:hover{background:#fff}.debug-toggle{position:absolute;top:18px;right:18px}.debug-toggle kbd{opacity:.6;margin-left:7px;font-size:10px}.scoreboard{background:#fffef5ec;border:1px solid #d4e0d0;border-radius:16px;align-items:center;gap:18px;padding:12px 22px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 4px 18px #476b4c08}.score-side{text-align:center;min-width:64px}.score-side>span{letter-spacing:.1em;font-size:8px;font-weight:800;display:block}.score-side strong{margin-top:5px;font-size:35px;line-height:1.05;display:block}.score-middle{text-align:center;flex-direction:column;gap:5px;display:flex}.score-middle>span{letter-spacing:.1em;font-size:7px;font-weight:750}.score-middle b{color:#7c8d80;font-size:11px}.score-middle small{letter-spacing:.1em;color:var(--muted);font-size:7px}.phase-callout{color:var(--ink);white-space:nowrap;pointer-events:none;background:#fffff2de;border-radius:16px;padding:10px 24px;font-size:clamp(22px,4vw,48px);font-weight:850;position:absolute;top:31%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px #36553b09}.touch-controls{pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:flex-end;gap:16px;display:flex;position:absolute;inset:auto 22px 18px}.joystick-group{pointer-events:auto;flex-direction:column;align-items:center;gap:6px;display:flex}.joystick-group small{letter-spacing:.12em;pointer-events:none;font-size:8px;font-weight:800}.joystick{touch-action:none;background:#ffffff60;border:2px solid #3159522e;border-radius:50%;place-items:center;width:clamp(80px,15vh,114px);height:clamp(80px,15vh,114px);display:grid;position:relative;box-shadow:inset 0 0 0 9px #ffffff20}.joystick-knob{pointer-events:none;will-change:transform;background:#406f6699;border:2px solid #ffffffa8;border-radius:50%;width:43%;height:43%;box-shadow:0 4px 9px #244a3917}.joystick-up{color:#436d6099;pointer-events:none;font-size:14px;font-weight:800;position:absolute;top:5px}.action-buttons{pointer-events:auto;align-items:flex-end;gap:13px;display:flex}.action-button{letter-spacing:.05em;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:clamp(78px,14vh,108px);height:clamp(78px,14vh,108px);font-size:10px;font-weight:850;transition:transform 70ms,box-shadow 70ms;display:flex}.action-button>span{font-size:26px;line-height:1}.super-button{color:#617b71;background:#f7f0d4a8;border:2px solid #46665035;width:clamp(68px,12vh,89px);height:clamp(68px,12vh,89px)}.super-button small{letter-spacing:.03em;font-size:6px;font-weight:650}.super-button>span{font-size:18px}.action-button.pressed{transform:scale(.94);box-shadow:0 0 0 5px #ffffe36e}.court-hint{text-align:center;color:#516b59;align-self:flex-end;margin-bottom:8px;font-size:10px;line-height:1.8}.court-hint b{font-size:9px}.court-hint>span{color:#9b9f7b;margin:0 12px}.court-hint small{font-size:9px;display:block}.pause-curtain{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#183e4040;place-items:center;display:grid;position:absolute;inset:0}.pause-card{border:1px solid var(--line);background:#fffef2;border-radius:20px;width:min(300px,80%);padding:25px;box-shadow:0 18px 50px #153e4022}.pause-card .eyebrow{margin-bottom:10px;font-size:8px}.pause-card h2{letter-spacing:-.04em;font-size:27px}.pause-reason{color:var(--muted);margin:12px 0 18px;font-size:11px;line-height:1.5}.loading-court{z-index:50;background:#eaf2e3;place-items:center;font-size:14px;display:grid;position:absolute;inset:0}.debug-overlay{z-index:30;color:#edffe9;background:#163b39f5;border:1px solid #51776c;border-radius:12px;width:min(350px,100% - 28px);max-height:calc(100% - 80px);padding:14px;position:absolute;top:65px;right:14px;overflow:auto;box-shadow:0 6px 25px #183f3a30}.debug-title{letter-spacing:.12em;justify-content:space-between;font-size:9px;font-weight:800;display:flex}.debug-overlay pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0;font:10px/1.6 ui-monospace,Consolas,monospace}.debug-actions{flex-wrap:wrap;gap:7px;display:flex}.debug-actions button{color:#183e40;background:#e5f3df;border-radius:6px;padding:9px 11px;font-size:10px;font-weight:700}.collider-toggle{align-items:center;gap:7px;margin:12px 0;font-size:11px;display:flex}.collider-toggle input{accent-color:#98d1ac}.debug-overlay>small{color:#bdd4c2;font-size:9px;line-height:1.5}@media (width<=900px){.menu-art{margin-left:0}.menu-page{grid-template-columns:minmax(300px,1fr) 1fr;gap:24px;padding:26px}.court-hint{display:none}.menu-art .art-player{width:56px;height:56px}.menu-art .art-player i{top:22px;left:10px}.art-caption strong{font-size:21px}}@media (width<=620px) and (orientation:portrait){.menu-page{display:block}.menu-card{margin:auto}.menu-art{display:none}.app-shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.app-header{height:62px}.brand{font-size:11px}.build-label{gap:6px;font-size:7px}.scoreboard{top:66px}.game-screen:after{content:"Rotate for a wider court";text-align:center;color:#658374;pointer-events:none;font-size:11px;position:absolute;top:170px;left:0;right:0}.touch-controls{bottom:25px;left:15px;right:15px}.app-footer{font-size:7px}.phase-callout{top:40%}}@media (height<=580px) and (orientation:landscape){.app-shell{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom)}.app-header{height:35px}.brand{gap:6px;font-size:10px}.brand-ball{font-size:24px}.build-label{font-size:7px}.app-footer{display:none}.app-content{margin-bottom:6px}.game-screen{border-radius:16px}.match-tools{gap:5px;top:9px;left:10px}.debug-toggle{top:9px;right:10px}.glass-button{min-width:32px;min-height:32px;padding:6px 9px;font-size:9px}.scoreboard{border-radius:12px;gap:10px;padding:6px 13px;top:8px}.score-side{min-width:45px}.score-side>span{font-size:7px}.score-side strong{margin-top:2px;font-size:25px}.score-middle{gap:2px}.score-middle>span,.score-middle small{font-size:6px}.touch-controls{bottom:9px;left:17px;right:17px}.joystick-group{gap:3px}.joystick-group small{font-size:6px}.joystick{width:78px;height:78px}.action-button{width:76px;height:76px;font-size:9px}.super-button{width:65px;height:65px;font-size:8px}.action-buttons{gap:10px}.action-button>span{font-size:22px}.super-button>span{font-size:16px}.super-button small{font-size:5px}.debug-overlay{width:330px;max-height:calc(100% - 56px);padding:10px;top:48px}.debug-overlay pre{font-size:9px}.menu-page{grid-template-columns:1.2fr 1fr;gap:30px;padding:18px 26px}.menu-card h1{font-size:35px}.menu-card .eyebrow{margin-bottom:10px;font-size:8px}.menu-description{margin:11px 0;font-size:11px;line-height:1.5}.mode-select{gap:7px;margin-bottom:10px}.mode-select label{padding:8px;font-size:9px}.mode-select small{font-size:7px}.primary,.secondary{min-height:35px;padding:8px 13px;font-size:10px}.secondary{margin-top:6px}.small-note{margin-top:9px;font-size:7px}.menu-art{min-height:230px}.art-caption strong{font-size:19px}.art-caption{gap:6px}.art-sun{width:50px;height:50px}.result-page{grid-template-columns:1fr}.result-card{text-align:left;grid-template-columns:1fr 1fr;gap:8px 22px;width:470px;display:grid}.result-card .eyebrow{grid-column:1/-1;justify-content:flex-start}.winner-symbol{display:none}.result-card .final-score{align-self:center;margin:0;font-size:40px}.result-card .muted{grid-column:1/-1;margin:0;font-size:10px}.result-card .secondary{margin:0}.setting-row{padding:10px 0}.setting-row strong{font-size:11px}.setting-row small{font-size:8px}.settings-card h1{font-size:32px}.settings-card>.primary{margin-top:10px}.settings-card .muted{margin:9px 0;font-size:11px}.pause-card{padding:18px}.phase-callout{padding:7px 17px;font-size:25px}}@media (prefers-reduced-motion:reduce){.action-button{transition:none}}.court-canvas{bottom:145px}.debug-visible .pause-curtain{-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;background:0 0;inset:auto auto 14px 50%;transform:translate(-50%)}.debug-visible .pause-card{width:auto;box-shadow:none;background:#fffff2ed;border-radius:12px;padding:9px 16px}.debug-visible .pause-card h2{margin:0;font-size:14px}.debug-visible .pause-card>p,.debug-visible .pause-card>button{display:none}@media (height<=580px) and (orientation:landscape){.court-canvas{bottom:98px}}.debug-overlay{max-height:calc(100% - 225px)}@media (height<=580px) and (orientation:landscape){.debug-overlay{max-height:calc(100% - 155px)}}.attack-joystick{touch-action:none;background:#e5f2e6d9;border:2px solid #145e5875;border-radius:50%;place-items:center;width:clamp(96px,15vh,114px);height:clamp(96px,15vh,114px);display:grid;position:relative;box-shadow:inset 0 0 0 8px #ffffff40}.attack-joystick:before{content:"";pointer-events:none;border:1px dashed #145e5880;border-radius:50%;width:38%;height:38%;position:absolute}.attack-knob{pointer-events:none;z-index:1;will-change:transform;background:#145e58;border:2px solid #ffffffc9;border-radius:50%;width:28%;height:28%;transition:transform .12s ease-out;box-shadow:0 3px 8px #244a3930}.attack-joystick.dragging .attack-knob{transition:none}.attack-sector{color:#59776b;pointer-events:none;border-radius:7px;align-items:center;gap:2px;padding:3px 4px;font-size:18px;line-height:1;display:flex;position:absolute}.attack-sector small{letter-spacing:.03em;font-size:6px}.attack-high{top:9%;right:11%}.attack-flat{top:41%;right:1%}.attack-steep{bottom:9%;right:7%}.attack-joystick[data-sector="-1"] .attack-high,.attack-joystick[data-sector="0"] .attack-flat,.attack-joystick[data-sector="1"] .attack-steep{color:#fff;background:#145e58;box-shadow:0 0 0 2px #fff9}.attack-joystick[data-released]{animation:.24s ease-out attack-release}.attack-group{min-width:114px}.attack-group .attack-label{letter-spacing:.045em;color:#145e58;min-height:9px;font-size:7px}.action-buttons{align-items:flex-start}.super-button{margin-top:2px}@keyframes attack-release{0%{box-shadow:0 0 0 7px #145e5870}to{box-shadow:0 0 #145e5800}}@media (height<=580px) and (orientation:landscape){.attack-joystick{width:78px;height:78px}.attack-group{min-width:91px}.attack-group .attack-label{min-height:7px;font-size:6px}.attack-sector{padding:2px;font-size:13px}.attack-sector small{font-size:5px}.attack-high{top:7%;right:7%}.attack-steep{bottom:7%;right:3%}.action-buttons{gap:7px}.super-button{width:58px;height:58px}}@media (prefers-reduced-motion:reduce){.attack-knob{transition:none}.attack-joystick[data-released]{outline:2px solid #145e58;animation:none}}