/* Shared web/native surfaces: graph paper surrounds content, never competes with it. */
.player-panel,.friend-nudge,.group-settings-page>.settings-list,.group-competition-link{background:var(--paper);border:1px solid var(--surface-border);border-radius:16px;padding:18px;color:var(--ink)}
.player-panel{min-width:0;overflow-wrap:anywhere}
.member-profile,.group-competition{gap:16px}
.member-profile>.group-eyebrow{margin:0}
.player-panel h4{margin:0 0 14px;font:700 1rem/1.3 var(--font-ui)}
.player-panel p:last-child{margin-bottom:0}
.player-panel .member-stats{background:none;border:0;border-radius:0;padding:0;margin:12px 0 0;gap:12px}
.player-panel .member-stats>div{min-width:0}
.player-panel .member-stats dd{font-size:1.7rem}
.player-summary-heading,.player-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.player-summary-heading .group-eyebrow{margin:0}
.player-section-heading h4{margin:0}
.player-metrics{display:flex;gap:4px;background:var(--ground);padding:4px;border-radius:10px}
.player-metrics button{padding:8px 10px;min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:600 .8rem/1.2 var(--font-ui)}
.player-metrics [aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #0002}
.player-progress-bars{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;padding:8px 2px}
.player-progress-bars>button{flex:1 0 38px;min-width:38px;display:flex;align-items:center;flex-direction:column;gap:6px;color:var(--ink-2);font:.66rem/1.3 var(--font-ui);background:transparent;border:0;padding:4px 0;border-radius:6px}
.player-progress-bars>button:focus-visible{outline:2px solid var(--pencil);outline-offset:-2px}
.player-bar-value{color:var(--ink);font-weight:700}
.player-bar-track{display:flex;align-items:flex-end;width:min(100%,28px);height:100px;background:var(--ground);border-radius:5px;overflow:hidden}
.player-bar-track i{width:100%;min-height:2px;background:var(--pencil);border-radius:4px}
.player-panel .member-day{background:none;border:0;border-top:1px solid var(--surface-border);border-radius:0;margin:0;padding:0}
.player-panel .member-day summary,.winner-day summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 0;cursor:pointer;list-style:none}
.player-panel .member-day summary::after,.winner-day summary::after{content:'›';font-size:1.25rem;color:var(--ink-2)}
.player-panel .member-day[open] summary::after,.winner-day[open] summary::after{transform:rotate(90deg)}
.player-panel summary>span,.winner-day summary>span{flex:1;min-width:0}
.player-panel summary small,.winner-day summary small{display:block;color:var(--ink-2);font-size:.75rem;font-weight:400;margin-top:4px}
.player-panel summary>b,.winner-day summary>b{white-space:nowrap;text-align:right}
.player-panel .member-shots{background:none;border:0;padding:6px 0 14px}
.player-panel .member-shots li{grid-template-columns:minmax(0,1fr) minmax(24px,1fr) auto}
.player-panel.shot-comparison{overflow-x:auto}
.shot-comparison table{table-layout:fixed;width:100%}
.shot-comparison th:first-child{width:40%}
.shot-comparison th,.shot-comparison td{overflow-wrap:anywhere;padding:12px 8px}
.player-report>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.85rem;color:var(--ink-2)}
.player-report[open]>summary{margin-bottom:12px}
.group-invitation{background:var(--paper);border:1px solid var(--surface-border);border-radius:16px;padding:14px;margin:0}
.group-invitation .invite-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.group-invitation .btn{width:auto;margin:0;min-height:48px;justify-content:center}
.group-invitation p{font-size:.75rem;margin:10px 0 0}
.btn.secondary{background:var(--chip);border:1px solid var(--surface-border);color:var(--ink)}
.btn.secondary:hover{background:var(--paper)}
.btn.compact{font-size:.8rem;padding:8px 12px;min-height:44px;display:inline-flex;align-items:center;gap:6px;width:auto}
.btn.compact .ui-icon{width:16px;height:16px}
.group-board-heading{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.group-board-heading>b,.group-board-heading>h4{white-space:nowrap;flex:0 0 auto;font-size:.94rem}
.group-competition-link .setting-label small{display:block;font-size:.75rem;font-weight:400;color:var(--ink-2);margin-top:4px}
.winner-bars{display:grid;gap:6px}
.winner-bars>button{display:grid;grid-template-columns:minmax(70px,1fr) minmax(30px,2fr) auto;align-items:center;gap:10px;min-height:48px;padding:8px;border:1px solid transparent;border-radius:8px;background:var(--ground);color:var(--ink);text-align:left;font:.85rem var(--font-ui)}
.winner-bars>button[aria-pressed=true]{border-color:var(--pencil);background:var(--chip)}
.winner-track{height:9px;background:var(--chip);border-radius:6px;overflow:hidden}
.winner-track i{display:block;height:100%;background:var(--pencil);border-radius:6px}
.winner-bars small{font-size:.72rem;font-weight:400}
.winner-day{border-top:1px solid var(--surface-border);font-size:.85rem}
.winner-day:first-child{margin-top:14px}
/* Small histories use the actual five shots and full-width result rows. */
.player-latest{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 16px}
.player-latest>div{display:flex;flex-direction:column;min-width:0;gap:5px}
.player-latest-label{font-size:.8rem;color:var(--ink-2)}
.player-latest strong{font:900 4rem/1 var(--display);letter-spacing:-.02em}
.player-latest strong small{font:600 .95rem var(--font-ui);letter-spacing:0;margin-left:6px;color:var(--ink-2)}
.player-latest-standing{font-size:.78rem;color:var(--ink-2)}
.player-result-count{display:flex;flex-direction:column;align-items:center;flex:none;padding:12px 16px;border:1px solid var(--surface-border);border-radius:14px;font-size:.7rem;color:var(--ink-2);background:var(--ground)}
.player-result-count b{font:900 2rem/1.15 var(--display);color:var(--ink)}
.player-best-shot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding-top:14px;border-top:1px solid var(--surface-border);font-size:.76rem;color:var(--ink-2)}
.player-best-shot b{color:var(--ink);font-weight:600}
.player-panel .player-summary-stats{border-top:1px solid var(--surface-border);padding-top:16px;margin-bottom:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.player-progress-bars:not(.player-progress-rows){background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--surface-border) 49px,var(--surface-border) 50px);background-size:100% 100px;background-position:0 30px;background-repeat:no-repeat}
.player-progress-scale{display:flex;justify-content:space-between;color:var(--ink-2);font-size:.65rem;margin-top:6px}
.player-progress-rows{display:grid;gap:10px;padding:8px 0;overflow:visible}
.player-progress-rows>button{display:grid;grid-template-columns:64px minmax(0,1fr) 38px;gap:12px;align-items:center;min-height:48px;padding:8px;border:1px solid var(--surface-border);background:var(--ground);border-radius:10px;font-size:.75rem;text-align:left}
.player-progress-rows .player-bar-date{grid-column:1;grid-row:1}
.player-progress-rows .player-bar-value{grid-column:3;grid-row:1;text-align:right}
.player-progress-rows .player-bar-track{grid-column:2;grid-row:1;width:100%;height:12px;background:var(--chip);border-radius:5px}
.player-progress-rows .player-bar-track i{height:100%!important;min-height:0;width:var(--value);border-radius:5px;background:var(--pencil)}
.player-history .member-shots li{min-height:42px}
.player-history .member-score-track{height:10px}
@media(max-width:380px){.player-latest{gap:10px}.player-latest strong{font-size:3.4rem}.player-result-count{padding:10px}.player-progress-rows>button{grid-template-columns:56px minmax(0,1fr) 34px;gap:8px}}
/* Commentary spans the card; it cannot collide with the score column. */
:root body[data-phase=results] .result-ticket .res-head{grid-template-columns:minmax(0,1fr) auto;gap:16px;margin-bottom:12px}
:root body[data-phase=results] .result-ticket .result-award{align-self:center}
:root body[data-phase=results] .result-ticket>.result-story{padding:0;margin:0 0 8px;max-width:none}
:root body[data-phase=results] .result-ticket>#result-standing{display:block;font:.78rem/1.45 var(--font-ui);color:var(--ink-2);margin:0 0 16px}
@media(max-width:359px){:root:not(.enlarged-text) body[data-phase=results] .result-ticket .tiles{gap:4px}:root:not(.enlarged-text) body[data-phase=results] .result-ticket .tile{padding-inline:1px}}
:root.enlarged-text body[data-phase=results] .result-ticket .res-head{grid-template-columns:minmax(0,1fr);gap:18px}
:root.enlarged-text body[data-phase=results] .result-ticket .res-head .rank{overflow-wrap:anywhere;line-height:1.1}
:root.enlarged-text body[data-phase=results] .result-ticket .res-head .total{align-items:flex-start}
:root.enlarged-text body[data-phase=results] .result-ticket .tiles{grid-template-columns:minmax(0,1fr)}
:root.enlarged-text body[data-phase=results] .result-ticket .tile{flex-direction:row;gap:12px;padding:10px 14px;min-height:54px}
:root.enlarged-text body[data-phase=results] .result-ticket .tile .nm{order:1;font-size:1rem;flex:1;min-width:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
:root.enlarged-text body[data-phase=results] .result-ticket .tile .s{order:2;flex:none}
#board-body>.group-stack:not(.group-detail):not(.member-profile):not(.group-competition){background:var(--paper);border:1px solid var(--surface-border);border-radius:16px;padding:18px}
#board-body>.group-stack:has(>.group-list),#board-body>.group-stack:has(>.official-discovery){background:none;border:0;padding:0}
@media(max-width:380px){.player-panel{padding:14px}.player-panel .member-stats{gap:8px}.player-panel .member-stats dt{font-size:.7rem}.group-invitation .invite-actions{gap:8px}.group-invitation .btn{padding-inline:12px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.player-bar-track i{transition:none}}
.sheet-back{display:block;justify-self:start;align-self:flex-start;min-height:44px;padding:8px 0;margin:0 0 4px;color:var(--ink-2);text-align:left}
#dlg-board[data-group-detail=true] .compete-scopes{display:none}
:is(#dlg-stats,#dlg-account) .appearance-options label span{min-height:44px}
/* Compact invitations keep the daily standings within reach. */
#dlg-board .group-heading>div{flex:1;min-width:0}
.group-member-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#dlg-board .group-member-line>p{margin:0;white-space:nowrap}
#dlg-board .group-member-line .group-invite{margin:0;min-height:44px;padding:9px 13px;border-radius:12px;font-size:.8rem;line-height:1.2;white-space:nowrap}
#dlg-board .group-heading{align-items:center}
#dlg-board .group-competition-link{padding:12px 14px}
/* Joined groups and suggested groups use the same card shape. */
#dlg-board .group-card{border:1px solid var(--surface-border);border-radius:10px}
:root{--warmup-fill:linear-gradient(145deg,#315b86,#244464);--warmup-edge:#7294b6}
:root[data-theme=light]{--warmup-fill:linear-gradient(145deg,#e2ebf0,#cbdbe7);--warmup-edge:#8198ad}
body[data-phase=intro] #controls .btn.home-warmup{background:var(--warmup-fill);border:1px solid var(--warmup-edge);border-radius:14px;color:var(--ink);font-weight:700;box-shadow:inset 0 1px 0 #ffffff24,0 2px 5px #00000012}
@media(hover:hover){body[data-phase=intro] #controls .btn.home-warmup:hover{filter:brightness(1.06)}}
body.shot-entering{overflow-x:clip}
/* A shared, measured selection pill preserves keyboard and screen-reader semantics. */
:root{--control-ease:cubic-bezier(.22,.8,.25,1);--control-duration:240ms}
:root .segmented-control{position:relative;isolation:isolate;border-radius:14px}
:root .segmented-control::before{content:'';position:absolute;z-index:0;pointer-events:none;left:0!important;top:0!important;bottom:auto!important;width:var(--selection-w)!important;height:var(--selection-h)!important;transform:translate(var(--selection-x),var(--selection-y))!important;border-radius:10px;background:var(--chip)!important;box-shadow:inset 0 1px 0 #ffffff12,0 1px 4px #0002;transition:transform var(--control-duration) var(--control-ease),width var(--control-duration) var(--control-ease),height var(--control-duration) var(--control-ease)}
:root .segmented-control>button,:root .segmented-control>label{position:relative;z-index:1;transition:color var(--control-duration) ease,background-color var(--control-duration) ease;border-radius:10px}
:root .segmented-control>button:is([aria-pressed=true],[aria-selected=true],[aria-current=page]),:root .segmented-control input:checked+span{background:transparent!important;color:var(--ink)!important;box-shadow:none!important;border-color:transparent}
:root .segmented-control>button[aria-current=page]::before{display:none}
/* Style these controls before JS measures the moving selection. Replacing a
   chart must not briefly revive the older dark selected-button background. */
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs){position:relative;isolation:isolate;gap:0;padding:0 4px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,var(--paper))}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs)>button{position:relative;z-index:1;flex:1;min-width:0;min-height:44px;height:auto;padding:8px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--ink-2);font:600 .8rem/1.25 var(--font-ui);overflow-wrap:anywhere;transition:color var(--control-duration) ease}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs)>button:is([aria-selected=true],[aria-pressed=true]){background:transparent!important;color:var(--ink)!important;box-shadow:none!important;border:0}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs).segmented-control::before{height:calc(var(--selection-h) - 8px)!important;transform:translate(var(--selection-x),calc(var(--selection-y) + 4px))!important;border-radius:999px;background:var(--paper)!important;box-shadow:0 1px 3px #0002,inset 0 0 0 1px var(--surface-border)}
:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs):not([data-segment-ready])>button:is([aria-selected=true],[aria-pressed=true])::before{content:'';position:absolute;z-index:-1;inset:4px 0;border-radius:999px;background:var(--paper);box-shadow:0 1px 3px #0002,inset 0 0 0 1px var(--surface-border)}
@media(prefers-reduced-motion:reduce){:root :is(#dlg-stats,#dlg-board) :is(.profile-subtabs,.progress-period,.trend-metric,.tabs)>button{transition:none}}
/* A compact visible pill, with the full 44px radio target left intact. */
:is(#dlg-stats,#dlg-account) .appearance-setting{display:block;padding:14px 16px}
:is(#dlg-stats,#dlg-account) .appearance-setting legend{margin-bottom:10px}
:root :is(#dlg-stats,#dlg-account) .appearance-options{gap:0;padding:0 4px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,var(--paper))}
:root :is(#dlg-stats,#dlg-account) .appearance-options::before{height:calc(var(--selection-h) - 8px)!important;transform:translate(var(--selection-x),calc(var(--selection-y) + 4px))!important;border-radius:999px;background:var(--paper)!important;box-shadow:0 1px 3px #0002,inset 0 0 0 1px var(--surface-border)}
:root :is(#dlg-stats,#dlg-account) .appearance-options label,:root :is(#dlg-stats,#dlg-account) .appearance-options label span{border-radius:999px}
:is(#dlg-stats,#dlg-account) .appearance-options label span{padding:4px 8px;line-height:1.2}
:root :is(.setting-switch,.reminder-switch) input[role=switch],:root :is(.setting-switch,.reminder-switch) input[role=switch]::before{transition:transform var(--control-duration) var(--control-ease),background-color var(--control-duration) ease,border-color var(--control-duration) ease}
.group-appearance-options label>span,.design-options>button{transition:background-color var(--control-duration) ease,border-color var(--control-duration) ease,box-shadow var(--control-duration) ease}
@media(prefers-reduced-motion:reduce){:root .segmented-control::before,:root .segmented-control>button,:root .segmented-control>label,:root :is(.setting-switch,.reminder-switch) input[role=switch],:root :is(.setting-switch,.reminder-switch) input[role=switch]::before,.group-appearance-options label>span,.design-options>button{transition:none}}
/* Move the entire sheet, including desktop gutters; navigation stays anchored. */
@supports(view-transition-name:eyeshot-page){
 :root{view-transition-name:eyeshot-page}
 .web-header{view-transition-name:eyeshot-header}
 .native-app .app-nav{view-transition-name:eyeshot-navigation}
 ::view-transition{pointer-events:none}
 ::view-transition-group(eyeshot-header),::view-transition-group(eyeshot-navigation){animation:none;z-index:1}
 ::view-transition-old(eyeshot-header),::view-transition-old(eyeshot-navigation){display:none}
 ::view-transition-new(eyeshot-header),::view-transition-new(eyeshot-navigation){animation:none;mix-blend-mode:normal}
 ::view-transition-group(eyeshot-page){animation:none;overflow:clip}
 ::view-transition-old(eyeshot-page),::view-transition-new(eyeshot-page){mix-blend-mode:normal;animation-duration:320ms;animation-timing-function:cubic-bezier(.32,.72,0,1);animation-fill-mode:both}
 ::view-transition-old(eyeshot-page){animation-name:page-exit-left}
 ::view-transition-new(eyeshot-page){animation-name:page-enter-right}
 :root[data-navigation-direction=back]::view-transition-old(eyeshot-page){animation-name:page-exit-right}
 :root[data-navigation-direction=back]::view-transition-new(eyeshot-page){animation-name:page-enter-left}
}
@keyframes page-exit-left{to{transform:translateX(-100%)}}
@keyframes page-enter-right{from{transform:translateX(100%)}}
@keyframes page-exit-right{to{transform:translateX(100%)}}
@keyframes page-enter-left{from{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(eyeshot-page),::view-transition-new(eyeshot-page){animation:none}}
.blocked-players{margin-top:16px}
.blocked-players>summary{min-height:44px;cursor:pointer;align-content:center}
.blocked-player-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.blocked-player-row>span{min-width:0;overflow-wrap:anywhere}
.player-block>[data-block]{min-height:44px;color:var(--ink-2)}
.player-block [role=status]:empty{display:none}
/* UIKit owns the iOS 26 glass bar; the same HTML actions remain its bridge. */
.native-app.native-glass .app-nav{display:none!important}
.native-app.native-glass .page-dialog{bottom:0}
.native-app.native-glass .page-dialog>.dlg{padding-bottom:calc(108px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom)))}
.web-header .app-nav.segmented-control{left:auto;right:auto;top:auto;bottom:auto;min-width:0;transform:none}
.native-app .app-nav.segmented-control{position:fixed}
/* Programmatic heading focus announces the new page without drawing a box.
   Buttons, fields and other keyboard controls keep their visible focus rings. */
:root :is(h1,h2,h3,h4,h5,h6)[tabindex="-1"]:focus{outline:none}