:root{font-family:Arial,Helvetica,sans-serif;color:#243c32;background:#f4efe5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;padding:0 3.7vw;display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ec6a3a;outline-offset:5px}button{color:inherit}button:hover{filter:brightness(1.07)}button:active{transform:translateY(1px)}[hidden]{display:none!important}.topbar{height:98px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{text-decoration:none;color:inherit;font-size:21px;font-weight:900;letter-spacing:-1px;display:flex;align-items:center;gap:5px}.brand>span:nth-child(2){color:#ed683a}.brand-ball{font-size:38px;line-height:1;margin-right:8px}.brand-dot{align-self:flex-start;font-size:10px;margin:5px 0 0 3px}.edition,footer,.court-label,.court-number,.coordinate,.court-bottom,.eyebrow,.personal-best,.start-hint,.hud{font-size:10px;letter-spacing:1.6px;font-weight:700}.edition{opacity:.57;font-size:9px}.header-actions{display:flex;gap:10px}.icon-button{width:38px;height:38px;border:1px solid #243c3230;border-radius:50%;background:transparent;display:grid;place-items:center;font-size:18px}.icon-button svg{height:18px;width:18px;stroke:currentColor;stroke-width:1.6;fill:none}.icon-button.muted{opacity:.4}.icon-button.muted::after{content:'';position:absolute;width:21px;height:1px;background:currentColor;transform:rotate(-45deg)}#arena{height:calc(100dvh - 164px);min-height:540px;max-height:1000px;background:#e3b295;position:relative;overflow:hidden;border-radius:8px;isolation:isolate;touch-action:none}#scene{position:absolute;inset:0}canvas{width:100%;height:100%;display:block}.court-top{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;pointer-events:none}.court-label{display:flex;align-items:center;gap:9px;font-size:9px}.court-label i,.status-dot{height:6px;width:6px;background:#2c5947;display:inline-block;border-radius:50%}.court-number{opacity:.6;font-size:9px}.welcome{position:absolute;left:7.1%;top:19%;pointer-events:none}.welcome button{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2px}h1{font-size:clamp(60px,6.8vw,108px);line-height:.91;letter-spacing:-6px;margin:27px 0 26px;font-weight:800}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-5px}p{font-size:13px;line-height:1.8;color:#4b5b4d;margin:0 0 25px}.primary{border:0;background:#253f33;color:#fcf5e8;border-radius:3px;padding:19px 25px;font-size:11px;letter-spacing:1.5px;font-weight:700;min-width:198px;display:flex;justify-content:space-between;align-items:center;gap:35px}.primary span{font-size:20px;line-height:15px;font-weight:400}.start-hint{margin-top:17px;font-size:9px;font-weight:400;letter-spacing:.5px;opacity:.7;display:flex;align-items:center;gap:7px}.key{border:1px solid #243c3250;padding:4px 5px;font-size:8px;border-radius:3px}.personal-best{display:flex;align-items:center;gap:18px;margin-top:31px;font-size:8px;letter-spacing:1px}.personal-best strong{font-size:21px;letter-spacing:-1px}.tiny-star{font-size:28px;font-weight:400;color:#6e7c62}.court-bottom{position:absolute;bottom:21px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.4px;pointer-events:none}.coordinate{font-size:8px;opacity:.55}.court-mark{font-size:19px;font-weight:900;font-style:italic;letter-spacing:-2px}.hud{position:absolute;top:70px;left:36px;right:36px;display:flex;align-items:flex-start;gap:25px;pointer-events:none}.hud button{pointer-events:auto;background:#f4efe540}.score-block{display:flex;flex-direction:column;gap:5px;min-width:100px}.score-block>span{font-size:9px}.score-block strong{font-size:62px;line-height:1;letter-spacing:-3px}.score-block #streak{font-size:8px;color:#87634a;letter-spacing:1px}.clock-block{width:min(340px,50%);margin:6px auto 0}.clock-block>div:first-child{display:flex;justify-content:space-between;font-size:8px;margin-bottom:10px}.clock-block strong{font-size:12px}.timer-track{height:5px;background:#243c321a;border-radius:9px;overflow:hidden}#timer-fill{height:100%;background:#ed6b37;transform-origin:left center;transition:background .2s}.clock-block.urgent #timer-fill{background:#c8402b}.clock-block.urgent #clock{color:#b63023}.callout{position:absolute;left:50%;top:29%;transform:translate(-50%,12px) rotate(-5deg);font-size:38px;letter-spacing:-1px;font-weight:900;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .15s,transform .2s}.callout.show{opacity:1;transform:translate(-50%,0) rotate(-5deg)}.shot-tip{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;color:#314c3d;letter-spacing:1px;pointer-events:none}footer{min-height:66px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.1px;color:#738071}footer>div{display:flex;align-items:center;gap:8px}.footer-divider{margin:0 8px;color:#b4b5a9}.overlay{position:absolute;inset:0;background:#253c3255;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:10;padding:20px}.modal{width:390px;max-width:100%;max-height:100%;overflow:auto;background:#f6f0e4;padding:37px;border-radius:6px;box-shadow:0 20px 80px #253c3220;text-align:center}.modal .eyebrow{color:#bf633c}.modal h2{font-size:49px;line-height:1;letter-spacing:-2px;margin:18px 0}.modal .primary{width:100%;margin-top:25px}.modal p{font-size:12px;margin-bottom:18px}.text-button{background:none;border:0;font-size:11px;margin-top:21px;text-decoration:underline;text-underline-offset:4px}.results{display:flex;justify-content:space-around;border-block:1px solid #243c3220;padding:18px 0}.results>div{display:flex;flex-direction:column;gap:8px}.results span{font-size:8px;letter-spacing:1px}.results strong{font-size:38px;letter-spacing:-2px}#instructions>div{display:flex;text-align:left;gap:14px;margin:16px 0}#instructions b{color:#bc6c42;font-size:11px;padding-top:5px}#instructions p{margin:0;font-size:11px;line-height:1.6}#instructions strong{font-size:12px;color:#243c32}.error{position:absolute;inset:0;display:grid;place-items:center;background:#f4efe5;padding:40px;z-index:20}.playing .welcome{display:none}.playing .coordinate{visibility:hidden}
@media(min-width:1600px){.welcome{top:22%}.topbar{height:112px}#arena{height:calc(100dvh - 184px)}}
@media(max-width:850px){body{padding:0 20px}.edition{display:none}.topbar{height:80px}#arena{height:calc(100dvh - 137px)}footer{min-height:57px}footer>span:first-child{display:none}.welcome{left:7%;top:23%}h1{font-size:75px}.court-top{left:22px;right:22px}.coordinate{display:none}.court-bottom{left:22px;right:22px}.welcome p{font-size:12px}.hud{left:24px;right:24px}.clock-block{width:45%}}
@media(max-width:580px){body{padding:0 12px}.topbar{height:72px}.brand{font-size:17px}.brand-ball{font-size:32px;margin-right:4px}.icon-button{width:34px;height:34px}.header-actions{gap:7px}#arena{height:calc(100dvh - 118px);min-height:540px;border-radius:6px}.court-top{top:20px;left:19px;right:19px}.court-label,.court-number{font-size:7px;letter-spacing:1px}.welcome{left:8%;top:13%}.eyebrow{font-size:7px;letter-spacing:1.4px}h1{font-size:62px;letter-spacing:-4px;margin:22px 0 18px}h1 em{letter-spacing:-3px}.welcome p{font-size:11px;line-height:1.65;margin-bottom:19px}.primary{padding:16px 21px;min-width:177px;font-size:10px}.start-hint{font-size:8px;margin-top:12px}.personal-best{margin-top:23px;font-size:7px;gap:12px}.personal-best strong{font-size:19px}.court-bottom{bottom:18px;left:19px;right:19px;font-size:6px;letter-spacing:.7px}.court-mark{font-size:17px}footer{font-size:6px;letter-spacing:.65px;min-height:46px}footer>span:last-child{display:none}footer>div{width:100%;justify-content:center}.hud{top:60px;left:22px;right:22px;gap:12px}.score-block{min-width:65px}.score-block strong{font-size:46px}.score-block>span{font-size:8px}.score-block #streak{font-size:6px}.clock-block{width:50%}.clock-block>div:first-child{font-size:6px;letter-spacing:.7px}.callout{font-size:29px;top:34%}.modal{padding:26px}.shot-tip{bottom:64px;font-size:10px}.modal h2{font-size:43px}}
@media(max-height:650px) and (min-width:581px){.topbar{height:65px}#arena{height:calc(100dvh - 105px);min-height:0}footer{min-height:40px}.welcome{top:16%}h1{font-size:58px;margin:15px 0}p{margin-bottom:16px}.personal-best{position:absolute;left:240px;bottom:0;min-width:150px}.welcome .eyebrow{font-size:7px}.primary{padding:14px 20px}.start-hint{margin-top:10px}.court-top{top:19px}.court-bottom{bottom:14px}.hud{top:52px}.modal{padding:22px}.modal h2{font-size:36px;margin:13px 0}.modal .primary{margin-top:16px}}
@media(max-height:450px) and (min-width:581px){.welcome{top:18%;left:5%}.welcome h1{font-size:44px;margin:12px 0}.welcome p{font-size:10px;line-height:1.5;margin-bottom:12px}.welcome .start-hint{position:absolute;left:218px;bottom:12px;white-space:nowrap}.welcome .personal-best{left:218px;bottom:42px;margin:0}.welcome .primary{padding:12px 18px;min-width:178px}.hud{top:46px}.score-block strong{font-size:40px}.shot-tip{bottom:45px}}