/* Cormorant: splash screen only — do not use elsewhere */
/* ── Reset & Root ─────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  font-size:16px;

  /* ── Logo data URIs ──────────────────────────────────────────── */
  --logo-filled: url("/assets/looper-logo.png");
  --navy:#212851;--mid:#1a2145;--card:#243060;--border:#2e3a6e;
  --gold:#fff1cf;--gold2:#ffe8a0;--pale:#fff8e6;
  --cream:#f0e8d0;--dim:#8899bb;--dimmer:#5a6490;
  --birdie:#3498db;--par:#2ecc71;--bogey:#e67e22;--double:#e74c3c;--eagle:#f1c40f;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  /* ── White-alpha surface/border tokens ──────────────────────── */
  --wa-015:rgba(255,255,255,.015);
  --wa-03: rgba(255,255,255,.03);
  --wa-04: rgba(255,255,255,.04);
  --wa-05: rgba(255,255,255,.05);
  --wa-06: rgba(255,255,255,.06);
  --wa-07: rgba(255,255,255,.07);
  --wa-08: rgba(255,255,255,.08);
  --wa-1:  rgba(255,255,255,.1);
  --wa-12: rgba(255,255,255,.12);
  --wa-14: rgba(255,255,255,.14);
  --wa-15: rgba(255,255,255,.15);
  --wa-2:  rgba(255,255,255,.2);
  --chart-tick:#8899bb;
  --chart-grid:rgba(255,255,255,.3);

  /* ── Text size scale ───────────────────────────────────────── */
  --text-xs:  9px;
  --text-sm:  11px;
  --text-base:13px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  24px;
  --text-2xl: 28px;
  --text-3xl: 36px;
}
html{background:var(--navy);min-height:100vh;min-height:-webkit-fill-available}
html,body{height:100%;overflow:hidden}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--navy);
  color:var(--cream);
  display:flex;flex-direction:column;
  overscroll-behavior:none;
  touch-action:manipulation;
}

/* Prevent iOS auto-zoom on input focus (requires font-size ≥ 16px) */
input,select,textarea{font-size:16px}

/* ── Scrollable pages ─────────────────────────────────────────── */
.app{
  flex:1;overflow-y:scroll;overflow-x:hidden;
  padding-bottom:calc(90px + var(--safe-bot));
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

/* ── Header ───────────────────────────────────────────────────── */
.hdr{
  background:var(--navy);
  border-bottom:1px solid var(--wa-06);
  padding:calc(var(--safe-top) + 12px) 16px 12px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;position:relative;
}
.hdr-eyebrow{
  font-family:'DM Sans',sans-serif;
  font-size:9px;letter-spacing:4px;color:var(--gold);
  text-transform:uppercase;margin-bottom:3px;
}
.hdr-title{
  font-family:'DM Sans',sans-serif;
  font-size:22px;font-weight:700;color:var(--cream);
  letter-spacing:-.2px;line-height:1;
}
.hdr-sub{font-size:11px;color:var(--dim);margin-top:3px}
.sync-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--wa-04);border:1px solid var(--wa-08);
  border-radius:20px;padding:3px 10px;font-size:10px;color:var(--dim);
  margin-top:6px;
}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--par);flex-shrink:0}
.sdot.syncing{background:var(--gold);animation:pulse 1s infinite}
.sdot.err{background:var(--double)}
.sdot.warn{background:var(--bogey)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ── Nav ──────────────────────────────────────────────────────── */
.nav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--navy);
  border-top:1px solid var(--border);
  display:flex;
  padding-bottom:var(--safe-bot);
  z-index:200;
}
.nb{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:4px 2px 4px;
  color:var(--dimmer);border:none;background:transparent;
  cursor:pointer;font-family:'DM Sans',sans-serif;
  font-size:9px;font-weight:500;letter-spacing:.2px;
  transition:color .2s,transform 80ms;min-width:44px;
}
.nb:active{transform:scale(.92)}
.nb.active{color:var(--gold)}
.ni{
  font-size:18px;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;
  transition:background .2s;position:relative;margin-bottom:1px;
}
.ni svg{width:20px;height:20px;stroke:currentColor;transition:stroke-width .15s}
.nb.active .ni svg{stroke-width:2.5}
.nb.active .ni{background:rgba(255,241,207,.1);}
.nb.active .ni::after{
  content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--gold);
}
/* Play CTA nav button — 30% larger, coloured box */
.nb-play-cta{flex:1.4;position:relative;margin:-8px 4px 0}
.nb-play-cta .ni{width:40px;height:40px;border-radius:14px;background:transparent;border:1.5px solid var(--gold);color:#f0e8d0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nb-play-cta .ni img{background:transparent}
.nb-play-cta .ni svg{width:22px;height:22px;stroke:#f0e8d0}
.nb-play-cta{color:var(--cream);font-weight:600;font-size:10px}
.nb-play-cta.active .ni{background:transparent;border-color:var(--gold)}
.nb-play-cta.active{color:var(--cream)}
.nb-play-cta.active .ni::after{display:none}
[data-theme="light"] .nb-play-cta .ni{background:transparent;border-color:#212851;color:#f0e8d0}
[data-theme="light"] .nb-play-cta .ni svg{stroke:#f0e8d0}
[data-theme="light"] .nb-play-cta{color:#212851}
[data-theme="light"] #play-tab-flag{content:url('/assets/branding/fluff-navy.png')}

/* ── Section / Card ───────────────────────────────────────────── */
.sec{padding:16px}
.card{
  background:var(--card);
  border:1px solid var(--wa-06);
  border-radius:14px;padding:16px;margin-bottom:13px;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,241,207,.25),transparent);
}
.ct{
  font-family:'DM Sans',sans-serif;
  font-size:9px;letter-spacing:2.5px;color:var(--gold);
  text-transform:uppercase;margin-bottom:12px;
}

/* ── Inputs ───────────────────────────────────────────────────── */
label{font-size:12px;color:var(--dim);display:block;margin-bottom:4px}
input[type=text],input[type=number],input[type=password],input[type=email],select,textarea{
  width:100%;background:var(--wa-04);
  border:1px solid var(--wa-1);
  border-radius:9px;color:var(--cream);font-size:16px;
  padding:14px 14px;font-family:'DM Sans',sans-serif;
  outline:none;transition:border-color .2s;
  -webkit-appearance:none;appearance:none;
}
input:focus,select:focus{border-color:rgba(255,241,207,.6)}
select option{background:var(--mid)}
input[type=checkbox]{width:auto;accent-color:var(--gold)}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--gold);color:var(--navy);
  font-size:13px;font-weight:500;letter-spacing:.3px;
  padding:12px 18px;border:none;border-radius:10px;
  cursor:pointer;width:100%;font-family:'DM Sans',sans-serif;
  transition:background .15s,transform .1s;
}
.btn:hover{background:var(--gold2)}
.btn{transition:background .15s,transform .15s cubic-bezier(.2,.8,.4,1),box-shadow .15s}
.btn:active{transform:scale(.95);box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
.btn-o{background:transparent;border:1px solid rgba(255,241,207,.5);color:var(--gold);transition:background .2s,transform .15s cubic-bezier(.2,.8,.4,1),border-color .2s}
.btn-o:hover{background:rgba(255,241,207,.08)}
.btn-o:active{transform:scale(.97);background:rgba(255,241,207,.12);border-color:rgba(255,241,207,.7)}
.btn-ghost{background:var(--wa-04);border:1px solid var(--wa-08);color:var(--dim);transition:background .15s,transform 80ms ease}
.btn-ghost:hover{border-color:var(--wa-2)}
.btn-ghost:active{transform:scale(.93)}
.divider{display:flex;align-items:center;gap:10px;margin:14px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--wa-07)}
.divider span{font-size:10px;color:var(--dimmer);letter-spacing:1px;text-transform:uppercase}


/* ── Live Round mode ──────────────────────────────────────────── */
#pg-live{padding:0}
.live-hdr{
  background:var(--mid);border-bottom:1px solid var(--wa-07);
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
}
.live-hole-nav{display:flex;align-items:center;gap:10px}
.live-hole-num{
  font-size:36px;font-weight:700;
  color:var(--gold);line-height:1;min-width:32px;text-align:center;
}
.live-nav-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--wa-06);border:1px solid var(--wa-1);
  color:var(--cream);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.live-nav-btn:hover{background:var(--wa-12)}
.live-nav-btn:disabled{opacity:.3;cursor:default}
.live-progress{
  display:flex;gap:3px;align-items:center;
}
.live-pip{
  width:8px;height:8px;border-radius:50%;
  background:var(--wa-12);border:1px solid var(--wa-1);
  flex-shrink:0;transition:all .2s;cursor:pointer;
}
.live-pip.done{background:var(--gold);border-color:var(--gold)}
.live-pip.active{background:var(--cream);border-color:var(--cream);transform:scale(1.3)}
.live-pip.birdie-pip{background:var(--birdie);border-color:var(--birdie)}
.live-pip.eagle-pip{background:var(--eagle);border-color:var(--eagle)}
.live-pip.bogey-pip{background:var(--bogey);border-color:var(--bogey)}
.live-pip.double-pip{background:var(--double);border-color:var(--double)}
.live-body{padding:16px}
.live-hole-info{
  display:flex;gap:10px;margin-bottom:18px;
}
.live-info-pill{
  flex:1;background:var(--card);border:1px solid var(--wa-06);
  border-radius:12px;padding:12px 8px;text-align:center;
}
.live-info-val{
  font-size:26px;font-weight:700;
  color:var(--gold);line-height:1;display:block;
}
.live-info-lbl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px;display:block}
.live-field{margin-bottom:16px}
.live-field label{
  font-size:10px;color:var(--dim);text-transform:uppercase;
  letter-spacing:2px;display:block;margin-bottom:8px;
}
.live-score-row{display:flex;gap:8px;align-items:center;justify-content:center}
.live-score-btn{
  width:44px;height:44px;border-radius:12px;
  background:var(--mid);border:none;
  color:var(--cream);font-size:24px;font-weight:300;
  cursor:pointer;transition:transform 80ms ease;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.live-score-btn:active{transform:scale(0.93)}
.live-score-val{
  font-size:26px;font-weight:700;
  color:var(--gold);min-width:52px;text-align:center;line-height:1;
}
.live-toggle-pill{
  width:100%;padding:8px 4px;border-radius:20px;font-size:12px;font-weight:500;
  font-family:'DM Sans',sans-serif;cursor:pointer;
  background:var(--wa-05);border:1.5px solid var(--wa-15);color:var(--dim);
  transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.live-toggle-pill.active-fir{
  background:rgba(46,204,113,.12);border-color:var(--par);color:var(--par);
}
.live-toggle-pill.active-gir{
  background:rgba(52,152,219,.12);border-color:var(--birdie);color:var(--birdie);
}
@keyframes scoreBounce{
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  70%{transform:scale(0.9)}
  100%{transform:scale(1)}
}
.score-bounce{animation:scoreBounce 210ms ease}
.live-toggle-row{display:flex;gap:8px}
.live-toggle-btn{
  flex:1;padding:10px;border-radius:10px;font-size:12px;font-weight:500;
  border:1px solid var(--wa-08);background:var(--wa-04);
  color:var(--dim);cursor:pointer;transition:all .15s;text-align:center;
  font-family:'DM Sans',sans-serif;
}
.live-toggle-btn.on-yes{background:rgba(46,204,113,.15);border-color:var(--birdie);color:var(--birdie)}
.live-toggle-btn.on-no{background:rgba(231,76,60,.12);border-color:var(--double);color:var(--double)}
.live-putt-row{display:flex;gap:8px;align-items:center;justify-content:center}
.live-putt-btn{
  width:38px;height:38px;border-radius:10px;
  background:var(--wa-05);border:1px solid var(--wa-08);
  color:var(--cream);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.live-putt-val{
  font-size:36px;font-weight:700;
  color:var(--cream);width:48px;text-align:center;line-height:1;
}
.live-footer{
  padding:16px;border-top:1px solid var(--wa-06);
  display:flex;gap:10px;
}
.live-running-score{
  text-align:center;padding:10px;
  background:rgba(30,51,88,.5);border-radius:10px;
  border:1px solid var(--wa-06);margin-bottom:16px;
}


/* ── GPS Distance feature ─────────────────────────────────────── */
#gps-bar{
  position:fixed;bottom:68px;left:50%;transform:translateX(-50%);
  z-index:100;background:var(--mid);
  border:1px solid rgba(255,241,207,.35);border-radius:14px;
  padding:10px 18px;display:none;align-items:center;gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);min-width:280px;
  backdrop-filter:blur(10px);
}
.gps-dist{
  font-size:34px;font-weight:700;
  color:var(--gold);line-height:1;
}
.gps-unit{font-size:12px;color:var(--dim);margin-top:2px}
.gps-label{font-size:9px;color:var(--dimmer);text-transform:uppercase;letter-spacing:1.5px}
.gps-btn{
  background:var(--wa-06);border:1px solid var(--wa-1);
  color:var(--cream);border-radius:9px;padding:6px 12px;font-size:11px;
  cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;
  transition:background .15s;
}
.gps-btn:hover{background:var(--wa-12)}
.gps-btn.active{background:rgba(255,241,207,.15);border-color:var(--gold);color:var(--gold)}

/* ── Onboard ──────────────────────────────────────────────────── */
#pg-onboard .app-inner{
  min-height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--safe-top,0px) + 40px) 20px 40px;
}
/* Force onboard/login page to always be dark navy regardless of theme */
#pg-onboard{background:#212851 !important;color:#f0e8d0 !important}
#pg-onboard .card{background:#243060;border-color:#2e3a6e}
#pg-onboard .btn{background:#fff1cf;color:#212851}
#pg-onboard .btn-o{background:transparent;border-color:#2e3a6e;color:#f0e8d0}
#pg-onboard .btn-o:active{background:rgba(46,58,110,.6);border-color:#f0e8d0}
#pg-onboard .btn-ghost{background:transparent;border-color:#2e3a6e;color:#8899bb}
#pg-onboard input{background:#1a2145;border-color:#2e3a6e;color:#f0e8d0}
#pg-onboard label{color:#8899bb}
.onb-hero{text-align:center;margin-bottom:32px}
.onb-title{
  font-family:'DM Sans',sans-serif;
  font-size:34px;font-weight:700;color:#f0e8d0;
  line-height:1;margin-bottom:6px;letter-spacing:-.5px;
}
.onb-sub{font-size:13px;color:#8899bb;line-height:1.5}

/* ── Player cards ─────────────────────────────────────────────── */
.player-card{
  display:flex;align-items:center;gap:12px;
  padding:12px;background:var(--wa-03);
  border:1px solid var(--wa-07);
  border-radius:11px;margin-bottom:8px;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.player-card:hover{border-color:rgba(255,241,207,.4);background:rgba(255,241,207,.05)}
.player-card.me{border-color:rgba(255,241,207,.5);background:rgba(255,241,207,.07)}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:700;color:var(--gold);flex-shrink:0;
}
.pname{font-size:14px;font-weight:500;color:var(--cream)}
.pmeta{font-size:11px;color:var(--dim);margin-top:2px}

/* ── KPI pills ────────────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px}
.kpi{
  background:var(--wa-03);border:1px solid var(--wa-06);
  border-radius:11px;padding:12px 8px;text-align:center;
}
.kv{
  font-size:26px;font-weight:700;color:var(--gold);
  display:block;line-height:1;
}
.kl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px;display:block}
.ks{font-size:10px;color:var(--dimmer);margin-top:2px}

/* ── Home KPI 2×2 grid ────────────────────────────────────────── */
.home-kpi-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:12px 16px 0;
}
.home-kpi-card{
  background:var(--mid);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  cursor:pointer;
}
.home-kpi-val{
  font-family:'DM Sans',sans-serif;
  font-size:var(--text-2xl);font-weight:700;color:var(--cream);
  letter-spacing:-0.5px;line-height:1;
}
.home-kpi-lbl{
  font-size:var(--text-xs);font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:0.8px;
}
.home-kpi-delta{font-size:var(--text-sm);font-weight:600;color:var(--par);margin-top:5px;display:flex;align-items:center;gap:3px}
/* GIR/FIR diagonal split card */
.home-kpi-split{position:relative;overflow:hidden;padding:0;min-height:110px}
.home-kpi-split-inner{position:relative;width:100%;height:100%;min-height:110px}
.home-kpi-divider{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
}
.home-kpi-split-top{
  position:absolute;top:14px;left:14px;
  display:flex;flex-direction:column;gap:3px;
  max-width:46%;overflow:hidden;
}
.home-kpi-split-bot{
  position:absolute;bottom:14px;right:14px;
  display:flex;flex-direction:column;gap:3px;text-align:right;align-items:flex-end;
  max-width:46%;overflow:hidden;
}
/* Smaller value + delta inside the split card to avoid crossing the diagonal */
.home-kpi-split .home-kpi-val{font-size:20px}
.home-kpi-split .home-kpi-delta{font-size:9px}

/* ── KPI tile picker chips ────────────────────────────────────── */
.kpi-tile-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi-tile-chip{
  padding:12px 14px;border-radius:12px;
  background:var(--mid);border:1.5px solid var(--border);
  font-size:11px;font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:0.06em;
  cursor:pointer;text-align:center;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.kpi-tile-chip.selected{
  border-color:var(--gold);color:var(--gold);
  background:rgba(255,241,207,.08);
}
.kpi-tile-chip.disabled{opacity:.35;cursor:default}

/* ── Practice area buttons — v0 style ────────────────────────── */
.parea-btn{
  background:var(--card);border:1px solid var(--wa-06);
  border-radius:14px;padding:16px 12px;text-align:left;cursor:pointer;
  color:var(--cream);transition:all .2s;font-family:'DM Sans',sans-serif;
  width:100%;
}
.parea-btn:active,.parea-btn.selected{
  background:rgba(255,241,207,.05);border-color:var(--gold);
}
.parea-btn .parea-icon{
  width:40px;height:40px;border-radius:10px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:10px;transition:background .2s;
}
.parea-btn.selected .parea-icon{background:rgba(255,241,207,.15);}
.parea-btn .parea-label{font-size:13px;font-weight:600;color:var(--cream);display:block;margin-bottom:2px}
.parea-btn.selected .parea-label{color:var(--gold);}
.parea-btn .parea-sub{font-size:10px;color:var(--dim);display:block}
/* Filter pills — already defined above */
.fpill{
  padding:6px 14px;border-radius:20px;font-size:0.8125rem;font-weight:500;
  background:var(--navy);border:1px solid var(--wa-06);
  color:var(--dim);cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:all .15s;white-space:nowrap;min-height:34px;
}
.fpill.active,.fpill:active{
  background:var(--gold);border:2px solid var(--cream);color:var(--navy);font-weight:600;
}
[data-theme="light"] .fpill.active{border-color:var(--navy);}
/* Group switcher bar (FPL-style) */
.group-switcher-bar{
  display:flex;gap:8px;overflow-x:auto;padding:0 0 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.group-switcher-bar::-webkit-scrollbar{display:none;}
.group-pill{
  padding:7px 16px;border-radius:20px;font-size:0.8125rem;font-weight:500;
  background:var(--navy);border:1px solid var(--wa-06);
  color:var(--dim);cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:all .15s;white-space:nowrap;min-height:36px;flex-shrink:0;
}
.group-pill.active{
  background:rgba(255,241,207,.12);border:1.5px solid var(--gold);
  color:var(--gold);font-weight:600;
}
/* hcp edit row flex */
#hcp-edit-row{display:flex;}

/* ── Stats sticky header ──────────────────────────────────────── */
#stats-sticky{
  position:sticky;top:0;z-index:20;
  background:var(--mid);
  margin:-16px -16px 0;
  padding:16px 16px 0;
}

/* ── Tee selector ─────────────────────────────────────────────── */
.tee-row{display:flex;gap:7px;margin-top:10px}
.tee-btn{
  flex:1;padding:9px 4px;border-radius:8px;
  font-size:11px;font-weight:500;cursor:pointer;
  border:1.5px solid transparent;font-family:'DM Sans',sans-serif;
  text-align:center;transition:all .15s;
}
.tee-btn.blue{background:rgba(52,152,219,.1);border-color:rgba(52,152,219,.3);color:#5dade2}
.tee-btn.yellow{background:rgba(241,196,15,.1);border-color:rgba(241,196,15,.3);color:#f4d03f}
.tee-btn.white{background:rgba(240,232,208,.06);border-color:rgba(240,232,208,.25);color:#f0e8d0}
.tee-btn.red{background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.3);color:#e74c3c}
.tee-btn.black{background:rgba(44,44,44,.3);border-color:rgba(180,180,180,.3);color:#aaaaaa}
.tee-btn.active.blue{background:rgba(52,152,219,.25);border-color:#5dade2}
.tee-btn.active.yellow{background:rgba(241,196,15,.25);border-color:#f4d03f}
.tee-btn.active.white{background:rgba(240,232,208,.18);border-color:#f0e8d0}
.tee-btn.active.red{background:rgba(231,76,60,.25);border-color:#e74c3c}
.tee-btn.active.black{background:rgba(44,44,44,.6);border-color:#aaaaaa}
.tee-info{font-size:10px;color:var(--dim);margin-top:5px}

/* ── Scorecard table ──────────────────────────────────────────── */
.sc-wrap{overflow-x:auto;margin-top:8px}
.sg{width:100%;border-collapse:collapse;font-size:12px}
.sg th{
  background:rgba(30,51,88,.8);color:var(--gold);
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  padding:7px 4px;text-align:center;
  font-family:'DM Sans',sans-serif;font-weight:500;
}
.sg td{padding:4px 3px;text-align:center;border-bottom:1px solid var(--wa-04)}
.sg .alt td{background:var(--wa-015)}
.sg .sub td{
  background:rgba(20,40,70,.7);color:var(--pale);
  font-size:10px;font-weight:500;padding:5px 3px;
}
.sg .tot-row td{
  background:var(--gold);color:var(--navy);
  font-weight:700;font-size:12px;padding:7px 3px;
}
.sg input[type=number]{
  width:36px;text-align:center;padding:4px 2px;
  font-size:12px;border-radius:5px;
}
.sg select{font-size:10px;padding:3px 2px;border-radius:5px}
.hn{color:var(--dimmer);font-size:11px}
.pc{color:var(--pale);font-weight:500;font-size:12px}

/* Score badges */
.s-eagle{background:var(--eagle);color:#000;border-radius:50%;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.s-birdie{border:2px solid var(--birdie);color:var(--birdie);border-radius:50%;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.s-par{color:var(--dim);font-size:12px}
.s-bogey{border:2px solid var(--bogey);color:var(--bogey);display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.s-double{background:rgba(231,76,60,.15);border:2px solid var(--double);color:var(--double);display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;font-weight:700;font-size:11px}
.s-triple{background:var(--double);color:#fff;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;font-weight:700;font-size:11px;border-radius:3px}

/* ── Totals bar ───────────────────────────────────────────────── */
.tot-bar{
  background:rgba(30,51,88,.5);border-radius:9px;
  padding:11px 14px;display:flex;justify-content:space-between;
  align-items:center;margin-top:10px;
  border:1px solid var(--wa-06);
}
.tv{
  font-size:28px;font-weight:700;color:var(--gold);
  font-family:'DM Sans',sans-serif;
}
.tl{font-size:10px;color:var(--dim);margin-bottom:2px}

/* ── Score breakdown pills ────────────────────────────────────── */
.bd-row{display:flex;gap:7px;margin-bottom:13px}
.bd{
  flex:1;text-align:center;
  background:var(--wa-03);
  border:1px solid var(--wa-06);
  border-radius:10px;padding:10px 5px;
}
.bv{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:700;display:block;line-height:1}
.bl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.ec{color:var(--eagle)}.bc{color:var(--birdie)}.prc{color:var(--par)}.bgc{color:var(--bogey)}.dc{color:var(--double)}

/* ── History items ────────────────────────────────────────────── */
.hi{
  display:flex;align-items:center;gap:8px;
  padding:11px 0;border-bottom:1px solid var(--wa-05);flex-wrap:nowrap;
}
.hi:last-child{border-bottom:none}
.hc{font-size:13px;font-weight:500;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm{font-size:10px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs{
  font-size:24px;font-weight:700;color:var(--gold);
  font-family:'DM Sans',sans-serif;
}
.hd{font-size:10px;color:var(--dim);text-align:right;margin-top:2px}
.tdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:middle}

/* ── Tab bar (round entry) ────────────────────────────────────── */
.tab-bar{
  display:flex;background:var(--mid);
  border-bottom:1px solid var(--wa-07);padding:0 16px;
}
.tab{
  flex:1;padding:12px 6px;text-align:center;
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--dimmer);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  font-family:'DM Sans',sans-serif;
}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── Photo drop ───────────────────────────────────────────────── */
.pdrop{
  border:1.5px dashed rgba(255,241,207,.35);border-radius:10px;
  padding:24px;text-align:center;cursor:pointer;margin-bottom:11px;
  transition:border-color .2s,background .2s;
}
.pdrop:hover{border-color:var(--gold);background:rgba(255,241,207,.04)}

/* ── Alerts ───────────────────────────────────────────────────── */
.alert{
  background:rgba(255,241,207,.08);border:1px solid rgba(255,241,207,.3);
  border-radius:8px;padding:10px 13px;font-size:12px;color:var(--pale);
  margin-bottom:11px;
}
.alert-err{background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.4);color:#f1948a}
.alert-ok{background:rgba(46,204,113,.08);border-color:rgba(46,204,113,.35);color:#82e0aa}

/* ── Spinner ──────────────────────────────────────────────────── */
.spin{
  width:16px;height:16px;
  border:2px solid rgba(255,241,207,.25);border-top-color:var(--gold);
  border-radius:50%;animation:spin .7s linear infinite;
  display:inline-block;vertical-align:middle;margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Skeleton shimmer ────────────────────────────────────────── */
.shimmer{
  background:var(--mid);
  background-image:linear-gradient(90deg,var(--mid) 0%,var(--card) 40%,var(--mid) 80%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Feed carousel (swipeable scoring/photo/map) ─────────────── */
.feed-carousel{scrollbar-width:none}
.feed-carousel::-webkit-scrollbar{display:none}

/* ── Charts ───────────────────────────────────────────────────── */
.chart-wrap{position:relative;width:100%;margin-top:8px}
.chart-wrap canvas{background:transparent}

/* ── Insight cards below charts ───────────────────────────────── */
.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.insight-card{
  background:var(--card);border-radius:8px;padding:12px;
  border-left:3px solid var(--par);
}
.insight-val{
  font-size:20px;font-weight:700;color:var(--cream);
  line-height:1;margin-bottom:4px;
}
.insight-lbl{font-size:11px;color:var(--dim);line-height:1.3}

/* ── Details/summary ──────────────────────────────────────────── */
details summary{
  cursor:pointer;color:var(--gold);font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 0;list-style:none;font-family:'DM Sans',sans-serif;
}
details summary::after{content:' ▸'}
details[open] summary::after{content:' ▾'}
.fr{display:flex;gap:8px;margin-bottom:8px}
.fr>div{flex:1}
.fr label{font-size:11px}

/* ── Leaderboard ──────────────────────────────────────────────── */
.lb-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid var(--wa-05);
  transition:background .15s;
}
.lb-row:last-child{border-bottom:none}
.lb-row.lb-me{background:rgba(255,241,207,.04);margin:0 -16px;padding:12px 16px;}
.lb-pos{
  width:28px;height:28px;border-radius:50%;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--navy);color:var(--dimmer);
}
.lb-pos.gold{background:var(--gold);color:var(--navy)}
.lb-pos.silver{background:#94a3b8;color:var(--navy)}
.lb-pos.bronze{background:#cd7f32;color:var(--navy)}
.lb-avatar-me{
  width:38px;height:38px;border-radius:50%;background:var(--navy);
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:var(--gold);flex-shrink:0;
}
.lb-name{font-size:13px;font-weight:500;color:var(--cream);flex:1}
.lb-meta{font-size:10px;color:var(--dim);margin-top:1px}
.lb-you-badge{
  font-size:9px;padding:2px 7px;border-radius:10px;
  background:rgba(255,241,207,.18);color:var(--gold);
  text-transform:uppercase;letter-spacing:.8px;font-weight:600;
}
.lb-score{
  font-family:'DM Sans',sans-serif;
  font-size:22px;font-weight:700;
}

/* ── Settings ─────────────────────────────────────────────────── */
.setting-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--wa-05);
}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:13px;color:var(--cream)}
.setting-sub{font-size:10px;color:var(--dim);margin-top:2px}

/* ── Misc ─────────────────────────────────────────────────────── */
.empty{text-align:center;padding:36px 20px;color:var(--dimmer);font-size:13px}
.empty-icon{font-size:40px;margin-bottom:10px}
.mb8{margin-bottom:8px}
.mb12{margin-bottom:12px}

/* ── Splash animation ──────────────────────────────────────────── */
/*
  Sequence:
  0.0s  – Viking fills screen (big circle, centred)
  0.4s  – Logo pops in (scale up from tiny)
  0.7s  – Eyelid slides down  (wink)
  0.92s – Eyelid slides back up
  1.8s  – Shrink/move: logo animates from big centred → small hero position
  2.3s  – Splash fades out, onboard reveals (logo already in place)
*/

/* ── Splash screen — rolling ball ─────────────────────────────── */
/* ── Splash screen — static, always navy ───────────────────── */
#splash-screen{
  position:fixed;inset:0;
  background:#212851;
  z-index:9999;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease;
}
#splash-screen.fade-out{opacity:0;pointer-events:none}
#splash-centre{
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
#splash-icon{
  width:clamp(120px,30vw,180px);height:auto;
}
#splash-wordmark{
  font-family:"Bookman Old Style","Bookman",Georgia,"Times New Roman",serif;
  font-size:clamp(42px,12vw,60px);
  color:#fff1cf;
  letter-spacing:2px;
  font-weight:400;
}
#splash-flag{
  position:absolute;
  bottom:4vh;right:6vw;
  width:clamp(50px,12vw,80px);height:auto;
  pointer-events:none;
  opacity:.85;
}

/* ── Scorecard history bottom sheet ──────────────────────────── */
#sc-hist-modal{position:fixed;inset:0;z-index:9999;display:none;pointer-events:none}
#sc-hist-modal.open{display:block;pointer-events:all}
#sc-hist-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.65);opacity:0;transition:opacity .3s}
#sc-hist-modal.open #sc-hist-backdrop{opacity:1}
#sc-hist-sheet{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--mid);border-radius:16px 16px 0 0;
  max-height:88vh;display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.25,.46,.45,.94);
  box-shadow:0 -4px 32px rgba(0,0,0,.5);
}
#sc-hist-modal.open #sc-hist-sheet{transform:translateY(0)}
#sc-hist-header{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-shrink:0;
}
/* drag handle pill */
#sc-hist-header::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;background:var(--border);
}
#sc-hist-sheet{position-anchor:unset}/* reset for ::before */
#sc-hist-close{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--dim);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#sc-hist-body{overflow-y:auto;overflow-x:auto;flex:1;padding:0 0 40px}
/* Scorecard table */
.sc-hist-table{border-collapse:collapse;font-size:12px;width:100%}
.sc-hist-table th{
  padding:8px 6px 6px;text-align:center;font-size:10px;font-weight:600;
  color:var(--dim);text-transform:uppercase;letter-spacing:0.06em;
  background:var(--navy);position:sticky;top:0;z-index:1;
}
.sc-hist-table th:first-child{text-align:left;padding-left:14px}
.sc-hist-table td{
  padding:7px 6px;text-align:center;
  border-top:1px solid rgba(255,255,255,0.04);
}
.sc-hist-table td:first-child{text-align:left;padding-left:14px;color:var(--dim);font-size:11px}
.sc-hist-table .sc-sub td{background:rgba(255,255,255,0.025);font-weight:700}
.sc-hist-table .sc-tot td{background:rgba(255,241,207,0.07);font-weight:700}

/* ── Competition mode ─────────────────────────────────────────── */
#comp-feed > div:last-child { border-bottom: none; }


/* ── Profile panel ────────────────────────────────────────────── */
.profile-icon-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--wa-06);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--dim);transition:background .15s;
}
.profile-icon-btn:hover{background:var(--wa-12)}
/* Avatar ↔ close toggle */
.avatar-btn{position:relative;width:36px;height:36px}
.avatar-btn .avatar-initials,
.avatar-btn .avatar-close{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 150ms ease;
  border-radius:50%;
}
.avatar-btn .avatar-close{
  font-size:16px;color:var(--cream);background:var(--mid);
  opacity:0;
}
.avatar-btn .avatar-initials{opacity:1}
.avatar-btn.panel-open .avatar-close{opacity:1}
.avatar-btn.panel-open .avatar-initials{opacity:0}
#profile-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:490;
}
#profile-backdrop.open{display:block}
#profile-panel{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);
  background:var(--mid);border-left:1px solid var(--wa-08);
  z-index:495;overflow-y:auto;
  padding:0 16px calc(80px + var(--safe-bot));
  transform:translateX(100%);transition:transform .3s ease;
}
#profile-panel.open{transform:translateX(0)}
.profile-panel-hdr{
  position:sticky;top:0;z-index:1;background:var(--mid);
  display:flex;align-items:center;justify-content:space-between;
  padding-top:calc(14px + var(--safe-top));padding-bottom:12px;
  margin-bottom:20px;border-bottom:1px solid var(--wa-06);
}

/* ── Caddie floating button (pill HUD) ────────────────────────── */
#caddie-btn{
  position:fixed;bottom:calc(72px + var(--safe-bot) + 12px);right:20px;
  z-index:250;touch-action:none;user-select:none;
  display:none;align-items:center;gap:6px;
  padding:10px 16px;border-radius:40px;
  background:var(--mid);border:1px solid var(--gold);color:var(--gold);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
#caddie-btn.visible{display:flex}
#caddie-btn:active{opacity:.85}
#caddie-dot{display:none;width:7px;height:7px;border-radius:50%;background:var(--par);box-shadow:0 0 5px var(--par);flex-shrink:0}
#caddie-btn.in-progress #caddie-dot{display:block}

/* ── Caddie View ──────────────────────────────────────────────── */
#caddie-view{
  position:fixed;inset:0;background:var(--navy);z-index:400;
  display:none;flex-direction:column;overflow:hidden;
}
#caddie-view.open{display:flex}
.caddie-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + var(--safe-top)) 14px 8px;
  background:var(--mid);border-bottom:1px solid var(--wa-06);
  flex-shrink:0;
}
.caddie-gps-section{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;
  padding:20px 20px 16px;background:var(--mid);
  border-bottom:1px solid var(--wa-06);gap:8px;
}
.caddie-dist-row{display:flex;gap:28px;align-items:flex-end}
.caddie-dist-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.caddie-dist-main{
  font-size:72px;font-weight:700;color:var(--gold);line-height:1;
}
.caddie-dist-secondary{
  font-size:40px;font-weight:700;color:var(--dim);line-height:1;
}
.caddie-dist-lbl{font-size:9px;color:var(--dimmer);text-transform:uppercase;letter-spacing:1.5px}
.caddie-hole-meta{font-size:11px;color:var(--dim);margin-top:2px}
.caddie-score-section{flex:1;overflow-y:auto;padding:16px}
.caddie-adj-label{
  font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:6px;
}
.caddie-adj-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.caddie-adj-btn{
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--wa-12);background:var(--wa-06);
  color:var(--cream);font-size:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;transition:background .1s;
}
.caddie-adj-btn-sm{width:44px;height:44px;font-size:22px}
.caddie-adj-btn:active{background:var(--wa-14)}
.caddie-adj-val{
  font-size:54px;font-weight:700;color:var(--gold);
  width:60px;text-align:center;line-height:1;
}
.caddie-toggle-row{display:flex;gap:8px;margin-bottom:14px}
.caddie-toggle-btn{
  flex:1;padding:11px;border-radius:9px;
  border:1px solid var(--wa-1);background:var(--wa-04);
  color:var(--dim);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:background .1s,border-color .1s,color .1s;
}
.caddie-toggle-btn.on-yes{background:rgba(46,204,113,.15);border-color:var(--birdie);color:var(--birdie)}
.caddie-toggle-btn.on-no{background:rgba(231,76,60,.12);border-color:var(--double);color:var(--double)}
#caddie-pips{display:flex;gap:4px;flex-wrap:wrap}
.caddie-pip{
  width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--wa-2);background:transparent;cursor:pointer;
  transition:transform .1s;
}
.caddie-pip.active{background:var(--cream);border-color:var(--cream);transform:scale(1.3)}
.caddie-pip.done{background:var(--gold);border-color:var(--gold)}
.caddie-pip.birdie-pip{background:var(--birdie);border-color:var(--birdie)}
.caddie-pip.eagle-pip{background:var(--eagle);border-color:var(--eagle)}
.caddie-pip.bogey-pip{background:var(--bogey);border-color:var(--bogey)}
.caddie-pip.double-pip{background:var(--double);border-color:var(--double)}
.caddie-nav-row{
  display:flex;gap:8px;
  padding:12px 16px calc(12px + var(--safe-bot));
  background:var(--navy);border-top:1px solid var(--wa-06);
  flex-shrink:0;
}

/* ── Round entry cards ────────────────────────────────────────── */
.round-entry-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:14px 8px;
  background:var(--mid);border:1px solid var(--border);border-radius:12px;
  color:var(--dim);font-size:11px;font-family:'DM Sans',sans-serif;
  cursor:pointer;text-align:center;line-height:1.3;
  transition:border-color .15s,color .15s;
}
.round-entry-card:hover,.round-entry-card.active{border-color:var(--gold);color:var(--gold)}

/* ── Unified live screen GPS block ───────────────────────────── */
.live-gps-block{
  background:var(--mid);border-bottom:1px solid var(--wa-06);
  display:flex;flex-direction:column;align-items:center;
  padding:14px 16px;gap:6px;flex-shrink:0;
}
.live-dist-row{display:flex;gap:24px;align-items:flex-end}
.live-dist-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.live-dist-main{
  font-size:60px;font-weight:700;color:var(--gold);line-height:1;
}
.live-dist-secondary{
  font-size:34px;font-weight:700;color:var(--dim);line-height:1;
}
.live-dist-lbl{font-size:9px;color:var(--dimmer);text-transform:uppercase;letter-spacing:1.5px}
.live-hole-meta{font-size:11px;color:var(--dim)}
.live-scoring-scroll{flex:1;overflow-y:auto}
.live-unified-footer{
  display:flex;gap:8px;
  padding:12px 16px calc(12px + var(--safe-bot));
  background:var(--navy);border-top:1px solid var(--wa-06);
  flex-shrink:0;
}

/* ── Scorecard extra columns toggle ──────────────────────────── */
.sc-extra-cols{display:none}
.scorecard-table.sc-extras-visible .sc-extra-cols{display:block}
.sc-extras-toggle{
  display:block;font-size:11px;color:var(--dim);text-align:right;
  margin-top:8px;cursor:pointer;text-decoration:none;
}
.sc-extras-toggle:hover{color:var(--gold)}

/* ── Card entrance animation ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }
  .card{animation:fadeUp 200ms ease-out both}
  .card:nth-child(2){animation-delay:40ms}
  .card:nth-child(3){animation-delay:80ms}
  .card:nth-child(4){animation-delay:120ms}
  .card:nth-child(5){animation-delay:160ms}
}

/* ── Match leaderboard overlay ────────────────────────────────── */
.match-overlay {
  position: fixed;
  bottom: calc(var(--safe-bot) + 72px);
  right: 12px;
  width: 148px;
  background: rgba(33, 40, 81, 0.82);
  border: 1px solid rgba(255, 241, 207, 0.3);
  border-radius: 14px;
  padding: 10px 12px;
  z-index: 500;
}
.match-overlay.frosted {
  background: rgba(26, 33, 69, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.match-min-pill {
  position: fixed;
  bottom: calc(var(--safe-bot) + 72px);
  right: 12px;
  background: rgba(33, 40, 81, 0.82);
  border: 1px solid rgba(255, 241, 207, 0.4);
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--cream);
  z-index: 500;
  cursor: pointer;
}
.match-overlay-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--cream);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.match-overlay-row:last-child { border-bottom: none; }
.match-overlay-row.is-me { color: var(--gold); font-weight: 600; }
.match-pos { width: 16px; color: var(--dim); font-size: 11px; flex-shrink: 0; }
.match-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-score { font-size: 13px; font-weight: 700; min-width: 32px; text-align: right; flex-shrink: 0; }

[data-theme="light"] .match-overlay {
  background: rgba(240, 232, 208, 0.92);
  border: 1px solid rgba(255, 241, 207, 0.5);
}
[data-theme="light"] .match-overlay.frosted {
  background: rgba(255, 252, 243, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .match-min-pill {
  background: rgba(240, 232, 208, 0.92);
  border: 1px solid rgba(255, 241, 207, 0.5);
}
[data-theme="light"] .match-overlay-row { border-bottom-color: rgba(0,0,0,0.06); }

/* ── Light mode tokens (Schoolhouse White) ────────────────────── */
[data-theme="light"]{
    --wa-015:rgba(0,0,0,.02);
  --wa-03: rgba(0,0,0,.03);
  --wa-04: rgba(0,0,0,.04);
  --wa-05: rgba(0,0,0,.06);
  --wa-06: rgba(0,0,0,.08);
  --wa-07: rgba(0,0,0,.09);
  --wa-08: rgba(0,0,0,.1);
  --wa-1:  rgba(0,0,0,.12);
  --wa-12: rgba(0,0,0,.08);
  --wa-14: rgba(0,0,0,.1);
  --wa-15: rgba(0,0,0,.12);
  --wa-2:  rgba(0,0,0,.18);
  --chart-tick:#4A5568;
  --chart-grid:rgba(0,0,0,.3);
  --navy:  #f0e8d0;
  --mid:   #e8e2cc;
  --card:  #f4eed6;
  --border:rgba(33,40,81,.12);
  --cream: #212851;
  --gold:  #212851;
  --gold2: #2e3a6e;
  --dim:   #4a5068;
  --dimmer:#7a809a;
}

/* ── Light mode: tab glider, pills, nav, sliders ─────────────── */
[data-theme="light"] .top-glider{background:#fff1cf}
[data-theme="light"] .top-tab.active .tt-main{color:#212851}
[data-theme="light"] .format-slider{background:#e8e2cc;border-color:rgba(33,40,81,.15)}
[data-theme="light"] .format-glider{background:#212851;border-color:#212851}
[data-theme="light"] .format-option{color:#4a5068}
[data-theme="light"] .format-option.active{color:#f0e8d0}
[data-theme="light"] .top-tab.active .tt-sub{color:#212851}
[data-theme="light"] .fpill.active{background:#212851;color:#f0e8d0;border-color:#212851}
[data-theme="light"] .nav{background:#f0e8d0;border-top-color:rgba(33,40,81,.1)}
[data-theme="light"] html,[data-theme="light"] body{background:#f0e8d0 !important}

/* ── Tee button contrast overrides for light mode ─────────────── */
[data-theme="light"] .tee-btn.blue{background:#0c447c;border-color:#0c447c;color:#e6f1fb}
[data-theme="light"] .tee-btn.yellow{background:#854f0b;border-color:#854f0b;color:#faeeda}
[data-theme="light"] .tee-btn.white{background:#444441;border-color:#444441;color:#f1efe8}
[data-theme="light"] .tee-btn.red{background:#791f1f;border-color:#791f1f;color:#fcebeb}
[data-theme="light"] .tee-btn.black{background:#2c2c2a;border-color:#2c2c2a;color:#d3d1c7}
[data-theme="light"] .tee-btn.active.blue{background:#0c447c;border-color:#0c447c;color:#e6f1fb}
[data-theme="light"] .tee-btn.active.yellow{background:#854f0b;border-color:#854f0b;color:#faeeda}
[data-theme="light"] .tee-btn.active.white{background:#444441;border-color:#444441;color:#f1efe8}
[data-theme="light"] .tee-btn.active.red{background:#791f1f;border-color:#791f1f;color:#fcebeb}
[data-theme="light"] .tee-btn.active.black{background:#2c2c2a;border-color:#2c2c2a;color:#d3d1c7}

/* ── Theme toggle (profile panel) ────────────────────────────── */
.theme-toggle-wrap{
  display:flex;gap:0;
  background:var(--mid);
  border-radius:8px;
  padding:3px;
}
.theme-tab{
  padding:6px 14px;
  border:none;border-radius:6px;
  font-size:12px;font-family:'DM Sans',sans-serif;font-weight:500;
  background:transparent;color:var(--dim);
  cursor:pointer;transition:background .15s,color .15s;
}
.theme-tab.active{
  background:var(--card);color:var(--cream);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* ── Course search (initCourseSearch) ──────────────────────────── */
.cs-wrap          { display:flex; flex-direction:column; gap:0; }
.cs-country       { width:100%; padding:10px 12px; background:var(--mid); color:var(--cream); border:1px solid var(--border); border-radius:10px 10px 0 0; font-size:14px; }
.cs-input-row     { position:relative; }
.cs-input         { width:100%; padding:12px 36px 12px 14px; background:var(--mid); color:var(--cream); border:1px solid var(--border); border-top:none; border-radius:0; font-size:16px; box-sizing:border-box; }
.cs-input:focus   { outline:none; border-color:var(--gold); }
.cs-spinner       { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:16px; }
.cs-results       { background:var(--card); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; max-height:260px; overflow-y:auto; }
.cs-result        { padding:12px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.cs-result:last-child { border-bottom:none; }
.cs-result:active { background:var(--mid); }
.cs-result-name   { font-size:15px; color:var(--cream); font-weight:600; line-height:1.3; }
.cs-result-club   { font-weight:400; color:var(--dim); }
.cs-result-meta   { font-size:12px; color:var(--dim); margin-top:3px; }
.cs-gps-badge      { color:var(--gold); }
.cs-cached-badge   { color:var(--par); }
.cs-holedata-badge { color:var(--par); font-size:9px; vertical-align:middle; margin-left:4px; }
.cs-par-badge      { color:var(--dim); }
.cs-empty          { padding:12px; font-size:13px; color:var(--dim); text-align:center; }
.cs-loading        { padding:12px; font-size:13px; color:var(--dim); text-align:center; font-style:italic; }
.cs-selected      { margin-top:12px; }
.cs-card          { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px; }
.cs-card-name     { font-size:16px; font-weight:700; color:var(--cream); }
.cs-card-loc      { font-size:12px; color:var(--dim); margin-top:2px; }
.cs-gps-confirmed { font-size:12px; color:var(--gold); margin-top:6px; }
.cs-gps-none      { font-size:12px; color:var(--dim); margin-top:6px; }
.cs-tee-row       { display:flex; align-items:center; gap:8px; margin-top:10px; }
.cs-tee-lbl       { font-size:12px; color:var(--dim); white-space:nowrap; }
.cs-tee-sel       { flex:1; padding:6px 8px; background:var(--mid); color:var(--cream); border:1px solid var(--border); border-radius:8px; font-size:13px; }


/* ═══════════════════════════════════════════════════════════════
   DEV: Design variant toggle pill
   ══════════════════════════════════════════════════════════════ */
.dv-btn {
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--mid);
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  opacity: 0.75;
  transition: opacity 120ms, background 120ms, color 120ms;
}
.dv-btn.dv-active {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN VARIANT: V2
   Replace the placeholder comment blocks below with actual
   overrides once the design.md is provided.
   ══════════════════════════════════════════════════════════════ */

/* -- Token overrides (colours, spacing, radius) -- */
[data-design="v2"] {
  /* e.g. --card: #1a1a2e; */
}

/* -- Component overrides -- */
/* [data-design="v2"] .card { ... } */
/* [data-design="v2"] .home-kpi-card { ... } */
/* [data-design="v2"] .hdr { ... } */

/* ── Global design tokens ────────────────────────────────────── */
.gold-rule{height:1px;background:var(--gold);opacity:0.2;margin:12px 20px}
.pulse-cell{background:var(--mid);border:1px solid var(--border);border-radius:10px;padding:10px;position:relative;overflow:hidden}
.pulse-accent{position:absolute;bottom:0;left:0;right:0;height:2px}
.pulse-val{font-size:20px;font-weight:700;color:var(--cream)}
.pulse-lbl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.4px;margin-top:3px}
.pulse-delta{font-size:10px;margin-top:2px}
.section-hdr{padding:0 20px 6px;display:flex;justify-content:space-between;align-items:center}
.section-hdr-title{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.8px;font-weight:700}
.section-hdr-link{font-size:11px;color:var(--gold);cursor:pointer}
.ctx-btn{display:flex;align-items:center;gap:6px;background:var(--mid);border:1px solid var(--border);border-radius:20px;padding:5px 12px;cursor:pointer}
.chart-callout-row{display:flex;border-top:1px solid var(--border);margin-top:10px;padding-top:10px}
.chart-callout{flex:1;padding:0 12px;border-right:1px solid var(--border)}
.chart-callout:first-child{padding-left:0}
.chart-callout:last-child{border-right:none}
.chart-callout-val{font-size:22px;font-weight:700;color:var(--cream);line-height:1}
.chart-callout-lbl{font-size:11px;color:var(--dim);margin-top:3px}
.f9b9-insight{display:flex;align-items:flex-start;gap:6px;padding:7px 8px;background:rgba(255,241,207,0.06);border-radius:8px;border:1px solid rgba(255,241,207,0.15);margin-top:6px}
.f9b9-insight-text{font-size:11px;color:var(--dim);line-height:1.4}
.f9b9-insight-text b{color:var(--gold);font-weight:600}

/* ── Leaderboard view pills (hide scrollbar) ────────────────── */
#lb-view-pills::-webkit-scrollbar{display:none}
.lb-vpill{background:var(--mid);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--dim);cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.lb-vpill.active{background:rgba(255,241,207,0.15);border-color:var(--gold);color:var(--gold)}

/* ── AI badge button — animated pinging dot ─────────────────── */
.ai-badge-btn{position:relative;display:inline-flex;align-items:center;gap:8px;overflow:visible}
.ai-badge-dot{position:relative;width:6px;height:6px;border-radius:50%;background:rgba(34,211,238,.8);flex-shrink:0}
.ai-badge-dot::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(34,211,238,.4);animation:ai-ping 2s cubic-bezier(0,0,.2,1) infinite}
.ai-badge-dot::after{content:'';position:absolute;inset:-1px;border-radius:50%;background:rgba(34,211,238,.6);animation:ai-ping 2s cubic-bezier(0,0,.2,1) infinite;animation-delay:.5s}
@keyframes ai-ping{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.5);opacity:0}100%{transform:scale(2.5);opacity:0}}
.pinging-dot{position:relative}
.pinging-dot::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:rgba(255,241,207,.4);animation:ai-ping 2s cubic-bezier(0,0,.2,1) infinite}
.pinging-dot::after{content:'';position:absolute;inset:-1px;border-radius:50%;background:rgba(255,241,207,.6);animation:ai-ping 2s cubic-bezier(0,0,.2,1) infinite;animation-delay:.5s}

/* ── POP badge (handicap stroke indicator) ───────────────────── */
.pop-badge{display:inline-block;padding:1px 6px;border-radius:8px;background:#fff1cf;color:#212851;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-left:4px;vertical-align:middle;animation:popBounce .4s ease-out}
@keyframes popBounce{0%{transform:scale(0) translateY(-4px);opacity:0}50%{transform:scale(1.2) translateY(-2px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}

/* ── Competition tabs ────────────────────────────────────────── */
.comp-tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 0;font-size:12px;font-weight:600;color:var(--dim);cursor:pointer;font-family:'DM Sans',sans-serif;-webkit-tap-highlight-color:transparent;transition:all .15s}
.comp-tab.active{color:var(--cream);border-bottom-color:var(--gold)}

/* ── Profile pills ───────────────────────────────────────────── */
.profile-pills{display:flex;gap:6px;padding:10px 20px}
.profile-pill{
  padding:7px 16px;border-radius:20px;font-size:11px;font-weight:500;
  background:transparent;border:1px solid var(--wa-12);
  color:var(--dim);cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:all .15s;white-space:nowrap;
}
.profile-pill.active{border-color:rgba(255,241,207,.5);color:var(--gold);font-weight:600}

/* ── Empty states ────────────────────────────────────────────── */
.empty-state{text-align:center;padding:32px 24px}
.empty-icon{font-size:32px;margin-bottom:12px}
.empty-headline{font-size:15px;font-weight:700;color:var(--cream);margin-bottom:6px}
.empty-sub{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:18px;max-width:220px;margin-left:auto;margin-right:auto}
.empty-state .btn{width:auto;padding:10px 24px;border-radius:40px;font-size:13px}

/* ── Typography & delta utilities ────────────────────────────── */
.text-upper{font-size:var(--text-xs);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.text-section{font-size:var(--text-xs);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}
.delta-up{color:var(--par);display:flex;align-items:center;gap:3px}
.delta-dn{color:var(--bogey);display:flex;align-items:center;gap:3px}

/* ── Round tab: top tab switcher ────────────────────────────── */
.top-tab-wrap{position:relative;display:flex;background:var(--mid);border:1px solid var(--border);border-radius:16px;padding:3px}
.top-glider{position:absolute;top:3px;bottom:3px;width:50%;border-radius:13px;background:var(--gold);transition:transform .38s cubic-bezier(.37,1.55,.66,.56);z-index:1;pointer-events:none}
.top-tab{flex:1;text-align:center;padding:8px 4px 6px;cursor:pointer;position:relative;z-index:2;border-radius:13px}
.top-tab.active .tt-main{color:var(--navy)}
.top-tab.active .tt-sub{color:var(--navy);opacity:.6}
.top-tab:not(.active) .tt-main{color:var(--dim)}
.top-tab:not(.active) .tt-sub{color:var(--dimmer)}
.tt-main{font-size:13px;font-weight:700;line-height:1.2}
.tt-sub{font-size:9px;font-weight:500;letter-spacing:.2px;margin-top:2px}

/* ── Round tab: country pill strip ──────────────────────────── */
.country-strip{display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.country-strip::-webkit-scrollbar{display:none}
.country-pill{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--navy);border:1px solid var(--border);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.country-pill.active{background:rgba(255,241,207,.1);border-color:var(--gold)}
.country-pill svg{width:18px;height:13px;flex-shrink:0}
.country-pill-label{font-size:12px;font-weight:600;color:var(--dim)}
.country-pill.active .country-pill-label{color:var(--gold)}

/* ── Round tab: tee pills ───────────────────────────────────── */
.tee-pill{flex:1;padding:7px 2px;border-radius:8px;border:1px solid var(--border);background:var(--navy);text-align:center;font-size:10px;font-weight:700;cursor:pointer;transition:all .15s}
.tee-pill.active{border-color:var(--gold);background:rgba(255,241,207,.08)}

/* ── Round tab: format slider ───────────────────────────────── */
.format-slider{position:relative;background:var(--navy);border-radius:24px;border:1px solid var(--border);display:flex;padding:3px;overflow:hidden}
.format-glider{position:absolute;top:3px;bottom:3px;border-radius:20px;background:rgba(255,241,207,.15);border:1px solid rgba(255,241,207,.4);transition:transform .3s ease-out;z-index:1;pointer-events:none}
.format-option{flex:1;text-align:center;padding:6px 2px;font-size:10px;font-weight:600;color:var(--dim);cursor:pointer;z-index:2;position:relative;transition:color .2s;white-space:nowrap}
.format-option.active{color:var(--gold)}

/* ── Round tab: player selection screen ─────────────────────── */
.player-select-screen{position:absolute;inset:0;background:var(--navy);z-index:10;overflow-y:auto;padding:16px;display:none}
.player-select-screen.visible{display:block;animation:slideInRight .25s ease-out}
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.player-chip{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:20px;background:rgba(255,241,207,.1);border:1px solid rgba(255,241,207,.3);cursor:pointer}
.player-chip-name{font-size:11px;font-weight:600;color:var(--gold)}
.player-chip-remove{font-size:13px;color:var(--gold);line-height:1}
.player-chip.guest{background:rgba(136,153,187,.1);border-color:var(--dim)}
.player-chip.guest .player-chip-name,.player-chip.guest .player-chip-remove{color:var(--dim)}
.player-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.player-row .avatar,.player-row .lb-avatar-me{flex-shrink:0}
.player-row-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.player-row.selected .player-row-check{background:var(--gold);border-color:var(--gold)}
.player-row.selected .avatar{border-color:var(--gold) !important}

/* ── Round tab: course card flash ───────────────────────────── */
@keyframes goldFlash{0%{border-color:var(--gold);box-shadow:0 0 12px rgba(255,241,207,.4)}100%{border-color:var(--border);box-shadow:none}}
.course-flash{animation:goldFlash .6s ease-out}

/* ── Weather card ───────────────────────────────────────────── */
@keyframes wx-spin   { to { transform: rotate(360deg); } }
@keyframes wx-pulse  { 0%,100% { opacity:.3; } 50% { opacity:1; } }
@keyframes wx-fall   { 0% { transform:translateY(0); opacity:.8; } 100% { transform:translateY(12px); opacity:0; } }
@keyframes wx-drift  { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }
@keyframes wx-flash  { 0%,45%,55%,100% { opacity:0; } 48%,52% { opacity:1; } }
@keyframes wx-snow   { 0% { transform:translateY(0) translateX(0); opacity:.8; } 100% { transform:translateY(14px) translateX(4px); opacity:0; } }

.wx-spin   { animation: wx-spin  12s linear infinite; transform-origin: 24px 24px; }
.wx-pulse  { animation: wx-pulse  2s ease-in-out infinite; }
.wx-fall   { animation: wx-fall   0.8s ease-in infinite; }
.wx-drift  { animation: wx-drift  6s ease-in-out infinite; }
.wx-flash  { animation: wx-flash  3s infinite; }
.wx-snow   { animation: wx-snow   2s ease-in infinite; }

.wx-card { margin:10px 16px 0; background:var(--mid); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
#weather-container .wx-card { margin:0; background:transparent; border:none; border-radius:0; }
.wx-hdr { padding:10px 14px 8px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
.wx-title { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.6px; }
.wx-location { font-size:10px; color:var(--dimmer); display:flex; align-items:center; gap:3px; }
.wx-days { display:flex; }
.wx-day { flex:1; padding:12px 8px; text-align:center; border-right:1px solid var(--border); }
.wx-day:last-child { border-right:none; }
.wx-day-name { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.wx-icon-wrap { height:40px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.wx-temp { font-size:13px; font-weight:700; color:var(--cream); }
.wx-temp-low { font-size:10px; color:var(--dim); margin-top:1px; }
.wx-rain { font-size:10px; color:#3498db; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:2px; }
.wx-wind { font-size:10px; color:var(--dim); margin-top:2px; }
.wx-suit { padding:8px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.wx-suit-lbl { font-size:10px; color:var(--dim); white-space:nowrap; }
.wx-suit-track { flex:1; height:4px; background:var(--navy); border-radius:2px; overflow:hidden; }
.wx-suit-fill { height:100%; border-radius:2px; transition:width .4s ease; }
.wx-suit-word { font-size:10px; font-weight:700; white-space:nowrap; min-width:32px; text-align:right; }

/* ── Walkthrough spotlight tour ─────────────────────────────── */
.wt-overlay{position:fixed;z-index:10000;box-shadow:0 0 0 9999px rgba(0,0,0,.78);transition:top .35s ease,left .35s ease,width .35s ease,height .35s ease;border:2px solid rgba(255,241,207,.5);pointer-events:none}
.wt-tooltip{position:fixed;z-index:10001;background:var(--card);border:1.5px solid var(--gold);border-radius:14px;padding:20px;max-width:300px;width:calc(100% - 32px);box-shadow:0 8px 40px rgba(0,0,0,.5);font-family:'DM Sans',sans-serif;pointer-events:all}
.wt-step{font-size:10px;color:var(--dimmer);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.wt-title{font-size:17px;font-weight:700;color:var(--cream);margin-bottom:6px}
.wt-body{font-size:13px;color:var(--dim);line-height:1.65;margin-bottom:16px}
.wt-btns{display:flex;gap:10px;align-items:center}
.wt-next{flex:1;padding:12px;border-radius:40px;background:var(--gold);color:var(--navy);font-size:14px;font-weight:600;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s}
.wt-next:active{transform:scale(.96)}
.wt-skip{background:none;border:none;color:var(--dim);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;padding:8px;white-space:nowrap}