/* One stable swing surface shared by touch, mouse and keyboard players. */
#swing-console,#putt-controls{display:none!important}
.swing-dial{margin:14px 0;padding:10px 14px;background:#0d2a21;border:1px solid #68814a;border-radius:12px}
.dial-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.dial-heading strong{font-size:16px;line-height:1.3;min-height:2.6em;display:flex;align-items:center;min-width:0;flex:1}.dial-heading button{min-height:44px}
.swing-dial svg{display:block;width:100%;height:230px;overflow:visible}
.dial-track,.dial-follow,.dial-danger,.dial-zone{fill:none;stroke-width:16;stroke-linecap:round}
.dial-track,.dial-follow{stroke:#476354}.dial-danger{stroke:#e96150}.dial-zone{stroke:#d5f38d;stroke-width:22}
.dial-marker{fill:#fff;stroke:#071b15;stroke-width:4}.dial-lock{fill:#102c25;stroke:#fff;stroke-width:3}
.dial-caption{fill:#c7d6bd;font-size:24px;font-weight:bold;letter-spacing:1px}.dial-value{fill:#e5ff9c;font-size:46px;font-weight:bold}.dial-label{fill:#bcd5af;font-size:23px}
.swing-dial[data-boost=true] .dial-value{fill:#ff8975}
.swing-dial[data-phase=aim] .dial-lock,.swing-dial[data-phase=power] .dial-lock{display:none}
.swing-dial[data-phase=flight]{opacity:.5}
.putt-settings[hidden]{display:none!important}.putt-settings{margin:12px 0;padding:10px;border:1px solid #68814a;border-radius:8px}
@media(max-width:800px),(max-width:950px) and (hover:none) and (pointer:coarse){
 .playing .swing-dial{grid-column:1/-1;grid-row:2;margin:0;padding:4px 8px}
 .playing .swing-dial svg{height:180px}
 .playing .dial-heading{min-height:44px}.playing .dial-heading strong{font-size:14px}
 .playing .quick-guide{display:none}
 .putt-settings .putt-adjust{display:flex;gap:8px}.putt-settings .putt-adjust span{display:none}
 .putt-settings .putt-adjust button{min-height:44px;flex:1}.putt-settings #putt-power{width:100%;height:44px}
 .putt-settings label{display:block!important;font-size:16px}
}

.dial-target{fill:none;stroke:#ffc66c;stroke-width:5;stroke-linecap:round}.dial-target-value{fill:#ffc66c;font-size:23px;font-weight:bold}

.rotate-screen{display:none}
@media(hover:none) and (pointer:coarse){.rotate-screen{display:inline-flex;align-items:center;justify-content:center;min-height:44px}}
/* Landscape play uses one full height course beside a stable control column. */
@media(orientation:landscape) and (min-width:600px) and (max-width:1400px) and (hover:none) and (pointer:coarse){
 body:has(#playing:not([hidden])) .masthead,body:has(#playing:not([hidden])) .clubhouse,body:has(#playing:not([hidden])) footer{display:none}
 body:has(#playing:not([hidden])) main{padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
 .playing{height:100vh;height:100svh;min-height:0;display:flex;flex-direction:column;padding:0 0 max(4px,env(safe-area-inset-bottom))}
 .playing .round-heading{flex:none;min-height:44px;padding:0;gap:6px;margin:0}
 .playing .round-heading>div{flex:1;min-width:0}.playing .round-heading h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .playing .round-heading .eyebrow{font-size:10px;letter-spacing:0;margin:0}.playing .round-heading>.secondary{min-height:44px;padding:6px 8px;font-size:12px}
 .playing .mobile-only{display:inline-flex;align-items:center;justify-content:center}
 .playing .play-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6px;align-items:stretch}
 .playing .course-panel{display:flex;flex-direction:column;min-height:0;height:100%;align-self:stretch}
 .playing .score-strip{flex:none;min-height:28px;padding:3px 4px;align-items:center}
 .playing .score-strip div{display:flex;align-items:baseline;justify-content:center;gap:5px;min-width:0}.playing .score-strip strong{font-size:16px}.playing .score-strip span{font-size:11px}
 .playing .course-wrap,.playing[data-putting=true] .course-wrap{flex:1;height:auto;min-height:80px;max-height:none}
 .playing .course-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%}
 .playing .course-legend{display:none}.playing .aim-toolbar{flex:none;min-height:48px;padding:2px 6px;gap:6px}.playing .aim-toolbar button{min-height:44px;min-width:44px}
 .playing .aim-toolbar output{font-size:12px}.playing .aim-toolbar span{font-size:10px}
 .playing .shot-panel{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;align-content:stretch;padding:5px;gap:3px 6px}
 .playing .shot-title,.playing .quick-guide,.playing label[for=club],.playing .aim-details,.playing .utility,.playing #save-note{display:none}
 .playing #club{grid-column:1;grid-row:1;min-height:40px;padding:6px;font-size:14px}
 .playing .shot-numbers{grid-column:2;grid-row:1;display:flex;justify-content:space-around;align-items:center;gap:5px;padding:0}.playing .shot-numbers span{font-size:10px}.playing .shot-numbers strong{font-size:12px}
 .playing .swing-dial{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;min-height:0;margin:0;padding:2px 5px}
 .playing .dial-heading{flex:none;min-height:36px}.playing .dial-heading strong{font-size:12px}.playing .dial-heading button{min-height:36px;padding:5px}
 .playing .swing-dial svg{flex:1;min-height:100px;height:100%;max-height:none}
 .playing #shoot{grid-column:1/-1;grid-row:3;position:static;min-height:44px;margin:0;font-size:16px;box-shadow:none}
 .playing .status{grid-column:1/-1;grid-row:4;font-size:11px;line-height:13px;min-height:26px;margin:0;overflow-wrap:anywhere}
}

.approach-moment{position:absolute;top:54px;left:50%;transform:translateX(-50%);max-width:85%;padding:10px 16px;border:1px solid #d5f38d;border-radius:10px;background:#0d2a21ed;color:#e5ff9c;font-size:18px;font-weight:bold;text-align:center;pointer-events:none;box-shadow:0 6px 20px #0006}.approach-moment[hidden]{display:none!important}
@media(max-width:950px){.approach-moment{font-size:14px;padding:8px 12px}}

body.game-focus .masthead,body.game-focus .clubhouse,body.game-focus footer{display:none}
body.game-focus main{max-width:none;padding:0 8px}
.fullscreen-button{white-space:nowrap}
@media(max-width:950px){.fullscreen-button span{display:none}.fullscreen-button{min-width:44px;font-size:22px;padding:4px}}
@media(orientation:landscape) and (min-width:600px){
 body.game-focus .playing{height:100vh;height:100svh;min-height:0;display:flex;flex-direction:column;padding:0 0 max(4px,env(safe-area-inset-bottom))}
 body.game-focus .playing .round-heading{flex:none;min-height:44px;padding:0;gap:6px;margin:0}
 body.game-focus .playing .round-heading>div{flex:1;min-width:0}body.game-focus .playing .round-heading h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.game-focus .playing .round-heading .eyebrow{font-size:10px;letter-spacing:0;margin:0}body.game-focus .playing .round-heading>.secondary{min-height:44px;padding:6px 8px;font-size:12px}
 body.game-focus .playing .mobile-only{display:inline-flex;align-items:center;justify-content:center}
 body.game-focus .playing .play-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6px;align-items:stretch}
 body.game-focus .playing .course-panel{display:flex;flex-direction:column;min-height:0;height:100%;align-self:stretch}
 body.game-focus .playing .score-strip{flex:none;min-height:28px;padding:3px 4px;align-items:center}
 body.game-focus .playing .score-strip div{display:flex;align-items:baseline;justify-content:center;gap:5px;min-width:0}body.game-focus .playing .score-strip strong{font-size:16px}body.game-focus .playing .score-strip span{font-size:11px}
 body.game-focus .playing .course-wrap,body.game-focus .playing[data-putting=true] .course-wrap{flex:1;height:auto;min-height:80px;max-height:none}
 body.game-focus .playing .course-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%}
 body.game-focus .playing .course-legend{display:none}body.game-focus .playing .aim-toolbar{flex:none;min-height:48px;padding:2px 6px;gap:6px}body.game-focus .playing .aim-toolbar button{min-height:44px;min-width:44px}
 body.game-focus .playing .aim-toolbar output{font-size:12px}body.game-focus .playing .aim-toolbar span{font-size:10px}
 body.game-focus .playing .shot-panel{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;align-content:stretch;padding:5px;gap:3px 6px}
 body.game-focus .playing .shot-title,body.game-focus .playing .quick-guide,body.game-focus .playing label[for=club],body.game-focus .playing .aim-details,body.game-focus .playing .utility,body.game-focus .playing #save-note{display:none}
 body.game-focus .playing #club{grid-column:1;grid-row:1;min-height:40px;padding:6px;font-size:14px}
 body.game-focus .playing .shot-numbers{grid-column:2;grid-row:1;display:flex;justify-content:space-around;align-items:center;gap:5px;padding:0}body.game-focus .playing .shot-numbers span{font-size:10px}body.game-focus .playing .shot-numbers strong{font-size:12px}
 body.game-focus .playing .swing-dial{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;min-height:0;margin:0;padding:2px 5px}
 body.game-focus .playing .dial-heading{flex:none;min-height:36px}body.game-focus .playing .dial-heading strong{font-size:12px}body.game-focus .playing .dial-heading button{min-height:36px;padding:5px}
 body.game-focus .playing .swing-dial svg{flex:1;min-height:100px;height:100%;max-height:none}
 body.game-focus .playing #shoot{grid-column:1/-1;grid-row:3;position:static;min-height:44px;margin:0;font-size:16px;box-shadow:none}
 body.game-focus .playing .status{grid-column:1/-1;grid-row:4;font-size:11px;line-height:13px;min-height:26px;margin:0;overflow-wrap:anywhere}
}

/* Size the drawing independently of SVG intrinsic flex sizing (including Safari). */
.dial-visual{position:relative;height:230px;min-width:0;min-height:0}
.swing-dial .dial-visual svg{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;overflow:hidden}
.aim-icon{width:24px;height:24px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.game-focus-notice{position:fixed;z-index:1000;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 14px;border:1px solid #68814a;border-radius:10px;background:#0d2a21f5;color:#e5ff9c;font-size:13px;pointer-events:none}
.game-focus-notice[hidden]{display:none}
@media(max-width:800px),(max-width:950px) and (hover:none) and (pointer:coarse){.playing .dial-visual{height:180px}}
@media(orientation:landscape) and (min-width:600px) and (max-width:1400px) and (hover:none) and (pointer:coarse){
 .playing{height:100dvh}
 .playing .swing-dial .dial-visual{flex:1 1 0;height:0;min-height:0}
 .playing .swing-dial .dial-visual svg{height:100%;min-height:0;max-height:none;flex:none}
 .playing .dial-heading{min-height:28px}.playing .dial-heading button{min-height:28px}
}
@media(orientation:landscape) and (min-width:600px){
 body.game-focus .playing{height:100dvh}
 body.game-focus .playing .swing-dial .dial-visual{flex:1 1 0;height:0;min-height:0}
 body.game-focus .playing .swing-dial .dial-visual svg{height:100%;min-height:0;max-height:none;flex:none}
 body.game-focus .playing .dial-heading{min-height:28px}body.game-focus .playing .dial-heading button{min-height:28px}
}
/* On short landscape screens, keep instructions beside the drawing rather than
   spending a separate row on them. The swing button still has a 44px target. */
@media(orientation:landscape) and (min-width:600px) and (max-height:450px){
 .playing .swing-dial{position:relative}
 .playing .swing-dial .dial-heading{position:absolute;top:4px;left:5px;right:5px;z-index:1;min-height:0;align-items:flex-start;pointer-events:none}
 .playing .swing-dial .dial-heading strong{max-width:28%;font-size:11px;line-height:1.2}
 .playing .swing-dial .dial-heading button{pointer-events:auto;min-height:28px;padding:3px 6px;font-size:11px}
 .playing #shoot,body.game-focus .playing #shoot{height:44px;min-height:44px;padding:6px 8px;line-height:1.2}
}

/* Exact zero-error impact, outlined against the lime zone. */
.swing-dial[data-putting="true"] .dial-impact-centre{display:none}
.swing-dial[data-putting=true] .dial-caption,.swing-dial[data-putting=true] .dial-target-value{font-size:16px!important;transform:none!important}

/* More course space without shrinking the timing dial or touch targets. */
@media(orientation:landscape) and (min-width:600px){
 body.game-focus .playing .play-grid{grid-template-columns:minmax(0,2fr) minmax(270px,1fr)}
 .playing .play-grid{column-gap:8px}
}
@media(orientation:landscape) and (min-width:600px) and (max-width:1400px) and (hover:none) and (pointer:coarse){
 .playing .play-grid{grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr)}
}
@media(orientation:portrait) and (max-width:950px){
 .playing .course-wrap,.playing[data-putting=true] .course-wrap{height:39dvh;min-height:240px;max-height:430px}
}

/* Roll distance stays fixed while a separate accuracy stroke runs. */
.playing[data-simple-putt=true] .first-play-guide{display:none!important}
.swing-dial[data-putting=true] #dial-instruction{display:none!important}
.putt-pace{display:grid;grid-template-columns:minmax(64px,1fr) minmax(82px,1.2fr) minmax(64px,1fr);gap:6px;align-items:center;margin:4px 0 0;text-align:center}
.putt-pace[hidden]{display:none}.putt-pace button{min-height:44px;padding:6px;font-size:13px;border:1px solid #7f9b66;border-radius:8px;color:#f5ffe4;background:#244a36}.putt-pace button:disabled{opacity:.4}
.putt-pace span{display:block;font-size:10px;letter-spacing:.08em;color:#c7d6bd}.putt-pace output{display:block;font-size:23px;font-weight:bold;font-variant-numeric:tabular-nums;color:#e5ff9c}.putt-pace p{grid-column:1/-1;margin:0;color:#e6edc9;font-size:12px;line-height:1.35}
.mini-tv .putt-pace{grid-template-columns:1fr}.mini-tv .putt-pace button{display:none}
.putt-pace small{display:block;font-size:12px;line-height:1.3;color:#d9e6ca}
.putt-pace .putt-read-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;text-align:left}
.putt-pace .putt-read-row p{flex:1;margin:0}
.putt-pace .putt-read-toggle{flex:0 0 auto;min-width:90px;min-height:44px;font-size:12px}
.putt-pace .putt-read-toggle[aria-pressed=true]{background:#d0ed84;color:#10271e}
.putt-pace .putt-assist-note{grid-column:1/-1;font-size:11px}
.mini-tv .putt-pace .putt-read-toggle{display:inline-block}
@media(max-width:950px) and (max-height:500px){.putt-pace .putt-assist-note{display:none}.putt-pace{gap:2px}.putt-pace .putt-read-toggle{min-width:80px}.putt-pace output{font-size:20px}}
.swing-dial[data-putting="true"] #dial-value,.swing-dial[data-putting="true"] #dial-label{display:none}
.swing-dial[data-putting="true"] .dial-caption,.swing-dial[data-putting="true"] .dial-target-value{font-size:13px;font-weight:bold;letter-spacing:.06em;fill:#d5e8c6}
.swing-dial[data-putting="true"] svg{width:100%;height:auto!important;aspect-ratio:250/76;min-height:0!important;max-height:none!important}
.swing-dial[data-putting="true"] .dial-visual{flex:0 0 auto;height:auto!important;min-height:0!important}
@media(max-width:950px){
 .putt-pace .putt-assist-note{display:none}
 .putt-pace{gap:2px}
 #playing .swing-dial[data-putting=true] svg,html.mini-active:not(.mini-tv) .swing-dial[data-putting=true] svg{height:70px!important;max-height:70px!important;aspect-ratio:auto}
 #playing .swing-dial[data-putting=true] .dial-visual,html.mini-active:not(.mini-tv) .swing-dial[data-putting=true] .mini-dial-visual{height:70px!important;flex:0 0 70px}
}

/* Keep the existing roll slider available while choosing pace. The inactive
   timing preview must not displace it; the live meter gets the row at strike. */
#playing .putt-pace #putt-power{height:36px;min-height:36px;width:100%;margin:0}
#playing .swing-dial[data-putting=true][data-phase=aim] .dial-visual{display:none}
#playing .swing-dial[data-putting=true]{overflow:auto}

/* Reserve Cancel during aim so the power/strike phases cannot reflow the button. */
.swing-dial #dial-reset[hidden]{display:block!important;visibility:hidden;pointer-events:none}

@media(min-width:951px) and (hover:hover) and (pointer:fine){
 body:not(.game-focus) #playing .swing-dial[data-putting=true]{display:grid;grid-template-columns:minmax(0,1fr)}
 body:not(.game-focus) #playing .swing-dial[data-putting=true] .dial-heading{grid-row:1;grid-column:1}
 body:not(.game-focus) #playing .swing-dial[data-putting=true] .putt-pace,body:not(.game-focus) #playing .swing-dial[data-putting=true] .dial-visual{grid-row:2;grid-column:1}
 body:not(.game-focus) #playing .swing-dial[data-putting=true] .putt-pace[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
 body:not(.game-focus) #playing .swing-dial[data-putting=true][data-phase=aim] .dial-visual{display:block;visibility:hidden}
}

/* Read the green in two clear lines; keep direction separate from pace. */
.putt-pace #putt-pace-read{white-space:pre-line;text-align:left;font-weight:600;font-size:14px;line-height:1.5}
@media(min-width:951px) and (min-height:620px) and (hover:hover) and (pointer:fine){
 #playing .swing-dial[data-putting=true] .putt-pace{width:100%;box-sizing:border-box;margin-block:auto;padding:20px 12px;gap:16px 10px;grid-template-columns:minmax(90px,1fr) minmax(120px,1.5fr) minmax(90px,1fr)}
 #playing .putt-pace output{font-size:clamp(32px,3.5vw,52px);line-height:1.15}
 #playing .putt-pace span{font-size:12px}
 #playing .putt-pace small{font-size:16px;line-height:1.5}
 #playing .putt-pace button{font-size:16px;min-height:52px}
 #playing .putt-pace #putt-power{height:44px;min-height:44px;margin-top:10px}
 #playing .putt-pace .putt-read-row{padding-top:14px;border-top:1px solid #68814a;gap:14px}
 #playing .putt-pace #putt-pace-read{font-size:clamp(18px,1.6vw,22px);line-height:1.6}
 #playing .putt-pace .putt-assist-note{text-align:left;font-size:15px;line-height:1.55}
 #playing .swing-dial[data-putting=true]:not([data-phase=aim]) .dial-visual{margin-block:auto;flex:0 0 200px;height:200px!important}
}