/* Main-round phone layout. Keep every grid row explicit: coaching must never
   create an implicit row that squeezes the timing dial to zero. */
@media (max-width:1000px) and (max-height:500px), (max-width:600px), (max-width:1400px) and (hover:none) and (pointer:coarse) {
 body:has(#playing:not([hidden])){overflow:hidden;overscroll-behavior:none}
 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{max-width:none;padding:0}
 #playing{height:100svh;height:100dvh;min-height:0;padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));gap:4px;display:flex;flex-direction:column}
 #playing .round-heading{min-height:44px;flex:none;margin:0;padding:0;gap:4px}
 #playing .round-heading>div{min-width:0;flex:1}
 #playing .round-heading h2{font-size:15px;line-height:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #playing .round-heading .eyebrow{font-size:9px;line-height:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #playing .round-heading button{min-height:44px;padding:4px 7px;font-size:12px}
 #playing #rotate-screen,#playing #fullscreen-game{display:none}
 #playing #mobile-options{display:inline-flex;align-items:center}
 #playing .play-grid{flex:1;min-height:0;gap:4px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(140px,1fr) 210px}
 #playing .course-panel{height:100%;align-self:stretch;position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:10px}
 #playing .score-strip{position:static;z-index:2;top:0;left:0;right:0;height:28px;min-height:0;padding:2px 4px;background:#0b241eee}
 #playing .score-strip div{display:flex;gap:4px;align-items:baseline}
 #playing .score-strip span{font-size:10px}#playing .score-strip strong{font-size:16px}
 #playing .course-metrics{position:static;z-index:2;top:28px;left:0;right:0;padding:2px 8px;gap:6px;background:#0b241eee;border:0}
 #playing .course-metrics>div{display:flex;align-items:baseline;gap:5px}
 #playing .course-metrics span{font-size:10px}#playing .course-metrics strong{font-size:14px;line-height:20px;white-space:nowrap}
 #playing .course-wrap,#playing[data-putting=true] .course-wrap{flex:1;min-height:0;height:auto;max-height:none;margin-top:0}
 #playing .course-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
 #playing .course-top{top:4px;right:4px;left:4px}#playing .map-button{min-height:44px;font-size:11px;padding:4px 7px}
 #playing .aim-toolbar{min-height:44px;padding:0 4px;gap:4px;flex:none}
 #playing .aim-toolbar button{min-height:44px;min-width:44px;padding:4px 8px}
 #playing .aim-toolbar span{display:none}#playing .aim-toolbar output{font-size:11px}
 #playing .course-legend{display:none}
 #playing .shot-panel{height:100%;align-self:stretch;min-height:0;padding:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 44px 32px;gap:2px 6px;overflow:hidden}
 #playing .shot-title,#playing .quick-guide,#playing label[for=club],#playing .aim-details,#playing .utility,#playing #save-note{display:none}
 #playing #club{grid-area:3/1;min-height:44px;height:44px;padding:4px 6px;font-size:16px}
 #playing .shot-numbers{grid-area:1/2;display:none;gap:6px;margin:0;justify-content:space-around;align-items:center}
 #playing .shot-numbers span{font-size:10px}#playing .shot-numbers strong{font-size:13px}
 #playing .swing-dial{grid-area:2/1/3/3;display:flex;flex-direction:column;min-height:0;margin:0;padding:0;border:0;background:transparent;position:relative}
 #playing .dial-heading{position:absolute;inset:4px 4px auto;min-height:0;z-index:1;pointer-events:none}
 #playing .dial-heading strong{font-size:11px;line-height:14px;max-width:26%}
 #playing .dial-heading button{pointer-events:auto;min-height:44px}
 #playing .dial-visual{height:100%;min-height:0;flex:1 1 auto}
 #playing .dial-visual svg{position:absolute;inset:0;width:100%;height:100%;min-height:0}
 #playing #shoot{grid-area:3/2/4/3;min-height:44px;height:44px;margin:0;position:static;font-size:17px;padding:4px;box-shadow:none}
 #playing .status{grid-area:4/1/5/3;min-height:0;line-height:16px;font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* Keep novice guidance in the dial's unused side space, never in a new row. */
 #playing .first-play-guide{grid-area:2/1/3/3;align-self:start;justify-self:end;z-index:2;width:27%;max-height:100%;overflow:auto;margin:0;padding:3px;border:0;background:#102c25;font-size:10px;line-height:13px}
 #playing .first-play-guide p{margin:0}#playing .first-play-guide button{font-size:11px;min-height:44px;padding:0;margin:0}
 #playing .relief-controls{grid-area:1/1/-1/-1;overflow:auto;min-height:0}
 #playing .match-bar{flex:none;margin:0;padding:2px 6px}
}
@media (max-width:600px) and (orientation:portrait){
 #playing .play-grid{grid-template-rows:minmax(140px,1fr) clamp(210px,43dvh,310px)}
}
@media (orientation:landscape) and (max-width:1000px) and (max-height:500px), (orientation:landscape) and (max-width:1400px) and (hover:none) and (pointer:coarse){
 #playing .play-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 #playing .shot-panel{height:100%}
}

@media (max-width:1000px) and (max-height:500px), (max-width:600px), (max-width:1400px) and (hover:none) and (pointer:coarse){
 #playing .round-hud{grid-area:1/1/2/3;min-width:0;overflow:hidden}
 #playing .course-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 4px;gap:4px}
 #playing .course-metrics span{display:none}
 #playing .course-metrics strong{font-size:12px;line-height:20px;overflow:hidden;text-overflow:ellipsis}
 #playing .course-metrics>div:last-child{justify-content:flex-end}
 #playing .score-strip{height:28px;background:transparent}
 #playing .score-strip strong{font-size:15px}
 #playing .putting-commentary{grid-area:4/1/5/3;position:static;min-height:0;max-width:none;margin:0;padding:0 3px;font-size:11px;line-height:15px;text-align:left;border:0;background:transparent;box-shadow:none;overflow:auto;pointer-events:auto}
 #playing .shot-panel:has(.putting-commentary:not([hidden])) .status{visibility:hidden}
 #playing .status{white-space:normal;line-height:15px}
 #playing .relief-controls{grid-area:2/1/-1/-1}
}
/* Keep the same explicit rows when desktop players enter focus mode. */
@media(min-width:600px) and (orientation:landscape){
 body.game-focus .playing .shot-panel{grid-template-rows:64px minmax(0,1fr) 44px 32px}
 body.game-focus .playing .round-hud{grid-area:1/1/2/3}
 body.game-focus .playing #club{grid-area:3/1/4/2}
 body.game-focus .playing .shot-numbers{display:none}
 body.game-focus .playing #shoot{grid-area:3/2/4/3}
 body.game-focus .playing .putting-commentary{grid-area:4/1/5/3;margin:0;padding:0;font-size:12px;line-height:15px;overflow:auto}
 body.game-focus .playing .shot-panel:has(.putting-commentary:not([hidden])) .status{visibility:hidden}
 body.game-focus .playing .first-play-guide{grid-area:2/1/3/3;align-self:start;justify-self:end;width:25%;max-height:100%;overflow:auto;font-size:12px;margin:0;padding:4px;z-index:2}
}
@media(min-width:600px) and (orientation:landscape){
 body.game-focus .playing .round-hud .course-metrics{padding:2px 6px;gap:8px}
 body.game-focus .playing .round-hud .course-metrics span{display:none}
 body.game-focus .playing .round-hud .course-metrics strong{font-size:14px;line-height:20px}
}

/* A reserved strip beneath the canvas: commentary never overlaps the shot. */
#playing .course-panel>.green-commentary{position:relative;flex:0 0 auto;min-height:40px;max-height:64px;overflow:auto;padding:6px 12px;background:#102c25;border-top:1px solid #355647;color:#edf7df;text-align:center}
#playing .course-panel>.green-commentary .status,
#playing .course-panel>.green-commentary .putting-commentary{position:static;inset:auto;transform:none;grid-area:auto;width:auto;max-width:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:14px;line-height:20px;text-align:center;white-space:normal;overflow:visible;visibility:visible;pointer-events:none}
#playing .course-panel>.green-commentary:has(.putting-commentary:not([hidden])) .status{display:none}

/* Tree-relief action occupies a declared row, never an implicit clipped row. */
@media (max-width:1000px) and (max-height:500px), (max-width:600px), (max-width:1400px) and (hover:none) and (pointer:coarse){
 html:not(.fire-tv) #playing .shot-panel:has(#unplayable:not([hidden])){grid-template-rows:52px minmax(0,1fr) 44px 44px}
 html:not(.fire-tv) #playing #unplayable{grid-area:4/1/5/3;min-width:0;min-height:44px;margin:0;padding:4px 6px;font-size:12px;line-height:16px}
}
@media(min-width:600px) and (orientation:landscape){
 html:not(.fire-tv) body.game-focus #playing .shot-panel:has(#unplayable:not([hidden])){grid-template-rows:64px minmax(0,1fr) 44px 44px}
 html:not(.fire-tv) body.game-focus #playing #unplayable{grid-area:4/1/5/3;min-width:0;min-height:44px;margin:0;padding:4px 6px;font-size:12px;line-height:16px}
}
#relief-cancel{width:100%;min-height:44px;margin-top:8px}

/* Mobile full-shot dial and hole card share the existing control area.
   The club / swing action row stays fixed through aim, power and impact. */
@media (max-width:1000px) and (max-height:500px), (max-width:600px), (max-width:1400px) and (hover:none) and (pointer:coarse) {
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])){grid-template-rows:0 minmax(0,1fr) 44px 32px}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .round-hud{grid-area:1/1/3/3;justify-self:end;align-self:center;width:33%;padding:8px 6px;border:1px solid #68814a;border-radius:9px;background:#0d2a21;overflow:auto;max-height:100%;box-sizing:border-box}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .score-strip{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:8px 4px;padding:0;background:transparent}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .score-strip div{display:flex;flex-direction:column;gap:1px;align-items:center}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .score-strip span{font-size:11px}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .score-strip strong{font-size:18px;line-height:22px}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .course-metrics{display:flex;flex-direction:column;gap:5px;margin-top:8px;padding:6px 0 0;border-top:1px solid #355647;background:transparent}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .course-metrics>div{justify-content:center;text-align:center}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .course-metrics strong{font-size:13px;line-height:18px;white-space:normal;overflow-wrap:anywhere}
 html:not(.fire-tv) #playing .swing-dial:not([data-putting=true]){grid-area:1/1/3/3;width:65%;justify-self:start;min-width:0}
 html:not(.fire-tv) #playing .swing-dial:not([data-putting=true]) .dial-heading{position:relative;inset:auto;flex:0 0 44px;min-height:44px;gap:4px}
 html:not(.fire-tv) #playing .swing-dial:not([data-putting=true]) .dial-heading strong{font-size:12px;line-height:16px;max-width:none;min-height:0}
 html:not(.fire-tv) #playing .swing-dial:not([data-putting=true]) .dial-heading button{padding:3px 5px;font-size:12px}
 html:not(.fire-tv) #playing .swing-dial:not([data-putting=true]) .dial-visual{position:relative;min-height:0}
 html:not(.fire-tv) #playing .first-play-guide{grid-area:4/1/5/3;justify-self:stretch;width:auto;max-height:32px;font-size:11px;line-height:15px}
}
/* Very narrow control columns use the original full-width summary above the dial.
   Short screens may scroll rather than crop the meter or its 44px action row. */
@media (max-width:600px) and (orientation:portrait){
 html:not(.fire-tv) #playing .play-grid{grid-template-rows:minmax(140px,1fr) clamp(250px,46dvh,350px)}
}
@media (max-width:359px), (orientation:landscape) and (max-width:740px) and (max-height:500px){
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])){grid-template-rows:52px minmax(0,1fr) 44px 32px}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .round-hud{grid-area:1/1/2/3;width:100%;align-self:stretch;padding:0;border:0;background:transparent;overflow:visible}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .score-strip{display:flex;justify-content:space-around;gap:4px}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .score-strip div{flex-direction:row;gap:3px}
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])) .course-metrics{flex-direction:row;justify-content:space-between;margin-top:2px;padding:0;border:0}
 html:not(.fire-tv) #playing .swing-dial:not([data-putting=true]){grid-area:2/1/3/3;width:100%}
}
@media (max-width:600px) and (max-height:620px), (orientation:landscape) and (max-width:1000px) and (max-height:400px){
 html:not(.fire-tv) body:has(#playing:not([hidden])){overflow:auto}
 html:not(.fire-tv) #playing{min-height:550px;height:max(550px,100dvh)}
 html:not(.fire-tv) #playing .play-grid{flex:auto}
}
@media (max-width:359px) and (orientation:portrait){
 html:not(.fire-tv) #playing .play-grid{grid-template-rows:minmax(140px,1fr) 350px}
}
@media (max-width:1000px) and (max-height:500px), (max-width:600px), (max-width:1400px) and (hover:none) and (pointer:coarse) {
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])):has(#unplayable:not([hidden])){grid-template-rows:0 minmax(0,1fr) 44px 44px}
 html:not(.fire-tv) #playing .shot-panel:has(#unplayable:not([hidden])) .first-play-guide{display:none}
}
@media (max-width:359px), (orientation:landscape) and (max-width:740px) and (max-height:500px){
 html:not(.fire-tv) #playing .shot-panel:not(:has(.swing-dial[data-putting=true])):has(#unplayable:not([hidden])){grid-template-rows:52px minmax(0,1fr) 44px 44px}
}

@media (orientation:landscape) and (max-width:1000px) and (max-height:400px){
 html:not(.fire-tv) #playing{min-height:430px;height:max(430px,100dvh)}
}

/* Persistent caddie card stays outside the playing surface. */
#playing .green-read-tip{white-space:pre-line;line-height:1.4;font-size:13px;padding:7px 12px;border-top:1px solid #66865b;border-bottom:0;overflow:visible;max-height:none}

.licence-actions{display:grid;gap:10px;margin-top:16px}.licence-actions button{min-height:44px}#hero-licence-status{color:#d0ed84;font-weight:700}#hero-licence-open{margin:12px 0;min-height:44px}