:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

[data-theme="dark"] {
  --bg: #0c100d;
  --bg-2: #111612;
  --bg-3: #171e18;
  --line: #232c24;
  --ink: #e8ece6;
  --ink-2: #9aa598;
  --ink-3: #626c60;
  --accent: #8fd18a;
  --accent-dim: #4d7a4a;
  --amber: #e0b45c;
  --shot: #e8ece6;
  --fairway: #162117;
  --green-fill: #1e3322;
  --green-line: #38553c;
  --tee-fill: #24301f;
  --water: #16232e;
  --water-line: #2a4356;
}

[data-theme="light"] {
  --bg: #f4f3ec;
  --bg-2: #fbfaf5;
  --bg-3: #ecebe1;
  --line: #d9d8cb;
  --ink: #1d221c;
  --ink-2: #5a635a;
  --ink-3: #8b948a;
  --accent: #2e7d32;
  --accent-dim: #7aa87c;
  --amber: #b07d20;
  --shot: #1d221c;
  --fairway: #e2e8d5;
  --green-fill: #c9dec2;
  --green-line: #8fb589;
  --tee-fill: #d8dcc6;
  --water: #cfe0ea;
  --water-line: #9dbdd1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); z-index: 50;
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.mark { color: var(--accent); }
.brand-name { font-weight: 700; letter-spacing: .14em; font-size: var(--text-sm); }
.brand-path { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); }
.topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.chip {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
  white-space: nowrap;
}
.chip-live { border-color: var(--accent-dim); color: var(--accent); }
.theme-toggle {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- hero ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(var(--space-4), 4vw, var(--space-8)); }
.hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-8);
  padding: clamp(var(--space-10), 6vw, var(--space-20)) 0 var(--space-10);
  flex-wrap: wrap;
}
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; color: var(--accent); margin-bottom: var(--space-3); }
h1 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; }
.hero-sub { color: var(--ink-2); margin-top: var(--space-3); font-size: var(--text-sm); }
.hero-stats { display: flex; gap: clamp(var(--space-4), 3vw, var(--space-10)); }
.stat { display: flex; flex-direction: column; }
.stat-n { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-l { font-size: var(--text-xs); color: var(--ink-3); font-family: var(--font-mono); margin-top: var(--space-1); }

/* ---------- map ---------- */
.map-section { padding-bottom: var(--space-16); }
.map-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; gap: var(--space-2); }
.layer-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lchip {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-2); color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: all .18s ease;
}
.lchip.on { color: var(--accent); border-color: var(--accent-dim); background: color-mix(in oklab, var(--accent) 8%, var(--bg-2)); }
.lchip:hover { color: var(--ink); }
.lchip.reset { color: var(--amber); border-color: var(--amber); }
.map-wrap {
  position: relative; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
#courseMap { display: block; width: 100%; height: auto; }
.sample-badge {
  position: absolute; top: var(--space-4); left: var(--space-4); z-index: 5;
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in oklab, var(--amber) 14%, var(--bg-2));
  border: 1px solid var(--amber); color: var(--amber); border-radius: 8px;
  letter-spacing: .06em;
}
.map-legend {
  display: flex; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2);
}
.map-legend span { display: flex; align-items: center; gap: var(--space-2); }
.lg { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.lg-walk { background: var(--accent); opacity: .85; }
.lg-shot { background: var(--shot); }
.lg-putt { background: var(--amber); height: 8px; width: 8px; border-radius: 50%; filter: blur(1px); }
.lg-green { background: var(--green-line); height: 8px; width: 14px; border-radius: 4px; }
.tooltip {
  position: absolute; pointer-events: none; display: none; z-index: 10;
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--bg-3); border: 1px solid var(--line); color: var(--ink);
  padding: var(--space-2) var(--space-3); border-radius: 8px; white-space: nowrap;
}

/* ---------- svg feature styles ---------- */
.f-fairway { fill: var(--fairway); stroke: none; }
.f-green { fill: var(--green-fill); stroke: var(--green-line); stroke-width: 1.2; }
.f-tee { fill: var(--tee-fill); stroke: none; }
.f-water { fill: var(--water); stroke: var(--water-line); stroke-width: 1; }
.f-holeline { stroke: var(--ink-3); stroke-width: 1.1; stroke-dasharray: 4 5; fill: none; opacity: .75; transition: all .18s; }
.f-holeline.hot { stroke: var(--accent); opacity: 1; stroke-width: 1.8; }
.f-walk { stroke: var(--accent); stroke-width: 1.6; fill: none; opacity: .8; stroke-linejoin: round; stroke-linecap: round; }
.f-shot { stroke: var(--shot); stroke-width: 1.6; fill: none; opacity: .9; }
.f-putt-line { stroke: var(--amber); stroke-width: 1; opacity: .55; }
.f-putt-dot { fill: var(--amber); opacity: .38; }
.hole-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; fill: var(--ink); }
.hole-yd { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-2); }
.hole-hit { fill: transparent; cursor: pointer; }

/* ---------- holes ---------- */
.holes-section { padding-bottom: var(--space-16); }
.sec-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em; }
.sec-sub { color: var(--ink-2); font-size: var(--text-sm); margin-top: var(--space-2); max-width: 60ch; }
.hole-strip {
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: var(--space-2); margin-top: var(--space-6);
}
.hole-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--space-3); text-align: center; cursor: pointer;
  transition: all .18s ease;
}
.hole-card:hover, .hole-card.hot { border-color: var(--accent-dim); background: color-mix(in oklab, var(--accent) 6%, var(--bg-2)); }
.hc-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); }
.hc-yd { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; line-height: 1.2; }
.hc-hcp { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); }

/* ---------- loop ---------- */
.loop-section { padding-bottom: var(--space-16); }
.loop-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3); margin-top: var(--space-6);
}
.loop-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--space-6);
}
.loop-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }
.loop-card h3 { font-size: var(--text-base); font-weight: 700; margin: var(--space-2) 0; }
.loop-card p { font-size: var(--text-sm); color: var(--ink-2); }
.model-state { margin-top: var(--space-6); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-6); }
.model-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.mono-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; color: var(--ink-3); }
.model-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-sm); }
.model-table th { text-align: left; color: var(--ink-3); font-weight: 400; font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.model-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); }
.model-table tr:last-child td { border-bottom: none; }
.dim { color: var(--ink-3); }

/* ---------- contract ---------- */
.contract-section { padding-bottom: var(--space-16); }
.mono-inline { font-family: var(--font-mono); font-size: .9em; background: var(--bg-3); padding: 1px 6px; border-radius: 6px; }
.contract {
  margin-top: var(--space-6); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: var(--space-6); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.75; color: var(--ink);
}
.contract .c { color: var(--ink-3); }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--space-8) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-12);
  display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.footer p { font-size: var(--text-xs); color: var(--ink-2); max-width: 46ch; margin-top: var(--space-2); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hole-strip { grid-template-columns: repeat(3, 1fr); }
  .hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .brand-path { display: none; }
  .chip-live { font-size: 0.72rem; padding: var(--space-1) var(--space-2); }
}
@media (max-width: 480px) {
  .hole-strip { grid-template-columns: repeat(3, 1fr); }
  .map-legend { gap: var(--space-3); }
}

/* live round ingest */
.map-controls-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sample-badge.live { color: var(--accent); border-color: var(--accent); }
.f-shot.unvalidated { stroke-dasharray: 4 4; opacity: .65; }

/* today panel */
.today-panel { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg-2); }
.today-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.today-gri, .today-flag { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.today-gri.sev2, .today-flag.sev2 { color: #e07a5f; border-color: rgba(224,122,95,.45); }
.today-flag.sev1 { color: #e0a458; border-color: rgba(224,164,88,.4); }
.today-holes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.today-hole { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.today-hole .th-n { font-weight: 700; font-size: 1rem; }
.today-hole .th-y { color: var(--ink-2); font-size: .72rem; }
.today-hole .th-t { color: var(--ink-2); font-size: .7rem; }
.today-note { margin-top: 12px; color: var(--ink-2); font-size: .78rem; line-height: 1.5; }

/* playback */
.playback-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.play-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.play-btn:hover { border-color: var(--accent); color: var(--accent); }
#scrub { flex: 1; min-width: 56px; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--line); accent-color: var(--accent); cursor: pointer; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: none; }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: none; }
.time-readout { flex: 0 0 auto; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--ink-2); min-width: 148px; text-align: right; }
.now-marker { fill: none; stroke: var(--accent); stroke-width: 1.6; animation: nowPulse 1.2s ease-out infinite; }
@keyframes nowPulse { 0% { r: 3; opacity: 1; } 100% { r: 9; opacity: .15; } }
@media (max-width: 480px) { .playback-bar { gap: 7px; padding: 9px 10px; } .time-readout { min-width: 0; font-size: .6rem; } }