:root {
  --bg: #07130f;
  --card: rgba(8, 26, 20, 0.94);
  --card-solid: #0b1f18;
  --line: rgba(255, 255, 255, 0.13);
  --fg: #f2f6f4;
  --dim: #93a8a0;
  --accent: #6ee7a8;
  --up: #ffd166;
  --down: #6ec7ff;
  --flag: #e63946;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* The bottom bar's real height, safe area and all, written here by the app
     every time the bar changes shape — the pill hiding while you measure a
     shot, a fourball's chips appearing, a button switched off in settings.
     Anything that has to sit clear of the bar measures from this, so nothing
     needs to know what the bar happens to contain. The value below is only
     the starting guess, used for the instant before the first measurement. */
  --bar-h: 140px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#map { position: absolute; inset: 0; background: #0d1a15; }

/* ── Readout card ─────────────────────────────────────────── */
.card {
  position: absolute;
  top: calc(var(--safe-t) + 6px);
  left: 8px; right: 8px;
  z-index: 500;
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 9px 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Weak GPS — stop the number looking more certain than it is. */
.card.uncertain .big { opacity: 0.55; }

.hidden { display: none !important; }

.empty { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 15px; }
.empty-icon { font-size: 26px; color: var(--accent); line-height: 1; }

.playslike { display: flex; align-items: baseline; gap: 12px; }
.label { font-size: 11px; letter-spacing: 0.14em; color: var(--dim); font-weight: 600; }
.big {
  font: 700 48px/0.92 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin-left: auto;
}
.big .unit { font-size: 16px; font-weight: 600; color: var(--dim); margin-left: 4px; letter-spacing: 0; }

/* One scrollable row rather than wrapping to two — keeps the card short. */
.breakdown {
  display: flex; gap: 5px;
  margin-top: 7px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.breakdown::-webkit-scrollbar { display: none; }
.chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--dim);
  white-space: nowrap;
}
.chip b { color: var(--fg); font-weight: 600; }
.chip.up b { color: var(--up); }
.chip.down b { color: var(--down); }

/* A hazard on your line is a warning, not a component of the sum — it gets its
   own outline so it doesn't read as another slope-and-wind chip. */
.chip.hz {
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.1);
}
.chip.hz b { color: var(--up); }

/* ── Front / centre / back of the green ───────────────────── */
.fcb { display: flex; gap: 6px; margin-top: 7px; }
.fcb button {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  padding: 6px 4px;
  font: 600 11px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.fcb button b {
  font-size: 18px; font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* Whichever one you're actually aiming at. */
.fcb button.on {
  background: rgba(110, 231, 168, 0.16);
  border-color: rgba(110, 231, 168, 0.55);
  color: var(--accent);
}
.fcb button.on b { color: var(--accent); }
.fcb .on-green {
  flex: 1; text-align: center; padding: 7px 4px;
  font-size: 12.5px; color: var(--accent);
}

/* ── Club recommendation ──────────────────────────────────── */
.club {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.club-main { flex: 1; min-width: 0; }
.club-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.club-name {
  font: 700 25px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  color: var(--accent);
  letter-spacing: -0.02em;
}
/* How far past or short that club actually finishes — the thing you want to
   know at a glance, so it sits right beside the club name. */
.club-delta {
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.club-delta:empty { display: none; }
.club-delta.long  { color: var(--up); }
.club-delta.short { color: var(--down); }
.club-delta.exact { color: var(--accent); }

.club-fit { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.club-alts { display: flex; gap: 6px; flex-shrink: 0; }
.alt {
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 5px 8px;
  min-width: 56px;
}
.alt .n { font-size: 14px; font-weight: 700; }
.alt .d {
  font-size: 10px; color: var(--dim);
  font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 1px;
}
.alt .d.long  { color: rgba(255, 209, 102, 0.85); }
.alt .d.short { color: rgba(110, 199, 255, 0.85); }

/* ── Toast ────────────────────────────────────────────────── */
.toast {
  position: absolute;
  left: 10px; right: 10px;
  bottom: calc(var(--bar-h) + 10px);
  z-index: 900;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(8, 26, 20, 0.96);
  border: 1px solid var(--accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  font-size: 13px; line-height: 1.45;
}
/* Clears the shot-measuring bar when both are showing. */
.toast.raised { bottom: calc(var(--bar-h) + 78px); }

/* ── Hole + quick score pill ──────────────────────────────── */
/* A row of the bottom bar, directly above the buttons — a score is two taps
   from the map without opening the card, and both things you tap are in the
   same place rather than either side of the GPS readout. */
.pill {
  padding: 6px;
  border-radius: 15px;
  background: rgba(8, 26, 20, 0.94);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.p-row { display: flex; align-items: center; gap: 5px; }
.p-gap { flex: 1; min-width: 4px; }

.pill button {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  font: 600 15px/1 -apple-system, system-ui, sans-serif;
}
.pill button:active { background: rgba(255, 255, 255, 0.2); }

.p-nav { padding: 10px 11px; font-size: 19px !important; color: var(--dim) !important; }
.p-hole {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 11px; min-width: 62px;
}
.p-hole b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-hole span { font-size: 9.5px; font-weight: 600; color: var(--dim); letter-spacing: 0.04em; }
/* A hole you set by hand rather than one the app worked out. */
.pill.manual .p-hole { border-color: rgba(255, 209, 102, 0.55); }
.pill.manual .p-hole span { color: var(--up); }

/* Scored the hole, so the app moved you on. A flash rather than a message:
   the number has changed under your thumb and you need to notice, but not
   eighteen times a round in words. */
.pill.moved .p-hole { animation: hole-moved 1.1s ease-out; }
@keyframes hole-moved {
  0%   { background: var(--accent); border-color: var(--accent); }
  35%  { background: var(--accent); border-color: var(--accent); }
  100% { background: rgba(255, 255, 255, 0.08); border-color: var(--line); }
}
.pill.moved .p-hole b { animation: hole-moved-text 1.1s ease-out; }
@keyframes hole-moved-text {
  0%, 35% { color: #06251a; }
  100%    { color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) {
  .pill.moved .p-hole, .pill.moved .p-hole b { animation: none; }
}

.p-step { padding: 10px 13px; font-size: 18px !important; }
/* Labelled, or a bare number between a − and a + reads as a third button. */
.p-val {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 40px; text-align: center;
}
.p-val b { font: 700 19px/1 -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.p-val span { font-size: 9.5px; font-weight: 600; color: var(--dim); letter-spacing: 0.04em; }
.p-val b.none { color: var(--dim); }
.p-val b.under { color: var(--accent); }
.p-val b.worse { color: var(--up); }
.p-open { padding: 10px 11px; color: var(--dim) !important; }

/* One chip per player when there's more than one of you. */
.p-players { display: flex; gap: 5px; margin-top: 5px; }
.p-players button {
  flex: 1;
  padding: 7px 4px;
  font-size: 12px !important;
  color: var(--dim) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-players button.on {
  background: rgba(110, 231, 168, 0.16) !important;
  border-color: rgba(110, 231, 168, 0.55);
  color: var(--accent) !important;
}
.p-players button i { font-style: normal; opacity: 0.75; margin-left: 4px; }

/* The toast normally clears the bottom bar; with the pill there it needs more. */

/* ── Bottom bar ───────────────────────────────────────────── */
/* Two rows: the status gets the full width above the buttons. Sharing a line
   with six buttons left it about 26px, which truncated "GPS ±4 yds" to "GP…". */
.bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px calc(var(--safe-b) + 10px);
  background: linear-gradient(to top, rgba(4, 12, 9, 0.96), rgba(4, 12, 9, 0.72) 68%, transparent);
}
.status { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.status-line {
  font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.status-line.dim { color: var(--dim); }
/* Reads as one line — "GPS ±4 yds · 13–23mph WSW · 21°C". */
.status-line.dim::before { content: "·"; margin-right: 8px; opacity: 0.5; }
.bar-btns { display: flex; gap: 8px; }
/* Even widths across the full bar. Hide a button you never use in ☰ → What you
   see and the rest grow to fill the space it left. */
.bar-btns .btn { flex: 1; }

.btn {
  font: 600 15px/1 -apple-system, system-ui, sans-serif;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 46px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn:active { background: rgba(255, 255, 255, 0.2); }
.btn.wide { flex: 1; padding: 13px 12px; }
.btn.subtle { background: transparent; color: var(--dim); }

/* ── Settings sheet ───────────────────────────────────────── */
.sheet {
  position: absolute; inset: 0; z-index: 1000;
  background: var(--card-solid);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet-inner { padding: calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 40px); max-width: 620px; margin: 0 auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sheet-head h2 { font-size: 24px; margin: 0; letter-spacing: -0.02em; }

.sheet section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sheet section:last-child { border-bottom: 0; }
.sheet h3 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
.hint-inline { font-weight: 400; color: var(--dim); font-size: 12.5px; margin-left: 5px; }
.hint { font-size: 12.5px; color: var(--dim); margin: 8px 0 0; line-height: 1.5; }

.row { display: flex; gap: 8px; align-items: flex-end; }
.seg { flex: 1; }
.seg input { display: none; }
.seg span {
  display: block; text-align: center;
  padding: 12px 8px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14.5px; font-weight: 500;
}
.seg input:checked + span { background: var(--accent); color: #06251a; border-color: var(--accent); font-weight: 700; }

.field { flex: 1; }
.field > span { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 5px; }
.manual-wind { margin-top: 10px; }

input[type="number"], input[type="text"], select {
  width: 100%;
  font: 500 16px/1 -apple-system, system-ui, sans-serif;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 11px;
  -webkit-appearance: none;
  appearance: none;
}
select { background-image: none; }

.slider { display: block; margin-bottom: 14px; }
.slider > span { display: block; font-size: 13.5px; color: var(--dim); margin-bottom: 6px; }
.slider b { color: var(--fg); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.check input { width: 21px; height: 21px; accent-color: var(--accent); }

.club-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 11px; }
.club-row { display: flex; gap: 7px; align-items: center; }
.club-row input[type="text"] { flex: 1.4; }
.club-row input[type="number"] { flex: 1; }
.club-row button {
  background: transparent; border: 1px solid var(--line);
  color: var(--dim); border-radius: 11px;
  padding: 12px 13px; font-size: 15px; cursor: pointer;
}

/* ── Map bits ─────────────────────────────────────────────── */
.leaflet-container { background: #0d1a15; font-family: inherit; }
/* Esri's imagery credit. It can't go — it's the condition of using their
   satellite tiles — so it's dressed as a watermark instead of a label: no
   panel behind it, no border, faint enough to ignore and legible if you look.
   Sits above the bar with the rest of the things you only read. */
.leaflet-control-attribution {
  background: none !important;
  color: #cfe0d9 !important;
  opacity: 0.42;
  font-size: 8.5px !important;
  letter-spacing: 0.01em;
  padding: 0 4px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  margin-bottom: calc(var(--bar-h) + 5px) !important;
}
.leaflet-control-attribution a { color: #cfe0d9 !important; }
.leaflet-control-zoom { display: none; }

.me-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2f9bff; border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.target-pin {
  /* No negative margin here — Leaflet's iconAnchor already centres this, and
     doubling up drew the ring 13px away from the point actually tapped. */
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid var(--flag);
  background: rgba(230, 57, 70, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
/* ── Wind arrow ───────────────────────────────────────────── */
.wind-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 450;
  width: 54px;
  padding: 7px 0 5px;
  text-align: center;
  border-radius: 14px;
  background: rgba(8, 26, 20, 0.82);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.wind-arrow .arrow {
  font-size: 26px; line-height: 1;
  transition: transform 0.4s ease;
  color: var(--dim);
}
.wind-arrow .wind-mph {
  font-size: 12px; font-weight: 700; color: var(--dim);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.wind-arrow[data-kind="into"]    .arrow, .wind-arrow[data-kind="into"]    .wind-mph { color: var(--up); }
.wind-arrow[data-kind="helping"] .arrow, .wind-arrow[data-kind="helping"] .wind-mph { color: var(--down); }

.ring-label {
  font-size: 10px; font-weight: 600;
  color: rgba(110, 231, 168, 0.5);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}
.ring-label.pick { color: #6ee7a8; font-size: 11.5px; }

.status-line.warn { color: var(--up); }
.btn.on { background: var(--accent); color: #06251a; border-color: var(--accent); }

/* ── Labelled bottom buttons ──────────────────────────────── */
.btn.labelled {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px 6px;
  min-width: 50px;
}
.btn.labelled .ic { font-size: 17px; line-height: 1; }
.btn.labelled .lb {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.02em; opacity: 0.72;
  text-transform: uppercase;
}
.btn.labelled.on .lb { opacity: 0.9; }

/* No counter-rotation needed: leaflet-rotate keeps markerPane un-rotated and
   repositions markers itself, so labels are already upright. */

/* ── Shot measuring ───────────────────────────────────────── */
.measure {
  position: absolute;
  left: 8px; right: 8px;
  bottom: calc(var(--bar-h) + 8px);
  z-index: 520;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(8, 26, 20, 0.95);
  border: 1px solid var(--accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.measure-info { flex: 1; min-width: 0; }
.measure-dist { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.measure-hint { font-size: 11.5px; color: var(--dim); margin-top: 1px; }

.pick-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pick {
  padding: 16px 8px;
  font: 600 15px/1.2 -apple-system, system-ui, sans-serif;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.pick:active { background: var(--accent); color: #06251a; }

/* ── Shot records page ────────────────────────────────────── */
.sr-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

.sr-club {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}
.sr-club.open { border-color: rgba(110, 231, 168, 0.4); background: rgba(110, 231, 168, 0.05); }

.sr-head {
  width: 100%;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 13px 6px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg); text-align: left;
  font: inherit;
}
.sr-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sr-typical {
  font-size: 21px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.sr-typical em { font-size: 11px; font-style: normal; color: var(--dim); margin-left: 2px; }
.sr-count { font-size: 11px; color: var(--dim); white-space: nowrap; }
.sr-chev { font-size: 11px; color: var(--dim); }

.sr-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 0 13px 8px;
  font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.sr-meta .match { color: var(--accent); opacity: 0.8; }

/* One dot per recent shot along the club's own range — spread at a glance. */
.sr-dots {
  position: relative; height: 4px; margin: 0 13px 12px;
  background: rgba(255, 255, 255, 0.08); border-radius: 999px;
}
.sr-dots i {
  position: absolute; top: -2px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--accent); opacity: 0.55;
}

.sr-shots {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 10px 4px;
}
.sr-shot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  font-size: 12px;
}
.sr-shot b { font-size: 15px; font-variant-numeric: tabular-nums; min-width: 34px; }
.sr-shot span { color: var(--dim); flex: 1; line-height: 1.35; }
.sr-del {
  background: transparent; border: 1px solid var(--line);
  color: var(--dim); border-radius: 8px;
  font-size: 12px; cursor: pointer; padding: 6px 9px;
  flex-shrink: 0;
}

.sr-actions { padding: 6px 10px 12px; }
.sr-use {
  width: 100%;
  font: 600 13.5px/1 -apple-system, system-ui, sans-serif;
  color: #06251a; background: var(--accent);
  border: 0; border-radius: 11px;
  padding: 13px 10px; cursor: pointer;
}
.sr-use:disabled { background: rgba(255, 255, 255, 0.07); color: var(--dim); cursor: default; }

/* ── What you see ─────────────────────────────────────────── */
/* A switch plus the one line that says what you'd lose. The explanation is the
   point — a list of twenty bare labels is no easier to compose from than the
   cluttered screen it's meant to fix. */
.feature {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.feature:last-child { border-bottom: 0; }
.feature input { width: 21px; height: 21px; accent-color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.feature span { min-width: 0; }
.feature b { display: block; font-size: 14.5px; font-weight: 500; }
.feature em {
  display: block; font-style: normal;
  font-size: 12px; color: var(--dim); line-height: 1.45; margin-top: 2px;
}
/* Hangs off the switch above it — the alternates need a club, the outlines
   need the carries. */
.feature.child { padding-left: 22px; }
.feature.off { opacity: 0.4; }

/* Air above each group heading, or the list reads as one undifferentiated
   run of switches. */
#featureList h3 { margin: 26px 0 2px; color: var(--accent); }
#featureList h3:first-child { margin-top: 18px; }

#presets { margin-top: 10px; }
#presets .btn { font-size: 13.5px; padding: 12px 6px; }
#presets .btn.on {
  background: var(--accent); color: #06251a; border-color: var(--accent); font-weight: 700;
}

/* ── Scorecard ────────────────────────────────────────────── */
.card-summary {
  display: flex; gap: 8px; margin: 10px 0 16px;
}
.cs-item {
  flex: 1; text-align: center;
  padding: 11px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cs-item b {
  display: block; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.cs-item span { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Whose column you're filling in. The pill on the map screen is where scores
   normally get entered; this is for going back and fixing one. */
.tabs { display: flex; gap: 6px; margin: -6px 0 14px; }
.tabs button {
  flex: 1;
  padding: 9px 6px;
  font: 600 13px/1 -apple-system, system-ui, sans-serif;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabs button.on {
  background: rgba(110, 231, 168, 0.16);
  border-color: rgba(110, 231, 168, 0.55);
  color: var(--accent);
}

.holes { display: flex; flex-direction: column; gap: 5px; }
.hole {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 9px;
  border-radius: 11px;
  /* Empty holes sit back; see .filled below. */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  position: relative;
  transition: background 0.15s ease;
}
/* A filled-in hole reads as "done" at a glance: brighter row, and a small
   accent tick down the left edge. Deliberately quiet — you should be able to
   scan for a gap, not be shouted at. */
.hole.filled { background: rgba(255, 255, 255, 0.06); }
.hole.filled::before {
  content: "";
  position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 2.5px; border-radius: 0 2px 2px 0;
  background: var(--accent); opacity: 0.55;
}
.hole.current { border-color: var(--accent); background: rgba(110, 231, 168, 0.09); }
.h-no {
  width: 22px; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--dim);
}
.hole.filled .h-no { color: var(--fg); }
.h-par {
  font: 500 12px/1 -apple-system, system-ui, sans-serif;
  color: var(--dim); background: transparent;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; cursor: pointer; min-width: 52px;
}
/* Where the par comes from the course map there's nothing to change. */
.h-par[disabled] { opacity: 0.75; cursor: default; }
.h-score { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* The rest of the fourball, so the card still reads as one card. */
.h-others {
  flex-basis: 100%;
  display: flex; gap: 10px;
  padding: 3px 0 1px 32px;
  font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.h-btn {
  width: 38px; height: 38px;
  font: 600 18px/1 -apple-system, system-ui, sans-serif;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.h-btn:active { background: var(--accent); color: #06251a; }
.h-val {
  min-width: 26px; text-align: center;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--dim);   /* the "–" on an unplayed hole */
}
/* Score vs par, kept subtle — a tint, not a traffic light. */
.h-val.under { color: var(--accent); }
.h-val.level { color: var(--fg); }
.h-val.bogey { color: var(--fg); }
.h-val.worse { color: var(--up); }

/* Each nine adds itself up where it finishes. Sits between the holes rather
   than among them: same right-hand alignment as the scores above it, so the
   subtotal lands under the column it's a subtotal of. */
.nine {
  display: flex; align-items: center; gap: 10px;
  padding: 9px; margin: 3px 0;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
}
.nine .n-lab {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--fg);
}
.nine .n-par { font-size: 11.5px; color: var(--dim); }
.nine .n-tot { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nine .n-tot b {
  min-width: 26px; text-align: center;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nine .n-vs {
  width: 38px; text-align: right;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--dim);
}
.nine .n-vs.under { color: var(--accent); }
.nine .n-vs.over { color: var(--up); }
.nine.total {
  background: rgba(110, 231, 168, 0.1);
  border-color: rgba(110, 231, 168, 0.35);
  margin-top: 6px;
}

.history { display: flex; flex-direction: column; gap: 5px; }
/* A saved round is a button so the whole block opens the card underneath. */
.hist-round {
  display: block; width: 100%; padding: 0;
  background: none; border: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.hist {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 9px 11px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.hist-round.open .hist { background: rgba(255, 255, 255, 0.08); border-radius: 10px 10px 0 0; }
.hist + .hist { margin-top: 3px; }
.hist b { font-variant-numeric: tabular-nums; margin-left: auto; font-size: 15px; }
.hist .dim { color: var(--dim); min-width: 42px; text-align: right; }
.hist-chev {
  width: 12px; text-align: right; color: var(--dim); font-size: 15px;
  transition: transform 0.15s ease;
}
.hist-round.open .hist-chev { transform: rotate(90deg); }
.hist-chev.blank { visibility: hidden; }

/* The round opened up: the card as you played it. */
.hist-detail {
  padding: 10px 11px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 10px 10px;
  /* Cancels the .history gap so the detail stays attached to its round. */
  margin-top: -5px;
}
.hd-course { font-size: 11.5px; color: var(--dim); margin-bottom: 8px; }
.hd-player + .hd-player { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.hd-name { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
/* Nine holes and their total, on one line — the shape of a real card. */
.hd-grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  margin-bottom: 4px;
}
.hd-cell { text-align: center; padding: 3px 0; border-radius: 6px; }
.hd-cell i {
  display: block; font-style: normal;
  font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.hd-cell b {
  display: block; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.hd-cell b.none { color: var(--dim); font-weight: 400; }
.hd-cell b.under { color: var(--accent); }
.hd-cell b.worse { color: var(--up); }
.hd-cell.sum { background: rgba(255, 255, 255, 0.07); }
.hd-cell.sum i { color: var(--fg); font-weight: 700; font-size: 8.5px; text-transform: uppercase; }
.hd-cell.sum u {
  display: block; text-decoration: none;
  font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.hd-total {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--dim);
}
.hd-total b {
  margin-left: auto; font-size: 17px; font-weight: 700;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.hd-total .n-vs {
  width: 38px; text-align: right;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--dim);
}
.hd-total .n-vs.under { color: var(--accent); }
.hd-total .n-vs.over { color: var(--up); }
.hd-total .dim { color: var(--dim); }

.advanced { margin-top: 16px; }
.advanced summary {
  font-size: 13.5px; color: var(--dim);
  cursor: pointer; padding: 8px 0;
}
.advanced[open] summary { margin-bottom: 6px; }

.target-pin::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  background: #fff; border-radius: 50%;
}