/* Copyright © 2025 Benjamin Bringgren. All rights reserved. Unauthorised copying or distribution is prohibited. */
    *, *::before, *::after { box-sizing: border-box; }
    html { height: 100%; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      padding: 0;
      max-width: 520px; margin: auto;
      font-size: 15px; color: #222; line-height: 1.4;
      background: #f5f4f0;
    }
    #appShell {
      width: 100%;
      background: #f5f4f0;
    }
    label { display: block; margin-top: 10px; font-weight: 600; font-size: 15px; color: #444; }
    input[type="number"], select {
      width: 100%; padding: 10px 12px; margin: 4px 0 8px; font-size: 17px;
      border: none; border-radius: 6px; background: #f0efeb;
      font-family: inherit; color: #222;
      appearance: auto; -webkit-appearance: auto;
    }
    button {
      width: 100%; padding: 20px; margin: 12px 0; font-size: 16px; font-weight: 600;
      background: #1a1a1a; color: white; border: none; border-radius: 8px; cursor: pointer;
      font-family: inherit;
    }
    @media (hover: hover) { button:hover { background: #333; } }

    /* ── Tab bar ───────────────────────────────────────────── */
    .tab-bar {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 900;
      background: rgba(249, 248, 246, 0.92);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border-top: 0.5px solid rgba(0,0,0,0.1);
      border-bottom: none;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: env(safe-area-inset-bottom);
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
    }
    .tab-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 16px 0;
      background: none;
      border: none;
      border-bottom: none;
      margin: 0;
      cursor: pointer;
      border-radius: 0;
      color: #aaa;
      font-size: 13px;
      font-weight: 500;
      transition: color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) { .tab-btn:hover { background: none; color: #555; } }
    .tab-btn.active { color: #1a1a1a; border-bottom-color: transparent; }
    .tab-btn svg path,
    .tab-btn svg circle,
    .tab-btn svg line,
    .tab-btn svg ellipse,
    .tab-btn svg polyline { stroke: #aaa; }
    .tab-btn.active svg path,
    .tab-btn.active svg circle,
    .tab-btn.active svg line,
    .tab-btn.active svg ellipse,
    .tab-btn.active svg polyline { stroke: #1a1a1a; }
    .tab-btn .tab-icon-bag { fill: #aaa; }
    .tab-btn.active .tab-icon-bag { fill: #1a1a1a; }
    #paneHome, #panePlay, #panePrepare { display: none; }
    #paneHome.active {
      display: flex; flex-direction: column; gap: 0;
      padding: 0;
      background: #f5f4f0;
    }
    #panePlay.active {
      display: flex; flex-direction: column; gap: 8px;
      padding: calc(10px + env(safe-area-inset-top)) 12px calc(77px + env(safe-area-inset-bottom) + 110px) 12px;
    }
    #panePrepare.active {
      display: block;
      padding-top: env(safe-area-inset-top);
      padding-bottom: calc(77px + env(safe-area-inset-bottom));
    }
    #calcView > .card { margin: 0; border-radius: 12px; }
    #calcView > .collapsible { margin: 0; }
    #calcView > .gps-warning { margin: -4px 0 0; font-size: 12px; }
    #calcView > #calcButton { margin-top: 0; }
    #calcView > .collapsible + .gps-row { margin-top: 0; }
    #calcButton { margin: 0; width: 100%; border-radius: 11px; padding: 20px; font-size: 17px; }
    #calcButton.course-active { display: none; }
    #playBodyPad { padding: 0; display: flex; flex-direction: column; gap: 8px; }

    /* ── Course picker ──────────────────────────────────────── */
    .load-course-btn {
      display: none !important;
      position: fixed;
      bottom: calc(6px + 49px + 6px + env(safe-area-inset-bottom));
      left: 0; right: 0;
      align-items: center; justify-content: center; gap: 7px;
      padding: 26px 14px;
      background: #1a1a1a !important; border: none; border-radius: 0;
      color: #fff !important; font-size: 17px; font-weight: 700;
      cursor: pointer; width: 100%; box-sizing: border-box;
      z-index: 850;
    }
    .load-course-btn.visible { display: flex; }
    .load-course-btn svg { stroke: #fff !important; }
    @media (hover: hover) { .load-course-btn:hover { background: #333 !important; } }
    .load-course-btn.is-pressed { background: #333 !important; }

    /* Sheet overlay */
    .course-picker-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.35); z-index: 1500;
      align-items: flex-end;
    }
    .course-picker-overlay.open { display: flex; }
    .course-picker-sheet {
      background: #fffffe; border-radius: 16px 16px 0 0;
      width: 100%; max-height: 70vh; overflow-y: auto;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .course-picker-handle {
      width: 36px; height: 4px; background: #dedad4; border-radius: 2px;
      margin: 10px auto 4px;
    }
    .course-picker-title {
      padding: 8px 16px 10px; font-size: 16px; font-weight: 700; color: #1a1a1a;
    }
    .course-picker-row {
      display: flex; align-items: center; padding: 12px 16px;
      border-top: 0.5px solid #f1efe9; gap: 12px;
    }
    .course-picker-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: #1a1a1a; flex-shrink: 0;
    }
    .course-picker-dot.unplayed { background: #ccc; }
    .course-picker-info { flex: 1; min-width: 0; }
    .course-picker-name {
      font-size: 15px; font-weight: 700; color: #1a1a1a;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .course-picker-meta { font-size: 12px; color: #888; margin-top: 2px; }
    .course-picker-play {
      background: #1a1a1a !important; color: #fff !important; border: none;
      border-radius: 7px; padding: 17px 18px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      flex-shrink: 0; width: auto; margin: 0;
    }
    @media (hover: hover) { .course-picker-play:hover { background: #333 !important; } }
    .course-picker-cancel {
      display: block; width: 100%; padding: 18px;
      text-align: center; font-size: 15px; color: #888 !important;
      border: none; background: #fff !important; cursor: pointer;
      border-top: 0.5px solid #f1efe9; margin: 0; border-radius: 0 !important;
    }
    @media (hover: hover) { .course-picker-cancel:hover { background: #f5f5f5 !important; color: #555 !important; } }
    .course-picker-empty {
      padding: 24px 16px; text-align: center;
      font-size: 15px; color: #aaa;
    }
    /* ── Course picker format selector ──────────────────────── */
    /* ── Game format cards ───────────────────────────────────── */
    .picker-fmt-header {
      display: flex; align-items: center; gap: 7px;
      padding: 12px 16px 10px;
      font-size: 13px; font-weight: 700; color: #555;
      text-transform: uppercase; letter-spacing: 0.4px;
    }
    .picker-fmt-header svg { width: 15px; height: 15px; flex-shrink: 0; }
    .picker-fmt-card {
      display: flex; align-items: center; gap: 14px;
      margin: 0 16px 8px; padding: 14px 14px;
      border: 1.5px solid #dedad4; border-radius: 12px;
      background: #fff; cursor: pointer;
      transition: border-color 0.15s;
    }
    .picker-fmt-card.selected { border-color: #1a1a1a; }
    @media (hover: hover) { .picker-fmt-card:hover { border-color: #aaa; } }
    .picker-fmt-card.is-pressed { border-color: #aaa; }
    .picker-fmt-card-info { flex: 1; }
    .picker-fmt-card-name { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }
    .picker-fmt-card-desc { font-size: 13px; color: #888; line-height: 1.35; }
    .picker-fmt-radio {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid #dedad4;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.15s;
    }
    .picker-fmt-card.selected .picker-fmt-radio { border-color: #1a1a1a; }
    .picker-fmt-radio-dot {
      width: 11px; height: 11px; border-radius: 50%;
      background: transparent; transition: background 0.15s;
    }
    .picker-fmt-card.selected .picker-fmt-radio-dot { background: #1a1a1a; }
    /* ── Handicap toggle ─────────────────────────────────────── */
    .picker-hcp-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 16px 14px;
    }
    .picker-hcp-label { font-size: 15px; color: #555; }
    .picker-hcp-switch {
      position: relative; flex-shrink: 0;
      width: 51px; height: 31px; border-radius: 16px;
      border: none; padding: 0; background: #dedad4;
      cursor: pointer; transition: background 0.2s, opacity 0.2s;
    }
    .picker-hcp-switch::after {
      content: ''; position: absolute;
      top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      transition: transform 0.2s;
    }
    .picker-hcp-switch.active { background: #1a1a1a; }
    .picker-hcp-switch.active::after { transform: translateX(20px); }
    .picker-hcp-switch.dimmed { opacity: 0.35; pointer-events: none; }

    /* ── My Golf sub-page system ───────────────────────────── */
    .mg-sub { display: none; }
    .mg-sub.active { display: block; background: #f5f4f0; }
    .mg-hub { display: block; }
    .mg-hub.hidden { display: none; }

    /* Hub header — image strip */
    .mg-hub-header {
      position: relative; overflow: hidden;
      height: calc(130px + env(safe-area-inset-top));
    }
    .mg-hub-header > img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center center;
      display: block;
    }
    .mg-hub-header-overlay {
      position: absolute; bottom: 28px; left: 0; right: 0;
      display: flex; align-items: center; gap: 12px;
      padding: 0 16px 14px;
    }
    .mg-hub-header h2 { margin: 0; font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
    .mg-hub-header p  { margin: 3px 0 0; font-size: 13px; color: rgba(255,255,255,0.8); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }

    /* Sub-page header — dark */
    .mg-sub-header {
      background: #1a1a1a; padding: 14px 16px 13px;
      display: flex; align-items: center; gap: 10px;
    }
    .mg-back-btn {
      background: none; border: none; color: rgba(255,255,255,0.6);
      font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px 0 0;
      font-weight: 300; width: auto; margin: 0;
    }
    @media (hover: hover) { .mg-back-btn:hover { background: none; color: #fff; } }
    .mg-sub-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }

    /* Hub menu card */
    .mg-hub { background: #f5f4f0; min-height: 100vh; }
    .mg-menu-card {
      margin: 12px 12px 0;
      background: #fff; border: 0.5px solid rgba(0,0,0,0.07); border-radius: 12px;
      overflow: hidden;
    }
    .mg-menu-row {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 14px; border-bottom: 0.5px solid #f1efe9; cursor: pointer;
    }
    .mg-menu-row:last-child { border-bottom: none; }
    .mg-menu-row.is-pressed { background: #f5f4f0; }
    .mg-menu-icon {
      width: 42px; height: 42px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .mg-menu-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0; }
    .mg-menu-sub   { font-size: 12px; color: #888; margin: 2px 0 0; }
    .mg-menu-arrow { margin-left: auto; color: #bbb; font-size: 17px; font-weight: 300; }

    .mg-baseline-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; padding: 4px 0; }
    .mg-baseline-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .mg-baseline-num { font-size: 11px; font-weight: 500; color: #888; }
    .mg-baseline-dot { width: 100%; aspect-ratio: 1; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
    .mg-baseline-dot.none  { background: #f0efeb; }
    .mg-baseline-dot.under { background: #E1F5EE; }
    .mg-baseline-dot.even  { background: #f0efeb; }
    .mg-baseline-dot.over1 { background: #FAEEDA; }
    .mg-baseline-dot.over2 { background: #F5C4B3; }
    .mg-baseline-dot.over3 { background: #F09595; }
    .mg-baseline-delta { font-size: 11px; font-weight: 600; line-height: 1; }
    .mg-baseline-dot.none  .mg-baseline-delta { color: #bbb; font-size: 11px; }
    .mg-baseline-dot.under .mg-baseline-delta { color: #085041; }
    .mg-baseline-dot.even  .mg-baseline-delta { color: #888; }
    .mg-baseline-dot.over1 .mg-baseline-delta { color: #633806; }
    .mg-baseline-dot.over2 .mg-baseline-delta { color: #712B13; }
    .mg-baseline-dot.over3 .mg-baseline-delta { color: #791F1F; }
    .mg-baseline-rounds { font-size: 11px; line-height: 1; }
    .mg-baseline-dot.none  .mg-baseline-rounds { color: #ccc; }
    .mg-baseline-dot.under .mg-baseline-rounds { color: #0F6E56; }
    .mg-baseline-dot.even  .mg-baseline-rounds { color: #aaa; }
    .mg-baseline-dot.over1 .mg-baseline-rounds { color: #854F0B; }
    .mg-baseline-dot.over2 .mg-baseline-rounds { color: #993C1D; }
    .mg-baseline-dot.over3 .mg-baseline-rounds { color: #A32D2D; }
    .mg-baseline-legend { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; flex-wrap: wrap; }
    .mg-baseline-legend-item { display: flex; align-items: center; gap: 5px; }
    .mg-baseline-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
    .mg-baseline-legend-lbl { font-size: 11px; color: #888; }
    .mg-par-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; padding: 0 2px 2px; }
    .mg-par-tile { background: #f5f4f0; border-radius: 10px; padding: 14px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .mg-par-val { font-size: 28px; font-weight: 500; color: #1a1a1a; line-height: 1; margin: 0; }
    .mg-par-lbl { font-size: 11px; font-weight: 500; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
    .mg-par-sub { font-size: 12px; color: #888; margin: 0; }
    .mg-par-sub.pos { color: #3a6fc4; }
    .mg-par-sub.neg { color: #c0392b; }
    .lrh-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 0.5px solid #f2f1ee; }
    .lrh-row:last-child { border-bottom: none; }
    .lrh-course { font-size: 15px; font-weight: 600; color: #1a1a1a; }
    .lrh-date { font-size: 12px; color: #aaa; margin-top: 2px; }
    .lrh-right { text-align: right; }
    .lrh-score { font-size: 17px; font-weight: 700; color: #1a1a1a; }
    .lrh-diff { font-size: 13px; font-weight: 600; margin-top: 1px; }
    .mg-breakdown-card { background: #fff; border-radius: 12px; border: 0.5px solid rgba(0,0,0,0.08); overflow: hidden; }
    .mg-breakdown-title { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px 8px; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
    .mg-breakdown-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.05); }
    .mg-breakdown-row:last-child { border-bottom: none; }
    .mg-breakdown-label { font-size: 13px; font-weight: 400; color: #1a1a1a; flex: 1; }
    .mg-breakdown-bar-wrap { flex: 1; height: 8px; background: #f0efeb; border-radius: 4px; overflow: hidden; }
    .mg-breakdown-bar { height: 100%; border-radius: 4px; }
    .mg-breakdown-pct { font-size: 13px; font-weight: 700; color: #1a1a1a; width: 40px; text-align: right; flex-shrink: 0; }
    .mg-breakdown-val { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-left: auto; }

    /* Section labels inside sub-pages */
    .mg-section-lbl {
      font-size: 11px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.4px;
      padding: 14px 14px 6px;
    }

    .mg-chart-strip {
      display: flex; border-top: 0.5px solid rgba(0,0,0,0.05);
    }
    .mg-chart-strip-item {
      flex: 1; padding: 12px 0; text-align: center;
      border-right: 0.5px solid rgba(0,0,0,0.05);
    }
    .mg-chart-strip-item:last-child { border-right: none; }
    .mg-chart-strip-val { font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1; }
    .mg-chart-strip-lbl { font-size: 11px; color: #ccc; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

    /* Bag sub-page carry bars */
    .mg-carry-card {
      margin: 0 12px 12px; background: #fff;
      border: 0.5px solid rgba(0,0,0,0.07); border-radius: 12px; overflow: hidden;
    }
    .mg-carry-row {
      display: flex; align-items: center; padding: 9px 14px;
      border-bottom: 0.5px solid #f1efe9; gap: 10px;
    }
    .mg-carry-row:last-child { border-bottom: none; }
    .mg-carry-name { font-size: 15px; font-weight: 700; color: #1a1a1a; min-width: 44px; }
    .mg-carry-bar-wrap { flex: 1; height: 6px; background: #ede9e3; border-radius: 3px; overflow: hidden; }
    .mg-carry-bar      { height: 100%; background: #555; border-radius: 3px; }
    .mg-carry-val { font-size: 13px; color: #888; min-width: 50px; text-align: right; }

    /* Profile sub-page */
    .mg-profile-avatar {
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; font-weight: 700; color: #fff;
      flex-shrink: 0; margin-right: 12px;
    }
    .mg-hub-header-text { flex: 1; }
    .mg-profile-field { margin: 0 12px 10px; }
    .mg-profile-label {
      font-size: 11px; font-weight: 700; color: #888;
      text-transform: uppercase; letter-spacing: 0.4px;
      margin-bottom: 5px; display: block;
    }
    .mg-profile-input {
      width: 100%; box-sizing: border-box;
      padding: 10px 12px; font-size: 15px;
      border: 0.5px solid #dedad4; border-radius: 9px;
      background: #fffffe; color: #1a1a1a;
    }
    .mg-profile-input:focus { outline: none; border-color: #1a1a1a; }
    .mg-hcp-row { display: flex; gap: 8px; }
    .mg-hcp-row .mg-profile-input { flex: 1; }
    .mg-profile-save-btn {
      display: block; margin: 4px 12px 16px;
      padding: 17px; background: #1a1a1a;
      border: none; border-radius: 9px;
      text-align: center; font-size: 17px; font-weight: 700;
      color: #fff; cursor: pointer; width: calc(100% - 24px);
    }
    .mg-profile-save-btn.is-pressed { background: #333; }

    /* Edit bag button */
    .mg-edit-btn {
      display: block; margin: 0 12px 12px;
      padding: 17px; background: #f0efeb;
      border: none; border-radius: 9px;
      text-align: center; font-size: 16px; font-weight: 700;
      color: #1a1a1a; cursor: pointer;
    }
    .mg-edit-btn.is-pressed { background: #e8e6e1; }

    /* Prepare tab (legacy — keep for course editor) */
    .prepare-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .prepare-header h2 {
      font-size: 17px; font-weight: 700; color: #333; margin: 0;
    }
    .course-list { margin-bottom: 12px; margin-top: 16px; }
    .course-item {
      display: flex; align-items: stretch; justify-content: space-between;
      padding: 0; border: none; border-radius: 10px;
      margin-bottom: 8px; background: #ffffff; cursor: default;
      overflow: hidden;
    }
    .course-item-info {
      padding: 11px 14px; flex: 1; cursor: pointer;
    }
    .course-item-name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
    .course-item-meta { font-size: 13px; color: #888; margin-top: 2px; }
    .course-item-actions {
      display: flex; align-items: stretch; gap: 0; flex-shrink: 0;
      border-left: 1px solid rgba(0,0,0,0.07);
    }
    .course-action-btn {
      font-size: 15px; padding: 8px 14px; border-radius: 0;
      border: none; border-left: 1px solid rgba(0,0,0,0.07);
      background: transparent; color: #1a1a1a;
      cursor: pointer; width: auto; margin: 0;
      display: flex; align-items: center;
    }
    .course-action-btn:first-child { border-left: none; }
    @media (hover: hover) { .course-action-btn:hover { background: rgba(0,0,0,0.05); } }
    .course-action-btn.danger { color: #c0392b; }
    @media (hover: hover) { .course-action-btn.danger:hover { background: rgba(0,0,0,0.05); color: #a32d2d; } }
    /* ── iOS touch target minimums ───────────────────────────── */
    .course-action-btn { min-height: 42px; padding: 11px 16px; }
    /* hole-cell sizing controlled by main rule below */
    .collapsible-header { min-height: 42px; }
    /* gps-btn height handled by main rule */
    /* .wind-strip-btn touch target handled in main rule */
    .course-bar-btn { width: 42px; height: 42px; }




    /* Course editor */
    .course-editor {
      border: 1px solid #ece9e4; border-radius: 10px;
      background: #fffffe; overflow: hidden; margin-bottom: 12px;
    }
    .course-editor-header {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; border-bottom: 1px solid #e0ddd8;
    }
    .course-editor-header input {
      flex: 1; font-size: 16px; font-weight: 600; border: none;
      outline: none; padding: 4px 0; color: #333; margin: 0; width: auto;
      background: transparent;
    }
    .course-editor-cancel {
      padding: 12px 16px; font-size: 15px; font-weight: 600;
      background: #f0efeb; color: #888; border: none;
      border-radius: 7px; cursor: pointer; width: auto; margin: 0; flex-shrink: 0;
    }
    @media (hover: hover) { .course-editor-cancel:hover { background: #f9f8f6; color: #555; } }
    .course-editor-save {
      font-size: 15px; padding: 12px 16px; border-radius: 5px;
      border: none; background: #1a1a1a; color: #fff;
      cursor: pointer; width: auto; margin: 0; flex-shrink: 0;
    }
    @media (hover: hover) { .course-editor-save:hover { background: #333; } }

    /* ── Scorecard — shared across editor, summary, saved rounds ── */
    .scorecard {
      width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed;
    }
    .scorecard th {
      background: #f0efeb; padding: 8px 6px; text-align: center;
      font-weight: 600; color: #555; border-bottom: 1px solid #e0ddd8;
      font-size: 12px;
    }
    .scorecard th.sc-th-hole {
      background: #1a1a1a; color: #fff; width: 48px;
    }
    .scorecard th.sc-th-par {
      background: #f0efeb; border-right: 1.5px solid #e0ddd8; width: 64px;
    }
    .scorecard th.sc-th-len { width: 80px; }
    .scorecard td {
      padding: 8px 6px; text-align: center; vertical-align: middle;
      border-bottom: 0.5px solid #e0ddd8;
    }
    .scorecard tr:last-child td { border-bottom: none; }
    .scorecard .sc-hole {
      background: #1a1a1a; color: #fff;
      font-weight: 700; font-size: 15px; width: 48px;
    }
    .scorecard .sc-par {
      background: #f0efeb; color: #666; font-size: 15px; font-weight: 600;
      border-right: 1.5px solid #e0ddd8; width: 64px;
    }
    .scorecard .sc-section td {
      background: #f0efeb; color: #555; font-weight: 700;
      padding: 5px 8px; font-size: 12px; letter-spacing: 0.5px;
      text-align: left; text-transform: uppercase;
      border-top: 1px solid #e0ddd8; border-bottom: 1px solid #e0ddd8;
    }
    .scorecard .sc-section .sc-hole {
      background: #444; color: #fff;
    }
    .scorecard .sc-total td {
      background: #f0efeb; font-weight: 700; font-size: 13px;
      border-top: 1.5px solid #e0ddd8;
    }
    .scorecard .sc-total .sc-hole { background: #333; }
    .scorecard .sc-total .sc-par  { background: #f0efeb; }
    .scorecard .sc-total .sc-hole { font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; }
    /* Editor inputs */
    .scorecard input[type="number"] {
      width: 100%; padding: 6px 4px; font-size: 15px; text-align: center;
      border: 1px solid #ece9e4; border-radius: 4px; margin: 0;
    }
    .scorecard select {
      width: 100%; padding: 6px 20px 6px 4px; font-size: 15px;
      border: 1px solid #ece9e4; border-radius: 4px; margin: 0;
      appearance: auto; -webkit-appearance: auto;
    }
    .scorecard .note-input {
      width: 100%; padding: 6px 8px; font-size: 15px;
      border: 1px solid #ece9e4; border-radius: 4px; margin: 0;
      font-family: inherit; resize: none; color: #555; min-height: 36px;
    }
    /* Score pills */
    .sc-pill {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%;
      font-size: 13px; font-weight: 700;
    }
    .sc-pill.hole-in-one { background: #f5c400; color: #7a5800; border-radius: 50%; }
    .sc-pill.eagle  { background: #f07020; color: #fff; border-radius: 50%; }
    .sc-pill.birdie { background: #c0392b; color: #fff; border-radius: 50%; }
    .sc-pill.par    { background: #f0efeb; color: #444; border-radius: 50%; }
    .sc-pill.bogey  { background: #3a6fc4; color: #fff; border-radius: 4px; }
    .sc-pill.double { background: #1a3a7a; color: #fff; border-radius: 4px; }
    /* Strategy label */
    .sc-strategy            { font-size: 12px; font-weight: 600; color: #a05a5a; }
    .sc-strategy.balanced   { color: #986840; }
    .sc-strategy.safe       { color: #347a50; }
    /* ── Segmented control ───────────────────────────────────── */
    
    .load-course-btn { margin-top: 10px; }

    /* ── Course header (redesign v3) ───────────────────────────── */
    .course-bar {
      background: #fff; margin-bottom: 0;
      overflow: hidden; font-size: 15px;
      border: 0.5px solid rgba(0,0,0,0.07);
      border-radius: 12px;
    }
    .course-bar-header {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 16px 16px 10px;
    }
    .course-bar-name-wrap { flex: 1; min-width: 0; }
    .course-bar-name {
      font-size: 1.35rem; font-weight: 700; color: #111;
      letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .course-bar-hole-row {
      display: flex; align-items: baseline; gap: 8px; margin-top: 1px;
    }
    .course-bar-hole-num {
      font-size: 34px; font-weight: 700; color: #1a1a1a;
      line-height: 1; letter-spacing: -1px;
    }
    .course-bar-hole-meta {
      font-size: 15px; font-weight: 400; color: #aaa;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .course-bar-note {
      font-size: 13px; color: #555;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
    }
    .course-bar-right {
      display: flex; flex-direction: column; align-items: flex-end;
      gap: 8px; flex-shrink: 0; padding-top: 2px;
    }
    .course-bar-actions { display: flex; gap: 5px; }
    .course-bar-btn {
      background: #f0efeb; color: #555;
      border: none; border-radius: 8px; cursor: pointer; flex-shrink: 0;
      font-size: 17px; padding: 0; width: 42px; height: 42px; margin: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .course-bar-btn.is-pressed { background: #e5e3df; }
    .course-bar-btn.dismiss { color: #bbb; }
    .course-bar-stats { display: flex; align-items: center; gap: 8px; }
    .cbs-item { text-align: right; }
    .cbs-label {
      font-size: 11px; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.4px; line-height: 1;
    }
    .cbs-val { font-size: 28px; font-weight: 700; color: #1a1a1a; line-height: 1; }
    .cbs-val.score-over  { color: #1a1a1a; }
    .cbs-val.score-under { color: #c0392b; }
    .cbs-val.score-even  { color: #1a1a1a; }
    .cbs-divider { width: 1px; height: 26px; background: rgba(0,0,0,0.1); flex-shrink: 0; }

    /* ── Hole grid — 2×9 front/back inside header ──────────── */
    .hole-grid-wrap { padding: 0 12px 14px; background: #fff; }
    .hole-grid-half-label {
      font-size: 11px; color: #bbb;
      text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 2px 3px;
    }
    .hole-grid {
      display: grid; grid-template-columns: repeat(9, 1fr);
      gap: 3px; margin-bottom: 5px;
    }
    .hole-cell {
      text-align: center; padding: 8px 2px 6px; border-radius: 5px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      background: #f0efeb; color: #1a1a1a;
      line-height: 1.1; transition: background 0.1s; border: none;
    }
    .hole-cell-par {
      display: block; font-size: 11px; font-weight: 400;
      color: #aaa; margin-top: 1px;
    }
    @media (hover: hover) { .hole-cell:hover { background: #e5e3df; } }
    .hole-cell.current { background: #1a1a1a; color: #fff; }
    .hole-cell.current .hole-cell-par { color: rgba(255,255,255,0.5); }
    .hole-cell.score-hole-in-one { background: #f5c400; color: #7a5800; }
    .hole-cell.score-eagle   { background: #f07020; color: #fff; }
    .hole-cell.score-birdie  { background: #c0392b; color: #fff; }
    .hole-cell.score-birdie .hole-cell-par { color: rgba(255,255,255,0.6); }
    .hole-cell.score-par     { background: #f0efeb; color: #888; }
    .hole-cell.score-bogey   { background: #3a6fc4; color: #fff; }
    .hole-cell.score-bogey .hole-cell-par { color: rgba(255,255,255,0.6); }
    .hole-cell.score-double  { background: #1a3a7a; color: #fff; }
    .hole-cell.current.score-hole-in-one,
    .hole-cell.current.score-birdie,
    .hole-cell.current.score-eagle,
    .hole-cell.current.score-par,
    .hole-cell.current.score-bogey,
    .hole-cell.current.score-double { background: #1a1a1a; color: #fff; }

    /* Round summary */
    /* ── Round summary scorecard (in-round) ─────────────────── */
    .round-summary {
      border-top: 0.5px solid rgba(0,0,0,0.07); padding: 0;
      display: none; background: #fff;
    }
    .round-summary.visible { display: block; }
    .round-summary .vs-under { color: #c0392b; font-weight: 700; }
    .round-summary .vs-over  { color: #1a1a1a; font-weight: 700; }
    .round-summary .vs-even  { color: #1a1a1a; }
    .round-summary .save-round-btn { margin: 10px 12px; width: calc(100% - 24px); }

    /* Override all scorecard green with clean white/light design */
    .round-summary .scorecard {
      font-size: 13px; background: #fff;
    }
    .round-summary .scorecard thead th {
      background: #f5f4f0 !important; color: #aaa !important;
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.4px; padding: 6px 4px; border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
    }
    .round-summary .scorecard td {
      color: #1a1a1a; font-size: 13px; padding: 9px 4px;
      border-bottom: 0.5px solid rgba(0,0,0,0.06) !important;
      background: #fff !important;
    }
    .round-summary .scorecard tr:last-child td { border-bottom: none !important; }
    /* Hole number column — dark pill */
    .round-summary .scorecard .sc-hole {
      background: #f0efeb !important; color: #1a1a1a !important;
      font-size: 12px; font-weight: 700; width: 32px;
      border-right: none !important;
    }
    /* Par column */
    .round-summary .scorecard .sc-par {
      background: #fff !important; color: #888 !important;
      border-right: 0.5px solid rgba(0,0,0,0.08) !important;
    }
    /* Section header rows (FRONT 9 / BACK 9) */
    .round-summary .scorecard .sc-section td {
      background: #f5f4f0 !important; color: #555 !important;
      font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
      text-transform: uppercase; padding: 5px 8px !important;
      border-top: none !important; border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
    }
    .round-summary .scorecard .sc-section .sc-hole {
      background: #f5f4f0 !important; color: #555 !important;
    }
    /* Total rows (OUT / IN / TOTAL) */
    .round-summary .scorecard .sc-total td {
      background: #f5f4f0 !important; font-weight: 700; font-size: 12px;
      border-top: 0.5px solid rgba(0,0,0,0.1) !important;
      border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
      color: #1a1a1a !important;
    }
    .round-summary .scorecard .sc-total .sc-hole {
      background: #e5e3df !important; color: #1a1a1a !important;
    }
    .round-summary .scorecard .sc-total .sc-par {
      background: #f5f4f0 !important; color: #888 !important;
    }

    /* ── Round complete overlay ─────────────────────────────── */
    .rc-body { max-width: 420px; margin: 0 auto; width: 100%; padding-bottom: 40px; }
    .rc-header { position: relative; overflow: hidden; height: 110px; position: sticky; top: 0; z-index: 1; background: #1a1a1a; }
    .rc-header > img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
    .rc-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%); pointer-events: none; }
    .rc-header-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px 14px; z-index: 1; color: #fff; }
    .rc-header-title { font-size: 17px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
    .rc-header-sub { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 3px; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
    .rc-section { background: #fff; margin: 12px 12px 0; border-radius: 10px; overflow: hidden; }
    .rc-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #888; padding: 12px 14px 6px; }
    .rc-hero { text-align: center; padding: 18px 14px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.07); }
    .rc-hero-score { font-size: 34px; font-weight: 700; line-height: 1; }
    .rc-hero-sub { font-size: 13px; color: #888; margin-top: 5px; }
    .rc-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .rc-stat-cell { text-align: center; padding: 10px 6px 12px; border-right: 0.5px solid rgba(0,0,0,0.07); }
    .rc-stat-cell:last-child { border-right: none; }
    .rc-stat-val { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1; }
    .rc-stat-lbl { font-size: 11px; color: #888; margin-top: 4px; font-weight: 500; letter-spacing: 0.2px; }
    .rc-breakdown-row { display: flex; padding: 9px 14px; border-bottom: 0.5px solid rgba(0,0,0,0.06); align-items: center; gap: 8px; }
    .rc-breakdown-row:last-child { border-bottom: none; }
    .rc-bd-label { font-size: 13px; color: #888; width: 70px; flex-shrink: 0; }
    .rc-bd-dots { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
    .rc-bd-count { font-size: 13px; font-weight: 700; color: #1a1a1a; min-width: 20px; text-align: right; }
    .rc-table { width: 100%; font-size: 12px; border-collapse: collapse; }
    .rc-table th { background: #f5f4f0; color: #888; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 5px; text-align: center; border-bottom: 0.5px solid rgba(0,0,0,0.08); }
    .rc-table td { padding: 8px 5px; text-align: center; border-bottom: 0.5px solid rgba(0,0,0,0.06); color: #1a1a1a; }
    .rc-table tr:last-child td { border-bottom: none; }
    .rc-hole { background: #f0efeb; font-weight: 700; font-size: 11px; }
    .rc-sect td { background: #f5f4f0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #666; padding: 4px 5px !important; }
    .rc-total td { background: #f5f4f0; font-weight: 700; font-size: 11px; border-top: 0.5px solid rgba(0,0,0,0.1) !important; }
    .rc-btn-row { display: flex; gap: 10px; padding: 14px 12px 0; }
    .rc-btn-primary { flex: 1; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; height: 56px; font-size: 15px; font-weight: 700; cursor: pointer; }
    .rc-btn-secondary { flex: 1; background: #f0efeb; color: #333; border: none; border-radius: 8px; height: 56px; font-size: 15px; font-weight: 600; cursor: pointer; }
    .rc-btn-delete { display: flex; align-items: center; justify-content: center; width: calc(100% - 28px); margin: 10px 14px 14px; background: none; color: #c00; border: 0.5px solid rgba(204,0,0,0.25); border-radius: 8px; height: 44px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s; text-align: center; }
    .rc-btn-delete.is-pressed { background: rgba(204,0,0,0.07); transform: scale(0.98); }
    .rc-footnote { text-align: center; font-size: 12px; color: #aaa; padding: 10px 0 4px; }
    .score-entry-title {
      font-size: 13px; font-weight: 700; color: #888;
      text-transform: uppercase; letter-spacing: 0.5px;
      margin-bottom: 10px;
    }
    .score-row {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .score-row-label {
      font-size: 15px; color: #555; flex: 1;
    }
    .score-row-label .inprogress {
      font-size: 12px; color: #3377cc; font-style: italic;
    }
    .score-stepper {
      display: flex; align-items: center; gap: 6px;
    }
    .score-stepper-btn {
      width: 60px; height: 60px; margin: 0; padding: 0;
      font-size: 22px; line-height: 1; border-radius: 50%;
      background: #fffffe; color: #333; border: none;
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }
    @media (hover: hover) { .score-stepper-btn:hover { background: #f0efeb; } }
    .score-stepper-val {
      font-size: 22px; font-weight: bold; min-width: 32px;
      text-align: center; color: #222;
    }
    .score-total-row {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 10px; padding-top: 8px; border-top: 1px solid #e0ddd8;
      font-size: 15px;
    }
    .score-total-val { font-weight: bold; font-size: 17px; }
    .score-vs-par {
      font-size: 15px; font-weight: 600; padding: 2px 8px;
      border-radius: 4px;
    }
    .score-vs-par.under { background: #c0f0d4; color: #0f5c2e; }
    .score-vs-par.over  { background: #fff0f0; color: #c00; }
    .score-vs-par.even  { background: #f0efeb; color: #555; }

    /* New course button */
    .new-course-btn {
      width: 100%; padding: 17px; font-size: 15px; font-weight: 600;
      background: #fffffe; color: #555; border: 2px dashed #e0ddd8;
      border-radius: 10px; cursor: pointer; margin: 0; margin-top: 16px;
      transition: background 0.12s, border-color 0.12s;
    }
    @media (hover: hover) { .new-course-btn:hover { background: #f0efeb; border-color: #aaa; } }

    /* ── This Hole card ────────────────────────────────────── */
    .card {
      border: 0.5px solid rgba(0,0,0,0.07); border-radius: 12px;
      padding: 12px 14px; margin: 0; background: #fff;
    }
    .card-title {
      font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
      text-transform: uppercase; color: #888; margin-bottom: 8px;
    }
    .card .hole-manual-fields { display: block; }
    .card.course-active .hole-manual-fields { display: none; }
    .card.course-active #parChipGroup { display: none; }
    .card.course-active .hole-compact-summary { display: none; }
    .card.course-active { display: none; }
    .hole-compact-summary {
      display: none;
      align-items: center; gap: 6px; flex-wrap: wrap;
      font-size: 16px; font-weight: 600; color: #1a1a1a;
      margin-bottom: 10px;
    }
    .hole-compact-summary .hcs-conditions {
      margin-left: auto; font-size: 13px; font-weight: 400;
      color: #888; cursor: pointer; text-decoration: underline dotted;
    }
    .row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .row-2col label { margin-top: 0; }
    .row-2col select { margin-bottom: 0; }
    .conditions-wrap label { font-size: 15px; color: #444; font-weight: 600; }
    .conditions-wrap select {
      font-size: 17px; color: #222; border-color: #dedad4; background: #fffffe;
    }

    /* ── Collapsible section ───────────────────────────────── */
    .collapsible {
      border: 0.5px solid rgba(0,0,0,0.07) !important; border-radius: 12px;
      margin: 0; background: #fff !important; overflow: hidden;
    }
    .collapsible-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 14px; cursor: pointer; user-select: none;
      background: #fff; border-radius: 12px; min-height: 42px;
    }
    @media (hover: hover) { .collapsible-header:hover { background: #fafafa; } }
    .collapsible-header .col-title {
      font-size: 15px; font-weight: 600; color: #333;
    }
    .collapsible-header .col-summary {
      font-size: 13px; color: #888; margin-left: 8px; flex: 1;
    }
    .collapsible-header .col-chevron {
      font-size: 13px; color: #aaa; transition: transform 0.2s;
      flex-shrink: 0;
    }
    .collapsible.open .col-chevron { transform: rotate(180deg); }
    .collapsible-body {
      display: none; padding: 0;
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .collapsible.open .collapsible-body { display: block; }
    /* ── Wind strip icon tile ─────────────────────────────────── */
    .wind-strip-icon {
      width: 30px; height: 30px; border-radius: 8px;
      background: #f0f0ee; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0;
    }
    .wind-strip-icon svg path, .wind-strip-icon svg line {
      stroke: #185fa5; fill: none; stroke-width: 1.5; stroke-linecap: round;
    }

    /* ── Wind status bar ──────────────────────────────────────── */
    .wind-status-bar {
      background: #f0efeb; padding: 10px 14px;
      display: none; align-items: center; justify-content: space-between;
      border-bottom: 0.5px solid rgba(0,0,0,0.06);
    }
    .wind-status-bar.visible { display: flex; }
    .wsb-left { display: flex; flex-direction: column; gap: 2px; }
    .wsb-speed { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1; }
    .wsb-detail { font-size: 12px; color: #888; }
    .wsb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .wsb-badge {
      font-size: 11px; font-weight: 600; color: #1a1a1a;
      letter-spacing: 0.4px; text-transform: uppercase;
    }
    .wsb-location { font-size: 12px; color: #555; }

    /* ── Wind breakdown rows ──────────────────────────────────── */
    /* Wind breakdown — 2×2 stat grid */
    .wind-breakdown {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; padding: 10px 14px 4px;
    }
    .wind-breakdown-row {
      padding: 6px 0 10px;
    }
    .wind-breakdown-row:last-child { border-bottom: none; }
    .wbr-label {
      font-size: 11px; font-weight: 700; color: #bbb;
      text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; display: block;
    }
    .wbr-val { font-size: 17px; font-weight: 700; color: #1a1a1a; display: block; }
    .wbr-val.head { color: #c0392b; }
    .wbr-val.tail { color: #1e7a45; }
    .wbr-val.cross { color: #1a1a1a; }


    .club-list {
      margin: 10px 0; padding: 10px; border: 1px solid #dedad4; border-radius: 8px;
      max-height: 250px; overflow-y: auto;
    }
    .club-list strong { display: block; margin-bottom: 6px; }
    .club-item {
      display: flex; align-items: baseline; padding: 4px 0;
    }
    .club-item input[type="checkbox"] {
      width: 18px; height: 18px; flex-shrink: 0; margin: 0; cursor: pointer;
      position: relative; top: 2px;
    }
    .club-item label {
      display: inline; margin-top: 0; font-weight: normal; font-size: 16px;
      padding-left: 8px; flex-shrink: 0; cursor: pointer; white-space: nowrap;
    }
    .club-dots {
      flex: 1;
      border-bottom: 1px dotted #bbb;
      margin: 0 6px;
      position: relative; top: -3px;
    }
    .carry-tag {
      font-size: 13px; color: #666; flex-shrink: 0; white-space: nowrap; text-align: right;
    }
    .roll-note { font-size: 13px; color: #888; font-weight: normal; }
    .wind-delta { color: #2255aa; }
    .result {
      margin-top: 0; padding: 0; background: transparent;
      border-radius: 0; min-height: 40px; line-height: 1.7;
      border: none;
    }
    .error { color: #c00; }
    .tee-selector-row {
      display: flex; align-items: center; gap: 8px; margin-bottom: 4px; margin-top: 6px;
    }
    .tee-selector-row label {
      display: inline; margin: 0; font-weight: normal; font-size: 15px;
      color: #555; white-space: nowrap; flex-shrink: 0;
    }
    .tee-selector-row select {
      width: auto; padding: 3px 6px; font-size: 15px; margin: 0;
      border: 1px solid #bbb; border-radius: 4px; background: #fffffe; color: #333;
    }
    .forced-note { font-size: 13px; color: #888; font-style: italic; }
    .shot-done {
      color: #aaa; text-decoration: line-through;
      font-size: 15px; padding: 1px 0;
    }
    .shot-done-label {
      color: #1a1a1a; font-size: 13px; font-weight: bold; margin-left: 4px;
    }
    .tee-selector-locked {
      display: flex; align-items: center; gap: 6px;
      font-size: 15px; color: #888; margin-bottom: 4px; margin-top: 6px;
    }
    .tee-selector-locked .lock-icon { color: #aaa; }
    .tee-selector-locked .lock-club { font-weight: bold; color: #555; }
    .approach-line { margin-top: 2px; }
    .approach-rec {
      margin-top: 6px; padding: 7px 10px;
      background: #f0f9f4; border-left: 3px solid #1e7a45; border-radius: 4px;
      font-size: 15px; line-height: 1.5;
    }
    .approach-rec .rec-club { font-weight: bold; }
    .approach-rec .rec-note { font-size: 13px; color: #666; font-style: italic; display: block; margin-top: 2px; }
    .approach-rec .rec-warn { font-size: 12px; color: #a06000; display: block; margin-top: 3px; }
    .reset-banner {
      display: none; align-items: center; gap: 8px;
      margin-bottom: 10px; padding: 8px 12px;
      background: #fff8e6; border: 1px solid #e0c060;
      border-radius: 6px; font-size: 15px; color: #7a5500;
      cursor: pointer; transition: all 0.2s ease;
    }
    .reset-banner.visible { display: flex; }
    .reset-banner.dimmed {
      background: #f5f5f5; border-color: #dedad4;
      color: #aaa; cursor: default;
    }
    .crosswind-banner {
      margin-top: 6px; padding: 7px 10px;
      background: #fff5e0; border-left: 3px solid #e0a030;
      border-radius: 4px; font-size: 15px; line-height: 1.5; color: #7a4f00;
    }
    .crosswind-banner .cw-title { font-weight: bold; }
    .crosswind-banner .cw-note  { font-size: 13px; display: block; margin-top: 2px; color: #8a5f00; }

    /* ── Wind panel / collapsed action strip ───────────────── */
    .wind-strip {
      display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    }
    .wind-strip-text {
      font-size: 15px; color: #1a1a1a; flex: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-weight: 500;
    }
    .wind-strip-btn {
      font-size: 13px; color: #555; cursor: pointer;
      background: #f0f0ee; border: 1.5px solid transparent;
      border-radius: 7px; width: 42px; margin: 0;
      white-space: nowrap; flex-shrink: 0; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      padding: 0; height: 42px; min-height: 42px;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }
    @media (hover: hover) { .wind-strip-btn:hover { background: #e5e5e2; } }
    .wind-strip-btn.is-pressed { transform: scale(0.93); background: #d8d8d5; }
    .wind-strip-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
    .wind-strip-btn.locking { background: #e8f0fb !important; border-color: #185fa5 !important; color: #185fa5; }
    .wind-strip-btn.locked { background: #1a1a1a; border-color: transparent; }
    @keyframes wli-spin { to { transform: rotate(360deg); } }
    .wind-strip-btn .wli-needle { fill: #555; stroke: #555; }
    .wind-strip-btn .wli-stem   { stroke: #555; }
    .wind-strip-btn .wli-n      { stroke: #555; }
    .wind-strip-btn.locking .wli-needle { fill: #185fa5; stroke: #185fa5; }
    .wind-strip-btn.locking .wli-stem   { stroke: #185fa5; }
    .wind-strip-btn.locking .wli-n      { stroke: #185fa5; }
    .wind-strip-btn.locked .wli-needle { fill: #fff; stroke: #fff; }
    .wind-strip-btn.locked .wli-stem   { stroke: #fff; }
    .wind-strip-btn.locked .wli-n      { stroke: #fff; }
    .wind-strip-btn.locking #windLockIcon { animation: none; transition: transform 0.2s ease; }
    .wind-strip-btn.locked  #windLockIcon { transition: transform 0.3s ease; }

    /* Wind toggle — label is purely the track, outer div handles alignment */
    .wind-toggle-wrap { cursor: pointer; }
    .wind-toggle {
      display: flex; align-items: center;
      cursor: pointer; margin: 0;
    }
    .wind-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .wind-toggle-slider {
      position: relative; display: block;
      width: 44px; height: 26px;
      border-radius: 13px; background: #dedad4;
      transition: background 0.2s; flex-shrink: 0;
    }
    .wind-toggle-slider::before {
      content: ''; position: absolute;
      width: 22px; height: 22px; border-radius: 50%;
      background: #fff; top: 2px; left: 2px;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px #0003;
    }
    .wind-toggle input:checked + .wind-toggle-slider { background: #1a1a1a; }
    .wind-toggle input:checked + .wind-toggle-slider::before { transform: translateX(18px); }
    .wind-section-disabled { opacity: 0.45; pointer-events: none; }

    /* Compass — compact inline row */
        /* Expanded wind panel — compact layout */
    .compass-section {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .compass-label { display: none; }
    .compass-location { font-size: 11px; color: #aaa; padding: 6px 14px 2px; }
    .compass-svg-wrap {
      position: relative; width: 96px; height: 96px; flex-shrink: 0;
      cursor: grab; user-select: none;
      background: #f0efeb; border-radius: 50%; overflow: hidden;
    }
    .compass-svg-wrap:active { cursor: grabbing; }
    #compassSvg { width: 96px; height: 96px; transition: none; }
    .compass-deg-display { font-size: 22px; font-weight: 700; color: #185fa5; }
    .compass-deg-label { font-size: 12px; color: #888; margin-top: 2px; }
    .compass-lock-btn {
      padding: 0 14px; font-size: 13px; font-weight: 700;
      background: #1a1a1a !important; color: #fff !important;
      border: none; border-radius: 8px; height: 42px;
      cursor: pointer; width: auto; margin: 0; margin-left: auto;
      display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    }
    @media (hover: hover) { .compass-lock-btn:hover { background: #333 !important; } }
    .compass-lock-btn:disabled { background: #888 !important; cursor: default; }

    .wind-breakdown {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; padding: 0;
    }
    .wind-breakdown-row { padding: 4px 0 5px; }
    .wind-breakdown-row:last-child { border-bottom: none; }
    .wbr-label {
      font-size: 11px; font-weight: 700; color: #bbb;
      text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 1px; display: block;
    }
    .wbr-val { font-size: 15px; font-weight: 700; color: #1a1a1a; display: block; }
    .wbr-val.head { color: #c0392b; }
    .wbr-val.tail { color: #1e7a45; }
    .wbr-val.cross { color: #1a1a1a; }

    .wind-effect-note {
      margin: 6px 12px 8px; font-size: 11px; color: #666;
      padding: 6px 10px; background: #f5f4f0;
      border-radius: 7px; display: none; line-height: 1.4;
    }
    .wind-effect-note.visible { display: block; }

    .wind-live-pill {
      display: none; align-items: center; gap: 4px;
      background: #f0f9f4; border-radius: 5px;
      padding: 2px 7px; font-size: 11px; font-weight: 600; color: #1e7a45;
    }
    .wind-live-pill.active { display: inline-flex; }
    .wind-live-dot {
      width: 5px; height: 5px; border-radius: 50%; background: #1e7a45;
      animation: pulse 1.2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

    .wind-effect-note {
      margin: 4px 14px 10px; font-size: 12px; color: #555;
      padding: 8px 12px; background: #f5f4f0;
      border-radius: 8px; display: none; line-height: 1.5;
    }
    .wind-effect-note.visible { display: block; }

    /* ── GPS Distance Tracker ───────────────────────────────── */
    /* ── GPS tiles ───────────────────────────────────────────── */
    .gps-row { display: flex; gap: 8px; }
    .gps-tile {
      flex: 1; background: #fff !important; border-radius: 10px;
      padding: 18px 12px; display: flex; align-items: center; gap: 9px;
      border: 0.5px solid rgba(0,0,0,0.07); cursor: pointer;
      color: inherit; font-size: inherit; font-weight: inherit;
      width: auto; margin: 0;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.12s;
    }
    .gps-tile.is-pressed { background: #f5f4f0; }
    .gps-tile-indicator {
      width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    }
    .gps-tile-indicator.idle { border: 1.5px solid #ccc; background: transparent; }
    .gps-tile-indicator.set  { background: #1e7a45; border: none; }
    .gps-tile-label { font-size: 15px; font-weight: 600; color: #1a1a1a; line-height: 1.2; }
    .gps-tile-status { font-size: 12px; color: #bbb; margin-top: 2px; line-height: 1.2; }
    .gps-tile-status.ready { color: #1e7a45; }
    .gps-tile-status.tap   { color: #1e7a45; }
    .gps-tile-dist {
      font-size: 15px; font-weight: 700; color: #1a1a1a;
      margin-left: auto; flex-shrink: 0;
    }
    .gps-tile-dist-unit { font-size: 11px; color: #aaa; font-weight: 400; }
    /* Keep old classes alive for JS that still refs them */
    .gps-btn { display: none !important; }
    .gps-ball-btn { display: none !important; }
    .gps-tee-confirmed { display: none; }
    .gps-reset-link {
      font-size: 12px; color: #aaa; cursor: pointer;
      text-decoration: underline dotted;
    }
    @media (hover: hover) { .gps-reset-link:hover { color: #c00; } }
    .gps-warning { font-size: 12px; color: #a06000; margin: 2px 0 4px; }

    /* ── Score FAB ───────────────────────────────────────────── */
    .score-fab {
      position: fixed; bottom: 24px; right: 20px; z-index: 1000;
      width: 72px; height: 72px; border-radius: 50%;
      background: #1a1a1a; color: #fff; border: none;
      font-size: 34px; font-weight: 700;
      box-shadow: 0 4px 16px #0004;
      cursor: pointer; display: none;
      align-items: center; justify-content: center;
      transition: background 0.15s, transform 0.15s;
      margin: 0; padding: 0; line-height: 1;
      font-family: inherit;
    }
    .score-fab.visible { display: flex; }
    @media (hover: hover) { .score-fab:hover { background: #333; transform: scale(1.06); } }
    .score-fab.has-score { background: #1a1a1a; font-size: 22px; }
    /* Inner wrapper — position:relative so .fab-dots (position:absolute) anchors correctly inside position:fixed on iOS Safari */
    .fab-inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
    /* Stableford extra-stroke dot overlay on FAB (upper-right corner) */
    .fab-badge {
      position: absolute; top: -4px; right: -4px;
      min-width: 24px; height: 24px; padding: 0 5px;
      border-radius: 12px; box-sizing: border-box;
      background: #1e7a45; color: #fff;
      font-size: 13px; font-weight: 700; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
    }

    /* ── Score drawer ────────────────────────────────────────── */
    .score-drawer-overlay {
      display: none; position: fixed; inset: 0; z-index: 999;
      background: rgba(0,0,0,0.45);
      transition: opacity 0.2s;
    }
    .score-drawer-overlay.visible { display: block; }

    .score-drawer {
      position: fixed; bottom: 0; right: 0; left: 0; z-index: 1000;
      background: #fffffe; border-radius: 18px 18px 0 0;
      box-shadow: 0 -4px 24px #0002;
      padding: 0 0 32px;
      transform: translateY(100%);
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
      touch-action: none;
      max-width: 520px; margin: 0 auto;
      height: min(640px, 90vh); display: flex; flex-direction: column; overflow: hidden;
    }
    .score-drawer.open { transform: translateY(0); }

    .score-drawer-handle-area {
      width: 100%; padding: 12px 0 6px;
      display: flex; align-items: center; justify-content: center;
      cursor: grab; touch-action: none; flex-shrink: 0;
    }
    .score-drawer-handle {
      width: 36px; height: 4px; border-radius: 99px;
      background: rgba(0,0,0,0.1); pointer-events: none;
    }
    .score-drawer-inner {
      padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0;
    }
    .score-drawer-title {
      font-size: 15px; font-weight: 700; color: #888;
      text-transform: uppercase; letter-spacing: 0.5px;
      margin-bottom: 14px;
    }

    /* ── Widget FAB ─────────────────────────────────────────── */
    .widget-fab {
      position: fixed; bottom: 24px; left: 20px; z-index: 996;
      width: 72px; height: 72px; border-radius: 50%;
      background: #1a1a1a; border: none;
      box-shadow: 0 4px 16px #0004;
      cursor: pointer; display: none;
      align-items: center; justify-content: center;
      transition: background 0.15s, transform 0.15s;
      margin: 0; padding: 0;
    }
    .widget-fab.visible { display: flex; }
    @media (hover: hover) { .widget-fab:hover { background: #333; transform: scale(1.06); } }

    /* ── Widget drawer ───────────────────────────────────────── */
    .widget-drawer-overlay {
      display: none; position: fixed; inset: 0; z-index: 995;
      background: rgba(0,0,0,0.45);
      transition: opacity 0.2s;
    }
    .widget-drawer-overlay.visible { display: block; }

    .widget-drawer {
      position: fixed; bottom: 0; right: 0; left: 0; z-index: 996;
      background: #f5f4f0; border-radius: 18px 18px 0 0;
      box-shadow: 0 -4px 24px #0002;
      padding: 0 0 32px;
      transform: translateY(100%);
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
      touch-action: none;
      max-width: 520px; margin: 0 auto;
      height: min(600px, 90vh); display: flex; flex-direction: column; overflow: hidden;
    }
    .widget-drawer.open { transform: translateY(0); }

    .widget-drawer-inner {
      flex: 1; overflow-y: auto; padding: 4px 12px 12px;
      display: flex; flex-direction: column; gap: 10px; min-height: 0;
    }

    /* ── Widget cards ────────────────────────────────────────── */
    .wd-card {
      background: #fff; border-radius: 12px;
      border: 0.5px solid rgba(0,0,0,0.07); overflow: hidden;
    }
    .wd-card-header {
      display: flex; align-items: center; gap: 10px;
      padding: 13px 14px;
    }
    .wd-card-icon {
      width: 28px; height: 28px; border-radius: 7px;
      background: #f0efeb; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; color: #555;
    }
    .wd-card-title {
      font-size: 15px; font-weight: 700; color: #1a1a1a; flex: 1;
    }
    .wd-card-hint {
      font-size: 12px; color: #aaa; flex-shrink: 0;
    }
    .wd-card-body {
      border-top: 0.5px solid rgba(0,0,0,0.06);
    }
    .wd-card-empty {
      padding: 12px 14px; font-size: 13px; color: #aaa;
    }

    /* Weather stats list */
    .wd-stat-list { padding: 4px 0 2px; }
    .wd-stat-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 14px;
      border-bottom: 0.5px solid rgba(0,0,0,0.05);
    }
    .wd-stat-row:last-child { border-bottom: none; }
    .wd-stat-label { font-size: 13px; color: #888; }
    .wd-stat-val   { font-size: 13px; font-weight: 600; color: #1a1a1a; }

    /* GPS tiles */
    .wd-gps-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; padding: 10px 10px 12px;
    }
    .wd-gps-tile {
      display: flex; align-items: center; gap: 10px;
      background: #f8f8f6; border-radius: 10px;
      padding: 10px 12px; margin: 4px;
    }
    .wd-gps-tile--marked { background: #edf6f0; }
    .wd-gps-tile--dim    { opacity: 0.45; }
    .wd-gps-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #ccc; flex-shrink: 0;
    }
    .wd-gps-dot--on { background: #1e7a45; }
    .wd-gps-label  { font-size: 11px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
    .wd-gps-status { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-top: 2px; }

    /* ── Scorecard full-page overlay ────────────────────────── */
    .scorecard-overlay {
      display: none; position: fixed; inset: 0; z-index: 1099;
      background: rgba(0,0,0,0.5);
    }
    .scorecard-overlay.visible { display: block; }

    .scorecard-page {
      position: fixed; inset: 0; z-index: 1100;
      background: #f5f4f0;
      transform: translateY(100%);
      transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .scorecard-page.open { transform: translateY(0); }

    .scorecard-page-handle-area {
      flex-shrink: 0;
      display: flex; justify-content: center; padding: 12px 0 6px;
      cursor: grab; touch-action: none;
    }
    .scorecard-page-handle {
      width: 36px; height: 4px; border-radius: 99px;
      background: rgba(0,0,0,0.15); pointer-events: none;
    }

    .scorecard-page-header {
      flex-shrink: 0;
      padding: 6px 20px 18px;
      border-bottom: 1px solid #e0ddd8;
      touch-action: none; cursor: grab;
      display: flex; align-items: center; gap: 12px;
    }
    .scorecard-page-header-text { flex: 1; min-width: 0; }
    .scorecard-page-title {
      font-size: 1.35rem; font-weight: 700; color: #111;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .scorecard-page-subtitle {
      font-size: 0.82rem; color: #888;
      margin-top: 4px; letter-spacing: 0.2px;
    }
    .sc2-close-btn {
      flex-shrink: 0;
      width: 32px; height: 32px; border-radius: 50%;
      background: #f0efeb; border: none; cursor: pointer;
      font-size: 14px; color: #555;
      display: flex; align-items: center; justify-content: center;
      touch-action: manipulation;
    }

    .scorecard-page-inner {
      flex: 1; overflow-y: auto;
      padding: 20px 12px 40px;
      -webkit-overflow-scrolling: touch;
    }

    /* ── Scorecard v2 design system (sc2-*) ──────────────────── */
    .sc2-section { margin-bottom: 24px; }
    .sc2-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .sc2-section-title { font-size: 17px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.01em; }
    .sc2-section-chip { font-size: 11px; font-weight: 700; color: #888; background: #f0efeb; border-radius: 6px; padding: 3px 10px; letter-spacing: 0.05em; text-transform: uppercase; }

    /* .sc2-card is the single grid container — subgrid guarantees pixel-perfect column alignment */
    .sc2-card { background: #fff; border-radius: 12px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.07); display: grid; grid-template-columns: 44px 1fr 1fr 28px 1px 1fr 1fr 1fr 1fr 1.4fr; }
    .sc2-stableford .sc2-card { grid-template-columns: 44px 1fr 1fr 28px 1px 1fr 1fr 1fr 1fr 1.4fr 1fr; }

    /* All row types span the full card and inherit its exact column positions */
    .sc2-col-hdr, .sc2-row, .sc2-sub { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }

    .sc2-col-hdr { padding: 9px 0; background: #f0efeb; border-bottom: 0.5px solid rgba(0,0,0,0.07); }
    .sc2-col-hdr > span { font-size: 10px; font-weight: 700; color: #888; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
    .sc2-col-hdr > span:first-child { text-align: left; padding-left: 14px; }
    .sc2-col-hdr .sc2-col-sep { background: transparent; }

    .sc2-row { height: 52px; align-items: center; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
    .sc2-row:last-of-type { border-bottom: none; }
    .sc2-row > div:first-child { padding-left: 14px; }

    .sc2-hole { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
    .sc2-hole--played   { background: #1a1a1a; color: #fff; }
    .sc2-hole--unplayed { background: #f0efeb; color: #888; }

    .sc2-par { text-align: center; font-size: 15px; font-weight: 500; color: #1a1a1a; }
    .sc2-idx { text-align: center; font-size: 13px; font-weight: 500; color: #888; }
    .sc2-hcp-dots-inner { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; align-content: center; max-width: 14px; }
    .sc2-hcp-dot { width: 6px; height: 6px; border-radius: 50%; background: #1e7a45; flex-shrink: 0; }
    .sc2-col-sep { background: rgba(0,0,0,0.1); align-self: stretch; }

    /* Hole-info group background tint (Hole, Par, Hcp, dots columns) */
    .sc2-row > div:nth-child(-n+4) { background: #f5f4f0; align-self: stretch; display: flex; align-items: center; justify-content: center; }
    .sc2-col-hdr > span:nth-child(-n+4) { background: none; }
    .sc2-sub--out > *:nth-child(-n+4),
    .sc2-sub--total > *:nth-child(-n+4) { background: rgba(0,0,0,0.15); }

    .sc2-score { display: flex; justify-content: center; align-items: center; }
    .sc2-score-dash { font-size: 15px; color: #aaa; }
    .sc2-badge { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
    .sc2-badge--ace    { border-radius: 50%; background: #f5c400; color: #7a5800; }
    .sc2-badge--eagle  { border-radius: 50%; background: #f07020; color: #fff; }
    .sc2-badge--birdie { border-radius: 50%; background: #c0392b; color: #fff; }
    .sc2-badge--par    { color: #444; font-weight: 500; }
    .sc2-badge--bogey  { border-radius: 5px; background: #3a6fc4; color: #fff; }
    .sc2-badge--double { border-radius: 5px; background: #1a3a7a; color: #fff; }

    .sc2-gir, .sc2-fir { display: flex; justify-content: center; align-items: center; }
    .sc2-fir--par3 { color: #ccc; font-size: 13px; }
    .sc2-dot { width: 12px; height: 12px; border-radius: 50%; }
    .sc2-dot--made { background: #1e7a45; }
    .sc2-dot--miss { border: 2px solid rgba(0,0,0,0.15); }
    .sc2-dot--none { border: 2px solid rgba(0,0,0,0.08); }

    .sc2-putts { text-align: center; font-size: 15px; color: #1a1a1a; }

    .sc2-total { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
    .sc2-total--under { color: #c0392b; }
    .sc2-total--over  { color: #1a1a1a; }
    .sc2-total--even  { color: #1a1a1a; }
    .sc2-total--none  { color: #aaa; }

    /* .sc2-total-col = last content column (running total / diff); carries the right-side gutter */
    .sc2-total-col { padding-right: 14px; text-align: center; }
    .sc2-stableford .sc2-total-col { padding-right: 0; }
    .sc2-stableford .sc2-pts { padding-right: 14px; }

    .sc2-sub { padding: 13px 0; align-items: center; }
    .sc2-sub > *:first-child { padding-left: 14px; }
    .sc2-sub--out   { background: #1a1a1a; }
    .sc2-sub--in    { background: #f0efeb; }
    .sc2-sub--total { background: #1a1a1a; }
    .sc2-sub--out .sc2-col-sep,
    .sc2-sub--total .sc2-col-sep { background: rgba(255,255,255,0.2); }
    .sc2-sub--in .sc2-col-sep { background: rgba(0,0,0,0.08); }

    .sc2-sub-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    .sc2-sub--out   .sc2-sub-lbl { color: rgba(255,255,255,0.5); }
    .sc2-sub--in    .sc2-sub-lbl { color: #888; }
    .sc2-sub--total .sc2-sub-lbl { color: rgba(255,255,255,0.5); }

    .sc2-sub-num { display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
    .sc2-sub--out   .sc2-sub-num { color: #fff; }
    .sc2-sub--in    .sc2-sub-num { color: #1a1a1a; }
    .sc2-sub--total .sc2-sub-num { color: #fff; }

    .sc2-sub-diff { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
    .sc2-sub--out   .sc2-sub-diff { color: #fff; }
    .sc2-sub--in    .sc2-sub-diff { color: #1a1a1a; }
    .sc2-sub--total .sc2-sub-diff { color: #fff; }

    .sc2-total-card { border-radius: 12px; overflow: hidden; margin-bottom: 20px; }

    .sc2-save-btn { width: 100%; margin-top: 20px; padding: 16px; font-size: 15px; font-weight: 600; background: #1a1a1a; color: #fff; border: none; border-radius: 10px; cursor: pointer; letter-spacing: 0.01em; }
    .sc2-save-btn:disabled { background: #aaa; color: #fff; cursor: default; }

    /* ── Stableford points column ────────────────────────────── */
    .sc2-pts { display: none; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: #1e7a45; }
    .sc2-stableford .sc2-pts { display: flex; }
    /* Summary rows: match font size of other sub-row numbers */
    .sc2-sub .sc2-pts { font-size: 17px; }

    /* ── Last round hint in course bar ──────────────────────── */
    .course-bar-last-round {
      padding: 8px 14px;
      font-size: 13px; color: #555;
      background: #f5f4f0;
      display: flex; align-items: center; gap: 6px;
      cursor: pointer; user-select: none;
      background: #f0efeb;
    }
    @media (hover: hover) { .course-bar-last-round:hover { background: #ebe9e4; } }
    .course-bar-last-round .lrh-label { color: #888; flex-shrink: 0; }
    .course-bar-last-round .lrh-score { font-weight: 700; color: #1e7a45; }
    .course-bar-last-round .lrh-score.over  { color: #c00; }
    .course-bar-last-round .lrh-score.even  { color: #555; }
    .course-bar-last-round .lrh-strategy { color: #888; font-size: 12px; }
    .course-bar-last-round .lrh-expand { margin-left: auto; color: #aaa; font-size: 12px; }

    /* ── Best strategy inline tag (course bar) ────────────────── */
    .hint-best-row {
      padding: 0 14px 10px; display: flex; align-items: center; gap: 6px;
    }
    .hint-best-label { font-size: 12px; color: #888; flex-shrink: 0; }
    .hint-best-tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 8px 3px 6px; border-radius: 6px;
      font-size: 12px; font-weight: 600; white-space: nowrap;
    }
    .hint-best-tag.aggressive { background: #f5e8e8; color: #5c2828; }
    .hint-best-tag.balanced   { background: #f5ede0; color: #5c3810; }
    .hint-best-tag.safe       { background: #d0ead0; color: #0f5c2e; }
    .hint-best-tag.par3       { background: #e8e8ec; color: #38383f; }
    .hint-best-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .hint-best-tag.aggressive .hint-best-dot { background: #a05a5a; }
    .hint-best-tag.balanced   .hint-best-dot { background: #986840; }
    .hint-best-tag.safe       .hint-best-dot { background: #347a50; }
    .hint-best-tag.par3       .hint-best-dot { background: #686870; }
    .hint-best-rounds { font-size: 12px; color: #aaa; flex-shrink: 0; }

    /* ── Strategy plan card (v3 — single card + switcher) ──── */
    .carousel-outer { overflow: hidden; margin: 0; padding: 0; background: #fff; border-radius: 12px; border: 0.5px solid rgba(0,0,0,0.07); }
    .carousel-track {
      display: block;
    }
    .carousel-card {
      border-radius: 12px; overflow: visible;
      border: none; background: #fff;
      box-shadow: none;
      height: auto; display: none;
    }
    .carousel-card.active-card { display: block; }
    .carousel-card.compare-card { flex: 0 0 100%; }

    /* Strategy type colours — Option 1: top border accent */
    .carousel-card.type-max-distance  { border-top: 3px solid #c0392b; }
    .carousel-card.type-controlled    { border-top: 3px solid #c07820; }
    .carousel-card.type-conservative  { border-top: 3px solid #1e7a45; }
    .carousel-card.type-custom        { border-top: 3px solid #888; }

    /* Header — now light, minimal */
    .cc-header { padding: 13px 14px 10px; cursor: pointer; user-select: none; }
    .cc-badge {
      font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.07em; margin-bottom: 5px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .cc-badge-length {
      font-size: 13px; font-weight: 500; text-transform: none;
      letter-spacing: 0; color: #bbb;
    }
    .cc-badge-length--editable {
      text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
    }
    .cc-badge-length-input {
      width: 48px; font-size: 13px; font-weight: 500; color: #bbb;
      border: none; border-bottom: 1px solid #bbb; background: transparent;
      text-align: right; outline: none; padding: 0;
    }
    .carousel-card.type-max-distance  .cc-badge { color: #c0392b; }
    .carousel-card.type-controlled    .cc-badge { color: #c07820; }
    .carousel-card.type-conservative  .cc-badge { color: #1e7a45; }
    .carousel-card.type-custom        .cc-badge { color: #888; }
    .cc-type { font-size: 11px; font-weight: 700; color: #1a1a1a; }
    .cc-score-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
    .cc-score-num { font-size: 34px; font-weight: 700; color: #1a1a1a; line-height: 1; letter-spacing: -0.5px; }
    .cc-score-vs  { font-size: 15px; color: #aaa; }
    .cc-sub  { font-size: 12px; color: #aaa; margin-top: 3px; }
    .cc-score-pill { display: none; }
    .cc-wind-pill {
      display: inline-flex; align-items: center;
      border-radius: 5px; padding: 3px 8px; margin-top: 6px;
      font-size: 12px; font-weight: 600;
      background: #f0f4ff; color: #555;
    }

    /* Shot rows */
    .cc-body { padding: 0 14px; border-top: 0.5px solid #f2f1ee; }
    .cc-section-divider {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 0 2px;
    }
    .cc-section-divider-line { flex: 1; height: 0.5px; background: #f2f1ee; }
    .cc-section-divider-label {
      font-size: 11px; color: #ccc; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .cc-shot-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 0.5px solid #f2f1ee;
    }
    .cc-shot-row:last-child { border-bottom: none; }
    .cc-shot-row.tee-shot { border-left: none; padding-left: 0; margin-left: 0; }
    .cc-shot-num {
      width: 42px; height: 42px; border-radius: 50%;
      font-size: 15px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .carousel-card.type-max-distance  .cc-shot-num { background: #fde8e8; color: #c0392b; }
    .carousel-card.type-controlled    .cc-shot-num { background: #fef3e2; color: #c07820; }
    .carousel-card.type-conservative  .cc-shot-num { background: #d4edda; color: #1e7a45; }
    .carousel-card.type-custom        .cc-shot-num { background: #f0f0f0; color: #888; }
    .cc-shot-lbl { font-size: 11px; color: #aaa; margin-bottom: 1px; }
    .cc-shot-lbl.tee-lbl { color: #aaa; font-weight: 400; }
    .cc-shot-club { font-size: 15px; font-weight: 700; color: #1a1a1a; }
    .cc-shot-wind { font-size: 11px; margin-top: 2px; }
    .cc-shot-wind.head { color: #c05000; }
    .cc-shot-wind.tail { color: #1e7a45; }
    .cc-shot-right { text-align: right; margin-left: auto; flex-shrink: 0; }
    .cc-shot-dist { font-size: 28px; font-weight: 700; color: #1a1a1a; line-height: 1; }
    .cc-shot-unit { font-size: 12px; color: #bbb; }
    .cc-shot-carry { font-size: 12px; color: #aaa; margin-top: 1px; }
    .cc-shot-done {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 0.5px solid #f2f1ee; opacity: 0.45;
    }
    .cc-shot-done-club { font-size: 13px; font-weight: 600; color: #aaa; text-decoration: line-through; }
    .cc-shot-done-badge { font-size: 11px; color: #1e7a45; font-weight: 700; margin-left: 6px; }
    .cc-shot-done-dist { font-size: 13px; color: #aaa; margin-left: auto; }

    /* Wind effect row */
    .cc-wind-effect {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 14px; margin: 0 -14px;
      background: #fafafa; border-top: 0.5px solid #f2f1ee;
      font-size: 13px;
    }
    .cc-wind-effect-text { color: #888; flex: 1; }
    .cc-wind-effect-val  { font-weight: 700; color: #c05000; }
    .cc-wind-effect-val.help { color: #1e7a45; }

    /* GPS remaining */
    .cc-gps-remaining {
      background: #f0f9f4; border-left: 3px solid #1e7a45;
      border-radius: 0 6px 6px 0; padding: 9px 14px;
    }
    .cc-gps-label { font-size: 11px; color: #1e7a45; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
    .cc-gps-dist { font-size: 22px; font-weight: 700; color: #1a1a1a; }

    /* Approach + crosswind */
    .cc-approach {
      background: #f8f8f6; padding: 10px 14px;
      border-top: 0.5px solid #f2f1ee;
    }
    .cc-app-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
    .cc-app-dist  { font-size: 22px; font-weight: 700; color: #185fa5; line-height: 1; margin-bottom: 3px; }
    .cc-app-dist-unit { font-size: 13px; color: #aaa; margin-left: 2px; }
    .cc-app-club  { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
    .cc-app-note  { font-size: 12px; color: #555; }
    .cc-crosswind {
      background: #fff8ec; border-left: 3px solid #e0a030;
      border-radius: 0 6px 6px 0; padding: 8px 14px;
      display: flex; align-items: center; gap: 8px;
    }
    .cc-crosswind-arrow { font-size: 17px; font-weight: 700; color: #7a4f00; flex-shrink: 0; }
    .cc-crosswind-text  { font-size: 13px; font-weight: 600; color: #7a4f00; }

    /* Tee chip row — alt club switcher */
    .tee-chip-row {
      padding: 8px 14px 10px;
      border-top: 0.5px solid #f2f1ee;
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .tee-chip-label { font-size: 11px; color: #bbb; flex-shrink: 0; }
    .tee-chips { display: flex; gap: 5px; flex-wrap: wrap; }
    .tee-chip {
      border: none; border-radius: 8px;
      padding: 0; background: #f5f4f0;
      cursor: pointer; font-size: 15px; font-weight: 600; color: #555;
      transition: background 0.1s, border-color 0.1s;
      height: 60px; width: 60px; flex-shrink: 0; margin: 0; user-select: none;
      display: inline-flex; align-items: center; justify-content: center;
    }
    @media (hover: hover) { .tee-chip:hover { background: #eeecea; } }
    .carousel-card.type-max-distance  .tee-chip.active { border: 1.5px solid #c0392b; background: #fde8e8; color: #c0392b; }
    .carousel-card.type-controlled    .tee-chip.active { border: 1.5px solid #c07820; background: #fef3e2; color: #c07820; }
    .carousel-card.type-conservative  .tee-chip.active { border: 1.5px solid #1e7a45; background: #d4edda; color: #1e7a45; }
    .carousel-card.type-custom        .tee-chip.active { border: 1.5px solid #888; background: #f0f0f0; color: #555; }
    .tee-chip.locked { opacity: 0.4; pointer-events: none; }
    .tee-chip.bag-chip { width: auto; padding: 0 16px; flex-shrink: 0; }
    .tee-chip.tee-chip-sm { width: 42px; height: 42px; font-size: 13px; }
    .tee-chip.tee-chip-sm.bag-chip { width: auto; height: 42px; min-height: 42px; padding: 0 12px; }
    .tee-chip-bag { display: flex; align-items: center; gap: 6px; }
    .tee-chip-bag svg { display: block; flex-shrink: 0; }
    .tee-chip-bag-label { font-size: 15px; font-weight: 600; color: #888; }
    .cc-tee-select { width: 100%; padding: 9px 10px; font-size: 15px; border: 1px solid #e0e0e0; border-radius: 6px; margin-top: 5px; background: #f9f8f6; color: #222; font-family: inherit; }
    /* ── Strategy footer strip ──────────────────────────────── */
    .cc-strat-footer { display: flex; border-top: 0.5px solid rgba(0,0,0,0.07); margin-top: 8px; }
    .cc-strat-btn {
      flex: 1; padding: 18px 4px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2px; cursor: pointer;
      border-right: 0.5px solid rgba(0,0,0,0.07);
      border-top: 2.5px solid transparent;
      background: #fafafa;
      -webkit-tap-highlight-color: transparent;
    }
    .cc-strat-btn:last-child { border-right: none; }
    .cc-strat-btn.active { background: #fff; }
    .cc-strat-btn-club { font-size: 16px; font-weight: 700; color: #ccc; }
    .cc-strat-btn-score { font-size: 13px; color: #ccc; }
    .cc-strat-btn.active .cc-strat-btn-club { color: inherit; }
    .cc-strat-btn.active .cc-strat-btn-score { color: #555; }
    .carousel-card.type-max-distance  .cc-strat-btn.active { border-top-color: #c0392b; color: #c0392b; }
    .carousel-card.type-controlled    .cc-strat-btn.active { border-top-color: #c07820; color: #c07820; }
    .carousel-card.type-conservative  .cc-strat-btn.active { border-top-color: #1e7a45; color: #1e7a45; }
    .carousel-card.type-custom        .cc-strat-btn.active { border-top-color: #888;    color: #555; }

    /* Detail expansion */
    .cc-detail { display: none; border-top: 0.5px solid #f2f1ee; padding: 10px 14px; }
    .cc-detail.open { display: block; }
    .cc-detail-lbl { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
    .cc-detail-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 0.5px solid #f2f1ee; font-size: 13px; }
    .cc-detail-row:last-child { border-bottom: none; }
    .cc-detail-key { color: #666; }
    .cc-detail-val { font-weight: 600; color: #1a1a1a; }

    /* Action row — replaces FAB */
    .play-action-row {
      position: fixed;
      bottom: calc(6px + 49px + 6px + env(safe-area-inset-bottom));
      left: 0; right: 0;
      padding: 0 12px 8px;
      z-index: 849;
      background: #f5f4f0;
    }
    .play-next-btn {
      background: #f0efeb !important; border-radius: 11px;
      padding: 22px 15px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; border: none; width: 100%; margin: 0; font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    @media (hover: hover) { .play-next-btn:hover { background: #e5e3df !important; } }
    .play-next-btn.is-pressed { background: #e5e3df !important; }
    .play-next-btn-text { color: #555 !important; }
    .play-next-btn-text { font-size: 16px; font-weight: 700; color: #555; }
    /* Compare table */
    .cc-compare-table {
      width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed;
    }
    .cc-compare-table th {
      font-size: 12px; font-weight: 700; color: #888;
      text-transform: uppercase; letter-spacing: 0.4px;
      padding: 8px 5px; text-align: center;
      border-bottom: 1px solid #ece9e4; background: #f9f8f6;
    }
    .cc-compare-table th:first-child { text-align: left; width: 82px; }
    .cc-compare-table th.active-col { background: #f9f8f6; }
    .cc-compare-table td {
      padding: 9px 5px; text-align: center; font-size: 15px;
      border-bottom: 0.5px solid #ece9e4; vertical-align: top;
    }
    .cc-compare-table td:first-child {
      text-align: left; font-size: 12px; font-weight: 600;
      color: #aaa; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .cc-compare-table td.active-col { background: #f9f8f6; }
    .cc-compare-table tr:last-child td { border-bottom: none; }
    .cc-compare-table .cv-primary {
      font-size: 16px; font-weight: 700; color: #a05a5a; display: block;
    }
    .cc-compare-table .cv-primary.balanced { color: #986840; }
    .cc-compare-table .cv-primary.safe     { color: #347a50; }
    .cc-compare-table .cv-club { font-size: 15px; font-weight: 600; color: #222; display: block; }
    .cc-compare-table .cv-dist { font-size: 13px; color: #888; display: block; }
    .cc-compare-table .cv-wind { font-size: 12px; color: #c05000; display: block; }
    .cc-delta-section {
      padding: 12px 14px 4px; border-bottom: 1px solid #ece9e4;
    }
    .cc-delta-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
    .cc-delta-row {
      display: flex; align-items: center; gap: 0; margin-bottom: 7px;
    }
    .cc-delta-name { width: 68px; font-size: 12px; color: #888; flex-shrink: 0; }
    .cc-delta-bar-wrap { flex: 1; display: flex; align-items: center; gap: 6px; }
    .cc-delta-bar { height: 7px; border-radius: 4px; min-width: 4px; }
    .cc-delta-val { font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; }
    .cc-delta-val.best { color: #1e7a45; }
    .cc-delta-insight {
      font-size: 12px; color: #888; margin-top: 4px; padding-top: 6px;
      border-top: 0.5px solid #ece9e4; margin-bottom: 8px;
    }
    .cc-compare-footer {
      padding: 10px 14px; border-top: 1px solid #ece9e4;
      background: #f9f8f6; text-align: center;
      font-size: 13px; color: #aaa;
    }

    /* wind-section-* rules removed — replaced by .wind-status-bar */

    /* ── Calculate button — context aware ───────────────────── */
    #calcButton { background: #1a1a1a; }
    @media (hover: hover) { #calcButton:hover { background: #333; } }
    #calcButton.course-active { display: none; }
    #panePlay { background: #f5f4f0; }
    #panePrepare.active { min-height: 100vh; }
    #playBodyPad { padding-top: 8px; }
    #gpsAndCondWrap { padding: 0 14px; margin-bottom: 2px; }
    .recalc-link {
      display: none; text-align: center; margin-top: 0; margin-bottom: 20px;
      font-size: 13px; color: #aaa;
    }
    .recalc-link.visible { display: block; }
    .recalc-link a {
      color: #555; text-decoration: underline dotted; cursor: pointer;
    }

    /* ── FABs — positioned above tab bar ────────────────────── */
    .score-fab {
      bottom: calc(77px + env(safe-area-inset-bottom) + 12px);
      right: 20px;
    }
    .widget-fab {
      bottom: calc(77px + env(safe-area-inset-bottom) + 12px);
      left: 20px;
    }

    /* ── Courses tab — course blocks ───────────────────────── */
    .course-block {
      border: none;
      border-radius: 12px;
      margin-bottom: 10px;
      overflow: hidden;
      background: #fff;
    }
    .course-hdr {
      background: #fffffe;
      padding: 13px 14px;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ece9e4;
    }
    .course-hdr-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
    .course-hdr-meta { font-size: 13px; color: #888; margin-top: 3px; }
    .course-hdr-arr  { font-size: 15px; color: #aaa; }
    .course-body     { display: none; background: #fffffe; }
    .course-block.open .course-body { display: block; }

    /* ── Subsection headers (Strategy history / Saved rounds) ── */
    .subsection-hdr {
      background: #f0efeb;
      padding: 9px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ece9e4;
      cursor: pointer;
      user-select: none;
    }
    .subsection-hdr-label {
      font-size: 12px; font-weight: 700; color: #555;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .subsection-hdr-arr { font-size: 12px; color: #aaa; }
    .strat-body { display: block; }
    .strat-body.collapsed { display: none; }

    /* ── Strategy history column headers ───────────────────── */
    .col-hdr-row {
      display: flex; align-items: center;
      padding: 7px 14px;
      border-bottom: 1px solid #ece9e4;
      background: #f9f8f6;
    }
    .ch-strat {
      flex: 1; padding-left: 38px;
      font-size: 12px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .ch-avg {
      width: 44px; text-align: right;
      font-size: 12px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .ch-gap  { width: 20px; }
    .ch-rnd  {
      width: 44px; text-align: right;
      font-size: 12px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .ch-sp   { width: 20px; }

    /* ── Hole rows ─────────────────────────────────────────── */
    .hole-row {
      display: flex; align-items: center;
      padding: 9px 14px;
      border-bottom: 1px solid #ece9e4;
      cursor: pointer; user-select: none;
      background: #fffffe;
    }
    .hole-row.nodata { cursor: default; }
    @media (hover: hover) { .hole-row:hover:not(.nodata) { background: #f9f8f6; } }
    .hole-num {
      width: 28px; height: 28px; border-radius: 7px;
      background: #1a1a1a; color: #fff;
      font-size: 13px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .hole-num.nd { background: #dedad4; color: #aaa; }
    .hole-pill-wrap { flex: 1; padding-left: 10px; }
    .hole-avg { width: 44px; text-align: right; font-size: 15px; font-weight: 700; }
    .hole-avg.good { color: #1e7a45; }
    .hole-avg.bad  { color: #c00; }
    .hole-avg.even { color: #555; }
    .hole-avg.nd   { color: #ccc; }
    .ch-gap-data   { width: 20px; }
    .hole-rnd  { width: 44px; text-align: right; font-size: 13px; color: #aaa; }
    .hole-arr  { width: 20px; text-align: right; font-size: 12px; color: #ccc; }

    /* ── Hole expand detail ────────────────────────────────── */
    .hole-detail {
      display: none;
      background: #f9f8f6;
      border-bottom: 1px solid #ece9e4;
      padding: 10px 14px 12px;
    }
    .hole-detail.open { display: block; }
    .detail-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
    .detail-table th {
      color: #888; font-weight: 700; padding: 4px 6px;
      text-align: right; border-bottom: 1px solid #ece9e4;
      font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    }
    .detail-table th:first-child { text-align: left; }
    .detail-table td {
      padding: 6px; text-align: right;
      border-bottom: 1px solid #ece9e4; color: #444;
    }
    .detail-table td:first-child { text-align: left; font-weight: 700; }
    .detail-table tr:last-child td { border-bottom: none; }
    .dt-good { color: #1e7a45; font-weight: 700; }
    .dt-bad  { color: #c00;    font-weight: 700; }
    .dt-even { color: #555;    font-weight: 700; }
    .best-badge {
      display: inline-block; padding: 1px 5px; border-radius: 3px;
      font-size: 11px; font-weight: 700;
      background: #d0ead0; color: #0f5c2e;
      margin-left: 4px; vertical-align: middle;
    }

    /* ── Front/Back 9 divider ──────────────────────────────── */
    .nine-divider {
      background: #f0efeb;
      border-top: 1px solid #ece9e4;
      border-bottom: 1px solid #ece9e4;
      padding: 5px 14px;
      font-size: 12px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.05em;
    }

    /* ── Strategy / round pills — rectangular ──────────────── */
    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 12px; font-weight: 700;
    }
    .pill.par3       { background: #e8e8ec; color: #38383f; white-space: nowrap; }
    .pill.aggressive { background: #f5e8e8; color: #5c2828; }
    .pill.balanced   { background: #f5ede0; color: #5c3810; }
    .pill.safe       { background: #d0ead0; color: #0f5c2e; }
    .pill.long   { background: #d0ead0; color: #0f5c2e; }
    .pill.medium { background: #f5ede0; color: #5c3810; }
    .pill.short  { background: #f5e8e8; color: #5c2828; }

    /* ── Saved rounds ──────────────────────────────────────── */
    .rounds-section { border-top: 2px solid #ece9e4; }
    .round-stat-bar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      border-bottom: 0.5px solid rgba(0,0,0,0.07);
      background: #f9f8f6;
    }
    .round-stat-cell {
      text-align: center; padding: 10px 6px 11px;
      border-right: 0.5px solid rgba(0,0,0,0.07);
    }
    .round-stat-cell:last-child { border-right: none; }
    .round-stat-val { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1; }
    .round-stat-val.good { color: #1e7a45; }
    .round-stat-val.info { color: #185fa5; }
    .round-stat-lbl { font-size: 11px; color: #888; margin-top: 4px; font-weight: 500; letter-spacing: 0.2px; text-transform: uppercase; }
    .round-meta { font-size: 12px; color: #aaa; margin-top: 2px; }
    .rh-course-hdr {
      padding: 13px 14px 10px; background: #fff;
      border-bottom: 0.5px solid rgba(0,0,0,0.07);
    }
    .rh-course-name { font-size: 17px; font-weight: 700; color: #1a1a1a; }
    .rh-course-meta { font-size: 12px; color: #888; margin-top: 3px; }
    .round-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 16px; border-bottom: 0.5px solid rgba(0,0,0,0.07);
      cursor: pointer; user-select: none; background: #fff;
    }
    @media (hover: hover) { .round-row:hover { background: #f9f8f6; } }
    .round-left { flex: 1; min-width: 0; }
    .round-date  { font-size: 15px; font-weight: 600; color: #1a1a1a; }
    .round-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .round-holes { font-size: 12px; color: #aaa; }
    .round-score { font-size: 22px; font-weight: 700; color: #1a1a1a; }
    .round-score.under { color: #c0392b; }
    .round-arr   { font-size: 12px; color: #ccc; width: 16px; text-align: right; }
    .round-detail {
      display: none;
      background: #f9f8f6;
      border-bottom: 1px solid #ece9e4;
      padding: 12px 14px;
    }
    .round-detail.open { display: block; }
    .show-more {
      text-align: center; padding: 10px 14px;
      font-size: 13px; color: #555; font-weight: 600;
      border-top: 1px solid #ece9e4; cursor: pointer;
    }
    @media (hover: hover) { .show-more:hover { background: #f9f8f6; } }

    /* ── Round scorecard table ─────────────────────────────── */
    .sc-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
    .sc-table th {
      background: #f5f4f0; padding: 6px 4px; text-align: center;
      font-weight: 700; color: #aaa; font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.4px;
      border-bottom: 0.5px solid rgba(0,0,0,0.08);
    }
    .sc-table th:first-child  { width: 32px; }
    .sc-table th:nth-child(2) { border-right: 0.5px solid rgba(0,0,0,0.08); width: 36px; }
    .sc-table th:nth-child(3) { width: 52px; }
    .sc-table th:nth-child(4) { width: 44px; }
    .sc-table th:nth-child(5) { width: 36px; }
    .sc-table th:nth-child(6) { width: 36px; }
    .sc-table th.sc-strategy { text-align: left; padding-left: 8px; }
    .sc-table td.sc-strategy { text-align: left; padding-left: 8px; }
    .sc-table th.sc-pts { text-align: center; }
    .sc-table td.sc-pts { text-align: center; }
    .sc-table td {
      padding: 9px 4px; text-align: center; vertical-align: middle;
      border-bottom: 0.5px solid rgba(0,0,0,0.06);
      color: #1a1a1a; background: #fff; font-size: 13px;
    }
    .sc-table td:first-child {
      background: #f0efeb; color: #1a1a1a; font-weight: 700; font-size: 12px;
    }
    .sc-table td:nth-child(2) {
      background: #fff; color: #888; font-size: 13px; font-weight: 400;
      border-right: 0.5px solid rgba(0,0,0,0.08);
    }
    .sc-table .sc-section td {
      background: #f5f4f0; color: #555; font-weight: 700;
      padding: 5px 8px; font-size: 11px; letter-spacing: 0.4px;
      text-align: left; text-transform: uppercase;
      border-bottom: 0.5px solid rgba(0,0,0,0.08);
    }
    .sc-table .sc-section td:first-child { background: #f5f4f0; color: #555; }
    .sc-table .sc-total td {
      background: #f5f4f0; font-weight: 700; font-size: 12px; color: #1a1a1a;
      border-top: 0.5px solid rgba(0,0,0,0.1);
      border-bottom: 0.5px solid rgba(0,0,0,0.08);
    }
    .sc-table .sc-total td:first-child { background: #e5e3df; color: #1a1a1a; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; }
    .sc-table .sc-total td:nth-child(2) { background: #f5f4f0; color: #888; }
    .score-pill {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 50%;
      font-size: 13px; font-weight: 700;
    }
    .sp-hole-in-one { background: #f5c400; color: #7a5800; border-radius: 50%; }
    .sp-eagle  { background: #f07020; color: #fff; border-radius: 50%; }
    .sp-birdie { background: #c0392b; color: #fff; border-radius: 50%; }
    .sp-par    { background: #f0efeb; color: #444; border-radius: 50%; }
    .sp-bogey  { background: #3a6fc4; color: #fff; border-radius: 4px; }
    .sp-double { background: #1a3a7a; color: #fff; border-radius: 4px; }

    /* ── Wind offline / manual entry ────────────────────────────────── */
    .wind-offline-msg {
      display: none; padding: 10px 14px 4px;
      font-size: 15px; color: #a05000;
      background: #fff8ec; border-bottom: 1px solid #f0d090;
    }
    .wind-offline-msg.visible { display: block; }
    .wind-manual-entry {
      display: none; gap: 10px; align-items: flex-end; flex-wrap: wrap;
      padding: 10px 14px 10px; border-bottom: 0.5px solid rgba(0,0,0,0.06);
    }
    .wind-manual-entry.visible { display: flex; }
    .wind-manual-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 100px; }
    .wind-manual-field label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 0.4px; margin: 0; }
    .wind-manual-field input, .wind-manual-field select {
      padding: 8px 10px; font-size: 16px; border: none;
      border-radius: 6px; background: #f0efeb; color: #222;
      font-family: inherit; width: 100%; margin: 0;
    }
    .wind-manual-apply {
      padding: 12px 16px; font-size: 15px; font-weight: 700;
      background: #1a1a1a; color: #fff; border: none; border-radius: 6px;
      cursor: pointer; white-space: nowrap; width: auto; margin: 0; flex-shrink: 0;
    }
    @media (hover: hover) { .wind-manual-apply:hover { background: #333; } }

    /* ── Club picker modal ───────────────────────────────────── */
    .club-picker-overlay {
      display: none; position: fixed; inset: 0; z-index: 1100;
      background: rgba(0,0,0,0.45);
    }
    .club-picker-overlay.open { display: block; }
    .club-picker-sheet {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 1101;
      background: #fffffe; border-radius: 18px 18px 0 0;
      padding-bottom: env(safe-area-inset-bottom);
      max-height: 75vh; display: flex; flex-direction: column;
      max-width: 520px; margin: 0 auto;
      transform: translateY(100%);
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .club-picker-sheet.open { transform: translateY(0); }
    .club-picker-handle-area {
      padding: 14px 0 8px; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
    }
    .club-picker-handle {
      width: 36px; height: 4px; border-radius: 2px; background: #ece9e4;
    }
    .club-picker-title {
      font-size: 13px; font-weight: 700; color: #888;
      text-transform: uppercase; letter-spacing: 0.5px;
      text-align: center; padding: 0 16px 12px; flex-shrink: 0;
    }
    .club-picker-list {
      overflow-y: auto; flex: 1; padding: 0 16px 16px;
      -webkit-overflow-scrolling: touch;
    }
    /* ── Club picker disabled state ──────────────────────────── */
    .club-picker-item.disabled { opacity: 0.4; pointer-events: none; cursor: default; }
    .club-picker-item.disabled .cpi-name { color: #888; }
    .club-picker-not-recommended { font-size: 11px; color: #aaa; margin-top: 2px; }
    .club-picker-section-label {
      font-size: 11px; font-weight: 600; color: #aaa;
      text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 0 4px;
    }

    .club-picker-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 0; border-bottom: 0.5px solid #ece9e4;
      cursor: pointer; min-height: 60px;
    }
    .club-picker-item:last-child { border-bottom: none; }
    .club-picker-item.is-pressed { background: #f9f8f6; }
    .club-picker-item.active { background: #f0efeb; }
    .cpi-name { font-size: 17px; font-weight: 600; color: #222; }
    .club-picker-item.active .cpi-name { color: #1a1a1a; }
    .cpi-dist { font-size: 15px; color: #888; }
    .cpi-check {
      width: 22px; height: 22px; border-radius: 50%;
      background: #1a1a1a; display: none;
      align-items: center; justify-content: center; flex-shrink: 0;
    }
    .club-picker-item.active .cpi-check { display: flex; }
    .cpi-check svg { display: block; }


    /* ── Custom tee override indicators ─────────────────────── */
    .cc-custom-badge {
      display: inline-block; font-size: 11px; font-weight: 600;
      background: #e8f4ff; color: #185fa5;
      border-radius: 4px; padding: 1px 6px; margin-left: 6px;
      vertical-align: middle; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .cc-custom-clear {
      font-size: 12px; color: #555; text-decoration: underline dotted;
      cursor: pointer; margin-top: 3px; display: inline-block;
    }
    @media (hover: hover) { .cc-custom-clear:hover { color: #1a1a1a; } }



    /* ── Carousel dot indicator ──────────────────────────────── */
    .carousel-dots {
      display: flex; justify-content: center; align-items: center;
      gap: 6px; padding: 10px 0 16px;
    }
    .carousel-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #ccc; transition: background 0.2s, width 0.2s;
      cursor: pointer;
    }
    .carousel-dot.active {
      width: 18px; border-radius: 3px; background: #888;
    }

/* ── Par & Conditions chips ─────────────────────────────── */
    .chip-control-grid { display: none; }
    .chip-control-row { display: flex; gap: 6px; }
    .chip-control-btn {
      background: #eeede9 !important; border: none !important;
      border-radius: 7px; padding: 0; width: 42px; height: 42px; flex-shrink: 0;
      font-size: 13px; font-weight: 600; color: #999 !important;
      cursor: pointer; font-family: inherit;
      margin: 0; line-height: 1;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.1s, color 0.1s, border-color 0.1s;
    }
    .chip-control-btn.active { border-color: #1a1a1a !important; color: #1a1a1a !important; background: #e5e5e5 !important; }
    .chip-control-label { display: none; }

    
    /* type-par3 now uses type-custom — no separate header bg */


    /* ── Tee club tag — appears next to strategy pill ─────── */
    .strat-club-tag {
      display: inline-block;
      font-size: 11px; font-weight: 600;
      color: #888;
      margin-left: 5px;
      vertical-align: middle;
      white-space: nowrap;
    }


  /* ── First-run splash overlay ───────────────────────────────────────── */
  #splashOverlay {
    position: fixed; inset: 0; z-index: 3000;
    background: #f5f4f0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  #splashOverlay.hidden { display: none; }
  #splashImg {
    width: 100%; height: auto;
    flex-shrink: 0; display: block;
  }
  #splashBody {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 28px 24px; gap: 14px;
  }
  #splashTitle { font-size: 22px; font-weight: 700; color: #1a1a1a; }
  #splashLabel { font-size: 15px; color: #555; text-align: center; }
  #splashInputRow { display: flex; align-items: center; gap: 8px; }
  #splashDriverInput {
    font-size: 22px; width: 110px; text-align: center;
    border: 1.5px solid #ccc; border-radius: 10px; padding: 10px 8px;
    -moz-appearance: textfield; appearance: textfield;
  }
  #splashDriverInput::-webkit-inner-spin-button,
  #splashDriverInput::-webkit-outer-spin-button { -webkit-appearance: none; }
  #splashInputRow span { font-size: 17px; color: #555; }
  #splashStartBtn {
    width: 100%; max-width: 280px; padding: 16px;
    background: #2a6e3f; color: #fff; border: none; border-radius: 12px;
    font-size: 17px; font-weight: 600; cursor: pointer;
  }
  #splashStartBtn:disabled { opacity: 0.4; }
  #splashHint { font-size: 13px; color: #999; text-align: center; }

  /* ── Score entry mode toggle (score drawer) ─────────────────────────── */
  .sh-mode-row { display:flex; align-items:center; justify-content:space-between; padding:12px 18px 8px; gap:12px; }
  .sh-mode-label { font-size:13px; color:#888; flex-shrink:0; }
  .score-mode-toggle { display:flex; gap:4px; }
  .score-mode-btn { padding:6px 14px; background:none; border:none; font-size:13px; color:#aaa; cursor:pointer; border-radius:8px; }
  .score-mode-btn.active { color:#1a1a1a; font-weight:600; }

  /* ── Score drawer — Direction 2.1 tile grid ──────────────────────────── */
  @keyframes popIn { 0% { transform:scale(0.82);opacity:0; } 70% { transform:scale(1.06); } 100% { transform:scale(1);opacity:1; } }
  @keyframes d2SlideUp { from { transform:translateY(36px);opacity:0; } to { transform:translateY(0);opacity:1; } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  .d2-header { padding:12px 18px 0; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-shrink:0; }
  .d2-header-text { font-size:11px; font-weight:700; letter-spacing:0.09em; color:#c0bab3; text-transform:uppercase; }
  .d2-badges { display:flex; gap:6px; min-height:28px; align-items:center; flex-wrap:wrap; padding:0 18px 10px; flex-shrink:0; }
  .d2-badge { height:26px; padding:0 9px; border-radius:999px; border:none; font-size:11px; font-weight:700; display:flex; align-items:center; gap:3px; cursor:pointer; -webkit-tap-highlight-color:transparent; width:auto; margin:0; }
  .d2-badge-short { font-size:11px; opacity:0.5; }
  .d2-tile-area { flex:1; padding:0 14px 10px; display:flex; flex-direction:column; gap:7px; min-height:0; }
  .d2-tile-row { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .d2-tile { margin:0; border-radius:20px; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:0 0 14px 16px; transition:background 0.13s; overflow:hidden; -webkit-tap-highlight-color:transparent; }
  .d2-tile-label { font-size:22px; font-weight:800; letter-spacing:-0.02em; line-height:1; transition:color 0.13s; }
  .d2-putts-tile { margin:0; border-radius:20px; background:#ece8e2; display:grid; grid-template-columns:1fr auto 1fr; overflow:hidden; align-items:center; }
  .d2-putts-btn { height:100%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:300; color:#aaa; cursor:pointer; transition:background 0.12s; -webkit-tap-highlight-color:transparent; border:none; background:transparent; margin:0; padding:0; }
  .d2-putts-btn.flash { background:rgba(0,0,0,0.08); }
  .d2-putts-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; pointer-events:none; padding:0 6px; }
  .d2-putts-count { font-size:28px; font-weight:800; letter-spacing:-0.03em; line-height:1; color:#2a2420; }
  .d2-putts-sublabel { font-size:11px; font-weight:700; letter-spacing:0.07em; color:#b0a898; }
  .d2-footer { padding:10px 20px 16px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
  .d2-footer-total { font-size:13px; font-weight:600; color:#a09890; }
  .d2-footer-score { font-size:13px; font-weight:700; }
  .d2-footer-running { font-size:12px; color:#c0bab3; }
  .d2-edit-scrim { position:absolute; inset:0; background:rgba(0,0,0,0.38); border-radius:inherit; display:flex; flex-direction:column; justify-content:flex-end; z-index:10; animation:fadeIn 0.15s ease; }
  .d2-edit-sheet { background:#fffffe; border-radius:22px 22px 0 0; padding:16px 16px 28px; animation:d2SlideUp 0.2s ease; }
  .d2-edit-handle { width:34px; height:4px; border-radius:99px; background:rgba(0,0,0,0.12); margin:0 auto 14px; }
  .d2-edit-header { font-size:11px; font-weight:700; letter-spacing:0.09em; color:#bbb; text-transform:uppercase; margin-bottom:10px; }
  .d2-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
  .d2-edit-option { padding:14px; border-radius:16px; border:none; cursor:pointer; font-size:17px; font-weight:800; letter-spacing:-0.02em; width:100%; text-align:left; transition:background 0.13s; }
  .d2-edit-remove { width:100%; padding:13px; border-radius:14px; background:#e8b8b8; border:none; color:#9a1a1a; font-weight:700; font-size:15px; cursor:pointer; margin-bottom:8px; }
  .d2-edit-cancel { width:100%; padding:13px; border-radius:14px; background:rgba(0,0,0,0.06); border:none; color:#888; font-weight:600; font-size:15px; cursor:pointer; }

  /* ── Bag completion hint (Play tab) ─────────────────────────────────── */
  #bagCompleteHint {
    margin: 0 0 8px; padding: 10px 14px;
    background: #f0efeb; border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: #555;
  }
  #bagCompleteHintBtn {
    background: none; border: none; font-size: 13px;
    color: #2a6e3f; font-weight: 600; padding: 0; cursor: pointer;
    white-space: nowrap; margin-left: 8px;
  }

  /* ── Shot sheet tokens ──────────────────────────────────────────────────── */
  :root {
    --sh-tee:         #d6e5f5; --sh-tee-ink:     #1a4a7c;
    --sh-fw:          #c7e4cb; --sh-fw-ink:      #1a5530;
    --sh-rough:       #e6d7a3; --sh-rough-ink:   #5a4410;
    --sh-sand:        #f0e2bd; --sh-sand-ink:    #6a5520;
    --sh-green:       #b8d9bc; --sh-green-ink:   #1a5530;
    --sh-penalty:     #f0c8c8; --sh-penalty-ink: #7a1f1f;
    --sh-holed:       #1c1c1e;
    --sh-gold:        #c9a227;
    --sh-gold-bg:     #8a6a1a;
    --sh-sep:         rgba(60,60,67,0.12);
    --sh-ink-2:       #3c3c43;
    --sh-ink-3:       #8e8e93;
    --sh-ink-4:       #c7c7cc;
    --sh-accent:      #30a14e;
    --sh-accent-bad:  #ff3b30;
    --sh-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --sh-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Expanded drawer for shot sheet — full page */
  .score-drawer.sh-expanded {
    height: 100dvh;
    border-radius: 0;
  }

  /* ── Shot sheet keyframes ────────────────────────────────────────────────── */
  @keyframes sh-chip-in {
    0%   { transform: scale(0.6) translateY(-4px); opacity: 0; }
    100% { transform: scale(1)   translateY(0);    opacity: 1; }
  }
  @keyframes sh-ripple {
    to { transform: scale(4); opacity: 0; }
  }
  @keyframes sh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
  }
  @keyframes sh-score-flip {
    0%   { transform: translateY(0);    opacity: 1; }
    40%  { transform: translateY(-6px); opacity: 0; }
    60%  { transform: translateY(6px);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
  }
  @keyframes sh-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* ── Activity header (black pill) ────────────────────────────────────────── */
  .sh-activity {
    background: #000; color: #fff;
    margin: 10px 10px 0; border-radius: 20px;
    padding: 9px 14px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
    flex-shrink: 0;
  }
  .sh-activity-left  { display: flex; align-items: center; gap: 8px; }
  .sh-activity-right { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
  .sh-activity-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sh-accent); box-shadow: 0 0 8px var(--sh-accent);
    animation: sh-pulse 2s ease-in-out infinite;
  }
  .sh-activity-score { color: #fff; font-weight: 600; font-size: 14px; }
  .sh-activity-score.good { color: #34c759; }
  .sh-activity-score.bad  { color: #ff453a; }

  /* ── Hole header ─────────────────────────────────────────────────────────── */
  .sh-hole-header {
    padding: 14px 20px 6px;
    display: flex; align-items: baseline; justify-content: space-between;
    flex-shrink: 0;
  }
  .sh-hole-title {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  }
  .sh-hole-title .sh-par { color: var(--sh-ink-3); font-weight: 500; font-size: 16px; margin-left: 5px; }

  /* ── Shot chips ──────────────────────────────────────────────────────────── */
  .sh-chips {
    padding: 2px 20px 12px;
    display: flex; gap: 6px; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    flex-shrink: 0; position: relative;
  }
  .sh-chips::-webkit-scrollbar { display: none; }
  .sh-chip {
    flex-shrink: 0; height: 30px; padding: 0 11px; border-radius: 15px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 5px;
    animation: sh-chip-in 0.35s var(--sh-spring) both;
    position: relative; cursor: pointer; border: none;
    -webkit-tap-highlight-color: transparent; width: auto; margin: 0;
    user-select: none;
  }
  .sh-chip.tee     { background: var(--sh-tee);     color: var(--sh-tee-ink); }
  .sh-chip.fw      { background: var(--sh-fw);      color: var(--sh-fw-ink); }
  .sh-chip.rough   { background: var(--sh-rough);   color: var(--sh-rough-ink); }
  .sh-chip.sand    { background: var(--sh-sand);    color: var(--sh-sand-ink); }
  .sh-chip.green   { background: var(--sh-green);   color: var(--sh-green-ink); }
  .sh-chip.penalty { background: var(--sh-penalty); color: var(--sh-penalty-ink); }
  .sh-chip-n { opacity: 0.55; font-size: 10px; font-weight: 600; }
  .sh-chip.last::after {
    content: ""; position: absolute; inset: -2px; border-radius: 17px;
    border: 2px solid rgba(0,0,0,0.08);
  }
  /* Undo button trailing the chip row */
  .sh-chip-undo {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 15px;
    border: none; background: var(--sh-surface-2); color: var(--sh-ink-3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; margin-left: 2px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
  }
  .sh-chip-undo svg { width: 16px; height: 16px; }
  .sh-chip-undo:disabled { opacity: 0.3; pointer-events: none; }

  /* ── Prompt / shot count ─────────────────────────────────────────────────── */
  .sh-prompt {
    padding: 4px 20px 14px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .sh-shot-stepper {
    display: flex; align-items: center; justify-content: center; gap: 20px;
  }
  .sh-shot-count {
    font-size: 80px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
    color: #000;
  }
  .sh-prompt-hint {
    display: block; font-size: 13px; color: var(--sh-ink-3);
    font-weight: 500; letter-spacing: -0.01em; margin-top: 4px;
  }


  /* ── Lie grid ────────────────────────────────────────────────────────────── */
  .sh-lies {
    padding: 0 14px; display: grid;
    grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0;
  }
  .sh-lie {
    aspect-ratio: 1 / 0.78; border-radius: 20px; border: none;
    padding: 12px 14px; display: flex; flex-direction: column;
    justify-content: space-between; align-items: flex-start;
    cursor: pointer; font-family: inherit;
    transition: transform 0.12s var(--sh-spring);
    position: relative; overflow: hidden;
    -webkit-tap-highlight-color: transparent; width: auto; margin: 0;
  }
  .sh-lie.is-pressed { transform: scale(0.96); }
  .sh-lie-icon { width: 22px; height: 22px; opacity: 0.55; }
  .sh-lie-label { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
  .sh-lie.fw      { background: var(--sh-fw);      color: var(--sh-fw-ink); }
  .sh-lie.rough   { background: var(--sh-rough);   color: var(--sh-rough-ink); }
  .sh-lie.sand    { background: var(--sh-sand);    color: var(--sh-sand-ink); }
  .sh-lie.green   { background: var(--sh-green);   color: var(--sh-green-ink); }
  /* ripple */
  .sh-lie-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.45); transform: scale(0);
    pointer-events: none; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px;
  }
  .sh-lie-ripple.go { animation: sh-ripple 0.6s ease-out forwards; }

  /* ── Secondary actions ───────────────────────────────────────────────────── */
  .sh-secondary {
    padding: 8px 14px 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0;
  }
  .sh-sec-btn {
    height: 50px; border-radius: 16px; border: none; font-family: inherit;
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: transform 0.12s var(--sh-spring);
    -webkit-tap-highlight-color: transparent; width: auto; margin: 0;
  }
  .sh-sec-btn.is-pressed { transform: scale(0.97); }
  .sh-sec-btn.penalty { background: var(--sh-penalty); color: var(--sh-penalty-ink); }
  .sh-sec-btn.holed   { background: var(--sh-holed);   color: #fff; }
  .sh-sec-btn svg { width: 18px; height: 18px; }

  /* ── Putts card ──────────────────────────────────────────────────────────── */
  .sh-putts-wrap { padding: 0 14px; flex-shrink: 0; }
  .sh-putts-card {
    background: linear-gradient(180deg, #f7f7fa 0%, #eef0f3 100%);
    border-radius: 24px; padding: 24px 22px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04);
  }
  .sh-putts-number {
    font-size: 64px; font-weight: 800; line-height: 1;
    letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: #000;
    transition: none;
  }
  .sh-putts-number.flip { animation: sh-score-flip 0.3s ease-out; }
  .sh-putts-sub { font-size: 13px; color: var(--sh-ink-3); font-weight: 500; letter-spacing: -0.01em; }
  .sh-quick-putts { display: flex; gap: 8px; margin-top: 14px; width: 100%; }
  .sh-quick-putt {
    flex: 1; height: 48px; border-radius: 14px;
    background: #fff; border: 0.5px solid var(--sh-sep);
    font-size: 17px; font-weight: 700; color: var(--sh-ink-2); cursor: pointer;
    font-family: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.1s ease;
    -webkit-tap-highlight-color: transparent; width: auto; margin: 0;
  }
  .sh-quick-putt.is-pressed { transform: scale(0.94); }
  .sh-quick-putt.active { background: #000; color: #fff; border-color: #000; }
  .sh-putts-stepper {
    display: none; align-items: center; justify-content: center; gap: 16px;
    margin-top: 10px; width: 100%;
  }
  .sh-putts-stepper.visible { display: flex; }
  .sh-stepper-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.07); color: #000; font-size: 22px; font-weight: 300;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent; width: 44px; margin: 0; padding: 0;
  }
  .sh-stepper-val { font-size: 22px; font-weight: 700; min-width: 32px; text-align: center; }

  /* ── Confirm row ─────────────────────────────────────────────────────────── */
  /* ── Simple counter ──────────────────────────────────────────────────────── */
  .sh-simple-counter {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 32px;
  }
  .sh-simple-btn-row {
    display: flex; gap: 24px; align-items: center;
  }
  .sh-simple-btn {
    width: 80px; height: 80px; border-radius: 40px; border: none;
    background: rgba(0,0,0,0.06); color: #000;
    font-size: 36px; font-weight: 300; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
  }
  .sh-simple-btn.is-pressed { background: rgba(0,0,0,0.14); }
  .sh-simple-btn:disabled { opacity: 0.25; pointer-events: none; }

  .sh-confirm-row {
    padding: 12px 14px 0; display: grid;
    grid-template-columns: 1fr 2fr; gap: 8px; flex-shrink: 0;
  }
  .sh-confirm-row--single {
    grid-template-columns: 1fr;
  }
  .sh-btn-sec {
    height: 50px; border-radius: 16px; border: none;
    background: rgba(0,0,0,0.05); color: var(--sh-ink-2);
    font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent;
    width: auto; margin: 0;
  }
  .sh-btn-primary {
    height: 50px; border-radius: 16px; border: none;
    background: #000; color: #fff; font-family: inherit;
    font-size: 15px; font-weight: 600; cursor: pointer;
    letter-spacing: -0.01em;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    -webkit-tap-highlight-color: transparent; width: auto; margin: 0;
  }
  .sh-btn-primary svg { width: 16px; height: 16px; }

  /* ── Result bar — slim ───────────────────────────────────────────────────── */
  .sh-result-slim {
    margin: 8px 14px 0; padding: 13px 16px; border-radius: 16px;
    background: #f2f2f7; display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0;
    animation: sh-slide-up 0.25s var(--sh-ease-out) both;
  }
  .sh-result-slim.milestone {
    background: linear-gradient(135deg, #fff8e4 0%, #fef1c6 100%);
    box-shadow: inset 0 0 0 0.5px rgba(201,162,39,0.22);
  }
  .sh-result-slim-left { display: flex; align-items: center; gap: 12px; }
  .sh-score-pill {
    width: 44px; height: 44px; border-radius: 12px; background: #fff;
    display: grid; place-items: center;
    font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: #000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04); flex-shrink: 0;
  }
  .sh-score-pill.over  { color: var(--sh-accent-bad); }
  .sh-score-pill.under { color: var(--sh-accent); }
  .sh-result-meta { font-size: 13px; font-weight: 600; color: var(--sh-ink-2); letter-spacing: -0.01em; line-height: 1.4; }
  .sh-result-meta .dim { color: var(--sh-ink-3); font-weight: 500; }
  .sh-result-meta .gold { color: var(--sh-gold-bg); }
  .sh-result-next {
    height: 44px; padding: 0 18px; border-radius: 14px; border: none;
    background: #000; color: #fff; font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    -webkit-tap-highlight-color: transparent; flex-shrink: 0; width: auto; margin: 0;
  }
  .sh-result-next svg { width: 14px; height: 14px; }

  /* ── Result bar — celebration ────────────────────────────────────────────── */
  .sh-celebrate {
    margin: 8px 14px 0; border-radius: 24px; padding: 24px 22px 20px;
    color: #fff; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    position: relative; overflow: hidden; flex-shrink: 0;
    animation: sh-slide-up 0.3s var(--sh-ease-out) both;
  }
  .sh-celebrate.birdie {
    background: linear-gradient(135deg, #1a5530 0%, #2a7a48 60%, #3a9958 100%);
  }
  .sh-celebrate.albatross {
    background: linear-gradient(135deg, #3a0a6a 0%, #6a2a9a 50%, #8a4aba 100%);
  }
  .sh-celebrate.eagle {
    background: linear-gradient(135deg, #8a6a1a 0%, #c9a227 50%, #e4c14a 100%);
  }
  .sh-celebrate.hio {
    background: linear-gradient(135deg, #1a1a5a 0%, #2a2a8a 50%, #4a4ab0 100%);
  }
  .sh-celebrate::before {
    content: ""; position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
  }
  .sh-celebrate-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-bottom: 5px; }
  .sh-celebrate-big  { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
  .sh-celebrate-big .em { font-size: 38px; vertical-align: middle; margin-right: 5px; }
  .sh-celebrate-meta { font-size: 14px; font-weight: 500; opacity: 0.85; margin-top: 5px; }
  .sh-celebrate-badges { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
  .sh-badge {
    background: rgba(255,255,255,0.18); padding: 4px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .sh-badge.star::before { content: "★ "; color: #ffe4a0; }

  /* ── Stats bar ───────────────────────────────────────────────────────────── */
  .sh-stats {
    margin-top: 14px; padding: 12px 20px 4px;
    border-top: 0.5px solid var(--sh-sep);
    display: grid; grid-template-columns: 1fr 1fr; flex-shrink: 0;
  }
  .sh-stat { display: flex; flex-direction: column; gap: 2px; }
  .sh-stat.right { align-items: flex-end; }
  .sh-stat-label {
    font-size: 10px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--sh-ink-3); text-transform: uppercase;
  }
  .sh-stat-value {
    font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .sh-stat-value.good { color: var(--sh-accent); }
  .sh-stat-value.bad  { color: var(--sh-accent-bad); }
  .sh-stat-value.flip { animation: sh-score-flip 0.3s ease-out; }

/* ── Home screen ──────────────────────────────────────────────────────────── */

#homeScreen { display: flex; flex-direction: column; gap: 12px; padding-bottom: calc(77px + env(safe-area-inset-bottom)); background: #f5f4f0; }
#calcView { display: contents; }

/* Hero */
.home-hero {
  position: relative;
  width: 100%;
  background: #f5f4f0 !important;
  flex-shrink: 0;
}
.home-hero img {
  width: 100%; height: auto;
  display: block;
}
.home-hero-overlay {
  display: none; /* removed — gradient was darkening the transparent cutout */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.0) 55%);
  pointer-events: none;
}
.home-hero-title {
  position: absolute;
  top: calc(50% + env(safe-area-inset-top) / 2);
  left: 50%; transform: translate(-50%, -50%);
  width: 88%;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 6px;
}
.home-hero-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px; font-weight: 400; color: #fff;
  line-height: 1.35;
}
.home-hero-attribution {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.85);
  line-height: 1.2;
}

/* Tagline */
.home-tagline { padding: 4px 14px 0; }
.home-tagline-main { font-size: 17px; font-weight: 700; color: #1a1a1a; }
.home-tagline-sub  { font-size: 15px; color: #888; margin-top: 2px; }

/* Feature cards */
.home-card {
  margin: 0 12px;
  background: #fff;
  border-radius: 16px;
  border: 0.5px solid rgba(0,0,0,0.07);
  padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 0;
}
.home-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.home-card-icon {
  width: 48px; height: 48px; border-radius: 11px;
  background: #f0efeb;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-card-title { font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin-bottom: 4px; }
.home-card-sub   { font-size: 13px; color: #888; margin-bottom: 16px; }
.home-card-arrow { font-size: 22px; color: #bbb; font-weight: 300; line-height: 1; }

.home-card-btn {
  width: 100%; padding: 17px; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; font-family: inherit; margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.home-card-btn-primary { background: #1a1a1a; color: #fff; }
@media (hover: hover) { .home-card-btn-primary:hover { background: #333; } }
.home-card-btn-secondary { background: #f0efeb; color: #1a1a1a; }
@media (hover: hover) { .home-card-btn-secondary:hover { background: #e5e3df; } }

/* ── Play tab hero strip + landing ───────────────────────────────────────── */
.play-hero {
  flex-shrink: 0;
  height: 130px;
  position: relative; overflow: hidden;
  margin-left: -12px; margin-right: -12px;
  margin-top: calc(-10px - env(safe-area-inset-top));
}
.play-hero img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  display: block;
}
.play-hero-cut {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 28px; display: block;
}
.play-landing { display: flex; flex-direction: column; gap: 8px; }
.play-landing.hidden { display: none; }

/* Hide calculator in play tab until explicitly opened */
#panePlay #calcView { display: none; }
#panePlay #calcView.open { display: contents; }

.hole-manual-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.hole-manual-header .card-title { margin-bottom: 0; }
.calc-close-btn {
  background: #f0efeb; color: #bbb;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 17px; padding: 0; width: 42px; height: 42px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.calc-close-btn.is-pressed { background: #e5e3df; }
.calc-close-btn.hidden { display: none; }

/* ── Home stats dashboard ─────────────────────────────────────────────────── */
.home-stats { margin: 0 12px; }
.home-stats-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.home-stats-label {
  font-size: 11px; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.home-stats-viewall {
  font-size: 13px; font-weight: 600; color: #1a1a1a;
  background: none; border: none; padding: 0; margin: 0;
  width: auto; cursor: pointer;
  border-bottom: 1px solid #1a1a1a; border-radius: 0; line-height: 1.2;
}
@media (hover: hover) { .home-stats-viewall:hover { color: #555; border-bottom-color: #555; } }
.home-stats-empty {
  font-size: 15px; color: #aaa; padding: 16px 0; text-align: center;
}
.home-stats-body { display: flex; flex-direction: column; gap: 8px; }
.home-stats-body.hidden, .home-stats-empty.hidden { display: none; }

.round-filter-row {
  display: flex; gap: 6px; margin-bottom: 10px; padding: 0 16px;
}
.rfc-chip {
  font-size: 12px; font-weight: 600; color: #888;
  background: #f0efeb; border: none; border-radius: 20px;
  padding: 4px 11px; cursor: pointer; line-height: 1.4;
}
.rfc-chip.rfc-active {
  background: #1a1a1a; color: #fff;
}
.hsc-chip-sep {
  color: rgba(0,0,0,0.2); font-size: 11px;
  display: flex; align-items: center; padding: 0 1px;
}
.rfc-chip-toggle {
  font-size: 12px; font-weight: 600; color: #888;
  background: #f0efeb; border: none; border-radius: 20px;
  padding: 4px 11px; cursor: pointer; line-height: 1.4;
}
.rfc-chip-toggle.rfc-net-active {
  background: #d0ead0; color: #0f5c2e;
}

.hsc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 0;
}
.hsc-title {
  font-size: 15px; font-weight: 700; color: #1a1a1a;
}
.hsc-chips {
  display: flex; gap: 5px;
}

.home-sparkline-card {
  background: #fff; border-radius: 12px;
  border: 0.5px solid rgba(0,0,0,0.07); overflow: hidden;
}
.home-stat-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.home-stat-tile {
  background: #fff; border-radius: 12px;
  border: 0.5px solid rgba(0,0,0,0.07);
  padding: 13px 12px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
}
.home-stat-val {
  font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1;
}
.home-stat-lbl {
  font-size: 11px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.home-insight {
  background: #fff; border-radius: 12px;
  border: 0.5px solid rgba(0,0,0,0.07);
  padding: 13px 14px;
  font-size: 13px; color: #555; line-height: 1.4;
}
.home-recent-rounds {
  background: #fff; border-radius: 12px;
  border: 0.5px solid rgba(0,0,0,0.07); overflow: hidden;
}

/* ── Stats page drill-down menu ──────────────────────────────────────────── */
.mg-stats-summary {
  font-size: 13px; color: #888; font-weight: 600;
  padding: 10px 16px 8px; letter-spacing: 0.01em;
}
.mg-drilldown-btn {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px;
  border: 0.5px solid rgba(0,0,0,0.07);
  padding: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mg-drilldown-btn.is-pressed { background: #f5f4f0; }
.mg-drilldown-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: #f0efeb;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mg-drilldown-text { flex: 1; }
.mg-drilldown-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.mg-drilldown-sub   { font-size: 12px; color: #888; margin-top: 2px; }
.mg-drilldown-arrow { font-size: 17px; color: #ccc; font-weight: 300; flex-shrink: 0; }