/* live-beta.css — full-bleed, app-shaped live scoring page.
   No website chrome. Built to feel native when added to the home
   screen. Reuses the v2 dark theme colour vocabulary. */

:root {
  --gold:   #D9B060;
  --accent: #6CCF8E;
  --bg:     #0a0c10;
  --bg-2:   #11141a;
  --line:   rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.04);
  --ink:    #fff;
  --ink-2:  rgba(255,255,255,0.65);
  --ink-3:  rgba(255,255,255,0.40);
  --danger: #E27A5B;

  /* Safe-area pads. Reused everywhere a screen anchors top/bottom. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}
html {
  height: 100%;
  overscroll-behavior: none;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--gold); }

/* ─────────────────────────────────────────────────────────────
   Splash — paints on first frame, fades out once JS hydrates.
   System fonts so no FOIT.
   ───────────────────────────────────────────────────────────── */
.lb-splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 1000;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  transition: opacity 320ms ease-out;
}
.lb-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.lb-splash-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lb-splash-logo {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lb-splash-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--gold);
}
.lb-splash-progress {
  position: relative;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.lb-splash-progress > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-100%);
  animation: lb-splash-sweep 1.2s ease-in-out infinite;
}
@keyframes lb-splash-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─────────────────────────────────────────────────────────────
   App root — fills the viewport. Phase-specific layouts handle
   their own padding so safe areas land in the right place.
   ───────────────────────────────────────────────────────────── */
.lb-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* Smooth in when splash leaves. */
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.lb-app[data-ready="true"] { opacity: 1; }
.lb-app[hidden] { display: none; }

/* Top app bar — sits inside the safe area. Used by setup, overview,
   complete, leaderboard, scoreboard. Round screen replaces it with
   its own thinner hole header. */
.lb-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding:
    calc(var(--safe-top) + 8px)
    calc(var(--safe-right) + 12px)
    8px
    calc(var(--safe-left) + 12px);
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
.lb-topbar-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.lb-topbar-btn:active { background: rgba(255,255,255,0.12); }
.lb-topbar-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--ink);
}
.lb-topbar-spacer { flex-shrink: 0; width: 36px; }

/* The main body of every non-round screen scrolls under the top bar.
   Footers anchor to the bottom safe-area. */
.lb-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lb-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    8px
    calc(var(--safe-right) + 12px)
    8px
    calc(var(--safe-left) + 12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-foot {
  flex-shrink: 0;
  padding:
    8px
    calc(var(--safe-right) + 14px)
    calc(var(--safe-bottom) + 8px)
    calc(var(--safe-left) + 14px);
  border-top: 1px solid var(--line-2);
  background: var(--bg);
  display: flex;
  gap: 8px;
}
.lb-foot--single { display: block; }

/* ─────────────────────────────────────────────────────────────
   Primary actions / inputs.
   ───────────────────────────────────────────────────────────── */
.lb-cta {
  width: 100%;
  padding: 10px 18px;
  background: var(--gold);
  border: none;
  border-radius: 10px;
  color: #0a0c10;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.lb-cta:disabled { opacity: 0.50; }
.lb-cta--ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--ink);
}
.lb-cta--danger {
  background: rgba(226,122,91,0.14);
  border: 1px solid rgba(226,122,91,0.45);
  color: var(--danger);
  font-weight: 600;
}
.lb-cta--danger:hover { background: rgba(226,122,91,0.22); }

/* Shot-type picker — long-press the + Shot FAB to open. Three
   equal-width pills, centred on the screen so the eye lands on
   them without scanning. Backdrop barely darkens the map so the
   player keeps their context. Tap anywhere off the buttons to
   dismiss; no Cancel button. */
.lb-shot-type-host {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 950;
  display: flex;
  align-items: center;       /* vertically central */
  justify-content: center;   /* horizontally central */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms;
}
.lb-shot-type-host[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
/* Grid forces equal columns: every button is sized to the widest
   one (Penalty), so Shot and Sand no longer look skinnier than
   their longer-labelled neighbour. max-width caps the row on big
   screens so the buttons don't end up absurdly wide. */
.lb-shot-type-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 0 16px;
  transform: translateY(12px);
  transition: transform 220ms cubic-bezier(0.2,0.7,0.2,1);
}
.lb-shot-type-host[data-open="true"] .lb-shot-type-buttons {
  transform: translateY(0);
}
.lb-shot-pick {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  background: rgba(10,12,16,0.90);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  cursor: pointer;
  transition: transform 80ms;
}
.lb-shot-pick:active { transform: scale(0.94); }
.lb-shot-pick i { font-size: 20px; }
.lb-shot-pick--shot    { color: var(--gold); border-color: rgba(217,176,96,0.40); }
.lb-shot-pick--sand    { color: #E4C287; border-color: rgba(228,194,135,0.40); }
.lb-shot-pick--penalty { color: var(--danger); border-color: rgba(226,122,91,0.40); }

/* ─────────────────────────────────────────────────────────────
   Shot pin markers + edit sheet — drag to relocate, tap to edit,
   tap an empty spot on the map to insert.
   ───────────────────────────────────────────────────────────── */
.lb-shot-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFD66B;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  color: #1a1c20;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: grab;
  /* divIcons default to 12x12 — undo the offset so our 22x22 sits
     anchored at its centre. */
  margin: -11px 0 0 -11px;
}
.lb-shot-pin:active { cursor: grabbing; }
.lb-shot-pin--sand     { background: #E4C287; }
.lb-shot-pin--penalty  { background: #E27A5B; color: #fff; }
.lb-shot-pin--holed {
  width: 26px;
  height: 26px;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(217,176,96,0.55), 0 1px 4px rgba(0,0,0,0.45);
  margin: -13px 0 0 -13px;
}

/* Edit / add sheet — sits in the same modal host as the shot type
   picker. Distinct card variant so we can show multiple rows. */
.lb-shot-edit-card {
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px;
  width: calc(100% - 32px);
  max-width: 360px;
  margin: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.lb-shot-edit-head { text-align: center; }
.lb-shot-edit-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
}
.lb-shot-edit-sub {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.lb-shot-edit-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lb-shot-edit-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.lb-shot-edit-pill i { font-size: 16px; opacity: 0.85; }
.lb-shot-edit-pill:hover:not(:disabled) {
  background: rgba(217,176,96,0.12);
  border-color: rgba(217,176,96,0.45);
}
.lb-shot-edit-pill.is-active {
  background: rgba(217,176,96,0.20);
  border-color: var(--gold);
  color: var(--gold);
}
.lb-shot-edit-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.lb-shot-edit-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lb-shot-edit-act {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lb-shot-edit-act--danger {
  background: rgba(226,122,91,0.10);
  border-color: rgba(226,122,91,0.45);
  color: var(--danger);
}
.lb-shot-edit-act--danger:hover { background: rgba(226,122,91,0.18); }
/* Highlighted state used by the penalty detail sheet — the
   currently-selected source / type button. */
.lb-shot-pick.is-selected {
  background: rgba(217,176,96,0.18);
  border-color: var(--gold);
  color: var(--gold);
}

/* Penalty detail sheet — two stacked rows of small buttons
   (source on top, type below) + a confirm footer. Renders into
   the same lb-shot-type-host as the shot-type chooser; the host's
   slide-in animation carries through. */
.lb-penalty-detail {
  width: calc(100% - 32px);
  max-width: 480px;
  padding: 16px;
  background: rgba(10,12,16,0.95);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}
.lb-penalty-detail-h {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.lb-penalty-detail-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.lb-penalty-detail-row .lb-shot-pick {
  padding: 10px 6px;
  font-size: 11px;
}
.lb-penalty-detail-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 6px;
}
/* Canonical save — accent in gold (Pro feature, course-wide
   impact). Sits next to a neutral "Save my view" button. */
.lb-shot-pick--canonical { color: var(--gold); border-color: rgba(217,176,96,0.40); }

/* Caption sitting under the lock-sheet buttons explaining what
   personal vs canonical means. Subdued so it doesn't shout —
   the buttons are the action, the caption is just clarification. */
.lb-frame-lock-buttons { grid-template-columns: repeat(2, 1fr) !important; }
.lb-frame-lock-caption {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 28px);
  transform: translateX(-50%);
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(10,12,16,0.86);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim, rgba(255,255,255,0.65));
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Leave-round dialog — three primary actions stacked. */
.lb-leave-host {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: auto;
}
.lb-leave-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  max-width: 340px;
  width: 100%;
}
.lb-leave-title {
  margin: 0 0 6px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: #fff;
}
.lb-leave-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.lb-leave-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-leave-confirm {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.lb-leave-confirm p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.lb-leave-confirm-row {
  display: flex;
  gap: 8px;
}
.lb-leave-confirm-row .lb-cta { flex: 1; }
.lb-cta--back {
  flex: 0 0 44px;
  /* Small square chevron chip — icon-only, doesn't grow with
     flexbox stretch. Sits alongside the primary CTA which takes
     the remaining width. Text label was tried but pushed the
     Confirm button off-screen on narrower phones. */
  width: 44px;
  min-width: 0;
  padding: 14px 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

.lb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.lb-hint {
  font-size: 11px;
  color: var(--ink-3);
  margin: 4px 0 0;
}
.lb-input,
.lb-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
/* Native date/time inputs add their own inner padding on iOS which
   makes the rendered box wider than the styled padding suggests.
   min-width:0 + box-sizing borrow back that overflow so two of them
   fit inside the field-row grid without colliding. */
.lb-input[type="date"],
.lb-input[type="time"] {
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}
.lb-input:focus,
.lb-select:focus { border-color: var(--gold); }

.lb-field { margin-bottom: 8px; }
.lb-label { margin-bottom: 4px; font-size: 10px; }
.lb-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.lb-segmented {
  display: flex;
  gap: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.lb-seg {
  flex: 1;
  padding: 8px 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lb-seg.is-active {
  background: rgba(217,176,96,0.18);
  color: var(--gold);
}

.lb-toggle {
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.lb-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 160ms;
}
.lb-toggle[data-on="true"] { background: rgba(217,176,96,0.40); border-color: var(--gold); }
.lb-toggle[data-on="true"]::after { transform: translateX(20px); }

.lb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line-2);
}
.lb-toggle-row:first-of-type { border-top: none; padding-top: 3px; }
.lb-toggle-row-text { flex: 1; min-width: 0; }
.lb-toggle-row-title { font-size: 11px; font-weight: 600; }
.lb-toggle-row-sub { font-size: 10px; color: var(--ink-3); margin-top: 0; }

/* ============================================================
   New round setup — icon-first flat field list. No card chrome,
   no separate label rows. Every field is one line: [icon]
   [control]. Progressive disclosure via <details> for secondary
   options (date, scoring, mode, toggles) keeps the default view
   on one mobile viewport.
   ============================================================ */
.lb-body--setup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

/* One row = one field. Icon left (24px column), control right. */
.lb-body--setup .lb-field {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  min-height: 50px;
}
.lb-body--setup .lb-field-icon {
  color: rgba(245,240,227,0.55);
  font-size: 15px;
  text-align: center;
}

/* Inputs, selects, dropdown wrappers — take the second column and
   consume all remaining width. */
.lb-body--setup .lb-field-input,
.lb-body--setup .lb-field-select {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: #F5F0E3;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.lb-body--setup .lb-field-input::placeholder { color: rgba(245,240,227,0.35); }
.lb-body--setup .lb-field-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='rgba(245,240,227,0.55)' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px;
  padding-right: 18px;
  cursor: pointer;
}
.lb-body--setup .lb-field-select:disabled {
  color: rgba(245,240,227,0.30);
  cursor: not-allowed;
}
.lb-body--setup .lb-field-select option {
  background: #14171c;
  color: #F5F0E3;
}
.lb-body--setup .lb-field .lb-dropdown { width: 100%; }

/* Field focus glow — any interactive control inside a field gets it. */
.lb-body--setup .lb-field:focus-within {
  border-color: rgba(217,176,96,0.55);
  background: rgba(255,255,255,0.055);
}

/* Date + time paired inline inside a single field. */
.lb-body--setup .lb-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}
.lb-body--setup .lb-field-input-inline {
  padding: 0;
  background: transparent;
  border: 0;
  color: #F5F0E3;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.lb-body--setup .lb-field-input-inline::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0.6;
}

/* Player chip row inside a field — override the field's grid to a
   flex so the chips + invite wrap naturally. */
.lb-body--setup .lb-field--players {
  align-items: start;
  padding: 10px 14px;
}
.lb-body--setup .lb-field--players .lb-field-icon { padding-top: 6px; }
.lb-body--setup .lb-players--flat {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Toggle-row field: icon | text | switch. Grid stretched to three
   columns for this variant. */
.lb-body--setup .lb-field--toggle {
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  min-height: 56px;
}
.lb-body--setup .lb-field--toggle .lb-toggle-row-title {
  font-size: 14px;
  font-weight: 500;
  color: #F5F0E3;
}
.lb-body--setup .lb-field--toggle .lb-toggle-row-sub {
  font-size: 11px;
  color: rgba(245,240,227,0.45);
  margin-top: 2px;
}
.lb-card-row--split .lb-card-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  justify-self: end;
  width: 100%;
}
.lb-card-row--split .lb-card-row-pair > .lb-card-row-input,
.lb-card-row--split .lb-card-row-pair > .lb-card-row-select {
  padding-right: 18px;
  text-align: right;
}

/* Inline select — strip native chrome, right-align the value,
   chevron rendered via background SVG. Tappable everywhere. */
.lb-card-row-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.45)' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 11px;
  border: 0;
  padding: 6px 22px 6px 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  text-align: right;
  width: 100%;
  cursor: pointer;
  outline: none;
}
.lb-card-row-select:disabled {
  color: rgba(255,255,255,0.30);
  cursor: not-allowed;
}
/* Native <option> rendering — Chrome / Firefox respect background +
   colour declarations on options inside an open dropdown. Without
   these the popup paints with system default (often white on white
   when the page theme is dark). Safari uses the OS menu and ignores
   custom styles here; that's a known platform limit. */
.lb-card-row-select option {
  background: #14171c;
  color: #fff;
}
/* "—" placeholder used in the Adv+ shot detail when a row is N/A
   (e.g. club on a penalty shot). */
.lb-sd-na {
  color: rgba(255,255,255,0.40);
  font-size: 13px;
  font-style: italic;
}

/* Inline date/time input — same compact treatment. iOS renders
   its own picker on tap. */
.lb-card-row-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  text-align: right;
  width: 100%;
  outline: none;
}
.lb-card-row-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  opacity: 0.7;
}

/* Holes segmented control sized to fit on the right of its row.
   Original is full-width; compact variant caps total width and
   shrinks the inner buttons. */
.lb-segmented--compact {
  padding: 2px;
  width: max-content;
  justify-self: end;
}
.lb-segmented--compact .lb-seg {
  padding: 4px 10px;
  font-size: 11px;
  min-width: 32px;
}
.lb-card-row--seg { padding-top: 5px; padding-bottom: 5px; }

/* Full-width segmented control — sits in the second column of a
   .lb-field row. On a ~320px phone that column is ~250px, giving
   ~82px per button. Plenty for "18 holes" / "Advanced" / "Adv +". */
.lb-body--setup .lb-segmented--full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
  padding: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 9px;
}
.lb-body--setup .lb-segmented--full .lb-seg {
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(245,240,227,0.65);
  border-radius: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 140ms, color 140ms;
}
.lb-body--setup .lb-segmented--full .lb-seg.is-active {
  background: linear-gradient(135deg, rgba(217,176,96,0.32), rgba(217,176,96,0.18));
  color: #F5E7C0;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(217,176,96,0.35);
}

/* More options — details/summary progressive disclosure. Summary
   reads as a subtle chevron row; when open, the body reveals the
   secondary fields (date, scoring, mode, toggles). */
.lb-body--setup .lb-more {
  margin-top: 4px;
}
.lb-body--setup .lb-more-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  color: rgba(245,240,227,0.55);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lb-body--setup .lb-more-summary::-webkit-details-marker { display: none; }
.lb-body--setup .lb-more-chevron { transition: transform 200ms; font-size: 10px; }
.lb-body--setup .lb-more[open] .lb-more-chevron { transform: rotate(180deg); }
.lb-body--setup .lb-more-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

/* Players card — chip rows with generous padding so the tap
   targets feel confident. */
.lb-body--setup .lb-card-body--players { padding: 12px 16px 14px; }
.lb-body--setup .lb-invite-btn--chip {
  margin-top: 0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border-style: dashed;
  border-radius: 999px;
}

/* Toggles strip — full card treatment matching the setup cards so it
   reads as part of the flow, not an afterthought. */
.lb-body--setup .lb-toggles-strip {
  padding: 6px 16px;
  margin-top: 0;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.lb-body--setup .lb-toggles-strip .lb-toggle-row {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.055);
  min-height: 52px;
}
.lb-body--setup .lb-toggles-strip .lb-toggle-row:first-of-type {
  border-top: 0;
  padding-top: 12px;
}
.lb-body--setup .lb-toggles-strip .lb-toggle-row-title {
  font-size: 14px;
  font-weight: 500;
  color: #F5F0E3;
  letter-spacing: -0.005em;
}
.lb-body--setup .lb-toggles-strip .lb-toggle-row-sub {
  font-size: 11px;
  color: rgba(245,240,227,0.45);
  margin-top: 2px;
}

/* Create round CTA — commanding, warm, unmistakably the primary
   action. The overall .lb-cta styles apply first; these overrides
   sit specifically on the setup-screen instance so we don't affect
   other CTAs (leave-confirm, etc). */
#lb-create-btn {
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 12px;
  background: linear-gradient(180deg, #E4C070, #C99A3B);
  color: #1a1206;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 6px 14px rgba(217,176,96,0.24);
  transition: transform 120ms, box-shadow 180ms;
}
#lb-create-btn:not(:disabled):hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.24) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 8px 18px rgba(217,176,96,0.32);
}
#lb-create-btn:not(:disabled):active { transform: scale(0.99); }
#lb-create-btn:disabled {
  background: linear-gradient(180deg, rgba(217,176,96,0.35), rgba(184,137,42,0.30));
  color: rgba(26,18,6,0.55);
  box-shadow: none;
}

/* Setup screen footer — cleaner separation, no jarring border stripe. */
.lb-screen .lb-body--setup + .lb-foot,
.lb-foot--single {
  border-top: 0;
  padding-top: 6px;
}
.lb-toggles-strip .lb-toggle-row:first-of-type {
  border-top: 0;
  padding-top: 6px;
}

/* Course autocomplete dropdown — anchors below the search input. */
.lb-dropdown {
  position: relative;
}
.lb-dropdown-list {
  margin-top: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.lb-dropdown-item {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--line-2);
}
.lb-dropdown-item:last-child { border-bottom: none; }
.lb-dropdown-item:active { background: rgba(217,176,96,0.10); }
.lb-dropdown-item-sub {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Players row in setup / overview. */
.lb-players {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lb-player {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 12px;
}
.lb-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d7b56d, #b7892c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #0a0c10;
}
.lb-avatar--ghost {
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  color: var(--ink-2);
  border: 1px dashed rgba(255,255,255,0.18);
}
.lb-invite-btn {
  padding: 7px 12px 7px 10px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.20);
  border-radius: 14px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lb-invite-btn:active {
  background: rgba(217,176,96,0.05);
  border-color: rgba(217,176,96,0.40);
  color: var(--gold);
}

/* Overview round-summary card. */
.lb-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.lb-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.lb-card-row:last-child { border-bottom: none; }
.lb-card-row .l { color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; }
.lb-card-row .v { color: var(--ink); font-weight: 600; text-align: right; }

/* Go-Live share card on Overview. */
.lb-share {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108,207,142,0.10), transparent 70%),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(108,207,142,0.32);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb-share-row {
  display: flex;
  gap: 6px;
}
.lb-share-url {
  flex: 1;
  padding: 9px 11px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  outline: none;
  min-width: 0;
}
.lb-share-copy {
  padding: 9px 12px;
  background: rgba(108,207,142,0.16);
  border: 1px solid rgba(108,207,142,0.40);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   Round screen — hole header + canvas + toolbar.
   ───────────────────────────────────────────────────────────── */
.lb-hole-head {
  /* Absolutely positioned so the map still fills the top of the
     phone shell, but with a proper solid backing this time. Two
     floating glass chips (hole meta + pin yardage pill) stacked
     right next to each other read as repetitive noise; one solid
     header strip with the pin pill floating BELOW it separates
     the two visual layers cleanly.
     Background fades from a solid dark at the top edge to fully
     transparent at the bottom so the map bleeds through the
     lower fringe and there's no hard cut line. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding:
    calc(var(--safe-top) + 6px)
    calc(var(--safe-right) + 14px)
    10px
    calc(var(--safe-left) + 14px);
  background: linear-gradient(
    180deg,
    rgba(6, 8, 12, 0.86) 0%,
    rgba(6, 8, 12, 0.72) 55%,
    rgba(6, 8, 12, 0) 100%
  );
  border-bottom: 0;
}
/* Home (left) and Leaderboard (right) buttons are anchored to
   the edges independently of the hole-label cluster, which
   centres itself in the row. Gives the hole label proper visual
   gravity and keeps the map canvas underneath uncluttered —
   leaderboard lives on the topbar, not floating on the map. */
.lb-hole-head > [data-action="home"],
.lb-hole-head > [data-action="leaderboard"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Re-bias when there's a notch — keeps the icon clear of the
     top safe-area inset. */
  margin-top: calc(var(--safe-top) / 2);
}
.lb-hole-head > [data-action="home"] { left:  calc(var(--safe-left)  + 14px); }

/* Input-tier toggle — sits on the right edge of the round topbar,
   mirroring the Home button on the left. Pill shape (wider than
   the circular Home button) so the tier label reads cleanly.
   Tap cycles Core → Adv. → Adv. + and back. Gold tint nods at
   the existing accent system without being loud. */
.lb-tier-toggle {
  position: absolute;
  right: calc(var(--safe-right) + 14px);
  top: 50%;
  transform: translateY(-50%);
  margin-top: calc(var(--safe-top) / 2);
  min-width: 56px;
  height: 32px;
  padding: 0 12px;
  background: rgba(217,176,96,0.14);
  border: 1px solid rgba(217,176,96,0.30);
  border-radius: 16px;
  color: var(--gold);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Glass backing so the tier chip sits in the same family as the
     Home button + hole-meta pill now that the header overlays
     the map. */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: transform 80ms, background 140ms;
}
.lb-tier-toggle:active { transform: translateY(-50%) scale(0.94); margin-top: calc(var(--safe-top) / 2); }
/* Slight visual differentiation per tier so a glance tells the
   user where they are in the cycle without reading the label. */
.lb-tier-toggle[data-tier="core"] {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.85);
}
.lb-tier-toggle[data-tier="advplus"] {
  background: rgba(217,176,96,0.22);
  border-color: rgba(217,176,96,0.55);
}
.lb-hole-nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Glass chip — same recipe as .lb-tool / .lb-tool-group in the
     bottom toolbar so the round-screen controls read as one
     coherent family floating over the map. */
  background: rgba(10,12,16,0.62);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.lb-hole-nav[disabled],
.lb-hole-nav:disabled {
  opacity: 0.30;
  pointer-events: none;
}
.lb-hole-nav-group {
  display: inline-flex;
  gap: 6px;
}
/* Centre header — now a tappable button that opens the full hole
   list. Stripped of native button chrome so it still reads as the
   hole title. Gold underline on press hints at the affordance
   without competing with the title. */
.lb-hole-meta--btn {
  /* Header strip provides the dark backing now, so the hole meta
     is just a tappable label — no chip chrome. Kept the tap-hint
     background on :active so the affordance is still there. */
  background: transparent;
  border: 0;
  padding: 2px 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background 120ms;
}
.lb-hole-meta--btn:active {
  background: rgba(217,176,96,0.14);
}
.lb-hole-meta {
  text-align: center;
  line-height: 1.15;
}
.lb-hole-meta-top {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lb-hole-meta-top strong {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-left: 4px;
  vertical-align: -2px;
}
.lb-hole-meta-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 2px;
}
.lb-hole-meta-sub .lb-meta-dot { color: var(--ink-3); padding: 0 2px; }

/* Round-screen body wrapper. Shared by canvas + map view; the body
   itself swaps content per view mode. */
.lb-round-body {
  flex: 1;
  position: relative;
  background: #243829;
  overflow: hidden;
  display: flex;
}
/* Map view */
.lb-map-wrap {
  flex: 1;
  position: relative;
  background: #0a0c10;
  overflow: hidden;
}
.lb-map-canvas { position: absolute; inset: 0; }

/* GPS signal-strength chip — sits above the SHOT button bottom-
   right. Always visible: shows 3-bar signal indicator when a fix
   is active (coloured by accuracy), or a status word (Searching /
   Blocked / Error) when the watch is unhealthy. Right edge aligns
   with SHOT's right edge so they stack as a single visual unit. */
.lb-gps-badge {
  position: absolute;
  /* Bottom-LEFT now (was right, above the Shot FAB). Stacks directly
     above the Leaderboard chip (Leaderboard bottom + Leaderboard
     height 48 + 8 px gap = 87). Kept the original pill shape
     (48 × 26, radius 13) so the bar-indicator content still reads
     well — matching-circular chrome squeezed the bars uncomfortably. */
  left: calc(var(--safe-left) + 21px);
  /* Stacks above the Leaderboard chip which now sits at safe+76px.
     +48 (chip height) + 8 (gap) keeps the column proportion. */
  bottom: calc(var(--safe-bottom) + 76px + 48px + 8px);
  z-index: 600;
  width: 48px;
  height: 26px;
  padding: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(10,12,16,0.86);
  border: 1px solid var(--line);
  color: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.lb-gps-badge[hidden] { display: none; }
.lb-gps-badge.is-warn { color: var(--gold);   border-color: rgba(217,176,96,0.40); }
.lb-gps-badge.is-err  { color: var(--danger); border-color: rgba(226,122,91,0.45); }

/* Bars container — 3 vertical bars stepped in height. Each .bar
   has a base "off" state; the chip's accuracy-tier class lights
   them up in turn. */
.lb-gps-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.lb-gps-bars .bar {
  width: 3px;
  background: rgba(255,255,255,0.20);
  border-radius: 1px;
}
.lb-gps-bars .bar:nth-child(1) { height: 6px;  }
.lb-gps-bars .bar:nth-child(2) { height: 10px; }
.lb-gps-bars .bar:nth-child(3) { height: 14px; }

/* Accuracy tiers — each lights bars left-to-right and tints them
   green / gold / orange. Stays neutral grey if no fix at all. */
.lb-gps-badge.is-bars-3 .lb-gps-bars .bar { background: var(--accent); }
.lb-gps-badge.is-bars-2 .lb-gps-bars .bar:nth-child(-n+2) { background: var(--gold); }
.lb-gps-badge.is-bars-1 .lb-gps-bars .bar:nth-child(1) { background: #E4A14C; }

/* Player marker — switched from L.circleMarker (SVG vector) to a
   divIcon so Leaflet positions it via transform: translate3d on
   the markerPane every redraw. SVG vector markers drifted out of
   sync with their lat/lng during pinches and rotation; a div is
   immune to that whole class of bug. Box-sized so the iconAnchor
   (9, 9) sits dead-centre. */
.lb-player-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3C7BB5;
  border: 2px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.40);
  pointer-events: none;
}

/* Draggable aim marker — small bullseye the player can drop anywhere
   to compute "X yd to here · Y yd onward to pin". Tooltip is forced
   visible (Leaflet permanent tooltip). */
.lb-aim-icon-wrap { background: transparent; border: none; }
.lb-aim-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #FFD66B;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  cursor: grab;
}
.lb-aim-icon:active { cursor: grabbing; }
.leaflet-tooltip.lb-aim-tooltip {
  background: rgba(10,12,16,0.92);
  border: 1px solid rgba(217,176,96,0.55);
  color: var(--gold);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.leaflet-tooltip.lb-aim-tooltip::before { display: none; }

/* Map mini-FAB buttons — recentre on hole + zoom to green. They
   flank the pin pill at the top of the screen, one on each edge,
   level with the pin distance read-out. Compact, dark, blurred so
   they don't compete with the gold + Shot button below. */
.lb-map-fab-mini {
  position: absolute;
  /* Sits below the overlaid .lb-hole-head chip row so recentre +
     zoom-to-green don't collide with the Home button / tier toggle
     at the top edge. Header height ≈ safe-top + 6 (top-pad) + 32
     (tier chip) + 6 (bottom-pad) ≈ 44px + safe; adding a small gap
     lands us at safe-top + 58px. */
  top: calc(var(--safe-top) + 58px);
  z-index: 500;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10,12,16,0.86);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.40);
  transition: transform 80ms;
}
.lb-map-fab-mini--left  { left: calc(var(--safe-left)  + 14px); }
.lb-map-fab-mini--right { right: calc(var(--safe-right) + 14px); }
.lb-map-fab-mini[hidden] { display: none; }
.lb-map-fab-mini:active { transform: scale(0.94); }
.lb-map-canvas .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(10,12,16,0.6);
  color: rgba(255,255,255,0.55);
}
/* Pin pill + shot-dots cluster. The cluster owns the absolute
   positioning; the pill and dots stack inside it via flex column
   so the dots sit a couple of pixels below the pill regardless
   of which expansion state the pill is in. */
.lb-pin-cluster {
  position: absolute;
  /* Matches .lb-map-fab-mini so the yardage pill sits centre-aligned
     with the flanking recenter / zoom-to-green fabs, and none of
     the three collide with the overlaid .lb-hole-head header. */
  top: calc(var(--safe-top) + 58px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;   /* let pan gestures through the gap */
}

/* Pin pill — collapsed by default (just pin/middle distance), tap
   to expand into the Front · Middle · Back triplet. */
.lb-map-pin-pill {
  pointer-events: auto;
  background: rgba(10,12,16,0.86);
  border: 1px solid var(--line);
  /* Use specific radii rather than 999px. The pill was previously
     clamped at height/2 for most of the transition (999 reads as
     "fully rounded"), so the visual change only kicked in at the
     last sliver of the animation — read as a snap. 22 → 14 makes
     the entire transition visible. */
  border-radius: 22px;
  padding: 6px 14px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    padding       260ms cubic-bezier(0.2,0.7,0.2,1),
    border-radius 260ms cubic-bezier(0.2,0.7,0.2,1);
}
.lb-map-pin-pill.is-expanded {
  border-radius: 14px;
  padding: 10px 16px;
}
.lb-map-pin-pill[hidden] { display: none; }
.lb-pin-collapsed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Nudge the small uppercase label down a touch so it visually
   centres with the big italic yardage number. Caps text without
   descenders sits slightly above the visual midline by default;
   a 1px down nudge re-centres it. */
.lb-pin-collapsed .lb-pin-confidence { transform: translateY(1px); }
.lb-pin-collapsed[hidden] { display: none; }
.lb-pin-yards {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}
.lb-pin-confidence {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.lb-pin-expanded {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.lb-pin-expanded[hidden] { display: none; }
.lb-pin-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
}
.lb-pin-stop-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: #fff;
}
.lb-pin-stop--mid .lb-pin-stop-num { color: var(--gold); }
.lb-pin-stop-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

/* Shot-count strip — one tiny dot per shot, sitting plainly
   on the background just under the pill. Inconspicuous: no
   chrome (no pill, no border, no blur), just the dots. The
   parent .lb-pin-cluster handles the positioning via flex
   column stack with a 6px gap. */
.lb-pin-shot-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
}
.lb-pin-shot-dots[hidden] { display: none; }
.lb-pin-shot-dots:empty   { display: none; }
.lb-pin-shot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
}
.lb-pin-shot-dot.is-empty {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
}
.lb-pin-shot-dot.is-tee     { background: #fff; }
.lb-pin-shot-dot.is-shot    { background: var(--accent); }
.lb-pin-shot-dot.is-sand    { background: #E4C287; }
.lb-pin-shot-dot.is-penalty { background: var(--danger); }
.lb-pin-shot-dot.is-holed   {
  width: 8px; height: 8px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85);
}
/* Over-par filled dots get a subtle "you've overshot the budget"
   ring. Empty over-par dots don't exist — we only render extras
   for shots actually recorded. */
.lb-pin-shot-dot.is-over-par {
  box-shadow: 0 0 0 1px rgba(220,90,90,0.45);
}
/* + Shot — floating action button, bottom-right of the map. Sized
   prominently so it reads as THE primary action on the screen.
   Pulled inward from the right edge and closer to the toolbar per
   on-course usability feedback. ~10% larger than the first cut. */
.lb-map-shot-btn {
  position: absolute;
  right: calc(var(--safe-right) + 21px);
  /* Was safe + 31px. Now that .lb-toolbar overlays the bottom of
     the map (row height ≈ 42px + 12px top-pad + safe-bottom + 10px
     bottom-pad ≈ 64px), the SHOT FAB has to clear that band or it
     collides with the pin/undo/redo pill. safe + 76px sits ~10px
     above the toolbar's top edge with a small breathing gap. */
  bottom: calc(var(--safe-bottom) + 76px);
  z-index: 500;
  width: 75px;   /* was 68px — ~10% larger */
  height: 75px;
  padding: 0;
  background: var(--gold);
  border: 2px solid #b3902f;
  border-radius: 50%;
  color: #0a0c10;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  transition: background 140ms, transform 80ms;
}
.lb-map-shot-btn:active { transform: scale(0.96); }
.lb-map-shot-btn i { font-size: 22px; }
.lb-map-shot-btn span { display: block; }

/* Core input tier — the map serves as a navigation / yardage
   tool only. Strip the elements that drive shot tagging:
     - SHOT FAB (no per-shot recording)
     - Shot-count dots strip (nothing to count)
     - GPS strength chip (not relevant once shot quality isn't
       being judged at tap time)
   Pin pill, aim marker / line, and player blue-dot all STAY —
   they're passive navigation/yardage aids that work regardless
   of whether the player is tagging shots. */
.lb-map-wrap[data-input-tier="core"] .lb-map-shot-btn,
.lb-map-wrap[data-input-tier="core"] .lb-pin-shot-dots,
.lb-map-wrap[data-input-tier="core"] .lb-gps-badge {
  display: none !important;
}

/* Pro-only map-frame lock — mirrors the Shot FAB on the left
   edge. Smaller (~40% the area of Shot) and dark + neutral so it
   doesn't compete with Shot visually. Only renders for Pro tier
   users (see refreshLockButton() in app.js). */
/* Leaderboard chip — sits bottom-left as the primary map-corner
   button (mirrors the Shot FAB on the right). Circular so it
   matches the GPS chip stacked above it and reads as a single
   column of glanceable map controls. Previously sat above the
   Pro-only Lock button; the Lock has been removed. */
.lb-map-leaderboard-chip {
  position: absolute;
  left: calc(var(--safe-left) + 21px);
  /* Bumped from safe + 31px so it clears the newly-overlaid
     toolbar row (same reasoning as the SHOT FAB above). */
  bottom: calc(var(--safe-bottom) + 76px);
  z-index: 600;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10,12,16,0.86);
  border: 1px solid var(--line);
  /* Was --gold; switched to plain ink so the icon reads as a
     neutral utility button (matches the map-corner FABs on the
     opposite side). Gold was pulling too much attention for what's
     essentially "open the leaderboard sheet". */
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: transform 80ms;
}
.lb-map-leaderboard-chip:active { transform: scale(0.94); }
.lb-map-leaderboard-chip i { font-size: 16px; }

/* Long-press hint — subtle three-dot indicator above the FAB so
   the player knows there's a hidden chooser. */
.lb-map-shot-btn::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: rgba(10,12,16,0.50);
  border-radius: 1px;
}

/* Bottom toolbar. Now three visual blocks:
     [<] | grouped action band | [>]   …  floating + Shot FAB
   Chevrons anchor the edges (hole nav moved here from the header).
   The middle band has its own subtle background so it reads as a
   distinct group of related controls. */
.lb-toolbar {
  /* Absolutely positioned so the map (inside .lb-round-body above)
     extends all the way to the bottom of the phone shell — the
     toolbar overlays the map instead of eating a ~60px flex row
     under it. Wrapper itself is fully transparent; individual
     buttons + the middle action group carry their own dark chip
     backgrounds (mirroring the leaderboard chip / SHOT FAB
     pattern used elsewhere on the map) so they stay legible
     without a full-width scrim. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding:
    12px
    calc(var(--safe-right) + 10px)
    calc(var(--safe-bottom) + 10px)
    calc(var(--safe-left) + 10px);
  background: transparent;
  border-top: 0;
  pointer-events: none;
}
/* Buttons + group remain interactive; the wrapper is
   pointer-events-none so taps on the gaps between chips pass
   through to the map underneath. */
.lb-toolbar > * { pointer-events: auto; }
.lb-tool {
  flex: 1;
  height: 42px;
  padding: 0;
  /* Glass chip — same recipe as the middle tool-group container
     (slightly translucent dark, generous blur + saturation) so
     the back / forward chevrons and the middle pill read as one
     coherent family of controls floating over the map. */
  background: rgba(10,12,16,0.62);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.lb-tool:active { transform: scale(0.94); }
.lb-tool i { font-size: 14px; }
.lb-tool.is-on { background: rgba(226,122,91,0.22); border-color: rgba(226,122,91,0.55); color: var(--danger); }
.lb-tool.is-on-sand { background: rgba(228,194,135,0.22); border-color: rgba(228,194,135,0.55); color: #E4C287; }
.lb-tool--holed {
  background: rgba(108,207,142,0.18);
  border-color: rgba(108,207,142,0.45);
  color: var(--accent);
}
/* Pin (holed) is the primary hole-ending action inside the tool
   group, so give it more horizontal share than the flanking Undo /
   Redo. flex: 1.5 vs 1 = ~43% / 28% / 28% split of the group's
   width, which reads as "one prominent button between two smaller
   utilities" without being awkwardly wide. Slight icon bump too. */
.lb-tool-group .lb-tool--holed { flex: 1.5; }
.lb-tool-group .lb-tool--holed i { font-size: 16px; }
.lb-tool--forfeit {
  background: rgba(226,122,91,0.15);
  border-color: rgba(226,122,91,0.40);
  color: var(--danger);
}
/* Finish round — gold tint, calmer than Holed (green) and
   Forfeit (red). Distinct from "this hole is done" because it
   commits the whole round. */
.lb-tool--finish {
  background: rgba(217,176,96,0.14);
  border-color: rgba(217,176,96,0.40);
  color: var(--gold);
}
/* Nav chevrons sitting on the toolbar edges. Smaller, no fill, so
   they read as navigation rather than as actions. The
   .lb-tool.lb-tool--nav double-class selector bumps specificity
   above the generic .lb-tool { flex: 1 } so they stay fixed-width
   even when the cascade gets noisy. */
.lb-tool.lb-tool--nav {
  flex: 0 0 36px;
  height: 42px;
  background: transparent;
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
}
.lb-tool.lb-tool--nav i { font-size: 13px; }
.lb-tool[disabled],
.lb-tool:disabled {
  opacity: 0.30;
  pointer-events: none;
}
/* The grouped action band lives between the nav chevrons. Its own
   background + inner border so it reads as one coherent block — no
   more "5 identical pills in a row" blandness. */
.lb-tool-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  /* Same glass chip treatment as the standalone .lb-tool chevrons
     on either side so the middle pill reads as part of the same
     control family. Slightly lower opacity + stronger blur than
     the plain buttons so the container's chrome doesn't compete
     visually with the three buttons inside — the map subtly
     shows through the border while the icons stay crisp. */
  background: rgba(10,12,16,0.62);
  border: 1px solid var(--line);
  border-radius: 13px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.lb-tool-group .lb-tool {
  height: 36px;
  border-radius: 8px;
  /* Fully transparent so the outer container's glass shows through
     the whole pill — the middle group then reads as ONE glass
     rectangle matching the back / forward chevrons, rather than
     three lighter tiles sitting on top of a barely-visible glass
     strip. The active-state hover / press styles below still fire
     because they set their own background over this transparent
     base. */
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Pressed state still needs a visible highlight so a tap
   registers visually — the base is fully transparent so the
   default :active transform alone wouldn't be enough. */
.lb-tool-group .lb-tool:active {
  background: rgba(255,255,255,0.10);
}

/* ─────────────────────────────────────────────────────────────
   Review modal — bottom-sheet on mobile.
   ───────────────────────────────────────────────────────────── */
.lb-sheet-host {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0,0,0,0.50);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.lb-sheet-host[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lb-sheet {
  background: var(--bg-2);
  border-radius: 18px 18px 0 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.2,0.7,0.2,1);
  padding-bottom: var(--safe-bottom);
}
.lb-sheet-host[data-open="true"] .lb-sheet { transform: translateY(0); }
.lb-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  margin: 10px auto 0;
}
.lb-sheet-head {
  padding: 14px 18px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lb-sheet-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  margin: 0;
}
.lb-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 18px;
}
.lb-sheet-foot {
  display: flex;
  gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line-2);
}

/* Q/A bits inside the review sheet. Headers now single-word
   ("Putts", "Fairway", "Approach", "Miss") so they read like
   captions, not full questions. */
.lb-q { margin: 18px 0 0; }
.lb-q-h {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  margin: 0 0 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Sub-caption under a question header — used by multi-select
   questions where the heading alone leaves the tap semantics
   ambiguous (e.g. "which of these strokes were recoveries?"). */
.lb-q-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin: -2px 0 8px;
  line-height: 1.4;
}
.lb-q-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.lb-q-opts--six { grid-template-columns: repeat(6, 1fr); }
.lb-q-opts--two { grid-template-columns: repeat(2, 1fr); }
.lb-q-opt {
  padding: 12px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.lb-q-opt.is-selected {
  background: rgba(217,176,96,0.18);
  border-color: var(--gold);
  color: var(--gold);
}
.lb-q-opt.is-disabled { opacity: 0.35; }

/* Putts carousel — all six options on one row. Selected sits in a
   green pillbox centred between the others, neighbours fade to the
   sides via inline opacity so the eye anchors on the centre. */
.lb-putt-carousel {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 4px 2px;
}
.lb-putt-cell {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  text-align: center;
  border-radius: 999px;
  transition: opacity 140ms, transform 140ms;
}
.lb-putt-cell.is-selected {
  background: rgba(108,207,142,0.22);
  border: 1px solid rgba(108,207,142,0.55);
  color: var(--accent);
  opacity: 1 !important;
  transform: scale(1.05);
  font-size: 24px;
}

/* Icon-button row — circular buttons used by Fairway + Miss. */
.lb-q-icon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lb-q-icon {
  flex: 1;
  height: 48px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, border-color 120ms, color 120ms, transform 80ms;
}
.lb-q-icon:active { transform: scale(0.94); }
.lb-q-icon.is-selected {
  background: rgba(108,207,142,0.20);
  border-color: rgba(108,207,142,0.55);
  color: var(--accent);
}
.lb-q-icon.is-disabled { opacity: 0.35; }

/* Compass-grid variant — 3×3 layout for the First putt miss
   picker. Short / Long / Left / Right + the four compound
   directions arranged like a compass rose so the visual maps
   onto the physical relationship to the hole. The centre cell
   is intentionally empty (a "holed" putt is encoded by
   putts === 1, so we don't ask the question in that case). */
.lb-q-icon-row--compass {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  /* Cap the compass width so the 3x3 stays square-ish rather than
     ballooning on wider viewports — the tall stack was pushing
     the Confirm footer off-screen on smaller phones. */
  max-width: 200px;
  margin: 0 auto;
}
.lb-q-icon-row--compass .lb-q-icon {
  flex: none;
  /* Compact rows so the whole dial is ~104px tall (3 * 32 + 2 * 4)
     instead of the old ~140px. Still tap-friendly at 32px per
     cell on a 3-column grid. */
  height: 32px;
  font-size: 14px;
  border-radius: 8px;
}
.lb-q-icon-spacer { display: block; }

/* ─────────────────────────────────────────────────────────────
   Complete / Leaderboard / Scoreboard — adapt the test-harness
   blocks but full-bleed instead of inside a phone frame.
   ───────────────────────────────────────────────────────────── */
.lb-complete {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.lb-complete-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(217,176,96,0.40), rgba(217,176,96,0.10) 60%, transparent 75%);
  border: 1px solid rgba(217,176,96,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--gold);
}
.lb-complete-title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
}
.lb-complete-sub {
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
  margin: -2px 0 0;
}
.lb-complete-score {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.lb-complete-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lb-complete-vs {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}
.lb-complete-stats {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
.lb-complete-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lb-complete-stat-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}
.lb-complete-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Tier-downgrade confirm modal — fixed-position centred sheet with
   a scrim behind. Rendered by confirmTierDowngrade before the tier
   actually flips so the destructive choice ("Basic analytics only
   until backfill") isn't silent. Slides + fades in over 200ms. */
.lb-modal-host {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(6,7,10,0.60);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lb-modal-host[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.lb-modal {
  width: 100%;
  max-width: 340px;
  background: #12151b;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms ease;
}
.lb-modal-host[data-open="true"] .lb-modal {
  transform: translateY(0) scale(1);
}
.lb-modal-icon {
  font-size: 22px;
  color: #F5B454;
  margin-bottom: 2px;
}
.lb-modal-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.lb-modal-body {
  margin: 2px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}
.lb-modal-body strong {
  color: var(--ink);
  font-weight: 700;
}
.lb-modal-foot {
  display: flex;
  gap: 8px;
  width: 100%;
}
.lb-modal-foot .lb-cta { flex: 1; }
.lb-modal-foot .lb-cta--back { flex: 0 0 96px; }

/* Analytics tier card — sits below the stats row on the complete
   screen. Tier pill colour tracks tier_floor: core = neutral,
   adv = amber, advplus = green. A backfill CTA row surfaces
   when the round could bump up a tier. */
.lb-tier-card {
  width: 100%;
  max-width: 320px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.lb-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lb-tier-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lb-tier-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--ink);
}
.lb-tier-card--adv .lb-tier-pill {
  color: #F5B454;
  border-color: rgba(245, 180, 84, 0.4);
  background: rgba(245, 180, 84, 0.10);
}
.lb-tier-card--advplus .lb-tier-pill {
  color: #6DD394;
  border-color: rgba(109, 211, 148, 0.4);
  background: rgba(109, 211, 148, 0.10);
}
.lb-tier-blurb {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.lb-tier-cta-row {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.lb-tier-cta-copy {
  flex: 1;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-2);
}
.lb-tier-cta-copy strong {
  color: var(--ink);
  font-weight: 700;
}
.lb-tier-cta {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1a1a;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lb-tier-cta:active { transform: translateY(1px); }

/* Backfill sheet (Core → Adv). Reuses the leaderboard slide-up
   host chrome so the visual grammar matches the shot-detail
   walkthrough — a scrollable body of hole cards, sticky footer
   for Cancel/Confirm. */
.lb-bf-sub {
  padding: 4px 16px 10px;
  font-size: 11px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.lb-bf-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lb-bf-hole {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb-bf-hole-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.lb-bf-hole-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
}
.lb-bf-hole-meta {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lb-bf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lb-bf-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lb-bf-field input[type="number"] {
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.lb-bf-hint {
  font-size: 10px;
  color: var(--ink-3);
  line-height: 1.4;
}
.lb-bf-radio-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lb-bf-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}

/* Leaderboard */
.lb-lb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lb-lb-row {
  display: grid;
  grid-template-columns: 24px 30px 1fr 38px 38px 40px;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lb-lb-row.is-you   { background: rgba(217,176,96,0.08); border-color: rgba(217,176,96,0.30); }
.lb-lb-row.is-first { background: linear-gradient(135deg, rgba(217,176,96,0.18), rgba(217,176,96,0.05)); border-color: rgba(217,176,96,0.45); }
.lb-lb-rank {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
  text-align: center;
}
.lb-lb-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  text-align: right;
}
.lb-lb-net { color: var(--gold); }
.lb-lb-vs { font-size: 10px; font-weight: 700; color: var(--ink-3); text-align: right; }
.lb-lb-vs.is-under { color: var(--accent); }
.lb-lb-vs.is-over  { color: var(--danger); }

/* Scoreboard grid */
.lb-sb-grid {
  display: grid;
  grid-template-columns: 60px repeat(9, 1fr) 38px;
  gap: 2px;
  font-size: 10px;
}
.lb-sb-cell {
  padding: 8px 4px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  font-weight: 600;
  color: var(--ink);
}
.lb-sb-cell--label {
  text-align: left;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 9px;
  background: transparent;
}
.lb-sb-cell--head { background: rgba(255,255,255,0.06); color: var(--ink-3); font-size: 9px; }
.lb-sb-cell--total { background: rgba(217,176,96,0.10); color: var(--gold); font-weight: 700; }
.lb-sb-cell--score { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 15px; }
.lb-sb-cell.is-birdie { background: rgba(108,207,142,0.20); color: var(--accent); }
.lb-sb-cell.is-eagle  { background: rgba(108,207,142,0.40); color: var(--ink); }
.lb-sb-cell.is-bogey  { background: rgba(220,90,90,0.12); }
.lb-sb-cell.is-double { background: rgba(220,90,90,0.24); }

/* ─────────────────────────────────────────────────────────────
   Sync pill — bottom-right, hidden by default. Lifts above the
   safe area so it doesn't sit under iOS gesture line.
   ───────────────────────────────────────────────────────────── */
.lb-sync-pill {
  position: fixed;
  right: calc(var(--safe-right) + 14px);
  bottom: calc(var(--safe-bottom) + 14px);
  padding: 8px 12px;
  background: rgba(10,12,16,0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 600;
  transition: opacity 200ms;
}
.lb-sync-pill[hidden] { display: none; }
.lb-sync-pill[data-state="saved"]   { color: var(--accent); }
.lb-sync-pill[data-state="syncing"] { color: var(--gold); }
.lb-sync-pill[data-state="error"]   { color: var(--danger); border-color: rgba(226,122,91,0.40); }
.lb-sync-pill i { font-size: 11px; }

/* Toast host — leave-confirm dialog mounts here. */
.lb-toast-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 700;
}

/* Sign-in screen */
.lb-signin {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 16px;
}
.lb-signin h1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0;
}
.lb-signin p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  max-width: 280px;
}
.lb-signin-cta { margin-top: 12px; max-width: 280px; }
.lb-signin-fallback {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.20);
  padding-bottom: 1px;
}
.lb-signin-fallback:hover { color: var(--ink); border-bottom-color: rgba(255,255,255,0.40); }

/* ============================================================
   Leaderboard page — slides up over the round screen, dismissable
   via close button or swipe-down. Up to three swipeable panels:
   Round, Event, Tour. Circle-dot indicators below; user swipes
   left/right to change panel (no pill tabs). One panel visible
   at a time on phones; CSS scroll-snap drives the swipe.
   ============================================================ */
.lb-leaderboard-host {
  position: fixed;
  inset: 0;
  background: rgba(8,10,14,0.96);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.2,0.7,0.2,1),
              transform 260ms cubic-bezier(0.2,0.7,0.2,1);
}
.lb-leaderboard-host[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Top bar — title + close. */
.lb-lb-bar {
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.lb-lb-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.lb-lb-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lb-lb-close:active { transform: scale(0.94); }

/* Carousel — horizontal scroll, snap mandatory. Each panel
   width: 100% so the OS swipe gesture lands on a single panel. */
.lb-lb-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb-lb-track::-webkit-scrollbar { display: none; }

.lb-lb-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow-y: auto;
  padding: 18px 16px calc(var(--safe-bottom) + 80px);
  -webkit-overflow-scrolling: touch;
}
.lb-lb-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lb-lb-panel-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
}
.lb-lb-panel-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Empty / "no data yet" panel state — used for Event and Tour
   when the round isn't linked. Centred soft message; the panel
   doesn't get hidden so the swipe still reaches it. */
.lb-lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  color: rgba(255,255,255,0.50);
  padding: 0 24px;
}
.lb-lb-empty i {
  font-size: 28px;
  margin-bottom: 14px;
  opacity: 0.40;
}
.lb-lb-empty .lb-lb-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
  margin-bottom: 6px;
}
.lb-lb-empty .lb-lb-empty-blurb {
  font-size: 12px;
  line-height: 1.4;
  max-width: 280px;
}

/* Dot indicators — sit centred above the bottom safe area.
   One circle per panel; the active one fills with gold and
   grows a touch. Tappable to jump straight to a panel. */
.lb-lb-dots {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(10,12,16,0.86);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lb-lb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 160ms, transform 160ms;
}
.lb-lb-dot.is-active {
  background: var(--gold);
  transform: scale(1.25);
}

/* Round-leaderboard table — reuse the existing lb-lb-row look
   from the final standings screen for visual coherence. */
.lb-lb-scorecard {
  display: grid;
  gap: 6px;
}
.lb-lb-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.lb-lb-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.lb-lb-total {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}
.lb-lb-total-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.lb-lb-total-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.lb-lb-total-num.is-under { color: var(--accent); }
.lb-lb-total-num.is-over  { color: var(--danger); }

/* Per-hole row — number · par · strokes · vs-par */
.lb-lb-hole-grid {
  display: grid;
  grid-template-columns: 40px 50px 1fr 70px;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lb-lb-hole-grid:last-child { border-bottom: 0; }
.lb-lb-hole-grid .lb-lb-h-num {
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,0.60);
}
.lb-lb-hole-grid .lb-lb-h-par {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.lb-lb-hole-grid .lb-lb-h-strokes {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.lb-lb-hole-grid .lb-lb-h-vs {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
  color: rgba(255,255,255,0.60);
}
.lb-lb-hole-grid .lb-lb-h-vs.is-under { color: var(--accent); }
.lb-lb-hole-grid .lb-lb-h-vs.is-over  { color: var(--danger); }
.lb-lb-hole-grid.is-unplayed .lb-lb-h-strokes,
.lb-lb-hole-grid.is-unplayed .lb-lb-h-vs { color: rgba(255,255,255,0.30); }

/* ============================================================
   Adv+ post-hole shot-detail walkthrough — list every recorded
   shot as a card and let the player tag club + lie (and for
   putts, distance). Re-uses the .lb-leaderboard-host slide-up
   chrome for motion consistency.
   ============================================================ */
.lb-sd-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 0;
}
/* Two-column shot detail card. Left column shows the shot number +
   kind (Tee / Approach / Chip / Putt) stacked; right column stacks
   the Club + Lie selects side-by-side, with the putt-distance input
   spanning both when it renders. Saves a full row per shot vs the
   old head-then-stacked-rows layout so the walkthrough scrolls
   less. Penalty cards keep the same shape but zero out the right
   column (there's no club or lie to record for a penalty stroke). */
.lb-sd-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.lb-sd-card--penalty {
  padding: 10px 14px;
  background: rgba(226,122,91,0.06);
  border-color: rgba(226,122,91,0.20);
  align-items: center;
}
.lb-sd-card-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-sd-card-num {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.lb-sd-card-kind {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.15;
}
.lb-sd-card-sub {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
}
.lb-sd-card-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}
.lb-sd-card-ctrl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-sd-card-ctrl--full { grid-column: 1 / -1; }
.lb-sd-card-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.lb-sd-card-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  align-self: center;
  justify-self: end;
}
.lb-sd-card .lb-sd-select,
.lb-sd-card .lb-sd-input {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font-size: 13px;
}
.lb-sd-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 12px 16px calc(var(--safe-bottom) + 12px);
  border-top: 1px solid var(--line);
  background: rgba(8,10,14,0.96);
}

/* ============================================================
   Core-tier post-hole review — simple steppers + pill rows.
   Uses the same .lb-sheet host as the Adv review for motion
   continuity; just a different set of question rows inside.
   ============================================================ */
.lb-core-q {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lb-core-q:last-child { border-bottom: 0; }
.lb-core-q-lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Stepper — minus / number / plus. Big italic number gives the
   sheet some visual character without crowding the row. */
.lb-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lb-stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 80ms, background 120ms;
}
.lb-stepper-btn:active { transform: scale(0.92); background: rgba(217,176,96,0.18); }
.lb-stepper-val {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  min-width: 36px;
  text-align: center;
  line-height: 1;
}

/* Pill row — used for Fairway (Hit/Left/Right) and Sand (Yes/No).
   Each pill is a chip-style toggle; active state in gold. */
.lb-core-pills {
  display: inline-flex;
  gap: 6px;
}
.lb-core-pill {
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: rgba(255,255,255,0.65);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 80ms, background 120ms, color 120ms, border-color 120ms;
}
.lb-core-pill:active { transform: scale(0.94); }
.lb-core-pill.is-active {
  background: rgba(217,176,96,0.18);
  border-color: rgba(217,176,96,0.50);
  color: var(--gold);
}

/* Hole list page — shares the .lb-leaderboard-host slide-in
   chrome (motion + topbar + close button); content below is a
   simple table that lists every hole. Tap a row to jump. */
.lb-hl-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(var(--safe-bottom) + 80px);
}
.lb-hl-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.lb-hl-th {
  text-align: right;
  padding: 12px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid var(--line);
}
.lb-hl-th--num   { text-align: left;  padding-left: 4px; }
.lb-hl-th--score { text-align: right; padding-right: 4px; }

.lb-hl-row {
  cursor: pointer;
  transition: background 100ms;
}
.lb-hl-row:active { background: rgba(217,176,96,0.10); }
.lb-hl-row.is-current {
  background: rgba(217,176,96,0.10);
}
.lb-hl-row.is-current .lb-hl-td--num {
  color: var(--gold);
  font-weight: 700;
}

.lb-hl-td {
  text-align: right;
  padding: 14px 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.lb-hl-td--num {
  text-align: left;
  padding-left: 4px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.lb-hl-td--score {
  text-align: right;
  padding-right: 4px;
  font-weight: 700;
}
.lb-hl-td--score.is-under { color: var(--accent); }
.lb-hl-td--score.is-over  { color: var(--danger); }
.lb-hl-row.is-unplayed .lb-hl-td--score { color: rgba(255,255,255,0.30); }

/* Reduced-motion respect. */
@media (prefers-reduced-motion: reduce) {
  .lb-splash, .lb-app, .lb-sheet, .lb-sync-pill,
  .lb-leaderboard-host, .lb-lb-dot {
    transition: none !important;
  }
  .lb-splash-progress > span { animation: none; }
}