/* =========================================================
       Tokens
       ========================================================= */
    :root, [data-theme="light"] {
      --font: 'Satoshi', system-ui, sans-serif;

      /* Type scale — bumped ~12% from the original to keep the app
         readable for someone who'd normally reach for +1.5 readers.
         The clamp() ranges keep things proportional on small phones
         vs tablets without us having to special-case breakpoints. */
      --t-xs: clamp(.92rem,.88rem + .14vw,1.04rem);
      --t-sm: clamp(1.08rem,1.04rem + .25vw,1.2rem);
      --t-md: clamp(1.22rem,1.16rem + .4vw,1.38rem);
      --t-lg: clamp(1.45rem,1.32rem + .62vw,1.72rem);
      --t-xl: clamp(1.72rem,1.56rem + .9vw,2.18rem);
      --t-2xl: clamp(2.32rem,2.0rem + 1.55vw,3.1rem);
      --t-3xl: clamp(3.5rem,2.85rem + 2.65vw,4.8rem);

      --s-1: .25rem;
      --s-2: .5rem;
      --s-3: .75rem;
      --s-4: 1rem;
      --s-5: 1.25rem;

      --bg: #f2f6ef;
      --surface: #ffffff;
      --surface-2: #f7faf5;
      --border: #d4ddd0;
      --divider: #e2e9de;
      --text: #152019;
      --muted: #4a5650;
      --brand-gold: #c8920a;
      --inverse: #f7fbf6;
      --primary: #0b6b4b;
      --primary-2: #2d8e69;
      --primary-soft: #d9ece4;
      --success: #3d7a1f;
      --warning: #a55e15;
      --danger: #ab335e;
      --gold: #d8a400;

      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 18px;
      --r-pill: 999px;

      --shadow-sm: 0 2px 8px rgba(20,32,25,.06);
      --shadow-md: 0 12px 28px rgba(20,32,25,.10);

      --header-h: 50px;
      --tabs-h: 64px;

      --p1:#0b6b4b; --p2:#006494; --p3:#a12c7b; --p4:#c68a00;
      --p5:#7a39bb; --p6:#964219; --p7:#437a22; --p8:#b93d2d;
      --p9:#1d7f85; --p10:#5e5ce6; --p11:#c05b00; --p12:#a03c71;
    }

    [data-theme="dark"] {
      --bg: #111613;
      --surface: #1a211d;
      --surface-2: #212a24;
      --border: #334039;
      --divider: #2c372f;
      --text: #ecf4ee;
      --muted: #b4c1b8;
      --brand-gold: #f0c44a;
      --inverse: #152019;
      --primary: #59b891;
      --primary-2: #74c9a4;
      --primary-soft: #26372f;
      --shadow-sm: 0 2px 8px rgba(0,0,0,.22);
      --shadow-md: 0 12px 28px rgba(0,0,0,.32);
      --gold: #e7b830;
    }

    /* =========================================================
       Reset
       ========================================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: var(--t-md);
      line-height: 1.3;
      overflow: hidden;
      -webkit-text-size-adjust: none;
      -webkit-tap-highlight-color: transparent;
    }
    button, input, select { font: inherit; color: inherit; }
    button { border: none; background: none; cursor: pointer; }
    input, select { border: 1px solid var(--border); background: var(--surface-2); }

    /* =========================================================
       Shell
       ========================================================= */
    .app {
      height: 100dvh;
      max-width: 720px;
      margin: 0 auto;
      display: grid;
      grid-template-rows: auto 1fr auto;
      background: var(--bg);
      overflow: hidden;
    }

    .strip {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: var(--s-2);
      padding: 0 var(--s-3);
      padding-top: env(safe-area-inset-top);
      min-height: calc(var(--header-h) + env(safe-area-inset-top));
      z-index: 30;
    }
    .strip .wind {
      font-size: var(--t-sm);
      color: var(--muted);
      font-weight: 700;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .strip .hole-info {
      font-size: var(--t-md);
      font-weight: 900;
      font-variant-numeric: tabular-nums lining-nums;
      white-space: nowrap;
    }
    /* Hole/Par/Yardage label is scorecard context — hide it elsewhere
       so the strip just carries the menu button on other pages. */
    body:not([data-page="card"]) .strip .hole-info { display: none; }
    .strip .hole-info .par {
      color: var(--muted);
      font-weight: 700;
      margin-left: .25rem;
    }
    .strip .menu-btn {
      height: 38px;
      padding: 0 .8rem;
      display: grid;
      place-items: center;
      border-radius: 10px;
      font-size: var(--t-sm);
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--primary);
    }
    .strip .menu-btn:active { background: var(--surface-2); }

    .workspace {
      overflow: auto;
      padding: var(--s-3);
      -webkit-overflow-scrolling: touch;
    }

    .page { display: none; overflow-x: hidden; }
    .page.active { display: block; }

    .tabs {
      background: var(--surface);
      border-top: 1px solid var(--border);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding-bottom: env(safe-area-inset-bottom);
      z-index: 30;
    }
    .tab {
      padding: var(--s-2) var(--s-1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: .82rem;
      font-weight: 800;
      color: var(--muted);
      min-height: var(--tabs-h);
    }
    .tab .ico { font-size: 1.45rem; line-height: 1; }
    .tab.active { color: var(--primary); }
    .tab:active { background: var(--surface-2); }

    /* =========================================================
       Component primitives
       ========================================================= */
    .stack { display: grid; gap: var(--s-2); }
    .row   { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
    .muted { color: var(--muted); }

    /* Legend — explains abbreviations in-place next to the items they label. */
    .legend {
      margin-top: .55rem;
      padding: .4rem .5rem;
      font-size: .72rem;
      line-height: 1.4;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .01em;
    }
    .legend strong { color: var(--text); font-weight: 900; margin-right: .12rem; }
    .legend .sep { opacity: .45; margin: 0 .3rem; }
    .legend-row { display: block; }
    .legend-row + .legend-row { margin-top: .15rem; }
    .legend-bet {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      white-space: nowrap;
    }
    .legend-bet-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      vertical-align: middle;
      flex-shrink: 0;
    }
    .legend .swatch {
      display: inline-block;
      width: .55rem; height: .55rem;
      border-radius: 999px;
      margin-right: .2rem;
      vertical-align: 1px;
    }
    .grow  { flex: 1; }

    .btn {
      min-height: 44px;
      padding: 0 var(--s-3);
      border-radius: var(--r-md);
      font-size: var(--t-md);
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      border: 1px solid transparent;
      background: var(--surface-2);
      color: var(--text);
    }
    .btn:active   { transform: scale(.98); }
    .btn.primary  { background: var(--primary); color: var(--inverse); }
    .btn.warn     { background: var(--warning); color: #fff; }
    .btn.cancel   {
      background: color-mix(in srgb, var(--danger) 12%, var(--surface));
      color: var(--danger);
      border-color: color-mix(in srgb, var(--danger) 25%, var(--border));
    }
    .btn.cancel:active { background: color-mix(in srgb, var(--danger) 20%, var(--surface)); }

    .back-to-round-btn {
      background: color-mix(in srgb, var(--primary) 10%, var(--surface));
      color: var(--primary);
      border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
      font-weight: 800;
      text-align: left;
      padding-left: var(--s-3);
      margin-bottom: var(--s-2);
    }
    .back-to-round-btn:active { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
    .btn.ghost    { background: transparent; }
    .btn[disabled]{ opacity: .5; }
    .btn.full     { width: 100%; }
    .btn.lg       { min-height: 52px; font-size: var(--t-lg); }
    .btn.sm       { min-height: 36px; font-size: var(--t-sm); padding: 0 .7rem; }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      padding: .35rem .65rem;
      border-radius: var(--r-pill);
      background: var(--surface-2);
      border: 1px solid var(--border);
      font-size: var(--t-sm);
      font-weight: 800;
      color: var(--text);
    }
    .chip.active {
      background: var(--primary);
      color: var(--inverse);
      border-color: transparent;
    }
    .chip-row { display: flex; gap: .3rem; flex-wrap: wrap; }

    /* Bet-color dot baked into a manual dot chip — matches the legend
       and scorecard so the user can see at a glance which bet a chip
       belongs to. */
    .chip-bet-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      margin-right: .25rem;
      vertical-align: middle;
      flex-shrink: 0;
    }

    /* "Earned this hole" — read-only summary above the manual dots in
       the score sheet, showing every dot currently in effect for this
       player/hole (auto from score + any manual flags). */
    .earned-row {
      display: flex;
      gap: .3rem;
      flex-wrap: wrap;
      padding: .25rem 0;
    }
    .earned-pill {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .35rem .55rem;
      border-radius: 999px;
      background: var(--primary-soft);
      border: 1px solid var(--primary);
      color: var(--text);
      font-size: .85rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .earned-dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      flex-shrink: 0;
    }
    .earned-auto {
      font-size: .7rem;
      font-weight: 600;
      opacity: .65;
      margin-left: .15rem;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .earned-empty {
      color: var(--muted);
      font-size: .85rem;
      font-style: italic;
      padding: .15rem 0;
    }

    /* Team picker in the player edit sheet — pill row with team-color
       swatches. Active state thickens the border and dims the background
       so the user can see which team is currently set. */
    .team-chip-row {
      display: flex;
      gap: .3rem;
      flex-wrap: wrap;
    }
    .team-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .4rem .65rem;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      min-height: 38px;
    }
    .team-chip.active {
      background: var(--primary-soft);
      border-color: var(--primary);
      border-width: 2px;
      padding: calc(.4rem - 1px) calc(.65rem - 1px);
    }
    .team-chip-swatch {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 999px;
      flex-shrink: 0;
    }

    /* 6-6-6 setup panel inside the Wagers Skins row */
    .six-panel {
      margin-top: .55rem;
      padding: .55rem .65rem;
      border-radius: 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      overflow: hidden;
      max-width: 100%;
    }
    /* Per-foursome card stacked inside the panel */
    .six-card {
      padding: .55rem;
      border-radius: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      overflow: hidden;
      max-width: 100%;
    }
    .six-card + .six-card { margin-top: .5rem; }
    .six-card-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: .5rem;
      margin-bottom: .35rem;
    }
    .six-card-title {
      font-weight: 800;
      font-size: .95rem;
    }
    .six-card-sub {
      font-size: .75rem;
      color: var(--muted);
      font-weight: 600;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
    .six-section-label {
      font-size: .68rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
      margin-top: .55rem;
      margin-bottom: .2rem;
    }
    .six-section-label:first-child { margin-top: 0; }
    .six-warning {
      padding: .55rem .6rem;
      border-radius: 8px;
      background: var(--warning-soft, rgba(245,158,11,.15));
      color: var(--text);
      font-size: .85rem;
      line-height: 1.35;
    }
    .six-player-list { display: grid; gap: .25rem; }
    .six-player-row {
      display: grid;
      grid-template-columns: 14px minmax(0, 1fr) auto;
      gap: .5rem;
      align-items: center;
      padding: .5rem .6rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-family: inherit;
      font-size: .9rem;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      min-height: 40px;
      overflow: hidden;
    }
    .six-player-row.in-a {
      border-color: var(--primary);
      background: var(--primary-soft);
    }
    .six-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      flex-shrink: 0;
    }
    .six-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .six-team-tag {
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
    }
    .six-rotation {
      display: grid;
      gap: .25rem;
    }
    .six-row {
      display: grid;
      grid-template-columns: 80px minmax(0, 1fr);
      gap: .5rem;
      align-items: center;
      padding: .4rem .55rem;
      border-radius: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      font-size: .85rem;
      overflow: hidden;
    }
    .six-row-holes {
      font-weight: 800;
      color: var(--muted);
      font-size: .75rem;
      white-space: nowrap;
    }
    .six-row-pairs {
      font-weight: 700;
      overflow-wrap: anywhere;
      word-break: break-word;
      min-width: 0;
      line-height: 1.3;
    }
    .six-row-empty {
      padding: .5rem .55rem;
      border-radius: 8px;
      background: var(--surface);
      border: 1px dashed var(--border);
      color: var(--muted);
      font-size: .85rem;
      font-style: italic;
    }

    /* Wolf — rotation display in the Wagers card */
    /* Wolf live banner — sits above the scorecard during play and shows
       the current hole's wolf + inline partner picker per foursome. */
    .wolf-banner {
      display: grid;
      gap: .4rem;
      padding: .55rem .6rem 0;
    }
    .wolf-banner-strip {
      background: linear-gradient(135deg, color-mix(in oklab, #7c3aed 16%, var(--surface)) 0%, var(--surface) 80%);
      border: 1px solid color-mix(in oklab, #7c3aed 30%, var(--border));
      border-radius: 10px;
      padding: .5rem .65rem;
    }
    .wolf-banner-head {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: .35rem;
    }
    .wolf-banner-tee {
      font-size: .72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .03em;
      color: var(--muted);
    }
    .wolf-banner-meta {
      font-size: .9rem;
      font-weight: 800;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wolf-banner-more {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-weight: 800;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }
    .wolf-banner-picks {
      display: flex;
      flex-wrap: wrap;
      gap: .3rem;
    }
    .wolf-banner-pick {
      padding: .35rem .65rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      min-height: 32px;
    }
    .wolf-banner-pick.active {
      background: #7c3aed;
      color: white;
      border-color: #7c3aed;
    }
    .wolf-banner-pick.wolf-lone {
      border-style: dashed;
    }
    .wolf-banner-pick.wolf-lone.active {
      border-style: solid;
    }
    .wolf-rotation {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: .3rem;
    }
    .wolf-rot-cell {
      padding: .35rem .55rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: .85rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Wolf decisions sheet — one row per hole */
    .wolf-hole-list { display: grid; gap: .35rem; }
    .wolf-hole-row {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: .5rem;
      align-items: start;
      padding: .55rem .65rem;
      border-radius: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .wolf-hole-num {
      grid-row: 1 / span 2;
      font-size: .85rem;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: .02em;
    }
    .wolf-wolf-name {
      font-size: .85rem;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .wolf-pick-row {
      display: flex;
      flex-wrap: wrap;
      gap: .3rem;
      margin-top: .35rem;
    }
    .wolf-pick {
      padding: .35rem .55rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      min-height: 34px;
    }
    .wolf-pick.active {
      background: var(--primary);
      color: var(--inverse);
      border-color: var(--primary);
    }
    .wolf-pick.wolf-lone {
      border-style: dashed;
    }
    .wolf-pick.wolf-lone.active {
      border-style: solid;
    }

    .switch {
      width: 48px;
      height: 26px;
      border-radius: var(--r-pill);
      background: var(--border);
      position: relative;
      padding: 0;
      flex: none;
    }
    .switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: var(--r-pill);
      background: #fff;
      transition: left .18s ease;
    }
    .switch.on { background: var(--primary); }
    .switch.on::after { left: 25px; }

    .field { display: grid; gap: .25rem; }
    .field label { font-size: var(--t-sm); font-weight: 800; color: var(--muted); }
    .field-hint { font-size: .7rem; font-weight: 600; color: var(--muted); opacity: .85; }
    .btn.disabled { opacity: .4; pointer-events: none; }
    a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

    /* Course load — input + Load button side-by-side */
    .course-row { display: grid; grid-template-columns: 1fr auto; gap: .35rem; }
    .course-row .btn { min-height: 38px; padding: 0 .8rem; }

    /* Quick Fill grid */
    .qf-wrap {
      overflow-x: auto;
      overflow-y: auto;
      max-height: 55vh;
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-top: .5rem;
      -webkit-overflow-scrolling: touch;
    }
    .qf-table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      font-size: .9rem;
    }
    .qf-table th, .qf-table td {
      padding: 3px;
      text-align: center;
      background: var(--surface);
    }
    .qf-table thead th {
      position: sticky;
      top: 0;
      background: var(--surface-2);
      z-index: 2;
      font-size: .7rem;
      border-bottom: 1px solid var(--border);
    }
    .qf-corner {
      position: sticky;
      left: 0;
      z-index: 3;
      background: var(--surface-2) !important;
      min-width: 92px;
    }
    .qf-name {
      position: sticky;
      left: 0;
      background: var(--surface) !important;
      z-index: 1;
      text-align: left;
      padding-left: .5rem;
      font-weight: 800;
      border-right: 1px solid var(--border);
      white-space: nowrap;
    }
    .qf-hn { font-weight: 900; font-size: .9rem; line-height: 1; }
    .qf-par { font-weight: 700; color: var(--muted); font-size: .7rem; line-height: 1.2; }
    .qf-cell { padding: 2px !important; }
    .qf-input {
      width: 38px;
      height: 38px;
      text-align: center;
      font-size: 1.1rem;
      font-weight: 900;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      padding: 0;
    }
    .qf-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
    }

    /* GolfCourseAPI search drawer */
    .gca-results { display: grid; gap: .35rem; margin-top: .5rem; max-height: 50vh; overflow-y: auto; }
    .gca-result {
      text-align: left;
      padding: .55rem .65rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      font: inherit;
      cursor: pointer;
      display: grid;
      gap: .15rem;
    }
    .gca-result:active { background: var(--surface-2); }
    .gca-result .nm { font-weight: 800; font-size: var(--t-sm); }
    .gca-result .loc { color: var(--muted); font-size: .8rem; }

    /* Section labels inside the course loader sheet */
    .gca-section-label {
      font-size: .7rem;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin: .65rem 0 .25rem;
    }
    .gca-saved-list { display: grid; gap: .3rem; }
    .gca-saved-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .35rem;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      overflow: hidden;
    }
    .gca-saved-main {
      text-align: left;
      padding: .5rem .65rem;
      background: transparent;
      color: var(--text);
      font: inherit;
      cursor: pointer;
      display: grid;
      gap: .1rem;
      border: 0;
    }
    .gca-saved-main:active { background: var(--surface-2); }
    .gca-saved-main .nm { font-weight: 800; font-size: var(--t-sm); }
    .gca-saved-main .loc { color: var(--muted); font-size: .78rem; }
    .gca-fav-btn {
      width: 38px;
      height: 38px;
      margin-right: .25rem;
      border-radius: 999px;
      border: 0;
      background: transparent;
      font-size: 1.15rem;
      line-height: 1;
      color: var(--muted);
    }
    .gca-fav-btn.is-fav { color: var(--gold, #f5c518); }
    .gca-fav-btn:active { background: var(--surface-2); }
    .gca-status {
      font-size: .85rem;
      color: var(--muted);
      padding: .4rem 0;
      text-align: center;
    }
    .gca-keybox {
      display: grid;
      gap: .35rem;
      padding: .55rem;
      background: var(--surface-2);
      border-radius: 8px;
      margin-bottom: .5rem;
    }
    .gca-keybox label { font-size: .8rem; font-weight: 800; color: var(--muted); }
    .gca-keybox .row { display: grid; grid-template-columns: 1fr auto; gap: .35rem; }
    .gca-keybox a { color: var(--primary); text-decoration: underline; font-size: .8rem; }
    .field input,
    .field select {
      width: 100%;
      min-height: 44px;
      border-radius: var(--r-md);
      padding: 0 var(--s-3);
      font-weight: 700;
    }
    .field input:focus,
    .field select:focus {
      outline: 2px solid var(--primary);
      outline-offset: -1px;
    }

    .grid-2 { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }

    .group-card {
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: var(--surface-2);
      padding: .4rem .55rem;
    }

    .player-dot {
      width: 18px; height: 18px;
      border-radius: 999px;
      background: var(--player-color, var(--primary));
      flex: none;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 12px);
      transform: translate(-50%, 20px);
      background: var(--text);
      color: var(--inverse);
      padding: .65rem 1rem;
      border-radius: var(--r-pill);
      font-weight: 800;
      font-size: var(--t-sm);
      box-shadow: var(--shadow-md);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, transform .2s;
      z-index: 60;
      max-width: 90vw;
      text-align: center;
    }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    .backdrop {
      position: fixed;
      inset: 0;
      background: rgba(8,13,10,.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      z-index: 40;
    }
    .backdrop.show { opacity: 1; pointer-events: auto; }

    .sheet {
      position: fixed;
      left: 50%;
      bottom: 0;
      width: min(100%, 720px);
      max-height: 92dvh;
      background: var(--surface);
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      box-shadow: var(--shadow-md);
      padding: var(--s-3);
      padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
      transform: translate(-50%, 105%);
      transition: transform .22s ease;
      z-index: 50;
      overflow: auto;
    }
    .sheet.open { transform: translate(-50%, 0); }
    .sheet-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--s-2);
      margin-bottom: var(--s-3);
    }
    .sheet-head .title {
      font-size: var(--t-lg);
      font-weight: 900;
    }
    .sheet-head .sub {
      font-size: var(--t-sm);
      color: var(--muted);
    }
    /* Score-entry sheet variant — the big strokes number in the middle
       is the largest element on the page, with Hole · Par sitting just
       under it size-wise so it's impossible to miss which hole you're
       scoring. Name is third in the hierarchy. */
    .score-sheet-head .score-hole {
      font-size: clamp(2.6rem, 2.1rem + 2.0vw, 3.6rem);
      font-weight: 900;
      letter-spacing: -.02em;
      line-height: 1;
      color: var(--text);
    }
    .score-sheet-head .score-name {
      margin-top: 6px;
      font-size: clamp(1.85rem, 1.55rem + 1.2vw, 2.5rem);
      font-weight: 800;
      letter-spacing: -.015em;
      line-height: 1.05;
      color: var(--text);
    }
    .score-sheet-head .score-extras {
      margin-top: 4px;
      font-size: .92rem;
      color: var(--muted);
      font-weight: 600;
    }
    .close-x {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: grid; place-items: center;
      font-size: 1.2rem;
    }
    .close-x:active { background: var(--surface-2); }
  

/* ---- next style block ---- */


  /* =========================================================
     Page-specific styles
     ========================================================= */

  /* Home */
  .home-card {
    padding: var(--s-4);
    background: linear-gradient(160deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-3);
  }
  .home-card .h {
    font-size: var(--t-xl);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: var(--s-2);
  }
  .home-card .sub {
    color: var(--muted);
    font-size: var(--t-sm);
  }
  .home-actions { display: grid; gap: var(--s-2); }
  .home-actions .btn { min-height: 64px; }

  /* Upcoming round card on Home */
  .upcoming-card {
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-3);
    display: grid;
    gap: var(--s-2);
    overflow: hidden;        /* clip any wide drawer content to the card */
    min-width: 0;
  }
  .upcoming-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .upcoming-label {
    font-size: .7rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .upcoming-clear-btn {
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
    background: transparent;
    border: 0;
    padding: .2rem .4rem;
  }
  .upcoming-fields { display: grid; gap: .35rem; }
  .upcoming-input {
    min-height: 36px;
    padding: .3rem .55rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 700;
  }
  .upcoming-course { font-size: 1.05rem; font-weight: 800; }
  .upcoming-when { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
  .upcoming-tt-input { max-width: 130px; }
  .upcoming-tt-input::placeholder { font-size: .7rem; }

  /* Collapsed card on Home — text-only summary; Edit button toggles
     an inline expander that slides out of the bottom of THIS card. */
  .upcoming-collapsed { padding: 0; gap: 0; }
  .upcoming-body {
    padding: var(--s-3);
    display: grid;
    gap: .35rem;
  }
  .upcoming-header-line {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
  }
  .upcoming-head-text {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: .55rem;
    min-width: 0;
  }
  .upcoming-course-name {
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .upcoming-when-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .upcoming-edit-btn {
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 800;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    min-height: 30px;
  }
  .upcoming-card.is-open .upcoming-edit-btn {
    background: var(--primary);
    color: var(--inverse);
    border-color: var(--primary);
  }
  .upcoming-edit-btn:active { opacity: .85; }
  .upcoming-head-actions {
    display: flex;
    gap: .35rem;
    flex-shrink: 0;
    align-items: center;
  }
  .upcoming-dir-btn {
    flex-shrink: 0;
    font-size: .95rem;
    line-height: 1;
    padding: 0;
    width: 30px;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    display: grid;
    place-items: center;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
  }
  .upcoming-dir-btn:active { opacity: .85; }
  .upcoming-dir-btn.is-empty { opacity: .35; }

  /* Course action row — Call + Directions buttons visible on Home, no taps
     into the edit page. Buttons only render when the data exists. */
  .course-actions {
    display: flex;
    gap: .4rem;
    margin: .2rem 0 .35rem;
  }
  .course-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 800;
    padding: .55rem .7rem;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    min-height: 40px;
  }
  .course-action-btn:active { background: var(--surface); }
  .course-action-ico { font-size: 1.05rem; line-height: 1; }

  /* Active round card on Home — bigger, distinct from upcoming rounds */
  .active-round-card {
    margin-top: var(--s-3);
    padding: var(--s-3);
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: grid;
    gap: .4rem;
  }
  .active-round-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .active-round-name {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.15;
  }

  /* Subtle Settings link at the bottom of Home — discoverable without
     having to dig through the ⋯ menu, but doesn't compete with the main
     content above it. */
  .home-settings-link {
    display: block;
    margin: var(--s-4) auto 0;
    padding: .55rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
  }
  .home-settings-link:active { background: var(--surface-2); color: var(--text); }
  .upcoming-in-line {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
  }
  .upcoming-in-line.muted-text { color: var(--muted); font-weight: 600; font-style: italic; }
  .upcoming-in-prefix {
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .04em;
    margin-right: .15rem;
  }

  /* Inline expander — uses grid-template-rows trick for smooth height anim. */
  .upcoming-expander {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
  }
  .upcoming-expander.is-expanded { grid-template-rows: 1fr; }
  .upcoming-expander-inner { overflow: hidden; min-width: 0; }
  .upcoming-expander-pad {
    padding: .1rem var(--s-3) var(--s-3);
    border-top: 1px dashed var(--border);
    margin-top: .25rem;
    display: grid;
    gap: .35rem;
    min-width: 0;
  }
  /* Group board inside the drawer must not push the card wider */
  .upcoming-expander-pad .group-board { min-width: 0; }
  .upcoming-expander-pad .group-card  { min-width: 0; overflow: hidden; }
  .upcoming-expander-pad .player-row .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .upcoming-use-btn { margin: 0 var(--s-3) var(--s-3); width: calc(100% - 2 * var(--s-3)); }

  .drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    margin-top: .35rem;
  }

  /* RSVP section toggle — primary green so it stands out as the obvious
     way to add or remove players from this round. */
  .rsvp-section-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .65rem .75rem;
    margin-top: .55rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 10px;
    color: var(--inverse);
    font: inherit;
    cursor: pointer;
    text-align: left;
    min-height: 48px;
  }
  .rsvp-section-toggle:active { filter: brightness(.92); }
  .rsvp-section-label {
    font-weight: 900;
    font-size: var(--t-sm);
    color: var(--inverse);
    letter-spacing: .01em;
  }
  .rsvp-section-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    flex: 1;
    margin-left: .35rem;
    justify-content: flex-end;
  }
  .rsvp-section-chevron {
    font-weight: 900;
    font-size: 1rem;
    color: var(--inverse);
    transition: transform .2s ease;
    flex-shrink: 0;
    opacity: .85;
  }
  .rsvp-section-toggle.is-open .rsvp-section-chevron { transform: rotate(180deg); }
  .rsvp-section-expander {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s ease;
  }
  .rsvp-section-expander.is-expanded { grid-template-rows: 1fr; }
  .rsvp-section-expander-inner { overflow: hidden; min-width: 0; }

  .upcoming-rsvp-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem;
  }
  .rsvp-pill {
    font-size: .7rem;
    font-weight: 800;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
  }
  .rsvp-pill.rsvp-in    { background: color-mix(in srgb, var(--primary-soft) 90%, transparent); color: var(--primary); border-color: var(--primary); }
  .rsvp-pill.rsvp-out   { background: color-mix(in srgb, #fee 80%, transparent); color: #b3261e; border-color: #f4b9b3; }
  .rsvp-pill.rsvp-maybe { background: color-mix(in srgb, #fff5d6 80%, transparent); color: #8a6300; border-color: #ead29a; }

  .rsvp-list { display: grid; gap: .25rem; }
  .rsvp-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: .5rem;
    align-items: center;
    padding: .35rem .5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 42px;
  }
  .rsvp-row .player-dot {
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--player-color);
    border: 1px solid var(--border);
  }
  .rsvp-name { font-weight: 800; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rsvp-buttons { display: flex; gap: .25rem; }
  .rsvp-btn {
    width: 34px; height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1;
  }
  .rsvp-btn.is-active.rsvp-in    { background: var(--primary); color: var(--inverse); border-color: var(--primary); }
  .rsvp-btn.is-active.rsvp-out   { background: #b3261e; color: #fff; border-color: #b3261e; }
  .rsvp-btn.is-active.rsvp-maybe { background: #c08a00; color: #fff; border-color: #c08a00; }

  /* Tee time status line on Home — compares headcount to booked tee times */
  .rsvp-tt-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    padding: .25rem 0;
  }
  .rsvp-tt-need, .rsvp-tt-booked { color: var(--text); }
  .rsvp-tt-sep { opacity: .5; }
  .rsvp-tt-ok   { color: var(--primary); font-weight: 800; }
  .rsvp-tt-over { color: #c08a00; font-weight: 800; }
  .rsvp-tt-warn { color: #b3261e; font-weight: 800; }

  /* Section label + adjacent action button on Players page */
  .section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: var(--s-3);
    margin-bottom: var(--s-1);
  }
  .btn-mini-action {
    font-size: .72rem;
    font-weight: 800;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    white-space: nowrap;
    min-height: 28px;
  }
  .btn-mini-action:active { background: var(--surface-2); }

  /* Setup */
  .section-label {
    font-size: var(--t-xs);
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: var(--s-3) 0 var(--s-1);
    padding-left: var(--s-1);
  }
  .section-label:first-child { margin-top: 0; }

  .row-line {
    display: grid;
    gap: .35rem;
    padding: .45rem .55rem;
    border-bottom: 1px solid var(--divider);
    min-width: 0;
    overflow: hidden;
  }
  .row-line:last-child { border-bottom: none; }
  .row-line .row-top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
  }
  .row-line .row-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
  }
  .row-line .name {
    font-weight: 800;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .2rem;
  }
  .row-line .name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Small "?" pill next to each game name — opens the rules popup.
     Bumped up so it's easy to hit and read without readers. */
  .help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 800;
    font-size: .95rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: .35rem;
    flex: none;
  }
  .help-icon:active { background: var(--border); color: var(--text); }

  /* Rules popup body — let the long-form text breathe a bit. */
  .rules-body {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text);
  }
  .rules-body p { margin: .5rem 0; }
  .rules-body ul { margin: .35rem 0 .5rem 1.1rem; padding: 0; }
  .rules-body li { margin: .2rem 0; }
  .rules-body strong { font-weight: 800; }
  .row-line .amount {
    display: flex; align-items: center; gap: .15rem;
    font-weight: 900;
  }
  .row-line .amount input {
    width: 56px;
    min-height: 34px;
    border-radius: 8px;
    padding: 0 .4rem;
    text-align: center;
    font-weight: 900;
    background: var(--surface);
    font-variant-numeric: tabular-nums;
  }
  .row-line.soon { opacity: .5; }
  .row-line.soon .amount input { pointer-events: none; }

  /* Segmented control — shows both options side by side, active one highlighted. */
  .segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface);
  }
  .segmented button {
    border: 0;
    background: transparent;
    padding: .25rem .65rem;
    font-size: .75rem;
    font-weight: 800;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
  }
  .segmented button + button {
    border-left: 1px solid var(--border);
  }
  .segmented button.on {
    background: var(--primary);
    color: var(--inverse);
  }
  .segmented button[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
  .seg-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--muted);
    margin-right: .15rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  /* Small helper line that sits between row-bottoms inside a row-line —
     used for short explanations next to toggles like High-Low/Auto-press
     so they don't crowd the same horizontal line as the switch. */
  .row-line .row-hint {
    font-size: .72rem;
    line-height: 1.3;
    color: var(--muted);
    font-weight: 600;
    padding: 0 .15rem;
  }

  /* Settings (no amount column) */
  .setting-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    min-height: 40px;
    border-bottom: 1px solid var(--divider);
  }
  .setting-line:last-child { border-bottom: none; }
  .setting-line .name { font-weight: 800; }

  /* Players page (kept from original) */
  .players-layout { display: grid; gap: var(--s-2); }
  .library-row .chip-row { gap: .3rem; }
  .library-chip {
    padding: .4rem .55rem;
    font-size: var(--t-sm);
    border-radius: var(--r-md);
  }

  /* Directory list — replaces the chip cluster */
  .dir-section-label { margin-top: var(--s-3); }
  .dir-section-label:first-child { margin-top: 0; }
  .dir-subhead {
    color: var(--muted);
    font-size: var(--t-xs);
    margin-bottom: var(--s-2);
    padding: 0 .2rem;
  }

  /* Column layout shared by header + rows so values line up cleanly */
  .dir-header,
  .dir-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px 48px 58px 48px;
    gap: .55rem;
    align-items: stretch;
  }

  .dir-header {
    padding: 0 .65rem .25rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    align-items: end;
  }
  .dir-h-name { text-align: left; }
  .dir-h-stat { text-align: right; }

  .dir-list { display: grid; gap: .25rem; }

  .dir-row {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    min-height: 56px;
  }
  .dir-row.is-active {
    background: var(--primary-soft);
    border-color: var(--primary);
  }

  .dir-cell {
    align-self: center;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Name button — flush-stretch to span the row vertically so the tap area
     extends all the way across the row (still excludes the toggle column). */
  .dir-cell-name {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: .5rem .65rem;
    background: transparent;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-weight: 800;
    font-size: .95rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .dir-cell-name:active { background: var(--surface-2); }

  .dir-cell-stat {
    color: var(--muted);
    text-align: right;
  }
  .dir-cell-money.is-pos { color: var(--success); }
  .dir-cell-money.is-neg { color: var(--danger); }

  /* Toggle on the far right, full row height with its own background */
  .dir-cell-toggle {
    align-self: stretch;
    border: 0;
    border-left: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 900;
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 0;
  }
  .dir-cell-toggle:active { background: var(--surface); }
  .dir-cell-toggle.is-on {
    background: var(--primary);
    color: var(--inverse);
    border-left-color: var(--primary);
  }
  .dir-row.is-active .dir-cell-toggle { border-left-color: var(--primary); }

  /* Back-compat — old class names from the previous list design */
  .dir-toggle {
    width: 26px; height: 26px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1rem;
    color: var(--muted);
    background: var(--surface-2);
  }
  .dir-empty {
    padding: .85rem;
    text-align: center;
    color: var(--muted);
    font-size: var(--t-sm);
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: var(--surface);
  }

  /* All-players sheet rows */
  .all-list { display: grid; gap: .3rem; max-height: 60vh; overflow-y: auto; }
  .all-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    gap: .55rem;
    align-items: center;
    padding: .5rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    min-height: 44px;
  }
  .all-row.is-frequent {
    border-color: var(--primary);
    background: var(--primary-soft);
  }
  .all-row .player-dot {
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--player-color);
    border: 1px solid var(--border);
  }
  .all-name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .all-star {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--gold);
  }
  .all-row:not(.is-frequent) .all-star { color: var(--muted); }
  .all-star:active { background: var(--surface-2); }

  /* GroupMe integration config */
  .gm-config {
    display: grid;
    gap: .35rem;
    padding: .5rem .55rem;
    background: var(--surface-2);
    border-radius: 10px;
    margin-top: .3rem;
  }
  .gm-config input {
    min-height: 36px;
    padding: 0 .55rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
  }

  /* Read-only display of GroupMe credentials — fields appear as static text
     until the user taps Edit, protecting against accidental changes. */
  .gm-readonly {
    display: grid;
    gap: .15rem;
    padding: .35rem .55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .gm-ro-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: .5rem;
    align-items: baseline;
    padding: .2rem 0;
    border-bottom: 1px dashed var(--border);
  }
  .gm-ro-row:last-child { border-bottom: 0; }
  .gm-ro-label {
    font-size: .7rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .gm-ro-value {
    font-size: .8rem;
    font-weight: 700;
    word-break: break-all;
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .gm-ro-empty {
    font-style: italic;
    color: var(--muted);
    font-family: inherit;
    font-weight: 600;
  }
  .gm-help { font-size: .85rem; line-height: 1.45; max-height: 55vh; overflow-y: auto; padding-right: .25rem; }
  .gm-help p { margin: .55rem 0; }
  .gm-help a { color: var(--primary); text-decoration: underline; }
  .gm-help code {
    background: var(--surface-2);
    padding: .05rem .35rem;
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .8rem;
  }
  .gm-steps { padding-left: 1.3rem; display: grid; gap: .55rem; }
  .gm-steps li { line-height: 1.45; }
  .gm-commands { margin-top: .8rem !important; }
  .gm-cmd-list { padding-left: 1.3rem; display: grid; gap: .25rem; margin-top: .25rem; }
  .gm-cmd-list code {
    color: var(--primary);
    font-weight: 700;
  }
  .btn-mini-status {
    font-size: .75rem;
    font-weight: 800;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    white-space: nowrap;
    min-height: 28px;
  }
  .btn-mini-status.is-set {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
  }

  /* Page header bar — used on Setup and Settings to host a title + side button */
  .page-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 0 .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .35rem;
  }
  .page-header-title {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .01em;
  }
  .page-header-spacer { width: 60px; }
  .page-gear-btn {
    font-size: .8rem;
    font-weight: 800;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
    min-height: 32px;
  }
  .page-gear-btn:active { background: var(--surface); }
  .page-back-btn {
    font-size: .85rem;
    font-weight: 800;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
    min-height: 32px;
    min-width: 60px;
    text-align: left;
  }
  .page-back-btn:active { background: var(--surface); }

  /* Indicator pill next to the integration name when a key is saved */
  .key-status {
    font-size: .65rem;
    font-weight: 800;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary);
    margin-left: .35rem;
    white-space: nowrap;
    vertical-align: 2px;
  }

  /* Status row inside the dropdown when a key is saved */
  .key-saved-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem;
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-radius: 8px;
    margin-top: .35rem;
  }
  .key-saved-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--primary);
  }
  .key-saved-text {
    font-size: .8rem;
    font-weight: 800;
    color: var(--primary);
  }
  .group-board { display: grid; gap: var(--s-2); }
  .group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 0 0 .2rem;
  }
  .group-title { font-size: var(--t-sm); font-weight: 900; }
  .group-cap { font-size: var(--t-xs); color: var(--muted); font-weight: 800; }
  .tee-time-input {
    width: 84px;
    min-height: 32px;
    padding: 0 .4rem;
    border-radius: 8px;
    background: var(--surface);
    font-size: var(--t-sm);
    font-weight: 800;
    text-align: center;
  }
  .tee-remove {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--danger);
    font-size: 1rem;
    font-weight: 900;
    display: grid; place-items: center;
  }
  .tee-remove[disabled] { opacity: .35; }
  .player-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: .35rem;
    align-items: center;
    padding: .2rem 0;
  }
  .player-row .name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .player-row .bets {
    font-size: var(--t-xs);
    color: var(--muted);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .icon-mini {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 1.1rem;
    color: var(--primary);
  }
  .icon-mini.muted-ico { color: var(--muted); font-size: .95rem; }

  /* Move-to-tee-time button — text-based for clarity vs the cycle icon. */
  .btn-move {
    font-size: .72rem;
    font-weight: 800;
    padding: .25rem .5rem;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
    min-height: 30px;
  }
  .btn-move:active { background: var(--primary-soft); }

  /* Move picker sheet — each tee time is a card showing its current members. */
  .move-list { display: grid; gap: .4rem; }
  .group-card-pick {
    display: block;
    width: 100%;
    text-align: left;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    min-height: 48px;
  }
  .group-card-pick:active:not([disabled]) { background: var(--surface-2); }
  .group-card-pick[disabled] { opacity: .55; cursor: not-allowed; }
  .group-card-pick.is-current {
    border-color: var(--primary);
    background: var(--primary-soft);
  }
  .group-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  .group-card-title { font-weight: 900; font-size: var(--t-md); }
  .group-card-meta {
    display: flex; align-items: center; gap: .4rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
  }
  .group-card-status { white-space: nowrap; }
  .group-card-members {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin-top: .4rem;
  }
  .group-member {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    font-weight: 800;
    color: var(--text);
    background: var(--surface-2);
    padding: .15rem .45rem .15rem .25rem;
    border-radius: 999px;
  }
  .group-member.is-me {
    background: var(--primary);
    color: var(--inverse);
  }
  .group-member .player-dot {
    width: 12px; height: 12px;
    border-radius: 999px;
    background: var(--player-color);
    border: 1px solid var(--surface);
  }
  .group-member .m-arrow {
    background: rgba(255,255,255,.18);
    color: var(--inverse);
    border: 0;
    border-radius: 6px;
    padding: 0;
    width: 22px; height: 22px;
    font-size: .85rem;
    font-weight: 900;
    margin-left: .15rem;
    line-height: 1;
  }
  .group-member .m-arrow:active:not([disabled]) { background: rgba(255,255,255,.34); }
  .group-member .m-arrow[disabled] { opacity: .35; }
  .group-card-pick.is-disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  .group-empty {
    font-size: .78rem;
    color: var(--muted);
    font-style: italic;
  }
  .move-opt-arrow { color: var(--primary); font-size: 1.2rem; font-weight: 900; }

  /* Reorder sheet — shows the whole group with per-row up/down controls. */
  .order-list { display: grid; gap: .3rem; }
  .order-row {
    display: grid;
    grid-template-columns: 28px 22px 1fr auto auto;
    gap: .5rem;
    align-items: center;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    min-height: 48px;
  }
  .order-row.is-sel {
    border-color: var(--primary);
    background: var(--primary-soft);
  }
  .order-row .order-pos {
    font-size: .85rem;
    font-weight: 900;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .order-row .player-dot {
    width: 18px; height: 18px;
    border-radius: 999px;
    background: var(--player-color);
  }
  .order-row .order-name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .order-arrow {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 900;
  }
  .order-arrow:active:not([disabled]) { background: var(--primary-soft); }
  .order-arrow[disabled] { opacity: .35; }
  .group-slot {
    min-height: 32px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    display: flex; align-items: center;
    padding: 0 .55rem;
    color: var(--muted);
    font-size: var(--t-xs);
    font-weight: 700;
  }

  /* Scorecard */
  .card-toolbar {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-2);
  }
  .card-toolbar .chip {
    flex: 1;
    min-height: 40px;
    justify-content: center;
    font-size: var(--t-sm);
  }
  .card-toolbar .chip.card-undo,
  .card-toolbar .chip.card-redo {
    flex: 0 0 44px;
    font-size: 1.05rem;
    font-weight: 900;
  }
  .card-toolbar .chip.card-lock {
    flex: 0 0 44px;
    font-size: 1.05rem;
  }
  .card-toolbar .chip.card-lock.is-locked {
    background: color-mix(in oklab, #f59e0b 18%, var(--surface));
    border-color: color-mix(in oklab, #f59e0b 50%, var(--border));
  }
  .card-toolbar .chip.card-undo[disabled],
  .card-toolbar .chip.card-redo[disabled] {
    opacity: .35;
    pointer-events: none;
  }

  /* Floating action button — bottom-right of the Card. Scrolls the
     scorecard so the current hole's column is centered in view. Sized
     for thumb access, sits above the tab bar with safe-area padding. */
  .card-current-fab {
    position: fixed;
    right: var(--s-3);
    bottom: calc(var(--tabs-h, 64px) + var(--s-3) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: grid;
    place-items: center;
    grid-template-rows: auto auto;
    gap: 0;
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 999px;
    background: var(--primary);
    color: var(--inverse, #fff);
    border: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .12);
    cursor: pointer;
    font-family: inherit;
  }
  .card-current-fab:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  }
  .card-current-fab .fab-label {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .85;
    line-height: 1;
    margin-bottom: 1px;
  }
  .card-current-fab .fab-num {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
  }
  /* Only show the FAB on the Card page */
  body:not([data-page="card"]) .card-current-fab { display: none; }
  .scorecard-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
  }
  .scorecard-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scorecard-scroll table {
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
  }
  .scorecard-scroll th,
  .scorecard-scroll td {
    border-right: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    padding: .25rem .3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .scorecard-scroll th {
    position: sticky; top: 0;
    background: var(--surface-2);
    font-size: var(--t-xs);
    font-weight: 900;
    z-index: 3;
    color: var(--muted);
  }
  .scorecard-scroll th.cur-hole {
    background: var(--primary-soft);
    color: var(--primary);
  }
  .scorecard-scroll th:first-child,
  .scorecard-scroll td:first-child {
    position: sticky; left: 0;
    background: var(--surface);
    z-index: 2;
    text-align: left;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    padding: .3rem .5rem;
    transition: width .26s ease, min-width .26s ease, max-width .26s ease;
  }
  .scorecard-scroll th:first-child { z-index: 5; background: var(--surface-2); }
  .scorecard-scroll.names-open th:first-child,
  .scorecard-scroll.names-open td:first-child {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }

  /* Tee-time section dividers — only render when there are 2+ groups.
     A thin uppercase row of the tee label spans the table; the sticky
     first cell keeps the label visible when the user scrolls right. */
  .card-group-header td {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 800;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .65rem;
    border-top: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    position: sticky;
    left: 0;
    z-index: 4;
  }
  .card-group-header-unassigned td {
    background: var(--surface-2);
    color: var(--muted);
    border-top-color: var(--border);
    border-bottom-color: var(--border);
  }

  .name-stack {
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    font-weight: 900;
  }
  /* Fixed-position color dot to the left of the player's name in scorecard
     rows. Color comes from playerColorFor() — 1–12 based on tee time order. */
  .card-name-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--player-color);
    margin-right: 6px;
    border: 1px solid rgba(0,0,0,0.15);
  }
  .name-initial, .name-full {
    position: absolute;
    left: 18px;
    white-space: nowrap;
    transition: opacity .22s, transform .26s;
  }
  .name-initial { opacity: 1; transform: translateX(0); }
  .name-full    { opacity: 0; transform: translateX(-6px); }
  .scorecard-scroll.names-open .name-initial { opacity: 0; transform: translateX(6px); }
  .scorecard-scroll.names-open .name-full    { opacity: 1; transform: translateX(0); }

  /* Handicap badge appended to full name when expanded. Hidden when
     handicap is 0 (no DOM at all in that case). */
  .name-hcp {
    color: var(--muted);
    font-weight: 700;
    font-size: .75rem;
    margin-left: .4rem;
    letter-spacing: .02em;
  }

  .hole-btn {
    width: 100%;
    min-height: 44px;
    background: transparent;
    font-weight: 900;
    font-size: var(--t-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text);
  }
  .hole-cell { padding: 0; min-width: 42px; }
  .hole-cell.cur-hole { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
  /* Hole action menu — big tappable rows so they work easily without
     readers on the course. Each row has an emoji icon and a primary
     label plus a quiet subtext line. */
  .hole-menu-grid {
    display: grid;
    gap: .5rem;
    margin-top: var(--s-2);
  }
  .hole-menu-btn {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--s-2);
    align-items: center;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 14px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    min-height: 64px;
    font-family: inherit;
  }
  .hole-menu-btn:active {
    background: var(--surface-2);
  }
  .hole-menu-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
  }
  .hole-menu-btn.is-current {
    background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface));
    border-color: var(--primary);
  }
  .hole-menu-ico {
    font-size: 1.7rem;
    line-height: 1;
    text-align: center;
  }
  .hole-menu-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 1.05rem;
    font-weight: 800;
    min-width: 0;
  }
  .hole-menu-sub {
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
  }
  /* Wager templates list */
  .tpl-list { display: grid; gap: .55rem; }
  .tpl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2);
    align-items: center;
    padding: .65rem .8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .tpl-info { min-width: 0; }
  .tpl-name {
    font-size: 1.05rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tpl-summary {
    font-size: .88rem;
    color: var(--muted);
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tpl-when {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 3px;
  }
  .tpl-actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: stretch;
  }
  .tpl-actions .btn { padding: .4rem .7rem; }

  /* Archive cards (past rounds) — Home shortcut + main list. */
  .archive-card {
    display: block;
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    margin-top: .35rem;
  }
  .archive-card:active { background: var(--surface-2); }
  .archive-card-head {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    align-items: baseline;
    margin-bottom: 3px;
  }
  .archive-card-course {
    font-size: 1.02rem;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .archive-card-date {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700;
    flex: none;
  }
  .archive-card-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600;
  }
  .archive-card-winner { color: var(--text); }

  /* Lifetime standings table */
  .standings-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
  }
  .standings-head, .standings-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 55px 80px 70px 70px;
    gap: .3rem;
    padding: .55rem .65rem;
    align-items: center;
  }
  .standings-head {
    background: var(--surface-2);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
  }
  .standings-row {
    border-top: 1px solid var(--divider);
    font-size: .9rem;
  }
  .standings-row:first-of-type { border-top: 0; }
  .standings-name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .standings-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
  .standings-num.win  { color: #15803d; }
  .standings-num.lose { color: #b91c1c; }

  /* Archived round detail */
  .detail-player-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
  }
  .detail-player-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: .55rem;
    row-gap: 2px;
    padding: .6rem .75rem;
    border-top: 1px solid var(--divider);
  }
  .detail-player-row:first-of-type { border-top: 0; }
  .detail-player-rank {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    color: var(--muted);
  }
  .detail-player-name {
    font-size: 1.02rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .detail-player-meta {
    grid-column: 2;
    font-size: .82rem;
    color: var(--muted);
    font-weight: 600;
  }
  .detail-player-money {
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .detail-player-money.win  { color: #15803d; }
  .detail-player-money.lose { color: #b91c1c; }

  /* ── Spots Dots Pots branding ─────────────────────────────────────
     Logo gets pride of place on the Home "lobby" screen. The playing
     surfaces (scorecard, score entry) stay clean and high-contrast —
     we deliberately don't carry the busy pop-art treatment onto data
     screens so on-course readability isn't compromised. */
  .home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .5rem 0 1rem;
  }
  .home-hero-logo {
    width: min(58vw, 230px);
    height: auto;
    aspect-ratio: 1;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
  }
  .home-hero-tag {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--brand-gold, #d9a400);
  }
  /* Small circular logo mark usable in page headers for continuity. */
  .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    flex: none;
    vertical-align: middle;
  }

  /* Hole number cell on the scorecard header */
  .hole-num-btn {
    display: inline-block;
    min-width: 32px;
    padding: 4px 8px;
    margin: 0 0 2px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    line-height: 1;
  }
  .hole-num-btn:active {
    background: color-mix(in srgb, var(--primary-soft) 60%, transparent);
  }
  /* Hole complete: every player in this player's foursome has a score
     in this hole. Subtle green tint on the cell signals the foursome
     can move on to the next hole. */
  .hole-cell.hole-complete .hole-btn {
    box-shadow: inset 0 -2px 0 0 color-mix(in oklab, #22c55e 60%, transparent);
  }
  /* Per-hole money delta badge inside each score cell. Bumped up to
     stay legible at arm's length without readers. */
  .cell-money {
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 3px;
    letter-spacing: -.02em;
  }
  .cell-money.win  { color: #15803d; }
  .cell-money.lose { color: #b91c1c; }
  .hole-par { font-weight: 700; color: inherit; font-size: .7rem; }
  .hole-yds { font-weight: 600; color: var(--muted); font-size: .58rem; line-height: 1.1; margin-top: .05rem; }
  .hole-si  { font-weight: 700; color: var(--muted); font-size: .55rem; line-height: 1.1; opacity: .8; }
  .score-vs-par-eagle  { color: #6a3da1; }
  .score-vs-par-birdie { color: var(--danger); }
  .score-vs-par-par    { color: var(--primary); }
  .score-vs-par-bogey  { color: var(--warning); }
  .score-vs-par-double { color: var(--muted); }
  .dots-row {
    display: flex;
    justify-content: center;
    gap: 2px;
    min-height: 8px;
    margin-top: 1px;
  }
  .tiny-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--muted); /* fallback so dot is always visible */
    border: 1px solid var(--surface);
    box-shadow: 0 0 0 .5px var(--border);
  }
  .birdie-mark {
    color: var(--gold);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    margin-left: 1px;
  }
  .total-cell, .money-cell {
    font-weight: 900;
    min-width: 54px;
    font-variant-numeric: tabular-nums;
  }
  .net-col {
    color: var(--primary);
    background: var(--primary-soft);
    min-width: 46px;
  }
  th.net-col { color: var(--primary); }
  .money-up   { color: var(--success); }
  .money-down { color: var(--danger); }

  .hcp-pill {
    display: inline-block;
    font-size: .65rem;
    font-weight: 800;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    margin-left: .3rem;
    vertical-align: middle;
  }

  /* Round move-to-tee picker sheet */
  .m-tee-list { display: grid; gap: .45rem; }
  .m-tee-card {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .55rem .65rem;
    cursor: pointer;
    color: var(--text);
    font: inherit;
  }
  .m-tee-card:active { background: var(--surface-2); }
  .m-tee-card[disabled] { opacity: .55; pointer-events: none; }
  .m-tee-card.is-current { border-color: var(--primary); background: var(--primary-soft); }
  .m-tee-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    margin-bottom: .25rem;
  }
  .m-tee-time { color: var(--muted); font-weight: 700; }
  .m-tee-cap {
    margin-left: auto;
    font-size: .7rem;
    color: var(--muted);
    font-weight: 700;
  }
  .m-tee-body {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
  }
  .m-player {
    font-size: .75rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
  }
  .m-player.is-me { background: var(--primary); color: var(--inverse); }
  .m-empty { color: var(--muted); font-style: italic; font-size: .75rem; }

  /* Score sheet (the fastest path) */
  .score-num-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-2);
  }
  .score-num {
    min-height: 56px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: var(--t-xl);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
    position: relative;
  }
  .score-num.is-par {
    background: var(--primary-soft);
    border-color: var(--primary-soft);
    color: var(--primary);
  }
  .score-num.is-current {
    background: var(--primary);
    color: var(--inverse);
    border-color: transparent;
  }
  .score-num.is-par.is-current { background: var(--primary); color: var(--inverse); }
  .score-num:active { transform: scale(.97); }

  .score-current-display {
    font-size: var(--t-3xl);
    font-weight: 900;
    text-align: center;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin: var(--s-2) 0;
  }
  .score-current-display .delta {
    display: block;
    font-size: var(--t-sm);
    color: var(--muted);
    margin-top: .3rem;
    font-weight: 700;
  }

  .stepper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-2);
  }
  .stepper .btn { min-height: 44px; font-size: var(--t-md); }

  .keypad-input {
    width: 100%;
    min-height: 64px;
    border-radius: var(--r-md);
    text-align: center;
    font-size: var(--t-2xl);
    font-weight: 900;
    background: var(--surface-2);
    font-variant-numeric: tabular-nums;
  }
  .keypad-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }

  /* Money page */
  .money-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
  }
  .money-card h3 {
    font-size: var(--t-sm);
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: var(--s-2);
  }
  .money-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: .3rem 0;
    border-bottom: 1px solid var(--divider);
    font-weight: 700;
  }
  .money-line:last-child { border-bottom: none; }
  .money-line .amt {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }
  .standing {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--s-2);
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--divider);
  }
  .standing:last-child { border-bottom: none; }
  .standing .pos { font-weight: 900; font-size: var(--t-lg); width: 26px; }
  .standing .player { font-weight: 900; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .standing .strokes { color: var(--muted); font-weight: 700; font-size: var(--t-sm); }
  .standing .net {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: right;
  }

  .pay-line {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid var(--divider);
    font-weight: 800;
  }
  .pay-line:last-child { border-bottom: none; }
  .pay-line .amt { color: var(--success); font-weight: 900; }

/* =========================================================
   Course maps admin (Settings → Courses)
   Session 1: course list + per-hole image upload grid.
   ========================================================= */
.cm-course-list { display: grid; gap: var(--s-2); }

.cm-course-row {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 60px;
  padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); text-align: left; cursor: pointer;
}
.cm-course-row:active { background: var(--surface-2); }
.cm-course-row-main { flex: 1; min-width: 0; }
.cm-course-row-name { font-weight: 700; color: var(--text); }
.cm-course-row-sub  { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.cm-course-row-chev { color: var(--muted); font-size: 1.6rem; line-height: 1; }

/* 1-18 grid: square-ish cells, generous tap targets. The hole number is pinned
   top-left and gets a shadow so it stays legible over any photo. */
.cm-hole-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2); margin-top: var(--s-2);
}
.cm-cell {
  position: relative; aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--border); border-radius: var(--r-md);
  background: var(--surface-2); overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cm-cell.has-img { border-style: solid; }
.cm-cell:active { transform: scale(.98); }
.cm-cell-num {
  position: absolute; top: 4px; left: 6px; z-index: 2;
  font-weight: 900; font-size: 1.05rem; color: var(--text);
  text-shadow: 0 1px 3px var(--surface);
}
.cm-cell.has-img .cm-cell-num { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.cm-cell-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cell-plus { font-size: 1.9rem; color: var(--muted); font-weight: 300; }

.cm-detail-actions { display: grid; gap: var(--s-2); margin-top: var(--s-3); }

/* =========================================================
   Branding: Home banner + header character mascot
   - Banner replaces the old circular logo on Home.
   - Character sits at the top-left of the persistent header
     strip on every page EXCEPT Home (Home already carries the
     banner, so the strip stays clean there). Visibility keys
     off body[data-page], which setPage() already maintains.
   ========================================================= */
.home-hero-banner {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.strip-left {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.header-character {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  display: none;            /* hidden on Home (default) */
}
body:not([data-page="home"]) .header-character { display: block; }

/* =========================================================
   Scorecard course line + hole-map (card page)
   ========================================================= */
/* Course name + city/ST, shown only on the card strip, to the left of Hole/Par.
   Different type treatments give the line visual variety. */
.strip-course { display: none; min-width: 0; overflow: hidden; }
body[data-page="card"] .strip-course {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
  overflow: hidden;
}
.strip-course .sc-name {
  font-weight: 900;
  font-size: .86rem;
  letter-spacing: -.01em;
  color: var(--text);
  max-width: 42vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip-course .sc-loc {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Hole map below the legend: stats flank a centered image that scales to fit
   without changing orientation. Tapping opens the full-screen view. */
.card-holemap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.chm-empty {
  width: 100%;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  padding: var(--s-2) 0;
}
.chm-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 0 0 auto;
  min-width: 54px;
}
.chm-right { align-items: flex-end; text-align: right; }
.chm-stat { line-height: 1.04; }
.chm-v {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.chm-l {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chm-hint { font-size: .68rem; font-style: italic; color: var(--muted); }
.chm-img-btn {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chm-img {
  display: block;
  max-width: 100%;
  max-height: 46vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* Full-screen hole-map viewer */
body.holemap-open { overflow: hidden; }
.holemap-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) var(--s-3) calc(env(safe-area-inset-bottom) + var(--s-3));
}
.hmv-top {
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.8rem, 1.4rem + 3vw, 3rem);
  padding: var(--s-3) 0 var(--s-2);
  letter-spacing: .02em;
}
.hmv-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hmv-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
}
.hmv-close {
  margin-top: var(--s-3);
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}
.hmv-close:active { filter: brightness(.92); }