/* Host shell. Base type, surfaces and inputs come from mobile-scoring.css and the ff tokens. */
.top { position: sticky; top: 0; z-index: 20; background: var(--ff-ink); padding-top: max(18px, env(safe-area-inset-top)); gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-font-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand__mark { width: 28px; height: 28px; border-radius: 8px; }
.connection { flex: 1; text-align: right; font-size: 13px; color: var(--ff-text-2); }
.connection[data-state="offline"] { color: var(--ff-warn); }
.account-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 46vw; padding: 4px 10px 4px 4px; font: inherit; font-size: 14px; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line-control); border-radius: 999px; cursor: pointer; }
.initial { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ff-action); color: var(--ff-ink); font-weight: 800; flex: none; }
.account-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .account-button { padding: 4px; } .account-label { display: none; } }
.host-notice { padding: 12px 14px; border-radius: 10px; background: var(--ff-surface); border: 1px solid var(--ff-line); font-size: 14px; }
.host-notice[data-error="true"] { border-color: var(--ff-danger); }
.error { color: var(--ff-danger); font-weight: 700; min-height: 24px; }
textarea { font: inherit; font-size: 15px; color: var(--ff-paper); background: var(--ff-ink); border: 1px solid var(--ff-line-control); border-radius: 10px; width: 100%; padding: 12px; margin: 8px 0 16px; resize: vertical; word-break: break-all; }
.steps { padding-left: 22px; color: var(--ff-text-2); }
.steps li { margin: 6px 0; }
.module-head { display: flex; align-items: center; gap: var(--ff-space-12); margin: var(--ff-space-16) 0 var(--ff-space-12); }
.module-head #module-title { margin: 0; font-size: 28px; letter-spacing: var(--ff-tracking-heading); }
.module-head__text { display: grid; gap: 2px; min-width: 0; }
.module-head__sub { margin: 0; overflow: hidden; color: var(--ff-text-2); font: 600 13px / 1.2 var(--ff-font-ui); text-overflow: ellipsis; white-space: nowrap; }
/* The hole's pin flag: a paper pole and a lime swallowtail pennant carrying the hole number. */
.hole-flag { position: relative; display: block; flex: none; width: 52px; height: 44px; }
.hole-flag[hidden] { display: none; }
.hole-flag__pole { position: absolute; left: 6px; top: 2px; bottom: 0; width: 3px; border-radius: 2px; background: var(--ff-paper); }
.hole-flag__pole::after { content: ""; position: absolute; left: -4px; bottom: -2px; width: 11px; height: 4px; border-radius: 50%; background: rgba(243, 240, 232, .35); }
.hole-flag__pennant { position: absolute; left: 9px; top: 2px; display: grid; place-items: center; width: 42px; height: 28px; padding-right: 7px; box-sizing: border-box; color: var(--ff-ink); background: var(--ff-action); clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%); transform-origin: left center; }
.hole-flag__no { font: 900 italic 19px / 1 var(--ff-font-figure); letter-spacing: -.04em; padding-right: 2px; font-variant-numeric: tabular-nums; }
.mod-status { font-size: 14px; min-height: 24px; }
.mod-status[data-error="true"] { color: var(--ff-danger); font-weight: 700; }
/* My bag (Brick 4.4). Built on ff-components: solid paper is chosen or known, a dashed ring is
   predicted, a gold ring is the one thing selected, lime is the way forward. */
.bag-glyph svg, .mode-card__icon svg, .mode-card__go svg, .bag-puck__glyph svg, .bag-choice__art svg, span.ff-icon svg { display: block; width: 100%; height: 100%; }
.kicker-lime-row { display: flex; align-items: center; justify-content: space-between; margin: var(--ff-space-4) 0 var(--ff-space-16); }
.kicker-lime-row .kicker-lime { margin: 0; }
.bag-info { margin: -12px -10px -12px 0; color: var(--ff-text-2); }
.bag-sheet__row { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: var(--ff-space-12); margin: 0 0 var(--ff-space-16); color: var(--ff-text-2); font-size: 15px; line-height: var(--ff-leading-body); }
.bag-sheet__row > :first-child { justify-self: center; }
.carry-key--icon { width: 28px; height: 28px; color: var(--ff-action); border-radius: 0; }
.kicker-lime { margin: 0 0 var(--ff-space-8); color: var(--ff-action); font: var(--ff-weight-heavy) var(--ff-size-12) / var(--ff-leading-tight) var(--ff-font-ui); letter-spacing: var(--ff-tracking-eyebrow); text-transform: uppercase; }
.bag-actions { display: flex; justify-content: center; margin: var(--ff-space-16) 0 var(--ff-space-24); }
.bag-group { margin: var(--ff-space-24) 0; }
.bag-group > .ff-eyebrow { margin: 0 0 var(--ff-space-12); }
.bag-toast { position: fixed; left: 50%; bottom: calc(var(--ff-safe-bottom) + 112px); z-index: var(--ff-z-notice); width: max-content; max-width: calc(100% - 40px); min-height: 0; margin: 0; padding: var(--ff-space-12) var(--ff-space-16); font-size: 15px; line-height: 1.35; text-align: center; color: var(--ff-danger); background: var(--ff-surface-raised); border: 1px solid var(--ff-danger); border-radius: var(--ff-radius-12); box-shadow: var(--ff-e2); transform: translateX(-50%); cursor: pointer; }
.bag-toast:empty { display: none; }
.bag-next { position: sticky; bottom: 0; z-index: var(--ff-z-hud); margin: var(--ff-space-8) -20px 0; padding: var(--ff-space-24) 20px max(var(--ff-space-16), var(--ff-safe-bottom)); background: linear-gradient(to top, var(--ff-ink) 70%, rgba(7, 17, 14, 0)); }
.bag-next--flow { position: static; margin: var(--ff-space-8) 0 var(--ff-space-16); padding: 0; background: none; }

/* Hub: the course at golden hour, the bag's headline on a scrim panel, then one card per job. */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 300px; margin: 0 -20px; padding: 0 20px var(--ff-space-16); background: linear-gradient(to bottom, rgba(7, 17, 14, .1) 0%, rgba(7, 17, 14, 0) 35%, var(--ff-ink) 100%), url("img/course-hero.jpg") center 42% / cover no-repeat; }
/* The hero as WebP (76 KB, not 185 KB), where image-set() with type() is understood; else the JPEG above. */
.hero { background-image: linear-gradient(to bottom, rgba(7, 17, 14, .1) 0%, rgba(7, 17, 14, 0) 35%, var(--ff-ink) 100%), image-set(url("img/course-hero.webp") type("image/webp"), url("img/course-hero.jpg") type("image/jpeg")); }
.hero__panel { max-width: 300px; padding: var(--ff-space-16) var(--ff-space-24) var(--ff-space-16) var(--ff-space-16); background: var(--ff-scrim); border-left: 3px solid var(--ff-action); }
.hero--home { min-height: 340px; margin-top: -8px; }
.hero__meta { margin: var(--ff-space-12) 0 0; color: var(--ff-text-2); font-size: var(--ff-size-14); }
.hero__title { margin: 0; color: var(--ff-paper); font: 700 40px / 1 var(--ff-font-display); letter-spacing: var(--ff-tracking-display); }
.bag-start { margin: var(--ff-space-16) 0 0; }
.section-head { display: flex; justify-content: space-between; margin: var(--ff-space-24) 0 var(--ff-space-12); color: var(--ff-paper); }
.section-head::after { content: "↓"; color: var(--ff-paper); }
.mode-list { display: grid; gap: var(--ff-space-12); margin-bottom: var(--ff-space-8); }
.mode-card { position: relative; display: grid; gap: var(--ff-space-4); width: 100%; padding: var(--ff-space-16) 56px var(--ff-space-16) var(--ff-space-16); font: inherit; text-align: left; color: var(--ff-paper); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ff-dur-press) var(--ff-ease-state), transform var(--ff-dur-press) var(--ff-ease-state); }
.mode-card:active { background: var(--ff-surface-raised); transform: scale(var(--ff-press-scale)); }
.mode-card__eyebrow { color: var(--ff-text-2); font: var(--ff-weight-heavy) 11px / var(--ff-leading-tight) var(--ff-font-ui); letter-spacing: var(--ff-tracking-eyebrow); text-transform: uppercase; }
.mode-card__icon { position: absolute; top: var(--ff-space-16); right: var(--ff-space-16); width: 24px; height: 24px; color: var(--ff-action); }
.mode-card__icon svg { stroke-width: 3.2; }
.mode-card__title { margin-top: var(--ff-space-12); font: 700 26px / 1.05 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.mode-card__line { display: -webkit-box; overflow: hidden; color: var(--ff-text-2); font-size: 15px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mode-card__go { position: absolute; right: var(--ff-space-16); bottom: var(--ff-space-16); width: 24px; height: 24px; color: var(--ff-action); }
.mode-card__go svg { stroke-width: 5; }
.bag-spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin: var(--ff-space-8) 0 var(--ff-space-4); }
.bag-spark span { flex: 1; max-width: 14px; height: var(--h); border-radius: 3px 3px 1px 1px; background: rgba(243, 240, 232, .24); }
.bag-spark span[data-own="true"] { background: var(--ff-paper); }

/* The four questions: Caddy radio cards; a trajectory or club glyph where the answer has a shape. */
.module-bag[data-screen="questions"] { padding-top: var(--ff-space-8); }
.bag-display { margin: 0 0 var(--ff-space-8); font: 700 32px / 1.08 var(--ff-font-display); letter-spacing: var(--ff-tracking-display); }
.bag-choice { min-height: 80px; }
.bag-choice--plain { grid-template-columns: 1fr auto; }
.bag-choice--plain .ff-radio-card__title, .bag-choice--plain .ff-radio-card__meta { grid-column: 1; }
.bag-choice--plain .ff-radio-card__value { grid-column: 2; }
.bag-choice__art { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; margin-right: var(--ff-space-4); color: var(--ff-action); }
.bag-choice .ff-radio-card__value { font-variant-numeric: var(--ff-numeric); }

/* Clubs: a bag that holds 14, and every club as a puck. Solid paper is in the bag. */
.bag-capacity { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--ff-space-16); row-gap: var(--ff-space-8); margin: 0 0 var(--ff-space-8); padding: var(--ff-space-16); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); }
.bag-capacity__count { grid-row: 1 / span 2; display: flex; align-items: baseline; font-family: var(--ff-font-display); }
.bag-capacity__count .ff-numeral { font-size: var(--ff-size-44); font-weight: 700; line-height: 1; letter-spacing: var(--ff-tracking-display); }
.bag-capacity__of { margin-left: 2px; color: var(--ff-text-2); font-size: 20px; font-weight: 600; }
.bag-capacity__bar { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.bag-capacity__bar span { height: 10px; border-radius: 3px; background: var(--ff-line); }
.bag-capacity__bar span[data-on="true"] { background: var(--ff-paper); }
.bag-capacity__note { color: var(--ff-text-2); font-size: 13px; font-weight: 600; }
.bag-pucks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ff-space-16) var(--ff-space-8); }
.bag-puck { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 0; font: inherit; color: var(--ff-text-2); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bag-puck__lens { position: relative; display: grid; place-items: center; width: 64px; height: 64px; box-sizing: border-box; color: var(--ff-text-2); background: radial-gradient(circle at 50% 32%, #2c4038 0%, #12231d 62%, #0b1813 100%); border: var(--ff-border-strong) solid var(--ff-line); border-radius: 50%; transition: background-color var(--ff-dur-state) var(--ff-ease-state), border-color var(--ff-dur-state) var(--ff-ease-state), color var(--ff-dur-state) var(--ff-ease-state), transform var(--ff-dur-press) var(--ff-ease-state); }
.bag-puck__glyph { width: 40px; height: 40px; }
.bag-puck__art { display: block; width: 100%; height: 100%; border-radius: 50%; opacity: .42; filter: grayscale(.7); transition: opacity var(--ff-dur-state) var(--ff-ease-state), filter var(--ff-dur-state) var(--ff-ease-state); pointer-events: none; -webkit-user-drag: none; }
.bag-puck[aria-pressed="true"] .bag-puck__art { opacity: 1; filter: none; }
.bag-puck__name { font: var(--ff-weight-strong) var(--ff-size-14) / 1.1 var(--ff-font-ui); white-space: nowrap; }
.bag-puck__sub { margin-top: -2px; color: var(--ff-text-3); font: 600 12px / 1 var(--ff-font-ui); font-variant-numeric: var(--ff-numeric); }
.bag-puck[aria-pressed="true"] { color: var(--ff-paper); }
.bag-puck[aria-pressed="true"] .bag-puck__lens { color: var(--ff-paper); border-color: var(--ff-paper); box-shadow: var(--ff-e1); }
.bag-puck[aria-pressed="true"] .bag-puck__lens::after { content: "✓"; position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--ff-ink); font: 800 12px / 1 var(--ff-font-ui); background: var(--ff-action); border: 2px solid var(--ff-ink); border-radius: 50%; }
.bag-puck[aria-pressed="true"] .bag-puck__sub { color: var(--ff-text-2); }
.bag-puck:active .bag-puck__lens { transform: scale(var(--ff-press-scale)); }
.bag-puck:disabled { opacity: .4; cursor: default; }

/* Carry: one chart. Gridlines every 50 m behind every track, so the knobs read as a staircase. */
.carry-key { flex: none; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; }
.carry-key[data-own="true"] { background: var(--ff-paper); }
.carry-key[data-own="false"] { margin-left: var(--ff-space-12); border: 2px dashed var(--ff-paper); }
.carry-key--gap { display: grid; place-items: center; width: auto; height: auto; margin-left: var(--ff-space-12); color: var(--ff-text-3); font: 700 12px / 1 var(--ff-font-ui); border-radius: 0; }
.carry-ladder { display: grid; grid-template-columns: 14px 48px minmax(0, 1fr) 36px 22px 8px; margin: 0 0 var(--ff-space-16); padding: 0 0 var(--ff-space-8); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); overflow: hidden; }
.carry-lines { position: relative; grid-column: 3; pointer-events: none; }
.carry-lines span { position: absolute; top: 34px; bottom: 0; width: 1px; background: rgba(255, 255, 255, .07); transform: translateX(-.5px); }
.carry-row { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 48px; }
.carry-row > :nth-child(1) { grid-column: 2; }
.carry-row > :nth-child(2) { grid-column: 3; }
.carry-row > :nth-child(3) { grid-column: 4; }
.carry-row > :nth-child(4) { grid-column: 5; }
.carry-row[data-selected="true"] { background: rgba(21, 51, 38, .6); }
.carry-row--head { grid-row: 1; min-height: 34px; color: var(--ff-text-3); font: var(--ff-weight-heavy) 11px / 1 var(--ff-font-ui); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--ff-line); }
.carry-row--head > :nth-child(3), .carry-row--head > :nth-child(4) { text-align: right; }
.carry-scale { position: relative; align-self: stretch; }
.carry-scale span { position: absolute; top: 50%; color: var(--ff-text-3); font-weight: 600; letter-spacing: 0; font-variant-numeric: var(--ff-numeric); transform: translate(-50%, -50%); }
.carry-name { overflow: hidden; color: var(--ff-paper); font: var(--ff-weight-strong) 15px / 1 var(--ff-font-ui); white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.carry-track { display: flex; align-items: center; height: 48px; touch-action: pan-y; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.carry-slider { display: block; width: 100%; height: 26px; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.carry-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: var(--ff-line); }
.carry-slider::-moz-range-track { height: 2px; border-radius: 1px; background: var(--ff-line); }
.carry-slider::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: var(--ff-ink); border: 2px dashed var(--ff-paper); }
.carry-slider::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: var(--ff-ink); border: 2px dashed var(--ff-paper); }
.carry-row[data-own="true"] .carry-slider::-webkit-slider-thumb { background: var(--ff-paper); border-style: solid; }
.carry-row[data-own="true"] .carry-slider::-moz-range-thumb { background: var(--ff-paper); border-style: solid; }
.carry-row[data-selected="true"] .carry-slider::-webkit-slider-thumb { box-shadow: var(--ff-select-ring); }
.carry-row[data-selected="true"] .carry-slider::-moz-range-thumb { box-shadow: var(--ff-select-ring); }
.carry-slider:focus-visible { outline: var(--ff-focus-width) solid var(--ff-focus); outline-offset: 4px; }
.carry-num { color: var(--ff-text-2); font-size: 18px; text-align: right; cursor: pointer; }
.carry-row[data-own="true"] .carry-num { color: var(--ff-paper); font-weight: 800; }
.carry-gap { position: relative; z-index: 1; color: var(--ff-text-3); font: 700 12px / 1 var(--ff-font-ui); font-variant-numeric: var(--ff-numeric); text-align: right; transform: translateY(24px); }
.carry-gap[data-state="tight"], .carry-gap[data-state="wide"] { color: var(--ff-warn); }
.carry-gap[data-state="overlap"] { color: var(--ff-danger); }
.carry-fine { position: sticky; bottom: 0; z-index: var(--ff-z-hud); margin: var(--ff-space-8) -20px 0; padding: var(--ff-space-12) 20px max(var(--ff-space-12), var(--ff-safe-bottom)); background: var(--ff-scrim); -webkit-backdrop-filter: blur(var(--ff-blur)); backdrop-filter: blur(var(--ff-blur)); border-top: var(--ff-border) solid var(--ff-line); }
.carry-fine__read { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.carry-fine__name { color: var(--ff-text-2); }
.carry-fine__figure { display: flex; align-items: baseline; gap: var(--ff-space-4); }
.carry-fine__value { font-size: 40px; }
.carry-fine__unit { color: var(--ff-text-2); font: var(--ff-weight-strong) var(--ff-size-16) / 1 var(--ff-font-ui); }
.carry-fine__note { color: var(--ff-text-3); font: var(--ff-weight-strong) 12px / 1.2 var(--ff-font-ui); letter-spacing: .04em; }
.carry-fine__note[data-own="true"] { color: var(--ff-text-2); }
.carry-fine__note[data-warn="true"] { color: var(--ff-warn); }

/* Your game: one Caddy segmented control per part of the game. */
.bag-rating { padding: var(--ff-space-16) 0; border-top: var(--ff-border) solid var(--ff-line); }
.bag-rating__head { display: flex; align-items: center; gap: var(--ff-space-12); margin-bottom: var(--ff-space-12); }
.bag-rating__lens { flex: none; width: 40px; height: 40px; overflow: hidden; background: radial-gradient(circle at 50% 32%, #2c4038 0%, #12231d 62%, #0b1813 100%); border: var(--ff-border) solid var(--ff-line-control); border-radius: 50%; }
.bag-rating__lens .bag-puck__art { opacity: 1; filter: none; }
.bag-rating__title { flex: 1; }
.bag-rating__title { font: 700 20px / 1.1 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.bag-rating__word { color: var(--ff-text-3); font-size: var(--ff-size-14); font-weight: 600; }
.bag-rating__word[data-rated="true"] { color: var(--ff-action); font-weight: 700; }
.holes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: var(--ff-backdrop); }
.sheet-body { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; background: var(--ff-ink); border: 1px solid var(--ff-line); border-radius: 20px 20px 0 0; padding: 16px 20px max(20px, env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { margin: 0; font-size: 20px; }
.danger { color: var(--ff-danger); }
.details { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; color: var(--ff-text-2); margin: 8px 0 0; }
.details dd { margin: 0; word-break: break-all; font-family: ui-monospace, monospace; }

/* The account page (Brick 0.6), a player cockpit built from the design system: the plate (opaque surface with Home's lime
   rule) with its big figures, the fill-cta, and the numbered mode-cards, each with its own design (screens/account/cards.js).
   Layout only; the figures, status marks, avatars and reach rings are components in ff-components.css. No box sits inside a card. */
.initial--lg { width: var(--ff-space-48); height: var(--ff-space-48); margin-bottom: var(--ff-space-12); font-size: var(--ff-size-20); }
.acct-plate { display: grid; gap: var(--ff-space-16); padding: var(--ff-space-16); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line-control); border-left: 3px solid var(--ff-action); border-radius: var(--ff-radius-16); }
.acct-plate__id { display: flex; align-items: center; gap: var(--ff-space-16); min-width: 0; }
.acct-plate .initial--lg { margin: 0; }
.acct-plate__who { min-width: 0; flex: 1; }
.acct-plate .kicker-lime { margin: 0 0 var(--ff-space-4); }
.acct-plate__name { margin: 0; overflow: hidden; color: var(--ff-paper); font: 700 var(--ff-size-20) / var(--ff-leading-tight) var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); text-overflow: ellipsis; white-space: nowrap; }
.acct-plate__meta { margin: var(--ff-space-4) 0 0; color: var(--ff-text-2); font-size: var(--ff-size-14); }
.acct-figs { padding-top: var(--ff-space-4); }
/* A card with its own design (account page): the content runs the card's full width; the title and the line keep clear of the icon and the go arrow. */
.mode-card--bespoke { gap: var(--ff-space-12); padding-right: var(--ff-space-16); }
.mode-card--bespoke .mode-card__title { margin-top: var(--ff-space-4); padding-right: var(--ff-space-48); }
.mode-card--bespoke .mode-card__line { margin-right: var(--ff-space-48); }
.acct-art__glyph svg, .acct-player__glyph svg, .acct-reach__glyph svg, .acct-club__glyph svg { display: block; width: 100%; height: 100%; }
/* 01 Profile: the player card. */
.acct-profile { display: grid; gap: var(--ff-space-16); min-width: 0; }
.acct-player { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--ff-space-16); }
.acct-art { position: relative; display: block; width: 96px; height: 96px; overflow: hidden; border-radius: var(--ff-radius-16); }
.acct-art.course-art--plain { background-color: var(--ff-surface-raised); }
.acct-art--glyph { display: grid; place-items: center; background: var(--ff-surface-raised); }
.acct-art__glyph { display: block; width: 68px; height: 68px; color: var(--ff-text-2); }
.acct-art__glyph path { fill: color-mix(in srgb, var(--ff-paper) 10%, transparent); }
.acct-art .course-art__initials { font-size: 40px; }
.acct-player__who { display: grid; gap: var(--ff-space-8); min-width: 0; }
.acct-player__name { overflow: hidden; font: 700 var(--ff-size-24) / var(--ff-leading-tight) var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); text-overflow: ellipsis; white-space: nowrap; }
.acct-player__line { display: flex; align-items: center; gap: var(--ff-space-8); min-width: 0; overflow: hidden; color: var(--ff-text-2); font-size: var(--ff-size-16); text-overflow: ellipsis; white-space: nowrap; }
.acct-player__line--blank { color: var(--ff-text-3); }
.acct-player__glyph { flex: none; width: 18px; height: 18px; color: var(--ff-action); }
.acct-invite { margin: 0; color: var(--ff-text-2); font: var(--ff-weight-strong) var(--ff-size-16) / var(--ff-leading-body) var(--ff-font-ui); }
/* 02 Privacy: the reach rings and three lines. */
.acct-reach { display: grid; gap: var(--ff-space-12); }
.acct-reach__lines { display: grid; gap: var(--ff-space-12); margin: 0; padding: 0; list-style: none; }
.acct-reach__line { display: flex; align-items: center; gap: var(--ff-space-12); font-size: var(--ff-size-16); }
.acct-reach__glyph { flex: none; width: 24px; height: 24px; color: var(--ff-text-2); }
.acct-reach__line[data-line=score] .acct-reach__glyph { color: var(--ff-reach-score); }
.acct-reach__line[data-line=messages] .acct-reach__glyph { color: var(--ff-reach-contact); }
.acct-key { color: var(--ff-text-2); }
/* 03 My Bag and 04's recent rounds: strips that scroll sideways and bleed to the card's edge. */
.acct-strip, .acct-recent { display: flex; gap: var(--ff-space-16); margin: 0 calc(-1 * var(--ff-space-16)); padding: var(--ff-space-4) var(--ff-space-16) 0; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--ff-space-16); scrollbar-width: none; }
.acct-strip::-webkit-scrollbar, .acct-recent::-webkit-scrollbar { display: none; }
.acct-club { display: grid; flex: none; justify-items: center; gap: var(--ff-space-4); width: 76px; scroll-snap-align: start; }
.acct-club__art { display: block; width: 76px; height: 76px; object-fit: contain; }
.acct-club__glyph { display: block; width: 48px; height: 48px; margin: var(--ff-space-12) 0; color: var(--ff-text-2); }
.acct-club__name { color: var(--ff-text-2); font: var(--ff-weight-strong) var(--ff-size-14) / 1 var(--ff-font-ui); white-space: nowrap; }
.acct-club__carry { color: var(--ff-paper); font-size: var(--ff-size-24); line-height: 1; }
.acct-club__unit { margin-left: 2px; color: var(--ff-text-2); font-size: var(--ff-size-14); font-style: normal; }
/* 04 Golf Link: the record. */
.acct-link { display: grid; gap: var(--ff-space-16); min-width: 0; }
.acct-latest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ff-space-12); }
.acct-latest .club-date { width: 56px; }
.acct-latest .club-hero__name { margin: 0; font-size: var(--ff-size-20); }
.acct-latest .club-hero__value { font-size: 52px; }
.acct-recent { align-items: flex-end; gap: var(--ff-space-24); }
.acct-recent__one { display: grid; flex: none; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: var(--ff-space-4); scroll-snap-align: start; }
.acct-recent__value { color: var(--ff-paper); font-size: var(--ff-size-32); line-height: 1; }
.acct-recent__one[data-latest=true] .acct-recent__value { color: var(--ff-action); }
.acct-recent__unit { color: var(--ff-text-2); font: var(--ff-weight-strong) var(--ff-size-12) / 1 var(--ff-font-ui); }
.acct-recent__day { grid-column: 1 / -1; margin-top: var(--ff-space-4); color: var(--ff-text-2); font: var(--ff-weight-strong) var(--ff-size-14) / 1 var(--ff-font-ui); white-space: nowrap; }
.acct-recent-block { display: grid; gap: var(--ff-space-8); min-width: 0; }
.acct-steps { display: grid; gap: var(--ff-space-12); margin: 0; padding: 0; list-style: none; }
.acct-steps li { display: flex; align-items: baseline; gap: var(--ff-space-12); font-size: var(--ff-size-16); }
.acct-steps__n { width: var(--ff-space-16); color: var(--ff-action); font-size: var(--ff-size-24); }
/* 05 This device and 06 About. */
.acct-device { display: grid; gap: var(--ff-space-12); }
.acct-device__who { display: flex; align-items: center; gap: var(--ff-space-16); font-size: var(--ff-size-16); }
.acct-about-card { display: grid; justify-items: start; gap: var(--ff-space-8); }
.acct-brand { font-size: var(--ff-size-24); }
.acct-brand .brand__mark { width: 40px; height: 40px; border-radius: var(--ff-radius-12); }
.acct-build { color: var(--ff-text-2); font: var(--ff-weight-strong) var(--ff-size-14) / 1 var(--ff-font-mono); letter-spacing: 0.04em; }
.acct-start { display: grid; gap: var(--ff-space-8); }
.acct-start .ff-progress { margin: 0 0 var(--ff-space-8); }
.ff-list-row__trailing .ff-icon { display: block; }
.ff-list-row__trailing .ff-icon svg { display: block; width: 100%; height: 100%; }
.acct-head { margin: var(--ff-space-24) 0 var(--ff-space-4) var(--ff-space-4); }
.acct-head-row { align-items: baseline; margin: var(--ff-space-24) var(--ff-space-4) var(--ff-space-4); }
.acct-head-row .acct-head { margin: 0; }
/* Profile and Privacy pages (Brick 0.9): layout only; the controls are the design system's chips, segmented controls, radio cards, list rows and search field. */
.acct-field { display: grid; gap: var(--ff-space-8); }
.acct-field > .acct-head { margin-bottom: 0; }
.acct-note { margin: 0 var(--ff-space-4); color: var(--ff-text-2); font-size: var(--ff-size-14); }
.acct-status { min-height: 1.5em; margin: var(--ff-space-8) var(--ff-space-4) 0; color: var(--ff-text-2); font-size: var(--ff-size-14); }
.acct-status[data-state=error] { color: var(--ff-paper); font-weight: var(--ff-weight-strong); }
.oc-pick.acct-pick { margin: 0; padding: 0; max-width: none; }
.acct-about { margin: 0; padding: var(--ff-space-16); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); font-size: var(--ff-size-14); }

/* Admin (Brick 0.11): layout only. The controls are the design system's: surfaces, buttons, list rows, search field, sheet, notices and blocks; the code field is its text entry. */
.adm { display: grid; gap: var(--ff-space-16); align-content: start; padding-bottom: var(--ff-space-32); }
.adm-gate, .adm-players, .adm-player { display: grid; gap: var(--ff-space-12); }
.adm-gate__title { margin: 0; font: var(--ff-weight-display) var(--ff-size-24) / var(--ff-leading-tight) var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.adm-gate__line, .adm-note { margin: 0; color: var(--ff-text-2); font-size: var(--ff-size-16); }
.adm-note { font-size: var(--ff-size-14); }
.adm-key, .adm-details { display: grid; gap: var(--ff-space-12); }
.adm-key__text { margin: 0; font: var(--ff-weight-strong) var(--ff-size-16) / var(--ff-leading-body) var(--ff-font-mono); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.adm-key__text--link { font-size: var(--ff-size-14); }
.adm-actions { display: grid; gap: var(--ff-touch-gap); }
.adm-actions .ff-button { width: 100%; }
.adm-copied { margin: 0; color: var(--ff-text-2); font-size: var(--ff-size-14); }
.adm-copied:empty { margin-top: calc(-1 * var(--ff-space-12)); } /* an empty status takes no row; the grid gap would otherwise leave one */
.adm-code { text-align: center; font: var(--ff-weight-display) var(--ff-size-24) / var(--ff-leading-tight) var(--ff-font-figure); font-variant-numeric: tabular-nums; letter-spacing: var(--ff-space-8); }
.adm-code::placeholder { letter-spacing: var(--ff-space-8); }
.adm-details__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--ff-space-8) var(--ff-space-16); }
.adm-details__list dd { margin: 0; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.adm-notice:empty { display: none; }
.adm-count { margin: var(--ff-space-8) var(--ff-space-4) 0; }
.adm-count + .ff-list { margin-top: calc(-1 * var(--ff-space-8)); }
.adm-player__email { margin: 0; font: var(--ff-weight-strong) var(--ff-size-20) / var(--ff-leading-tight) var(--ff-font-ui); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.adm-field { display: grid; gap: var(--ff-space-8); margin-bottom: var(--ff-space-16); }
.adm-none { margin: var(--ff-space-16) var(--ff-space-4); }
.adm-wait { display: grid; justify-items: center; padding: var(--ff-space-32) 0; }

/* Home's Getting started card (Brick 0.7): the primary call to action, with its Skip under it. */
.gs-lead { display: grid; justify-items: end; margin-bottom: var(--ff-space-4); }
.gs-lead .fill-cta { margin-bottom: var(--ff-space-4); }
.gs-lead__skip { min-height: var(--ff-touch-primary); }
.fill-cta__icon { display: block; width: 44px; height: 44px; color: var(--ff-ink); }
.fill-cta__icon svg { display: block; width: 100%; height: 100%; }
.recovery-copies { display: grid; gap: 12px; margin: 16px 0; }
.recovery-copy h4 { margin-top: 0; }
.recovery-copy li { margin: 6px 0; }
.recovery-copy button { width: 100%; }
.recovery-data { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
/* Golf Link (Brick 8): number and name, then one question with four big score choices. */
.golfer-link-content form { display: grid; gap: 16px; margin: 18px 0; }
.module-golfer-link .ff-button { width: 100%; }
.golfer-link-question, .golfer-link-done { display: grid; gap: var(--ff-space-16); margin: 18px 0; }
.golfer-link-question .ff-eyebrow { margin: 0; color: var(--ff-text-2); }
.golfer-link-question h2, .golfer-link-done h2 { margin: 0; font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
.golfer-link-done p { margin: 0; }
.golfer-link-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: var(--ff-space-8) 0; }
.golfer-link-choice { min-height: 88px; padding: 12px; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line-control); border-radius: 16px; cursor: pointer;
  font-family: var(--ff-font-figure); font-style: italic; font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.golfer-link-choice:hover:not(:disabled), .golfer-link-choice:focus-visible { border-color: var(--ff-action); }
.golfer-link-choice:active:not(:disabled) { transform: scale(.97); }
.golfer-link-choice:disabled { opacity: .5; cursor: default; }

/* My Club (Brick 7.2): FairwayFinda's own chrome, showing the golfer's club. The club is
   content, shown by its crest and name, never by its colours. */
/* The crest: the club's mark on a paper disc, the way a club badge sits on a card. */
.club-crest { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ff-paper); box-shadow: 0 0 0 3px var(--ff-surface-raised); }
.club-crest img { display: block; width: 50%; height: auto; }
.club-crest--sm { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--ff-surface-raised); }
/* On Home the crest takes the corner a module tile gives its icon. */
.club-tile__crest { position: absolute; top: 12px; right: 12px; }
/* Until its line is decided the card waits, quietly: it cannot be tapped yet. */
.club-tile[aria-busy="true"] { cursor: progress; }
.club-tile[aria-busy="true"] .mode-card__line { color: var(--ff-text-2); }

/* The club page: the club's crest and name, then one card per section. */
.club-id { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--ff-space-16); margin: var(--ff-space-8) 0 var(--ff-space-24); }
.club-id .club-crest { width: 64px; height: 64px; }
.club-id__text { display: grid; gap: var(--ff-space-8); min-width: 0; }
.club-id__name { margin: 0; font: 700 32px / 1 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.club-id__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ff-space-8) var(--ff-space-12); margin: 0; color: var(--ff-text-2); font-size: var(--ff-size-14); font-weight: 600; }
.club-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; color: var(--ff-paper); background: var(--ff-surface-raised); border-radius: var(--ff-radius-pill); font: 800 12px / 1 var(--ff-font-ui); letter-spacing: .03em; }
.club-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ff-action); }
.club-status[data-linked="false"] .club-status__dot { background: var(--ff-warn); }
.club-sync { display: flex; align-items: center; gap: var(--ff-space-8); margin: 0 0 var(--ff-space-12); color: var(--ff-text-2); font-size: var(--ff-size-14); }
.club-sync[data-warn="true"] { color: var(--ff-warn); }
.club-sync .ff-spinner { width: 16px; height: 16px; }
a.mode-card { text-decoration: none; }
.club-mode--locked .mode-card__title { color: var(--ff-text-2); }
.club-mode--locked .mode-card__icon { color: var(--ff-text-3); }

/* Tee times: the next one big, then every round as a dated row with the group. */
.club-next { margin: var(--ff-space-8) 0 var(--ff-space-24); padding: var(--ff-space-24) var(--ff-space-16) var(--ff-space-16); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-left: 3px solid var(--ff-action); border-radius: var(--ff-radius-16); }
.club-next__day { margin: 0; font: 700 17px / 1.2 var(--ff-font-ui); }
.club-next__time { margin: var(--ff-space-4) 0 0; }
.club-next__time .ff-numeral { font: 700 64px / 1 var(--ff-font-display); letter-spacing: var(--ff-tracking-display); }
.club-next__where { margin: var(--ff-space-8) 0 0; color: var(--ff-text-2); }
.club-next__none { margin: var(--ff-space-4) 0 0; font: 700 28px / 1.1 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.club-asof { margin: var(--ff-space-8) 0 0; color: var(--ff-text-2); font-size: var(--ff-size-14); font-weight: 600; }
.club-asof[data-old="true"] { color: var(--ff-warn); }
.club-partners { display: flex; flex-wrap: wrap; gap: var(--ff-space-8); margin: var(--ff-space-16) 0 0; padding: 0; list-style: none; }
.club-partners li { display: inline-flex; align-items: center; gap: var(--ff-space-8); padding: 4px 12px 4px 4px; background: var(--ff-surface-raised); border-radius: var(--ff-radius-pill); font-size: var(--ff-size-14); font-weight: 600; }
.club-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ff-ink); background: var(--ff-paper); font: 800 11px / 1 var(--ff-font-ui); }
.club-section-head { margin: var(--ff-space-24) 0 var(--ff-space-12); }
.club-tee-list { margin: 0; padding: 0; overflow: hidden; list-style: none; background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); }
.club-tee-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px var(--ff-space-16); }
.club-tee-row + .club-tee-row { border-top: var(--ff-border) solid var(--ff-line); }
.club-date { display: grid; justify-items: center; padding: 8px 0 7px; background: var(--ff-surface-raised); border-radius: var(--ff-radius-12); }
.club-date__day { font: 700 22px / 1 var(--ff-font-display); font-variant-numeric: var(--ff-numeric); }
.club-date__month { margin-top: 4px; color: var(--ff-action); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .08em; }
.club-tee-row__body { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.club-tee-row__title { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.club-tee-row__meta { color: var(--ff-text-2); font-size: var(--ff-size-14); font-variant-numeric: var(--ff-numeric); }
.club-tee-row .club-partners { gap: 6px; margin-top: var(--ff-space-8); }
.club-tee-row .club-partners li { gap: 6px; padding: 2px 10px 2px 2px; font-size: 13px; white-space: nowrap; }
.club-tee-row .club-avatar { width: 24px; height: 24px; font-size: 10px; }
.club-tee-row:has(.club-tee-row__open) { display: block; padding: 0; }
.club-tee-row__open { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: start; gap: 14px; width: 100%; padding: 14px var(--ff-space-16); font: inherit; text-align: left; color: var(--ff-paper); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.club-tee-row__open:active { background: var(--ff-surface-raised); }
.club-tee-row__chev { align-self: center; width: 20px; height: 20px; color: var(--ff-text-3); }
.club-tee-row[data-focus="true"] { animation: club-focus 1.6s ease-out; }
@keyframes club-focus { 0%, 40% { background: var(--ff-surface-raised); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .club-tee-row[data-focus="true"] { animation: none; background: var(--ff-surface-raised); } }
/* The group, as faces: initials on a round card; with names on the scorecard. */
.club-avatars { display: inline-flex; gap: 4px; margin-top: 8px; }
.club-avatars .club-avatar { width: 24px; height: 24px; font-size: 10px; }
.club-group { display: grid; gap: 0; width: 100%; margin: var(--ff-space-16) 0 0; padding: 12px var(--ff-space-16) 14px; font: inherit; text-align: left; color: var(--ff-paper); background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); }
.club-group--link { grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: var(--ff-space-12); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.club-group--link > :not(.club-group__chev) { grid-column: 1; }
.club-group--link:active { background: var(--ff-surface-raised); }
.club-group__chev { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--ff-text-3); }
.club-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ff-space-12); }
.club-group__label { margin: 0; }
.club-group__when { color: var(--ff-text-2); font-size: 13px; font-variant-numeric: var(--ff-numeric); }
.club-group .club-partners { margin-top: 10px; }
.club-group .club-partners li { white-space: nowrap; }

/* My Scores: round cards laid out like the tour's own scorecards, each opening a
   two-nine scorecard drawn with the app's score marks. */
.club-scores-head { display: flex; align-items: center; gap: var(--ff-space-12); margin: var(--ff-space-4) 0 var(--ff-space-16); }
.club-scores-head__count { font: 700 32px / 1 var(--ff-font-display); }
.club-scores-head__label { color: var(--ff-text-2); font-weight: 600; }
.club-rounds { display: grid; gap: var(--ff-space-12); margin: 0 0 var(--ff-space-24); padding: 0; list-style: none; }
.club-round { overflow: hidden; background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); }
.club-round__head { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: var(--ff-space-12); width: 100%; padding: 14px var(--ff-space-16); font: inherit; text-align: left; color: var(--ff-paper); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
div.club-round__head { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.club-round__text { display: grid; gap: 3px; min-width: 0; }
.club-round__name { font-size: 16px; font-weight: 650; line-height: 1.25; }
.club-round__meta { color: var(--ff-text-2); font-size: 13px; }
.club-round__finish { color: var(--ff-text-2); font-size: 13px; font-weight: 500; }
.club-round__finish[data-ranked="false"] { color: var(--ff-text-3); }
.club-round__score { display: grid; justify-items: end; }
.club-round__value { color: var(--ff-paper); font-size: 30px; }
.club-round__unit { margin-top: 4px; color: var(--ff-text-3); font: 400 12px / 1 var(--ff-font-ui); }
.club-round__chev { width: 20px; height: 20px; color: var(--ff-text-3); }
.club-round__chev svg { stroke-width: 3.5; }
/* The scorecard: FairwayFinda's round card. A summary strip in light figures, the round's tally by
   result, then the card itself — gross first, par, points — with the nines' sums shaded and the
   total darker still. Results keep the card's marks: circles under par, squares over. */
.club-sc-strip { display: flex; align-items: stretch; margin: 0; padding: 14px 0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .05); border-radius: 12px; }
.club-sc-stat { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.club-sc-stat + .club-sc-stat { border-left: 1px solid rgba(255, 255, 255, .1); }
.club-sc-stat[data-kind="date"] { flex: 0 0 auto; }
.club-sc-stat dt { margin-bottom: 8px; color: var(--ff-text-3); font: 600 9px / 1 var(--ff-font-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.club-sc-stat dd { display: grid; margin: 0; overflow: hidden; color: var(--ff-paper); font: 300 18px / 1.15 var(--ff-font-ui); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.club-sc-stat__year { color: var(--ff-text-2); }
.club-sc-stat[data-kind="under"] dd { color: #34d399; }
.club-sc-stat[data-kind="over"] dd { color: #fb7185; }
.club-sc-tally { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: var(--ff-space-12) 0 0; padding: 12px 6px; list-style: none; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .05); border-radius: 16px; }
.club-sc-tally li { display: grid; justify-items: center; gap: 7px; }
.club-sc-tally li[data-none="true"] { opacity: .38; }
.club-sc-tally__label { color: var(--ff-text-2); font: 500 11px / 1.2 var(--ff-font-ui); text-align: center; }
.club-sc-card { margin: var(--ff-space-12) 0 0; overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; }
.club-sc { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.club-sc + .club-sc { border-top: 1px solid rgba(255, 255, 255, .1); }
.club-sc th, .club-sc td { padding: 0; text-align: center; font: 400 14px / 1 var(--ff-font-ui); }
.club-sc thead th { height: 34px; color: var(--ff-text-3); font: 700 10px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.club-sc tbody tr + tr > * { border-top: 1px solid rgba(255, 255, 255, .05); }
.club-sc .club-sc__label { width: 50px; padding-left: 12px; text-align: left; }
.club-sc tbody .club-sc__label { color: var(--ff-text-2); font: 600 12px / 1 var(--ff-font-ui); }
.club-sc .club-sc__sum { width: 38px; color: var(--ff-paper); font-weight: 500; background: rgba(255, 255, 255, .05); }
.club-sc thead .club-sc__sum { color: var(--ff-paper); }
.club-sc__gross td { height: 42px; color: var(--ff-text-2); }
.club-sc__par td { height: 36px; color: var(--ff-text-2); }
.club-sc__par .club-sc__sum { color: var(--ff-text-2); }
.club-sc__pts td { height: 36px; color: var(--ff-text-3); font-size: 13px; }
.club-sc__pts .club-sc__sum { color: var(--ff-text-2); }
/* The card's printed length (metres) and stroke index for the tee played (Brick 3.4); never summed. */
.club-sc__printed td { height: 30px; color: var(--ff-text-3); font-size: 12px; }
.club-sc-total { display: grid; grid-template-columns: 50px repeat(auto-fit, minmax(0, 1fr)); align-items: center; min-height: 54px; background: rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, .1); }
.club-sc-total__label { padding-left: 12px; color: var(--ff-paper); font: 700 10px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.club-sc-total__cell { display: grid; justify-items: center; gap: 5px; }
.club-sc-total__key { color: var(--ff-text-3); font: 700 9px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.club-sc-total__value { color: var(--ff-paper); font: 500 17px / 1 var(--ff-font-ui); font-variant-numeric: tabular-nums; }
/* The score marks (.club-mark) are the Score mark component in ff-components.css. */

/* The round card's big figures (Brick 7.3): heavy italic, as FairwayFinda's round card sets its
   hole, par and distance. */
.club-fig { font-family: var(--ff-font-figure); font-style: italic; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

/* My Scores leads the club page: the latest round as the hero, then the way into its card. */
.club-hero { margin: 0 0 var(--ff-space-12); overflow: hidden; background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line-control); border-radius: var(--ff-radius-16); }
.club-hero__lead { display: grid; gap: var(--ff-space-12); width: 100%; padding: var(--ff-space-16) var(--ff-space-16) var(--ff-space-12); font: inherit; text-align: left; color: var(--ff-paper); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.club-hero__lead .mode-card__eyebrow { color: var(--ff-action); }
.club-hero__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ff-space-12); }
.club-hero__text { display: grid; gap: 4px; min-width: 0; }
.club-hero__kicker { color: var(--ff-text-3); font: 700 11px / 1 var(--ff-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.club-hero__name { margin-top: 2px; font: 700 22px / 1.12 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.club-hero__meta { color: var(--ff-text-2); font-size: 14px; }
.club-hero__finish { color: var(--ff-paper); font-size: 14px; font-weight: 700; }
.club-hero__finish[data-ranked="false"] { color: var(--ff-text-3); font-weight: 500; }
.club-hero__score { display: grid; justify-items: end; }
.club-hero__value { color: var(--ff-paper); font-size: 64px; line-height: .9; padding-right: 4px; }
.club-hero__unit { margin-top: 6px; color: var(--ff-text-2); font: 600 12px / 1 var(--ff-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.club-hero__spark { height: 32px; margin: 0; }
.club-hero__spark span[data-last="true"] { background: var(--ff-action); }
.club-hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ff-space-8); padding: 0 var(--ff-space-16) var(--ff-space-16); }
.club-hero__actions > :only-child { grid-column: 1 / -1; }
.club-hero__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.club-hero__go-icon { width: 18px; height: 18px; }
.club-hero__go-icon svg { stroke-width: 4.5; }

/* One round: its title, then the card. */
.club-round-title { margin: var(--ff-space-4) 0 var(--ff-space-16); }
.club-round-title__name { margin: 0; font: 700 26px / 1.1 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.club-round-title__meta { margin: var(--ff-space-8) 0 0; color: var(--ff-text-2); font-size: 14px; }
.club-round-title__finish { display: inline-block; margin: var(--ff-space-12) 0 0; padding: 5px 12px; color: var(--ff-paper); background: var(--ff-surface-raised); border-radius: var(--ff-radius-pill); font: 700 13px / 1 var(--ff-font-ui); }
.club-round-title__finish[data-ranked="false"] { color: var(--ff-text-2); }
.club-sc-wrap { margin-bottom: var(--ff-space-24); }
.club-sc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ff-space-12); margin: var(--ff-space-24) 0 var(--ff-space-12); }
.club-sc-bar__title { margin: 0; }
.club-sc-toggle { display: inline-grid; padding: 3px; }
.club-sc-toggle__option { display: grid; place-items: center; min-width: 52px; min-height: 40px; padding: 0 var(--ff-space-12); }
.club-sc-toggle__icon { width: 20px; height: 20px; }
.club-sc-toggle__icon svg { stroke-width: 3.5; }
.club-sc-card { margin: 0; }
.club-sc__hole { width: 100%; height: 100%; min-height: 34px; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.club-sc td[data-hole] { cursor: pointer; }

/* Hole by hole: a hole to a row, each opening its page. */
.club-vc { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.club-vc th, .club-vc td { padding: 0; text-align: center; font: 400 16px / 1 var(--ff-font-ui); }
.club-vc thead th { height: 38px; color: var(--ff-text-3); font: 700 10px / 1 var(--ff-font-ui); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.club-vc thead th:last-child, .club-vc__go { width: 36px; }
.club-vc__hole { height: 50px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ff-dur-press) var(--ff-ease-state); }
.club-vc__hole + .club-vc__hole > * { border-top: 1px solid rgba(255, 255, 255, .05); }
.club-vc__hole:active, .club-vc__hole:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.club-vc__no { color: var(--ff-paper); font-weight: 600 !important; }
.club-vc__par { color: var(--ff-text-2); }
.club-vc__pts { color: var(--ff-text-2); }
/* Under the hole number its printed stroke index, under par its printed length (Brick 3.4). */
.club-vc__printed { display: block; margin-top: 4px; color: var(--ff-text-3); font: 600 11px / 1 var(--ff-font-ui); letter-spacing: .01em; white-space: nowrap; }
/* Narrow phones with the fact columns: the sub-lines take the 9px of that layout's headers. */
@media (max-width: 374px) { .club-vc--facts .club-vc__printed { font-size: 9px; letter-spacing: 0; } }
.club-vc__chev { display: inline-block; width: 16px; height: 16px; color: var(--ff-text-3); vertical-align: middle; }
.club-vc__chev svg { stroke-width: 4; }
.club-vc__sum > * { height: 44px; color: var(--ff-paper); font-weight: 500 !important; background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.club-vc__sum th { font: 700 11px / 1 var(--ff-font-ui) !important; letter-spacing: .1em; text-transform: uppercase; }
.club-vc__sum--total > * { height: 54px; background: rgba(255, 255, 255, .1); border-bottom: 0; }
.club-vc__sum--total .club-vc__score { font-size: 19px; }

/* One hole (Brick 7.3): the figures, the score, the round to step through, the golfer's other
   scores on this hole. */
.club-hole-avg { display: grid; gap: var(--ff-space-8); margin-bottom: var(--ff-space-12); }
.club-hole-avg .club-section-head { margin-bottom: 0; }
.club-hole-avg__line { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.club-hole-avg__value { color: var(--ff-paper); font-size: 30px; line-height: 1; }
.club-hole-avg__label { color: var(--ff-text-2); font: 600 13px / 1.2 var(--ff-font-ui); }
.club-hole-before li[data-now="true"] .club-hole-before__name { color: var(--ff-paper); font-weight: 700; }
.club-hole-before { margin: 0; padding: 0; overflow: hidden; list-style: none; background: var(--ff-surface); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-16); }
.club-hole-before li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 48px; align-items: center; gap: var(--ff-space-12); min-height: 52px; padding: 0 var(--ff-space-16); }
.club-hole-before li + li { border-top: 1px solid var(--ff-line); }
.club-hole-before__day { color: var(--ff-paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.club-hole-before__name { overflow: hidden; color: var(--ff-text-2); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.club-hole-before__pts { color: var(--ff-text-2); font-size: 14px; text-align: right; }
/* On a phone the nines run edge to edge, so each hole keeps its breathing room. */
@media (max-width: 560px) {
  .club-sc-card--nines { margin: 0 -20px; border-right: 0; border-left: 0; border-radius: 0; }
  .club-sc-card--nines .club-sc__label { width: 54px; padding-left: 20px; }
  .club-sc-card--nines .club-sc__sum { width: 42px; }
  .club-sc-card--nines .club-sc-total { grid-template-columns: 54px repeat(auto-fit, minmax(0, 1fr)); }
  .club-sc-card--nines .club-sc-total__label { padding-left: 20px; }
}
.club-sc-card--nines .club-sc__gross td { height: 46px; }
.club-sc-stat[data-kind="date"] dd { display: flex; gap: 5px; }
.club-hero__actions .ff-button { padding-inline: var(--ff-space-12); white-space: nowrap; }

/* Fill in your round (Brick 7.4). No fields: the hole is the surface and the golfer moves targets
   on it. Caddy's marker language: a dashed hollow disc is an estimate, solid paper is the golfer's,
   gold is the one thing being moved. Distances and counts in the fat figure font. */
.fill-cta { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: var(--ff-space-12); width: 100%; margin: 0 0 var(--ff-space-12); padding: var(--ff-space-12) var(--ff-space-16); font: inherit; text-align: left; color: var(--ff-ink); background: var(--ff-action); border: 0; border-radius: var(--ff-radius-16); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.fill-cta:active { transform: scale(var(--ff-press-scale)); background: var(--ff-action-press); }
.club-hero .fill-cta { width: auto; margin: 0 var(--ff-space-16) var(--ff-space-12); }
.fill-cta__text { display: grid; gap: 3px; min-width: 0; }
.fill-cta__title { font: 800 17px / 1.15 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.fill-cta__meta { overflow: hidden; font: 600 13px / 1.2 var(--ff-font-ui); text-overflow: ellipsis; white-space: nowrap; opacity: .78; }
.fill-cta__go { width: 22px; height: 22px; }
.fill-cta__go svg { stroke-width: 4.5; }
.fill-ring { display: inline-block; width: 22px; height: 22px; color: var(--ff-paper); }
.fill-ring svg { display: block; width: 100%; height: 100%; fill: none; }
.fill-ring__track { stroke: currentColor; stroke-opacity: .22; stroke-width: 3; }
.fill-ring__arc { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.fill-ring__check { stroke: var(--ff-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fill-ring[data-complete="true"] .fill-ring__track { fill: var(--ff-paper); stroke-opacity: 1; }
.fill-cta__ring { width: 44px; height: 44px; color: var(--ff-ink); }
.club-round__head:has(.club-round__ring) { grid-template-columns: minmax(0, 1fr) auto 22px 20px; }
.club-round__ring { color: var(--ff-action); }

/* The fill-in page: the hole fills the screen; its number, par and score sit small over it. */
.fill-host { margin: 0 -20px; }
#view-module:has(.fill) .module-head { margin: var(--ff-space-8) 0 var(--ff-space-4); }
#view-module:has(.fill) .module-head #module-title, .module-head--hole #module-title { font: 700 17px / 1.2 var(--ff-font-ui) !important; letter-spacing: 0 !important; }
#view-module:has(.fill) .module-head .ff-icon-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.fill { display: flex; flex-direction: column; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* The golfer's facts on the scorecard and the hole page. */
.club-sc__fact td { height: 32px; color: var(--ff-paper); font-size: 14px; }
.club-sc__fact .club-sc__label { color: var(--ff-text-3) !important; }
.club-sc__fact--first > * { border-top: 1px solid rgba(255, 255, 255, .1); }
.club-vc--facts .club-vc__fact-head { font-size: 9px; letter-spacing: .06em; }
.club-vc__fact { color: var(--ff-paper); font-size: 15px !important; }
.club-vc__fact--pen { color: var(--ff-warn) !important; }
.club-tee { display: inline-block; width: 18px; height: 18px; vertical-align: middle; color: var(--ff-paper); }
.club-tee svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.club-tee[data-tee="fairway"] { color: var(--ff-action); }
.club-sand { display: inline-block; width: 11px; height: 11px; vertical-align: middle; background: #dccb9c; border-radius: 50%; }
.fill-ring { position: relative; }
.fill-ring__count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; padding-right: 2px; }
/* A round's ring in the list says only its confirmed count until its card is held. */
.club-round__ring .fill-ring__count { font-size: 11px; padding-right: 0; }

.fill-below { padding: var(--ff-space-8) 20px var(--ff-space-24); }
.fill-below .club-section-head { margin-top: var(--ff-space-8); }
.fill-key-icon { display: block; width: 28px; height: 28px; color: var(--ff-action); }

.club-vc__fact--pen .club-sand { margin-left: 3px; }
/* Out of bounds: a white stake for each; bunker to bunker: two grains of sand. */
.club-ob { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.club-ob i { display: block; width: 2px; height: 11px; background: var(--ff-paper); border-radius: 1px; }
.club-b2b { display: inline-flex; margin-left: 3px; vertical-align: middle; }
.club-b2b i { display: block; width: 9px; height: 9px; background: #dccb9c; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ff-ink); }
.club-b2b i + i { margin-left: -3px; }
/* The round's tees, shown only when its file names them. */
.fill-tee-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ff-paper); font: 600 13px / 1.2 var(--ff-font-ui); white-space: nowrap; }
.fill-tee-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tee, var(--ff-paper)); box-shadow: 0 0 0 1.5px rgba(243, 240, 232, .6); }
.club-round-title__tee { margin: 4px 0 0; }

/* The hole screen (Bricks 7.3, 7.4) on Caddy's Score Marker: one thing at a time. Caddy's map
   language throughout: a dashed hollow marker is an estimate, solid paper is the golfer's, a gold
   ring is the shot chosen; legs are Caddy's connectors; the putts badge sits on the pin. Distances
   in the fat figure font. */
.hs-save { margin: 0 0 var(--ff-space-8); padding: 0 var(--ff-space-16); font-size: 14px; color: var(--ff-text-2); }
.hs-save[data-state="failed"] { color: var(--ff-warn); font-weight: 600; }
.hs-stage { position: relative; flex: none; min-height: 0; overflow: hidden; touch-action: none; background: #0b2119; }
/* Under the map and never part of it (operator, 2026-10-31: "can't just scroll down the screen to see
   your previous scores"): Next hole, or the putts on the green close up. A vertical swipe that starts
   here scrolls the page; a tap still presses. */
.hs-dock { position: relative; flex: none; box-sizing: border-box; display: grid; align-content: center; height: 96px; padding: 10px 20px 12px; background: var(--ff-ink); border-top: 1px solid var(--ff-line); touch-action: pan-y; }
.hs-dock .ff-putt-ball, .hs-dock .hs-next { touch-action: pan-y; }
.hs-safe-probe { position: absolute; width: 0; height: env(safe-area-inset-bottom, 0px); visibility: hidden; pointer-events: none; }
/* The hole's banner, in Caddy's layered type: the par huge and faded behind, the facts over it. */
.hs-top { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ff-space-12); min-height: 68px; padding: 2px 16px 10px 20px; clip-path: inset(0 0 -28px 0); pointer-events: none; background: linear-gradient(to bottom, rgba(7, 17, 14, .96) 62%, rgba(7, 17, 14, 0)); }
.hs-top > * { pointer-events: auto; }
.hs-top__par { position: absolute; left: 8px; top: 2px; z-index: 0; color: var(--ff-paper); font: italic 900 min(100px, 26vw) / .8 var(--ff-font-figure); letter-spacing: -.06em; white-space: nowrap; opacity: .22; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); pointer-events: none !important; user-select: none; }
.hs-top__main { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.hs-top__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ff-text-2); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.hs-top__counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hs-top__count { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; color: var(--ff-paper); background: rgba(243, 240, 232, .08); border-radius: var(--ff-radius-pill); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.hs-top__score { position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
.hs-top__pts { color: var(--ff-text-2); font: 700 14px / 1 var(--ff-font-ui); white-space: nowrap; }
.hs-top__info { position: relative; width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: -4px 0; color: var(--ff-text-2); }
.hs-top__id { margin: 0; color: var(--ff-paper); font: 700 18px / 1.1 var(--ff-font-ui); }
.hs-top__metres { color: var(--ff-text-2); font-weight: 600; }
.hs-hole { position: absolute; inset: 0; transition: opacity var(--ff-dur-state) var(--ff-ease-state); }
.hs-hole[data-hidden="true"] { opacity: 0; pointer-events: none; }
/* The hole's world under the camera: it follows a pinch or a pan, then redraws crisp. */
.hs-world { position: absolute; inset: 0; will-change: transform; }
/* Zoom at will: in on the next shot, out to the whole hole. */
.hs-zoom { position: absolute; right: 12px; bottom: calc(12px + var(--hs-hud-cover, 0px)); z-index: 3; display: grid; gap: 8px; transition: opacity var(--ff-dur-state) var(--ff-ease-state); }
.hs-zoom__btn { width: 44px; height: 44px; color: var(--ff-paper); background: var(--ff-scrim); border: 1px solid var(--ff-line-control); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.hs-zoom__btn:disabled { opacity: .35; }
.hs-zoom { transition: bottom 260ms var(--ff-ease-state); }
/* Undo and Start again, on the banner: never over the map, so never over a ball. */
.hs-top__edit { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; margin: -5px 0; padding: 0 10px 0 8px; color: var(--ff-paper); background: var(--ff-scrim); border: 1px solid var(--ff-line-control); border-radius: var(--ff-radius-pill); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.hs-top__edit[hidden] { display: none; }
.hs-top__edit:active { transform: scale(var(--ff-press-scale)); }
.hs-top__edit-icon { width: 15px; height: 15px; }
.hs-top__edit-icon svg { display: block; width: 100%; height: 100%; }
.hs-top__edit-short { display: none; }
@media (max-width: 380px) {
  .hs-top__edit { padding: 0 8px 0 6px; letter-spacing: .03em; }
  .hs-top__edit-long { display: none; }
  .hs-top__edit-short { display: inline; }
}
/* The shot HUD: the bottom fifth of the screen, edge to edge, up while a shot is chosen. The bag's
   clubs as a strip to swipe or tap; how the shot ended as big chips; where a drop was taken. */
.hs-hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; gap: 8px; box-sizing: border-box; min-height: max(150px, 20vh); padding: 14px 0 max(10px, env(safe-area-inset-bottom)); color: var(--ff-paper); background: #0a1712; border-top: 1px solid var(--ff-line-control); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .5); transform: translateY(105%); visibility: hidden; transition: transform 260ms var(--ff-ease-state), visibility 0s linear 260ms; touch-action: pan-x; }
.hs-hud[data-mode="club"] { min-height: 0; gap: 6px; padding-top: 12px; }
/* After a placement the HUD holds just the club, low enough to sit over the dock, not the map. */
.hs-hud[data-mode="club"] .hs-hud__club { padding: 7px 0 6px; }
.hs-hud[data-mode="club"] .hs-hud__club img { display: none; }
.hs-hud[data-mode="club"] .hs-hud__ok { min-height: 40px; }
.hs-hud[data-mode="club"] .hs-hud__grip { top: 4px; }
.hs-hud[data-mode="club"] .hs-hud__acts, .hs-hud[data-mode="club"] .hs-hud__drops { display: none; }
.hs-hud[data-open="true"] { transform: none; visibility: visible; transition: transform 260ms var(--ff-ease-state), visibility 0s; }
.hs-hud__grip { position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; background: rgba(243, 240, 232, .3); border-radius: 2px; }
.hs-hud__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 16px; }
.hs-hud__words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
/* The club picked for the shot: gold until the golfer confirms it with one tap, then theirs. */
.hs-hud__ok { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; color: var(--ff-ink); background: var(--ff-gold); border: 2px solid var(--ff-gold); border-radius: var(--ff-radius-pill); box-shadow: 0 0 0 0 var(--ff-gold-glow); font: 800 14px / 1 var(--ff-font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: hs-invite 1.6s var(--ff-ease-state) infinite; transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.hs-hud__ok[hidden] { display: none; }
.hs-hud__ok:active { transform: scale(var(--ff-press-scale)); }
.hs-hud__ok[data-set="true"] { color: var(--ff-paper); background: transparent; border-color: var(--ff-line-control); animation: none; }
.hs-hud__ok[data-set="true"] .hs-hud__ok-icon { color: var(--ff-gold); }
.hs-hud__ok-icon { width: 18px; height: 18px; }
.hs-hud__ok-icon svg { display: block; width: 100%; height: 100%; stroke-width: 3; }
.hs-hud__hint { margin: -2px 0 0; padding: 0 16px; color: var(--ff-gold); font: 700 12px / 1.2 var(--ff-font-ui); text-align: center; }
.hs-hud__hint[data-set="true"] { color: var(--ff-text-2); }
@keyframes hs-invite { 0%, 100% { box-shadow: 0 0 0 0 var(--ff-gold-glow); } 60% { box-shadow: 0 0 0 8px var(--ff-gold-glow-out); } }
.hs-hud__title { margin: 0; font: 800 15px / 1.1 var(--ff-font-ui); }
.hs-hud__lie { margin: 0; color: var(--ff-text-2); font: 800 11px / 1.1 var(--ff-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.hs-hud__clubs { display: flex; gap: 8px; overflow-x: auto; padding: 2px calc(50% - 38px); scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hs-hud__clubs::-webkit-scrollbar { display: none; }
.hs-hud__club { flex: 0 0 76px; display: grid; justify-items: center; gap: 2px; padding: 6px 0 8px; color: var(--ff-paper); background: rgba(243, 240, 232, .06); border: 1.5px solid var(--ff-line-control); border-radius: 14px; font: inherit; scroll-snap-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-hud__club img { width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
.hs-hud__club-name { font: 800 14px / 1 var(--ff-font-ui); }
.hs-hud__club-carry { color: var(--ff-text-2); font-size: 13px; }
.hs-hud__club[aria-checked="true"] { background: rgba(232, 185, 79, .18); border-color: var(--ff-gold); }
.hs-hud__clubs[data-set="false"] .hs-hud__club[aria-checked="true"] { border-style: dashed; animation: hs-invite 1.6s var(--ff-ease-state) infinite; }
@media (prefers-reduced-motion: reduce) { .hs-hud__ok, .hs-hud__clubs .hs-hud__club { animation: none; } }
.hs-hud__acts, .hs-hud__drops { display: flex; gap: 6px; padding: 0 8px; }
.hs-hud__drops[hidden] { display: none; }
.hs-hud__act { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 50px; padding: 0 4px; color: var(--ff-paper); background: rgba(243, 240, 232, .06); border: 1px solid var(--ff-line-control); border-radius: 12px; font: 800 12px / 1 var(--ff-font-ui); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.hs-hud__act:active:not(:disabled) { transform: scale(var(--ff-press-scale)); }
.hs-hud__act[hidden] { display: none; }
.hs-hud__act:disabled { opacity: .3; }
.hs-hud__act--cut { flex: 1 1 0; }
.hs-hud__icon { width: 18px; height: 18px; }
.hs-hud__icon svg { display: block; width: 100%; height: 100%; }
.hs-hud__fig { color: var(--ff-warn); font-size: 15px; letter-spacing: 0; }
.hs-hud__act[data-on="true"] { color: var(--ff-ink); background: var(--ff-paper); border-color: var(--ff-paper); }
.hs-hud__act[data-act="bunker"][data-on="true"] { background: #dccb9c; border-color: #dccb9c; }
.hs-hud__act[data-act="water"][data-on="true"] { background: #4fa3c7; border-color: #4fa3c7; }
.hs-hud__act[data-act="ob"][data-on="true"], .hs-hud__act[data-act="drop"][data-on="true"], .hs-hud__drops .hs-hud__act[data-on="true"] { background: var(--ff-warn); border-color: var(--ff-warn); }
.hs-hud__act[data-on="true"] .hs-hud__fig { color: var(--ff-ink); }
/* Where a drop may have been taken: big targets on the hole. */
.hs-droptarget { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; padding: 0; color: var(--ff-paper); background: rgba(7, 17, 14, .55); border: 2px dashed var(--ff-warn); border-radius: 50%; font: 800 9.5px / 1.05 var(--ff-font-ui); letter-spacing: .03em; text-align: center; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-droptarget[data-on="true"] { background: rgba(232, 185, 79, .3); border-style: solid; }
.hs-svg, .hs-lines, .hs-hist, .hs-green-svg { position: absolute; inset: 0; display: block; }
.hs-lines, .hs-hist { pointer-events: none; }
/* A supplied course's hole, rendered (hole-render.js): the fills and their depth are painted by the
   renderer (per-drawing gradients and stripes); the playing hole is lit and the rest sits under its
   feathered focus shadow, so neighbours stay full-strength paint beneath it. */
.hs-map path { stroke-linejoin: round; }
.hs-map__tee { fill: #f3f0e8; stroke: #07110e; stroke-width: 1.5px; }
.hs-map__teeArea { stroke: rgba(255, 255, 255, .38); stroke-width: .8px; }
.hs-map__wasteArea { stroke: rgba(90, 70, 40, .5); stroke-width: .8px; }
.hr-focus, .hr-relief, .hr-cast, .hr-tree-shadow { pointer-events: none; }
.hr-focus-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.hs-layer { position: absolute; inset: 0; pointer-events: none; }
.hs-layer > * { pointer-events: auto; }
/* Everything but the chosen shot steps back while one is chosen. */
[data-recede="true"] { opacity: .32; transition: opacity var(--ff-dur-state) var(--ff-ease-state); }
[data-recede="false"] { transition: opacity var(--ff-dur-state) var(--ff-ease-state); }

/* A marker: Caddy's disc on the spot, inside a 48px touch target centred on it. */
.hs-marker { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; outline: none; }
.hs-marker__svg { width: 44px; height: 44px; overflow: visible; }
.hs-marker.is-pressed .ff-marker { scale: 1.08; }
.hs-marker.is-dragging { z-index: 5; cursor: grabbing; }
.hs-marker.is-dragging .ff-marker { scale: 1.3; }
.hs-marker:focus-visible .ff-marker__halo { stroke: var(--ff-gold); stroke-width: 2px; }
/* Locked: the disc solid with a paper ring around it and a small lock at its shoulder. */
.hs-marker__lock { position: absolute; right: 0; top: 0; display: none; place-items: center; width: 19px; height: 19px; color: var(--ff-ink); background: var(--ff-gold); border-radius: 50%; box-shadow: 0 0 0 2px var(--ff-ink); }
.hs-lock-icon { width: 12px; height: 12px; }
.hs-lock-icon svg { display: block; width: 100%; height: 100%; stroke-width: 3; }
.hs-marker[data-state="locked"] .hs-marker__lock { display: grid; }
.hs-marker[data-state="locked"] .ff-marker__halo { stroke: var(--ff-paper); stroke-width: 2px; }
[data-enter="true"] .hs-marker__svg { animation: ff-score-mode-settle var(--ff-dur-enter) var(--ff-ease-enter) both; animation-delay: calc(var(--hs-order, 0) * 70ms + 120ms); }
[data-enter="true"] .hs-lines, [data-enter="true"] .hs-leg__fig, [data-enter="true"] .hs-pin__pill { animation: ff-score-mode-fade var(--ff-dur-enter) var(--ff-ease-state) both; animation-delay: 260ms; }
@keyframes ff-score-mode-settle { from { opacity: 0; transform: translateY(-16px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ff-score-mode-fade { from { opacity: 0; } to { opacity: 1; } }
.hs-marker[data-state] { transition: opacity var(--ff-dur-state) var(--ff-ease-state); }

/* The shot on its line: the distance in the fat font in Caddy's leg label; the chosen shot's label
   opens to carry its club (tap or swipe it to change). */
.hs-leg { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 32px; padding: 2px 10px; translate: -50% -50%; color: var(--ff-paper); background: var(--ff-scrim); border: 1px solid var(--ff-line-control); border-radius: var(--ff-radius-8); font: inherit; white-space: nowrap; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.hs-leg[data-state="estimated"] { border-style: dashed; }
.hs-leg__fig { display: inline-flex; align-items: baseline; gap: 2px; }
.hs-leg__value { font-size: 22px; line-height: 1; padding-right: 2px; }
.hs-leg__unit { font: 800 11px / 1 var(--ff-font-ui); color: var(--ff-text-2); }
.hs-leg__club { font: 800 13px / 1 var(--ff-font-ui); color: var(--ff-paper); }
.hs-leg__club:empty { display: none; }
.hs-leg__lens { display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: -6px; overflow: hidden; background: radial-gradient(circle at 40% 35%, #23493a, #0c1b16 70%); border: 1px solid var(--ff-line-control); border-radius: 50%; transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.hs-leg__lens[hidden] { display: none; }
.hs-leg__lens img { width: 130%; height: 130%; object-fit: contain; pointer-events: none; }
.hs-leg__plus { width: 18px; height: 18px; color: var(--ff-text-2); }
.hs-leg__pen { color: var(--ff-warn); font-size: 17px; }
.hs-leg[data-open="true"] { min-height: 48px; padding: 4px 14px 4px 8px; border: 2px solid var(--ff-gold); border-radius: var(--ff-radius-pill); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); z-index: 4; }
.hs-leg[data-open="true"] .hs-leg__value { font-size: 28px; }
.hs-leg[data-open="true"][data-set="false"] .hs-leg__lens { border-style: dashed; }
.hs-leg[data-set="false"] .hs-leg__club { color: var(--ff-text-2); }
.hs-leg[data-set="true"]:not([data-open="true"]) .hs-leg__club { color: var(--ff-gold); }
.hs-leg:active .hs-leg__lens { transform: scale(var(--ff-press-scale)); }
.hs-leg--putt { gap: 6px; cursor: default; pointer-events: none !important; }
/* Beside a shot, how far from the tee it finished; on the green, how far from the pin: the fat
   figure on the ground itself, no box, a dark halo so it reads on any lie. */
.hs-from, .hs-topin { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; translate: -50% -50%; color: var(--ff-paper); white-space: nowrap; pointer-events: none !important; text-shadow: 0 0 3px #07110e, 0 0 6px #07110e, 0 1px 2px #07110e; }
.hs-from[hidden], .hs-topin[hidden] { display: none; }
.hs-from__fig { display: inline-flex; align-items: baseline; gap: 1px; }
.hs-from__value { font-size: 19px; line-height: 1; padding-right: 1px; }
.hs-from__unit { font: 800 10px / 1 var(--ff-font-ui); color: var(--ff-text-2); }
.hs-from__cap { font: 800 8.5px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ff-text-2); }
.hs-from__cap[hidden] { display: none; }
.hs-from[data-state="estimated"] .hs-from__value, .hs-topin[data-state="estimated"] .hs-from__value { opacity: .78; }
.hs-topin .hs-from__value { font-size: 22px; }
.hs-key--fig { display: grid; place-items: center; color: var(--ff-paper); font-size: 17px; }
.hs-leg--putt .hs-leg__club { color: var(--ff-text-2); font-size: 12px; }

/* Caddy's strip under the chosen shot: where it finished (a tap puts it in a bunker or takes it
   out), a penalty drop, and taking the shot away. */
.hs-strip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; translate: -50% -50%; z-index: 4; }
.hs-strip[hidden] { display: none; }
.hs-lie, .hs-act { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; color: var(--ff-paper); background: var(--ff-scrim); border: 1px solid var(--ff-line-control); border-radius: var(--ff-radius-pill); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.hs-lie:active:not(:disabled), .hs-act:active { transform: scale(var(--ff-press-scale)); }
.hs-lie:disabled { cursor: default; opacity: 1; }
.hs-lie[data-sand="true"] { color: var(--ff-ink); background: #dccb9c; border-color: #dccb9c; }
.hs-lie[data-ob="true"] { color: var(--ff-ink); background: var(--ff-paper); border-color: var(--ff-paper); }
.hs-act[hidden] { display: none; }
.hs-act__fig { font-size: 15px; letter-spacing: 0; color: var(--ff-warn); }
.hs-act--drop[data-on="true"], .hs-act--ob[data-on="true"] { color: var(--ff-ink); background: var(--ff-warn); border-color: var(--ff-warn); }
.hs-act--drop[data-on="true"] .hs-act__fig, .hs-act--ob[data-on="true"] .hs-act__fig { color: var(--ff-ink); }
.hs-act--cut { width: 32px; padding: 0; justify-content: center; color: var(--ff-text-2); }
.hs-act__icon { width: 16px; height: 16px; }
.hs-act__icon svg { display: block; width: 100%; height: 100%; }

/* Out of bounds: the shot carries a paper ring. */
.hs-marker[data-pen="ob"] .ff-marker__halo { stroke: var(--ff-paper); stroke-width: 2px; stroke-dasharray: 3 3; }
.hs-connector[data-pen="ob"] .ff-connector__line { stroke-dasharray: 2 5; opacity: .7; }
.hs-penlink .ff-connector__line { stroke-dasharray: 1 4; stroke: var(--ff-warn); }
/* The penalty stroke: Caddy's +1, in the warning colour. */
.hs-marker--pen .ff-marker__disc { fill: var(--ff-ink); stroke: var(--ff-warn); stroke-width: 2px; }
.hs-marker--pen .ff-marker__label { fill: var(--ff-warn); font-size: 10px; }
.hs-marker--pen[data-pen="ob"] { cursor: pointer; }
/* The next shot, waiting to be dragged out. */
.hs-ghost .ff-marker__disc { fill: rgba(7, 17, 14, .55); stroke: var(--ff-paper); stroke-dasharray: 3 3; }
.hs-ghost .ff-marker__label { fill: var(--ff-paper); }
.hs-ghost:not(.is-dragging) .hs-marker__svg { animation: hs-ghost-breathe 2.4s var(--ff-ease-state) infinite; }
@keyframes hs-ghost-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.hs-ghost[hidden] { display: none; }
/* A picked-up hole: where it ended. */
.hs-pickup { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px; translate: -50% -50%; min-height: 26px; padding: 0 10px; color: var(--ff-text-2); background: var(--ff-scrim); border: 1px dashed var(--ff-line-control); border-radius: var(--ff-radius-pill); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none !important; }
.hs-pickup__icon { width: 13px; height: 13px; }
.hs-pickup__icon svg { display: block; width: 100%; height: 100%; }
/* A putt leaving the pin for a new shot, or coming back. */
.hs-fly { position: absolute; left: 0; top: 0; z-index: 6; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--ff-paper); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }
/* A putt dragged off the green fades, to be taken away. */
.hs-marker[data-leaving="true"] { opacity: .45; }
.hs-top__b2b { gap: 3px; color: var(--ff-text-2); }
.hs-sand-dot { display: inline-block; width: 9px; height: 9px; background: #dccb9c; border-radius: 50%; }
.hs-sand { fill: #dccb9c; opacity: .8; }
/* Where a dragged putt is let go to take it away: it takes the putt balls' place while a putt moves. */
.hs-bin { position: absolute; left: 20px; right: 20px; top: 10px; bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 76px; color: var(--ff-text-2); border: 1.5px dashed var(--ff-line-control); border-radius: var(--ff-radius-16, 16px); font: 800 12px / 1 var(--ff-font-ui); letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity var(--ff-dur-state) var(--ff-ease-state), background-color var(--ff-dur-state); }
.hs-bin__icon { width: 18px; height: 18px; }
.hs-bin__icon svg { display: block; width: 100%; height: 100%; }
.hs-dock[data-removing="true"] .hs-bin { opacity: 1; }
.hs-dock[data-removing="true"] .hs-bar { opacity: 0; }
.hs-bin[data-armed="true"] { color: var(--ff-ink); background: var(--ff-warn); border-color: var(--ff-warn); }
.hs-key--stake { display: block; background: linear-gradient(90deg, transparent 18px, var(--ff-paper) 18px, var(--ff-paper) 22px, transparent 22px); border-radius: 2px; }
.hs-key--ghost { display: grid; place-items: center; color: var(--ff-paper); border: 1.5px dashed var(--ff-paper); border-radius: 50%; font: 800 18px / 1 var(--ff-font-ui); }

/* The putts on the pin: Caddy's badge, dashed until they are the golfer's. */
.hs-pin { position: absolute; left: 0; top: 0; display: inline-grid; place-items: center; min-height: 44px; padding: 0; translate: 0 -50%; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-pin[data-side="left"] { translate: -100% -50%; }
.hs-pin[data-side="above"] { translate: -50% -100%; }
.hs-pin[data-side="below"] { translate: -50% 0; }
.hs-pin__pill { display: inline-flex; align-items: baseline; gap: 5px; box-sizing: border-box; min-height: 34px; padding: 5px 12px 4px; color: var(--ff-ink); background: var(--ff-paper); border: 2px solid var(--ff-paper); border-radius: var(--ff-radius-pill); box-shadow: var(--ff-e1); font: 800 13px / 1 var(--ff-font-ui); white-space: nowrap; }
.hs-pin[data-state="estimated"] .hs-pin__pill { color: var(--ff-paper); background: var(--ff-scrim); border-style: dashed; }
.hs-pin__n { font-size: 20px; line-height: .9; padding-right: 1px; }
.hs-pin:active .hs-pin__pill { transform: scale(var(--ff-press-scale)); }

/* The hole-complete moment, Caddy's primary action; it steps aside while a shot is chosen. */
.hs-next { width: 100%; transition: opacity var(--ff-dur-state) var(--ff-ease-state), translate var(--ff-dur-state) var(--ff-ease-state); }
.hs-next[data-hidden="true"] { opacity: 0; translate: 0 12px; pointer-events: none; }
/* On the shots the dock holds the putts, one tap from the hole, and Next beside them. */
.hs-dock__row { display: flex; align-items: flex-end; gap: 10px; }
.hs-dock__row .hs-bar { flex: 1 1 auto; min-width: 0; gap: 4px; }
.hs-dock__row .ff-putt-row { justify-content: flex-start; gap: 6px; }
.hs-dock__row .ff-putt-ball { width: 42px; height: 42px; font-size: 20px; }
.hs-dock__row--next .hs-next { flex: 1 1 auto; }
.hs-next--compact { flex: none; width: auto; min-height: 48px; padding: 0 12px 0 16px; gap: 4px; }
.hs-next__icon { width: 18px; height: 18px; }
.hs-next__icon svg { display: block; width: 100%; height: 100%; }

/* While a marker moves: where it is now, above the finger. */
.hs-pill { position: absolute; left: 0; top: 0; z-index: 7; padding: 7px 12px; color: var(--ff-ink); background: var(--ff-paper); border-radius: var(--ff-radius-pill); font: 800 13px / 1 var(--ff-font-ui); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); translate: -50% -100%; pointer-events: none; }

/* The green close up: step 1 (the putt balls only) and step 3 (each putt). */
.hs-greenview { position: absolute; inset: 0; z-index: 5; background: var(--ff-hole-greenview); touch-action: none; }
.hs-greenview[data-leaving="true"] { background: none; pointer-events: none; transition: background-color 340ms; }
.hs-greenview__close { position: absolute; right: 8px; top: 62px; z-index: 6; }
.hs-dock[data-mode="look"] { padding-left: 20px; padding-right: 20px; }
/* The green close up on a course map: dark rough, the mown fairway, blue water, pale sand, the
   collar a step lighter than the rough and the green brightest, so each reads at phone size. */
.hs-close__rough { fill: #2b5b2f; }
.hs-close__fairway { fill: #4f9c42; stroke: #3e7d3a; stroke-width: 4px; paint-order: stroke; }
.hs-close__water { fill: #2a85c0; stroke: #a8dcf2; stroke-width: 1.5px; }
.hs-close__wasteArea { fill: #b5a57a; stroke: rgba(90, 70, 40, .5); stroke-width: 1px; }
.hs-close__bunker { fill: #ecdcb0; stroke: #2a5e2c; stroke-width: 2.5px; paint-order: stroke; }
.hs-close__green { stroke: rgba(255, 255, 255, .45); stroke-width: 1px; stroke-linejoin: round; }
.hs-close__fringe { fill: #5db14c; stroke: #5db14c; stroke-linejoin: round; }
/* Another hole's green beside this one: quieter. */
.hs-close__green[data-mine="false"] { fill: #78c860; opacity: .75; }
/* The pin: dragged by its flag. */
.hs-flag { position: absolute; left: 0; top: 0; width: 62px; height: 98px; margin: -88px 0 0 -16px; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; outline: none; }
.hs-flag__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-flag__cup { fill: #07110e; stroke: rgba(243, 240, 232, .55); stroke-width: 1px; }
.hs-flag__pole { stroke: #f3f0e8; stroke-width: 2.4px; stroke-linecap: round; }
.hs-flag__pennant { fill: #e8b94f; stroke: #07110e; stroke-width: 1px; stroke-linejoin: round; transition: scale var(--ff-dur-press) var(--ff-ease-state); transform-origin: 0 -61px; }
.hs-flag.is-pressed .hs-flag__pennant, .hs-flag.is-dragging .hs-flag__pennant { scale: 1.2; }
.hs-flag.is-dragging { cursor: grabbing; }
.hs-flag:focus-visible .hs-flag__pennant { stroke: var(--ff-gold); stroke-width: 2px; }
.hs-greenview .hs-marker[data-kind="putt"] .hs-marker__svg { width: 40px; height: 40px; }
/* Balls closer than a thumb stand aside: a fine leader to the dot where each truly lies. They and
   their figures glide as they make way for the ball under the finger. */
.hs-leader { stroke: rgba(243, 240, 232, .7); stroke-width: 1.5px; stroke-linecap: round; }
.hs-leader--label { stroke: rgba(243, 240, 232, .45); stroke-width: 1px; }
.hs-lie-dot { fill: var(--ff-paper); stroke: #07110e; stroke-width: 1.5px; }
.hs-greenview[data-settled="true"] .hs-marker:not(.is-dragging), .hs-greenview[data-settled="true"] .hs-topin { transition: transform 160ms var(--ff-ease-state); }
.hs-bar { display: grid; gap: 6px; transition: opacity var(--ff-dur-state) var(--ff-ease-state); }
.hs-bar__label { margin: 0; color: var(--ff-text-2); }
.hs-putt-row { justify-content: space-between; }
.hs-key { position: relative; margin: 0; width: 40px; height: 40px; }
.hs-key .hs-marker__svg { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) { [data-enter="true"] .hs-marker__svg, [data-enter="true"] .hs-lines, [data-enter="true"] .hs-leg, [data-enter="true"] .hs-pin { animation: none; } }

/* Courses (1.5): every course we hold, as tiles or a list. FairwayFinda's chrome; the course is
   drawn from its own data (map, else holes, else the plain tile with its name). Lime is "held" and
   the one action, gold is the golfer's own achievement (played). */
.course-fig { font-family: var(--ff-font-figure); font-style: italic; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.courses-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ff-space-12); margin: var(--ff-space-4) 0 var(--ff-space-8); }
.courses-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 0; min-width: 0; }
.courses-count__n { font: 700 44px / 1 var(--ff-font-display); letter-spacing: var(--ff-tracking-display); font-variant-numeric: tabular-nums; }
.courses-count__label { color: var(--ff-paper); font: 700 18px / 1 var(--ff-font-display); }
.courses-count__of { color: var(--ff-text-3); font: 600 15px / 1 var(--ff-font-ui); white-space: nowrap; }
.courses-view { flex: none; grid-auto-columns: 44px; padding: 3px; }
.courses-view__option { display: grid; place-items: center; min-width: 44px; padding: 0; }
.courses-view__glyph { width: 20px; height: 20px; }
.courses-view__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3; }
.courses-keeping { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--ff-space-12); color: var(--ff-text-2); font: 600 13px / 1.2 var(--ff-font-ui); }
.courses-keeping::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-action); animation: courses-pulse 1.4s ease-in-out infinite; }
@keyframes courses-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .courses-keeping::before { animation: none; } }
.courses-search { position: relative; display: flex; align-items: center; margin: 0 0 var(--ff-space-12); font-weight: 400; }
.courses-search__glyph { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--ff-text-2); pointer-events: none; }
.courses-search__glyph svg, .courses-search__x svg, .courses-chip__glyph svg, .courses-area__glyph svg { display: block; width: 100%; height: 100%; }
input.courses-search__input { min-height: 52px; margin: 0; padding: 0 48px 0 46px; color: var(--ff-paper); font: italic 700 18px / 1 var(--ff-font-figure); letter-spacing: -.01em; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-pill); -webkit-appearance: none; appearance: none; transition: border-color var(--ff-dur-state) var(--ff-ease-state), background-color var(--ff-dur-state) var(--ff-ease-state); }
input.courses-search__input::placeholder { color: var(--ff-text-3); font-style: normal; font-weight: 600; font-family: var(--ff-font-ui); font-size: 16px; }
input.courses-search__input:focus { border-color: var(--ff-paper); background: var(--ff-surface-raised); outline: none; }
input.courses-search__input::-webkit-search-cancel-button { display: none; }
.courses-search__clear { position: absolute; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; color: var(--ff-text-2); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.courses-rail { display: flex; align-items: center; gap: var(--ff-space-8); margin: 0 -20px var(--ff-space-8); padding: 2px 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.courses-rail::-webkit-scrollbar { display: none; }
/* More chips past the edge: the row fades out there. */
.courses-rail[data-more="true"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
@media (max-height: 760px) {
  /* A short screen: every filter in one row that scrolls, so the courses start higher. */
  .courses-filters { display: flex; align-items: center; gap: var(--ff-space-8); margin: 0 -20px var(--ff-space-8); padding: 2px 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .courses-filters::-webkit-scrollbar { display: none; }
  .courses-filters > .courses-rail { display: contents; }
  .courses-filters[data-more="true"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .courses-head { margin: 0 0 var(--ff-space-4); }
  .courses-count__n { font-size: 34px; }
  .courses-count__label { font-size: 16px; }
  .courses-search { margin-bottom: var(--ff-space-8); }
  input.courses-search__input { min-height: 44px; }
  .courses-rail { margin-bottom: 4px; }
}
.courses-rail > * { flex: none; scroll-snap-align: start; }
.courses-chip { gap: 6px; padding: 0 14px 0 12px; }
.courses-chip__glyph { width: 18px; height: 18px; }
.courses-chip[aria-disabled="true"] { pointer-events: auto; }
.courses-chip[aria-pressed="true"] .courses-chip__glyph { color: var(--ff-ink); }
.courses-chip[data-filter="near"][aria-pressed="true"] { border-color: var(--ff-action); background: var(--ff-action); }
.courses-chip[data-state="denied"] { color: var(--ff-warn); border-color: rgba(255, 182, 92, .5); }
.courses-chip[data-state="asking"] .courses-chip__glyph { animation: courses-pulse 1s ease-in-out infinite; }
.courses-level { grid-auto-columns: auto; padding: 3px; }
.courses-level .ff-segmented__option { min-height: 38px; padding: 0 14px; }
.courses-note { margin: var(--ff-space-4) 0 var(--ff-space-12); padding: 10px 14px; color: var(--ff-text-2); font-size: var(--ff-size-14); line-height: 1.4; background: var(--ff-surface); border-left: 3px solid var(--ff-action); border-radius: 0 var(--ff-radius-8) var(--ff-radius-8) 0; }
.courses-section { margin: var(--ff-space-24) 0 var(--ff-space-12); color: var(--ff-text-2); }
.courses-results > .courses-section:first-child { margin-top: var(--ff-space-12); }
.courses-grid { display: grid; gap: var(--ff-space-12); margin: var(--ff-space-12) 0 0; padding: 0; list-style: none; }
.courses-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.courses-grid--list { gap: 0; overflow: hidden; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-16); }
.courses-more { height: 1px; }
.courses-map { display: grid; gap: var(--ff-space-12); margin-top: var(--ff-space-12); }
.courses-picked { margin: 0; }
.courses-empty { display: grid; justify-items: start; gap: var(--ff-space-12); margin: var(--ff-space-24) 0; color: var(--ff-text-2); }
.courses-empty p { margin: 0; font: 700 24px / 1.1 var(--ff-font-display); color: var(--ff-paper); }

/* A card: the drawing, the three level pips and the star over it; name, where and facts under it. */
.course-card { position: relative; min-width: 0; }
.course-card--tile { display: flex; }
.course-card--tile .course-card__open { grid-template-rows: auto 1fr; align-content: start; }
.course-card--tile .course-card__name { min-height: 2.3em; }
/* The course's drawing sits below its level pips and star, never under them. */
.course-card--tile .course-art--map, .course-card--tile .course-art--holes { inset: 40px 10px 10px; }
.course-card__open { display: grid; width: 100%; padding: 0; font: inherit; text-align: left; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-16); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ff-dur-press) var(--ff-ease-state), border-color var(--ff-dur-state) var(--ff-ease-state); }
.course-card__open:active { transform: scale(.975); }
.course-card__open:hover { border-color: var(--ff-line-control); }
.course-card__frame { position: relative; display: block; aspect-ratio: 1; background: radial-gradient(120% 90% at 50% 40%, #0f2219 0%, var(--ff-ink) 100%); }
.course-card__art { position: absolute; inset: 0; display: block; }
.course-card__body { display: grid; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.course-card__name { display: -webkit-box; overflow: hidden; font: 700 16px / 1.15 var(--ff-font-display); letter-spacing: -.015em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.course-card__where { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ff-text-2); font: 600 13px / 1.2 var(--ff-font-ui); }
.course-card__where__words { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-card__where__km, .cp-where__km { margin-left: auto; color: var(--ff-action); font-size: 17px; white-space: nowrap; }
.course-card__facts { min-height: 1.2em; color: var(--ff-text-3); font: 600 13px / 1.2 var(--ff-font-ui); font-variant-numeric: tabular-nums; }
.course-locator { flex: none; display: block; width: 22px; height: 22px; color: var(--ff-text-3); }
.course-locator svg { display: block; width: 100%; height: 100%; }
.course-locator path { fill: rgba(243, 240, 232, .08); }
.course-locator__dot { fill: var(--ff-action); stroke: var(--ff-ink); stroke-width: 1.6; }
.course-pips { display: inline-flex; gap: 4px; }
.course-card__pips { position: absolute; top: 8px; left: 8px; }
.course-pip { display: grid; place-items: center; width: 26px; height: 22px; box-sizing: border-box; color: var(--ff-text-3); background: rgba(7, 17, 14, .72); border: 1px dashed var(--ff-line-control); border-radius: 7px; }
.course-pip[data-held="true"] { color: var(--ff-paper); background: var(--ff-surface-raised); border: 0; box-shadow: inset 0 -2px 0 var(--ff-action); }
/* Not known yet (the course's files are on their way): quiet, dotted, breathing. */
.course-pip[data-held="unknown"] { border-style: dotted; animation: courses-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .course-pip[data-held="unknown"] { animation: none; } }
.course-pip__glyph { width: 15px; height: 15px; }
.course-pip__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.2; }
.course-played { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px 3px 5px; color: var(--ff-ink); background: var(--ff-gold); border-radius: var(--ff-radius-pill); font: italic 800 13px / 1 var(--ff-font-figure); }
.course-played__glyph { width: 14px; height: 14px; }
.course-played__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.6; }
.course-star { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: rgba(243, 240, 232, .8); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.course-star__glyph { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.course-star__glyph svg { display: block; width: 100%; height: 100%; }
.course-star[aria-pressed="true"] { color: var(--ff-gold); }
.course-star[aria-pressed="true"] path { fill: var(--ff-gold); }

/* List rows: a small drawing, name, where and facts, the pips at the end. */
.course-card--row + .course-card--row { border-top: 1px solid var(--ff-line); }
.course-card--row .course-card__open { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 44px 10px 12px; background: none; border: 0; border-radius: 0; }
.course-card--row .course-card__open:active { transform: none; background: var(--ff-surface-raised); }
.course-card--row .course-card__frame { width: 64px; border-radius: 12px; overflow: hidden; }
.course-card--row .course-played { right: 3px; bottom: 3px; padding: 2px 5px 2px 3px; font-size: 11px; }
.course-card--row .course-card__body { gap: 4px; padding: 0; }
.course-card--row .course-card__where { flex-wrap: nowrap; }
.course-card__where__facts { overflow: hidden; color: var(--ff-text-3); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.course-card__where__words + .course-card__where__facts::before { content: "· "; }
.course-card--row .course-card__name { font-size: 16px; -webkit-line-clamp: 1; }
.course-card--row .course-card__pips { position: static; margin-top: 3px; }
.course-card--row .course-pip { width: 24px; height: 20px; background: var(--ff-ink); }
.course-card--row .course-pip[data-held="true"] { background: var(--ff-surface-raised); }
.course-card--row .course-star { top: 50%; transform: translateY(-50%); }

/* The drawings. Same palette as the hole view (hs-map), so a tile and its holes read as one course. */
.course-art--map svg, .course-art--holes svg, .ct { display: block; width: 100%; height: 100%; }
.ct-boundary { fill: #2b5b2f; stroke: #3e7d3a; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.ct-fairway { fill: #4f9c42; stroke: #3e7d3a; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.ct-teeArea { fill: #62b552; }
.ct-water { fill: #2a85c0; }
.ct-bunker { fill: #f0e3bd; }
.ct-green { fill: #9be07a; }
.ct-line { fill: none; stroke: rgba(243, 240, 232, .22); stroke-width: .8px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ct-line--hole { stroke: rgba(243, 240, 232, .4); stroke-width: 1.2px; stroke-dasharray: none; }
.ct-teebar { stroke: var(--ff-paper); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.course-art--plain { display: block; overflow: hidden; background: radial-gradient(90% 80% at 72% 18%, rgba(169, 240, 77, .2) 0%, rgba(169, 240, 77, 0) 60%), var(--ff-surface); }
.course-art__mark { position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; border-radius: 7px; opacity: .9; }
.course-card .course-art__mark { top: auto; bottom: 10px; }
.course-art__initials { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(243, 240, 232, .3); font: 800 clamp(28px, 22cqi, 64px) / 1 var(--ff-font-display); letter-spacing: -.04em; container-type: inline-size; }
.course-card__frame, .cp-hero { container-type: inline-size; }
.course-art__name { position: absolute; left: 12px; right: 12px; bottom: 12px; overflow: hidden; color: var(--ff-text-2); font: 700 13px / 1.15 var(--ff-font-display); text-overflow: ellipsis; white-space: nowrap; }
.course-card .course-art__name { display: none; }
/* The plain tile names its course (each one reads differently, unlike two letters). */
.course-card--tile .course-art__initials { display: none; }
.course-card--tile .course-art__name { display: -webkit-box; left: 14px; right: 14px; top: 46px; bottom: auto; overflow: hidden; color: rgba(243, 240, 232, .34); font: 800 clamp(20px, 15cqi, 30px) / 1.02 var(--ff-font-display); letter-spacing: -.03em; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.course-card--row .course-art__mark { display: none; }

/* The area sheet: big tap targets, states then places. */
.courses-area { gap: var(--ff-space-16); }
.courses-area .sheet-head { gap: var(--ff-space-8); }
.courses-area .sheet-head h2 { flex: 1; margin: 0; }
.courses-area__glyph { display: block; width: 22px; height: 22px; }
.courses-area__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ff-space-8); }
.courses-area__choice { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 64px; padding: 12px 16px; font: inherit; text-align: left; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line-control); border-radius: var(--ff-radius-16); cursor: pointer; }
.courses-area__choice[aria-pressed="true"] { color: var(--ff-ink); background: var(--ff-paper); border-color: var(--ff-paper); }
.courses-area__name { font: 700 18px / 1.15 var(--ff-font-display); }
.courses-area__count { color: inherit; opacity: .7; font-size: 18px; }
.courses-area__none { margin: 0 0 var(--ff-space-16); color: var(--ff-text-2); line-height: 1.45; }

/* The preview (part one): the course drawn big, what we have for it, its facts and the golfer's rounds. */
.cp-hero { position: relative; margin: 0 -20px; aspect-ratio: 16 / 11; background: radial-gradient(110% 90% at 50% 40%, #10251b 0%, var(--ff-ink) 100%); overflow: hidden; }
.cp-hero__art { position: absolute; inset: 0; display: block; }
.cp-hero .course-art__initials { font-size: clamp(48px, 18cqi, 120px); }
.cp-star { top: 10px; right: 12px; z-index: 2; width: 48px; height: 48px; padding: 11px; background: rgba(7, 17, 14, .58); border: 1px solid rgba(243, 240, 232, .16); border-radius: 50%; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cp-star .course-star__glyph { width: 24px; height: 24px; filter: none; }
@media (min-width: 800px) { .cp-hero { margin: 0; border-radius: var(--ff-radius-16); } }
.cp-id { display: grid; gap: 6px; margin: var(--ff-space-16) 0 var(--ff-space-16); }
.cp-id__name { margin: 0; font: 700 30px / 1.05 var(--ff-font-display); letter-spacing: var(--ff-tracking-heading); }
.cp-where { display: flex; align-items: center; gap: 8px; color: var(--ff-text-2); font: 600 14px / 1.2 var(--ff-font-ui); }
.cp-where .course-locator { width: 40px; height: 40px; }
.cp-where__km { margin-left: 4px; font-size: 20px; }
.cp-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ff-space-8); margin: 0 0 var(--ff-space-16); padding: 0; list-style: none; }
.cp-level { display: grid; justify-items: start; gap: 4px; padding: 12px; background: var(--ff-surface); border: 1px dashed var(--ff-line-control); border-radius: var(--ff-radius-12); }
.cp-level[data-held="true"] { background: var(--ff-surface-raised); border: 1px solid transparent; box-shadow: inset 0 -3px 0 var(--ff-action); }
.cp-level__glyph { width: 24px; height: 24px; color: var(--ff-text-3); }
.cp-level[data-held="true"] .cp-level__glyph { color: var(--ff-action); }
.cp-level__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3; }
.cp-level__name { font: 700 14px / 1.15 var(--ff-font-display); }
.cp-level__state { color: var(--ff-text-3); font: 800 11px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.cp-level[data-held="true"] .cp-level__state { color: var(--ff-action); }
.cp-level[data-held="away"] { background: var(--ff-surface-raised); border: 1px solid transparent; box-shadow: inset 0 -3px 0 rgba(255, 182, 92, .6); }
.cp-level[data-held="away"] .cp-level__state { color: var(--ff-warn); letter-spacing: .04em; }
.cp-level[data-held="unknown"] .cp-level__state { animation: courses-pulse 1.6s ease-in-out infinite; }
.cp-facts { margin: 0 0 var(--ff-space-16); }
.cp-fact { display: grid; flex: 1 1 0; gap: 6px; min-width: 0; padding: 0 10px; }
.cp-fact + .cp-fact { border-left: 1px solid rgba(255, 255, 255, .1); }
.cp-fact__value { font-size: 22px; line-height: 1; white-space: nowrap; }
.cp-fact__unit { margin-left: 2px; color: var(--ff-text-2); font: 700 13px / 1 var(--ff-font-ui); font-style: normal; letter-spacing: 0; }
.cp-fact:last-child { flex: 1.35 1 0; }
.cp-fact__label { color: var(--ff-text-3); font: 600 10px / 1 var(--ff-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.cp-head { margin: var(--ff-space-24) 0 var(--ff-space-12); color: var(--ff-text-2); }
.cp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ff-space-8); }
@media (min-width: 600px) { .cp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cp-stat__value { white-space: nowrap; }
.cp-stat { display: grid; justify-items: start; gap: 6px; min-height: 76px; padding: 12px; font: inherit; text-align: left; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-12); cursor: pointer; }
.cp-stat:active { background: var(--ff-surface-raised); }
.cp-stat__value { font-size: 28px; line-height: 1; }
.cp-stat--best .cp-stat__value { color: var(--ff-gold); }
.cp-stat__label { color: var(--ff-text-3); font: 600 12px / 1.2 var(--ff-font-ui); }
.cp-round-list { display: grid; margin: var(--ff-space-8) 0 0; padding: 0; overflow: hidden; list-style: none; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-12); }
.cp-round-list li + li { border-top: 1px solid var(--ff-line); }
.cp-round { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; font: inherit; text-align: left; color: var(--ff-paper); background: none; border: 0; cursor: pointer; }
.cp-round:active { background: var(--ff-surface-raised); }
.cp-round__day { color: var(--ff-text-2); font: 700 13px / 1.2 var(--ff-font-ui); }
.cp-round__name { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cp-round__score { font-size: 17px; }
.cp-round__chev { width: 18px; height: 18px; color: var(--ff-text-3); }
.cp-round__chev svg { display: block; width: 100%; height: 100%; }
.cp-wait { margin-top: var(--ff-space-16); }

/* The preview's hero switches between the 2D map, Aerial (the map over the course's own tiles) and the 3D course. */
.cp-hero { transition: aspect-ratio var(--ff-dur-state) var(--ff-ease-state); }
.cp-hero[data-mode="3d"] { aspect-ratio: 1; }
@media (min-width: 800px) { .cp-hero, .cp-hero[data-mode="3d"] { aspect-ratio: 16 / 9; max-height: 620px; width: 100%; } }
.cp-hero__stage { position: absolute; inset: 0; }
.cp-hero[data-switch="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: linear-gradient(to top, rgba(7, 17, 14, .7), rgba(7, 17, 14, 0)); pointer-events: none; }
.cp-hero[data-mode="3d"]::after { display: none; }
.cp-hero__under { position: absolute; inset: 0; opacity: .3; filter: saturate(.6); }
.cp-hero__under .cp-hero__art { position: absolute; inset: 0; }
/* Aerial is map first (operator, 2026-10-30: "layer are course map details as the main focus"):
   the course's tiles sit muted underneath as context, and the map is drawn crisp on top. */
.tl { opacity: .62; filter: saturate(.55) brightness(.8); pointer-events: none; }
.tl image { image-rendering: auto; }
.cp-hero__aerial { background: var(--ff-ink); }
.cp-hero__aerial .ct-boundary { fill: none; stroke: rgba(243, 240, 232, .28); stroke-width: 1px; }
.cp-hero__aerial .ct-fairway { fill-opacity: .74; stroke: #a9f04d; stroke-opacity: .55; stroke-width: .8px; }
.cp-hero__aerial .ct-teeArea { fill-opacity: .85; }
.cp-hero__aerial .ct-water { fill-opacity: .82; stroke: #78c8e6; stroke-width: .8px; vector-effect: non-scaling-stroke; }
.cp-hero__aerial .ct-bunker { stroke: #b9a776; stroke-width: .6px; vector-effect: non-scaling-stroke; }
.cp-hero__aerial .ct-green { stroke: var(--ff-paper); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cp-hero__aerial .ct-line { stroke: rgba(243, 240, 232, .5); }
/* In the page, a vertical swipe scrolls the page; a sideways one turns the course. */
.cp-3d { position: absolute; inset: 0; touch-action: pan-y; }
.cp-3d .c3d-canvas { touch-action: pan-y; }
.c3d-canvas { display: block; width: 100%; height: 100%; outline: none; }
.c3d-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.c3d-label { position: absolute; left: 0; top: 0; min-width: 22px; padding: 3px 6px; color: var(--ff-ink); background: var(--ff-gold); border-radius: 6px 6px 6px 0; font: italic 800 13px / 1 var(--ff-font-figure); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.c3d-label[data-current="true"] { z-index: 1; color: var(--ff-ink); background: var(--ff-action); font-size: 16px; padding: 4px 8px; }
.cp-switch { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
@media (min-width: 800px) { .cp-switch { left: 16px; bottom: 16px; } }
.cvs { display: inline-flex; gap: 2px; padding: 3px; background: rgba(7, 17, 14, .58); border: 1px solid rgba(243, 240, 232, .16); border-radius: var(--ff-radius-pill); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.cvs__option { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 11px; color: var(--ff-text-2); background: none; border: 0; border-radius: var(--ff-radius-pill); font: 700 14px / 1 var(--ff-font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ff-dur-state) var(--ff-ease-state), color var(--ff-dur-state) var(--ff-ease-state); }
.cvs__option[aria-checked="true"] { color: var(--ff-ink); background: var(--ff-paper); }
.cvs__option[aria-disabled="true"] { opacity: .38; cursor: default; }
.cvs__glyph { width: 18px; height: 18px; }
.cvs__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.4; }
.cvs-progress { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 10px 16px 10px 12px; color: var(--ff-paper); background: rgba(7, 17, 14, .72); border: 1px solid rgba(243, 240, 232, .14); border-radius: var(--ff-radius-pill); font: 700 14px / 1.2 var(--ff-font-ui); transform: translate(-50%, -50%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cvs-ring { flex: none; width: 24px; height: 24px; transform: rotate(-90deg); }
.cvs-ring__track { fill: none; stroke: rgba(243, 240, 232, .16); stroke-width: 3; }
.cvs-ring__bar { fill: none; stroke: var(--ff-action); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .2s linear; }
.cvs-progress:not([data-done]) .cvs-ring { animation: cvs-spin 1.1s linear infinite; }
.cvs-progress:not([data-done]) .cvs-ring__bar { stroke-dashoffset: 72; }
@keyframes cvs-spin { to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .cvs-progress .cvs-ring { animation: none; } }
.cvs-progress[data-failed="true"] .cvs-ring { display: none; }
.cvs-progress[data-failed="true"] { padding-left: 16px; }
.cp-open3d { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; color: var(--ff-paper); background: rgba(7, 17, 14, .58); border: 1px solid rgba(243, 240, 232, .16); border-radius: var(--ff-radius-pill); font: 700 14px / 1 var(--ff-font-ui); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cp-open3d__glyph { width: 18px; height: 18px; }
.cp-open3d__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.4; }
.cp-whole { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; color: var(--ff-paper); background: rgba(7, 17, 14, .58); border: 1px solid rgba(243, 240, 232, .16); border-radius: var(--ff-radius-pill); font: 700 13px / 1 var(--ff-font-ui); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cp-whole__glyph { width: 16px; height: 16px; }
.cp-whole__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.6; }

/* The scorecard, a tee at a time. */
.cp-card { margin-top: var(--ff-space-8); padding-top: var(--ff-space-16); border-top: 1px solid var(--ff-line); }
.cp-tees { display: flex; gap: var(--ff-space-8); margin: 0 -20px var(--ff-space-12); padding: 2px 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; }
.cp-tees::-webkit-scrollbar { display: none; }
.cp-tee { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line-control); border-radius: var(--ff-radius-pill); font: 700 15px / 1 var(--ff-font-display); scroll-snap-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cp-tee[aria-pressed="true"] { color: var(--ff-ink); background: var(--ff-paper); border-color: var(--ff-paper); }
.cp-tee__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tee, var(--ff-text-3)); box-shadow: 0 0 0 1.5px rgba(243, 240, 232, .4); }
.cp-tee__par { color: inherit; opacity: .62; font: 700 12px / 1 var(--ff-font-ui); }
.cp-tee-meta { margin: 0 0 var(--ff-space-12); color: var(--ff-text-2); font: 600 12px / 1.2 var(--ff-font-ui); font-variant-numeric: tabular-nums; }
.cp-sc { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.cp-sc th, .cp-sc td { height: 46px; padding: 0; text-align: center; font: 400 16px / 1 var(--ff-font-ui); }
.cp-sc thead th { height: 38px; color: var(--ff-text-3); font: 700 10px / 1 var(--ff-font-ui); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cp-sc__hole + .cp-sc__hole > * { border-top: 1px solid rgba(255, 255, 255, .05); }
.cp-sc__no { color: var(--ff-paper); font-weight: 600 !important; }
.cp-sc__par, .cp-sc__si { color: var(--ff-text-2); }
td.cp-sc__len { color: var(--ff-paper); font-size: 18px; }
.cp-sc__hole--alt > * { height: 40px; color: var(--ff-text-3) !important; background: rgba(255, 255, 255, .02); }
.cp-sc__alt { display: block; margin-top: 3px; font: 800 9px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.cp-sc__sum > * { height: 44px; color: var(--ff-paper); font-weight: 600 !important; background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cp-sc__sum th { font: 700 11px / 1 var(--ff-font-ui) !important; letter-spacing: .1em; text-transform: uppercase; }
.cp-sc__sum--total > * { height: 54px; background: rgba(255, 255, 255, .1); border-bottom: 0; }
.cp-sc__sum--total td.course-fig { font-size: 20px; }
.cp-sc-alts { margin: 0; padding: 12px; color: var(--ff-text-3); font: 600 12px / 1.4 var(--ff-font-ui); border-top: 1px solid rgba(255, 255, 255, .1); }

/* The printed card, landscape (the default): one strip, holes 1 to 18 across with Out, In and Tot in
   line, the chosen tee's metres, par and SI down the side; the labels held at the left while the strip
   scrolls sideways, a fade at the right edge saying there is more. */
.cp-sc-card--card { position: relative; margin: 0 -20px; overflow: visible; background: none; border: 0; border-radius: 0; }
.cp-scl-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: rgba(255, 255, 255, .03); border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, .35)); mask-image: linear-gradient(to right, #000 calc(100% - 28px), rgba(0, 0, 0, .35)); }
.cp-scl-wrap[data-end="true"] { -webkit-mask-image: none; mask-image: none; }
.cp-scl-wrap::-webkit-scrollbar { display: none; }
.cp-scl { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.cp-scl col.cp-scl__c-label { width: 74px; }
.cp-scl col.cp-scl__c-hole { width: 36px; }
.cp-scl col.cp-scl__c-sum { width: 52px; }
.cp-scl th, .cp-scl td { min-width: 0; height: 40px; padding: 0; overflow: hidden; text-align: center; white-space: nowrap; font: 500 15px / 1 var(--ff-font-ui); letter-spacing: -.02em; color: var(--ff-paper); }
.cp-scl td + td, .cp-scl th + th, .cp-scl th + td { border-left: 1px solid rgba(255, 255, 255, .06); }
.cp-scl thead th { height: 32px; color: var(--ff-text-2); font: 800 13px / 1 var(--ff-font-ui); background: rgba(255, 255, 255, .06); }
.cp-scl tbody tr > * { border-top: 1px solid rgba(255, 255, 255, .06); }
.cp-scl .cp-scl__label { position: sticky; left: 0; z-index: 1; min-width: 0; padding: 0 4px 0 12px; overflow: hidden; text-align: left; text-overflow: ellipsis; color: var(--ff-text-2); font: 700 12px / 1 var(--ff-font-ui); background: #0d1a15; box-shadow: 1px 0 0 rgba(255, 255, 255, .1); }
.cp-scl thead .cp-scl__label { color: var(--ff-text-3); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; background: #121f1a; }
.cp-scl__tee-name { display: table-cell; }
/* The tee's own colour as the printed card's band down its name; its metres the strip's lead row. */
.cp-scl .cp-scl__tee-name { color: var(--ff-gold); background: #17201a; box-shadow: inset 4px 0 0 var(--tee, var(--ff-gold)), 1px 0 0 rgba(255, 255, 255, .1); }
.cp-scl__tee > td { color: var(--ff-paper); font-weight: 700; background: rgba(232, 185, 79, .08); }
.cp-scl__par > td { font-weight: 700; }
.cp-scl__si > td { color: var(--ff-text-3); font-size: 13px; }
.cp-scl .cp-scl__sum { min-width: 0; padding: 0 3px; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, .07); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.cp-scl thead .cp-scl__sum { color: var(--ff-paper); }
.cp-scl .cp-scl__sum--total { background: rgba(255, 255, 255, .12); }
.cp-scl__tee > .cp-scl__sum { background: rgba(232, 185, 79, .16); }
.cp-scl .cp-scl__alt { color: var(--ff-text-3); font-style: italic; background: rgba(255, 255, 255, .02); }
.cp-scl thead .cp-scl__alt { font-size: 11px; }
@media (min-width: 800px) { .cp-sc-card--card { margin: 0; } .cp-scl-wrap { border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; } .cp-scl .cp-scl__label { padding-left: 14px; } }
/* The hole preview leads the page. */
.cp > .cp-holes:first-child .club-sc-bar { margin-top: var(--ff-space-8); }
.cp > .cp-holes:first-child + .cp-hero { margin-top: var(--ff-space-16); }

/* The holes: one card each, flicked across. */
.cp-holes { margin-top: var(--ff-space-8); }
.cp-flick__nav { display: inline-flex; align-items: center; gap: 4px; }
.cp-flick__count { min-width: 64px; color: var(--ff-paper); font-size: 20px; text-align: center; }
.cp-flick__step { width: 40px; height: 40px; }
.cp-flick__step[disabled] { opacity: .3; }
.cp-flick__glyph { display: block; width: 20px; height: 20px; }
.cp-flick__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.6; }
.cp-flick { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.cp-flick::-webkit-scrollbar { display: none; }
.cp-flick:focus-visible { box-shadow: inset 0 0 0 2px var(--ff-action); }
.cp-hole { position: relative; flex: 0 0 calc(100% - 28px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: radial-gradient(110% 90% at 50% 40%, #10251b 0%, var(--ff-ink) 100%); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-16); scroll-snap-align: start; }
@media (min-width: 800px) { .cp-flick { margin: 0; padding: 0; scroll-padding-inline: 0; } .cp-hole { flex-basis: calc((100% - 16px) / 3); transition: border-color var(--ff-dur-state) var(--ff-ease-state); } .cp-hole[data-current="true"] { border-color: var(--ff-action); } }
.cp-hole__map, .cp-hole__map .hm { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cp-hole__map::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; background: linear-gradient(to bottom, rgba(7, 17, 14, .62), rgba(7, 17, 14, 0)); pointer-events: none; }
.cp-hole__none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ff-text-3); font: 700 15px / 1 var(--ff-font-ui); }
.cp-hole__head { position: absolute; left: 12px; right: 12px; top: 12px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 2px; pointer-events: none; }
.cp-hole__flag { grid-row: 1 / 3; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; color: var(--ff-ink); background: var(--ff-gold); border-radius: 12px 12px 12px 3px; font-size: 26px; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.cp-hole__par { color: var(--ff-paper); font: 800 13px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.cp-hole__len { grid-row: 1 / 3; grid-column: 3; color: var(--ff-paper); font-size: 38px; line-height: .9; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.cp-hole__unit { margin-left: 2px; font-size: 16px; }
.cp-hole__si { grid-column: 2; color: var(--ff-text-2); font: 700 12px / 1 var(--ff-font-ui); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
/* Play the hole in its card (hole-play.js): a tap drops an aim point, its arcs every 10 m round the
   shot's start (five short, the aim in gold, two past), labelled on the ground in the fat figures
   with a dark halo; the HUD under the hole carries the shot and front / centre / back, set heavy and
   italic as the round's card sets its figures. A finger held still plays; a fast swipe flicks. */
.cp-hole { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cp-hole__head { z-index: 3; }
.cp-hole { container-type: inline-size; }
.cp-fresh { display: flex; align-items: center; gap: 8px; margin: var(--ff-space-8) 0 0; color: var(--ff-text-3); font-size: 12px; }
.hp { position: absolute; inset: 0; z-index: 2; touch-action: manipulation; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.hp[hidden] { display: none; }
.hp-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hp-arc-case { fill: none; stroke: rgba(7, 17, 14, .55); stroke-width: 3.6px; stroke-linecap: round; }
.hp-arc { fill: none; stroke: var(--ff-paper); stroke-width: 1.4px; stroke-linecap: round; stroke-opacity: .62; }
.hp-arc[data-near="true"] { stroke-opacity: .85; }
.hp-arc--past { stroke-dasharray: 4 4; }
.hp-arc--aim { stroke: var(--ff-gold); stroke-width: 2.6px; stroke-opacity: 1; }
.hp-arc__label, .hp-leg__label { fill: var(--ff-paper); font: italic 800 12px / 1 var(--ff-font-figure); letter-spacing: -.02em; paint-order: stroke; stroke: #07110e; stroke-width: 3.2px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.hp-arc__label--short, .hp-arc__label--past { fill-opacity: .9; }
.hp-arc__label--aim { fill: var(--ff-gold); font-size: 16px; font-weight: 900; stroke-width: 3.8px; }
.hp-leg__label { font-size: 14px; }
.hp-line-case { fill: none; stroke: rgba(7, 17, 14, .6); stroke-width: 4.6px; stroke-linecap: round; stroke-linejoin: round; }
.hp-line { fill: none; stroke: var(--ff-paper); stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }
.hp-on { fill: none; stroke: var(--ff-paper); stroke-width: 1.6px; stroke-dasharray: 2 5; stroke-linecap: round; stroke-opacity: .8; }
.hp-marks { position: absolute; inset: 0; pointer-events: none; }
.hp-mark { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; background: none; border: 0; pointer-events: auto; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.hp-mark__disc { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ff-ink); background: var(--ff-paper); border: 2px solid #07110e; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform var(--ff-dur-press) var(--ff-ease-state); }
.hp-mark__no { font: italic 900 12px / 1 var(--ff-font-figure); }
.hp-mark[data-active="true"] .hp-mark__disc { width: 26px; height: 26px; background: var(--ff-gold); box-shadow: 0 0 0 3px rgba(232, 185, 79, .35), 0 3px 8px rgba(0, 0, 0, .55); }
.hp-mark.is-dragging { cursor: grabbing; }
.hp-mark.is-dragging .hp-mark__disc { transform: scale(1.25); }
.hp-mark:focus-visible { outline: none; }
.hp-mark:focus-visible .hp-mark__disc { box-shadow: 0 0 0 3px var(--ff-action); }
.hp-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: 10px; min-height: 58px; padding: 22px 10px 10px 14px; box-sizing: border-box; color: var(--ff-paper); background: linear-gradient(to top, rgba(7, 17, 14, .92) 0%, rgba(7, 17, 14, .8) 55%, rgba(7, 17, 14, 0) 100%); pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.hp-hud > * { pointer-events: auto; }
.hp-hint { flex: 1; margin: 0; color: var(--ff-text-2); font: 700 13px / 1.2 var(--ff-font-ui); letter-spacing: .02em; pointer-events: none !important; }
.hp-hud[data-state="play"] .hp-hint, .hp-hud[data-state="idle"] .hp-shot, .hp-hud[data-state="idle"] .hp-green, .hp-hud[data-state="idle"] .hp-reset { display: none; }
.hp-hud[hidden] { display: none; }
.hp-shot { display: grid; gap: 3px; min-width: auto; margin-right: auto; pointer-events: none !important; }
.hp-shot__fig { color: var(--ff-gold); font-size: 38px; font-weight: 900; line-height: .85; letter-spacing: -.05em; }
.hp-shot__fig small { margin-left: 2px; font-size: 15px; letter-spacing: 0; }
.hp-shot__cap { overflow: hidden; color: var(--ff-text-2); font: 800 10px / 1 var(--ff-font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.hp-green { display: flex; align-items: flex-end; gap: 9px; pointer-events: none !important; }
.hp-g { display: grid; justify-items: center; gap: 3px; }
.hp-g__fig { font-size: 21px; font-weight: 900; line-height: .9; letter-spacing: -.04em; }
.hp-g--centre .hp-g__fig { font-size: 30px; }
.hp-g__label { color: var(--ff-text-2); font: 800 9px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.hp-reset { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 0 0 1px; padding: 0; color: var(--ff-paper); background: rgba(243, 240, 232, .1); border: 1px solid var(--ff-line-control); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hp-reset:active { transform: scale(var(--ff-press-scale)); }
.hp-reset__glyph { display: block; width: 18px; height: 18px; }
.hp-reset__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.4; }
/* A narrow card (three across on a desktop, a small phone): the figures step down so the HUD never
   overlaps itself; the narrowest drops the front and back labels' room to the figures alone. */
@container (max-width: 330px) {
  .hp-hud { gap: 6px; padding: 18px 8px 8px 10px; }
  .hp-shot__fig { font-size: 30px; }
  .hp-shot__fig small { font-size: 12px; }
  .hp-green { gap: 6px; }
  .hp-g__fig { font-size: 17px; }
  .hp-g--centre .hp-g__fig { font-size: 23px; }
  .hp-g__label { font-size: 8px; letter-spacing: .06em; }
  .hp-reset { width: 30px; height: 30px; }
  .hp-reset__glyph { width: 15px; height: 15px; }
}
@container (max-width: 250px) {
  .hp-shot__fig { font-size: 25px; }
  .hp-g__fig { font-size: 15px; }
  .hp-g--centre .hp-g__fig { font-size: 19px; }
  .hp-shot__cap { font-size: 8px; letter-spacing: .04em; }
}
/* Your history on the hole card (hole-history.js; operator 2026-10-31, broadcast HUD as the cue,
   our design system as the look). A scrim band across the bottom: the last scores, newest first, as
   the score page's own marks (.club-mark, sized by club-mark--band in ff-components.css), and the golfer's average there
   in the round's italic figures. On the hole, each round's tee shot where it finished, as the same
   mark, small, its score inside (a small plain dot in the colour of its points, no figure;
   --ff-scorecard-*), and the tee-shot split as a callout. It steps back while the hole is played: the band goes, the dots dim.
   The band is the History band component (ff-components.css, ui/hole-history-band.js); the card lays it over its foot. */
.cp-hole .cp-hist { position: absolute; left: var(--ff-space-8); right: var(--ff-space-8); bottom: var(--ff-space-8); z-index: 3; pointer-events: none; transition: opacity var(--ff-dur-state) var(--ff-ease-state), transform var(--ff-dur-state) var(--ff-ease-state); }
/* With history the band is the card's foot: the idle hint gives it the room (play brings the HUD back). */
.cp-hole[data-history] .hp-hud[data-state="idle"] { display: none; }
.cp-hole[data-play="true"] .cp-hist { opacity: 0; transform: translateY(6px); }
.cp-hole[data-play="true"] .cp-hist-split { opacity: 0; }
.cp-hist-split { position: absolute; z-index: 2; display: flex; gap: 1px; overflow: hidden; color: var(--ff-paper); background: var(--ff-line); border: var(--ff-border) solid var(--ff-line); border-radius: var(--ff-radius-8); box-shadow: var(--ff-e1); transform: translate(-50%, -50%); pointer-events: none; transition: opacity var(--ff-dur-state) var(--ff-ease-state); }
.cp-hist-split__cell { display: grid; justify-items: center; gap: 3px; min-width: 40px; padding: 5px 6px 5px; background: var(--ff-scrim); }
.cp-hist-split__fig { font-size: 18px; font-weight: 900; line-height: .9; }
.cp-hist-split__cell[data-side="fairway"] .cp-hist-split__fig { color: var(--ff-score-under); }
.cp-hist-split__label { color: var(--ff-text-2); font: var(--ff-weight-heavy) 8px / 1 var(--ff-font-ui); letter-spacing: .1em; text-transform: uppercase; }
.hm-hist { transition: opacity var(--ff-dur-state) var(--ff-ease-state); }
.cp-hole[data-play="true"] .hm-hist { opacity: .3; }
/* Each round's tee shot: a small plain dot in the colour of its points on the hole, no figure. */
.hm-hist__shape { fill: var(--ff-points-none); }
.hm-hist__dot[data-points="4"] .hm-hist__shape { fill: var(--ff-points-4); }
.hm-hist__dot[data-points="3"] .hm-hist__shape { fill: var(--ff-points-3); }
.hm-hist__dot[data-points="2"] .hm-hist__shape { fill: var(--ff-points-2); }
.hm-hist__dot[data-points="1"] .hm-hist__shape { fill: var(--ff-points-1); }
.hm-hist__dot[data-points="0"] .hm-hist__shape { fill: var(--ff-points-0); }
.hm-hist__dot[data-score="par"] .hm-hist__callout-leader { fill: none; stroke: var(--ff-paper); stroke-opacity: .85; stroke-width: 1.4px; stroke-dasharray: 0.1 3.5; stroke-linecap: round; }
@container (max-width: 330px) {
  .cp-hist { padding: 8px 10px 9px; }
  .cp-hist__marks { gap: 7px; }
  .cp-hist__avg { font-size: 28px; }
  .cp-hist__stat { margin-left: 8px; padding-left: 8px; }
}
/* Three across on a desktop: two rows, the balls across the top and the average under them in one line. */
@container (max-width: 300px) {
  .cp-hist { grid-template-columns: minmax(0, 1fr); row-gap: 7px; padding: 8px 9px; }
  .cp-hist__last > .cp-hist__label { display: none; }
  .cp-hist__marks { gap: 7px; }
  .cp-hist__stat { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 7px 0 0; border-left: 0; border-top: var(--ff-border) solid var(--ff-line); }
  .cp-hist__stat .cp-hist__label { order: -1; margin-right: auto; }
  .cp-hist__avg { font-size: 22px; }
}
.cp-scrub { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; margin: var(--ff-space-12) 0 0; touch-action: pan-y; }
.cp-scrub__dot { display: grid; place-items: center; min-width: 0; height: 36px; padding: 0; color: var(--ff-text-3); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cp-scrub__dot span { display: grid; place-items: center; width: 100%; max-width: 26px; height: 6px; overflow: hidden; color: transparent; background: rgba(243, 240, 232, .16); border-radius: 3px; font: 800 11px / 1 var(--ff-font-ui); transition: height var(--ff-dur-state) var(--ff-ease-state), background-color var(--ff-dur-state) var(--ff-ease-state); }
.cp-scrub__dot[aria-current="true"] span { height: 24px; color: var(--ff-ink); background: var(--ff-action); }
.hm-line { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.5px; stroke-dasharray: 3 5; stroke-linecap: round; }
.hm-pole { stroke: var(--ff-paper); stroke-width: 1.8px; stroke-linecap: round; }
.hm-pole-shadow { fill: rgba(0, 0, 0, .35); }
.hm-pennant { fill: var(--ff-gold); }
.hm-cup { fill: var(--ff-ink); }
/* A hole in Aerial: the map crisp on top, the tiles muted beneath where the rough was. */
.hm--aerial .hr-rough, .hs-svg--aerial .hr-rough { fill: var(--ff-ink); }
.hm--aerial .hr-mottle, .hs-svg--aerial .hr-mottle, .hm--aerial .hr-cut, .hs-svg--aerial .hr-cut { display: none; }
.hm--aerial .hs-map__fairway, .hs-svg--aerial .hs-map__fairway { fill-opacity: .8; stroke: #a9f04d; stroke-opacity: .5; stroke-width: 1.2px; paint-order: normal; }
.hm--aerial .hs-map__water, .hs-svg--aerial .hs-map__water { fill-opacity: .85; stroke: #78c8e6; }
.hm--aerial .hs-map__wasteArea, .hs-svg--aerial .hs-map__wasteArea { fill-opacity: .55; }
.hm--aerial .hs-map__green, .hs-svg--aerial .hs-map__green { stroke: var(--ff-paper); stroke-width: 1.6px; paint-order: normal; }
.hm--aerial [data-mine="false"], .hs-svg--aerial [data-mine="false"] { opacity: .5; }

/* The hole view on a course with all three levels: the switch above the hole, the tiles under it
   in Aerial, the 3D course over it (shots are placed in 2D or Aerial). */
.hs-views-row { display: flex; justify-content: flex-end; margin: 0 0 var(--ff-space-8); padding: 0 20px; }
.hs-views { background: var(--ff-surface); }
.hs-views .cvs__option { min-height: 36px; }
.hs-viewwait { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hs-3d { position: absolute; inset: 0; z-index: 6; background: var(--ff-ink); }
.hs-3d__view { position: absolute; inset: 0; touch-action: none; }
.hs-3d__bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.hs-3d__step { background: rgba(7, 17, 14, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hs-3d__glyph { display: block; width: 20px; height: 20px; }
.hs-3d__glyph svg { display: block; width: 100%; height: 100%; stroke-width: 3.6; }
.hs-3d__angles { position: absolute; left: 50%; top: 12px; translate: -50% 0; z-index: 1; }
.hs-3d__note { justify-self: center; margin: 0; padding: 8px 14px; color: var(--ff-paper); background: rgba(7, 17, 14, .6); border-radius: var(--ff-radius-pill); font: 700 13px / 1.2 var(--ff-font-ui); text-align: center; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }


/* My Scores: the round's course, opening its preview. */
.club-course-chip { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: var(--ff-space-8) 0 var(--ff-space-4); padding: 4px 10px 4px 4px; font: inherit; text-align: left; color: var(--ff-paper); background: var(--ff-surface); border: 1px solid var(--ff-line-control); border-radius: var(--ff-radius-12); cursor: pointer; }
.club-course-chip:active { background: var(--ff-surface-raised); }
.club-course-chip__art { position: relative; display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 9px; background: var(--ff-ink); }
.club-course-chip__art .course-art__mark { display: none; }
.club-course-chip__art .course-art__initials { font-size: 15px; }
.club-course-chip__text { display: grid; min-width: 0; }
.club-course-chip__label { color: var(--ff-text-3); font: 800 10px / 1.2 var(--ff-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.club-course-chip__name { overflow: hidden; font: 700 15px / 1.2 var(--ff-font-display); text-overflow: ellipsis; white-space: nowrap; }
.club-course-chip__chev { width: 18px; height: 18px; color: var(--ff-text-3); }
.club-course-chip__chev svg { display: block; width: 100%; height: 100%; }

/* On Course (4.5): before the hole, the wait and the pick of courses. Then the screen is Caddy's On Course,
   full screen (oncourse/on-course.css), and the host's bars step aside while it shows. */
.oc-wait, .oc-pick { margin: var(--ff-space-24) auto; padding: 0 var(--ff-space-16); }
.oc-pick { display: grid; gap: var(--ff-space-12); max-width: 560px; }
.oc-pick__head { margin: 0; }
.oc-pick__why { margin: 0; }
.oc-pick__tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--ff-space-8); }
.oc-pick .ff-icon { display: block; overflow: hidden; }
.oc-pick .ff-icon svg, .oc-pick .ff-search__icon svg { display: block; width: 100%; height: 100%; }
.oc-pick__lead { margin-left: 0; }
.oc-pick__art { position: relative; display: block; width: var(--ff-touch-min); height: var(--ff-touch-min); overflow: hidden; border-radius: var(--ff-radius-8); }
.oc-pick__art .course-art__mark { top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); }
.oc-pick__art .course-art__initials { display: none; }
.oc-pick__row .ff-list-row__title, .oc-pick__row .ff-list-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-immersive="true"] > .top, body[data-immersive="true"] .module-head { display: none; }
.rh { box-sizing: border-box; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--ff-space-8) + var(--ff-safe-top)) calc(var(--ff-space-16) + var(--ff-safe-right)) calc(var(--ff-space-16) + var(--ff-safe-bottom)) calc(var(--ff-space-16) + var(--ff-safe-left)); }
.rh-head { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ff-space-8); margin-bottom: var(--ff-space-16); padding: var(--ff-space-8); }
/* The band above the stuck header, over the page's own padding: what scrolls under it is hidden, not shown above it. */
.rh-head::before { content: ""; position: absolute; right: calc(-1 * var(--ff-space-16)); bottom: calc(100% + var(--ff-border)); left: calc(-1 * var(--ff-space-16)); height: calc(var(--ff-space-8) + var(--ff-safe-top)); background: var(--ff-ink); }
.rh-body { display: grid; gap: var(--ff-space-16); }
.rh-head .ff-icon-button .ff-icon { display: grid; }
/* My Rounds in My Scores (Brick 4.5): the same page, in the flow of My Scores rather than over the screen. */
.club-sections { margin-bottom: var(--ff-space-16); }
.club-myrounds .rh { overflow: visible; padding: 0; }
.club-myrounds .rh-head { position: static; padding: 0; }
.club-myrounds .rh-head::before { content: none; }
.rh-head[hidden] { display: none; }
.club-myrounds-open { margin: var(--ff-space-12) 0; }
/* Finish round (history.js): under the round's title and above its card, in the page flow (it never covers the card),
   how many holes are scored, Save round and Discard round (its confirmation the warn notice in the same place). */
.rh-finish { display: grid; gap: var(--ff-space-8); max-width: none; }
.round-page > .rh-finish { margin-bottom: var(--ff-space-16); } /* Save round sits between the title and the card on the one round page */
.rh-finish__count { margin: 0; color: var(--ff-text-2); text-align: center; font: var(--ff-weight-strong) var(--ff-size-14) / var(--ff-leading-tight) var(--ff-font-ui); }
/* The hole the golfer is on, on a round being played (club-scorecard.js `current`). */
.club-vc__hole[data-current="true"] > *, .club-sc [data-current="true"] { background: var(--ff-surface-raised); }

/* The hole drawn without a course map, and the flag on any hole: classes, never style attributes
   (the CSP refuses those). */
.hs-draw__cut { fill: var(--ff-hole-cut); }
.hs-draw__tee { fill: var(--ff-hole-tee); stroke: var(--ff-hole-tee-edge); }
.hs-draw__fringe { fill: var(--ff-hole-fringe); }
.hs-draw__pole { stroke: var(--ff-hole-pole); stroke-width: 1.6; }
.hs-draw__flag { fill: var(--ff-hole-flag); }
.hs-draw__cup { fill: var(--ff-hole-cup); }
/* On Course's Score map (screens/on-course/round-source.js): the 3D view steps aside while the
   shared hole scoring screen shows in its place, under the host's header as in My Scores. On the 3D
   ground and in its inset, a shot the chain estimates is drawn as an estimate. */
.oc-view[data-scoremap="open"] > .ocw { display: none; }
.oc-caddy__marker[data-state="estimated"], .oc-map__shot[data-state="estimated"] { opacity: .62; }
/* The banner's score where the golfer chooses it, and the picker under the banner. */
.hs-top__pick { display: grid; place-items: center; padding: 0; color: inherit; background: none; border: 0; border-radius: var(--ff-radius-pill); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hs-top__pick:focus-visible { outline: 2px solid var(--ff-gold); outline-offset: 2px; }
.hs-top .ff-score-picker { grid-column: 1 / -1; position: relative; }
/* The green close up: the pin's badge, each putt's label and the slope's legend. */
.hs-greenview .hs-pin-badge, .hs-greenview .hs-putt-tag { translate: -50% -50%; }
.hs-putt-tag[hidden] { display: none; }
.hs-greenview[data-settled="true"] .hs-putt-tag { transition: transform 160ms var(--ff-ease-state); }
.hs-slope-key { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 7; pointer-events: none; }