/* ==========================================================================
   bust.fun - WAGER RACES view styles. Reuses the global synthwave design tokens
   (--surface*, --line*, --fg*, --muted, --brand, --accent, --violet, --gold,
   --win, --neon-glow*, --sp-*, --r-*, --fs-*, --fw-*). Feature-scoped: every
   selector is under .races-* / #view-races so it can never bleed into other
   views. a11y: AA-contrast text on these surfaces; motion is limited to a single
   optional pulse that is nulled by the global prefers-reduced-motion reset (and
   again here, defensively).
   ========================================================================== */

#view-races .races-intro {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: var(--sp-3);
}

#view-races .races-status {
  color: var(--muted);
  font-size: var(--fs-sm);
  min-height: 1.2em;
}

.races-section-title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: var(--fw-semi);
  margin: var(--sp-4) 0 var(--sp-2);
}

/* Responsive grid of race cards (one column on narrow screens). The markup uses .races-active /
   .races-closed containers (built by races.js), now hosted inside the Competitions hub (#view-competitions);
   apply the grid to BOTH so cards lay out side-by-side on wider viewports instead of stacking full-width
   single-column. (engagement-css un-applied-grid fix; scoped to the class so it works inside the hub.) */
.races-grid,
.races-active,
.races-closed {
  display: grid;
  /* min(100%, 320px) not a bare 320px: on a ~294px content column at a 320px viewport a fixed 320px min
     forces every track WIDER than the container, so cards overflow the right edge (~29px bleed, clipped
     prize pills). min() lets a single column shrink to 100% of the container below 320px while keeping the
     320px min wherever there IS room — desktop multi-column layout is unchanged. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-3);
}
/* The empty-state / status paragraph inside an empty grid should span the full row (not a narrow column). */
.races-active > .races-empty,
.races-active > .muted,
.races-closed > .muted { grid-column: 1 / -1; }

/* "Play to climb" CTA on an active race card (deep-links to the lobby to start wagering). */
.race-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.race-cta:hover { box-shadow: var(--glow-accent); }
.race-cta:active { transform: translateY(1px); }
.race-cta:focus-visible { outline: none; box-shadow: var(--ring); }
.race-cta-guest {
  background: var(--surface-2);
  color: var(--fg);
  border-color: var(--line-2);
}
/* Per-rank prize split table on an active race card. */
.race-splits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.race-split {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-xs);
  padding: 3px 6px;
  border-radius: var(--r-sm);
}
.race-split:nth-child(odd) { background: var(--surface-2); }
.race-split-rank { color: var(--gold); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.race-split-lbl { color: var(--muted); }
.race-split-amt { color: var(--win); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.race-splits-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: var(--fw-semi); margin: var(--sp-1) 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .race-cta { transition: none !important; }
  .race-cta:active { transform: none !important; }
}

/* ---- a single race card ---- */
.race-card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.race-card-closed {
  background: var(--surface-2);
  opacity: .96;
}

.race-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.race-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--fg);
  margin: 0;
}

/* Status / prize pill. */
.race-pill {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: var(--fw-semi);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}
.race-pill.race-running {
  color: #00120a;
  background: linear-gradient(180deg, var(--win), var(--win-grad-end));
  border-color: transparent;
}
.race-pill.race-scheduled {
  color: var(--fg-dim);
  background: var(--surface-3);
}
.race-pill.race-closed {
  color: #211700;
  background: linear-gradient(180deg, var(--gold), #e0ad34);
  border-color: transparent;
}

/* Stats row: prize pool + countdown. */
.race-stats {
  display: flex;
  gap: var(--sp-2);
}
.race-stat {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.race-stat-k {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: var(--fw-semi);
}
.race-stat-v {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--fg);
}
.race-pool {
  color: var(--violet);
  text-shadow: var(--neon-glow-text);
}
.race-countdown {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* "Your rank" callout. */
.race-yours {
  font-size: var(--fs-sm);
  color: var(--accent-text);
  font-weight: var(--fw-med);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
}

/* ---- leaderboard / winners list ---- */
.race-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.race-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.race-row:nth-child(odd) { background: var(--surface-2); }
.race-winner { grid-template-columns: 2.4rem 1fr auto; }

/* Phone: the 4-col active row (rank | who | turnover | bets) squeezes the ellipsis handle to ~8 chars at
   320px, so distinct `player-<id>` handles collapse to the same "player-34…". The bets COUNT is secondary
   metadata (rank + handle + turnover carry the ranking); drop it on the narrowest phones and reclaim its
   track for the handle, so full/near-full handles read. Turnover (the metric) stays. Winner rows are already
   3-col so they're unaffected. */
@media (max-width: 360px) {
  .race-row { grid-template-columns: 2.4rem 1fr auto; }
  .race-row .race-bets { display: none; }
}

.race-rank {
  font-weight: var(--fw-semi);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.race-who {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-turnover {
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.race-bets {
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.race-prize {
  color: var(--win);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Self-highlight: the signed-in user's own row (server-driven via yourRank). */
.race-row-me {
  outline: 1px solid var(--accent);
  background: linear-gradient(90deg, rgba(124, 92, 255, .14), transparent 70%) !important;
}
.race-row-me .race-rank { color: var(--accent-text); }

.race-empty {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--sp-2);
  background: transparent !important;
}

/* ---- EMPTY STATE: one intentional, centered surface card (replaces the two barren one-liners) ----
   The wrap spans the full grid row (the .races-active grid otherwise slots it into a narrow column) and
   centers the card, which is capped to a comfortable reading width. Scoped entirely to .races-empty-* so it
   can never bleed into other views that share this stylesheet. */
.races-empty-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-2);
}
.races-empty-card {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.races-empty-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: var(--r-pill);
  color: var(--gold);
  /* A cohesive GOLD focal moment (was a faint violet glow behind a gold trophy — mismatched + low-emphasis):
     gold radial glow + a gold-tinted ring + a soft outer bloom so the trophy reads as an intentional anchor. */
  background: radial-gradient(circle at 50% 40%, rgba(255, 207, 92, .22), transparent 70%);
  border: 1px solid color-mix(in oklab, var(--gold) 42%, var(--line-2));
  box-shadow: 0 0 26px rgba(255, 207, 92, .16), inset 0 0 0 1px rgba(255, 207, 92, .08);
}
.races-empty-art svg { width: 40px; height: 40px; }
.races-empty-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: -.01em;
}
.races-empty-copy {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}
.races-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}
/* Primary CTA — the next step the empty page was missing. */
.races-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.races-empty-cta:hover { box-shadow: var(--glow-accent); }
.races-empty-cta:active { transform: translateY(1px); }
.races-empty-cta:focus-visible { outline: none; box-shadow: var(--ring); }
/* Secondary link — a quieter alternate route (leaderboard). */
.races-empty-link {
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}
.races-empty-link:hover { border-bottom-color: currentColor; }
.races-empty-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 2px; }
.races-empty-past {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .races-empty-cta { transition: none !important; }
  .races-empty-cta:active { transform: none !important; }
}

/* The top-ranked active row gets a subtle gold accent + a single pulse (motion only). */
.race-card:not(.race-card-closed) .race-board .race-row:first-child .race-rank {
  color: var(--gold);
}

/* Motion: a one-shot glow on the leading prize pool. Disabled under reduced-motion (global reset also
   nulls it; this is defensive so a future global change can't re-enable motion here). */
@keyframes race-pool-pulse {
  0%   { text-shadow: var(--neon-glow-text); }
  50%  { text-shadow: 0 0 14px var(--violet); }
  100% { text-shadow: var(--neon-glow-text); }
}
/* .race-running ~ .race-stats .race-pool is a placeholder hook; no infinite animation by default (no styles needed) */

@media (prefers-reduced-motion: reduce) {
  .race-pool { animation: none !important; }
}