:root{color-scheme:light;--ink:#1f3d9e;--red:#c0392b;--paper:#f8f5eb}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Patrick Hand',cursive;background:repeating-linear-gradient(transparent 0 29px,#6685b91a 30px,transparent 31px),var(--paper)}body:before{content:'';position:fixed;left:6%;top:0;bottom:0;border-left:1px solid #c0392b44;pointer-events:none}main{max-width:1000px;margin:auto;padding:22px 32px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px}a{color:inherit;text-decoration:none;border-bottom:1px dashed}button{font:inherit;font-size:20px;color:var(--ink);background:var(--paper);padding:7px 19px;border:1.7px solid currentColor;border-radius:45% 3% 8% 4% / 8% 20% 6% 18%;cursor:pointer}button:hover{background:#e9e6d7;transform:rotate(-1deg)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px dashed var(--red);outline-offset:4px}.title{text-align:center;position:relative;margin:20px 0 8px}.title p{font-size:12px;letter-spacing:3px;margin:0;color:#666570}h1{font-family:Caveat,cursive;font-size:clamp(48px,8vw,84px);line-height:1;margin:5px 0 12px;transform:rotate(-3deg);text-decoration:underline;text-decoration-color:#c0392b88;text-decoration-thickness:2px;text-underline-offset:7px}h1 span{color:var(--red)}.note{display:block;transform:rotate(-3deg);color:#77717a;font-size:19px}.scoreboard{display:flex;align-items:center;justify-content:center;gap:40px;margin:16px 0 0}.scoreboard div{font-size:24px;white-space:nowrap}.scoreboard strong{font-family:Caveat,cursive;font-size:44px;margin-left:10px}.scoreboard div:last-child{color:#59555c}.scoreboard p{font-size:15px;color:#77717a}.court-wrap{position:relative;max-width:830px;margin:-12px auto 0}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.margin-note{position:absolute;left:0;top:25%;font-family:Caveat,cursive;color:var(--red);font-size:25px;transform:rotate(-12deg)}.bottom-note{position:absolute;bottom:1%;right:13%;color:#77717a;transform:rotate(-4deg);font-size:18px;pointer-events:none}#status{text-align:center;font-family:Caveat,cursive;font-size:32px;min-height:40px;margin:0 0 10px}.controls{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.primary{color:var(--red);transform:rotate(-2deg);border-width:2px}#instructions{text-align:center;font-size:17px;line-height:1.5;color:#66616a;margin:19px 0}footer{text-align:center;color:#817b7b;font-size:16px}footer span{color:var(--red);font-size:28px;vertical-align:middle;margin-left:10px}@media(max-width:600px){main{padding:15px 12px}header{font-size:16px}header span{display:none}.title{margin-top:24px}.scoreboard{gap:15px}.scoreboard div{font-size:19px}.scoreboard strong{font-size:35px}.scoreboard p{font-size:12px}.margin-note{font-size:15px;left:1%}.bottom-note{font-size:12px;right:8%}.court-wrap{margin-top:0}#status{font-size:27px}button{font-size:18px;padding:9px 14px}#instructions{font-size:15px}}

.view-controls{display:flex;gap:10px;align-items:center}.crowd-on .margin-note{display:none}@media(max-width:600px){.view-controls{gap:7px}.view-controls button{font-size:16px;padding:7px 10px}}

canvas:focus{outline:none}canvas:focus-visible{outline:1px solid #1f3d9e30;outline-offset:2px}

.shot-hint{text-align:center;min-height:24px;margin:12px 0 0;color:var(--red);font-size:18px}#hard{touch-action:none}#lob[aria-pressed="true"]{background:#1f3d9e16}