@import url(https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap);
/* DM Mono — tabular monospace backup for the PnL/bonus value numbers (VALUE_FONT),
 * so digits stay aligned if Paralucent is unavailable. Imported here (not only in
 * index.html) so it also loads inside the Webflow code component. @import must come
 * before the @font-face rules below. */

/*
 * Paralucent — Topstep's licensed display typeface, served from their Webflow CDN
 * (CORS: access-control-allow-origin: *). Available weights: 300 / 500 / 600.
 * Used on this Topstep-owned project. If self-hosting later, swap these URLs.
 */
@font-face {
  font-family: 'Paralucent';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/69e902b0a74d3d99a517f56d/69e907e2f623d1ef9903112b_Paralucent_Light.woff')
    format('woff');
}
@font-face {
  font-family: 'Paralucent';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/69e902b0a74d3d99a517f56d/69e907e2281c7f8155047ad1_Paralucent_Medium.woff')
    format('woff');
}
@font-face {
  font-family: 'Paralucent';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.prod.website-files.com/69e902b0a74d3d99a517f56d/69e907e2b696aaf2db74eb5d_Paralucent_Demi_Bold.woff')
    format('woff');
}

/*
 * Topstep brand tokens — SINGLE SOURCE OF TRUTH.
 * Matched to topstep.com: pure black canvas, warm gold accent, white headings,
 * pill buttons, rounded near-black cards. Swap exact hex here if brand kit differs.
 */
:host {
  /* Surfaces — pure black canvas like topstep.com dark sections */
  --bg: #000000;
  --bg-2: #060606;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-border: rgba(255, 255, 255, 0.07);
  --surface-border-strong: rgba(255, 255, 255, 0.16);

  /* Brand — Topstep gold (richened + brightened for pop on black) */
  --accent: #dbb359;
  --accent-2: #efd9a8;
  --accent-deep: #9c7637;
  --accent-glow: rgba(219, 179, 89, 0.5);
  --accent-soft: rgba(219, 179, 89, 0.14);

  /* Semantic — bright gold for gains (on-brand), muted red for losses */
  --pos: #e9e7e2;
  --neg: #e8675b;

  /* Text — a touch brighter for contrast */
  --text: #f7f6f3;
  --text-dim: #a3a19b;
  --text-faint: #6e6c66;

  /* Type — Topstep: Work Sans (body) + Paralucent→Poppins (display) */
  --font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Paralucent', 'Poppins', 'Work Sans', system-ui, sans-serif;
  --font-mono: 'Work Sans', system-ui, sans-serif;

  /* Shape — Topstep uses generous pill / rounded-card radii */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --blur: 16px;

  /* Shadows */
  --shadow-card: 0 18px 50px -22px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 12px 40px -8px var(--accent-glow);

  /* Chart line "casing" — near-black matching the plot background, drawn under
     each bump line so crossings read clearly (invisible except where it
     occludes a lower line). Tunable if the plot backdrop shifts. */
  --chart-casing: #0a0b0d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: linear-gradient(180deg, #101218 0%, #08090c 42%, #000000 100%) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* ---------- Hero zone + video background (full width, top of page only) ---------- */
.hero-zone {
  position: relative;
  padding-bottom: clamp(56px, 9vh, 140px);
}
.hero-zone > * {
  position: relative;
  z-index: 1;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video__scrim {
  position: absolute;
  inset: 0;
  /* darken for legibility + fade into the page background at the bottom */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.35) 35%,
    rgba(6, 7, 11, 0.85) 80%,
    #000 100%
  );
}

/* ---------- Layout shell ---------- */
.app {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(5px, 1vw, 14px) clamp(16px, 4vw, 40px) 96px;
}

/* ---------- Nav ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 4px 0;
}

.logo {
  height: 26px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0 auto;
}

.nav__links li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.18s;
}

.nav__links li:hover,
.nav__links li.is-active {
  color: var(--text);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav__login {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-dim);
  cursor: pointer;
}
.nav__login:hover {
  color: var(--text);
}

/* ---------- Buttons (pill) ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn--sm {
  padding: 9px 20px;
  font-size: 14px;
}

.btn--primary {
  background: #000;
  color: var(--text);
  border-color: var(--accent);
  padding: 11px 24px;
  font-size: 15px;
}
.btn--primary:hover {
  background: rgba(219, 179, 89, 0.12);
}

/* ---------- Hero row (header left, stats right; wraps when needed) ---------- */
.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(40px, 8vw, 96px);
}
.hero-row > .hero {
  flex: 1 1 460px;
}
.hero-row > .stats {
  flex: 1 1 440px;
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.stat-card {
  padding: 22px 24px 20px;
  background: linear-gradient(160deg, #24262e, #15161b);
}

.stat-card__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.stat-card__num--green {
  color: #3ddc84;
}
/* Countdown is longer (8d 14:23:05) so it sits a touch smaller, with fixed
   digit widths so it doesn't jitter as it ticks. */
.stat-card__num--count {
  font-size: clamp(20px, 2.6vw, 30px);
  font-variant-numeric: tabular-nums;
}

.stat-card__num sup {
  font-size: 0.5em;
  vertical-align: super;
}

.stat-card__label {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-dim);
}

/* ---------- Hero ---------- */
.hero {
  text-align: left;
}

.hero__title {
  font-family: var(--font-display);
  margin: 22px 0 14px;
  font-size: clamp(38px, 7.5vw, 76px);
  font-weight: 500;
  line-height: 1.12;
  padding-bottom: 0.08em;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff 35%, #d8d4cc 135%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__title .accent {
  background: linear-gradient(180deg, var(--accent-2), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 620px;
  margin: 0;
  color: var(--text);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  text-wrap: balance;
}

/* ---------- Glass card ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-card);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.section {
  margin-top: clamp(72px, 9vw, 132px);
}
/* The race section follows the hero zone, which already has bottom padding. */
#charts {
  margin-top: clamp(20px, 2.5vw, 40px);
}

/* The Payouts section sits on a darker full-bleed band to offset it from the
   page, while its content stays aligned with the rest of the layout. */
#board {
  position: relative;
  margin-top: clamp(20px, 3vw, 44px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
#board::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #030304;
  z-index: -2;
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.section__sub {
  max-width: 640px;
  color: var(--text);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: balance;
}

/* ---------- Month selector ---------- */
.months {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: clamp(26px, 3vw, 38px);
}

.month-chip {
  position: relative;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 10px 18px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
}

.month-chip:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.month-chip.is-active {
  color: #1a1408;
  border-color: transparent;
}

.month-chip__bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px -6px var(--accent-glow);
  z-index: -1;
}

/* ---------- Rank / PnL mode switch (right cell of the transport row) ---------- */
.chart-modes {
  display: flex;
}

/* Month picker, centered above the chart panel (same pill styling as the modes,
   but sized up to match the "Replay the month" button). */
/* Top bar above the chart: month picker on the left, the big top-10 PnL figure
   centered on the page. Three columns (1fr | auto | 1fr) keep the figure truly
   centered regardless of the picker's width; the picker column scrolls
   horizontally when there are more months than fit. */
.chart-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.chart-topbar .month-bar {
  grid-column: 1;
  justify-self: start;
  max-width: 100%;
  margin-bottom: 0;
  justify-content: flex-start;
  /* vertical room so the active chip's drop-glow isn't clipped by overflow */
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox — hide the scrollbar; still swipe/trackpad scrollable */
  -webkit-overflow-scrolling: touch;
}
.chart-topbar .month-bar::-webkit-scrollbar {
  display: none; /* WebKit — hide scrollbar for the pill track */
}
/* Keep the chips at natural size and let the track scroll instead of squishing. */
.chart-topbar .month-bar .mode-seg {
  flex: none;
}
/* The headline stat — the largest type on the page. */
.top10-pnl {
  grid-column: 2;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  white-space: nowrap;
}
.top10-pnl__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.top10-pnl__label {
  font-size: 14px;
  color: var(--text-dim);
}

.month-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.month-bar .mode-chip {
  font-size: 15px;
  font-weight: 700;
  padding: 11px 24px;
}

/* Segmented pill container — a single track holding the two options. */
.mode-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
}

.mode-chip {
  position: relative;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 7px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}

.mode-chip:hover {
  color: var(--text);
}

.mode-chip.is-active {
  color: #1a1408;
}

.mode-chip__bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px -6px var(--accent-glow);
  z-index: -1;
}

/* ---------- Bar chart race ---------- */
.race-card {
  padding: clamp(18px, 3vw, 28px);
}

.race-progress {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.race-track {
  position: relative;
}

.race-row {
  position: absolute;
  top: 0;
  left: 0;
  /* reserve a fixed gutter on the right for the (pinned) reward ladder */
  right: 124px;
  height: 40px;
  display: grid;
  grid-template-columns: 52px 24px 150px 1fr;
  align-items: center;
  gap: 12px;
}

.race-rank {
  display: flex;
  align-items: center;
  /* Right-aligned so the ordinal sits against the column's trailing edge and the
     gap to the movement arrow matches the arrow→name gap (rather than the whole
     52px cell width reading as one big gutter after a left-aligned number). */
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-faint);
}

/* Own grid column, between the rank number and the name. */
.race-move {
  font-size: 12px;
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  justify-self: center;
}
/* Movement: green climbing, red dropping. (--pos is a near-white "gain" text
   tone, so use an explicit green here for a clear up/down read.) */
.race-move.is-up { color: #6bd08f; }
.race-move.is-down { color: var(--neg); }

.race-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.race-flag {
  margin-right: 8px;
  font-size: 24px;
  line-height: 1;
}

.race-bar-track {
  position: relative;
  height: 34px;
  /* Fixed slot reserved at the bar's end for the PnL number. Bars scale to the
     track width MINUS this slot (see the inline calc in BarChartRace), so a bar's
     length stays exactly proportional to its PnL and a wide number never shortens
     its own bar. The bonus lives in the pinned ladder, not here. */
  --pnl-slot: 108px;
}

/* PnL number, sitting just past the bar's end (`left` set inline to the bar's
   width). It rides the bar tip within the reserved slot and never overlaps it. */
.race-bar-end {
  position: absolute;
  top: 50%;
  transform: translate(12px, -50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Solid magnitude bar (width scales with standing) with a fixed-width mini
   trend line embedded at its left, clipped to the bar. */
/* Name overlaid inside the bar — phones only (desktop uses the name column).
   Clipped to the bar by .race-bar's overflow:hidden, so it never spills past the
   bar's right edge onto the dark track. */
.race-bar-name {
  display: none;
}

.race-bar {
  position: relative;
  height: 100%;
  /* width set inline: pct% of (track − --pnl-slot), so lengths stay proportional */
  min-width: 2px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow:
    0 1px 10px -4px currentColor,
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
/* Diagonal glossy sheen sweeping across the bar */
.race-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.22) 47%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 70%
  );
}
/* Top-to-bottom sheen for depth */
.race-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%, rgba(0, 0, 0, 0.18));
}

/* Podium bars (top 3): keep the gloss and add a colored outer glow so the
   gold/silver/bronze winners clearly jump off the panel. */
.race-bar.is-medal {
  box-shadow:
    0 2px 18px -3px currentColor,
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

/* New-leader "heat": the instant a trader overtakes into 1st place, the top bar
   flares with a warm amber bloom that peaks then settles (~1.5s), so a fresh leader
   is impossible to miss. The outer glow rides the bar; .race-bar-heat is an inner
   bloom clipped to the bar shape. */
.race-bar.is-hot {
  animation: race-heat-glow 2.6s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.race-bar-heat {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    130% 150% at 80% 50%,
    rgba(255, 240, 210, 1) 0%,
    rgba(255, 190, 90, 0.95) 26%,
    rgba(255, 140, 40, 0.6) 52%,
    transparent 78%
  );
  mix-blend-mode: screen;
  animation: race-heat-sheen 2.6s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes race-heat-glow {
  0% {
    box-shadow: 0 2px 18px -3px currentColor, inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  }
  10% {
    box-shadow:
      0 0 56px 10px rgba(255, 170, 60, 1),
      0 0 22px 3px rgba(255, 220, 150, 0.95),
      0 2px 18px -3px currentColor,
      inset 0 0 0 1.5px rgba(255, 245, 220, 1);
  }
  45% {
    box-shadow:
      0 0 38px 4px rgba(255, 160, 55, 0.72),
      0 2px 18px -3px currentColor,
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.72);
  }
  100% {
    box-shadow: 0 2px 18px -3px currentColor, inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  }
}
@keyframes race-heat-sheen {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
  }
}

/* Pack bars (4th+): matte and dim — kill the colored glow and knock the white
   sheens/inner border right down so the slate never brightens into a silver look
   that competes with 2nd place. */
.race-bar.is-pack {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.race-bar.is-pack::before {
  opacity: 0.22;
}
.race-bar.is-pack::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%, rgba(0, 0, 0, 0.28));
}

/* PnL number, riding the bar end (see .race-bar-end). */
.race-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.race-rank__num {
  color: var(--accent-2);
}

/* Fixed reward ladder: one slot per place, pinned to the right, never moves as
   rows re-order (so the bonuses don't ride the moving PnL numbers). */
.race-prize-slot {
  position: absolute;
  right: 0;
  width: 124px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.race-prize {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  /* Pack (4th+) bonus is green, matching the prize color in the rank/PnL views
     (ChartEndLabel's PRIZE_COLOR). The top 3 keep the gold accent (see .is-top). */
  color: #6bd08f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.race-prize-slot.is-top .race-prize {
  font-weight: 800;
  color: var(--accent);
}

/* Top 3 rows: same size as the rest, just bolder. */
.race-row.is-leader .race-rank,
.race-row.is-leader .race-value,
.race-row.is-leader .race-name {
  font-weight: 800;
}
.race-value.pos { color: var(--pos); }
.race-value.neg { color: var(--neg); }

/* Transport bar docked under the panel, like a video player's controls. */
/* Play button centered just below the panel's bottom border. */
.race-play-dock {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Transport row below the scrubber: play/replay (left) · date (center) ·
   Rank/PnL toggle (right). A 3-column grid keeps the date truly page-centered
   regardless of the side elements' widths. */
.transport {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2.5vw, 24px);
  min-height: 56px;
  /* Tight gap above the transport (the day readout sits at its top); the replay
     button's breathing room comes from the stacked row-gap on mobile. */
  margin-top: 12px;
}
.transport__left {
  justify-self: start;
}
.transport__center {
  justify-self: center;
}
.transport__right {
  justify-self: end;
}
.transport .race-play-dock {
  margin-top: 0;
}
.transport .day-display {
  position: static;
}

/* Play / replay button — sized to sit in the transport row's rhythm. */
.race-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  gap: 9px;
  padding: 11px 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  border: 1px solid var(--accent);
  cursor: pointer;
  background: #000;
  transition: transform 0.15s, background 0.2s;
}
.race-play__icon {
  font-size: 15px;
  line-height: 1;
}
.race-play:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(219, 179, 89, 0.1);
}

/* Scrubber sits below the panel, like a video progress bar under the video. */
.race-scrubber {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 6px 0 0;
  height: 18px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
/* Neutral track: the played portion is a soft white up to the thumb (--seek
   percent, set inline from the playhead), the remainder a faint rail — gold is
   reserved for the data + the primary controls. */
.race-scrubber::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.55) 0 var(--seek, 0%),
    var(--surface-border-strong) var(--seek, 0%)
  );
}
.race-scrubber::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.55) 0 var(--seek, 0%),
    var(--surface-border-strong) var(--seek, 0%)
  );
}
/* Neutral light handle, vertically centered on the 5px track */
.race-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f2f0ea;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
  cursor: grab;
}
.race-scrubber::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #f2f0ea;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
  cursor: grab;
}

@media (max-width: 720px) {
  /* Stack the top bar on a phone: full-width scrollable picker, big stat below. */
  .chart-topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .chart-topbar .month-bar {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }
  .top10-pnl {
    grid-column: 1;
  }

  /* The 3-column transport can't hold on a phone — stack it centered:
     date, then the play button, then the toggle. */
  .transport {
    grid-template-columns: 1fr;
    justify-items: center;
    /* larger gap between the stacked date and the replay button below it */
    row-gap: 20px;
  }
  .transport__left {
    justify-self: center;
    order: 2;
  }
  .transport__center {
    order: 1;
  }
  /* The woven chart drops to a legend on phones, so the Rank/PnL chooser has
     nothing to switch — hide it. */
  .transport__right {
    display: none;
  }
  /* Smaller play button on a phone. */
  .race-play {
    padding: 11px 22px;
    font-size: 15px;
    gap: 8px;
    min-width: 132px;
  }
  .race-play__icon {
    font-size: 14px;
  }

  /* Rank, then the arrow column, then the bar; a narrower gutter holds the ladder.
     Shorter height packs the rows tighter — kept in lockstep with ROW_H_MOBILE (the
     vertical stride set in BarChartRace) so rows neither overlap nor gap. */
  .race-row {
    grid-template-columns: 30px 16px 1fr;
    right: 64px;
    gap: 8px;
    height: 32px;
  }
  .race-prize-slot {
    width: 64px;
    height: 32px;
  }
  .race-rank {
    font-size: 15px;
  }
  .race-move {
    font-size: 10px;
  }
  .race-value {
    font-size: 15px;
  }
  .race-prize {
    font-size: 14px;
  }
  .race-flag {
    font-size: 16px;
    margin-right: 5px;
  }
  /* No room for a separate name column on a phone — render the flag + name INSIDE
     the bar instead (classic bar-race style). The row's name column is hidden and
     the in-bar name (clipped to the bar by overflow:hidden) takes over, so a long
     name is cut off at the bar's right edge rather than spilling onto the track. */
  .race-name {
    display: none;
  }
  .race-bar-name {
    position: absolute;
    left: 10px; /* a little padding inside the bar */
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
  }
  .race-bar-track {
    height: 22px;
    /* smaller reserved PnL slot at the phone font size */
    --pnl-slot: 84px;
  }
  /* Reserve a clear band below the last row so the centered day readout
     (an absolute overlay pinned to the panel bottom) doesn't collide with
     the 10th-place row now that the name column is hidden — and drop the
     readout itself lower so it sits comfortably inside that band. */
  /* Specificity bumped: the later `.chart-card { padding: ... }` shorthand
     (declared after this block) would otherwise reset padding-bottom, and the
     later `.day-display` base rule would reset `bottom`. */
  .chart-card.race-card {
    padding-bottom: 16px;
  }
  .chart-slot .day-display {
    bottom: 16px;
  }
  /* Phone: the chart isn't rendered (see RankChart) — the legend table is the
     whole panel, so it needs less bottom padding. */
  .chart-card {
    padding-bottom: 24px;
  }
}

.race-progress__total {
  color: var(--text-faint);
}

/* ---------- Chart Studio (tabs + shared slot) ---------- */
/* Segmented control: dark rounded container, white pill for the active view. */
.chart-tabs {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 22px auto 0;
  padding: 5px;
  border-radius: 999px;
  background: #15171c;
  border: 1px solid var(--surface-border);
}

/* Prominent "scoreboard" readout of the day — docked inside the panel, just
   above the bottom border. */
.day-display {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Mini month calendar under the "Day N" readout: squares fill left-to-right,
   top-to-bottom as the replay advances through the month. */
.mini-cal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 12px);
  gap: 4px;
}
.mini-cal__grid--head {
  margin-bottom: 1px;
}
.mini-cal__dow {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--text-faint);
  text-transform: uppercase;
}
.mini-cal__cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-sizing: border-box;
}
.mini-cal__cell--blank {
  visibility: hidden;
}
/* Empty (upcoming) days — faint recessed squares. */
.mini-cal__cell--future {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--surface-border);
}
/* Elapsed days — filled gold. */
.mini-cal__cell--past {
  background: var(--accent);
  border: 1px solid var(--accent);
}
/* Current day — bright, with a soft glow ring so it reads as "you are here". */
.mini-cal__cell--today {
  background: var(--accent-2);
  border: 1px solid var(--accent-2);
  box-shadow: 0 0 0 2px rgba(219, 179, 89, 0.35), 0 0 10px 1px var(--accent-glow);
}
/* Weekends (non-trading days) sit a touch dimmer in every state. */
.mini-cal__cell--future.mini-cal__cell--weekend {
  background: rgba(255, 255, 255, 0.03);
}
.mini-cal__cell--past.mini-cal__cell--weekend {
  background: var(--accent-soft);
  border-color: transparent;
}
.day-display__date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}
/* Calendar date in parens — softer than the "Day N" it follows. */
.day-display__cal {
  font-weight: 500;
  color: var(--text-dim);
}

/* The chart panel is the "screen" — hosts the play overlay + bottom scrubber.
   isolate keeps those overlays contained so the play button sits cleanly above. */
.chart-slot {
  position: relative;
  isolation: isolate;
}


.chart-tab {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.chart-tab:hover {
  color: var(--text);
}
.chart-tab.is-active {
  color: #15171c;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.chart-tab.is-active:hover {
  color: #15171c;
}

/* ---------- Chart ---------- */
.chart-card {
  /* Tighter horizontal margins so the bars use more of the width; trimmed bottom
     so the table doesn't leave a big gap below the last row. */
  padding: clamp(16px, 2.4vw, 24px) clamp(8px, 1.4vw, 14px);
  padding-bottom: clamp(10px, 1.4vw, 16px);
  /* Never let the card exceed its container (the mobile legend's intrinsic
     width would otherwise push it past the viewport). */
  max-width: 100%;
  box-sizing: border-box;
  /* Warm-grey surface echoing the hero stat cards, but semi-transparent so the
     black page shows through (the inherited .card backdrop-blur frosts it). */
  background: linear-gradient(160deg, rgba(36, 38, 46, 0.22), rgba(21, 22, 27, 0.22));
  /* Drop the card outline + top-edge highlight: on this large, mostly-empty
     panel they read as stray faint horizontal lines at the top and bottom
     rather than a tidy card edge. The solid fill + shadow define it instead. */
  border: none;
}
.chart-card::before {
  content: none;
}

.chart-wrap {
  width: 100%;
  height: clamp(360px, 48vw, 500px);
}

/* Mobile-only trader key for the trend/rank charts (inline end-labels don't
   fit on a phone). One trader per row, laid out on a shared 6-column grid so
   every column lines up vertically across rows (each item spreads its cells
   into the parent columns via display:contents).
   Columns: [bar] [rank] [flag] [name →] [value] [prize]. */
.chart-legend {
  display: grid;
  /* place · flag · name(1fr) · PnL · bar · prize — matches the desktop label. */
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}
.chart-legend__item {
  /* A real (animatable) box that still borrows the parent's column tracks via
     subgrid, so every row's columns stay aligned while framer can slide the row
     to a new slot when the standings re-sort. */
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}
.chart-legend__bar {
  position: relative;
  width: 36px;
  height: 12px;
  border-radius: 3px;
  background: rgba(196, 204, 216, 0.09); /* silver track */
  overflow: hidden;
}
.chart-legend__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: rgba(196, 204, 216, 0.34); /* silver fill */
}
.chart-legend__place {
  justify-self: end;
  color: var(--accent-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chart-legend__flag {
  line-height: 1;
}
.chart-legend__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
}
.chart-legend__val {
  justify-self: end;
  color: var(--pos);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chart-legend__prize {
  justify-self: end;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Bar-race-style data bar in the label's leading column. The lane is a faint
   tint of the row's medal color; the fill is more solid, and the top 3 pick up a
   colored glow that matches their podium line (vars set on .chart-card). */
.chart-bar-track {
  fill-opacity: 0.09;
}
.chart-bar {
  fill-opacity: 0.45;
}
.chart-bar--glow1,
.chart-bar--glow2,
.chart-bar--glow3 {
  fill-opacity: 0.6;
}
.chart-bar--glow1 {
  filter: drop-shadow(0 0 2px var(--leader-color)) drop-shadow(0 0 6px var(--leader-color));
}
.chart-bar--glow2 {
  filter: drop-shadow(0 0 2px var(--glow-2)) drop-shadow(0 0 5px var(--glow-2));
}
.chart-bar--glow3 {
  filter: drop-shadow(0 0 2px var(--glow-3)) drop-shadow(0 0 5px var(--glow-3));
}

/* End-of-line label dot leader — subtle dotted line from name to value. */
.chart-dotlead {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}

/* Instant (no native-title delay) country tooltip on the label flag. */
.chart-flag {
  cursor: default;
}
.chart-flag__tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.chart-flag:hover .chart-flag__tip {
  opacity: 1;
}
.chart-flag__tip rect {
  fill: #1a1d24;
  stroke: rgba(255, 255, 255, 0.2);
}
.chart-flag__tip text {
  fill: #f7f6f3;
}

/* Bump-line casing: background-colored stroke drawn under each line so crossings
   read clearly. CSS wins over the inline stroke attribute, so the token drives it. */
.rank-casing {
  stroke: var(--chart-casing);
  transition: stroke-opacity 0.45s ease, stroke-width 0.45s ease;
}

/* Bump-line glow tiers. Every line carries `.rank-line` with a 3-part
   drop-shadow that is transparent by default; the podium classes below swap in
   colored, blurred shadows. Because the filter always has the same 3 shadows,
   `transition: filter` interpolates blur + color, so the glow softly fades in
   and out as a line enters or leaves the top 3. */
.rank-line {
  filter:
    drop-shadow(0 0 0 transparent)
    drop-shadow(0 0 0 transparent)
    drop-shadow(0 0 0 transparent);
  transition: filter 0.45s ease, stroke 0.45s ease, stroke-opacity 0.45s ease, stroke-width 0.45s ease;
}

/* #1 leader — brightest. Radii kept tight so the glow hugs the line rather than
   blooming out into the label column at the line's end. */
.leader-line {
  filter:
    drop-shadow(0 0 2px var(--leader-color))
    drop-shadow(0 0 5px var(--leader-color))
    drop-shadow(0 0 10px var(--leader-color));
}

/* #2 / #3 — vivid colored glow in each trader's own hue. */
.glow-2 {
  filter:
    drop-shadow(0 0 2px var(--glow-2))
    drop-shadow(0 0 4px var(--glow-2))
    drop-shadow(0 0 7px var(--glow-2));
}
.glow-3 {
  filter:
    drop-shadow(0 0 2px var(--glow-3))
    drop-shadow(0 0 4px var(--glow-3))
    drop-shadow(0 0 7px var(--glow-3));
}

@media (prefers-reduced-motion: reduce) {
  .rank-line { transition: none; }
  /* No pulsing flare: hold a gentle, steady warm bloom on the new leader instead. */
  .race-bar.is-hot { animation: none; }
  .race-bar-heat { animation: none; opacity: 0.5; }
}

/* The SVG root clips overflow by default, which shears the leader-line glow at
   the plot edge. Let it bleed into the card's padding instead of being cropped
   against the sides of the panel. */
.chart-wrap .recharts-surface {
  overflow: visible;
}

/* ---------- Custom tooltip ---------- */
.tooltip {
  min-width: 210px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(10, 16, 17, 0.92);
  border: 1px solid var(--surface-border-strong);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-card);
}

.tooltip__date {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}

.tooltip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 2px 0;
}

.tooltip__name {
  flex: 1;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip__val {
  font-family: var(--font-mono);
  font-weight: 700;
}

.swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

/* ---------- Podium ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 22px;
}

.podium__col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.podium__col.rank-1 { order: 2; transform: translateY(-26px); }
.podium__col.rank-2 { order: 1; }
.podium__col.rank-3 { order: 3; }

/* Rank component sits above each card */
.podium__header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 14px;
}

.podium__rankbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.podium__item {
  position: relative;
  width: 100%;
  padding: 24px 20px 0;
  text-align: center;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  overflow: hidden;
}

/* Keep all card content above the ambient glow so text stays crisp. */
.podium__item > * {
  position: relative;
}
.podium__glow {
  z-index: 0;
}

/* #1 card — the standout: bigger and gold-edged, kept clean. */
.podium__col.rank-1 .podium__item {
  padding: 30px 22px 0;
  border-color: rgba(232, 210, 168, 0.55);
  background: var(--surface);
  box-shadow:
    0 0 0 1px rgba(232, 210, 168, 0.3),
    0 22px 55px -18px rgba(0, 0, 0, 0.85);
}

.podium__glow {
  position: absolute;
  inset: -40% 0 auto 0;
  height: 50%;
  filter: blur(55px);
  opacity: 0.16;
  pointer-events: none;
}
.podium__col.rank-1 .podium__glow {
  opacity: 0.26;
}

/* Champion plaque (#1) — large, high-contrast, sits above the card */
.podium__champ {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #120c02;
  padding: 13px 30px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  box-shadow: 0 12px 34px -8px var(--accent-glow);
}

.podium__champ-icon {
  font-size: 18px;
  line-height: 1;
  transform-origin: center;
  animation: crown-pulse 2.4s ease-in-out infinite;
}
@keyframes crown-pulse {
  0%, 100% { transform: translateY(-1px) scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: translateY(-2px) scale(1.14); filter: drop-shadow(0 0 7px rgba(255, 240, 200, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .podium__champ-icon { animation: none; }
}

.podium__medal {
  font-size: 22px;
  line-height: 1;
}

.podium__avatar {
  width: 56px;
  height: 56px;
  margin: 12px auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  color: #1a1408;
}
.podium__col.rank-1 .podium__avatar {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

.podium__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.podium__col.rank-1 .podium__name {
  font-size: 19px;
}

.podium__handle {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 16px;
}

/* Net PnL is the focal point of each card */
.podium__net {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.podium__net-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.podium__col.rank-1 .podium__net-val {
  font-size: clamp(40px, 5.6vw, 56px);
}

.podium__net-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Bonus stays prominent as a gold pill, but secondary to net PnL */
.podium__bonus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.podium__bonus-pill {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--accent-2);
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(219, 179, 89, 0.5);
  background: rgba(219, 179, 89, 0.12);
  font-variant-numeric: tabular-nums;
}
.podium__col.rank-1 .podium__bonus-pill {
  font-size: 40px;
  padding: 10px 26px;
}

.podium__bonus-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* PnL curve bleeds to the bottom edge of the card */
.podium__spark {
  margin: 18px -20px 0;
  line-height: 0;
}
.podium__col.rank-1 .podium__spark {
  margin: 20px -22px 0;
}

/* ---------- Leaderboard rows ---------- */
.rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.row {
  display: grid;
  grid-template-columns: 44px 1fr 120px 84px 84px 96px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.row:hover {
  border-color: var(--surface-border-strong);
  background: var(--surface-2);
  transform: translateX(2px);
}

/* Rows outside the paid positions are visually de-emphasized. */
.row.is-unpaid {
  opacity: 0.6;
}
.row.is-unpaid:hover {
  opacity: 1;
}

/* Prize column */
.row__prize {
  text-align: right;
}
.row__prize-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-2);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(219, 179, 89, 0.45);
  background: rgba(219, 179, 89, 0.1);
  font-variant-numeric: tabular-nums;
}
.row__prize-none {
  color: var(--text-faint);
}

.row__rank {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-faint);
  text-align: center;
}

.row__trader {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.row__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #1a1408;
  flex: none;
}

.row__names {
  min-width: 0;
}

.row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__handle {
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__pnl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.row__metric {
  text-align: right;
}

.row__metric-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
}

.row__metric-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.row__spark {
  grid-column: 1 / -1;
}

.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* Tabular figures keep count-up + columns from jittering (Work Sans is proportional). */
.row__rank,
.row__metric-val,
.tooltip__val,
.tooltip__date {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.col-head {
  display: grid;
  grid-template-columns: 44px 1fr 120px 84px 84px 96px;
  gap: 14px;
  padding: 0 18px 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.col-head span:nth-child(3),
.col-head span:nth-child(4),
.col-head span:nth-child(5),
.col-head span:nth-child(6) { text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav__links {
    display: none;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .row,
  .col-head {
    grid-template-columns: 34px 1fr 96px 84px;
  }
  .col-head span:nth-child(4),
  .col-head span:nth-child(5),
  .row__metric {
    display: none;
  }
  .podium {
    gap: 8px;
  }
  .podium__item { padding: 16px 10px 0; }
  .podium__col.rank-1 .podium__item { padding: 20px 10px 0; }
  .podium__handle { display: none; }
}

/* Narrow phones: the 3-across podium can't hold the PnL figures / bonus pills
   (~90px per card). Stack it into one readable column, champion first, and
   drop the font sizes on the stats strip so the big money figures and the
   countdown stop overflowing their 2-up cards. */
@media (max-width: 560px) {
  .podium {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .podium__col.rank-1 { order: 1; transform: none; }
  .podium__col.rank-2 { order: 2; }
  .podium__col.rank-3 { order: 3; }
  .podium__header { min-height: 0; margin-bottom: 10px; }
  .podium__item,
  .podium__col.rank-1 .podium__item { padding: 24px 20px 0; }
  .podium__handle { display: block; }

  .stat-card { padding: 18px 16px; }
  .stat-card__num { font-size: 24px; }
  .stat-card__num--count { font-size: 18px; }
}

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

/* ===== HUD frame — self-contained; delete this block (and HudFrame.tsx) to remove ===== */
.hud {
  position: relative;
}
.hud__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-lg);
  /* inner vignette + soft gold edge glow */
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(219, 179, 89, 0.14);
  overflow: hidden;
}
.hud__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.6;
  animation: hud-scan 7s linear infinite;
}
@keyframes hud-scan {
  from { background-position: 0 0; }
  to { background-position: 0 -200px; }
}
/* ===== end HUD frame ===== */