/* ==========================================================================
   bust.fun - TOURNAMENTS view styles (EPIC 2). 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 .tour-* / #view-tournaments so it can never bleed into
   other views. Sibling of races.css. a11y: AA-contrast text on these surfaces;
   motion is limited and nulled by the global prefers-reduced-motion reset (and
   again here, defensively).
   ========================================================================== */

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

.tournaments-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 tournament cards (one column on narrow screens). The markup uses
   .tournaments-active / .tournaments-closed containers (built by tournaments.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; .tournaments-upcoming stays a single list, below.) */
.tournaments-grid,
.tournaments-active,
.tournaments-closed {
  display: grid;
  /* min(100%, 320px) not a bare 320px: at a 320px viewport the ~294px content column can't hold a 320px
     min track, so cards overflow the right edge (clipped prize pills on the Past-tournaments cards). min()
     shrinks a lone column to 100% below 320px while keeping the 320px min where there's room — desktop
     multi-column layout unchanged. Mirrors races.css. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-3);
}
.tournaments-active > .muted,
.tournaments-closed > .muted { grid-column: 1 / -1; }

/* "Play to climb" CTA on an active tournament card (deep-links to the lobby). Mirrors the race CTA. */
.tour-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);
}
.tour-cta:hover { box-shadow: var(--glow-accent); }
.tour-cta:active { transform: translateY(1px); }
.tour-cta:focus-visible { outline: none; box-shadow: var(--ring); }
.tour-cta-guest { background: var(--surface-2); color: var(--fg); border-color: var(--line-2); }
@media (prefers-reduced-motion: reduce) {
  .tour-cta { transition: none !important; }
  .tour-cta:active { transform: none !important; }
}

/* ---- a single tournament card ---- */
.tour-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);
}
.tour-card-closed {
  background: var(--surface-2);
  opacity: .96;
}

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

/* Status / prize pill. */
.tour-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;
}
.tour-pill.tour-running {
  color: #00120a;
  background: linear-gradient(180deg, var(--win), var(--win-grad-end));
  border-color: transparent;
}
.tour-pill.tour-scheduled {
  color: var(--fg-dim);
  background: var(--surface-3);
}
.tour-pill.tour-closed {
  color: #211700;
  background: linear-gradient(180deg, var(--gold), #e0ad34);
  border-color: transparent;
}

.tour-closed-sub {
  margin: 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

/* Stats row: prize pool + metric + countdown. */
.tour-stats {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.tour-stat {
  flex: 1;
  min-width: 90px;
  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;
}
.tour-stat-k {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: var(--fw-semi);
}
.tour-stat-v {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--fg);
}
.tour-pool {
  color: var(--violet);
  text-shadow: var(--neon-glow-text);
}
.tour-countdown {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

/* "Your rank" callout. */
.tour-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);
}

/* ---- standings / winners list ---- */
.tour-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tour-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);
}
.tour-row:nth-child(odd) { background: var(--surface-2); }
.tour-winner { grid-template-columns: 2.4rem 1fr auto; }

.tour-rank {
  font-weight: var(--fw-semi);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tour-who {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-value {
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tour-bets {
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.tour-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). */
.tour-row-me {
  outline: 1px solid var(--accent);
  background: linear-gradient(90deg, rgba(124, 92, 255, .14), transparent 70%) !important;
}
.tour-row-me .tour-rank { color: var(--accent-text); }

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

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

/* ---- upcoming schedule list ---- */
.tour-up-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tour-up-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.tour-up-name {
  color: var(--fg);
  font-weight: var(--fw-med);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-up-meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.tour-up-when {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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