/* =========================================================
   Beers & Birdies — styles  (v6: "Last Call" sportsbook dark)
   ---------------------------------------------------------
   Direction: dark sportsbook (DraftKings / Stake energy), built
   to read as DELIBERATELY designed — not AI-default.

   Anti-slop commitments baked into this sheet:
   - No Inter/Roboto/Open Sans/Space Grotesk. Display = Clash Display,
     body = General Sans (Fontshare), numbers = JetBrains Mono.
   - No purple/indigo anywhere. ONE committed turf-acid accent + gold for wins.
   - Depth comes from LIGHTER surface layers + 1px hairline borders — NOT
     pillowy uniform drop shadows. One crisp 8px radius vocabulary (pills only
     for chips/badges). A faint SVG grain overlay kills digital flatness.
   - No pure black, no pure-white body text. tabular-nums everywhere numbers live.
   - Icons are Lucide SVG (sprite in index.html); zero emoji in the UI.
   ========================================================= */
:root {
  /* ---- surfaces: elevation by getting LIGHTER, never by shadow ---- */
  --bg-0:    #0B0F0D;   /* app canvas (not pure black) */
  --surf-1:  #141A17;   /* cards */
  --surf-2:  #1E2823;   /* raised / inputs / active chips */
  --surf-3:  #27332C;   /* hover / pressed raised */
  --line:    rgba(255,255,255,.08);   /* hairline border */
  --line-2:  rgba(255,255,255,.14);   /* stronger hairline (heads, focus rails) */

  /* ---- ONE committed neon accent (desaturated turf/acid green) ---- */
  --acc:      #2BD46E;  /* primary action / live / positive brand */
  --acc-dim:  #1E9E52;  /* pressed / borders of accent things */
  --acc-deep: #0E3A22;  /* accent tint fill on dark */
  --acc-ink:  #05140B;  /* text ON the accent */

  /* ---- gold: reserved for wins / payouts / leader (the Caesars move) ---- */
  --gold:      #E8C46A;
  --gold-dim:  #B8923C;
  --gold-deep: #2A2210;
  --gold-ink:  #1A1404;

  /* ---- semantic odds movement (distinct from the brand accent) ---- */
  --up:    #37D67A;   /* line shortened / positive move */
  --down:  #FF5C6C;   /* line drifted / loss / over-par */
  --live:  #36D1E0;   /* LIVE cyan pulse */
  --beer:  #E8C46A;   /* drink tap reuses gold family */
  --water: #36D1E0;   /* water tap reuses live cyan */

  /* ---- text ---- */
  --text:   #E8EDE9;  /* primary off-white */
  --muted:  #94A39A;  /* secondary */
  --faint:  #5E6E66;  /* tertiary / placeholders */

  /* ---- spacing (4px base) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* ---- one crisp radius vocabulary ---- */
  --radius:    8px;   /* cards, inputs, buttons */
  --radius-sm: 6px;   /* tight cells */
  --pill:      999px; /* chips / badges ONLY */

  /* ---- type stacks ---- */
  --font-display: "Clash Display", "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font:         "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ===== Daylight mode: high-contrast LIGHT theme for bright sun on the course.
   Dark text on light surfaces, darker accent/gold so they read outdoors. ===== */
body.daylight {
  --bg-0:    #EEF2EE;
  --surf-1:  #FFFFFF;
  --surf-2:  #E6ECE6;
  --surf-3:  #D8E0D8;
  --line:    rgba(0,0,0,.16);
  --line-2:  rgba(0,0,0,.28);
  --acc:      #15803D;   /* darker green — legible on white + as text */
  --acc-dim:  #0F6B32;
  --acc-deep: #D6F0DE;   /* light tint fill */
  --acc-ink:  #FFFFFF;   /* text ON the (now dark) accent */
  --gold:      #876612;  /* dark gold, readable on light */
  --gold-dim:  #A07C24;
  --gold-deep: #F6EBC9;
  --gold-ink:  #FFFFFF;
  --up:    #15803D;
  --down:  #C42230;
  --live:  #0C7585;
  --beer:  #876612;
  --water: #0C7585;
  --text:   #0B130E;
  --muted:  #3B453E;
  --faint:  #58635B;
}
body.daylight::before { opacity: .35; }   /* dial the film grain way down on light */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-0);
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: 82px;     /* room for bottom nav */
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* faint film grain over the canvas to kill digital flatness (anti-slop) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
main, .appbar, .bottomnav, .modal-backdrop { position: relative; z-index: 1; }

/* tabular numerals everywhere numbers appear */
.num, .mu-net, .mu-topar, .st-num, .settle-net, .payout-amt, .composite-badge,
.odds-badge, .bet-calc .num, .gps-yards b, .course-summary .num, .score-summary .num,
.appbar-pot, .m-prob, .market-row .num, .seg-chip b, .cur-hole-score input,
.odds-american, .live-odds { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* number-flavoured surfaces lean on the mono face */
.odds-american, .mu-net, .st-num, .payout-amt, .bet-calc .num, .gps-yards b,
.composite-badge, .appbar-pot, .live-odds { font-family: var(--font-mono); }

/* ===== Icons (Lucide sprite) ===== */
.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; flex: none; }
.icon-lg { width: 22px; height: 22px; }

/* ===== App bar ===== */
.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s4) var(--s3);
  background: linear-gradient(180deg, #10174A00 0%, transparent 100%), var(--surf-1);
  border-bottom: 1px solid var(--line);
}
.appbar-brand { display: flex; align-items: center; gap: var(--s3); }
.logo-dot {
  width: 38px; height: 38px; border-radius: var(--radius); flex: none;
  display: grid; place-items: center; color: var(--acc-ink);
  background: var(--acc); border: 1px solid var(--acc-dim);
}
.logo-dot .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.appbar-title { font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: .2px; line-height: 1.05; }
.appbar-sub { font-size: 12px; color: var(--muted); letter-spacing: .2px; }
.appbar-pot {
  background: var(--gold-deep); color: var(--gold); font-weight: 700;
  padding: 7px 13px; border-radius: var(--pill); font-size: 13px;
  border: 1px solid var(--gold-dim); letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.appbar-actions { display: flex; align-items: center; gap: var(--s2); }
.appbar-toggle { width: 38px; height: 38px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--surf-2); color: var(--gold); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.appbar-toggle .icon { width: 18px; height: 18px; }

/* ===== Views ===== */
main { padding: var(--s4); }
.view { animation: fade .2s ease; }
.hidden { display: none !important; }
@keyframes fade { from { opacity: 0; transform: translateY(4px);} to {opacity:1; transform:none;} }
.view-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.view-head h2 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
.view-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 var(--s4); line-height: 1.5; }

/* ===== Cards ===== */
.card-list { display: flex; flex-direction: column; gap: var(--s3); }
.card {
  background: var(--surf-1); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
}

/* ===== Buttons ===== */
.btn {
  border: 1px solid var(--line-2); border-radius: var(--radius); font-weight: 600;
  font-size: 14px; padding: 10px 15px; cursor: pointer; font-family: var(--font);
  background: var(--surf-2); color: var(--text);
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn .icon { width: 16px; height: 16px; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--acc); color: var(--acc-ink); border-color: var(--acc-dim); font-weight: 700; }
.btn-primary:hover { background: #34e07a; }
.btn-ghost { background: var(--surf-2); color: var(--text); }
.btn-ghost:hover { background: var(--surf-3); border-color: var(--line-2); }
.btn-danger-ghost { background: transparent; color: var(--down); border-color: rgba(255,92,108,.35); }
.btn-danger-ghost:hover { background: rgba(255,92,108,.10); }
.fab-inline { width: 100%; margin-top: var(--s4); padding: 14px; font-size: 16px; justify-content: center; }
.icon-btn {
  background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer; color: var(--muted);
  min-height: 38px; min-width: 38px; display: inline-grid; place-items: center;
  transition: transform .06s ease, color .15s ease, border-color .15s ease;
}
.icon-btn .icon { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }
.icon-btn:active { transform: scale(.94); }

/* ===== Player rows ===== */
.player-card { display: flex; align-items: center; gap: var(--s3); }
.avatar {
  width: 42px; height: 42px; border-radius: var(--radius); flex: none;
  display: grid; place-items: center; font-weight: 700; color: var(--acc);
  background: var(--acc-deep); border: 1px solid var(--acc-dim);
  font-family: var(--font-mono); font-size: 15px;
}
.player-main { flex: 1; min-width: 0; }
.player-name { font-weight: 600; }
.player-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.player-meta .mi { display: inline-flex; align-items: center; gap: 4px; }
.player-meta .icon { width: 13px; height: 13px; }
.composite-badge {
  background: var(--surf-2); color: var(--acc); border: 1px solid var(--line);
  font-weight: 700; border-radius: var(--radius-sm); padding: 6px 10px;
  font-size: 14px; white-space: nowrap;
}
.row-actions { display: flex; gap: 6px; }

/* ===== Team size control (roster) ===== */
.team-setup { display: flex; flex-direction: column; gap: 6px; }
.team-setup .ts-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.team-setup label { font-weight: 600; }
.ts-stepper { display: inline-flex; align-items: center; gap: 8px; }
.ts-stepper .step-btn {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  background: var(--surf-2); color: var(--acc); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
}
.ts-stepper .step-btn:active { background: var(--acc-deep); }
.ts-stepper .step-btn .icon { width: 18px; height: 18px; }
.ts-stepper input {
  width: 56px; text-align: center; font-family: var(--font-mono); font-weight: 700;
  font-size: 16px; padding: 7px 0; background: var(--surf-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ts-plan { margin: 0; }
.ts-money { display: inline-flex; align-items: center; gap: 2px; background: var(--surf-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 10px; }
.ts-money:focus-within { border-color: var(--acc); }
.ts-money-cur { color: var(--muted); font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.ts-money input { width: 64px; text-align: right; font-family: var(--font-mono); font-weight: 700;
  font-size: 16px; padding: 7px 0; background: none; border: 0; color: var(--text); }
.ts-money input:focus { outline: none; }

/* ===== Team cards ===== */
.team-card .team-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.team-name { font-weight: 700; font-size: 17px; font-family: var(--font-display); }
.team-sub { font-size: 12px; color: var(--muted); }
.odds-badge { text-align: right; background: var(--surf-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; line-height: 1.25; }
.odds-badge .big { font-weight: 700; font-size: 16px; font-family: var(--font-mono); }
.odds-badge .small { font-size: 11px; color: var(--muted); }
.longshot-tag {
  display: inline-flex; align-items: center; gap: 3px; background: var(--gold-deep); color: var(--gold);
  border: 1px solid var(--gold-dim); font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--pill); margin-left: 6px; vertical-align: middle; letter-spacing: .4px;
}
.longshot-tag .icon { width: 11px; height: 11px; }
.roster { display: flex; flex-direction: column; gap: 2px; }
.roster-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line); }
.roster-row:first-child { border-top: none; }
.roster-row span:last-child { font-family: var(--font-mono); color: var(--muted); }
.strength-bar { height: 6px; background: var(--surf-2); border-radius: var(--pill); margin-top: var(--s3); overflow: hidden; }
.strength-fill { height: 100%; background: var(--acc); }

/* ===== Scoring ===== */
.team-tabs { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); margin-bottom: var(--s3); }
.team-tab {
  white-space: nowrap; border: 1px solid var(--line); background: var(--surf-1);
  border-radius: var(--pill); padding: 8px 14px; font-weight: 600; font-size: 13px;
  cursor: pointer; color: var(--muted); font-family: var(--font);
  display: inline-flex; align-items: center; gap: 5px;
}
.team-tab .icon { width: 13px; height: 13px; color: var(--gold); }
.team-tab.active { background: var(--acc); color: var(--acc-ink); border-color: var(--acc-dim); font-weight: 700; }
.team-tab.active .icon { color: var(--acc-ink); }

.holes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-bottom: var(--s4); }
.hole-cell { background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.hole-cell label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.hole-cell input { width: 100%; border: none; text-align: center; font-size: 18px; font-weight: 700; color: var(--text); background: transparent; font-family: var(--font-mono); }
.hole-cell input:focus { outline: 2px solid var(--acc); border-radius: 6px; }
.score-summary { display: flex; justify-content: space-around; text-align: center; margin-bottom: var(--s4); gap: var(--s2); }
.score-summary .num { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }
.score-summary .lbl { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.score-summary .lbl .icon { width: 12px; height: 12px; }

.tap-list { display: flex; flex-direction: column; gap: var(--s2); }
.tap-row { display: flex; align-items: center; gap: var(--s2); background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.tap-name { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tap-btn { border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-weight: 700; padding: 8px 10px;
  cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; background: var(--surf-3); color: var(--text); font-family: var(--font); }
.tap-btn .icon { width: 14px; height: 14px; }
.tap-beer { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.tap-water { background: rgba(54,209,224,.12); color: var(--water); border-color: rgba(54,209,224,.4); }
.tap-minus { background: var(--surf-2); color: var(--muted); padding: 8px 10px; }
.tap-minus:active { background: var(--surf-3); }
.tap-count { min-width: 22px; text-align: center; font-weight: 700; font-family: var(--font-mono); }
.tap-group { display: flex; align-items: center; gap: 4px; }

/* ===== Scoring: per-hole logging ===== */
.seg-summary { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: var(--s2); }
.seg-chip { font-size: 11px; color: var(--muted); background: var(--surf-2); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 4px 10px; white-space: nowrap; }
.seg-chip b { font-weight: 700; color: var(--text); }
.hole-chips { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: var(--s3); }
.hole-chip {
  border: 1px solid var(--line); background: var(--surf-2); color: var(--muted);
  border-radius: var(--radius-sm); padding: 10px 0; font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: var(--font-mono); position: relative; min-height: 40px;
}
.hole-chip.played { background: var(--acc-deep); color: var(--acc); border-color: var(--acc-dim); }
.hole-chip.active { background: var(--acc); color: var(--acc-ink); border-color: var(--acc-dim); }
.cur-hole-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); background: var(--surf-2); }
.cur-hole-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.cur-hole-num { font-weight: 700; font-size: 18px; font-family: var(--font-display); }
.cur-hole-par { font-size: 12px; color: var(--muted); margin-left: 8px; }
.cur-hole-score { font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; text-align: right; }
.cur-hole-score input { width: 84px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  text-align: center; font-size: 20px; font-weight: 700; color: var(--text); background: var(--surf-1); padding: 6px; font-family: var(--font-mono); }
.cur-hole-score input:focus { outline: 2px solid var(--acc); }

/* ===== Round Mode: big one-thumb scoring ===== */
.rm-hole { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s3) 0; }
.rm-nav { width: 54px; height: 54px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius); }
.rm-nav .icon { width: 26px; height: 26px; }
.rm-nav:disabled { opacity: .3; }
.rm-hole-mid { text-align: center; }
.rm-hole-num { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.rm-hole-par { font-size: 13px; color: var(--muted); }
.rm-cap { font-size: 12px; color: var(--muted); margin: var(--s3) 0 6px; display: inline-flex; align-items: center; gap: 5px; }
.rm-cap .icon { width: 14px; height: 14px; }
.rm-scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rm-score { position: relative; min-height: 56px; border: 1px solid var(--line); background: var(--surf-2); color: var(--text);
  border-radius: var(--radius); font-family: var(--font-mono); font-weight: 700; font-size: 22px; cursor: pointer; }
.rm-score.is-par { border-color: var(--acc-dim); }
.rm-score.active { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.rm-par-lbl { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 9px; font-family: var(--font); font-weight: 600; color: var(--muted); }
.rm-score.active .rm-par-lbl { color: var(--acc-ink); }
.rm-taps { display: flex; flex-direction: column; gap: 4px; }
.rm-player { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.rm-name { font-weight: 700; font-size: 15px; flex-basis: 100%; }
.rm-counter { display: inline-flex; align-items: center; gap: 8px; }
.rm-counter.beer { margin-right: auto; }
.rm-minus { width: 40px; height: 48px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--surf-2); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rm-minus .icon { width: 16px; height: 16px; }
.rm-val { min-width: 26px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 20px; }
.rm-tap { min-width: 86px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--radius); font-weight: 700; font-size: 16px; cursor: pointer; border: 1px solid var(--line); font-family: var(--font); }
.rm-tap .icon { width: 20px; height: 20px; }
.rm-tap.beer { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.rm-tap.water { background: rgba(54,209,224,.14); color: var(--water); border-color: rgba(54,209,224,.45); }
.rm-tap:active { transform: scale(.96); }
.rm-next-big { width: 100%; margin-top: var(--s3); height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--acc); color: var(--acc-ink); border: none; border-radius: var(--radius); font-weight: 700; font-size: 16px; cursor: pointer; font-family: var(--font); }
.rm-next-big:disabled { opacity: .35; }
.rm-next-big .icon { width: 20px; height: 20px; }
.rm-jump { margin-top: var(--s3); }
.rm-jump summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.rm-explain { margin: 0 0 var(--s3); font-size: 12px; color: var(--muted); text-align: center; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.rm-explain .icon { width: 13px; height: 13px; vertical-align: -2px; }

/* ===== First-run welcome ===== */
.welcome-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(5,8,6,.78); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--s4); }
.welcome-card { max-width: 380px; width: 100%; text-align: center; padding: var(--s5) var(--s4); }
.welcome-logo { width: 52px; height: 52px; margin: 0 auto var(--s3); display: grid; place-items: center;
  background: var(--acc-deep); color: var(--acc); border: 1px solid var(--acc-dim); border-radius: var(--radius); }
.welcome-logo .icon { width: 26px; height: 26px; }
.welcome-card h2 { font-family: var(--font-display); margin: 0 0 6px; }
.welcome-card p { color: var(--muted); margin: 0 0 var(--s3); font-size: 14px; }
.welcome-rules { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--surf-2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s3); font-size: 14px; }
.welcome-rules span { display: inline-flex; align-items: center; gap: 8px; }
.welcome-rules .icon { width: 16px; height: 16px; }
.welcome-rules strong { color: var(--text); }
.welcome-note { font-size: 12px !important; background: var(--gold-deep); color: var(--gold); border: 1px solid var(--gold-dim);
  border-radius: var(--radius); padding: 8px 10px; display: flex; gap: 6px; align-items: flex-start; text-align: left; }
.welcome-note .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.welcome-card .btn { width: 100%; margin-top: var(--s2); justify-content: center; }

/* ===== Markets: segment toggle + book banner ===== */
.seg-toggle-row { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.seg-toggle { flex: 1; border: 1px solid var(--line); background: var(--surf-2); color: var(--muted);
  border-radius: var(--radius); padding: 8px 0; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--font); }
.seg-toggle.active { background: var(--acc); color: var(--acc-ink); border-color: var(--acc-dim); font-weight: 700; }
.book-banner { border-radius: var(--radius); padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: var(--s3);
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); }
.book-banner .icon { width: 16px; height: 16px; flex: none; }
.book-banner.open { background: var(--acc-deep); color: var(--acc); border-color: var(--acc-dim); }
.book-banner.closed { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.bet-cur { color: var(--live); }
.odds-help { background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: var(--s3); }
.odds-help summary { cursor: pointer; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.odds-help summary .icon { width: 14px; height: 14px; }
.odds-help p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ===== Leaderboard ===== */
.lb-card { display: flex; align-items: center; gap: var(--s3); }
.place { width: 38px; height: 38px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center;
  font-weight: 700; background: var(--surf-2); color: var(--muted); border: 1px solid var(--line); font-family: var(--font-mono); }
.place.gold { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.place.silver { background: var(--surf-3); color: var(--text); }
.lb-main { flex: 1; min-width: 0; }
.lb-name { font-weight: 700; }
.lb-meta { font-size: 12px; color: var(--muted); }
.lb-net { text-align: right; }
.lb-net .net { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }
.lb-net .net.under { color: var(--acc); }
.lb-net .net.over { color: var(--down); }

/* ===== Payout ===== */
.payout-card { display: flex; align-items: center; justify-content: space-between; }
.payout-amt { font-size: 26px; font-weight: 700; color: var(--gold); }
.payout-note { font-size: 12px; color: var(--muted); margin-top: var(--s2); }
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s2); }
.ach-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--pill);
  background: var(--surf-2); color: var(--muted); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 4px; }
.ach-badge .icon { width: 12px; height: 12px; }
.ach-badge.is-gold { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.payout-breakdown { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.payout-breakdown > div { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.payout-breakdown .pb-lbl { color: var(--muted); }
.payout-breakdown .pb-val { font-weight: 600; font-family: var(--font-mono); }
.payout-breakdown .pb-total { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; }
.payout-breakdown .pb-total .pb-lbl,
.payout-breakdown .pb-total .pb-val { color: var(--gold); font-weight: 700; }

/* ===== Course ===== */
.course-summary { display: flex; justify-content: space-around; text-align: center; }
.course-summary .num { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }
.course-summary .lbl { font-size: 11px; color: var(--muted); }
.course-grid { display: flex; flex-direction: column; gap: var(--s2); }
.course-row { display: grid; grid-template-columns: 34px 1fr 1fr 1.4fr; gap: var(--s2); align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.course-row:first-child { border-top: none; }
.course-hole { font-weight: 700; text-align: center; background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 0; font-family: var(--font-mono); }
.course-row label { font-size: 10px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.course-row input { width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; text-align: center; font-family: var(--font-mono); color: var(--text); background: var(--surf-2); }
.course-row input:focus { outline: 2px solid var(--acc); }

/* ===== Course geo: hole diagrams + live GPS ===== */
.geo-pick-label { font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.geo-pick select { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; font-family: var(--font); color: var(--text); background: var(--surf-2); }
.geo-note { color: var(--muted); font-size: 14px; line-height: 1.45; }
.geo-unmapped-h { font-weight: 700; color: var(--acc); font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.geo-unmapped p { margin: 6px 0 0; }
.geo-attrib { font-size: 11px; color: var(--faint); text-align: center; margin: 8px 0 2px; }

/* GPS control card */
.gps-card { background: var(--surf-1); }
.gps-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s3); }

/* ===== Satellite hole map (Leaflet) ===== */
.map-hole-select { display: flex; flex-wrap: wrap; gap: 6px; }
.map-hole-chip { min-width: 30px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surf-2); color: var(--acc); font-weight: 700; font-size: 13px; font-family: var(--font-mono); cursor: pointer; }
.map-hole-chip.active { background: var(--acc); color: var(--acc-ink); border-color: var(--acc-dim); }
.map-wrap { position: relative; margin-top: var(--s3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hole-map { width: 100%; height: 420px; background: var(--surf-2); }

/* baked hybrid hole cards (imagery mode) */
.hole-photo-wrap { position: relative; margin-top: var(--s3); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surf-2); }
.hole-photo { width: 100%; height: auto; display: block; }
.gps-dot-img { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #2f9be0; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(47,155,224,.30); pointer-events: none; }

/* On-image hole label — floats over the framed hole so each flyover is self-identifying. */
.hole-map-label {
  position: absolute; top: 10px; right: 10px; z-index: 500; pointer-events: none;
  display: flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: var(--pill);
  background: rgba(11,15,13,.78); border: 1px solid var(--line);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hole-map-label .hml-hole { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); letter-spacing: .2px; }
.hole-map-label .hml-par, .hole-map-label .hml-yds { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--acc); }
.hole-map-label .hml-dot { color: var(--faint); font-size: 12px; }

/* Active imagery-source indicator (USGS NAIP vs MapTiler). */
.map-source-pill {
  position: absolute; bottom: 10px; left: 10px; z-index: 500; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--pill);
  background: rgba(11,15,13,.72); border: 1px solid var(--line);
  color: var(--muted); font-size: 11px; font-weight: 600;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.map-source-pill .icon { width: 13px; height: 13px; color: var(--live); }
.hole-map .leaflet-container { font-family: var(--font); background: var(--surf-2); }
.ring-label { color: #fff; font-weight: 700; font-size: 11px; text-align: center; text-shadow: 0 0 3px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.85); pointer-events: none; font-family: var(--font-mono); }
.fcb-label { color: #fff; font-weight: 700; font-size: 14px; text-align: center; text-shadow: 0 0 3px rgba(0,0,0,.9); pointer-events: none; }
/* on-line distance markers (100/150/200/250 to green), text set beside the dot */
.dist-label { color: #fff; font-weight: 700; font-size: 11px; text-align: left; white-space: nowrap; text-shadow: 0 0 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); pointer-events: none; font-family: var(--font-mono); }
.lg-ring { background: transparent; border: 2px dashed var(--muted); border-radius: 50%; }
.lg-line { background: #fff; height: 3px; border-radius: 2px; }

.gps-status { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--muted); flex: 1; min-width: 180px; line-height: 1.35; }
.gps-badge { display: inline-flex; line-height: 1.1; color: var(--live); }
.gps-badge .icon { width: 16px; height: 16px; }

/* Hole cards */
.hole-list { display: flex; flex-direction: column; gap: var(--s2); }
.hole-head { width: 100%; display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: var(--s3); background: none; border: none; padding: 4px 2px; cursor: pointer; font-family: var(--font); color: var(--text); }
.hole-no { font-weight: 700; text-align: center; background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 0; font-size: 15px; font-family: var(--font-mono); }
.hole-pary { text-align: left; font-weight: 600; color: var(--text); font-size: 14px; }
.hole-toggle { color: var(--acc); font-size: 13px; text-align: right; }
.hole-card.open { outline: 2px solid var(--acc); }
.hole-body { margin-top: var(--s3); }
.hole-diagram { width: 100%; }
.hole-svg { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.hd-bg { fill: var(--surf-2); }
.hd-fairway { fill: #1e5e3a; opacity: .9; }
.hd-green { fill: var(--acc); stroke: var(--acc-dim); stroke-width: 1; }
.hd-bunker { fill: #c9a86a; stroke: #a9863f; stroke-width: .8; }
.hd-water { fill: var(--water); opacity: .5; stroke: #1f7fbf; stroke-width: .8; }
.hd-line { fill: none; stroke: #eafff1; stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; opacity: .75; }
.hd-tee { fill: #0b3d2e; stroke: #fff; stroke-width: 1.5; }
.hd-flag { fill: var(--down); stroke: #fff; stroke-width: 1.5; }

/* GPS to-green yardages */
.gps-yards { display: flex; justify-content: space-around; gap: var(--s2); margin: var(--s3) 0 var(--s2); }
.gps-yards .yd { display: flex; flex-direction: column; align-items: center; flex: 1; padding: 8px 0; border-radius: var(--radius-sm); background: var(--surf-2); border: 1px solid var(--line); }
.gps-yards .yd b { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.gps-yards .yd span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.gps-yards .yd-center b { color: var(--acc); font-size: 28px; }
.yd-wait { color: var(--muted); font-size: 13px; font-style: italic; padding: 10px 0; text-align: center; width: 100%; }

/* legend */
.hole-legend { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.hole-legend span { display: inline-flex; align-items: center; gap: 4px; }
.hole-legend .lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lg-tee { background: #0b3d2e; border: 1px solid #fff; border-radius: 50%; }
.lg-green { background: var(--acc); }
.lg-bunker { background: #c9a86a; }
.lg-water { background: var(--water); }

/* ===== Side bets ===== */
.sidebet-card label { display: block; font-size: 12px; color: var(--muted); margin-top: var(--s3); }
.sidebet-card select, .sidebet-card input {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; margin-top: 4px; font-family: var(--font); background: var(--surf-2); color: var(--text);
}
.sidebet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.sidebet-pot { font-weight: 700; color: var(--gold); white-space: nowrap; font-family: var(--font-mono); }
.sidebet-name-input { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); color: var(--text); background: var(--surf-2); }
.sidebet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.sidebet-grid label { margin-top: var(--s2); }
.sidebet-delete { background: transparent; color: var(--down); border: 1px solid rgba(255,92,108,.3); border-radius: var(--radius-sm);
  padding: 6px 9px; cursor: pointer; flex: none; display: inline-grid; place-items: center; }
.sidebet-delete .icon { width: 16px; height: 16px; }
.sidebet-fill { width: 100%; margin-top: var(--s2); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px; cursor: pointer; font-size: 13px; }
.sidebet-fill .icon { width: 15px; height: 15px; }
.sidebet-explain { margin-top: var(--s2); font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ===== Markets ===== */
.market-card h3 { margin: 0 0 var(--s2); font-size: 16px; font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; gap: 7px; }
.market-card h3 .icon { width: 18px; height: 18px; color: var(--acc); }
.market-card .market-sub { font-size: 12px; color: var(--muted); margin: 0 0 var(--s3); }
.market-table { display: flex; flex-direction: column; }
.market-row { display: grid; grid-template-columns: 1.5fr .8fr .85fr .9fr; gap: 6px; align-items: center;
  font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); }
.market-row .m-open { color: var(--muted); }
.market-row:first-child { border-top: none; }
.market-row.head { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; }
.market-row .m-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-row .m-prob { font-weight: 700; color: var(--acc); font-family: var(--font-mono); }
.market-row .num { text-align: right; font-family: var(--font-mono); }
/* odds-move flash (line shortened green / drifted red) */
.odds-american { transition: color .2s ease; display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; }
.odds-american .mv { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
@keyframes flashUp { 0% { color: var(--up); } 100% { color: inherit; } }
@keyframes flashDown { 0% { color: var(--down); } 100% { color: inherit; } }
.flash-up { animation: flashUp .9s ease; }
.flash-down { animation: flashDown .9s ease; }

/* ===== Bet ledger ===== */
.bet-card .bet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.bet-card label { display: block; font-size: 12px; color: var(--muted); margin-top: var(--s2); }
.bet-card select, .bet-card input {
  width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; margin-top: 4px; font-family: var(--font); background: var(--surf-2); color: var(--text); }
.bet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.bet-calc { display: flex; gap: var(--s4); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.bet-calc .bc { text-align: center; }
.bet-calc .bc .num { font-size: 18px; font-weight: 700; font-family: var(--font-mono); }
.bet-calc .bc .lbl { font-size: 10px; color: var(--muted); }
.bet-net.win { color: var(--acc); }
.bet-net.lose { color: var(--down); }
/* ----- Lock-in + live auto-grading ----- */
.bet-card.bet-locked { border-color: var(--acc-dim); }
.bet-bettor-ro { font-weight: 700; font-size: 15px; color: var(--text); }
.bet-lock-tag { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; margin-left: auto; margin-right: 8px; }
.bet-lock-tag .icon { width: 13px; height: 13px; }
.bet-terms { font-size: 13px; color: var(--text); margin-top: 6px; }
.bet-terms strong { color: var(--acc); }
.bet-vs { font-size: 12px; color: var(--muted); margin-top: 3px; }
.bet-vs strong { color: var(--text); font-weight: 600; }
.bet-lockrow { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.bet-lockrow .hint { flex: 1; margin: 0; }
.bet-lockin { flex: none; white-space: nowrap; }
.bet-lockin:disabled { opacity: .45; cursor: not-allowed; }
.bet-lockin .icon, .bet-status .icon { width: 14px; height: 14px; }
.bet-status-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.bet-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--pill); border: 1px solid currentColor; letter-spacing: .2px; }
.bet-status.winning, .bet-status.won { color: var(--acc); }
.bet-status.won { background: var(--acc-deep); }
.bet-status.losing, .bet-status.lost { color: var(--down); }
.bet-status.pend, .bet-status.void { color: var(--muted); }
.bet-edit-btn { margin-left: auto; font-size: 12px; padding: 4px 10px; }

/* ===== Settings ===== */
.settings-card label { display: block; margin-bottom: var(--s4); font-size: 13px; font-weight: 600; color: var(--text); }
.settings-card input, .settings-card select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15px; margin-top: 4px; font-family: var(--font); background: var(--surf-2); color: var(--text); }
.settings-card input:disabled { background: var(--surf-1); cursor: not-allowed; color: var(--faint); }
.settings-derived { background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; margin-bottom: var(--s4); }
.settings-derived strong { font-family: var(--font-mono); }
.settings-group { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s2);
  margin-bottom: var(--s5); background: var(--surf-1); }
.settings-group-h { font-weight: 700; color: var(--acc); font-size: 15px; margin-bottom: var(--s3); font-family: var(--font-display);
  display: flex; align-items: center; gap: 7px; }
/* ----- per-hole par editor ----- */
.par-editor { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: var(--s2) 0 var(--s3); }
@media (min-width: 520px) { .par-editor { grid-template-columns: repeat(9, 1fr); } }
.par-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.par-cell .ph { font-size: 10px; color: var(--muted); font-weight: 600; }
.par-cell input { width: 100%; text-align: center; padding: 7px 0; margin-top: 0; font-family: var(--font-mono);
  font-weight: 700; font-size: 15px; -moz-appearance: textfield; }
.par-cell input::-webkit-outer-spin-button, .par-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.settings-group-h .icon { width: 17px; height: 17px; }
.settings-group label { color: var(--text); }
.pwa-hint { background: var(--surf-2); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: var(--s3); display: flex; align-items: flex-start; gap: 8px; }
.pwa-hint .icon { width: 16px; height: 16px; flex: none; color: var(--acc); margin-top: 2px; }
.pwa-hint strong { color: var(--text); }

/* ===== Roster import + data export ===== */
.import-card { padding: var(--s3) var(--s4); }
.import-summary { font-weight: 700; font-size: 15px; color: var(--acc); cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 7px; font-family: var(--font-display); }
.import-summary::-webkit-details-marker { display: none; }
.import-summary .icon { width: 16px; height: 16px; }
.import-summary .chev { margin-left: auto; transition: transform .2s ease; }
details[open] > .import-summary .chev { transform: rotate(180deg); }
.import-card code { background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: var(--font-mono); }
.import-example { background: var(--surf-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; overflow-x: auto; margin: 0 0 var(--s3);
  font-family: var(--font-mono); white-space: pre; }
.import-label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: var(--s3); }
.import-label textarea { width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-mono);
  background: var(--surf-2); color: var(--text); resize: vertical; }
.import-label textarea:focus { outline: 2px solid var(--acc); }
.import-filerow { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.import-filebtn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.import-filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.import-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.import-result { margin-top: var(--s3); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); }
.import-result.ok { background: var(--acc-deep); color: var(--acc); border-color: var(--acc-dim); }
.import-result.warn { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.import-result.err { background: rgba(255,92,108,.1); color: var(--down); border-color: rgba(255,92,108,.4); }
.import-result ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.data-card { display: flex; flex-direction: column; }
.data-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,8,7,.72); z-index: 50;
  display: grid; place-items: center; padding: var(--s4); backdrop-filter: blur(2px);
}
.modal { background: var(--surf-1); border: 1px solid var(--line-2); border-radius: var(--radius); padding: var(--s5); width: 100%; max-width: 420px; }
.modal h3 { margin: 0 0 var(--s4); font-family: var(--font-display); font-weight: 700; }
.modal label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--s4); }
.modal input[type=text], .modal input[type=number] { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 16px; margin-top: 4px; font-family: var(--font); background: var(--surf-2); color: var(--text); }
.modal input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--acc); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }

/* ===== Bottom nav ===== */
.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 720px; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surf-1); border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.navbtn {
  border: none; background: none; cursor: pointer; font-family: var(--font);
  padding: 10px 1px 12px; font-size: 10px; font-weight: 600; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  white-space: nowrap; position: relative; letter-spacing: .2px;
  transition: color .15s ease;
}
.navbtn .icon { width: 21px; height: 21px; }
.nav-emoji { font-size: 20px; line-height: 21px; height: 21px; }
.navbtn.active { color: var(--acc); }
.navbtn.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--acc); border-radius: var(--pill); }

/* ===== Section titles + sub-tabs (merged views) ===== */
.section-title { font-size: 16px; font-weight: 700; color: var(--text); font-family: var(--font-display);
  margin: var(--s5) 0 var(--s2); display: flex; align-items: center; gap: 7px; letter-spacing: -.2px; }
.section-title .icon { width: 18px; height: 18px; color: var(--acc); }
.action-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s5); }
.action-head .section-title { margin: 0; }
.subtabs { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.subtab { flex: 1; border: 1px solid var(--line); background: var(--surf-2);
  color: var(--muted); border-radius: var(--radius); padding: 9px 0; font-weight: 600;
  font-size: 13px; cursor: pointer; font-family: var(--font); }
.subtab.active { background: var(--acc); color: var(--acc-ink); border-color: var(--acc-dim); font-weight: 700; }
.subpanel { animation: fade .18s ease; }

/* ===== Matchup board ===== */
.matchup-list { display: flex; flex-direction: column; gap: var(--s3); }
.matchup-card { padding: var(--s3) var(--s4); }
.matchup-card.is-leader { border-color: var(--gold-dim); background: linear-gradient(180deg, var(--gold-deep) 0%, var(--surf-1) 60%); }
.mu-top { display: flex; align-items: center; gap: var(--s3); }
.mu-rank { width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm); display: grid;
  place-items: center; font-weight: 700; font-size: 14px; font-family: var(--font-mono);
  background: var(--surf-2); color: var(--muted); border: 1px solid var(--line); }
.matchup-card.is-leader .mu-rank { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.mu-id { flex: 1; min-width: 0; }
.mu-name { font-weight: 700; font-size: 18px; line-height: 1.15; font-family: var(--font-display); }
.mu-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mu-score { text-align: right; flex: none; }
.mu-net { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.mu-topar { font-size: 13px; font-weight: 700; margin-top: 2px; color: var(--muted); }
.mu-topar.under { color: var(--acc); }
.mu-topar.over { color: var(--down); }
.matchup-card .roster { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }

/* ===== Standings table ===== */
.standings-card { padding: var(--s3) var(--s4); }
.st-potline { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s3); font-size: 15px; }
.st-potline strong { color: var(--gold); font-size: 17px; font-family: var(--font-mono); }
.standings-table { display: flex; flex-direction: column; }
.st-row { display: grid; grid-template-columns: 22px 1.7fr .7fr .5fr .8fr .8fr .9fr;
  gap: 6px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.st-row:first-child { border-top: none; }
.st-row.is-leader { background: linear-gradient(90deg, var(--gold-deep) 0%, transparent 70%);
  margin: 0 calc(var(--s4) * -1); padding-left: var(--s4); padding-right: var(--s4);
  border-radius: var(--radius-sm); }
.st-head { font-size: 10px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .4px; padding: 4px 0 8px; }
.st-rank { font-weight: 700; text-align: center; font-family: var(--font-mono); }
.st-rank.gold { color: var(--gold); }
.st-rank.silver { color: var(--text); }
.st-team { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.st-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-meta { font-size: 10px; color: var(--muted); flex-basis: 100%; }
.st-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.st-head .st-num, .st-head .st-team { text-align: right; font-weight: 700; font-family: var(--font); }
.st-head .st-team { text-align: left; }
.st-topar.under { color: var(--acc); }
.st-topar.over { color: var(--down); }
.st-open { color: var(--muted); }
.st-live { color: var(--acc); font-weight: 700; }
.st-proj { color: var(--gold); font-weight: 700; }

/* ===== Bookie ===== */
.bookie-banner { border-radius: var(--radius); padding: 10px 12px; font-size: 12.5px;
  line-height: 1.4; margin-bottom: var(--s3); border: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 8px; }
.bookie-banner .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.bookie-banner.on { background: var(--gold-deep); color: var(--gold); border-color: var(--gold-dim); }
.bookie-banner.off { background: var(--surf-2); color: var(--muted); }
.bookie-banner strong { color: var(--text); }
.bookie-banner.on strong { color: var(--gold); }

.market-row.has-bookie { grid-template-columns: 1.35fr .62fr .7fr .72fr .85fr; }
.market-row .m-rec { color: var(--muted); }
.market-row .m-book { display: flex; justify-content: flex-end; }
.odds-override { width: 64px; padding: 5px 6px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; text-align: right;
  font-family: var(--font-mono); color: var(--text); background: var(--surf-2); }
.odds-override:focus { outline: 2px solid var(--acc); }
.odds-override.overridden { border-color: var(--gold-dim); background: var(--gold-deep); color: var(--gold); }

/* ===== Settlement ===== */
.settle-h { margin: 0 0 var(--s2); font-size: 16px; font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; gap: 7px; }
.settle-h .icon { width: 17px; height: 17px; color: var(--acc); }
.settle-table { display: flex; flex-direction: column; }
.settle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  font-size: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.settle-row:first-child { border-top: none; }
.settle-name { font-weight: 600; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settle-row { align-items: flex-start; }
.settle-breakdown { font-weight: 400; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.warn-hint { color: var(--gold); border-left: 2px solid var(--gold); padding-left: 8px; margin: 8px 0; }
.settle-net { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-mono); }
.settle-net.win { color: var(--acc); }
.settle-net.lose { color: var(--down); }

/* ===== Overtime ===== */
.ot-card { border: 1px solid var(--gold); }
.ot-head { display: flex; justify-content: space-between; align-items: center; }
.ot-round { margin-top: var(--s3); }
.ot-round h4 { margin: 0 0 4px; font-size: 14px; }
.ot-entry { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.ot-team { font-weight: 700; min-width: 84px; }
.ot-gross { display: inline-flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.ot-gross input { width: 62px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  padding: 6px; background: var(--surf-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 2px; }
.ot-taps { display: inline-flex; align-items: center; gap: 6px; }
.ot-taps span { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 700; }
.ot-taps .icon { width: 14px; height: 14px; }
.step-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--surf-2); color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.step-btn .icon { width: 16px; height: 16px; }
.ot-net { margin-left: auto; font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
.ot-result { margin-top: var(--s3); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ot-result.win { color: var(--gold); }
.settle-transfer span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===== Live pulse dot + confetti ===== */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(54,209,224,.6); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(54,209,224,.55); } 70% { box-shadow: 0 0 0 7px rgba(54,209,224,0); } 100% { box-shadow: 0 0 0 0 rgba(54,209,224,0); } }
.live-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  color: var(--live); text-transform: uppercase; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* skeleton shimmer for the live map / odds load */
.skeleton { position: relative; overflow: hidden; background: var(--surf-2); border-radius: var(--radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ===== Live sync (multi-phone) ===== */
/* status line in Settings: scoped dot colors override the global cyan pulse */
.live-status { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 2px;
  padding: 8px 10px; background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: var(--s3); }
.live-status strong { color: var(--text); }
.live-status .live-dot { animation: none; box-shadow: none; background: var(--line-2); }
.live-status .live-dot.live-on { background: var(--acc); animation: pulse-green 1.6s ease-out infinite; }
.live-status .live-dot.live-pending { background: #E0A030; animation: pulse-amber 1.6s ease-out infinite; }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(43,212,110,.5); } 70% { box-shadow: 0 0 0 7px rgba(43,212,110,0); } 100% { box-shadow: 0 0 0 0 rgba(43,212,110,0); } }
@keyframes pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(224,160,48,.5); } 70% { box-shadow: 0 0 0 7px rgba(224,160,48,0); } 100% { box-shadow: 0 0 0 0 rgba(224,160,48,0); } }

/* appbar live badge */
.appbar-toggle.live-badge { width: auto; padding: 0 10px; gap: 6px; display: flex; align-items: center;
  color: var(--acc); font-weight: 700; font-size: 12px; letter-spacing: .3px; }
.appbar-toggle.live-badge .live-dot { background: var(--acc); animation: pulse-green 1.6s ease-out infinite; margin-right: 0; }
.appbar-toggle.live-badge.live-pending { color: #E0A030; }
.appbar-toggle.live-badge.live-pending .live-dot { background: #E0A030; animation: pulse-amber 1.6s ease-out infinite; }
.appbar-toggle.live-badge.hidden { display: none; }

/* create / join + room sharing controls */
.live-join-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 2px 0 var(--s2); }
.live-join-row .btn { flex: 0 0 auto; }
.live-or { color: var(--muted); font-size: 13px; }
.live-code-input { width: 92px; text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-mono);
  text-align: center; font-weight: 700; padding: 8px; background: var(--surf-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); color: var(--text); }
.live-room-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin: 2px 0 var(--s2); flex-wrap: wrap; }
.live-room-code { font-size: 13px; color: var(--muted); }
.live-room-code strong { font-family: var(--font-mono); letter-spacing: 2px; font-size: 17px; color: var(--acc); }
.live-link { width: 100%; font-family: var(--font-mono); font-size: 12px; padding: 8px; margin-bottom: var(--s2);
  background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); }
.live-share { display: flex; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; }
.live-share .btn { flex: 1 1 auto; }

/* ===== Team naming (captain auto-name + rename) ===== */
.mu-rename { background: none; border: 0; padding: 2px 4px; margin-left: 4px; cursor: pointer;
  color: var(--muted); vertical-align: middle; border-radius: var(--radius-sm); line-height: 0; }
.mu-rename:hover { color: var(--acc); background: var(--surf-2); }
.mu-rename .icon { width: 14px; height: 14px; }
.st-rename { background: none; border: 0; padding: 0 3px; margin-left: 3px; cursor: pointer;
  color: var(--muted); vertical-align: middle; border-radius: var(--radius-sm); line-height: 0; }
.st-rename:hover { color: var(--acc); }
.st-rename .icon { width: 13px; height: 13px; }
.cap-tag { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; margin-left: 5px; }
.roster-row .icon { width: 12px; height: 12px; color: var(--gold); vertical-align: middle; margin-right: 1px; }

/* ===== Manual team picking (Roster tab) ===== */
.draft-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.draft-btn { background: var(--surf-2); color: var(--muted); border: 0; padding: 7px 12px; font-weight: 700; font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.draft-btn + .draft-btn { border-left: 1px solid var(--line-2); }
.draft-btn .icon { width: 14px; height: 14px; }
.draft-btn.active { background: var(--acc); color: var(--acc-ink); }
.player-team-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ptr-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.player-team-sel { background: var(--surf-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 13px; font-weight: 600; max-width: 190px; }

/* tap confirmation pulse — a beer/water/score tap flashes so a sunlit, drinks-in thumb sees it counted */
@keyframes tapPulse { 0% { transform: scale(1); } 35% { transform: scale(1.4); color: var(--acc); } 100% { transform: scale(1); } }
.tap-pulse { animation: tapPulse .22s ease; will-change: transform; }