/* ─────────────────────────────────────────────────────────────
   DISC GOLF MUTANT MODE — DESIGN TOKENS (v7 "Lift + Broadcast")
   Lift: layered surfaces lit from above, frosted bars, soft shadow.
   Broadcast: angled plates, ribbon, ticker — only for big moments.
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Brand */
  --lime: #9EC228;
  --lime-hi: #C4EA3E;
  --lime-lo: #6F8A18;
  --purple: #6B3FA0;
  --gold: #C9A84C;
  --gold-hi: #E8C97A;

  /* Ground */
  --bg: #0B0B0C;
  --bg-2: #111113;
  --well: #0E0E10;           /* inset fields */

  /* Lift surfaces (top → bottom gradient stops) */
  --s1-top: #1F1F22;
  --s1-bot: #151517;
  --s2-top: #2A2A2E;
  --s2-bot: #1D1D20;
  --s3: #303035;
  --edge: rgba(255, 255, 255, 0.075);   /* lit top edge */
  --hair: rgba(255, 255, 255, 0.06);    /* hairline divider */
  --hair-2: rgba(255, 255, 255, 0.10);
  --shadow-card: 0 1px 0 rgba(0,0,0,.55), 0 14px 26px -16px rgba(0,0,0,.95);
  --shadow-pop: 0 24px 48px -14px rgba(0,0,0,.92);
  --glass: rgba(16, 16, 18, 0.62);

  /* Text */
  --text: #F2EFE8;
  --text2: #BDB8AE;
  --text3: #7E7973;
  --text-inv: #0C0C0C;

  /* Meaning (always paired with a shape or word, never color alone) */
  --good: #58C888;
  --bad: #E05555;

  /* Mode accent — overwritten per game mode from JS (MODE_ACCENTS) */
  --acc: #B8E030;
  --acc2: #7E9C1C;
  --acc-ink: #10140A;
  --acc-glow: rgba(184, 224, 48, 0.30);

  /* Shape */
  --r-lg: 20px;
  --r: 16px;
  --r-sm: 12px;
  --r-xs: 8px;

  /* Type */
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Motion */
  --spring: cubic-bezier(.3, 1.6, .5, 1);
  --ease-out: cubic-bezier(.2, .9, .3, 1);

  /* Legacy aliases (kept so any older markup still resolves) */
  --surface: var(--s1-bot);
  --surface2: var(--s2-bot);
  --surface3: var(--s3);
  --border: var(--hair);
  --border2: var(--hair-2);
  --green: var(--good);
  --red: var(--bad);
  --radius: var(--r);
  --radius-sm: var(--r-sm);
}

/* ── BASE ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; height: 100svh; overflow: hidden; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  height: 100%; height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Brand accent stripe along the very top */
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 30%, var(--purple) 70%, transparent 100%);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--lime-hi); outline-offset: 2px; }
input::placeholder { color: var(--text3); }
select option { background: var(--bg); }
img { max-width: 100%; }

.hidden { display: none !important; }
.brand, .display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--text3);
}
.muted { color: var(--text3); }

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