*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#f0e7d4;color:#243d39;font-family:Arial,sans-serif}button{font:700 13px Arial;padding:11px 17px;border:1px solid #274a42;background:#fcf5e5;color:#243d39;border-radius:4px;cursor:pointer}button:hover,button:active{background:#e6aa8a}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #b7442c;outline-offset:3px}header{height:88px;display:flex;justify-content:space-between;align-items:center;padding:12px 75px;border-bottom:2px solid #274a42}.brand{font-size:30px;font-weight:900;letter-spacing:-1px}.brand i,h1 i{color:#bf4b33}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-top:5px}nav{display:flex;gap:8px}#help-button{background:#ffffff60}main{height:calc(100dvh - 88px);max-width:1250px;margin:auto;padding:12px 26px;display:flex;flex-direction:column;align-items:center;gap:8px}.hud{display:flex;justify-content:space-between;width:100%;font-size:13px;letter-spacing:1px}.hud b{font-size:22px;margin-left:6px}.court{position:relative;min-height:0;flex:1;width:100%;display:flex;justify-content:center}canvas{display:block;max-width:100%;max-height:100%;aspect-ratio:1000/650;object-fit:contain;touch-action:none}#callout{position:absolute;top:44%;left:0;width:100%;text-align:center;pointer-events:none;font-size:24px;font-weight:900;color:#fff;text-shadow:0 2px 3px #1239}#drag{display:none}footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;height:46px}footer>b{font-size:14px}#serve{background:#bf4b33;color:white;min-width:125px}.modal{display:none;position:fixed;inset:0;background:#153f39d9;z-index:100;align-items:center;justify-content:center;padding:14px}.modal.is-visible{display:flex}.modal>div{background:#fcf5e5;padding:30px 38px;width:530px;max-width:100%;max-height:calc(100dvh - 28px);overflow:auto;box-shadow:12px 12px 0 #c75a40}.modal p{line-height:1.5;font-size:15px}h1{font-size:58px;margin:10px 0;letter-spacing:-3px}h2{font-size:36px}.eyebrow{font-size:11px!important;letter-spacing:2px;font-weight:bold}.modal button{background:#bf4b33;color:#fff;margin:4px 6px 0 0}body:has(.modal.is-visible) #drag{visibility:hidden}
@media(max-width:900px),(pointer:coarse){header{height:48px;padding:4px 60px 4px 12px}.brand{font-size:20px}.brand small{display:none}nav{gap:5px}nav button{padding:7px 9px;font-size:11px}#help-button,#reset,#flyout-nav{display:none!important}main{height:calc(100dvh - 48px);padding:6px 12px;gap:4px}.hud{font-size:10px}.hud b{font-size:16px}#drag{display:block;width:100%;height:40px;flex-shrink:0;border:1px solid #66857b;background:#d9ddc7;position:relative;touch-action:none;user-select:none;border-radius:4px;text-align:center;font-size:10px;line-height:38px;letter-spacing:2px}#thumb{position:absolute;left:50%;top:3px;width:8px;height:32px;background:#bf4b33;border-radius:4px;pointer-events:none}footer{height:34px;flex-shrink:0}footer span{display:none}footer b{font-size:11px}#serve{padding:8px 12px;font-size:11px}#callout{font-size:17px}.modal>div{padding:18px 24px}.modal p{font-size:13px}h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:600px) and (orientation:portrait){main{justify-content:center}.court{flex:0 0 auto}canvas{width:100%;height:auto}footer{margin-top:8px}.hud{margin-bottom:8px}}
button:disabled{cursor:default;opacity:.6}#serve:disabled{background:#526e60;border-color:#526e60}
body:has(.modal.is-visible) #serve{visibility:hidden}
#spin-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-shrink:0;min-height:42px}#spin-readout{font-size:12px;font-weight:800;letter-spacing:.5px}#spin-controls>div{display:flex;gap:6px}#spin-controls button{min-width:76px;padding:10px 12px}#spin-controls button.selected{background:#254f44;color:#fff;border-color:#254f44}#spin-controls small{opacity:.65;margin-left:4px}body:has(.modal.is-visible) #spin-controls{visibility:hidden}
@media(max-width:900px),(pointer:coarse){#spin-controls{gap:5px;min-height:38px}#spin-readout{font-size:10px;max-width:48%;letter-spacing:0}#spin-controls button{min-width:57px;padding:10px 7px;font-size:11px}#spin-controls small{display:none}#drag{height:34px;line-height:32px}#thumb{height:26px}footer{height:30px}}
@media(max-width:900px) and (orientation:landscape){#spin-controls{position:absolute;left:12px;top:112px;width:145px;flex-direction:column;align-items:stretch;gap:12px}#spin-controls>div{flex-direction:column;align-items:stretch}#spin-controls button{min-height:40px}#spin-readout{max-width:100%;font-size:11px;line-height:1.4}.court{padding:0 145px}#spin-controls small{display:none}}