:root{color-scheme:dark;--ink:#f0eddf;--muted:#99aaa4;--green:#c9e6a6;--line:#ffffff20;--dark:#101a1d}
*{box-sizing:border-box}body{margin:0;background:var(--dark);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:5px}button{color:inherit}#court{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#101a1df5 0%,#101a1ddd 23%,#101a1d30 49%,transparent 70%),linear-gradient(0deg,#101a1dbf,transparent 20%);transition:opacity .5s}body.playing .vignette{opacity:0}header{position:fixed;top:0;left:0;right:0;padding:28px 42px;display:flex;align-items:center;justify-content:space-between;z-index:3}.brand{color:var(--ink);text-decoration:none;font-size:25px;letter-spacing:-1.2px;font-weight:600;display:flex;align-items:center;gap:10px}.brand svg{width:32px;height:36px;stroke:var(--green);stroke-width:1.5;fill:none}.brand-dot{color:var(--green)}.header-right{display:flex;align-items:center;gap:24px}.club-tag{font-size:10px;letter-spacing:2px;color:#d7dfc9}.club-tag i,.player-label i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:8px}.icon-button{border:1px solid var(--line);background:#142024a8;border-radius:30px;padding:10px 14px;font-size:11px}.icon-button:hover{border-color:var(--green)}
#lobby{position:absolute;top:20%;left:6%;width:365px;z-index:2}.eyebrow{display:flex;align-items:center;gap:12px;color:var(--green);font-size:9px;letter-spacing:2px;font-weight:600}.fine-line{width:29px;height:1px;background:#9aab87}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:57px;line-height:1.08;letter-spacing:-2.8px;margin:25px 0 19px}h1 em{color:var(--green);font-weight:400}p.intro{font-size:13px;line-height:1.8;color:#a7b5ad;margin:0 0 29px}.section-label{color:#64786e;font-size:10px;letter-spacing:1.5px;display:flex;gap:13px;margin-bottom:13px}.section-label span{color:#c3ccc0;font-size:9px}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.level{background:#142226a8;border:1px solid #ffffff20;text-align:left;border-radius:5px;padding:13px 11px 12px;transition:background .2s,border-color .2s}.level.selected{background:#c7e5a613;border-color:#c9e6a6a0}.level:hover{background:#c7e5a61c}.level-dots{display:block;font-size:10px;letter-spacing:2px;color:#71867a;margin-bottom:12px}.selected .level-dots{color:var(--green)}.level strong{display:block;font-size:13px;font-weight:500;margin-bottom:6px}.level small{font-size:9px;color:var(--muted);white-space:nowrap}.match-options{display:flex;justify-content:space-between;gap:15px;margin:20px 0}.match-options label{font-size:8px;letter-spacing:1.5px;color:#84988b;display:block}.match-options select{display:block;font-size:10px;letter-spacing:0;border:0;border-bottom:1px solid var(--line);padding:8px 12px 8px 0;background:transparent;color:#cbd5c7;max-width:190px}.match-options select option{background:#17292b}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:4px;background:var(--green);color:#1a2921;padding:17px 19px;font-size:13px;font-weight:600;transition:background .2s,transform .2s}.primary:hover{background:#dff5c5;transform:translateY(-1px)}.primary span{font-size:21px;line-height:15px}.under-start{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.under-start>span{font-size:8px;letter-spacing:1.4px;color:#788d80}.under-start button{background:none;border:0;font-size:10px;color:#c8d1c2;padding:0}.under-start button span{margin-left:10px}#court-note{position:fixed;right:6%;bottom:105px;display:flex;gap:15px;align-items:flex-start}.small-cross{color:var(--green);font-size:22px;font-weight:200}#court-note strong{font-family:Georgia,serif;font-weight:400;font-size:18px}#court-note p{font-size:10px;color:var(--muted);margin:8px 0}footer{position:fixed;bottom:0;left:42px;right:42px;border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.6px;color:#7d9589}.arrow{color:var(--green);font-size:15px;margin-left:20px}
.hidden{display:none!important}#hud{position:fixed;top:28px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}.score-card{display:flex;gap:24px;align-items:center;background:#0f1d20d9;border:1px solid #d8e5bc24;border-radius:9px;padding:13px 29px;backdrop-filter:blur(12px)}.score-card>div{min-width:54px}.player-label{font-size:9px;letter-spacing:1.5px;color:var(--green);display:block}.player-label.opponent{color:#e6a484}.score-card b{display:block;font-weight:400;font-size:40px;line-height:1.2;font-variant-numeric:tabular-nums;margin-top:5px}.score-divider{color:#61746b;font-size:25px}.match-caption{font-size:8px;letter-spacing:1.7px;color:#b7c8b6;margin-top:11px}#rally-label{font-size:9px;letter-spacing:2px;color:var(--green);margin-top:13px}#feedback{position:fixed;left:50%;top:32%;transform:translateX(-50%);font-size:11px;font-weight:600;letter-spacing:2px;color:#ffdfa5;text-shadow:0 2px 6px #000;text-align:center;pointer-events:none}#match-bottom{position:fixed;bottom:24px;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}#prompt{text-align:center;background:#0c191dcc;border:1px solid #ffffff17;padding:12px 25px;border-radius:6px;margin-bottom:16px;min-width:260px}#prompt strong{font-family:Georgia,serif;font-size:21px;font-weight:400;display:block}#prompt span{font-size:10px;color:#acbdad;display:block;margin-top:7px}.desktop-controls{display:flex;align-items:center;gap:22px;color:#adbdaf;font-size:8px;letter-spacing:1px}.desktop-controls button{pointer-events:auto;background:transparent;border:0;font-size:8px;letter-spacing:1px;color:#adbdaf;padding:4px}kbd{display:inline-block;border:1px solid #7c938355;border-radius:3px;padding:5px 7px;font-family:inherit;font-size:9px;color:#e1e9d5;margin-right:6px;background:#152327c4}
dialog{background:#152326f5;color:var(--ink);border:1px solid #70847570;border-radius:12px;max-width:560px;width:calc(100% - 32px);padding:35px;box-shadow:0 24px 100px #0008;backdrop-filter:blur(20px)}dialog::backdrop{background:#091519a3;backdrop-filter:blur(7px)}h2{font-family:Georgia,serif;font-weight:400;font-size:38px;letter-spacing:-1px;margin:20px 0 15px}dialog p{color:#a9b8ac;font-size:13px;line-height:1.7}dialog .close{position:absolute;right:20px;top:14px;font-size:25px;background:none;border:0;color:#b7c8b6}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:25px 0}.help-grid b{color:var(--green);font-size:11px;font-weight:500}.help-grid p{font-size:11px}.help-grid kbd{font-size:8px;padding:3px}#pause-dialog,#results{max-width:410px}.secondary{background:none;border:1px solid #ffffff25;width:100%;padding:13px;margin-top:10px;border-radius:4px;font-size:12px}.stats{display:flex;gap:40px;margin:25px 0}.stats b{font-size:34px;font-weight:400;display:block;color:var(--green)}.stats span{font-size:8px;letter-spacing:1px;color:var(--muted)}#error{position:fixed;inset:0;z-index:20;background:#152326;padding:15vh 15vw}#error button{background:var(--green);color:#152326;border:0;padding:15px 25px;border-radius:5px}#touch-controls{display:none}
@media(min-width:1500px){#lobby{top:22%;left:8%;width:420px}h1{font-size:68px}.level{padding:16px}.intro{font-size:15px!important}.setup{margin-top:35px}}
@media(max-height:740px) and (min-width:701px){#lobby{top:17%;left:5%;width:335px}h1{font-size:47px;margin:18px 0 13px}.intro{margin-bottom:18px!important}.level{padding:9px}.level-dots{margin-bottom:8px}.match-options{margin:13px 0}.primary{padding:14px 17px}#court-note{bottom:85px}footer{padding:18px 0}}
@media(max-width:700px){header{padding:18px 20px}.brand{font-size:22px}.brand svg{width:25px}.club-tag{display:none}.header-right{gap:8px}.icon-button{padding:9px 11px;font-size:10px}.vignette{background:linear-gradient(0deg,#101a1d 5%,#101a1def 48%,#101a1d10 100%)}#lobby{top:auto;bottom:63px;left:24px;right:24px;width:auto;max-width:420px;margin:auto}#lobby>.eyebrow{font-size:8px}h1{font-size:43px;margin:16px 0 12px;line-height:1.04}h1 br{display:none}.intro{font-size:11px!important;line-height:1.5!important;margin:0 0 20px!important}.intro br{display:none}.level{padding:12px}.level-dots{margin-bottom:9px}.level strong{font-size:12px}.match-options{margin:16px 0}.primary{padding:16px}.under-start{margin-top:12px}#court-note{display:none}footer{left:24px;right:24px;bottom:0;padding:17px 0;font-size:7px}footer>span:last-child{display:none}#hud{top:72px}.score-card{padding:8px 20px;gap:18px}.score-card b{font-size:30px}.player-label{font-size:8px}.match-caption{font-size:7px;margin-top:8px}#rally-label{font-size:8px;margin-top:8px}body.playing header .brand{font-size:18px}body.playing .brand svg{height:25px}#match-bottom{bottom:168px}#prompt{padding:9px 14px;margin-bottom:0;min-width:200px}#prompt strong{font-size:17px}#prompt span{font-size:9px}.desktop-controls{display:none}#touch-controls{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-end;touch-action:none;user-select:none}#joystick{width:105px;height:105px;border:1px solid #c5dfad4d;border-radius:50%;background:#132529b3;position:relative;touch-action:none}#stick{position:absolute;width:42px;height:42px;border-radius:50%;background:#c9e6a642;border:1px solid #c9e6a677;left:31px;top:31px}#joystick span{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:2px;color:#aac298}.touch-right{display:flex;flex-direction:column;gap:10px;align-items:center}.aim-buttons,.shot-buttons{display:flex;gap:7px}.aim-buttons button{width:41px;height:33px;border-radius:5px;border:1px solid #c9e6a638;background:#14272ccc;color:#b6cfa6}.aim-buttons button.active{background:#c9e6a637;border-color:#c9e6a6}.shot-buttons button{border:1px solid #c9e6a670;background:#192d30e0;padding:16px 12px;border-radius:7px;font-size:11px}.shot-buttons button[data-shot=clear]{background:var(--green);color:#142326}#feedback{top:31%;font-size:9px;white-space:nowrap}.help-grid{gap:10px}dialog{padding:25px}h2{font-size:32px}}
@media(pointer:coarse) and (min-width:701px){#touch-controls:not(.hidden){display:flex;position:fixed;bottom:20px;left:25px;right:25px;justify-content:space-between}#joystick{width:90px;height:90px;border-radius:50%;background:#c9e6a633;touch-action:none;position:relative}#stick{width:40px;height:40px;border-radius:50%;background:#c9e6a655;position:absolute;left:25px;top:25px}#joystick span{display:none}.touch-right button{padding:14px;border:1px solid #c9e6a644;background:#13272bdd;border-radius:5px}.desktop-controls{display:none}}
@media(max-height:660px) and (max-width:700px){#lobby{bottom:53px}h1{font-size:32px;margin:10px 0}.intro{margin-bottom:12px!important}.level{padding:8px}.level-dots{margin-bottom:5px}.section-label{margin-bottom:8px}.match-options{margin:9px 0}.primary{padding:12px}#lobby>.eyebrow{display:none}}
.aim-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px;color:#84988b;font-size:8px;letter-spacing:1.5px}.aim-setting select{max-width:245px;padding:7px 0;background:#152326;color:#d5dfca;border:0;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:0}.aim-buttons button[data-aim=auto]{font-size:10px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-height:520px) and (min-width:701px){header{padding:15px 25px}#lobby{top:75px;bottom:43px;left:6%;right:6%;width:auto;max-width:none;display:grid;grid-template-columns:1fr 335px;column-gap:30px;align-content:center}#lobby>.eyebrow{grid-column:1;grid-row:1;align-self:end}#lobby h1{grid-column:1;grid-row:2;font-size:40px;margin:12px 0}#lobby .intro{grid-column:1;grid-row:3;font-size:11px}#lobby .setup{grid-column:2;grid-row:1/4}#court-note{display:none}footer{left:25px;right:25px;padding:14px 0}.club-tag{display:none}#hud{top:12px}.score-card{padding:7px 20px;gap:14px}.score-card b{font-size:25px}.match-caption{margin-top:7px;font-size:7px}#rally-label{margin-top:7px;font-size:8px}#match-bottom{bottom:16px}#prompt{padding:7px 15px;margin-bottom:7px}#prompt strong{font-size:16px}#prompt span{font-size:8px}.desktop-controls{gap:14px}}
@media(max-height:340px){body:not(.playing){overflow-y:auto}body:not(.playing) #lobby{position:relative;top:auto;bottom:auto;margin:85px 6% 70px;left:auto;right:auto}body:not(.playing) footer{position:relative;left:auto;right:auto;margin:0 25px}}