@font-face{font-family:Patrick;src:url('../fonts/patrick-hand.ttf') format('truetype');font-display:swap}
:root{--paper:#f7f4e9;--ink:#2539a2;--ink-dark:#172867;--red:#c44350;--muted:#717286;--rule:rgba(60,105,176,.12);--hand:Patrick,'Comic Sans MS','Segoe Print',cursive;--sans:'Trebuchet MS',system-ui,sans-serif;color:var(--ink-dark);font-family:var(--sans);font-size:16px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--paper);overflow:hidden}button,select,input{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:5px}[hidden]{display:none!important}button{background:none;border:0}a{color:inherit;text-underline-offset:4px}#arena,#court{position:fixed;inset:0;width:100%;height:100%;touch-action:none}#arena{background:repeating-linear-gradient(0deg,transparent,transparent 31px,var(--rule) 31px,var(--rule) 32px)}.paper-grain{position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}.masthead{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;gap:22px;padding:22px 4.2vw;z-index:5;pointer-events:none}.masthead>*{pointer-events:auto}.wordmark{font-family:var(--hand);font-size:44px;line-height:1;text-decoration:none;letter-spacing:-4px;transform:rotate(-8deg);border-bottom:2px solid var(--ink)}.wordmark-ball{color:var(--red);font-size:52px}.edition{font-size:12px;font-weight:bold;letter-spacing:2px}.edition span{color:var(--red);padding:0 7px}.utilities{margin-left:auto;display:flex;gap:20px;align-items:center}.text-button{padding:8px 0;font-size:14px}.text-button:hover{text-decoration:underline;text-underline-offset:5px}.key,kbd{font:13px var(--sans);border:1px solid #8b90ab;padding:3px 5px;border-radius:3px;white-space:nowrap}.key{margin-left:8px}.lobby{position:absolute;left:7.4vw;top:50%;transform:translateY(-47%);width:360px;max-width:88vw;z-index:3}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:2.2px;display:flex;align-items:center;gap:10px}.tiny-rule{width:28px;height:2px;background:var(--red);display:inline-block}h1{position:relative;font:normal clamp(76px,6.7vw,106px)/.83 var(--hand);letter-spacing:-3px;color:var(--ink);margin:26px 0 15px;transform:rotate(-3deg);transform-origin:left center}h1 span{font-size:.76em;letter-spacing:0}h1:after{content:'';position:absolute;bottom:-12px;left:0;width:270px;height:5px;border-bottom:3px solid var(--ink);border-radius:50%;transform:rotate(-2deg)}.title-dot{color:var(--red);font-style:normal}.intro{font:22px var(--hand);margin:29px 0 23px}.setup{width:340px;max-width:100%}.setup-row{margin:16px 0}.setup-row label{display:block;text-transform:uppercase;font-size:12px;font-weight:bold;letter-spacing:1.6px;margin-bottom:7px}.setup-row select{width:100%;border:0;border-bottom:1px solid #9296b0;padding:6px 24px 10px 0;background:transparent;color:var(--ink-dark);font-size:15px;border-radius:0}.assist-label{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap;margin:20px 0 17px}.assist-label input{accent-color:var(--ink);width:18px;height:18px;margin:0}.hand-note{font:15px var(--hand);color:var(--red);width:100%;padding-left:26px;line-height:.9;transform:rotate(-2deg)}.primary{display:flex;align-items:center;justify-content:center;gap:25px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:13px 22px;min-height:52px;width:100%;font:26px var(--hand);letter-spacing:1px;box-shadow:4px 4px 0 var(--paper),5px 5px 0 var(--ink);border-radius:3px 7px 4px 6px;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--paper),6px 7px 0 var(--ink)}.primary:active{transform:translate(2px,2px);box-shadow:none}.primary span{font-size:31px}.start-note{font-size:13px;color:var(--muted);margin-top:15px}.court-note{position:fixed;right:5vw;top:18%;font:24px/1.15 var(--hand);transform:rotate(7deg);color:var(--red);text-align:center}.note-arrow{font-size:45px;display:block;text-align:left;margin-left:-30px}.lobby-footer{position:fixed;bottom:26px;left:4.2vw;right:4.2vw;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}.lobby-footer>span:first-child{letter-spacing:2px;color:var(--ink)}.hud{position:fixed;top:28px;left:50%;transform:translateX(-50%);pointer-events:none}.scoreboard{display:flex;background:#f7f4e9eb;box-shadow:0 4px 0 -2px var(--ink);border:1px solid var(--ink);border-radius:2px 5px 3px 6px;padding:12px 22px;gap:20px;min-width:420px;justify-content:center}.score-team{min-width:104px;text-align:center;display:grid;grid-template-columns:1fr;justify-items:center}.team-label{font-size:12px;letter-spacing:1.3px;font-weight:bold}.score-team b{font:48px/.95 var(--hand);margin:5px 0}.blue{color:var(--ink)}.red{color:var(--red)}.games{font-size:12px}.games span{font-weight:bold;font-size:14px}.score-centre{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:10px;letter-spacing:1px;min-width:100px}.versus{font:25px var(--hand);color:var(--muted)}.rally-count{position:fixed;left:-85px;top:35px;display:flex;flex-direction:column;text-align:center;color:var(--ink)}.rally-count>span{font:38px var(--hand)}.rally-count small{font-size:10px;letter-spacing:1px}.callout{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%) rotate(-3deg);display:flex;align-items:center;flex-direction:column;background:#f7f4e9ed;z-index:4;padding:9px 24px;pointer-events:none;max-width:90vw;text-align:center}.callout strong{font:38px/1.1 var(--hand);color:var(--ink)}.callout span{font-size:14px;margin-top:7px}.player-label{position:fixed;font:bold 12px var(--sans);background:var(--ink);color:var(--paper);padding:4px 8px;pointer-events:none;transform:translate(-50%,-100%);border-radius:2px}.shot-notice{position:fixed;top:43%;right:7%;font:40px var(--hand);color:var(--red);transform:rotate(-9deg);pointer-events:none}.controls{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:13px;width:max-content;max-width:96vw}.desktop-controls{display:flex;gap:22px;font-size:13px;align-items:center;background:#f7f4e9e8;padding:12px 16px;border:1px solid #b4b6c5;border-radius:4px}.desktop-controls span{white-space:nowrap}.desktop-controls kbd{margin-right:5px}.control-actions{display:flex;gap:22px}.small-button{font-size:12px;background:var(--paper);padding:5px;border-bottom:1px solid #9398b4}.touch-controls{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.joystick{pointer-events:auto;touch-action:none;width:110px;height:110px;border:2px solid #2539a27a;border-radius:50%;background:#f7f4e9bc;display:flex;align-items:center;justify-content:center;position:relative}.joystick>div{width:43px;height:43px;border:2px solid var(--ink);background:#2539a225;border-radius:50%}.joystick>span{position:absolute;bottom:8px;font-size:10px;letter-spacing:2px}.touch-shots{display:grid;grid-template-columns:56px 72px;gap:9px;pointer-events:auto}.shot{border:2px solid var(--ink);border-radius:50%;width:56px;height:56px;font:16px var(--hand);background:#f7f4eeed;touch-action:none;user-select:none}.shot.hit{grid-column:2;grid-row:1/3;width:76px;height:76px;background:var(--ink);color:var(--paper);align-self:center;font-size:26px}.shot:active{transform:scale(.92)}.paper-dialog{position:fixed;max-width:610px;width:calc(100vw - 36px);max-height:88dvh;overflow-y:auto;background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,var(--rule) 31px,var(--rule) 32px);border:2px solid var(--ink);padding:34px 40px;box-shadow:8px 8px 0 #2539a245;color:var(--ink-dark)}.paper-dialog::backdrop{background:#eeeaddb5;backdrop-filter:blur(5px)}.paper-dialog h2{font:46px/1 var(--hand);color:var(--ink);margin:15px 0 20px}.paper-dialog p{line-height:1.5}.close-dialog{position:absolute;top:10px;right:16px;font-size:32px}.rules-list{padding-left:22px;font-size:15px;line-height:1.55}.rules-list li{margin:13px 0}.rules-list li::marker{font:20px var(--hand);color:var(--red)}.key-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:13px;margin:24px 0}.help-small{font-size:13px;color:#555d7b}.paper-dialog .primary{margin-top:22px}.compact{max-width:430px;text-align:center;padding:38px}.compact .eyebrow{justify-content:center}.secondary{width:100%;padding:14px;border:1px solid var(--ink);margin:16px 0;font:21px var(--hand)}.result-score{font:72px var(--hand);color:var(--ink)}.error-panel{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:10;width:440px;max-width:90vw;padding:30px;background:var(--paper);border:2px solid var(--red)}.error-panel h2{font:38px var(--hand);margin:0}.error-panel p{line-height:1.6}.error-panel .primary{margin-top:20px}.playing .edition{display:none}.playing .wordmark{font-size:35px}.playing .masthead{padding-top:19px}.playing #help .key{display:none}
@media(min-width:1500px){.lobby{left:10vw;width:390px}.setup{width:365px}.court-note{right:8vw}}
@media(max-width:1000px){.edition{display:none}.lobby{left:5vw;width:300px}h1{font-size:78px}.setup{width:290px}.court-note{right:4%;font-size:21px}.hud{top:90px}.scoreboard{min-width:360px;gap:12px}.rally-count{display:none}.callout{top:34%}.playing .masthead{padding-top:14px}.desktop-controls{gap:11px}.desktop-controls span:last-child{display:none}}
@media(max-width:650px){body{overflow-y:auto}.masthead{padding:14px 20px}.wordmark{font-size:36px}.utilities{gap:17px}.text-button{font-size:13px}.key{display:none}.lobby{top:auto;bottom:68px;left:6%;transform:none;width:88%;max-width:none;background:#f7f4e9ee;padding:17px 20px;border:1px solid #2539a270;border-radius:3px 7px 3px 2px}.eyebrow{font-size:10px;margin:0}h1{font-size:clamp(34px,8.8vw,53px);line-height:.9;margin:12px 0 11px;letter-spacing:-2px}h1 br{display:none}h1 span{font-size:1em;margin-left:8px}h1:after{width:230px;bottom:-6px;height:2px}.intro{font-size:18px;margin:17px 0 10px}.setup{width:100%}.setup-row{margin:11px 0}.setup-row label{font-size:10px;margin-bottom:3px}.setup-row select{font-size:14px;padding-bottom:6px}.assist-label{margin:12px 0;font-size:13px}.hand-note{display:none}.primary{font-size:23px;min-height:45px;padding:8px 16px}.start-note{font-size:12px;margin-bottom:0}.court-note{display:none}.lobby-footer{bottom:17px;left:6%;right:6%;font-size:10px;flex-direction:column;gap:7px}.lobby-footer>span:first-child{display:none}.scoreboard{min-width:315px;padding:9px 12px;gap:9px}.score-team{min-width:87px}.team-label{font-size:10px;letter-spacing:.7px}.score-team b{font-size:36px}.score-centre{min-width:77px;font-size:9px}.hud{top:69px}.callout{top:29%;min-width:210px}.callout strong{font-size:30px}.callout span{font-size:12px}.controls{bottom:150px;gap:0}.desktop-controls{display:none}.small-button{font-size:11px}.control-actions{gap:12px}.paper-dialog{padding:26px 22px}.paper-dialog h2{font-size:38px}.key-grid{grid-template-columns:1fr}.shot-notice{top:36%;font-size:30px}.playing{overflow:hidden}}
@media(max-width:390px){h1{font-size:34px}.lobby{padding:15px}.lobby .eyebrow{font-size:9px;letter-spacing:1.5px}.scoreboard{min-width:290px;gap:5px}.score-team{min-width:80px}.joystick{width:90px;height:90px}.touch-shots{gap:7px}.touch-controls{left:13px;right:13px}}
@media(max-height:650px) and (min-width:651px){.masthead{padding-top:12px}.lobby{transform:translateY(-43%)}h1{font-size:65px;margin-top:16px}.intro{margin:20px 0 12px}.setup-row{margin:10px 0}.assist-label{margin:12px 0}.lobby-footer{bottom:10px}.hud{top:14px}.scoreboard{padding:8px 16px}.controls{bottom:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Golf scorecard and shot controls. */
.golf-hud{position:fixed;top:86px;left:4vw;display:flex;gap:24px;background:#f7f4e9eb;border:1px solid var(--ink);padding:12px 18px}.golf-hud>div{display:grid;text-align:center;min-width:72px}.golf-hud small{font-size:9px;letter-spacing:1.4px}.golf-hud strong{font:38px/1 var(--hand)}.golf-score{border-inline:1px solid #9296b0;padding-inline:22px}.wind b{font:30px var(--hand);display:block;transform-origin:center}.shot-panel{position:fixed;right:4vw;bottom:50%;transform:translateY(50%);width:220px;background:#f7f4e9e8;border:1px solid var(--ink);padding:18px;display:grid;gap:15px}.shot-panel.disabled{opacity:.45;pointer-events:none}.shot-panel label{display:grid;gap:5px;font-size:11px;text-transform:uppercase;letter-spacing:1px}.shot-panel select{background:transparent;border:0;border-bottom:1px solid var(--ink);padding:7px 0}.distance{text-align:center}.distance strong{font:54px/1 var(--hand);margin-inline:5px}.distance small{display:block;letter-spacing:1.5px}.power-label output{float:right}.power-label input{width:100%;accent-color:var(--ink)}.shot-panel .primary{font-size:23px}.shot-panel>p{text-align:center;margin:0;font-size:10px;letter-spacing:2px}.callout .secondary{margin:12px 0 0;padding:8px 18px}.lobby h1{font-size:clamp(70px,6.7vw,105px)}
@media(max-width:650px){.golf-hud{top:68px;left:10px;gap:8px;padding:8px}.golf-hud>div{min-width:53px}.golf-hud strong{font-size:29px}.golf-score{padding-inline:8px}.shot-panel{right:10px;bottom:145px;transform:none;width:155px;padding:11px;gap:9px}.distance strong{font-size:39px}.shot-panel .primary{font-size:19px;min-height:39px}.controls{bottom:96px}.lobby h1{font-size:42px}}

@media(max-height:560px) and (min-width:651px){.lobby{top:80px;transform:none;display:grid;grid-template-columns:170px 250px;column-gap:25px;width:445px}.lobby .eyebrow{font-size:9px;letter-spacing:1px}.lobby h1{font-size:58px;margin-top:15px}.lobby h1:after{width:160px}.lobby .intro{font-size:18px;max-width:160px}.lobby .setup{grid-column:2;grid-row:1/5;width:250px}.lobby .setup-row{margin:0 0 10px}.court-note{display:none}.lobby .hand-note{display:none}.lobby .primary{min-height:42px;padding:6px 15px}}

#shot-status { margin: 5px 0; line-height: 1.35; font-size: 12px; letter-spacing: 0; }