:root{font-family:Arial,Helvetica,sans-serif;color:#f6f9ed;background:#153c38;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #def776;outline-offset:5px}[hidden]{display:none!important}#game{height:100dvh;min-height:540px;position:relative;overflow:hidden}#court{width:100%;height:100%;display:block}header{position:absolute;left:38px;right:38px;top:26px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:22px;letter-spacing:-.7px;font-weight:900;display:flex;align-items:center;gap:10px}.brand small{font-size:11px;letter-spacing:2px;font-weight:500;border-left:1px solid #ffffff40;margin-left:9px;padding-left:18px}.ball-logo{font-size:36px;color:#dff67b;line-height:1}.top-actions{display:flex;gap:10px}.top-actions button{background:#12332d90;border:1px solid #ffffff30;border-radius:24px;color:#fff;padding:11px 17px;font-size:12px;letter-spacing:1px}.scoreboard{position:absolute;top:92px;left:50%;transform:translateX(-50%);display:flex;gap:24px;align-items:center;padding:16px 24px;background:#092d2cec;border:1px solid #ffffff25;border-radius:14px;box-shadow:0 12px 30px #082b3030}.score-side{display:flex;align-items:center;gap:18px}.score-side strong{font-size:42px;line-height:1;font-variant-numeric:tabular-nums}.tag{font-size:12px;font-weight:800;padding:7px 9px;border-radius:5px}.player{color:#153a39;background:#ddf580}.opponent{background:#fc896c;color:#482a22}.score-center{text-align:center;display:flex;flex-direction:column;gap:7px;white-space:nowrap}.score-center span{font-size:10px;letter-spacing:1.5px}.score-center small{font-size:10px;letter-spacing:1.8px;color:#a9c9be}.court-label{position:absolute;left:38px;top:120px;display:flex;flex-direction:column;gap:12px}.court-label span{font-size:10px;letter-spacing:2px;color:#b9d2c5}.court-label strong{font-size:23px;font-weight:500}.rally-stat{position:absolute;right:38px;top:123px;display:flex;flex-direction:column;text-align:right;gap:6px}.rally-stat span{font-size:11px;letter-spacing:2px}.rally-stat strong{font-size:46px;color:#e4f887;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}.rally-stat small{font-size:10px;color:#b9d2c5;letter-spacing:1px}.bottom{position:absolute;bottom:0;left:0;right:0;min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 38px;background:linear-gradient(transparent,#092b2de8);pointer-events:none}.movement{display:flex;align-items:center;gap:13px}.key-grid{text-align:center}.key-grid>kbd{margin-bottom:3px}.key-grid div{display:flex;gap:3px}kbd{display:inline-block;background:#e6f5de13;border:1px solid #e6f5de50;border-bottom-width:3px;border-radius:5px;padding:5px 7px;font:11px Arial;color:#f6fbe9}.movement>span{font-size:11px;letter-spacing:1.5px}.movement small{display:block;font-size:11px;margin-top:7px;color:#afc5bb;letter-spacing:0}.shots{display:flex;gap:25px;font-size:13px;align-items:center}.shots kbd{margin-right:4px}.aim-note{text-align:right;font-size:11px;color:#b3cfc4;line-height:1.6}.aim-note strong{font-weight:400;color:#eef5de}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:70px 9%;background:linear-gradient(90deg,#07322ff5 0%,#07322fdf 31%,#07322f35 64%,transparent)}.menu{max-width:510px;padding-top:25px}.eyebrow{color:#d9ee91;font-size:11px;letter-spacing:3px;margin-bottom:25px}h1{font-size:clamp(42px,5.8vw,82px);line-height:1.03;letter-spacing:-4px;margin:0 0 25px;font-weight:800}h1 em{font-style:normal;color:#dbf57a}p{font-size:16px;color:#c0d7cc;line-height:1.7;margin:0 0 32px}.primary{background:#def67f;border:0;border-radius:7px;padding:19px 22px;min-width:290px;text-align:left;font-size:12px;letter-spacing:1.6px;color:#173830;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:45px;transition:background .2s,transform .2s}.primary:hover{background:#edffa4;transform:translateY(-2px)}.primary span{font-size:23px;font-weight:400;line-height:1}.menu-tip{font-size:11px;color:#9cbfb0;margin-top:22px;line-height:1.7}.menu-tip span{color:#e9f5dc}.menu-tip b{margin:0 10px}h2{font-size:54px;letter-spacing:-2px;margin:0 0 20px}.secondary{border:0;background:transparent;color:#e6f0dc;padding:20px 0;font-size:14px}.compact{max-width:520px}.serve-hint{position:absolute;bottom:117px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.4px;background:#143a34dd;padding:11px 18px;border-radius:30px;white-space:nowrap}.serve-hint kbd{margin-right:8px}#toast{position:absolute;top:190px;left:50%;transform:translateX(-50%);font-size:20px;font-weight:700;text-shadow:0 2px 8px #133c35;white-space:nowrap;opacity:0;transition:opacity .18s}#toast.show{opacity:1}#error{position:absolute;inset:30%;background:#143b35;padding:30px;line-height:1.6;z-index:20}
@media(max-width:1050px){.court-label{top:100px}.court-label strong{font-size:18px}.court-label span{font-size:9px}.scoreboard{gap:14px;padding:13px 18px;top:84px}.aim-note{display:none}.shots{gap:15px}.brand small{display:none}.rally-stat{top:100px}}@media(max-width:700px){header{left:18px;right:18px;top:16px}.brand{font-size:18px}.top-actions button{padding:9px;font-size:10px}.top-actions span{display:none}.court-label{display:none}.rally-stat{top:171px;right:20px}.rally-stat strong{font-size:28px}.scoreboard{top:75px}.bottom{padding:16px;align-items:flex-end}.shots{display:flex;flex-direction:column;gap:5px;align-items:flex-start}.overlay{padding:70px 8%;background:linear-gradient(90deg,#07322feb,#07322f88)}h1{font-size:55px;letter-spacing:-2px}.menu-tip{max-width:280px}#toast{font-size:16px;top:160px}}

.shot-hud{position:absolute;bottom:112px;left:32px;width:265px;padding:15px 18px;border:1px solid #ffffff25;border-radius:10px;background:#0c332eeb;pointer-events:none}.shot-hud>span{font-size:12px;letter-spacing:1px}.power-track{height:9px;background:#ffffff22;border-radius:5px;position:relative;margin:12px 0 9px;overflow:hidden}.power-track i{display:block;width:0;height:100%;background:#ddf67f}.power-track b{position:absolute;left:80%;width:1px;background:#fff;top:0;bottom:0}.shot-hud small{font-size:10px;letter-spacing:.5px}.shot-hud strong{display:block;font-size:25px;color:#e0f48b;margin-top:10px;font-variant-numeric:tabular-nums}.aim-note{display:block;pointer-events:none}.bottom{pointer-events:none}#court{cursor:crosshair}@media(max-width:700px){.shot-hud{left:16px;bottom:150px;width:215px}.aim-note{display:none}}

.controller-status{position:absolute;top:69px;right:38px;font-size:12px;color:#d7e9ca;max-width:330px;text-align:right;pointer-events:none}#padHelp{font-size:13px;flex-wrap:wrap}.menu p small{font-size:13px;line-height:1.5;color:#ddf67f}@media(max-width:700px){.controller-status{top:54px;right:18px;font-size:10px}#padHelp{gap:9px}}