/* FairwaySync — components. Big targets, high contrast, still by default. */

/* The [hidden] attribute must always win, even over components that set their
   own display (.btn, .pill, .notice, flex/grid rows). Without this, toggling
   `el.hidden = true` on such elements does nothing. */
[hidden] { display: none !important; }

.wrap {
  max-width: 640px;
  margin: 0 auto;
  /* The status bar's height goes above a plain page; a page that starts
     with a cover takes it into the cover instead (the photo hugs the top). */
  padding: calc(var(--space-4) + var(--inset-top)) var(--space-3) var(--space-4);
}
body.has-cover .wrap, .wrap:has(> .ev-cover:first-child), .wrap:has(> .cr-cover:first-child) { padding-top: 0; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--pine-ink);
  background: linear-gradient(180deg, var(--accent-hi), var(--pine) 55%, var(--accent-lo));
  cursor: pointer;
  width: 100%;
  box-shadow: 0 6px 18px var(--glow), 0 2px 4px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); filter: brightness(0.96); box-shadow: 0 2px 8px var(--glow), inset 0 2px 4px rgba(0, 0, 0, 0.25); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }
.btn.secondary {
  background: linear-gradient(180deg, var(--sec-hi), var(--sec-lo));
  color: var(--sec-ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  border: 1px solid var(--sand);
}
.btn.ghost {
  background: color-mix(in srgb, var(--pine) 7%, transparent);
  color: var(--pine);
  border: 1px solid color-mix(in srgb, var(--pine) 40%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn.ghost:hover { background: color-mix(in srgb, var(--pine) 14%, transparent); }
.btn.live {
  background: linear-gradient(180deg, var(--flag-hi), var(--flag) 55%, var(--flag-lo));
  color: var(--flag-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--flag) 35%, transparent), 0 2px 4px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn.big { min-height: 76px; font-size: 24px; letter-spacing: 0.01em; border-radius: var(--radius-lg); }

/* --- Inputs ---------------------------------------------------------------- */
label { display: block; font-weight: 600; margin: 0 0 var(--space-1); color: var(--graphite); }
.field { margin-bottom: var(--space-3); }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="email"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font-size: 18px;
  font-family: var(--font-body);
  color: var(--graphite);
  background: var(--field);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);   /* recessed, not raised */
}
input::placeholder { color: var(--fescue-dim); }
input:focus, select:focus, textarea:focus {
  border-color: var(--pine);
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 3px color-mix(in srgb, var(--pine) 18%, transparent);
}
textarea { min-height: 110px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.45; }

.code-input { font-family: var(--font-mono); letter-spacing: 0.35em; text-transform: uppercase; font-size: 24px; text-align: center; }

/* --- Cards / header -------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--sand);
  margin-bottom: var(--space-3);
}
.masthead h1 { font-size: 28px; color: var(--pine); letter-spacing: 0.02em; }
.masthead .clock { font-family: var(--font-mono); color: var(--graphite-2); font-size: 15px; white-space: nowrap; }

.card {
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo) 85%);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}

.hint { color: var(--graphite-2); font-size: 15px; margin: var(--space-2) 0; }

/* Prominent code display (join code / host code). */
.codebox {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--field); border: 1px solid color-mix(in srgb, var(--pine) 30%, transparent); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 18px color-mix(in srgb, var(--pine) 8%, transparent);
}
.codebox-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--graphite-2); }
.codebox-val { font-size: 30px; font-weight: 500; letter-spacing: 0.2em; color: var(--pine); }
.err { color: var(--flag); font-weight: 600; min-height: 1.2em; margin: var(--space-2) 0; }

/* --- The Grounds (scorecard directory) ------------------------------------- */
.scorecard { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--sand);   /* sand hairline rule, like a real card */
  min-height: var(--tap);
  cursor: pointer;
}
.row.off { cursor: default; }
/* An off-air row is NOT a disabled row: the pairing, the match status and the
   nine-hole chips are live information whether or not anyone is streaming.
   Only the flag icon dims — the "off air" badge already tells the story. */
.row.off .flagcol { opacity: 0.45; }
.row .flagcol { width: 30px; display: flex; justify-content: center; }
.row .slot { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--pine); }
.row .title { grid-column: 2; color: var(--graphite-2); font-size: 15px; }
.row .status { justify-self: end; text-align: right; }
.row .hole { grid-column: 3; justify-self: end; font-family: var(--font-mono); font-size: 14px; color: var(--graphite-2); }
.badge-live { color: var(--flag); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; }
.badge-off { color: var(--fescue); font-size: 14px; font-weight: 600; }
/* Marks a row from a session other than the one currently being played. */
.sess-tag {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--graphite-2); background: var(--sand);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.watching { font-family: var(--font-mono); font-size: 14px; color: var(--graphite-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--flag); display: inline-block; }

/* --- Flagstick (the one piece of motion) ----------------------------------- */
.flag-svg { width: 22px; height: 28px; display: block; }
.flag-svg .cloth { transform-origin: left center; animation: flutter 2s ease-in-out infinite; }
@keyframes flutter {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50%      { transform: skewY(-6deg) scaleX(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .flag-svg .cloth { animation: none; }
}

/* --- Watch screen ---------------------------------------------------------- */
.stage { position: fixed; inset: 0; background: #000; overflow: hidden; }
.stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay > * { pointer-events: auto; }
.chrome-tl { position: absolute; top: calc(var(--inset-top) + 12px); left: 12px; }
.chrome-tr { position: absolute; top: calc(var(--inset-top) + 12px); right: 12px; display: flex; gap: 8px; align-items: center; }
.pill {
  background: rgba(6, 12, 9, 0.72);
  color: #F2F7F3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.pill .mono { font-size: 14px; }
.iconbtn {
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 12, 9, 0.72);
  color: #F2F7F3;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

/* Bottom rail of other live groups. */
.rail {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--inset-bottom) + 10px);
  display: flex; gap: 10px; overflow-x: auto;
  padding: 10px 12px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.railcard {
  flex: 0 0 auto; min-width: 132px; min-height: 60px;
  scroll-snap-align: start;
  background: rgba(6, 12, 9, 0.78);
  color: #F2F7F3;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; backdrop-filter: blur(6px);
}
.railcard.active { border-color: var(--flag); }
.railcard .rl-slot { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.railcard .rl-meta { font-family: var(--font-mono); font-size: 12px; opacity: 0.85; }

.chrome-hidden .overlay { opacity: 0; transition: opacity 0.25s ease; }
.overlay { transition: opacity 0.25s ease; }
/* The mark on live video.
   Outside .overlay on purpose, so tapping to hide the chrome leaves it in
   place: a screen recording is the only way a live group travels, and it's
   the clean frame people record. It clears the rail rather than sitting under
   it. Not burned into the published stream — see js/watermark.js for why
   that trade isn't worth a broadcaster's battery. */
.brandmark {
  position: absolute;
  right: 12px;
  bottom: calc(var(--inset-bottom) + 98px);
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(8, 20, 14, 0.46);
  border: 1px solid rgba(247, 245, 236, 0.16);
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 3;
}
.brandmark .bm-flag { width: 13px; height: 17px; display: block; }
.brandmark .bm-word {
  font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.09em;
  color: #F7F5EC;
  line-height: 1;
}


/* --- Broadcast screen ------------------------------------------------------ */
.preview-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 9; margin-bottom: var(--space-3); }
.preview-wrap video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.hole-stepper { display: flex; align-items: center; gap: var(--space-3); }
.hole-stepper button {
  width: var(--tap); height: var(--tap); font-size: 26px; border-radius: var(--radius);
  border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  color: var(--graphite); font-family: var(--font-mono); cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.hole-stepper .hole-val { font-family: var(--font-mono); font-size: 30px; min-width: 2ch; text-align: center; }

.notice {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pine) 14%, transparent), color-mix(in srgb, var(--pine) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--pine) 35%, transparent);
  color: var(--graphite);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 15px;
  margin-bottom: var(--space-3);
  display: block;   /* inline <strong> must flow, not become flex columns */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.notice.warn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--flag) 16%, transparent), color-mix(in srgb, var(--flag) 6%, transparent));
  border-color: color-mix(in srgb, var(--flag) 40%, transparent);
}

.live-stats { display: flex; gap: var(--space-4); align-items: center; margin: var(--space-3) 0; }

/* The console's at-a-glance board: tidy recessed tiles instead of a loose
   flex row. Numbers carry the color — live gets the flag, attention (open
   tickets) gets it too. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: var(--space-2); }
.stat-grid .stat {
  background: var(--field);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-1);
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.07);
}
.stat-grid .stat .n { font-family: var(--font-mono); font-size: 24px; display: block; color: var(--pine); line-height: 1.2; }
.stat-grid .stat .l { font-size: 11px; color: var(--graphite-2); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-grid .stat.hot { border-color: color-mix(in srgb, var(--flag) 45%, transparent); }
.stat-grid .stat.hot .n { color: var(--flag); }
.stat-grid .stat.quiet .n { color: var(--graphite-2); }
.stat { text-align: center; }
.stat .n { font-family: var(--font-mono); font-size: 26px; display: block; }
.stat .l { font-size: 12px; color: var(--graphite-2); text-transform: uppercase; letter-spacing: 0.05em; }
.quality { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.quality .q-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fescue); }
.quality.poor .q-dot { background: var(--flag); }
.quality.good .q-dot { background: var(--pine); box-shadow: 0 0 8px var(--glow); }

/* Toast / connection banners. */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--inset-bottom) + 16px);
  background: var(--graphite); color: var(--card-hi);
  padding: 12px 18px; border-radius: 999px;
  font-size: 15px; z-index: 50; box-shadow: var(--shadow);
  max-width: 90vw; text-align: center;
}
.toast.warn { background: var(--flag); color: var(--flag-ink); }

/* Usage meter (LiveKit free-tier burn). */
.meter { height: 12px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.meter-fill { height: 100%; width: 0%; background: var(--fescue); border-radius: 999px; transition: width 0.3s ease; }
.meter-fill.warn { background: #d08a3c; }
.meter-fill.danger { background: var(--flag); }
.usage-row { display: flex; justify-content: space-between; gap: var(--space-2); padding: 4px 0; border-bottom: 1px solid var(--sand); font-size: 14px; }
.usage-row .mono { color: var(--graphite-2); }

/* --- New-version banner ---------------------------------------------------- */
.update-bar {
  position: fixed; z-index: 100;
  left: 12px; right: 12px;
  bottom: calc(var(--inset-bottom) + 12px);
  max-width: 616px; margin: 0 auto;
  background: var(--pine); color: var(--card-hi);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 20px var(--glow);
  padding: var(--space-2) var(--space-3);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.update-bar .ub-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.update-bar .ub-text strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.update-bar .ub-text span { font-size: 14px; opacity: 0.85; }
.update-bar .ub-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.update-bar .ub-btn {
  min-height: 48px; padding: 0 var(--space-3);
  border-radius: var(--radius); border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer;
}
.update-bar .ub-later { background: transparent; color: var(--card-hi); border-color: rgba(4, 18, 12, 0.35); }
.update-bar .ub-now { background: var(--card-hi); color: var(--pine); }

.row-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.slot-grid .slot-btn {
  min-height: var(--tap); border: 1px solid var(--sand);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  color: var(--graphite);
  border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: 17px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.slot-grid .slot-btn:hover { transform: translateY(-1px); }
.slot-grid .slot-btn.sel {
  background: linear-gradient(180deg, var(--accent-hi), var(--pine) 55%, var(--accent-lo));
  color: var(--pine-ink); border-color: transparent;
  box-shadow: 0 4px 14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.slot-grid .slot-btn.taken { opacity: 0.4; cursor: not-allowed; }

.center { text-align: center; }
.stack > * + * { margin-top: var(--space-3); }
/* A line bound to the thing directly above it — a hint that reads as the
   subtitle of its own heading. Everything else in a .stack gets the stack's
   spacing, and should: `style="margin:0"` was being used for both, so
   explanatory text under a BUTTON ended up flush against it. Say which one
   you mean instead.

   `.stack > .tight` rather than `.tight`: specificity beats source order, so
   a bare class would lose to `.stack > * + *` however late it appeared. */
.stack > .tight { margin-top: 0; }
.muted { color: var(--graphite-2); }

/* --- Scoreboard: the two-team total banner --------------------------------- */
.teamboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  background:
    radial-gradient(80% 160% at 50% 0%, color-mix(in srgb, var(--pine) 16%, transparent), color-mix(in srgb, var(--pine) 2%, transparent) 60%, transparent),
    linear-gradient(180deg, var(--card-hi), var(--card-lo));
  color: var(--graphite);
  border: 1px solid color-mix(in srgb, var(--pine) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow), 0 0 30px color-mix(in srgb, var(--pine) 8%, transparent);
}
.teamboard .tb-team { display: flex; flex-direction: column; }
.teamboard .tb-team.b { text-align: right; align-items: flex-end; }
.teamboard .tb-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
.teamboard .tb-pts { font-family: var(--font-mono); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.teamboard .tb-dash { font-family: var(--font-mono); font-size: 24px; opacity: 0.5; }
.teamboard .tb-lead .tb-pts { color: var(--pine); text-shadow: 0 0 16px var(--glow); }  /* the leader glows */
.tb-caption { text-align: center; font-size: 12px; color: var(--graphite-2); margin: -6px 0 var(--space-3); letter-spacing: 0.03em; text-transform: uppercase; }

/* Per-session breakdown under the total banner. */
.sessboard { margin-bottom: var(--space-3); }
.sess-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--sand);
}
.sess-row.active { background: color-mix(in srgb, var(--pine) 8%, transparent); border-radius: var(--radius); }
.sess-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--graphite); }
.sess-now { color: var(--fescue); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sess-score { font-size: 16px; color: var(--pine); }
.sess-worth { font-size: 13px; color: var(--graphite-2); }

/* Per-group match status on the scorecard rows. */
.row .match { grid-column: 2; }
.match-status { font-family: var(--font-mono); font-size: 14px; color: var(--graphite); }
.match-status .lead-a { color: var(--pine); font-weight: 500; }
.match-status .lead-b { color: var(--fescue); font-weight: 600; }
.match-status .as { color: var(--graphite-2); }
.match-status .final-tag { color: var(--graphite-2); }

/* Watch-screen score pill (sits under the title pill). */
.chrome-tl .pill.pairpill { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; max-width: 78vw; }
.pairpill .pair-side { display: inline-flex; gap: 6px; align-items: baseline; }
.pairpill .pair-team { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; }
.pairpill .pair-vs { opacity: 0.6; }
.chrome-tl .pill.score { margin-top: 8px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chrome-tl .pill.score .mono { font-size: 14px; }
/* The match status is styled for the cream scorecard; on the dark video pill it
   needs light text or it's unreadable (especially in sunlight). */
.pill.score .match-status,
.pill.score .match-status .lead-a,
.pill.score .match-status .lead-b,
.pill.score .match-status .as,
.pill.score .match-status .final-tag { color: #F2F7F3; }
.pill.score .match-status .lead-a,
.pill.score .match-status .lead-b { font-weight: 700; }
.pill.score .match-status .as,
.pill.score .match-status .final-tag { opacity: 0.75; }
/* The event-wide total, set apart from this match's status. */
.mini-teams {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--font-mono); font-size: 13px;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid rgba(242, 237, 225, 0.28);
  opacity: 0.9;
}

/* --- Broadcast: score-this-hole entry -------------------------------------- */
.score-entry {
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo) 85%);
  border: 1px solid var(--sand); border-radius: var(--radius-lg); padding: var(--space-3);
  box-shadow: var(--shadow);
}
.score-entry .se-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.score-entry .se-title { font-family: var(--font-display); font-weight: 600; }
.score-entry .se-status { font-family: var(--font-mono); font-size: 15px; color: var(--pine); }
.score-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.score-btns .halve { grid-column: 1 / -1; }
.score-btn {
  min-height: var(--tap);
  border: 2px solid var(--sand);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--graphite);
  cursor: pointer;
  padding: 0 var(--space-2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.score-btn.team-a { border-color: color-mix(in srgb, var(--pine) 50%, transparent); }
.score-btn.team-b { border-color: color-mix(in srgb, var(--fescue) 60%, transparent); }
.score-btn.picked {
  background: linear-gradient(180deg, var(--accent-hi), var(--pine) 55%, var(--accent-lo));
  color: var(--pine-ink); border-color: transparent;
  box-shadow: 0 4px 14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.score-btn.team-b.picked {
  background: linear-gradient(180deg, var(--fescue-hi), var(--fescue) 60%, var(--fescue-lo));
  color: var(--pine-ink); border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fescue) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.score-btn.halve.picked {
  background: linear-gradient(180deg, var(--halve-hi), var(--halve-lo));
  color: var(--pine-ink); border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.se-hint { font-size: 13px; color: var(--graphite-2); margin-top: var(--space-2); }

/* Host scoreboard mini-grid. */
.host-match { padding: var(--space-3) 0; border-bottom: 1px solid var(--sand); }
.host-match .hm-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.host-match .hm-slot { font-family: var(--font-display); font-weight: 700; color: var(--pine); }
.host-match .hm-status { font-family: var(--font-mono); font-size: 14px; }

/* Streaming on/off toggle + final. */
.hm-stream { display: flex; gap: var(--space-2); margin: var(--space-2) 0; flex-wrap: wrap; }
.hm-stream .toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 var(--space-3);
  border-radius: 999px; border: 1px solid var(--sand);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--graphite); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hm-stream .toggle .dot2 { width: 10px; height: 10px; border-radius: 50%; background: var(--fescue); }
.hm-stream .toggle.on { border-color: var(--flag); color: var(--flag); box-shadow: 0 0 14px color-mix(in srgb, var(--flag) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.hm-stream .toggle.on .dot2 { background: var(--flag); box-shadow: 0 0 8px color-mix(in srgb, var(--flag) 70%, transparent); }
.hm-stream .hm-final { width: auto; min-height: 48px; padding: 0 var(--space-3); font-size: 15px; }

/* 18-hole strip. */
/* Nine columns, so each nine lands on its own row. The wider row gap is doing
   real work: the two rows are two separate points, not one long card. */
.hole-strip { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 4px; row-gap: 14px; margin: var(--space-2) 0; }
.hcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1; min-height: 40px; border: 1px solid var(--sand); border-radius: 8px;
  background: var(--field); cursor: pointer; padding: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hcell .hn { font-family: var(--font-mono); font-size: 10px; color: var(--graphite-2); line-height: 1; }
.hcell .hr { font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.1; }
.hcell.a { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-color: transparent; box-shadow: 0 0 10px color-mix(in srgb, var(--pine) 25%, transparent); }
.hcell.a .hn, .hcell.a .hr { color: var(--pine-ink); }
.hcell.b { background: linear-gradient(180deg, var(--fescue-hi), var(--fescue-lo)); border-color: transparent; }
.hcell.b .hn, .hcell.b .hr { color: var(--pine-ink); }
.hcell.h { background: var(--sand); box-shadow: none; }
.hcell.cur { outline: 3px solid var(--flag); outline-offset: 1px; }

.hm-entry { margin-top: var(--space-2); }
.hm-entry-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }

/* --- Event format picker (create screen) --------------------------------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 380px) { .field-row { grid-template-columns: 1fr; } }

.fmt-grid { display: grid; gap: var(--space-2); }
.fmt-opt {
  display: block; width: 100%; text-align: left;
  min-height: 56px; padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  color: var(--graphite);
  border: 1px solid var(--sand); border-radius: 10px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fmt-opt[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--pine) 55%, transparent); background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine);
  box-shadow: 0 0 16px color-mix(in srgb, var(--pine) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fmt-opt .fmt-sub { display: block; font-weight: 400; font-size: 13px; color: var(--graphite-2); margin-top: 2px; }

/* --- Stroke-play scorecard + leaderboard --------------------------------- */
.lb { width: 100%; border-collapse: collapse; }
.lb th, .lb td { padding: var(--space-2); border-bottom: 1px solid var(--sand); text-align: left; }
.lb th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fescue); font-weight: 600; }
.lb td.num, .lb th.num { text-align: right; font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
/* The position column hugs its content: right-aligned in a column that
   stretched on wide screens, the "#" drifted inward and nothing lined up
   with it. */
.lb th.num:first-child, .lb td.num:first-child { width: 1%; white-space: nowrap; text-align: left; }
.lb tr.me td { background: color-mix(in srgb, var(--pine) 8%, transparent); }
/* The group tag takes whatever the group is called, and a broadcast title can
   be a whole sentence ("Dave & Mike v Tom & Chris"). Unbounded, it wraps every
   name onto two lines and shoves Thru and Total off a phone screen. The
   numbers are what a leaderboard is for, so the tag is the thing that gives. */
.lb td .sess-tag {
  display: inline-block; max-width: 8.5em; vertical-align: -0.25em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb td:nth-child(2) { min-width: 0; }

.sp-player { border-bottom: 1px solid var(--sand); padding: var(--space-2) 0; }
.sp-player:last-child { border-bottom: 0; }
.sp-name { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.sp-name .n { font-weight: 700; color: var(--pine); }
.sp-name .t { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
/* The host can rename a player right on the card — the dashed underline and
   pencil are what say "this is editable", so don't strip them. Saves on blur. */
.sp-name .sp-rename {
  flex: 1; min-width: 0;
  font: inherit; font-weight: 700; font-size: 16px; color: var(--pine);
  background: transparent no-repeat right center / 13px 13px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23888888' d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>");
  border: 0; border-radius: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--pine) 45%, transparent);
  padding: 2px 20px 2px 0; margin: 0;
}
.sp-name .sp-rename:focus {
  outline: none; background-image: none;
  border-bottom: 1px solid var(--pine);
}
/* The stroke rail: every count is its own big themed button, scrolling
   sideways — no page-long stacks, no +/- pecking. 56px targets (gloves),
   mono digits, the picked number lit in the accent gradient. Tapping the lit
   number again clears the hole. */
.sp-picker {
  display: flex; gap: 6px; overflow-x: auto; margin-top: var(--space-2);
  padding: 4px 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-picker::-webkit-scrollbar { display: none; }
.sp-num {
  flex: 0 0 auto; min-width: 56px; min-height: 56px;
  border: 1px solid var(--sand); border-radius: 10px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--graphite);
  font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 500; cursor: pointer; scroll-snap-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sp-num.sel {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  color: var(--pine-ink); border-color: transparent;
  box-shadow: 0 0 14px color-mix(in srgb, var(--pine) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* --- Highlight clips ------------------------------------------------------ */
/* The reel sits under a group's row: one thumbnail per clip, scrolling
   left-to-right, snapping so a half-clip never sits at the edge. */
/* A quiet scorecard annotation above the strip: "HIGHLIGHTS · 3 ———". The
   trailing hairline continues the card's ruled look instead of boxing the
   reel in. */
.reel-head {
  /* Start at the content column, in line with the group name and pairing —
     not under the flag-icon gutter. */
  grid-column: 2 / -1;
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue);
  white-space: nowrap;
}
.reel-head::after { content: ''; flex: 1; border-top: 1px solid var(--sand); }

.reel {
  grid-column: 2 / -1;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-1) 2px 6px;   /* room for the thumbnails' shadows */
  margin: 0 -2px;
}
.reel::-webkit-scrollbar { height: 0; }

.reel-item {
  position: relative;
  flex: 0 0 auto;
  width: 128px; height: 80px;
  scroll-snap-align: start;
  border: 1px solid var(--sand);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  padding: 0; cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--graphite) 12%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.reel-item:hover { transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--graphite) 18%, transparent); }
.reel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The play chip says "this is a video" without waiting for a tap. */
.reel-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 11, 0.55); color: #fff;
  font-size: 12px; padding-left: 2px;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.reel-noposter {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 20px; color: var(--pine);
}
.reel-tag {
  position: absolute; left: 6px; bottom: 6px;
  background: var(--pine); color: var(--pine-ink);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Recorder + player sheet. Full-bleed on a phone; the panel keeps the video
   from stretching on a wide screen. */
.clip-sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 10, 8, 0.9);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3);
}
.clip-panel {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border-radius: 14px;
  border: 1px solid var(--sand);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.clip-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--pine); }
.clip-x { width: auto; min-height: 44px; padding: 0 var(--space-3); }
.clip-stage { position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.clip-stage video { width: 100%; max-height: 56vh; display: block; background: #000; }
/* Keep it on the clip, not the round: a clip is the one thing here somebody
   wants a personal copy of. Both buttons stay 56px for gloved hands. */
.clip-actions { margin-top: var(--space-2); }
.clip-actions .btn { flex: 1 1 0; min-width: 0; }
.clip-timer {
  position: absolute; top: 8px; right: 8px;
  background: var(--flag); color: #fff;
  padding: 2px 8px; border-radius: 6px; font-size: 14px;
}
#clipRecord.recording { background: var(--graphite); }

/* Delete affordance on the host's own clips. */
.reel-del {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(46, 46, 44, 0.85); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
}

/* --- Nine-hole segments ---------------------------------------------------
   Each nine is a point, so each gets its own chip: which side holds it, and
   whether it's locked in (the nine is over) or still in play. */
.seg-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.seg {
  font-size: 12px; line-height: 1.4;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--sand); background: var(--card); color: var(--graphite);
}
.seg b { font-family: var(--font-mono, monospace); font-weight: 500; opacity: 0.7; margin-right: 3px; }
.seg-a { border-color: var(--pine); color: var(--pine); }
.seg-b { border-color: var(--flag); color: var(--flag); }
.seg-as, .seg-none { color: var(--fescue); }
.seg-locked { background: color-mix(in srgb, var(--pine) 10%, transparent); font-weight: 600; }

/* A match someone else is already running. Not disabled — a host whose phone
   died can't hand theirs back, so taking over must always be possible. */
.slot-btn.claim-taken { border-color: var(--flag); color: var(--flag); background: var(--card); }
.slot-btn.claim-stale { border-style: dashed; color: var(--fescue); }


/* --- "How it works" steps (landing page + join screen) ---------------------- */
.sect { margin-top: var(--space-5); }
.sect > h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--pine);
  border-bottom: 2px solid var(--sand); padding-bottom: var(--space-1); }
.steps { counter-reset: step; margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.step { display: flex; gap: var(--space-3); align-items: flex-start;
  background: linear-gradient(180deg, var(--card-hi, var(--card)), var(--card-lo, var(--card)) 85%);
  border: 1px solid var(--sand); border-radius: 14px; padding: var(--space-3);
  box-shadow: var(--shadow); }
.step .n { counter-increment: step; font-family: var(--font-mono); font-weight: 500; font-size: 15px;
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hi, var(--pine)), var(--accent-lo, var(--pine)));
  color: var(--pine-ink);
  box-shadow: 0 0 12px var(--glow, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center; }
.step .n::before { content: counter(step); }
.step h3 { font-family: var(--font-display); font-size: 16px; color: var(--pine); }
.step p { font-size: 13.5px; color: var(--graphite-2); line-height: 1.5; margin-top: 2px; }
.step .mono-code { font-family: var(--font-mono); background: var(--sand); border-radius: 6px; padding: 1px 6px; }

/* --- Sub-tabs (league page) ---------------------------------------------- */
/* A segmented control under the header: My round / Standings / Run. Same
   visual language as .fmt-opt so "selected" reads the same app-wide. */
.subtabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.subtabs button {
  flex: 1; min-height: 48px; padding: var(--space-1) 6px; font-size: 13.5px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  color: var(--graphite);
  border: 1px solid var(--sand); border-radius: 10px;
  font-family: inherit; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.subtabs button[aria-pressed="true"] {
  color: var(--pine);
  border-color: color-mix(in srgb, var(--pine) 55%, transparent);
  background: color-mix(in srgb, var(--pine) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--pine) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* --- Hole-by-hole scorecard peek (Grounds rows) --------------------------- */
/* A quiet annotation-style toggle in the content column, matching .reel-head,
   unfolding a real card: holes across, one mono row per player/team. */
.sc-toggle {
  grid-column: 2 / -1; justify-self: start;
  display: inline-flex; align-items: center;
  min-height: 32px; margin-top: var(--space-1); padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue);
}
/* Two panes, zero overlap: the names are a static column OUTSIDE the scroll
   pane, and only the numbers scroll beside them — so no cell ever needs a
   background, and nothing punches a box out of the page backdrop. Row
   heights are locked so the two panes stay in step. */
.sc-wrap { grid-column: 2 / -1; display: flex; align-items: flex-start; cursor: default; }
.sc-names { flex: 0 0 auto; max-width: 96px; }
/* The names table must NOT inherit the numbers table's min-width: 100% —
   it sizes to its names; the scroll pane takes the rest. */
.sc.sc-names { width: auto; min-width: 0; }
.sc-scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sc-scroll::-webkit-scrollbar { display: none; }
.sc {
  width: max-content; min-width: 100%;
  border-collapse: separate; border-spacing: 0; margin-top: 2px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.sc th, .sc td {
  border-bottom: 1px solid var(--sand); padding: 3px 4px;
  height: 20px; line-height: 20px; box-sizing: content-box;
  text-align: center; font-size: 12px; font-weight: 400; color: var(--graphite);
  min-width: 24px; white-space: nowrap;
}
.sc th { font-size: 10px; letter-spacing: 0.06em; color: var(--fescue); font-weight: 500; }
.sc .pn {
  text-align: left; font-family: var(--font-body); font-weight: 600;
  max-width: 88px; min-width: 40px; overflow: hidden; text-overflow: ellipsis;
  padding-left: 0; padding-right: 8px;
}
.sc td.sc-seg { font-weight: 500; color: var(--graphite-2); }
.sc td.sc-tot { font-weight: 700; color: var(--pine); }

/* --- "Around the event" (host page) --------------------------------------- */
/* Match play: one line per match, the host's own tagged quietly. */
.eb-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-2); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sand);
}
.eb-row:last-child { border-bottom: 0; }
.eb-row .eb-slot { font-weight: 700; color: var(--pine); white-space: nowrap; }
.eb-row.me .eb-slot::after { content: " · you"; font-weight: 400; font-size: 12px; color: var(--fescue); }
.eb-row .eb-status { text-align: right; }
/* Per-group scorecard peeks under the host's leaderboard. */
/* Inset to the leaderboard's cell padding, so the toggle and the card
   under it line up with the table above rather than the card edge. */
.eb-peek { margin-top: var(--space-2); padding: 0 var(--space-2); }
.eb-peek .sc-toggle { margin-top: 0; }

/* --- Knockout bracket (Grounds headline) ---------------------------------- */
.bracket { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.br-round { border-top: 1px solid var(--sand); padding-top: var(--space-2); }
.br-round.now .br-name { color: var(--pine); }
.br-name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue);
  margin-bottom: var(--space-1);
}
.br-match {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  column-gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--sand);
}
.br-match:last-child { border-bottom: 0; }
.br-side { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--graphite); }
.br-side.b { text-align: right; }
.br-side.won { color: var(--pine); }
.br-side.tbc { color: var(--fescue); font-weight: 500; font-family: var(--font-body); font-size: 14px; }
.br-vs { font-size: 12px; color: var(--fescue); }
.br-status { grid-column: 1 / -1; font-size: 12px; color: var(--graphite-2); text-align: center; min-height: 1em; }
.br-champ { text-align: center; font-size: 18px; color: var(--pine); padding: var(--space-2) 0; }
/* Tournament leaderboard: round columns are data, keep them tight. */
.lb-tourn th, .lb-tourn td { padding-left: 4px; padding-right: 4px; }

/* Tournament cut: missed-cut rows fade; the line reads as an annotation. */
.lb tr.lb-mc td { color: var(--fescue); }
.lb tr.lb-mc td strong { color: var(--fescue); font-weight: 500; }
.lb-cut { margin: var(--space-1) 0 0; font-size: 13px; }

/* --- Vegas ---------------------------------------------------------------- */
/* Host card: side labels above each pair of cards, and a par chip row. */
.sp-teamlabel {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue);
  margin-top: var(--space-2);
}
.par-row { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); }
.par-label { font-weight: 600; margin-right: 4px; }
.par-btn {
  min-width: 44px; min-height: 44px; border: 1px solid var(--sand); border-radius: 10px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--graphite);
  font-family: var(--font-mono, monospace); font-size: 18px; font-weight: 500; cursor: pointer;
}
.par-btn.sel {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  color: var(--pine-ink); border-color: transparent;
}
/* Grounds headline: one block per match, points between the sides. */
.vegas { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.vg-match { border-bottom: 1px solid var(--sand); padding-bottom: var(--space-2); }
.vg-slot {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue);
}
.vg-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; column-gap: var(--space-2); }
.vg-team { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--graphite); }
.vg-team.b { text-align: right; }
.vg-team.lead { color: var(--pine); }
.vg-pts { font-size: 22px; font-weight: 500; color: var(--pine); white-space: nowrap; }
.vg-status { font-size: 13px; color: var(--graphite-2); text-align: center; }
/* The Vegas rows under the cards in a scorecard peek. */
.sc tr.sc-vg td { color: var(--graphite-2); font-size: 11px; }
.sc tr.sc-vg td.pn { color: var(--fescue); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; }

/* --- Wolf ----------------------------------------------------------------- */
/* Host card: who is Wolf this hole and the call — partner chips, lone, blind. */
.wolf-row { margin-top: var(--space-2); }
.wolf-who { font-size: 15px; color: var(--graphite); margin-bottom: var(--space-1); }
.wolf-who b { color: var(--pine); }
.wolf-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.wolf-btn {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--sand); border-radius: 10px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--graphite);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer;
}
.wolf-btn.sel {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  color: var(--pine-ink); border-color: transparent;
}
.wolf-hint { margin: var(--space-1) 0 0; font-size: 12.5px; }
/* Grounds headline: one block per group, the four ranked on points. */
.wolf-board { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.wf-group { border-bottom: 1px solid var(--sand); padding-bottom: var(--space-2); }
.wf-slot {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue);
}
.wf-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); margin-top: 4px; }
.wf-player { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.wf-player b { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--graphite);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-player.lead b { color: var(--pine); }
.wf-pts { font-size: 22px; font-weight: 500; color: var(--pine); }
.wf-status { font-size: 13px; color: var(--graphite-2); text-align: center; margin-top: 4px; }

/* --- Plans (billing) --------------------------------------------------------- */
/* Account page: the tiers side by side; the join screen: a lock on formats the
   free plan can't host; the console: per-account grant controls. */
/* The paywall's small print. It carried an inline margin:0 that beat the
   .stack spacing, so the store's required wording ended up jammed against
   the bottom of the plan cards. A hairline and real air separate it: it's a
   different kind of text from the cards above, and it should look it.
   Selector matches .stack's specificity — a bare .plan-how would lose to
   `.stack > * + *` however late it appeared in the sheet. */
.stack > .plan-how {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sand);
  line-height: 1.6;
}
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.plan {
  display: flex; flex-direction: column; gap: var(--space-1);
  border: 1px solid var(--sand); border-radius: var(--radius-lg); padding: var(--space-3);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo) 85%); box-shadow: var(--shadow);
}
.plan.current { border-color: var(--pine); box-shadow: var(--shadow), 0 0 0 2px color-mix(in srgb, var(--pine) 25%, transparent); }
/* The free-trial offer on the account page. A green-edged strip above the
   plan cards — visible enough to be taken up, quiet enough not to look like
   an ad in your own dashboard. */
.trial-offer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 1.5px solid var(--pine);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo) 85%);
}
.trial-offer b { font-family: var(--font-display); font-size: 17px; color: var(--pine); }
.trial-offer .btn { flex: 0 0 auto; }
/* Mid-trial it's a status line, not an offer: drop the call-to-action edge. */
.trial-offer.running { border-color: var(--sand); border-width: 1px; }
#planBadge.trial { background: var(--pine); color: var(--pine-ink); border-color: var(--pine); }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.plan-head b { font-family: var(--font-display); font-size: 20px; color: var(--pine); }
.plan-head .plan-tagline {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fescue);
  margin-right: auto;   /* sits beside the name, price stays hard right */
}
.plan-price { font-size: 15px; color: var(--graphite); white-space: nowrap; }
.plan p { margin: 0; font-size: 14px; color: var(--graphite-2); }
.plan-feats { list-style: none; margin: 0 0 var(--space-1); padding: 0; font-size: 14px; color: var(--graphite); }
.plan-feats li::before { content: '✓ '; color: var(--pine); font-weight: 700; }
.plan-feats li.no { color: var(--fescue); text-decoration: line-through; }
.plan-feats li.no::before { content: '– '; color: var(--fescue); }
.plan .btn { margin-top: auto; }
.fmt-opt { position: relative; }
.fmt-opt.locked { opacity: 0.72; }
.fmt-lock {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pine-ink); background: var(--pine); border-radius: 999px; padding: 2px 8px;
}
.fmt-lock::before { content: '🔒 '; }
.plan-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--sand); }
.plan-ctl select, .plan-ctl input { width: auto; min-height: 40px; font-size: 15px; padding: 0 10px; }
.plan-ctl input { width: 84px; }
.plan-ctl .btn { width: auto; min-height: 40px; padding: 0 12px; font-size: 14px; }
.plan-tag { background: var(--pine); color: var(--pine-ink); }
/* Video-server picker: one row per backend, so a long hostname wraps instead
   of running off the card. */
/* Sits on .slot-grid so the button styling (and its selected state) still
   applies; this only makes it one full-width row per backend. */
.media-pick { grid-template-columns: 1fr; margin: var(--space-2) 0; }
.media-pick .slot-btn { text-align: left; min-height: 64px; padding: var(--space-2) var(--space-3); }
.media-pick .slot-btn .hint { margin: 2px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }
.media-pick .slot-btn.sel .hint { color: var(--pine-ink); opacity: 0.9; }
/* Meter captions in the console: which ceiling this bar is, and which of
   them the account will actually hit first. */
.meter-label { font-size: 12.5px; color: var(--graphite-2); margin: var(--space-2) 0 4px; }
.meter-label.watch { color: var(--flag); font-weight: 600; }
/* The score on the host page: two tiles (strokes, thru) in place of a bare
   "24 thru 5" line. */
.score-stats { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0 var(--space-2); }
.score-stats .stat {
  min-width: 84px; padding: 8px 12px; text-align: center;
  border: 1px solid var(--sand); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.score-stats .stat .n { font-size: 26px; line-height: 1.1; color: var(--pine); font-weight: 500; }
.score-stats .stat .l { font-size: 11px; letter-spacing: 0.08em; }
.score-stats .final-tag { color: var(--flag); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
/* The rename pencil beside a one-card slot's heading on the host page. */
.hm-rename {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 40px; height: 40px; margin-left: 4px; border: 1px solid var(--sand); border-radius: 10px;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--fescue);
  font-size: 18px; cursor: pointer;
}
/* Dashboard rows: name + role tag, then one labelled line per code. */
.dash-item { flex: 1; align-self: center; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--graphite); }
.dash-sub { font-size: 13px; color: var(--graphite-2); }
.dash-codes { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--graphite); }
.dash-codes b { font-weight: 500; letter-spacing: 0.08em; color: var(--pine); }
.dash-lbl { display: inline-block; min-width: 116px; color: var(--graphite-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; }
/* Sign in with Apple: Apple's black button in the app's rounded shape. */
.apple-btn {
  background: #000; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  margin-top: var(--space-2); font-family: -apple-system, BlinkMacSystemFont, var(--font-body); font-weight: 600;
}
.apple-btn:hover { filter: none; background: #111; }
.legal-line { font-size: 12.5px; margin: var(--space-2) 0 0; line-height: 1.45; }
.legal-line a { color: var(--pine); }
/* Legal pages. */
.legal h2 { font-family: var(--font-display); color: var(--pine); font-size: 20px; margin: var(--space-4) 0 var(--space-1); }
.legal p, .legal li { font-size: 15px; line-height: 1.55; color: var(--graphite); }
.legal ul { padding-left: 20px; }
.legal .updated { font-family: var(--font-mono); font-size: 12px; color: var(--graphite-2); }

/* The row under a masthead: what you're looking at on the left, the way out of
   it on the right. The masthead itself is full at phone width once the title
   and clock are in it, so a nav link goes here instead. */
.head-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.head-row .hint { margin: 0; }
.head-links { display: flex; align-items: baseline; gap: var(--space-3); }
.head-link { color: var(--pine); font-size: 13px; white-space: nowrap; text-decoration: none; }
.head-link + .head-link { margin-left: var(--space-3); }
.head-links .head-link + .head-link { margin-left: 0; }
.head-link:hover { text-decoration: underline; }

/* The resume card lists everything you're in — an event, a league, a
   tournament all at once — so each row has to say what it IS, not just what
   it's called. Kind line, then the name at weight, then the way in.

   Stacked, never side by side: .btn is width:100%, so any flex row shares
   space with a button that won't shrink and the name collapses to one
   character per line. Full-width buttons are the right target size on a
   phone anyway. */
.resume-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.resume-row + .resume-row { border-top: 1px solid var(--sand); }
.resume-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.resume-kind {
  font-family: var(--font-mono, inherit); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fescue);
}
/* Two facts a row can carry: which one you're playing right now, and whether
   you're the one running it. Both are mono caps pills; CURRENT is filled
   because it's the one you're scanning the card for, YOU HOST is a quiet tint
   because it's context. Neither is red — red is LIVE and nothing else. */
.resume-current, .resume-host {
  font-family: var(--font-mono, inherit); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 2px var(--space-2);
}
.resume-current { color: var(--pine-ink); background: var(--pine); }
.resume-host { color: var(--pine); background: color-mix(in srgb, var(--pine) 12%, transparent); }
.resume-name {
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 20px;
  color: var(--pine); line-height: 1.2; overflow-wrap: break-word;
}

/* The share-card panel's look picker. Reuses the slot-button grid; the chosen
   one is filled so it reads as a setting rather than four equal buttons. */
.card-style { font-size: 15px; min-height: var(--tap); }
.card-style.sel { background: var(--pine); color: var(--pine-ink); border-color: var(--pine); }

/* --- Leaderboard to-par: under par in tournament green (red stays LIVE's) --- */
.lb-under { color: var(--pine); font-weight: 700; }
.lb-over { color: var(--graphite); }

/* --- Generated avatar: initials on a colour from the name (avatar.js) --- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--av-size, 36px); height: var(--av-size, 36px); border-radius: 50%;
  background: var(--av-bg, var(--pine)); color: var(--av-ink, var(--pine-ink));
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em;
  font-size: calc(var(--av-size, 36px) * 0.4); line-height: 1; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(56, 48, 34, 0.18);
}
.avatar-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* --- The profile wall: a grid of kept clips (profile.js) --- */
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.wall-item {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; background: var(--sand); box-shadow: var(--shadow);
  min-height: var(--tap);
}
.wall-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.wall-tag {
  position: absolute; left: 8px; bottom: 8px; font-size: 12px; padding: 2px 7px; border-radius: 999px;
  background: rgba(36, 38, 31, 0.78); color: #F7F5EC;
}
.clip-caption { margin: 0 var(--space-3); font-size: 15px; color: var(--graphite); }

/* --- Scoring overlays: skins and Nassau lines (ui.js overlayLinesHTML) --- */
.overlays { display: flex; flex-direction: column; gap: 4px; margin: var(--space-1) 0; font-size: 14px; }
.ov-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; color: var(--graphite); }
.ov-name { font-family: var(--font-display); font-weight: 700; color: var(--pine); letter-spacing: 0.02em; }
.ov-seg { white-space: nowrap; }

/* --- Multiview: every live group at once (watch.js applyGrid) --- */
.grid {
  position: absolute; inset: 0; display: grid; gap: 4px; background: #000;
  padding: calc(var(--inset-top) + 64px) 8px calc(var(--inset-bottom) + 8px);
  grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(140px, 1fr); overflow-y: auto;
}
.grid.n2 { grid-template-columns: 1fr; }
@media (orientation: landscape) { .grid.n2 { grid-template-columns: 1fr 1fr; } }
.grid.n4 { grid-template-rows: 1fr 1fr; }
.tile { position: relative; background: #111; border-radius: 10px; overflow: hidden; min-height: 120px; }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.tile.listening { box-shadow: inset 0 0 0 3px var(--flag); }
.tile-label {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #F7F5EC;
  background: rgba(0, 0, 0, 0.55); padding: 4px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-pot { position: absolute; left: 8px; top: 8px; font-size: 12px; color: #FFF4F2; background: var(--flag); padding: 3px 8px; border-radius: 999px; }
.tile .tile-audio { position: absolute; right: 6px; bottom: 6px; }
.grid-mode .chrome-tl, .grid-mode .rail, .grid-mode #muteBtn, .grid-mode #viewersPill { display: none; }
.grid-mode #video { display: none; }
.grid-strip {
  position: absolute; top: calc(var(--inset-top) + 12px); left: 12px; right: 140px;
  color: #F7F5EC; background: rgba(0, 0, 0, 0.55); padding: 6px 10px; border-radius: 12px; font-size: 13px;
}
.grid-strip .overlays { margin: 0; color: #F7F5EC; }
.grid-strip .ov-line { color: #F7F5EC; }
.grid-strip .ov-name { color: #F7F5EC; }

/* --- Add a course by hand: the par-per-hole grid (coursepicker.js) --- */
.cc-add { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.cc-pars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cc-par { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--graphite-2); }
.cc-par select { width: 100%; min-height: var(--tap); text-align: center; font-family: var(--font-mono); font-size: 18px; }

/* --- Net scoring: the handicap box on the scorecard, and net marks on the peek --- */
.sp-hcp-wrap .sp-hcp {
  width: 84px;
  min-height: 44px;
  padding: 0 10px;
  font: inherit;
  font-family: var(--font-mono);
  border: 1px solid var(--sand);
  border-radius: 8px;
  background: var(--card-hi, var(--card));
  color: var(--graphite);
}
.sp-hcp-wrap .sp-hcp:focus { outline: 2px solid var(--pine); outline-offset: 1px; }
.sc .sc-dot { color: var(--pine); font-size: 8px; line-height: 0; margin-left: 1px; }
.sc td.sc-tot .sc-net { display: block; font-size: 10px; font-weight: 500; color: var(--graphite-2); letter-spacing: 0.02em; }
.lb .lb-gross { color: var(--graphite-2); }
.lb .lb-hcp { color: var(--fescue); }

/* --- League table: handicap trend and the profile number beside the league one --- */
.lb .lg-trend { font-family: var(--font-mono); font-size: 11px; color: var(--fescue); margin-left: 3px; letter-spacing: 0; }
.lb .lg-prof { font-family: var(--font-mono); font-size: 11px; color: var(--fescue); margin-left: 4px; }

/* --- Icons and faces (polish 1). One stroke set, two-tone; avatars stacked like a four-ball. --- */
.ico { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.ico .ico-2 { fill: var(--fescue); fill-opacity: 0.22; stroke: none; }
.btn .ico { width: 22px; height: 22px; }
.pill .ico { width: 16px; height: 16px; vertical-align: -0.15em; }
.av-stack { display: inline-flex; align-items: center; }
.av-stack .avatar { margin-left: calc(var(--av-size, 24px) * -0.3); border: 2px solid var(--card-hi); box-shadow: 0 1px 2px rgba(56, 48, 34, 0.18); }
.av-stack .avatar:first-child { margin-left: 0; }
.av-stack .av-more { background: var(--sand); color: var(--graphite-2); font-size: calc(var(--av-size, 24px) * 0.38); }
.row .row-people { grid-column: 2; display: flex; align-items: center; gap: var(--space-2); }
.lb .lb-who { display: inline-flex; align-items: center; gap: 8px; }
.sp-name .avatar { margin-right: 2px; }

/* --- Event header and tab bar (polish 2, chrome.js) --- */
.ev-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 0 var(--space-3); margin-bottom: var(--space-3); border-bottom: 2px solid var(--sand); }
.ev-head .ev-text { min-width: 0; }
.ev-head .ev-title { font-size: 24px; line-height: 1.1; color: var(--pine); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ev-head .ev-sub { display: block; margin-top: 3px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-2); }
.ev-head .ev-me { display: inline-flex; min-width: var(--tap); min-height: var(--tap); align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; border-radius: 50%; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(8px + var(--inset-bottom));
  background: var(--card-hi); border-top: 1px solid var(--sand);
  box-shadow: 0 -8px 24px rgba(56, 48, 34, 0.08);
}
.tabbar .tab {
  display: grid; justify-items: center; align-content: center; gap: 3px;
  min-height: var(--tap); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fescue); text-decoration: none;
}
.tabbar .tab .ico { width: 24px; height: 24px; vertical-align: 0; }
.tabbar .tab.on { color: var(--pine); }
.tabbar .tab:active { background: var(--card-lo); }
body.has-tabs .wrap { padding-bottom: calc(var(--tap) + 40px + var(--inset-bottom)); }
.fab-live {
  position: fixed; right: 16px; bottom: calc(var(--tap) + 28px + var(--inset-bottom)); z-index: 31;
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 20px 0 16px; border-radius: 26px;
  background: linear-gradient(180deg, var(--flag-hi), var(--flag-lo)); color: var(--flag-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(163, 42, 33, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fab-live i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }
@media (prefers-reduced-motion: no-preference) { .fab-live i { animation: fab-pulse 2s ease-in-out infinite; } }
@keyframes fab-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.16); } }

/* --- Score tile and group cards (polish 3) --- */
/* The team score as one green block, the caption inside it. Later rules at
   the same specificity win, so this restyles the banner without editing it. */
.teamboard {
  grid-template-columns: 1fr auto 1fr;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  color: var(--pine-ink);
  border: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  box-shadow: 0 8px 22px rgba(9, 62, 44, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.teamboard .tb-name { font-size: 15px; opacity: 0.95; }
.teamboard .tb-pts { font-size: 36px; }
.teamboard .tb-dash { opacity: 0.55; }
.teamboard .tb-lead .tb-pts { color: var(--pine-ink); text-shadow: 0 0 18px rgba(255, 255, 255, 0.35); }
.teamboard .tb-caption { grid-column: 1 / -1; text-align: left; margin: var(--space-2) 0 0; color: var(--pine-ink); opacity: 0.8; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; }
/* Group rows become cards: a frame of the stream (or the people) beside the words. */
.scorecard .sec-label { list-style: none; padding: var(--space-2) var(--space-1) var(--space-1); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fescue); }
.row {
  grid-template-columns: 78px 1fr;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  border: 1px solid var(--sand);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(56, 48, 34, 0.08);
}
.row.off { opacity: 0.78; }
.row .rbody { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row .row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .slot { font-size: 17px; }
.row .title { font-size: 13.5px; }
.row .row3 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: 2px; }
.row .row3 .match { grid-column: auto; min-width: 0; }
.row .meta { font-size: 11px; color: var(--graphite-2); letter-spacing: 0.02em; white-space: nowrap; }
.row .thumb {
  width: 78px; height: 60px; border-radius: 9px; overflow: hidden; position: relative; flex-shrink: 0;
  background: var(--card-lo); display: grid; place-items: center;
}
.row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row .thumb.thumb-fill { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); color: var(--pine-ink); }
.row .thumb.thumb-fill .flag-svg { width: 26px; height: 32px; }
.row .thumb .h { position: absolute; left: 6px; bottom: 5px; font-size: 10px; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 2px 5px; border-radius: 5px; letter-spacing: 0.04em; }
.row .thumb.off { background: var(--card-lo); color: var(--fescue); }
.row .thumb.off .av-stack .avatar { border-color: var(--card-lo); }
.live-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 500; color: #fff; background: var(--flag); border-radius: 20px; padding: 3px 8px 2px; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.row .reel-head { grid-column: auto; }

/* --- Watch chrome (polish 4): pills, the score strip on the video, a rail of frames --- */
.pill b { font-family: var(--font-display); font-weight: 700; }
.pill.audience { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; }
/* The one red thing on the watch screen. */
.pill.audience .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flag-hi); box-shadow: 0 0 6px color-mix(in srgb, var(--flag) 70%, transparent); }
.iconbtn .ico { width: 24px; height: 24px; }
.wscore {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(var(--inset-bottom) + 116px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 10px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(6, 12, 9, 0.66); color: #F2F7F3;
  border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px);
}
.wscore .ws-t { display: flex; flex-direction: column; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.1; overflow-wrap: anywhere; opacity: 0.82; }
.wscore .ws-t.lead { opacity: 1; }
.wscore .ws-t.lead .nm { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(247, 245, 236, 0.85); }
.wscore .ws-t b { font-size: 13px; font-weight: 500; opacity: 0.8; margin-top: 2px; }
.wscore .ws-t.r { text-align: right; align-items: flex-end; }
.wscore .ws-n { display: flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 22px; font-weight: 500; text-align: center; white-space: nowrap; }
.wscore .ws-n small { font-size: 10px; letter-spacing: 0.12em; opacity: 0.75; }
.wscore .ws-one { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 16px; text-align: center; }
.wscore .ws-thru { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 12px; opacity: 0.8; text-align: center; letter-spacing: 0.02em; }
/* The status markup is coloured for the cream card; on the strip everything is light. */
.wscore .match-status, .wscore .match-status span, .wscore .stroke-status, .wscore .stroke-status span, .wscore [class*="lead-"], .wscore .as, .wscore .final-tag { color: #F2F7F3; }
.wscore .as, .wscore .final-tag { opacity: 0.75; }
.rail { bottom: calc(var(--inset-bottom) + 8px); padding: 8px 12px; }
.railcard {
  min-width: 148px; height: 84px; min-height: 0; padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background-size: cover; background-position: center;
  position: relative; overflow: hidden; justify-content: flex-end;
}
.railcard.plain { background-image: linear-gradient(180deg, rgba(20, 60, 44, 0.9), rgba(6, 12, 9, 0.95)); }
.railcard.active { border-color: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.railcard .rl-lab { display: flex; flex-direction: column; gap: 1px; padding: 14px 10px 7px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.74)); }
.railcard .rl-slot { font-size: 14px; line-height: 1.1; }
.railcard .rl-meta { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.railcard.rl-all { min-width: 96px; align-items: center; justify-content: center; gap: 1px; background: rgba(6, 12, 9, 0.78); color: #F2F7F3; cursor: pointer; font: inherit; }
.railcard.rl-all .ico { width: 20px; height: 20px; margin-bottom: 3px; }
.brandmark { bottom: calc(var(--inset-bottom) + 218px); }
.grid-mode .wscore { display: none; }

/* --- The host's scorecard (polish 4): par on the strip, a person per card, seven chips, the Next hole bar --- */
.sp-hole-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.sp-hole-sub { font-size: 12px; color: var(--graphite-2); letter-spacing: 0.04em; text-transform: uppercase; }
.hole-strip.sp .hcell { aspect-ratio: auto; min-height: 44px; gap: 2px; }
.hole-strip.sp .hcell .hn { font-size: 13px; font-weight: 500; color: var(--graphite); }
.hole-strip.sp .hcell .hp { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0; color: var(--graphite-2); line-height: 1; white-space: nowrap; }
.hole-strip.sp .hcell.d { background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); border-color: transparent; box-shadow: none; }
.hole-strip.sp .hcell.d .hn, .hole-strip.sp .hcell.d .hp { color: var(--pine-ink); }
.hole-strip.sp .hcell.p { background: color-mix(in srgb, var(--pine) 14%, var(--field)); }
.hole-strip.sp .hcell.cur { outline: 2px solid var(--pine); outline-offset: 1px; box-shadow: none; }
.sp-name { align-items: center; }
.sp-name .sp-who {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  background: none; border: 0; padding: 2px 0; margin: 0; text-align: left; font: inherit; cursor: pointer;
}
.sp-name .sp-who .nm { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--pine); line-height: 1.15; overflow-wrap: anywhere; }
.sp-name .sp-who small { font-size: 12px; color: var(--graphite-2); }
.sp-name .t { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--graphite-2); white-space: nowrap; line-height: 1.15; }
.sp-name .t b { font-size: 22px; font-weight: 500; color: var(--graphite); }
.sp-name .t .quiet { color: var(--fescue); }
.sp-details { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-1) 0 var(--space-2); }
.sp-details .sp-rename-wrap { margin: 0; display: flex; align-items: center; gap: 6px; }
.sp-details .sp-rename { width: 150px; min-height: 44px; padding: 0 10px; font: inherit; font-size: 16px; border: 1px solid var(--sand); border-radius: 8px; background: var(--card-hi, var(--card)); color: var(--graphite); }
.sp-details .sp-rename:focus { outline: 2px solid var(--pine); outline-offset: 1px; }
.sp-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-1); }
.sp-chips .sp-num { min-width: 0; min-height: 48px; font-size: 20px; padding: 2px 0; }
.sp-num { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; -webkit-touch-callout: none; user-select: none; touch-action: manipulation; }
.sp-num .lbl { display: block; font-size: 9px; letter-spacing: 0.06em; margin-top: 3px; opacity: 0.92; }
.sp-num .dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--pine-ink); box-shadow: 0 0 0 1.5px var(--pine); }
.sp-nextbar {
  position: sticky; bottom: calc(var(--tap) + var(--inset-bottom) + 10px); z-index: 4;
  display: grid; grid-template-columns: var(--tap) 1fr; gap: 8px; margin-top: var(--space-3);
}
.sp-nextbar .nb-prev {
  min-height: var(--tap); border-radius: 14px; border: 1px solid var(--sand);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--pine);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(56, 48, 34, 0.18);
}
.sp-nextbar .nb-prev .ico { transform: rotate(180deg); }
.sp-nextbar .nb-prev:disabled { opacity: 0.4; cursor: default; }
.sp-nextbar .nb-main {
  min-height: var(--tap); border: 0; border-radius: 14px; padding: 0 var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); color: var(--pine-ink);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pine) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sp-nextbar .nb-main .nb-t { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.1; }
.sp-nextbar .nb-main .nb-t small { font-family: var(--font-body); font-weight: 400; font-size: 12px; opacity: 0.85; margin-top: 2px; }
.sp-nextbar .nb-main .nb-n { display: inline-flex; align-items: center; font-size: 22px; }
.sp-nextbar .nb-main:disabled { background: linear-gradient(180deg, var(--fescue-hi), var(--fescue-lo)); box-shadow: none; cursor: default; }

/* --- The front door (polish 5): a photograph, the wordmark, one sheet; your events under it --- */
.fd-hero {
  position: relative; overflow: hidden;
  height: min(46vh, 380px); min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--inset-top) + var(--space-3)) var(--space-4) calc(var(--space-4) + 20px);
  background: #244B3A center / cover no-repeat;
  color: #F7F5EC;
}
.fd-hero .fd-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 14, 0.2) 0%, rgba(8, 20, 14, 0.05) 35%, rgba(8, 20, 14, 0.8) 100%); }
.fd-hero > * { position: relative; }
.fd-wm { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.01em; line-height: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.fd-wm span { color: var(--flag-hi); }
.fd-h { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; color: #FFFFFF; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); max-width: 22ch; }
.fd-h small { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.45; opacity: 0.92; max-width: 36ch; }
/* The sheet tucks up over the foot of the photograph. */
.fd-page .wrap { padding-top: 0; }
.fd-sheet { position: relative; margin-top: -20px; }
.fd-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--card-lo); border: 1px solid var(--sand); }
.fd-seg { min-height: 44px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 600; font-size: 15px; color: var(--graphite-2); cursor: pointer; }
.fd-seg.on { background: linear-gradient(180deg, var(--card-hi), #FFFFFF); color: var(--pine); box-shadow: 0 2px 8px rgba(56, 48, 34, 0.14); }
.fd-code-wrap { position: relative; margin-top: 4px; }
.fd-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fd-code i {
  display: flex; align-items: center; justify-content: center; height: var(--tap);
  border-radius: 10px; border: 1.5px solid var(--sand); background: var(--field);
  font-style: normal; font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--pine);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
.fd-code i.cur { border-color: var(--pine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 16%, transparent); }
/* The real input, over the boxes: it takes the tap and the keyboard, and
   shows nothing of its own. 16px so iOS does not zoom on focus. */
.fd-code-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; caret-color: transparent; }
.fd-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fescue); margin: 0 0 var(--space-1); }
.fd-row {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--tap);
  padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--sand);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.fd-row:last-child { border-bottom: 0; }
.fd-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-row .t b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row .t small { font-size: 12.5px; color: var(--graphite-2); }
.fd-row .t small .cur { color: var(--pine); font-weight: 600; }
.fd-row .ico-chevron { color: var(--fescue); }
.fd-row:disabled { opacity: 0.6; cursor: default; }

/* --- Friends and the profile (polish 6): the front door's rows, one action each; a header card --- */
.fd-row.fr { padding: 6px 0; }
.fd-row .fr-main { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
.fd-row .fr-act { display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--fescue); }
.fd-row .t small .live-pill { vertical-align: 1px; margin-right: 2px; }
.btn.small { width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.textlink { background: none; border: 0; min-height: 44px; padding: 0 10px; font: inherit; font-weight: 600; font-size: 14px; color: var(--fescue); cursor: pointer; }
.textlink:disabled { opacity: 0.5; cursor: default; }
.prof-head { padding: var(--space-3) var(--space-4); }
.ph-row { display: flex; align-items: center; gap: var(--space-3); }
.ph-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ph-name { font-size: 26px; color: var(--pine); line-height: 1.1; overflow-wrap: anywhere; }
.ph-meta { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite-2); }
.ph-more { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--pine); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ph-live { display: flex; align-items: center; gap: 10px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--sand); }
.ph-live .ph-where { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; color: var(--graphite); }
.ph-menu { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--sand); }
.ph-menu .textlink { color: var(--graphite-2); padding-left: 0; }

/* --- The hole strip, roomier (polish 7): one scrolling row, the current hole kept in the middle --- */
.hole-strip.sp {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; margin: var(--space-2) 0;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hole-strip.sp::-webkit-scrollbar { display: none; }
.hole-strip.sp .hcell { flex: 0 0 54px; min-height: 60px; gap: 4px; border-radius: 10px; scroll-snap-align: center; }
.hole-strip.sp .hcell .hn { font-size: 18px; }
.hole-strip.sp .hcell .hp { font-size: 10px; letter-spacing: 0.04em; }

/* --- The remaining pages (polish 8): dashboard rows with codes, league and broadcast headers --- */
.fd-row .t small.codes { color: var(--graphite-2); }
.fd-row .t small b { font: inherit; font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; letter-spacing: 0.08em; color: var(--pine); white-space: nowrap; }
.fd-row:disabled { opacity: 0.6; }
.lb .lb-who .avatar { flex-shrink: 0; }

/* --- The last headers (polish 9): the admin console and the text pages wear the event header; Home is a round icon --- */
.ev-head .ev-home { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--pine); }
.ev-head .ev-home .ico { width: 24px; height: 24px; }
.legal .ev-head { margin-bottom: var(--space-4); }

/* --- The Friends page and the profile's numbers (polish 10): a search field, requests, rounds as tiles --- */
.fd-search { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 8px 0 14px; border-radius: 14px; border: 1px solid var(--sand); background: var(--field); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
.fd-search .ico { color: var(--fescue); flex-shrink: 0; }
.fd-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--graphite); outline: none; }
.fd-search input::placeholder { color: var(--graphite-2); }
.fd-search:focus-within { border-color: var(--pine); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 16%, transparent); }
.fd-search .btn.small { min-height: 40px; }
.fd-search .btn.small[hidden] { display: none; }
.card.fd-list + .card.fd-list { margin-top: var(--space-3); }
.card.fr-req { background: linear-gradient(180deg, color-mix(in srgb, var(--pine) 8%, var(--card-hi)), color-mix(in srgb, var(--pine) 5%, var(--card-lo))); border-color: color-mix(in srgb, var(--pine) 30%, var(--sand)); }
.fr-empty { color: var(--graphite-2); font-size: 14px; line-height: 1.45; margin: 0 0 var(--space-1); }
.fd-row .fr-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine); display: flex; align-items: center; justify-content: center; }
.fr-round { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 8px 0; border-bottom: 1px solid var(--sand); text-decoration: none; color: inherit; }
.fr-round:last-child { border-bottom: 0; }
.fr-round .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-round .t b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-round .t small { font-size: 12.5px; color: var(--graphite-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; min-width: 60px; min-height: 52px; padding: 5px 8px; border-radius: 12px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); font-family: var(--font-mono); line-height: 1; }
.score-tile b { font-size: 22px; font-weight: 500; color: var(--graphite); }
.score-tile small { font-size: 11px; margin-top: 4px; color: var(--graphite-2); letter-spacing: 0.04em; white-space: nowrap; }
.score-tile.under { border-color: color-mix(in srgb, var(--pine) 45%, var(--sand)); background: color-mix(in srgb, var(--pine) 8%, var(--card-hi)); }
.score-tile.under b, .score-tile.under small { color: var(--pine); }
.prof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-3); }
.prof-stats .stat { padding: 10px 2px; border-radius: 12px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
.prof-stats .stat .n { font-size: 22px; color: var(--pine); }
.prof-stats .stat .l { font-size: 9.5px; letter-spacing: 0.08em; }
/* The search field's input is bare: the frame around it is the field. A friend row's line never wraps. */
.fd-search input[type="text"] { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: none; }
.fd-row.fr .t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rows with a button beside them (requests, on air) have less room, so their line may wrap. */
.fr-wrap .fd-row.fr .t small { white-space: normal; overflow: visible; }

/* --- The event cover (polish 12): the course photograph with the event on it, above the Grounds --- */
body.has-cover .wrap { padding-top: 0; }
.ev-cover {
  position: relative; overflow: hidden; display: block;
  height: calc(208px + var(--inset-top)); margin: 0 calc(-1 * var(--space-3)) var(--space-3);   /* the status bar adds to the cover, not to what it has room for */
  padding: calc(var(--inset-top) + 14px) 20px 14px;
  border-radius: 0 0 22px 22px; border: 0;
  background: #244B3A center 40% / cover no-repeat;
  color: #F7F5EC; box-shadow: 0 8px 22px rgba(56, 48, 34, 0.18);
}
.ev-cover .cv-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 14, 0.28) 0%, rgba(8, 20, 14, 0.02) 40%, rgba(8, 20, 14, 0.84) 100%); }
.ev-cover .cv-top, .ev-cover .cv-text { position: relative; }
.ev-cover .cv-top { display: flex; justify-content: space-between; align-items: center; }
.ev-cover .cv-code { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(8, 20, 14, 0.5); backdrop-filter: blur(6px); }
.ev-cover .cv-me .avatar { border: 2px solid rgba(247, 245, 236, 0.75); }
.ev-cover .cv-text { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; flex-direction: column; }
.ev-cover .cv-course { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.92; margin-bottom: 4px; }
.ev-cover .cv-title { font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; color: #FFFFFF; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); overflow-wrap: anywhere; }
.ev-cover .cv-sub { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; margin-top: 6px; }
.ev-cover .cv-credit { font-size: 9.5px; letter-spacing: 0.06em; opacity: 0.7; margin-top: 4px; }
.ev-cover [hidden] { display: none; }
/* The host's cover preview: the picture as the Grounds will show it. */
.cover-preview { border-radius: 14px; overflow: hidden; border: 1px solid var(--sand); background: #244B3A; aspect-ratio: 16 / 9; }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Desktop (polish 13): from 1024px the tabs become a sidebar and pages take two columns --- */
/* Below the breakpoint none of this exists: the sidebar is gone, the buttons the
   sidebar mirrors stay where they were, and a column grid built on a page that
   was loaded wide collapses back to one column through display: contents. */
:root { --dt-side: 248px; --dt-col: 420px; --dt-rail: 340px; }
.dt-side { display: none; }
.dt-cols, .dt-col { display: contents; }
@media (min-width: 1024px) {
  body.has-side .tabbar, body.has-side .fab-live, body.has-side .dt-hide { display: none !important; }
  body.has-side .wrap { max-width: 1240px; margin: 0 0 0 var(--dt-side); padding: 28px 40px 48px; }
  /* The broadcast page has one column and reads best no wider than a form. */
  body.has-side .wrap:has(> #bcHead) { max-width: 840px; }
  body.has-side #authCard { max-width: 560px; }
  .dt-side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; width: var(--dt-side); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 22px; padding: 26px 18px; overflow-y: auto;
    background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border-right: 1px solid var(--sand);
  }
  .dt-wm { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: var(--pine); text-decoration: none; padding: 0 10px; }
  .dt-wm span { color: var(--flag); }
  .dt-nav { display: flex; flex-direction: column; gap: 4px; }
  .dt-nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px; text-decoration: none; color: var(--graphite-2); font-weight: 600; font-size: 15px; }
  .dt-nav a .ico { width: 22px; height: 22px; }
  .dt-nav a:hover { background: color-mix(in srgb, var(--pine) 6%, transparent); }
  .dt-nav a.on { background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine); }
  .dt-box { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--sand); background: color-mix(in srgb, var(--pine) 6%, transparent); }
  .dt-box-l { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fescue); }
  .dt-box b { font-family: var(--font-display); font-size: 16px; color: var(--graphite); overflow-wrap: anywhere; }
  .dt-box-code { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); }
  .dt-acts { display: flex; flex-direction: column; gap: 6px; }
  .dt-acts:not(:empty) { margin-top: 10px; }
  .dt-act {
    display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 13.5px; color: var(--pine); padding: 9px 10px; border-radius: 10px;
    border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo));
  }
  .dt-act.live { background: linear-gradient(180deg, var(--flag-hi), var(--flag-lo)); color: var(--flag-ink); border-color: transparent; }
  .dt-me, .dt-signin { text-decoration: none; }
  .dt-me { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-weight: 600; color: var(--graphite); }
  .dt-signin { display: block; text-align: center; font-weight: 600; font-size: 14px; color: var(--pine); padding: 11px 10px; border-radius: 12px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
  /* Two columns: the page's main thing on the left, the rest beside it. */
  .dt-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--dt-col); column-gap: 32px; align-items: start; margin-top: 20px; }
  .dt-cols.fd { grid-template-columns: 520px minmax(0, 1fr); }
  .dt-col { display: block; min-width: 0; }
  .dt-col > * { margin-top: 0 !important; margin-bottom: 20px !important; }
  .dt-col > #howItWorks .sect { margin-top: 0; }
  /* The Grounds: the cover as a picture in the page, the score across the top with
     the sessions beside it, the groups three across. */
  body.has-side .ev-cover { height: 300px; margin: 0 0 24px; border-radius: 22px; }
  body.has-side .ev-cover .cv-code { display: none; }
  body.has-side .ev-cover .cv-top { justify-content: flex-end; }
  body.has-side .ev-cover .cv-title { font-size: 40px; }
  body.has-side #teamboard:has(> .teamboard) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 20px; align-items: start; }
  body.has-side #teamboard > .teamboard { grid-column: 1; grid-row: 1 / span 40; margin: 0; padding: 26px 34px; min-height: 148px; }
  body.has-side #teamboard > .teamboard .tb-name { font-size: 22px; }
  body.has-side #teamboard > .teamboard .tb-pts { font-size: 64px; }
  body.has-side #teamboard:has(> .teamboard) > :not(.teamboard) { grid-column: 2; margin: 0 0 8px; }
  body.has-side #sessionLine { margin: 18px 0 10px; }
  body.has-side #scorecard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  body.has-side #scorecard .sec-label { grid-column: 1 / -1; padding-bottom: 0; }
  body.has-side #scorecard .row { margin: 0; }
  /* Watch: the video beside the sidebar, the live groups down the right. */
  body.has-side .stage { left: var(--dt-side); }
  body.has-side .stage video { width: calc(100% - var(--dt-rail)); }
  body.has-side .rail {
    left: auto; right: 0; top: 0; bottom: 0; width: var(--dt-rail); box-sizing: border-box;
    flex-direction: column; gap: 12px; padding: 24px 20px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none;
    background: rgba(6, 12, 9, 0.62); backdrop-filter: blur(10px); border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
  body.has-side .rail::before { content: 'Live groups'; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247, 245, 236, 0.7); margin-bottom: 2px; }
  body.has-side .railcard { min-width: 0; width: 100%; height: 150px; flex: 0 0 auto; }
  body.has-side .railcard.rl-all { height: 56px; flex-direction: row; gap: 10px; }
  body.has-side .wscore { left: 24px; right: calc(var(--dt-rail) + 24px); bottom: 28px; }
  body.has-side .chrome-tl { left: 24px; top: 24px; }
  body.has-side .chrome-tr { right: calc(var(--dt-rail) + 24px); top: 24px; }
  body.has-side .brandmark { right: calc(var(--dt-rail) + 24px); bottom: 132px; }
  body.has-side .grid-strip { right: calc(var(--dt-rail) + 140px); }
  body.has-side .grid { padding: 80px 16px 16px; }
  /* The host's scorecard has room: bigger hole cells and chips. */
  body.has-side .hole-strip.sp .hcell { flex: 0 0 60px; min-height: 64px; }
  body.has-side .sp-chips { grid-template-columns: repeat(7, 64px); justify-content: start; gap: 8px; }
  body.has-side .sp-chips .sp-num { min-height: 56px; font-size: 22px; }
  body.has-side .sp-nextbar { position: static; }
  /* Friends two across; the profile's tiles at their natural size, the wall three across. */
  body.has-side #frList { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  body.has-side .prof-stats { grid-template-columns: repeat(4, 160px); justify-content: start; gap: 12px; }
  body.has-side .prof-stats .stat .n { font-size: 30px; }
  body.has-side .wall-grid { grid-template-columns: repeat(3, 1fr); }
  /* The dashboard's events and leagues two across. */
  body.has-side #dashEvents, body.has-side #dashLeagues { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
  body.has-side #dashEvents > * + *, body.has-side #dashLeagues > * + * { margin-top: 0; }
  /* The league: standings beside the week table; my score beside the rest. */
  body.has-side .subtabs { max-width: 520px; }
  body.has-side #boardTab, body.has-side #roundTab { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 20px 32px; align-items: start; }
  body.has-side #boardTab > .card, body.has-side #roundTab > .card { margin: 0; }
  body.has-side #runTab { max-width: 840px; }
  body.has-side .lb td, body.has-side .lb th { padding: 14px 12px; font-size: 16px; }
  /* The front door: the photograph as a picture beside the sidebar, the sheet under it on the left. */
  body.has-side .fd-hero { height: 320px; min-height: 0; max-width: 1160px; margin: 28px 40px 24px calc(var(--dt-side) + 40px); padding: 28px 36px 40px; border-radius: 22px; }
  body.has-side .fd-hero .fd-wm { font-size: 40px; }
  body.has-side .fd-hero .fd-h { font-size: 34px; max-width: 30ch; }
  body.has-side .fd-sheet { margin-top: 0; }
}

/* --- Switches (per-friend notifications): pine when on; red stays LIVE's --- */
.sw-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 8px 0; border-bottom: 1px solid var(--sand); cursor: pointer; }
.sw-row:last-child { border-bottom: 0; }
.sw-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-row .t b { font-weight: 600; color: var(--graphite); }
.sw-row .t small { font-size: 13px; color: var(--graphite-2); }
.sw { flex-shrink: 0; position: relative; width: 52px; height: 32px; border-radius: 16px; border: 1px solid var(--sand); background: var(--card-lo); cursor: pointer; padding: 0; transition: background 0.18s ease, border-color 0.18s ease; }
.sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.18s ease; }
.sw[aria-checked="true"] { background: var(--pine); border-color: var(--pine); }
.sw[aria-checked="true"] i { transform: translateX(20px); }
.sw:focus-visible { outline: 3px solid color-mix(in srgb, var(--pine) 45%, transparent); outline-offset: 2px; }
.sw:disabled { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .sw, .sw i { transition: none; } }

/* --- Camera picker (camera.js): the phone's lenses and anything plugged in --- */
.cam-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(12, 16, 12, 0.55); padding: 0 var(--space-2) calc(var(--space-2) + var(--inset-bottom)); }
.cam-panel { width: 100%; max-width: 480px; background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand); border-radius: 18px; padding: var(--space-3); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.cam-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--pine); font-family: var(--font-display); font-size: 18px; }
.cam-head .cam-x { width: auto; min-height: 44px; padding: 0 var(--space-3); }
.cam-list { display: flex; flex-direction: column; margin-top: var(--space-2); }
.cam-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 8px 4px; background: none; border: 0; border-bottom: 1px solid var(--sand); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cam-row:last-child { border-bottom: 0; }
.cam-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cam-row .t b { font-weight: 600; color: var(--graphite); overflow-wrap: anywhere; }
.cam-row .t small { font-size: 13px; color: var(--graphite-2); }
.cam-tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sand); flex-shrink: 0; }
.cam-row.on .cam-tick { border-color: var(--pine); background: radial-gradient(circle, var(--pine) 0 5px, transparent 6px); }
.cam-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--pine) 45%, transparent); outline-offset: 2px; border-radius: 10px; }
.cam-note { margin: var(--space-2) 0 0; font-size: 13px; }
.cam-line { margin: 0; font-size: 14px; }
.cam-line .textlink { font-size: inherit; }
@media (min-width: 1024px) { .cam-sheet { align-items: center; } }

/* --- Wall posts: likes and comments (profile.js). A like is pine, never red. --- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wall-counts { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: rgba(36, 38, 31, 0.78); color: #F7F5EC; }
.wall-counts b { font-family: var(--font-mono); font-weight: 500; margin-right: 3px; }
.wall-counts .ico { width: 14px; height: 14px; }
.wall-counts.liked .ico-heart .ico-2 { fill: currentColor; fill-opacity: 1; }
.post-photo { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #000; }
.post-social { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--graphite-2); font: inherit; font-weight: 600; cursor: pointer; }
.like-btn .ico { width: 22px; height: 22px; }
.like-btn.liked { color: var(--pine); border-color: color-mix(in srgb, var(--pine) 45%, var(--sand)); }
.like-btn.liked .ico-2 { fill: currentColor; fill-opacity: 1; }
.like-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--pine) 45%, transparent); outline-offset: 2px; }
.post-likers { margin: 0; font-size: 13px; }
.comments { display: flex; flex-direction: column; max-height: 36vh; overflow-y: auto; }
.comment { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sand); }
.comment:last-child { border-bottom: 0; }
.comment .c-body { flex: 1; min-width: 0; }
.comment .c-body b { font-size: 14px; color: var(--graphite); }
.comment .c-body p { margin: 2px 0 0; font-size: 15px; color: var(--graphite); overflow-wrap: anywhere; white-space: pre-wrap; }
.comment .c-body small { font-size: 11px; color: var(--fescue); }
.comment .c-acts { display: flex; flex-direction: column; align-items: flex-end; }
.comment .c-acts .textlink { min-height: 36px; font-size: 13px; padding: 0 6px; }
.comment-form { display: flex; gap: var(--space-2); align-items: center; }
.comment-form input { flex: 1; min-width: 0; min-height: var(--tap); }
.comment-form .btn.small { width: auto; min-height: var(--tap); padding: 0 18px; }

/* A photo for your wall: the add button over the grid, and the compose sheet. */
.wall-add { display: flex; gap: var(--space-2); }
.wall-add .btn { flex: 1; min-height: var(--tap); padding-inline: var(--space-2); white-space: nowrap; }
.photo-form { margin-top: var(--space-3); }
.photo-form .field { margin-bottom: 0; }

/* Post cards: the wall as a feed. Who posted what, when and where, the
   caption, the picture edge to edge, and the heart and comments under it. */
.wall-head { margin-bottom: var(--space-3); }
.wall-feed { display: flex; flex-direction: column; gap: var(--space-3); }
.wall-feed:empty { display: none; }
.post-card {
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo) 85%);
  border: 1px solid var(--sand); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
}
.post-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.post-card > .post-head { padding: var(--space-3) var(--space-3) 0; }
.post-who { min-width: 0; }
.post-who p { margin: 0; font-size: 15px; color: var(--graphite); line-height: 1.3; }
.post-who b { color: var(--pine); font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.post-who small { display: block; margin-top: 2px; font-size: 12px; color: var(--fescue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-cap { margin: 0; font-size: 16px; line-height: 1.4; color: var(--graphite); overflow-wrap: anywhere; }
.post-card > .post-cap { padding: var(--space-2) var(--space-3) 0; }
.post-media {
  display: block; position: relative; width: 100%; margin-top: var(--space-3); padding: 0; border: 0;
  aspect-ratio: 4 / 5; max-height: 72vh; cursor: pointer;
  background: linear-gradient(160deg, var(--pine), color-mix(in srgb, var(--pine) 55%, #000));
  border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand);
}
.post-media.is-clip { aspect-ratio: 16 / 9; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(247, 245, 236, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.post-play i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--pine); }
.post-media:focus-visible { outline: 3px solid color-mix(in srgb, var(--pine) 45%, transparent); outline-offset: -3px; }
.post-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); }
.cmt-btn .ico-2 { fill-opacity: 0.22; }

/* The post sheet wears the card's header; long threads scroll inside it. */
.post-sheet { max-height: calc(100dvh - 2 * var(--space-3)); overflow-y: auto; }
.post-sheet .clip-head { align-items: flex-start; color: inherit; }
.post-sheet .clip-stage img.post-photo { max-height: 60vh; }
.post-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); }
.post-actions:empty { display: none; }
.post-actions .textlink { min-height: 44px; font-size: 15px; }
/* A picture keeps its own shape (a landscape stays landscape), up to a
   phone-screen's height; the green ground shows while it loads. */
.post-media, .post-media.is-clip { aspect-ratio: auto; min-height: 180px; max-height: 72vh; overflow: hidden; }
.post-media img { height: auto; max-height: 72vh; }
.post-media.is-clip img { aspect-ratio: 16 / 9; object-fit: cover; }
.wall-head .hm-top { display: flex; align-items: center; gap: var(--space-2); }
.wall-head .hm-top h2 { margin: 0; }
.wall-head.bare { background: none; border: 0; box-shadow: none; padding: var(--space-1) var(--space-1) 0; margin-bottom: var(--space-2); }
@media (min-width: 1024px) {
  /* Wide: the cards sit side by side, as many as the column holds. */
  .wall-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
  /* Nothing beside the wall (your own profile, no rounds yet): the wall takes the width. */
  .dt-cols:not(:has(> .dt-col:last-child > :not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
}
.post-sheet .comment .c-acts { flex-direction: row; align-items: center; }
.post-foot-gap { height: var(--space-3); }

/* Stream from a camera: the steps, the address to copy, and what the camera is doing. */
.cam-stream { max-height: calc(100dvh - 2 * var(--space-3)); overflow-y: auto; }
.cs-steps { margin: var(--space-2) 0 var(--space-3); padding-left: 1.3em; color: var(--graphite); font-size: 15px; line-height: 1.45; }
.cs-steps li { margin-bottom: 6px; }
.cs-field { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-2); align-items: center; margin: var(--space-2) 0; }
.cs-label { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--graphite-2); }
.cs-value { display: block; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--card-lo); border: 1px solid var(--sand); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.cs-field .btn.small { width: auto; min-height: var(--tap); padding: 0 18px; }
.cs-split summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--fescue); font-weight: 600; }
.cs-status { margin: var(--space-2) 0; padding: 12px 14px; border-radius: 12px; font-weight: 600; background: var(--card-lo); border: 1px solid var(--sand); color: var(--graphite); }
.cs-status.live { color: var(--pine); }
.cs-status.live::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--flag); margin-right: 8px; vertical-align: 1px; }
.cs-note { font-size: 13px; }

/* View round: the group's card, then its clips hole by hole. */
.round-btn { width: auto; min-height: var(--tap); padding: 0 18px; margin-left: auto; white-space: nowrap; }
.round-title { min-width: 0; }
.round-title .fd-eyebrow { margin: 0 0 2px; }
.round-title strong { display: block; color: var(--pine); font-family: var(--font-display); font-size: 20px; line-height: 1.2; }
.round-title small { display: block; margin-top: 2px; font-size: 12px; color: var(--fescue); }
.round-status { margin: 0; font-size: 14px; color: var(--graphite); }
.round-card { overflow-x: auto; }
.round-strip .hcell { cursor: default; }
.round-strip .hcell.post { outline: 3px solid var(--pine); outline-offset: 1px; }
.round-h { margin: var(--space-2) 0 0; font-size: 17px; color: var(--pine); }
.round-now { margin: 0; font-size: 14px; }
.rh-list { display: flex; flex-direction: column; }
.rh-row { display: flex; align-items: center; gap: var(--space-2); padding: 10px 0; border-bottom: 1px solid var(--sand); }
.rh-row:last-child { border-bottom: 0; }
.rh-row.here .rh-hole b { color: var(--pine); }
.rh-hole { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; }
.rh-hole b { font-size: 22px; font-weight: 500; color: var(--graphite); line-height: 1; }
.rh-hole small { margin-top: 3px; font-size: 11px; color: var(--fescue); }
.rh-clips { display: flex; gap: 8px; overflow-x: auto; min-width: 0; padding: 2px; }
.rh-clip { position: relative; flex: 0 0 auto; width: 104px; height: 64px; padding: 0; border: 1px solid var(--sand); border-radius: 10px; overflow: hidden; cursor: pointer; background: linear-gradient(160deg, var(--pine), color-mix(in srgb, var(--pine) 55%, #000)); }
.rh-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-clip .post-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.rh-clip .post-play i { border-width: 6px 0 6px 10px; margin-left: 3px; }
.rh-clip.this { border: 2px solid var(--pine); }
.rh-clip.playing { outline: 3px solid color-mix(in srgb, var(--pine) 55%, transparent); outline-offset: 1px; }
.rh-hole small:first-child { margin: 0 0 3px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.round-strip .hcell.has-clips { position: relative; cursor: pointer; font: inherit; }
.round-strip .hcell.has-clips::after { content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--pine); box-shadow: 0 0 0 1.5px var(--card-hi); }

/* Rounds on a profile: each opens its round; a match shows how it stands. */
.fr-round.opens { width: 100%; font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--sand); cursor: pointer; color: inherit; min-height: var(--tap); }
.fr-round.opens:last-of-type { border-bottom: 0; }
.fr-round.opens:focus-visible { outline: 3px solid color-mix(in srgb, var(--pine) 45%, transparent); outline-offset: 2px; border-radius: 10px; }
.round-chip { flex: 0 0 auto; max-width: 45%; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--sand); background: var(--card-lo); font-size: 12px; color: var(--pine); text-align: center; }
.rounds-more { display: block; margin: var(--space-1) auto 0; min-height: 44px; }
.round-kept { margin: 0; font-size: 14px; }
.rh-clip.photo { background: var(--card-lo); }
.round-player .post-photo { max-height: 60vh; }
.round-pick select { width: 100%; min-height: var(--tap); }
.round-kept + .round-status, .round-kept + .round-status + .round-card { margin-top: var(--space-2); }

/* The round sheet, option B: on a phone the two column wrappers dissolve and
   the player sits between the heading and the list; on a wide screen the card
   and the clips by hole are the left column and the player is the right. */
.round-cols { display: flex; flex-direction: column; gap: var(--space-2); }
.round-cols .round-h { margin: var(--space-1) 0 0; }
.round-left, .round-right { display: contents; }
.round-kept { order: 1; }
.round-status, .round-card, .round-strip { order: 2; }
.round-h { order: 3; }
.round-player { order: 4; }
.round-now { order: 5; }
.rh-list, .round-none { order: 6; }
.round-cols .post-actions { order: 7; }
@media (min-width: 1024px) {
  .clip-panel.round-sheet { max-width: 1180px; width: calc(100vw - 140px); max-height: calc(100dvh - 80px); padding: 28px 32px; }
  .round-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .round-left, .round-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .round-right { position: sticky; top: 0; }
  .round-right .round-player video { max-height: 52vh; }
  .round-left .round-h { margin: var(--space-2) 0 0; }
}

/* Scorecards: the totals are a fixed pane on the right, like the names on the
   left, so only the holes scroll. A soft edge shows there is more to swipe. */
.sc.sc-tots { flex: 0 0 auto; width: auto; min-width: 0; box-shadow: -8px 0 8px -8px rgba(36, 38, 31, 0.22); }
.sc-tots th, .sc-tots td { padding-left: 8px; padding-right: 2px; }
/* One line per row in the totals pane, so its rows stay level with the holes. */
.sc-tots td.sc-tot2 { font-weight: 500; color: var(--graphite-2); }

/* Leaderboards on a phone: the score columns stay; the group, handicap and
   holes played move to a small line under the name. */
.lb .lb-sub { display: none; }
.lb .lb-name { display: inline; min-width: 0; }
@media (max-width: 599px) {
  .lb .lb-wide, .lb td .sess-tag.lb-wide { display: none; }
  .lb .lb-sub { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.02em; color: var(--fescue); white-space: normal; }
  .lb .lb-sub span { white-space: nowrap; }
  .lb th, .lb td { padding-left: 6px; padding-right: 6px; }
  .lb .lb-name { display: flex; flex-direction: column; }
}

/* Watch: the title pill stops short of the audience, mute and close on the
   right. When "HOLE 6 · PAR 4" won't fit beside the group name, it drops
   to a second line instead of running under the viewer count. */
#titlePill { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; max-width: calc(100vw - 236px); }
#titlePill #holePill { white-space: nowrap; }
#titlePill #holePill:empty { display: none; }

/* The nine-across hole grid: a cell fills its column rather than holding a
   40px square, which on a phone is wider than the column and overlapped
   the next hole. It stays square where the column is wide enough. */
.hole-strip:not(.sp) .hcell { width: 100%; min-width: 0; box-sizing: border-box; }
/* The round sheet's ring on the posted hole needs room in the gap too. */
.round-strip { column-gap: 6px; }
.round-strip .hcell.post { outline-width: 2px; }
/* The clip dot sits in the bottom corner, clear of the hole number now
   that a cell is only as wide as its column. */
.round-strip .hcell.has-clips::after { top: auto; bottom: 3px; right: 3px; width: 5px; height: 5px; }

/* A player running their own group: the event's controls are the host's
   (codes, messages, course, hand-over, handicaps), so they don't appear. */
.runner .host-only { display: none !important; }

/* The league page's new-team row: the button keeps its words on one line
   and takes only the width it needs; the name box gets the rest. */
#groupsBox .field-row { grid-template-columns: 1fr auto; }
#ngAdd { white-space: nowrap; }

/* A ticket's thread: the filer's messages and the replies, line breaks kept. */
.tk-msg { white-space: pre-line; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 15px; background: var(--card-lo); }
.tk-msg.them { background: color-mix(in srgb, var(--pine) 10%, var(--card-hi)); }
.tk-msg .tk-who { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-2); margin-bottom: 2px; }
.tk-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.tk-reply textarea { flex: 1; min-height: 44px; }

/* League page: the creator fixing a join-typed team name, inline on the player row. */
.row-actions.team-edit input[type="text"] { flex: 1; width: auto; min-width: 0; }

/* A row of long buttons wraps on a phone instead of running off the edge (league page foot). */
.row-actions.row-wrap { flex-wrap: wrap; }
.row-actions.row-wrap > .btn { flex: 1 1 auto; }

/* A search box is a text box here: no browser searchfield chrome. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The league Courses tab: one row per week, the week in mono like a card. */
.cl-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--sand); }
.cl-row:last-child { border-bottom: 0; }
.cl-week { flex: 0 0 52px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fescue); }
.cl-week b { display: block; font-size: 22px; letter-spacing: 0; color: var(--pine); font-weight: 500; line-height: 1; }
.cl-main { flex: 1; min-width: 0; }
.cl-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--graphite); overflow-wrap: anywhere; }
.cl-row.unset .cl-name { color: var(--fescue); font-weight: 500; }
.cl-par { flex: 0 0 auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--graphite); text-align: right; }
.cl-par small { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fescue); }

/* --- Polish sweep (every page at phone width) --- */
/* League player rows: the name takes the first line; dropdown and buttons share the next. */
.pl-row .pl-name { flex: 1 1 100%; align-self: center; }
.pl-row > select { flex: 1 1 auto; min-width: 0; }
/* The clip delete button: a 44px hit area around a 28px dot (the background fills only the content box). */
.reel-del { width: 44px; height: 44px; top: -4px; right: -4px; padding: 8px; box-sizing: border-box; background-clip: content-box; display: flex; align-items: center; justify-content: center; }
/* The scorecard toggle is a tap target, not a caption: 44px tall. */
.sc-toggle { min-height: 44px; }
/* Event and host codes on a narrow phone: two boxes side by side still fit. */
@media (max-width: 400px) { .codebox-val { font-size: 24px; letter-spacing: 0.14em; } }
/* Player rows: the dropdown and the buttons share the second line, hairline between players. */
.pl-row { padding: 6px 0; border-bottom: 1px solid var(--sand); }
.pl-row:last-child { border-bottom: 0; }
.pl-row > select { flex: 1 1 150px; }
.pl-row > .btn { flex: 0 0 auto; }
/* A button beside a long row sits centred, never stretched to its height. */
.usage-row > .btn { align-self: center; }
/* A select is as wide as its longest option unless told otherwise: let it share the line with Remove. */
.pl-row > select { flex: 1 1 100px; width: 100px; }
.pl-row > .btn { padding: 0 12px; font-size: 15px; }

/* --- The Home (home.html): the signed-in hub --------------------------------- */
/* The handicap card: the number large on pine, what it is built from, and the rounds behind it. */
.hm-hcp { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; padding: 18px 20px; border-radius: 18px; color: var(--pine-ink);
  background: linear-gradient(160deg, #176E50, #0B4A34); box-shadow: 0 10px 26px rgba(14, 92, 65, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.hm-hcp .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.hm-hcp .n { font-family: var(--font-mono); font-size: 44px; line-height: 1; font-weight: 500; margin: 4px 0 2px; }
.hm-hcp .s { font-size: 13px; opacity: 0.85; }
.hm-hcp .btn { margin: 0; width: auto; min-height: 48px; padding: 0 18px; text-decoration: none; display: inline-flex; align-items: center;
  background: rgba(247, 245, 236, 0.14); border: 1px solid rgba(247, 245, 236, 0.35); color: var(--pine-ink); box-shadow: none; }
/* A section: a title left, a quiet mono link right — the rhythm of the page. */
.hm-sec { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-4) 0 var(--space-2); }
.hm-sec h2 { margin: 0; font-size: 20px; color: var(--graphite); }
.hm-sec a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); text-decoration: none; }
.hm-friends { display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 8px 2px; scrollbar-width: none; }
.hm-friends::-webkit-scrollbar { display: none; }
.hm-friend { display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; text-decoration: none; color: var(--graphite); }
.hm-friend .av { position: relative; }
.hm-friend .av.live .avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--flag); }
.hm-friend .av .dot { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--flag); border: 3px solid var(--card); }
.hm-friend .n { font-size: 12px; font-weight: 600; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-friend .s { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fescue); margin-top: -4px; }
.hm-friend.add .avatar { --av-size: 56px; --av-bg: transparent; --av-ink: var(--pine); border: 2px dashed color-mix(in srgb, var(--pine) 40%, transparent); }
.hm-card { padding: var(--space-3); border-radius: 18px; background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand);
  box-shadow: 0 6px 18px rgba(56, 48, 34, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.hm-card .fd-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--sand); font: inherit; color: inherit; cursor: pointer; }
.hm-card .fd-row:last-child { border-bottom: 0; }
.hm-card .fd-row .live-pill { vertical-align: 1px; margin-right: 2px; }
.hm-clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-clip { position: relative; display: block; aspect-ratio: 9 / 12; border-radius: 12px; overflow: hidden; background: #244B3A center / cover no-repeat; }
.hm-clip .h { position: absolute; left: 8px; bottom: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(8, 20, 14, 0.6); padding: 3px 7px; border-radius: 999px; }
.hm-clip .p { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.hm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-stats .stat { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 14px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
.hm-stats .stat .n { font-family: var(--font-mono); font-size: 26px; color: var(--pine); font-weight: 500; }
.hm-stats .stat .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fescue); text-align: center; }
body.has-side .hm-friends { padding-right: 2px; }

/* --- PLAY: the raised ball in the middle of the bar, and its sheet ------------ */
.tabbar.five { grid-template-columns: 1fr 1fr 88px 1fr 1fr; overflow: visible; }
.tab-play { display: grid; justify-items: center; align-content: start; padding: 0; border: 0; background: none; cursor: pointer; }
.tab-play .ball, .dt-play .ball { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #1A7A58, #0B4A34); color: var(--pine-ink); font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  border: 4px solid var(--card-hi); box-shadow: 0 12px 26px rgba(14, 92, 65, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.tab-play .ball { margin-top: -30px; }
.tab-play:active .ball { transform: translateY(1px); }
.dt-play { display: none; }
body.has-side .dt-play { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; padding: 6px 10px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); }
body.has-side .dt-play .ball { width: 48px; height: 48px; font-size: 12px; border-width: 3px; box-shadow: 0 8px 18px rgba(14, 92, 65, 0.3); }
.play-dim { position: fixed; inset: 0; z-index: 40; background: rgba(36, 38, 31, 0.42); }
.play-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 86vh; overflow-y: auto;
  padding: 10px 16px calc(16px + var(--inset-bottom)); border-radius: 24px 24px 0 0;
  background: var(--card); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); }
.play-sheet .grip { width: 44px; height: 5px; border-radius: 3px; background: var(--sand); margin: 0 auto 12px; }
.play-sheet h2 { margin: 0 0 4px; color: var(--pine); font-size: 26px; }
.play-sheet p.hint { margin: 0 0 14px; }
.play-opt { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 14px; margin-bottom: 10px; border-radius: 16px; text-decoration: none; color: var(--graphite);
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand); box-shadow: 0 2px 8px rgba(56, 48, 34, 0.08); }
.play-opt .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine); flex: 0 0 auto; }
.play-opt.hot .ic { background: color-mix(in srgb, var(--flag) 12%, transparent); color: var(--flag); }
.play-opt .t { min-width: 0; }
.play-opt b { display: block; font-family: var(--font-display); font-size: 18px; }
.play-opt small { display: block; color: var(--graphite-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-opt .chev { margin-left: auto; color: var(--fescue); flex: 0 0 auto; }
body.has-side .play-sheet { left: var(--dt-side); max-width: 560px; }
@media (prefers-reduced-motion: no-preference) { .play-sheet { animation: play-up 0.22s ease-out; } }
@keyframes play-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hm-card a, .hm-clip { text-decoration: none; }
/* has-side is on every body (the sidebar hides itself below the breakpoint): the sheet moves over only on a wide screen. */
body.has-side .play-sheet { left: 0; max-width: none; }
@media (min-width: 1024px) { body.has-side .play-sheet { left: var(--dt-side); max-width: 560px; } }

/* --- The game chooser (chooser.html, store app): one format per screen over a photo --- */
/* The one place a brighter leaf green appears: pine on a dark photo disappears. */
body.chooser { --leaf: #2FB380; --leaf-lo: #1A7A58; background: #0E2A1E; color: #F7F5EC; overflow: hidden; }
.ch { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ch-bg { position: absolute; inset: 0; background: url(/img/hero.jpg) center 35% / cover no-repeat; }
.ch-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 20, 14, 0.55) 0%, rgba(8, 20, 14, 0.35) 35%, rgba(8, 20, 14, 0.82) 62%, #0E2A1E 100%); }
.ch-top { position: relative; display: flex; align-items: center; gap: 12px; padding: calc(var(--inset-top) + 14px) 16px 0; }
.ch-back, .ch-arr { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(247, 245, 236, 0.16); color: #F7F5EC; backdrop-filter: blur(6px); }
.ch-back .ico, .ch-arr.prev .ico { transform: rotate(180deg); }
.ch-kicker { flex: 1; text-align: center; margin-right: 56px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.ch-stage { position: relative; display: grid; place-items: center; padding: 0 24px; perspective: 900px; min-height: 0; overflow: visible; touch-action: pan-y; }
.ch-card { width: 272px; border-radius: 18px; overflow: hidden; background: var(--card); color: var(--graphite);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: rotateY(-8deg) rotateX(4deg) rotate(-2deg) translate(-26px, -10px); }
.ch-card.second { position: absolute; width: 196px; transform: rotateY(10deg) rotate(5deg) translate(96px, 96px); opacity: 0.97; }
.ch-card .cc-head { padding: 14px 16px 10px; background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border-bottom: 1px solid var(--sand); }
.ch-card .cc-head b { font-family: var(--font-display); font-size: 17px; color: var(--pine); display: block; }
.ch-card .cc-head small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fescue); }
.ch-card .cc-pic { height: 110px; background: url(/img/hero.jpg) center 60% / cover no-repeat; }
.ch-card .mini { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.ch-card .mini th, .ch-card .mini td { padding: 6px 5px; text-align: center; border-bottom: 1px solid var(--sand); }
.ch-card .mini th { font-weight: 500; color: var(--fescue); font-size: 10px; letter-spacing: 0.1em; }
.ch-card .mini td:first-child, .ch-card .mini th:first-child { text-align: left; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; padding-left: 14px; }
.ch-card .mini td.tot { font-weight: 500; color: var(--pine); }
.ch-card .mini .u { color: var(--flag); }
.ch-card .mini .b { background: color-mix(in srgb, var(--pine) 8%, transparent); border-radius: 6px; color: var(--pine); font-weight: 500; }
.ch-card .ts { margin: 12px; padding: 12px 14px; border-radius: 14px; color: var(--pine-ink); background: linear-gradient(160deg, #176E50, #0B4A34); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ch-card .ts b { display: block; font-family: var(--font-display); font-size: 13px; }
.ch-card .ts .n { font-family: var(--font-mono); font-size: 30px; line-height: 1; }
.ch-card .ts .r { text-align: right; }
.ch-card .ts .d { opacity: 0.6; }
.ch-card .mrow { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--sand); font-size: 12.5px; }
.ch-card .mrow .m { font-family: var(--font-mono); font-size: 12px; color: var(--pine); font-weight: 500; }
.ch-card .mrow .lv { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--flag); padding: 2px 6px; border-radius: 999px; margin-left: 6px; }
.ch-card .pos { font-family: var(--font-mono); color: var(--fescue); width: 20px; display: inline-block; }
.ch-card .cc-foot { padding: 10px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fescue); }
.ch-words { position: relative; padding: 8px 20px 0; text-align: center; }
.ch-name { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.ch-name h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; color: #fff; }
.ch-rule { width: 56px; height: 3px; border-radius: 2px; background: var(--leaf); margin: 10px auto 12px; }
.ch-blurb { margin: 0 auto; max-width: 330px; font-size: 14.5px; line-height: 1.4; color: rgba(247, 245, 236, 0.9); min-height: 60px; }
.ch-dots { display: flex; justify-content: center; gap: 7px; margin: 8px 0 0; }
.ch-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(247, 245, 236, 0.35); transition: width 0.18s ease; }
.ch-dots i.on { background: var(--leaf); width: 20px; border-radius: 4px; }
.ch-cta { position: relative; padding: 8px 16px calc(12px + var(--inset-bottom)); display: grid; gap: 4px; }
.ch-cta .btn { margin: 0; min-height: 60px; font-size: 19px; text-decoration: none; display: flex; align-items: center; justify-content: center; border: 0; color: #fff;
  background: linear-gradient(180deg, var(--leaf), var(--leaf-lo)); box-shadow: 0 12px 28px rgba(26, 122, 88, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.ch-count { text-align: center; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(247, 245, 236, 0.75); min-height: 44px; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .ch-dots i { transition: none; } }

/* --- The Feed (feed.html, store app): what your friends did, in the wall's cards --- */
.fe-top { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.fe-wm { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: var(--pine); text-decoration: none; }
.fe-wm span { color: var(--flag); }
.fe-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sand); display: grid; place-items: center; color: var(--pine); text-decoration: none;
  background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); box-shadow: 0 2px 8px rgba(56, 48, 34, 0.08); }
.fe-ic .dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--flag); border: 2px solid var(--card-hi); }
.fe-ic .dot[hidden] { display: none; }
#feList .post-card + .post-card { margin-top: var(--space-3); }
#feList .post-media { display: block; text-decoration: none; }
/* A live friend: the stream as the media, the badge and the hole on it, Watch in the foot. */
.post-media.live { position: relative; }
.post-media .live-badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--flag); padding: 4px 9px; border-radius: 999px; }
.post-media .live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.post-media .hole-tag { position: absolute; left: 10px; bottom: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(8, 20, 14, 0.6); padding: 4px 9px; border-radius: 999px; }
#feList .post-foot .btn.small { margin-left: auto; width: auto; min-height: 44px; padding: 0 16px; text-decoration: none; display: inline-flex; align-items: center; }
#feList .post-foot a.like-btn { text-decoration: none; }
/* A finished round: the score as a tile beside the words, no picture. */
.round-post { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.round-post .rp-tile { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; align-content: center; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
.round-post .rp-tile b { font-family: var(--font-mono); font-size: 28px; font-weight: 500; color: var(--pine); line-height: 1; }
.round-post .rp-tile small { font-family: var(--font-mono); font-size: 10.5px; color: var(--fescue); margin-top: 4px; }
.round-post .t { flex: 1; min-width: 0; }
.round-post .t b { display: block; font-family: var(--font-display); font-size: 17px; }
.round-post .t small { color: var(--graphite-2); font-size: 13px; }

/* --- Me (me.html, store app): you on the cover, then everything of yours --- */
.me-cover .cv-text { bottom: 16px; }
.me-id { display: flex; align-items: flex-end; gap: 14px; }
.me-id .avatar { --av-size: 72px; border: 3px solid rgba(247, 245, 236, 0.85); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.me-id h1 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.05; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); overflow-wrap: anywhere; }
.me-id .l { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; margin-top: 4px; display: block; }
.me-id .me-handle { text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.me-id .me-handle[hidden] { display: none; }
.cv-gear { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: rgba(8, 20, 14, 0.5); color: #F7F5EC; backdrop-filter: blur(6px); }
/* The menu under the gear: the rare things. */
/* The gear's menu floats over the page, under the gear, and moves nothing. */
main.wrap:has(> .me-menu) { position: relative; }
.me-menu { position: absolute; z-index: 20; top: calc(var(--inset-top) + 64px); right: 20px; margin: 0; width: max-content; min-width: 200px; padding: 6px; border-radius: 14px;
  background: var(--card-hi); border: 1px solid var(--sand); box-shadow: 0 10px 28px rgba(56, 48, 34, 0.18); }
.me-menu[hidden] { display: none; }
.me-menu a, .me-menu button { display: block; width: 100%; min-height: 48px; padding: 0 14px; text-align: left; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 600; color: var(--graphite); text-decoration: none; cursor: pointer; line-height: 48px; }
.me-menu a:active, .me-menu button:active { background: var(--card-lo); }
.me-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: var(--space-2); }
.me-stats .stat { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
.me-stats .stat .n { font-family: var(--font-mono); font-size: 24px; color: var(--pine); font-weight: 500; }
.me-stats .stat .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fescue); text-align: center; }
.me-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.me-wall a { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #244B3A center / cover no-repeat; display: grid; place-items: center; text-decoration: none; }
.me-wall .p { color: #fff; font-size: 22px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.me-wall .add { background: transparent; border: 2px dashed color-mix(in srgb, var(--pine) 40%, transparent); color: var(--pine); font-size: 28px; }
.hm-card .fr-round { padding: 8px 0; }
.hm-card .fr-round:last-child { border-bottom: 0; }
.me-set .fr-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pine) 10%, transparent); color: var(--pine); flex-shrink: 0; }
.me-set a.fd-row { text-decoration: none; color: inherit; }
.hm-sec .textlink.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); padding: 0; min-height: 0; }
/* A text link beside a section heading is still a tap target: 44px tall, the row rhythm kept. */
.hm-sec .textlink.mono { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; margin: -14px -4px; }

/* --- Section rhythm: a card's title left, a quiet mono link or tag right (the Home's cadence, in cards) --- */
.hm-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.hm-top h2 { margin: 0; }
.hm-top .hint { margin: 0; }
.sec-link { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); text-decoration: none;
  background: none; border: 0; padding: 0 4px; margin: -14px -4px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.sec-link[hidden] { display: none; }

/* --- The join page with one job (?only=1, PLAY → Join with a code): the code box and nothing else --- */
/* Only the code (the app's PLAY > Join): the photo and the wordmark, shorter, and the card tucked under them as on the full page. */
body.fd-only .fd-hero { height: 200px; min-height: 0; }
body.fd-only .fd-h, body.fd-only .fd-segs { display: none; }
body.fd-only #leagueToggle, body.fd-only #accountBtn, body.fd-only #installBtn, body.fd-only #iosInstallHint { display: none; }
/* A card's error line takes no room until it has something to say. */
.stack > .err:empty { display: none; }
/* --- The account page showing one section (a Me row, in the app) --- */
body.acct-solo #dash { margin-top: 0; }
/* One section of the account page (the app's Me rows): every other card is
   out whatever its own script does later; the page header names the section,
   so the card's own heading steps aside and only its link stays. */
body.acct-solo #dash > .card:not(.solo-on), body.acct-solo main > .card:not(.solo-on) { display: none; }
body.acct-solo .solo-on > .hm-top > h2 { display: none; }
body.acct-solo .solo-on > .hm-top { justify-content: flex-end; }
body.acct-solo .solo-on > .hm-top:has(> h2:only-child) { display: none; }

/* --- Host an event (store app, create.html): the screen after the chooser.
   The format in the cover, questions as rows of big choices, the button
   pinned above the bottom. --- */
body.create main.wrap { padding-bottom: 190px; }
.cr-cover { position: relative; overflow: hidden; height: 180px; margin: 0 calc(-1 * var(--space-3)) var(--space-3);
  padding: calc(var(--inset-top) + 14px) 16px 16px; border-radius: 0 0 22px 22px; color: #F7F5EC;
  background: #244B3A url(/img/hero.jpg) center 40% / cover no-repeat; box-shadow: 0 8px 22px rgba(56, 48, 34, 0.18);
  display: flex; flex-direction: column; justify-content: space-between; }
.cr-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 14, 0.45) 0%, rgba(8, 20, 14, 0.1) 40%, rgba(8, 20, 14, 0.86) 100%); }
.cr-cover > * { position: relative; }
.cr-top { display: flex; align-items: center; gap: 12px; }
.cr-back { width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: 50%; border: 0; box-shadow: none; display: grid; place-items: center; background: rgba(8, 20, 14, 0.35); color: #F7F5EC; font: inherit; cursor: pointer; }
.cr-back .ico { transform: rotate(180deg); }
.cr-kicker { flex: 1; text-align: center; margin-right: 56px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.cr-fmt { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cr-fmt h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.cr-fmt small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; font-weight: 400; }
.cr-change { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #F7F5EC; text-decoration: none; padding: 12px 14px; border-radius: 999px; background: rgba(8, 20, 14, 0.35); white-space: nowrap; min-height: 44px; display: grid; place-items: center; }
.cr-change[hidden] { display: none; }
.cr-q { margin: 0 0 var(--space-3); }
.cr-q label, .cr-q .lab { display: block; font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 8px; }
.cr-q .lab small, .cr-q label small { font-family: var(--font-body); font-weight: 400; font-size: 13.5px; color: var(--fescue); margin-left: 6px; }
.cr-name { font-size: 18px; min-height: 60px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg button { min-height: 56px; border-radius: 14px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); font: inherit; font-weight: 600; font-size: 16px; color: var(--graphite); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 2px 6px rgba(56, 48, 34, 0.08); cursor: pointer; }
.seg button .n { display: block; font-family: var(--font-mono); font-size: 22px; line-height: 1; font-weight: 500; }
.seg button .l { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fescue); margin-top: 4px; }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, #176E50, #0B4A34); border-color: #0B4A34; color: #F7F5EC; box-shadow: 0 8px 18px rgba(14, 92, 65, 0.3); }
.seg button[aria-pressed="true"] .l { color: rgba(247, 245, 236, 0.8); }
.stepper { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; }
.stepper button { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); font-family: var(--font-mono); font-size: 26px; color: var(--pine); cursor: pointer; }
.stepper .v { text-align: center; font-family: var(--font-mono); font-size: 34px; font-weight: 500; color: var(--pine); line-height: 1; }
.stepper .v small { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fescue); margin-top: 6px; font-weight: 400; }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-opt { min-height: 60px; font-size: 18px; }
.cr-math { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand); font-family: var(--font-mono); font-size: 13px; color: var(--pine); }
.cr-math .ico { flex: none; }
.cr-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(14px + var(--inset-bottom)); background: linear-gradient(180deg, rgba(245, 243, 235, 0) 0%, var(--card) 28%); z-index: 5; }
.cr-foot .btn { margin: 0; min-height: 60px; font-size: 19px; background: linear-gradient(180deg, #2FB380, #1A7A58); box-shadow: 0 12px 28px rgba(26, 122, 88, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); border: 0; }
.cr-foot .as { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fescue); margin: 6px 0 0; line-height: 1.3; }
.cr-foot .as a { color: var(--pine); }
.cr-foot .as[hidden] { display: none; }
@media (min-width: 960px) { body.has-side .cr-foot { left: var(--side-w, 0px); } }

/* --- The Grounds in the app (grounds.js, body.gr-app): tabs, the directory
   as a scorecard of rows, your group's card, the highlights grid. The
   website never gets the class, so none of this touches it. --- */
.gr-only[hidden], .gr-tabs[hidden] { display: none; }
body.gr-app .gr-pane { display: none; }
body.gr-app .gr-pane.on { display: block; }
body.gr-app .gr-tabs { margin-top: calc(-1 * var(--space-1)); }
body.gr-app #groundsActions { display: none; }
body.gr-app #teamboard { margin-top: var(--space-3); }
.cv-right { display: flex; gap: 8px; align-items: center; }
.cv-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(192, 57, 47, 0.9); color: #fff; }
.cv-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.cv-live[hidden] { display: none; }
.gr-sec { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-3) 0 var(--space-2); }
.gr-sec .eye { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fescue); }
.gr-sec .sec-link { min-height: 32px; }
.gr-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand); box-shadow: 0 10px 24px rgba(56, 48, 34, 0.1); }
.gr-list[hidden] { display: none; }
.gr-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-bottom: 1px solid var(--sand); color: inherit; min-height: 84px; }
.gr-row:last-child { border-bottom: 0; }
.gr-row[role="button"] { cursor: pointer; }
.gr-pic { position: relative; width: 96px; height: 64px; border-radius: 12px; overflow: hidden; background: #244B3A; display: block; }
.gr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-pic.fill { display: grid; place-items: center; background: linear-gradient(160deg, #176E50, #0B4A34); }
.gr-pic.fill svg { width: 22px; height: 30px; }
.gr-pic .hole { position: absolute; left: 6px; bottom: 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(8, 20, 14, 0.6); padding: 3px 6px; border-radius: 6px; }
.gr-pic .lv { position: absolute; left: 6px; top: 6px; }
.gr-pic.off { background: var(--card-lo); border: 1px solid var(--sand); }
.gr-pic.off .faces { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fescue); }
.gr-pic .play { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(8, 20, 14, 0.6); display: grid; place-items: center; color: #fff; font-size: 10px; }
.gr-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-t b { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gr-t b .fs { width: 14px; height: 18px; display: inline-block; flex: none; }
.gr-t b .fs svg { width: 100%; height: 100%; display: block; }
.gr-t small { font-size: 12.5px; color: var(--graphite-2); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gr-t .st { font-family: var(--font-mono); font-size: 12.5px; color: var(--pine); font-weight: 500; }
.gr-t .st .match-status { display: block; }
.gr-t .st .lead-b { color: var(--flag); }
.gr-t .st .as { color: var(--fescue); font-weight: 400; }
/* One line of state per row: the nine-by-nine chips belong to the watch page. */
.gr-t .st .seg-strip { display: none; }
.gr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gr-r .eyes { font-size: 10.5px; letter-spacing: 0.04em; color: var(--fescue); white-space: nowrap; text-align: right; max-width: 72px; }
.gr-r .ico { color: var(--fescue); }
.gr-row.off { opacity: 0.85; }
.gr-row.off .gr-t b { color: var(--graphite-2); }
.gr-peek { grid-column: 1 / -1; cursor: default; }
.gr-peek .sc-toggle { margin: 0; }
.gr-mine { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); color: var(--pine-ink); background: linear-gradient(160deg, #176E50, #0B4A34); box-shadow: 0 10px 24px rgba(14, 92, 65, 0.3); margin-top: var(--space-3); }
.gr-mine[hidden] { display: none; }
.gr-mine .t { flex: 1; min-width: 0; }
.gr-mine .t b { display: block; font-family: var(--font-display); font-size: 16px; }
.gr-mine .t small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-top: 2px; }
.gr-mine .btn { margin: 0; width: auto; flex: none; min-height: 48px; padding: 0 16px; font-size: 15px; background: rgba(247, 245, 236, 0.16); border: 1px solid rgba(247, 245, 236, 0.35); color: #fff; box-shadow: none; }
.hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: var(--space-2); }
.hl-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 0; padding: 0; margin: 0; background: linear-gradient(160deg, #176E50, #0B4A34); cursor: pointer; }
.hl-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-item .tag { position: absolute; left: 6px; bottom: 6px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(8, 20, 14, 0.6); padding: 2px 6px; border-radius: 6px; }
.hl-item .p { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 22px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }

/* --- The host page in the app (host.js, body.host-app): a short header,
   three tabs, the setup behind the dots one card at a time. --- */
body:not(.host-app) .hs-head, body:not(.host-app) .hs-live, body:not(.host-app) .hs-tabs, body:not(.host-app) .hs-menu, body:not(.host-app) .hs-back, body:not(.host-app) .hs-pane, body:not(.host-app) #groupCard { display: none; }
body.host-app #evHead { display: none; }
body.host-app .hs-pane { display: none; }
body.host-app .hs-pane.on { display: block; }
body.host-app .hs-pane[hidden] { display: none; }
body.host-app #matchCard.hs-moved { display: none; }
body.host-app .hs-setup:not(.solo-on) { display: none; }
body.host-app.hs-solo .hs-setup.solo-on { margin-top: 0; }
body.host-app main.wrap > p.hint.center { display: none; }
body.host-app.hs-solo .hs-pane, body.host-app.hs-solo .hs-tabs, body.host-app.hs-solo .hs-live { display: none; }
body.host-app #hostTotal, body.host-app #roundCard, body.host-app #eventBoardCard { margin-top: var(--space-2); }
body.host-app #scoreArea > .field:has(> #gpTitle) { display: none; }
body.host-app #hmStatus { margin: 0 0 var(--space-2); }
.hs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--inset-top) + 10px) 0 10px; }
.hs-head[hidden] { display: none; }
.hs-head .t { min-width: 0; }
.hs-head h1 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--pine); display: flex; align-items: center; gap: 8px; }
.hs-head h1 .pen { width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--sand); background: var(--card-hi); color: var(--fescue); display: grid; place-items: center; font-size: 14px; cursor: pointer; }
.hs-head h1 .pen[hidden] { display: none; }
.hs-head .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fescue); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-head .r { display: flex; align-items: center; gap: 10px; flex: none; }
.hs-head .cv-gear { background: var(--card-lo); color: var(--pine); border: 1px solid var(--sand); backdrop-filter: none; }
.hs-head .sw { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pine); min-height: 44px; margin: 0; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sand); background: var(--card-hi); width: auto; box-shadow: none; cursor: pointer; }
.hs-head .sw[hidden] { display: none; }
.hs-live { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--flag); color: #fff; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.hs-live[hidden] { display: none; }
.hs-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.hs-live .sp { flex: 1; }
.hs-live button { font: inherit; color: #fff; background: rgba(255, 255, 255, 0.18); border: 0; border-radius: 999px; padding: 8px 14px; min-height: 40px; width: auto; margin: 0; box-shadow: none; cursor: pointer; }
.hs-tabs { margin-top: 0; }
.hs-menu { top: calc(var(--inset-top) + 60px); }
.hs-back .sec-link { min-height: 32px; }

/* --- The league page in the app (league.js, body.lg-app): the cover always,
   three tabs, this week's score as one card, your standing as tiles, the
   creator's controls behind the dots one section at a time. --- */
.lg-only[hidden], .lg-menu[hidden], .lg-back[hidden] { display: none; }
body:not(.lg-app) .lg-menu, body:not(.lg-app) .lg-back, body:not(.lg-app) .lg-only { display: none; }
body.lg-app #lgMeta, body.lg-app #lgCode, body.lg-app #tabRun, body.lg-app .lg-foot { display: none; }
body.lg-app .subtabs { margin-top: calc(-1 * var(--space-1)); }
body.lg-app.lg-solo .subtabs, body.lg-app.lg-solo #roundTab, body.lg-app.lg-solo #boardTab, body.lg-app.lg-solo #coursesTab { display: none; }
body.lg-app.lg-solo #creatorCard > h2, body.lg-app.lg-solo #creatorCard > .field:not(.solo-on) { display: none; }
body.lg-app.lg-solo #creatorCard > .field.solo-on { display: block; margin: 0; }
body.lg-app.lg-solo #creatorCard > .field.solo-on > label:first-child { font-family: var(--font-display); font-size: 22px; color: var(--pine); margin-bottom: var(--space-2); }
/* This week: the course row, then the total and Save side by side. */
body.lg-app #myScoreCard { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "course course" "wk wk" "input save" "live live" "cur cur" "err err"; gap: 0 10px; padding: 0 0 14px; overflow: hidden; }
body.lg-app #myScoreCard > h2 { display: none; }
body.lg-app #myScoreCard > .field-row { grid-area: wk; padding: 0 14px; margin: 8px 0 0; }
body.lg-app #myScoreCard > .field-row > .field:first-child { display: none; }
body.lg-app #myScoreCard > .field-row:has(> #msRoundField[hidden]) { display: none; }
body.lg-app #myScoreCard > .field:has(> #msGross) { grid-area: input; margin: 0; padding: 12px 0 0 14px; }
body.lg-app #myScoreCard > .field:has(> #msGross) > label { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 8px; white-space: nowrap; }
body.lg-app #msGross { font-family: var(--font-mono); font-size: 28px; min-height: 64px; text-align: center; }
body.lg-app #msSave { grid-area: save; align-self: end; margin: 0 14px 0 0; width: auto; min-height: 64px; padding: 0 22px; font-size: 17px; }
body.lg-app #myScoreCard > #liveTotalBtn { grid-area: live; margin: 10px 14px 0; }
body.lg-app #msCurrent { grid-area: cur; margin: 10px 14px 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--pine); }
body.lg-app #msErr { grid-area: err; margin: 6px 14px 0; }
body.lg-app #msErr:empty { display: none; }
.lw-course { grid-area: course; display: grid; grid-template-columns: 40px 48px 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 14px 10px 8px; border-bottom: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
.lw-course .wk-arr { width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid var(--sand); background: var(--card-hi); color: var(--pine); display: grid; place-items: center; box-shadow: none; cursor: pointer; }
.lw-course .wk-arr:not(.next) .ico { transform: rotate(180deg); }
.lw-course .wk-arr:disabled { opacity: 0.35; cursor: default; }
.lw-course .wk { font-family: var(--font-mono); text-align: center; color: var(--pine); line-height: 1; }
.lw-course .wk b { display: block; font-size: 24px; font-weight: 500; }
.lw-course .wk small { display: block; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fescue); margin-top: 3px; }
.lw-course .t { min-width: 0; }
.lw-course .t b { display: block; font-family: var(--font-display); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-course .t small { display: block; font-size: 12px; color: var(--graphite-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-course.tba .t b { color: var(--fescue); font-weight: 500; }
.lw-course .par { font-family: var(--font-mono); font-size: 13px; color: var(--pine); font-weight: 500; white-space: nowrap; }
body.lg-app #lgStats { margin-top: var(--space-3); }
/* Standings and courses: the card chrome goes, a section line stands in. */
body.lg-app #boardTab .card, body.lg-app #coursesTab .card { background: none; border: 0; box-shadow: none; padding: 0; margin-top: var(--space-3); }
body.lg-app #boardTab .card > h2, body.lg-app #boardTab .hm-top h2, body.lg-app #coursesTab .hm-top h2 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fescue); font-weight: 400; }
body.lg-app #standingsTable, body.lg-app #weekTable, body.lg-app #teamsTable, body.lg-app #courseList { border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand); box-shadow: 0 10px 24px rgba(56, 48, 34, 0.1); padding: 0 12px; }
body.lg-app #boardTab .lb tr:last-child td { border-bottom: 0; }
body.lg-app #courseList .cl-row { padding: 10px 2px; }
body.lg-app #liveCard { background: linear-gradient(160deg, #176E50, #0B4A34); color: var(--pine-ink); border: 0; box-shadow: 0 10px 24px rgba(14, 92, 65, 0.3); }
body.lg-app #liveCard > h2, body.lg-app #liveCard .hint { color: rgba(247, 245, 236, 0.85); }
body.lg-app #liveCard > h2 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; }
body.lg-app #liveCard .btn { background: rgba(247, 245, 236, 0.16); border: 1px solid rgba(247, 245, 236, 0.35); color: #fff; box-shadow: none; }
body.lg-app #myTeamCard > h2, body.lg-app #joinSelfCard > h2 { font-size: 20px; }
.lg-menu { top: calc(var(--inset-top) + 64px); }
.lg-menu a[hidden], .lg-menu button[hidden] { display: none; }

/* --- What's on (the Home): one card on the event's cover, the rest as rows. --- */
#hmOn[hidden] { display: none; }
#hmOn { margin: 0 0 var(--space-3); }
.wo { position: relative; overflow: hidden; min-width: 0; border-radius: var(--radius-lg); color: var(--pine-ink); background: #244B3A center 60% / cover no-repeat; box-shadow: 0 12px 28px rgba(14, 92, 65, 0.3); min-height: 150px; display: grid; grid-template-rows: auto 1fr auto; }
.wo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 20, 14, 0.9) 0%, rgba(8, 20, 14, 0.78) 55%, rgba(8, 20, 14, 0.35) 100%); }
.wo > * { position: relative; min-width: 0; }
.wo .top { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; }
.wo .eye { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wo .eye.when { margin-left: auto; flex: none; opacity: 1; color: #FFD54F; }
.wo .top .lv { margin-left: auto; flex: none; }
.wo .top .faces { margin-left: auto; flex: none; display: flex; }
.wo .top .faces .avatar { border: 2px solid rgba(8, 20, 14, 0.8); margin-left: -8px; }
.wo .top .faces .avatar:first-child { margin-left: 0; }
.wo .mid { padding: 8px 14px 0; }
.wo .mid b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; color: #fff; }
.wo .mid small { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; margin-top: 4px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo .mid .st { display: block; font-family: var(--font-mono); font-size: 13px; margin-top: 8px; color: #F7F5EC; }
.wo .mid .st.b { color: #FF8A80; }
.wo .acts { display: flex; gap: 8px; padding: 12px 14px 14px; }
.wo .acts .btn { margin: 0; width: auto; flex: 1 1 0; min-width: 0; min-height: 48px; font-size: 15px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.wo .acts .btn.ghost { background: rgba(247, 245, 236, 0.14); border: 1px solid rgba(247, 245, 236, 0.4); color: #fff; box-shadow: none; }
.wo .acts .btn.live { flex: 1.2 1 0; }
.wo .acts .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.wo-more { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; margin-top: 8px; border-radius: 14px; background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); border: 1px solid var(--sand); text-align: left; color: inherit; font: inherit; min-height: 56px; cursor: pointer; box-shadow: none; }
.wo-more .t { flex: 1; min-width: 0; }
.wo-more .t b { display: block; font-family: var(--font-display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-more .t small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fescue); margin-top: 2px; }
.wo-more .ico { color: var(--fescue); flex: none; }
.hm-sec.hm-first { margin-top: var(--space-3); }

/* Home: an empty Highlights or Your season keeps its place with one quiet
   row (icon, a title, a line) that says what fills it, the whole row a link.
   It goes the moment there is something to show. */
.hm-empty { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--pine) 32%, transparent); text-decoration: none; color: var(--graphite); }
.hm-empty .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--pine); background: color-mix(in srgb, var(--pine) 10%, transparent); }
.hm-empty .t { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; color: var(--graphite-2); }
.hm-empty .t b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--graphite); margin-bottom: 1px; }
.hm-empty .chev { flex: none; display: grid; color: var(--fescue); }

/* Home, the handicap card: a strip of the last three own-ball rounds under
   the number (gross, to par, the week or group, how long ago), the ones the
   number counts brighter. Each is a tap into the rounds. */
.hm-hcp .strip { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(247, 245, 236, 0.18); }
.hm-hcp .strip a { flex: 1 1 0; min-width: 0; min-height: 56px; display: grid; align-content: start; gap: 1px; padding: 8px 10px; border-radius: 12px; background: rgba(247, 245, 236, 0.1); border: 1px solid rgba(247, 245, 236, 0.18); text-decoration: none; color: var(--pine-ink); }
.hm-hcp .strip a.counts { background: rgba(247, 245, 236, 0.2); border-color: rgba(247, 245, 236, 0.45); }
.hm-hcp .strip .sc { font-family: var(--font-mono); font-size: 22px; line-height: 1; font-weight: 500; color: #fff; white-space: nowrap; }
.hm-hcp .strip .sc small { font-size: 11px; opacity: 0.85; margin-left: 4px; }
.hm-hcp .strip .w { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.hm-hcp .strip .ago { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Page to page: the browser cross-fades the old page into the new one, and
   the tab bar and the sidebar stay where they are instead of blinking. One
   name each, so a page with both (the sidebar hides the bar on a wide
   screen) still transitions. Off with reduced motion. */
@view-transition { navigation: auto; }
.tabbar { view-transition-name: fw-tabbar; }
.dt-side { view-transition-name: fw-side; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- The home course: the banner on a profile, and a friend keeping a scorecard on the Home --- */
.prof-head { overflow: hidden; }
.ph-banner { position: relative; height: 132px; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-4)) var(--space-3); background: #244B3A center 45% / cover no-repeat; }
.ph-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 14, 0.05) 0%, rgba(8, 20, 14, 0.55) 100%); }
.ph-banner .ph-course { position: absolute; left: 16px; bottom: 10px; z-index: 1; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #F7F5EC; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.ph-banner .ph-credit { position: absolute; right: 12px; bottom: 8px; z-index: 1; font-size: 9.5px; letter-spacing: 0.06em; color: rgba(247, 245, 236, 0.8); }
.ph-banner [hidden] { display: none; }
.hm-friend .av.playing .avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--pine); }
.hm-friend .av.playing .dot { background: var(--pine); }

/* The Me cover with a home course: the eyebrow and the credit need the room, so the cover is taller. */
.me-cover { height: calc(236px + var(--inset-top)); }

/* --- Event chat (js/chat.js): the pill, the sheet over a page, the stream over the video --- */
.cv-chat { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(8, 20, 14, 0.5); backdrop-filter: blur(6px); color: #F7F5EC; font: 600 13px var(--font-body); }
.cv-chat .b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--flag); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cv-chat .b[hidden] { display: none; }
.cv-chat.off { opacity: 0.72; }
.cv-chat.off .t { text-decoration: line-through; }
.ev-cover .cv-chat { position: absolute; right: 16px; bottom: 14px; z-index: 3; }
.ev-cover:has(.cv-chat) .cv-text { right: 112px; }   /* the title and the lines under it stop short of the pill */
.ev-head .cv-chat { margin-left: auto; background: var(--pine); color: var(--pine-ink); }
.chat-dim { position: fixed; inset: 0; z-index: 59; background: rgba(8, 20, 14, 0.35); }
.chat-dim[hidden] { display: none; }
.chat-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 64vh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28); padding: 10px 16px calc(var(--inset-bottom) + 12px); }
.chat-sheet[hidden] { display: none; }
.chat-sheet .grip { width: 44px; height: 5px; border-radius: 3px; background: var(--sand); margin: 0 auto 10px; }
.chat-sheet .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.chat-sheet .hd h2 { margin: 0; font-size: 20px; color: var(--pine); }
.chat-sheet .hd small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fescue); }
.chat-sheet .x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sand); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); color: var(--graphite); font-size: 18px; cursor: pointer; flex: none; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.msg { display: flex; gap: 10px; align-items: flex-end; }
.msg .av { flex: none; }
.msg .bub { position: relative; max-width: 80%; background: #fff; border: 1px solid var(--sand); border-radius: 16px 16px 16px 4px; padding: 8px 12px; font-size: 15px; line-height: 1.35; color: var(--graphite); overflow-wrap: anywhere; }
.msg .bub b { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fescue); margin-bottom: 2px; font-family: var(--font-mono); font-weight: 500; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: var(--pine); color: var(--pine-ink); border-color: transparent; border-radius: 16px 16px 4px 16px; }
.msg.me .bub b { color: rgba(247, 245, 236, 0.72); }
.msg .bub .del { display: none; margin: 6px 0 0; padding: 0 10px; min-height: 40px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.06); color: inherit; font: 600 13px var(--font-body); cursor: pointer; }
.msg .bub.show-del .del { display: inline-block; }
.chat-note { font-family: var(--font-mono); font-size: 11px; color: var(--fescue); text-align: center; margin: 4px 0 6px; }
.chat-in { display: flex; gap: 8px; }
.chat-in input { flex: 1; min-width: 0; min-height: 56px; border-radius: 14px; border: 1px solid var(--sand); padding: 0 14px; font: 16px var(--font-body); background: #fff; color: var(--graphite); }
.chat-in .send, .wbar .send { min-width: 76px; min-height: 56px; border-radius: 14px; border: 0; background: var(--pine); color: var(--pine-ink); font: 700 15px var(--font-body); cursor: pointer; }
.chat-in .send:disabled, .wbar .send:disabled { opacity: 0.6; }
body.chat-open { overflow: hidden; }
/* Over the video: the last few messages, the newest brightest, above the rail; the input on a tap of the pill. */
.wchat { position: absolute; left: 12px; right: 12px; bottom: calc(var(--inset-bottom) + 252px); z-index: 6; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.wchat[hidden] { display: none; }
.wchat .hide { pointer-events: auto; align-self: flex-end; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(8, 20, 14, 0.5); backdrop-filter: blur(6px); color: rgba(247, 245, 236, 0.85); font: 600 12px var(--font-body); cursor: pointer; }
.wchat .wlist { display: flex; flex-direction: column; gap: 6px; }
.wchat .m { align-self: flex-start; max-width: 82%; background: rgba(8, 20, 14, 0.55); backdrop-filter: blur(6px); color: #fff; border-radius: 14px; padding: 7px 11px; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.wchat .m b { color: #9FD5B5; font-weight: 700; margin-right: 6px; }
.wchat .m.f1 { opacity: 0.8; } .wchat .m.f2 { opacity: 0.55; }
.wbar { position: absolute; left: 12px; right: 12px; bottom: calc(var(--inset-bottom) + 188px); z-index: 7; display: flex; gap: 8px; }
.wbar[hidden] { display: none; }
.wbar input { flex: 1; min-width: 0; min-height: 52px; border-radius: 14px; border: 0; padding: 0 14px; font: 16px var(--font-body); background: rgba(255, 255, 255, 0.94); color: var(--graphite); }
.wbar .send { min-height: 52px; }
.chrome-tr .cv-chat { margin-left: 0; }
@media (prefers-reduced-motion: no-preference) { .chat-sheet { animation: chat-up 0.22s ease-out; } @keyframes chat-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } } }
/* Over the video the pill is a round icon button like mute and close, the count riding its corner. */
.cv-chat.icon { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.cv-chat.icon .b { position: absolute; top: -4px; right: -4px; }
.cv-chat.icon.off { opacity: 0.6; }

/* The course line on a cover is one line: a long name ends in an ellipsis rather than climbing into the top row. */
.ev-cover .cv-course { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Courses near me (NEAR_ME): one full-width quiet button under the search box, and the distance after a row's name in mono. */
.cc-near { width: 100%; margin-top: var(--space-2); }
.cc-dist { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The host page in the app: its own head pads by the status bar, so the wrap does not. */
body.host-app main.wrap { padding-top: 0; }

/* Profile photos: the photo over the initials, which stay underneath in case it fails to load. */
.avatar { position: relative; overflow: hidden; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Your photo (avatarpick.js): the camera badge on the Me avatar, and the sheet it opens. */
.av-wrap { position: relative; display: inline-block; }
.av-cam { position: absolute; right: -6px; bottom: -6px; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: #F7F5EC; color: var(--pine); border: 2px solid var(--pine); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); cursor: pointer; }
.av-cam svg { width: 18px; height: 18px; }
.pp-back { position: fixed; inset: 0; z-index: 80; background: rgba(8, 20, 14, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.pp-sheet { width: 100%; max-width: 520px; background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
  padding: 10px 16px calc(var(--inset-bottom) + 18px); max-height: 92vh; overflow: auto; }
.pp-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--sand); margin: 0 auto 14px; }
.pp-sheet h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; color: var(--pine); }
.pp-sub { margin: 0 0 14px; font-size: 14px; color: var(--graphite-2); }
.pp-crop { position: relative; width: 240px; height: 240px; margin: 0 auto 10px; border-radius: 18px; overflow: hidden; touch-action: none; }
.pp-crop[hidden] { display: none; }
.pp-crop canvas { width: 240px; height: 240px; display: block; cursor: grab; }
.pp-crop i { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 999px rgba(0, 0, 0, 0.45); }
.pp-zoom { display: flex; align-items: center; gap: 10px; max-width: 280px; margin: 0 auto 6px; color: var(--graphite-2); font-size: 20px; }
.pp-zoom[hidden] { display: none; }
.pp-zoom input { flex: 1; min-height: 44px; accent-color: var(--pine); }
.pp-hint { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fescue); margin: 0 0 14px; }
.pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-sheet .btn { min-height: 56px; }
.pp-save { width: 100%; margin-top: 10px; }
.pp-rm { display: block; width: 100%; margin-top: 8px; min-height: 48px; background: none; border: 0; color: var(--graphite-2); font: 600 15px var(--font-body); text-decoration: underline; cursor: pointer; }

/* The Feed's camera and the Me wall's + are buttons now: they open the photo post sheet in place. */
button.fe-ic { padding: 0; cursor: pointer; font: inherit; }
button.fe-ic[hidden] { display: none; }
.me-wall button.add { position: relative; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; padding: 0; font-size: 28px; font-family: inherit; cursor: pointer; }

/* Who's playing: the listed players' faces, on the host's list and above a
   team's one card. */
.mem-who { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mem-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-members { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-2); color: var(--graphite-2); font-size: 0.95rem; min-width: 0; }
.sp-members > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The group sheet (the pencil, the faces, the add row): a team's name, a
   match's sides, who's playing. And the add row on a team's card. */
.grp-sheet { max-height: 88vh; overflow-y: auto; }
.grp-sheet .field-row { margin-top: var(--space-2); }
.grp-sheet .row-actions { min-height: 56px; border-bottom: 1px solid var(--sand); align-items: center; }
.grp-sheet select { min-height: 52px; margin-top: var(--space-2); }
.grp-done { width: 100%; margin-top: var(--space-3); }
.sp-mem-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0 0 var(--space-2); padding: 0 12px; border: 1.5px dashed var(--fescue); border-radius: 14px; background: none; color: var(--pine); font: 700 15px var(--font-body); text-align: left; cursor: pointer; }
.sp-mem-add .plus { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pine); color: var(--pine-ink); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.sp-members { min-height: 56px; }
.sp-members > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mem-edit { flex: none; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--pine); font: 700 14px var(--font-body); cursor: pointer; }

/* The app's Groups list is one card of full-width rows at every width: the
   desktop three-column grid (body.has-side #scorecard) is for the website's
   separate row cards, and squeezed these into 220px columns on an iPad. */
body.has-side #scorecard.gr-list { display: block; }

/* The league's This week and Standings put a 440px column beside the main
   one, which only fits a desktop: between the sidebar's 960px and 1180px
   (an iPad, a small laptop) the main column fell to about 230px and the
   score box clipped its own hint. Stacked there instead. */
@media (min-width: 960px) and (max-width: 1179px) {
  body.has-side #boardTab, body.has-side #roundTab { grid-template-columns: minmax(0, 1fr); }
}

/* A photo avatar, while its picture loads, is a quiet sand circle rather than
   the initials on their colour: no flash of letters before the face. A photo
   that fails removes itself (avatar.js), and the initials come back. */
.avatar:has(> img) { background: var(--sand); color: transparent; }

/* Chat for whoever is running the group (chat.js feedHost, pillIcon): the
   round Chat button in the app's Score header, styled like the dots beside
   it, and the last messages over the camera preview, a tap opening the sheet. */
.hs-head .cv-chat.icon { background: var(--card-lo); color: var(--pine); border: 1px solid var(--sand); backdrop-filter: none; }
.chat-feed { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: flex-end; gap: 8px; cursor: pointer; }
.chat-feed .wlist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.chat-feed .m { align-self: flex-start; max-width: 100%; background: rgba(8, 20, 14, 0.6); backdrop-filter: blur(6px); color: #fff; border-radius: 12px; padding: 5px 10px; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.chat-feed .m b { color: #9FD5B5; font-weight: 700; margin-right: 6px; }
.chat-feed .m.f1 { opacity: 0.8; } .chat-feed .m.f2 { opacity: 0.55; }
.chat-feed .open { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgba(8, 20, 14, 0.6); color: #F7F5EC; cursor: pointer; }

/* The course on the create page (create.js mountCourse): search and Courses
   near me where Par was, a card for the one picked, and the way out to par. */
.cr-course .cc-near { min-height: 56px; }
.cr-course .cc-near.cr-off { display: none; }
.cr-cresults { margin-top: var(--space-2); }
.cr-cresults:empty { display: none; }
.cr-cresults .btn { text-align: left; min-height: 60px; }
.cr-cpick { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--sand); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-hi), var(--card-lo)); }
.cr-cpick[hidden] { display: none; }
.cr-cpick .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-cpick .hd b { font-family: var(--font-display); font-size: 18px; color: var(--pine); min-width: 0; }
.cr-cpick .hd .textlink { color: var(--pine); flex: none; padding-right: 0; }
.cr-cpick .field { margin: 10px 0 0; }
.cr-cpick .field[hidden] { display: none; }
.cr-cpick label { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.cr-cpick select { width: 100%; min-height: 52px; }
.cr-parlink { margin: 8px 2px 0; font-size: 14px; color: var(--graphite-2); }
.cr-parlink[hidden] { display: none; }
.cr-parlink .textlink { color: var(--pine); padding: 0 4px; text-decoration: underline; }

/* Me › Delete account lands here (account.js ?delete): a brief highlight
   says this is the place. Still under reduced motion: a plain outline. */
.flash-row { border-radius: 14px; outline: 2px solid var(--sand); outline-offset: 8px; }
/* Chat: View profile is a link styled as the bubble's other actions; the face links too. */
.msg .bub a.del { text-decoration: none; line-height: 40px; margin-right: 6px; }
.msg a.av { text-decoration: none; border-radius: 50%; }
/* A profile that is not a friend's: the note and Add friend under the header. */
.ph-stranger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px 4px; }
.ph-stranger .hint { margin: 0; flex: 1 1 200px; }
.ph-stranger .btn.small { min-height: 44px; }
/* Under the page-to-page cross-fade: the page colour, never nothing. Mid-fade
   both pages are part-transparent, and in the iPhone app what shows through
   is the app's black frame (a black flash on every page change). */
::view-transition { background: var(--card); }