*{box-sizing:border-box}body{margin:0;background:#080b10;color:#f6f4ef;font:15px system-ui,sans-serif;min-height:100vh;display:grid;place-items:center}.shell{width:min(100%,900px);padding:14px}header{display:flex;justify-content:space-between;color:#9ca5b0;font-size:12px;letter-spacing:1.5px;font-weight:800;margin-bottom:8px}header a{color:#ff7161;text-decoration:none}.hud{display:flex;justify-content:center;gap:clamp(25px,8vw,100px);text-align:center;margin:5px 0 8px}.hud div{display:grid;gap:2px}.hud small{font-size:10px;color:#94a0a7;letter-spacing:1.5px}.hud b{font-size:27px}.clock b{color:#ffe58a}.court-wrap{position:relative;border:1px solid #38433e;border-radius:12px;overflow:hidden;box-shadow:0 20px 70px #0009}canvas{display:block;width:100%;height:auto;background:#a96137;image-rendering:pixelated}#toast{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#101820d9;border:1px solid #ffffff22;padding:7px 13px;border-radius:99px;font-size:12px;color:#e9e6dc;pointer-events:none}.controls{display:flex;justify-content:space-between;align-items:center;margin:10px 0}.move-pad{text-align:center}.move-pad div{display:flex;gap:5px}.controls button{border:1px solid #3b4652;background:#171e27;color:white;border-radius:10px;padding:10px 15px;font-weight:900;touch-action:none}.move-pad button{padding:8px 15px}.actions{display:flex;gap:8px}.actions #shoot{background:#ed624b;border-color:#ff8e69}.controls kbd{font-size:9px;color:#bac3ca;margin-left:5px}.help{color:#9ca5ae;font-size:11px;line-height:1.45;text-align:center;max-width:730px;margin:0 auto}@media(max-width:560px){.shell{padding:8px}.hud{margin:3px 0 6px;gap:16px}.hud b{font-size:22px}.controls{align-items:flex-end}.controls button{padding:9px 10px}.actions{flex-direction:column}.move-pad button{padding:8px 12px}.help{font-size:10px}#toast{font-size:9px;white-space:normal;text-align:center;width:86%}}
canvas{image-rendering:pixelated}.hud div small:last-child{font-size:9px}.hud .clock small{white-space:nowrap}
.actions #steal{background:#357db4;border-color:#79bce9}.actions button{min-width:90px}@media(max-width:560px){.actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}.actions button{padding:8px 9px;min-width:auto}canvas{max-height:65vh;object-fit:contain}}
.shell{width:min(100%,620px)}.court-wrap{width:100%;margin:0 auto}canvas{width:100%;max-width:100%;height:auto;aspect-ratio:4/5}.controls{gap:8px}.actions{flex-wrap:wrap;justify-content:flex-end}
.court-wrap{width:min(100%,560px)}canvas{width:100%;height:auto;aspect-ratio:4/5;image-rendering:pixelated}.shell{width:min(100%,700px)}@media(max-width:700px){.controls{align-items:center}.actions{flex-wrap:wrap}.actions button{min-width:74px}}
/* One-on-one arcade layout */
body{display:block;min-height:100vh;padding:8px 0}.shell{width:min(100%,980px);margin:0 auto;padding:12px 18px}.court-wrap{width:100%;max-width:none}.court-wrap canvas{width:100%;height:auto;aspect-ratio:900/520;max-height:none;object-fit:contain}.controls{gap:16px}.actions{flex-wrap:wrap;justify-content:flex-end}.help{margin:6px auto 12px}@media(max-width:700px){.shell{padding:8px}.controls{align-items:center;flex-wrap:wrap;justify-content:center}.actions{justify-content:center}.court-wrap canvas{width:100%;height:auto;max-height:none}}
.menu-toggle{border:1px solid #4e6070;background:#1a2331;color:#f4f1e9;border-radius:9px;padding:7px 13px;font-weight:900;letter-spacing:1px;cursor:pointer}.menu-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at center,#252441dd,#090b12f5 75%);backdrop-filter:blur(5px)}.menu-screen.hidden{display:none}.menu-card{width:min(100%,430px);padding:35px 30px 27px;text-align:center;border:2px solid #596580;border-radius:18px;background:linear-gradient(155deg,#252944,#121825 68%);box-shadow:0 25px 90px #000b, inset 0 0 30px #ffffff08}.menu-kicker{color:#ff7965;font-size:11px;font-weight:900;letter-spacing:3px}.menu-card h1{margin:9px 0 0;font-size:clamp(40px,10vw,66px);line-height:1;font-weight:1000;letter-spacing:-2px;color:#43b7ff;text-shadow:3px 4px #1e397b,0 0 24px #348bff88}.menu-subtitle{margin:12px 0 24px;color:#e9d978;font-size:12px;font-weight:900;letter-spacing:2px}.menu-primary{display:block;width:100%;padding:15px;border:0;border-radius:11px;background:linear-gradient(180deg,#ff7e55,#df3f39);color:white;font-size:17px;font-weight:1000;letter-spacing:1px;box-shadow:0 5px #872d31;cursor:pointer}.menu-leave{display:inline-block;margin-top:18px;color:#b8c4d2;font-size:12px;font-weight:800;letter-spacing:1px;text-decoration:none}.menu-leave:hover{color:white}.menu-hint{margin:22px 0 0;color:#8794a4;font-size:11px;line-height:1.5}
.menu-card{max-height:90vh;overflow:auto}.menu-tabs{display:flex;gap:8px;margin:0 0 15px}.menu-tabs button{flex:1;padding:10px;border:1px solid #53617a;border-radius:9px;background:#171c2a;color:#bec8d7;font-weight:900;letter-spacing:1px;cursor:pointer}.menu-tabs button.active{background:#25446a;border-color:#48b7ff;color:#fff}.menu-panel.hidden{display:none}.menu-panel h2{margin:8px 0;color:#f5f0e5;font-size:18px}.settings-note{color:#a9b3c0;font-size:12px;margin:6px 0 12px}.bind-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.bind-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:7px 9px;border-radius:8px;background:#ffffff0b;color:#d6deea;font-size:10px;font-weight:900;letter-spacing:.5px}.bind-row button{min-width:52px;padding:6px 9px;border:1px solid #57667d;border-radius:7px;background:#121824;color:#ffe58a;font-weight:1000;cursor:pointer}.reset-binds{margin-top:12px;padding:8px 12px;border:1px solid #596782;border-radius:8px;background:#1c2637;color:#d6deea;font-size:11px;font-weight:900;cursor:pointer}
.menu-leave-game{display:block;width:100%;margin-top:12px;padding:11px;border:1px solid #ef9274;border-radius:9px;background:#32232a;color:#ffd1bf;font-size:12px;font-weight:900;letter-spacing:.7px;cursor:pointer}.menu-leave-game:hover{background:#513036;color:#fff}#leave-match[hidden]{display:none}
/* Smooth the illustrated players and court while keeping crisp arcade colors. */
.court-wrap canvas{image-rendering:auto}
.controls #jump{background:#e3af44;border-color:#ffe28b;color:#201a12}.controls #shoot{background:#ed624b;border-color:#ff8e69}

.result-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at center,#2b2947ee,#080a11fa 76%);backdrop-filter:blur(7px)}.result-screen.hidden{display:none}.result-card{width:min(100%,440px);padding:38px 30px 30px;text-align:center;border:2px solid #60708c;border-radius:20px;background:linear-gradient(155deg,#252944,#121825 68%);box-shadow:0 25px 90px #000b,inset 0 0 30px #ffffff08}.result-kicker{color:#f5d76b;font-size:12px;font-weight:1000;letter-spacing:4px}.result-card h1{margin:16px 0 8px;color:#43b7ff;font-size:clamp(46px,12vw,72px);font-weight:1000;line-height:.98;text-shadow:3px 4px #1e397b,0 0 24px #348bff77}.result-score{margin:20px 0;color:#fff;font-size:32px;font-weight:1000;letter-spacing:3px}.result-card p{margin:0 0 25px;color:#b8c4d2;font-size:14px}.result-card button{cursor:pointer}