/* In-game layout. Home and lobby keep the original presentation. */
body.playing { --game-gap:12px; --game-dock-height:290px; }
body.playing .topbar { display:none; }
body.playing .game-hud { display:flex; align-items:flex-start; gap:10px; pointer-events:none; }
body.playing .game-hud>* { pointer-events:auto; }
body.playing .game-hud .hole-info { position:static; transform:none; min-width:0; max-width:none; padding:10px 14px; }
body.playing .hole-info h2 { font:600 17px/1.2 Arial,Helvetica,sans-serif; letter-spacing:0; margin:4px 0 0; }
body.playing .hole-info .eyebrow { font-size:11px; letter-spacing:.5px; }
body.playing .hole-meta { font-size:11px; gap:12px; margin-top:5px; }
body.playing .hole-meta #assistance-badge { display:none; }
body.playing .game-hud .wind { position:static; transform:none; gap:8px; padding:10px 12px; margin:0 0 0 auto; white-space:nowrap; }
body.playing .wind small { font-size:8px; letter-spacing:.5px; margin-bottom:3px; }
body.playing .wind strong { font-size:14px; }
body.playing .wind-arrow { font-size:26px; }
body.playing .game-menu-btn { display:flex; gap:7px; align-items:center; min-height:44px; padding:10px 12px; font-size:13px; }
.network-dot { width:6px; height:6px; border-radius:50%; background:#e7b571; flex:0 0 auto; }
[data-online="true"] .network-dot { background:#b7ebac; }
.connection-warning { position:absolute; top:100%; right:0; background:#5b3028; padding:7px 12px; font-size:12px; border-radius:8px; }

/* Dialogs reuse the same live controls. Every primary touch target is 44px. */
.game-sheet { background:#143f36; color:#f5f4df; border-color:#567568; padding:20px; max-width:460px; max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); overflow:auto; overscroll-behavior:contain; }
.sheet-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:-20px; background:#143f36; z-index:2; padding:10px 0; margin:-10px 0 12px; }
.game-sheet .sheet-heading h2 { font:600 21px/1.2 Arial,Helvetica,sans-serif; margin:0; letter-spacing:0; }
.game-sheet .close-dialog { position:static; color:#173e33; background:#f1ce68; min-height:44px; min-width:64px; padding:10px; border-radius:9px; font-size:14px; font-weight:600; }
.game-sheet button,.game-sheet select { min-height:44px; font-size:14px; }
body.playing dialog .close-dialog { min-height:44px; min-width:44px; }
.game-sheet select,.game-sheet input { font-size:16px; }
.game-sheet p { font-size:13px; line-height:1.5; }
.game-sheet .menu-meta { font-size:13px; line-height:1.5; color:#d1dec4; margin-bottom:16px; }
.game-sheet .menu-actions,.game-sheet .top-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.game-sheet .top-actions { margin-top:10px; }
.game-sheet .connection { position:static; grid-column:1/-1; font-size:12px; max-width:none; margin-bottom:6px; }
.game-sheet .quiet,.game-sheet .icon-button { border-radius:9px; font-size:14px; }
.game-sheet #full-btn { display:block; }
.game-sheet .standings { position:static; display:block; transform:none; width:100%; padding:0; margin-top:22px; background:none; border:0; box-shadow:none; backdrop-filter:none; }
.game-sheet .score-row { font-size:13px; padding:10px 0; }
.game-sheet .room-inline { font-size:11px; }
.game-sheet .room-inline b,.game-sheet .room-inline span { font-size:11px; }
.game-sheet #score-btn { min-height:44px; }
.game-sheet .advanced-shots,.game-sheet .shot-planner { margin-top:16px; padding-top:12px; }
.game-sheet summary { min-height:44px; font-size:16px; padding:10px 0; }
.game-sheet label,.game-sheet .spin-heading label,.game-sheet .spin-heading output,.game-sheet .field-note { font-size:13px; }
.game-sheet .spin-control { border:0; padding-top:0; margin-top:0; }
.game-sheet input[type="range"] { min-height:44px; }
body .game-sheet .spin-control p,body .game-sheet .spin-control>small { font-size:12px; min-height:0; }
body .game-sheet .spin-heading output { font-size:13px; }
body .game-sheet .shot-option-buttons button,body .game-sheet .spin-control .spin-row button { font-size:14px; min-height:44px; }
.game-sheet .spin-control input[type="range"] { height:44px; min-height:44px; }
.game-sheet .shot-shape-label select { font-size:16px; min-height:44px; }
.game-sheet .plan-results { font-size:13px; }
.game-sheet #putt-options { margin:0; }
.game-sheet #putt-options label { margin-top:0; }
body .game-sheet .activity-panel { position:static; transform:none; display:block; width:100%; min-height:0; max-height:none; overflow:visible; padding:0; background:none; box-shadow:none; border:0; backdrop-filter:none; }
body.playing:not(.phone) .game-sheet .activity-panel { display:block; }
.game-sheet .activity-panel h3 { display:none; }
.game-sheet .activity-panel>p,.game-sheet .activity-panel .field-note { font-size:13px; }
body .game-sheet .activity-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; }
.game-sheet .activity-stats small { font-size:10px; }
.game-sheet .activity-stats strong { font-size:17px; }
body .game-sheet .practice-buttons { flex-wrap:wrap; overflow:visible; }
body .game-sheet .practice-buttons button { min-height:44px; font-size:14px; }
body .game-sheet .practice-buttons .primary { width:100%; }
.game-sheet .ghost-label { font-size:13px; min-height:44px; }
body.playing .swing-panel #swing-instruction { position:absolute; width:1px; height:1px; margin:0; padding:0; clip:rect(0,0,0,0); overflow:hidden; }
body.playing .swing-panel #active-character { display:none; }

/* Full game: compact HUD and one shot dock, with a separate camera workspace. */
body.playing:not(.phone) { height:100dvh; overflow:hidden; }
body.playing:not(.phone) .game { position:fixed; inset:0; height:auto; padding:0; }
body.playing:not(.phone) .game-hud { position:absolute; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); }
body.playing:not(.phone) .game-hud .hole-info { display:grid; grid-template-columns:auto auto; gap:3px 16px; }
body.playing:not(.phone) .hole-info h2 { grid-column:1; grid-row:1; margin:0; }
body.playing:not(.phone) .hole-info .eyebrow { grid-column:1; grid-row:2; }
body.playing:not(.phone) .hole-meta { grid-column:2; grid-row:1/3; align-items:center; margin:0; }
body.playing:not(.phone) .game-controls { position:absolute; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(740px,calc(100% - 24px)); pointer-events:none; }
body.playing:not(.phone) .quick-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:8px; pointer-events:none; }
body.playing:not(.phone) .quick-tools button { pointer-events:auto; min-height:44px; padding:10px 15px; font-size:13px; white-space:nowrap; }
body.playing:not(.phone) .bottom-ui { position:static; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:20px; align-items:center; background:#123c35f5; border:1px solid #567568; border-radius:17px; padding:14px 18px; box-shadow:0 6px 30px #07261e30; pointer-events:auto; }
body.playing:not(.phone) .bottom-ui :is(.aim-panel,.swing-panel) { width:100%; max-height:none; overflow:visible; padding:0; margin:0; border:0; box-shadow:none; background:none; backdrop-filter:none; }
body.playing:not(.phone) .ball-info { gap:8px; margin:0 0 8px; }
body.playing:not(.phone) .ball-info small { font-size:9px; letter-spacing:.5px; margin-bottom:4px; }
body.playing:not(.phone) .ball-info strong,body.playing:not(.phone) .ball-info #ball-lie { font-size:15px; line-height:1.2; white-space:nowrap; overflow-wrap:normal; }
body.playing:not(.phone) .ball-info>div:nth-child(2) { flex:1.3; }
body.playing:not(.phone) .club-picker { padding:4px 0; gap:5px; }
body.playing:not(.phone) .club-picker>div { min-width:0; }
body.playing:not(.phone) .club-picker select { min-height:44px; height:44px; font-size:18px; }
body.playing:not(.phone) .club-picker small { display:block; font-size:11px; line-height:1.2; }
body.playing:not(.phone) .square { width:44px; min-width:44px; height:44px; }
body.playing:not(.phone) .aim-buttons { gap:6px; margin-top:8px; }
body.playing:not(.phone) .aim-buttons button { min-height:44px; font-size:15px; }
body.playing:not(.phone) #aim-help { display:none; }
body.playing:not(.phone) .swing-panel { position:relative; }
body.playing:not(.phone) .swing-panel .section-title { margin:0 0 3px; gap:8px; justify-content:flex-start; padding-right:76px; min-height:20px; }
body.playing:not(.phone) .swing-panel .eyebrow { font-size:12px; letter-spacing:.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.playing:not(.phone) .swing-panel .pill { font-size:10px; border:0; padding:0; }
body.playing:not(.phone) .swing-panel #swing-subtitle { font-size:11px; line-height:1.3; min-height:0; margin:0; }
body.playing:not(.phone) .distance-readout { position:absolute; right:0; top:0; margin:0; height:24px; align-items:center; }
body.playing:not(.phone) .distance-readout small { display:none; }
body.playing:not(.phone) .distance-readout strong { font-size:24px; font-weight:600; }
body.playing:not(.phone) .swing-panel .meter { height:22px; margin-top:24px; }
body.playing:not(.phone) .pin-mark span { font-size:10px; }
body.playing:not(.phone) .meter-labels { margin-top:8px; font-size:9px; letter-spacing:.5px; }
body.playing:not(.phone) .swing-panel .meter-note { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); margin:0; min-height:0; }
body.playing:not(.phone) .swing-button { min-height:48px; margin-top:9px; font-size:17px; padding:12px 15px; }
body.playing:not(.phone) .quick-tools #cancel-swing { position:static; min-height:44px; padding:8px 12px; font-size:13px; border-radius:9px; background:#294f43; color:#fff4dc; }
body.playing:not(.phone).swing-active .quick-tools>button:not(#cancel-swing) { display:none; }
body.playing:not(.phone).swing-active .quick-tools { justify-content:flex-end; }
body.playing.phone #cancel-swing { min-height:44px; }
body.playing:not(.phone) .watch-note { margin-top:9px; font-size:12px; }
body.playing:not(.phone) .camera-panel { position:static; width:100%; max-height:calc(100dvh - 125px); overflow:auto; padding:16px; pointer-events:auto; }
body.playing:not(.phone) .camera-primary { display:grid; grid-template-columns:minmax(0,1fr) 56px 56px; gap:8px; }
body.playing:not(.phone) .camera-secondary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
body.playing:not(.phone) .camera-panel button { min-height:44px; font-size:13px; padding:10px; white-space:normal; }
body.playing:not(.phone) #camera-reset { display:block; }
body.playing:not(.phone) .camera-panel p { font-size:12px; margin:8px 0 0; color:#d2dec7; }
body.playing:not(.phone) .camera-panel .shot-camera-mode { grid-column:1/-1; margin:0; }
body.playing:not(.phone).camera-open .bottom-ui { display:none; }
body.playing:not(.phone).shot-playing .bottom-ui { pointer-events:none; }
body.playing:not(.phone).shot-playing #shot-tools-btn,body.playing:not(.phone).shot-playing #camera-tools-btn { display:none; }
body.playing:not(.phone) .shot-banner { top:35%; max-width:85%; padding:14px 22px; min-width:200px; }
body.playing:not(.phone) .shot-banner strong { font-size:28px; }
body.playing:not(.phone) .impact-feedback { font-size:24px; padding:12px 20px; }

/* Portrait phones: one wide dock, short rows, no split narrow cards. */
@media(max-width:700px) {
 body.playing:not(.phone) .game-controls { left:0; bottom:0; transform:none; width:100%; padding:0 max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
 body.playing:not(.phone) #scene { bottom:var(--game-dock-height); }
 body.playing:not(.phone) .game-hud { gap:6px; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); }
 body.playing:not(.phone) .game-hud .hole-info { display:flex; flex-direction:column; gap:2px; padding:9px 10px; flex:1; }
 body.playing:not(.phone) .hole-info h2 { font-size:13px; max-width:45vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 body.playing:not(.phone) .hole-info .eyebrow { font-size:10px; }
 body.playing:not(.phone) .hole-meta { font-size:10px; gap:8px; }
 body.playing:not(.phone) .game-hud .wind { padding:8px; gap:5px; }
 body.playing:not(.phone) .wind-arrow { font-size:22px; }
 body.playing:not(.phone) .wind strong { font-size:12px; }
 body.playing:not(.phone) .wind small { font-size:7px; }
 body.playing:not(.phone) .game-menu-btn { font-size:12px; padding:8px 10px; }
 body.playing:not(.phone) .quick-tools { justify-content:flex-start; gap:6px; margin-bottom:6px; }
 body.playing:not(.phone) .quick-tools button { flex:1; padding:9px 8px; font-size:12px; }
 body.playing:not(.phone) .bottom-ui { display:flex; flex-direction:column; gap:9px; padding:10px 12px; border-radius:14px; }
 body.playing:not(.phone) .bottom-ui .aim-panel { display:grid; grid-template-columns:minmax(0,1fr) 138px; gap:3px 10px; }
 body.playing:not(.phone) .ball-info { grid-column:1/-1; margin:0; align-items:center; }
 body.playing:not(.phone) .ball-info>div { display:flex; align-items:baseline; gap:5px; flex:none; min-width:0; }
 body.playing:not(.phone) .ball-info>div:nth-child(2) { flex:1; justify-content:center; }
 body.playing:not(.phone) .ball-info small { font-size:9px; margin:0; letter-spacing:0; }
 body.playing:not(.phone) .ball-info strong,body.playing:not(.phone) .ball-info #ball-lie { font-size:12px; }
 body.playing:not(.phone) .club-picker { border:0; padding:0; }
 body.playing:not(.phone) .club-picker>div { text-align:left; }
 body.playing:not(.phone) .club-picker select { text-align:left; padding-left:0; font-size:17px; height:44px; }
 body.playing:not(.phone) .club-picker small { font-size:10px; margin-top:-6px; }
 body.playing:not(.phone) .club-picker .square { display:none; }
 body.playing:not(.phone) .aim-buttons { margin:4px 0 0; gap:3px; }
 body.playing:not(.phone) .aim-buttons button { padding:4px; min-width:44px; font-size:14px; }
 body.playing:not(.phone) .swing-panel { border-top:1px solid #ffffff1e!important; padding-top:8px!important; }
 body.playing:not(.phone) .swing-panel .section-title { margin:0; }
 body.playing:not(.phone) .swing-panel #swing-subtitle { font-size:10px; margin-top:3px; }
 body.playing:not(.phone) .distance-readout { margin-top:4px; height:23px; }
 body.playing:not(.phone) .swing-panel .meter { margin-top:22px; }
 body.playing:not(.phone) .swing-button { margin-top:8px; min-height:48px; }
 body.playing:not(.phone) #cancel-swing { top:0; right:10px; }
 body.playing:not(.phone) .camera-key-help { display:none; }
 .game-sheet { margin:auto 8px max(8px,env(safe-area-inset-bottom)); width:calc(100% - 16px); max-width:none; padding:18px; border-radius:18px; }
 .game-sheet .sheet-heading { top:-18px; }
}

/* Short landscape screens: the course gets the full height beside the dock. */
@media(min-width:560px) and (orientation:landscape) and (max-height:600px) {
 body.playing:not(.phone) { --side-dock:300px; }
 body.playing:not(.phone) #scene { right:calc(var(--side-dock) + 16px + env(safe-area-inset-right)); bottom:0; }
 body.playing:not(.phone) .game-hud { right:calc(var(--side-dock) + 24px + env(safe-area-inset-right)); gap:6px; top:max(8px,env(safe-area-inset-top)); }
 body.playing:not(.phone) .game-hud .hole-info { display:flex; flex-direction:column; gap:2px; padding:8px 10px; flex:1; }
 body.playing:not(.phone) .hole-info h2 { font-size:13px; max-width:30vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 body.playing:not(.phone) .hole-info .eyebrow,body.playing:not(.phone) .hole-meta { font-size:10px; }
 body.playing:not(.phone) .hole-meta { display:flex; gap:8px; margin:0; }
 body.playing:not(.phone) .game-hud .wind { padding:8px; gap:5px; margin:0; }
 body.playing:not(.phone) .wind-arrow { font-size:22px; }
 body.playing:not(.phone) .wind strong { font-size:12px; }
 body.playing:not(.phone) .wind small { display:none; }
 body.playing:not(.phone) .game-menu-btn { position:fixed; left:max(12px,env(safe-area-inset-left)); bottom:max(8px,env(safe-area-inset-bottom)); }
 body.playing:not(.phone) .game-controls { left:auto; right:max(8px,env(safe-area-inset-right)); top:max(8px,env(safe-area-inset-top)); bottom:max(8px,env(safe-area-inset-bottom)); width:var(--side-dock); transform:none; padding:0; display:flex; flex-direction:column; justify-content:flex-end; }
 body.playing:not(.phone) .quick-tools { gap:5px; flex:none; margin-bottom:6px; }
 body.playing:not(.phone) .quick-tools button { flex:1; min-height:44px; padding:8px 5px; font-size:12px; }
 body.playing:not(.phone) .bottom-ui { display:flex; flex-direction:column; gap:7px; align-items:stretch; padding:10px; border-radius:14px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
 body.playing:not(.phone) .bottom-ui .aim-panel { display:grid; grid-template-columns:minmax(0,1fr) 138px; gap:4px 8px; flex:none; }
 body.playing:not(.phone) .ball-info { grid-column:1/-1; margin:0; }
 body.playing:not(.phone) .ball-info>div { display:flex; align-items:baseline; gap:4px; flex:none; }
 body.playing:not(.phone) .ball-info>div:nth-child(2) { flex:1; justify-content:center; }
 body.playing:not(.phone) .ball-info small { margin:0; font-size:8px; letter-spacing:0; }
 body.playing:not(.phone) .ball-info strong,body.playing:not(.phone) .ball-info #ball-lie { font-size:12px; }
 body.playing:not(.phone) .club-picker { padding:0; border:0; }
 body.playing:not(.phone) .club-picker .square { display:none; }
 body.playing:not(.phone) .club-picker select { font-size:16px; padding:0; min-height:44px; height:44px; text-align:left; }
 body.playing:not(.phone) .club-picker>div { text-align:left; }
 body.playing:not(.phone) .club-picker small { font-size:10px; margin-top:-5px; }
 body.playing:not(.phone) .aim-buttons { margin:3px 0 0; gap:3px; }
 body.playing:not(.phone) .aim-buttons button { min-width:44px; min-height:44px; font-size:14px; padding:4px; }
 body.playing:not(.phone) .swing-panel { border-top:1px solid #ffffff1e!important; padding-top:6px!important; flex:none; }
 body.playing:not(.phone) .swing-panel .section-title { margin-bottom:2px; }
 body.playing:not(.phone) .swing-panel #swing-subtitle { font-size:10px; }
 body.playing:not(.phone):not(.swing-active) .swing-panel #swing-subtitle { display:none; }
 body.playing:not(.phone).swing-active .bottom-ui .aim-panel { display:none; }
 body.playing:not(.phone) .distance-readout { height:22px; margin-top:3px; }
 body.playing:not(.phone) .swing-panel .meter { margin-top:22px; }
 body.playing:not(.phone) .meter-labels { margin-top:7px; }
 body.playing:not(.phone) .swing-button { min-height:48px; margin-top:8px; }
 body.playing:not(.phone) .swing-button span { display:none; }
 body.playing:not(.phone) #cancel-swing { top:auto; bottom:0; right:calc(100% + 12px); }
 body.playing:not(.phone) .camera-panel { max-height:100%; min-height:0; padding:12px; }
 body.playing:not(.phone) .camera-key-help { display:none; }
 body.playing:not(.phone) .camera-secondary { gap:6px; margin-top:8px; }
 body.playing:not(.phone) .camera-panel button { font-size:12px; }
 body.playing:not(.phone) .shot-banner { left:calc((100% - var(--side-dock) - 16px)/2); max-width:calc(100% - var(--side-dock) - 30px); }
 .game-sheet { max-width:500px; margin:auto; }
}
@media(min-width:560px) and (max-width:650px) and (orientation:landscape) and (max-height:600px) {
 body.playing:not(.phone) { --side-dock:280px; }
 body.playing:not(.phone) .game-hud .wind { position:absolute; top:60px; left:0; }
}

/* A shot uses the entire course view. The dock returns at the next setup. */
body.playing:not(.phone).shot-playing #scene { right:0; bottom:0; }
body.playing:not(.phone).shot-playing .quick-tools { justify-content:flex-end; }
body.playing:not(.phone).shot-playing .shot-banner { left:50%; max-width:85%; }
@media(pointer:coarse) { body.playing .swing-button span { display:none; } }

/* The couch controller keeps its map and dedicated remote Camera mode. */
body.playing.phone .game-hud { align-items:flex-start; position:relative; }
body.playing.phone .game-hud .hole-info { flex:1; width:auto; }
body.playing.phone .game-hud .wind { align-self:auto; padding:8px; }
body.playing.phone .hole-info h2 { font-size:14px; }
body.playing.phone .hole-meta { font-size:10px; gap:8px; }
body.playing.phone .game-menu-btn { min-width:44px; padding:8px; }
body.playing.phone .game-controls { display:contents; }
body.playing.phone .quick-tools { display:none; }
body.playing.phone .phone-info { margin-top:8px; }
body.playing.phone .swing-panel #swing-subtitle { margin-top:5px; }
body.playing.phone .active-character { display:none; }

/* Honor larger text without cutting off controls on a short screen. */
body.playing.large-text:not(.phone) .bottom-ui { max-height:calc(100dvh - 150px); overflow:auto; }
body.playing.large-text .game-sheet :is(p,label,small,summary) { font-size:15px; }
body.playing.large-text:not(.phone) .ball-info { flex-wrap:wrap; }
body.playing.large-text:not(.phone) .swing-panel #swing-subtitle { font-size:13px!important; }
@media(min-width:560px) and (orientation:landscape) and (max-height:600px) {
 body.playing.large-text:not(.phone) .bottom-ui { max-height:none; }
}
@media(max-width:700px),(max-height:600px) {
 body.playing.large-text:not(.phone) .ball-info strong,body.playing.large-text:not(.phone) .ball-info #ball-lie { font-size:15px!important; }
 body.playing.large-text:not(.phone) .ball-info small { font-size:10px!important; }
 body.playing.large-text:not(.phone) .club-picker small { font-size:12px!important; }
}