/* ==========================================================================
   Leaderboard — the proving grounds. Composes nag-tokens.css exclusively;
   the only colour literals here are WoW class identities (identity only,
   never judgement). One dark surface ruled by hairlines — no cards.
   ========================================================================== */

.leaderboard-page { background: var(--nag-ink); }

.board-main { padding-bottom: clamp(72px, 9vw, 120px); }

/* ---------- hero strip ---------- */

.board-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 124px) 0 clamp(40px, 5vw, 62px);
  border-bottom: 1px solid var(--nag-hairline);
}

/* ghost wordmark bleeding off bottom-right, exactly like a plate mark */
.board-hero::after {
  content: "RANKED";
  position: absolute;
  right: 18px;
  bottom: -0.14em;
  z-index: 0;
  color: var(--nag-mark-ink);
  font-size: clamp(4.2rem, 11vw, 9.5rem);
  font-weight: 780;
  letter-spacing: -0.085em;
  line-height: 0.92;
  text-align: right;
  text-transform: uppercase;
  pointer-events: none;
}

.board-hero__inner { position: relative; z-index: 1; }

.board-hero__display {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  margin-bottom: 0.35em;
}

.board-hero .nag-lead { margin: 0; }

/* ---------- filters ---------- */

.board-filters {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 3.4vw, 40px) 0 22px;
}

.board-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.board-filter__label {
  color: var(--nag-text-mute);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.board-filter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.board-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--nag-text-dim);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.board-pill:hover {
  color: var(--nag-text);
  border-color: rgba(255, 255, 255, 0.22);
}

/* selection is gold chrome — never a glow */
.board-pill[aria-pressed="true"] {
  color: var(--nag-text);
  background: var(--nag-gold-edge);
  border-color: var(--nag-gold-edge-strong);
}

/* ---------- the board: one hairline-ruled monolith ---------- */

.board-table {
  border-top: 1px solid var(--nag-hairline);
  border-bottom: 1px solid var(--nag-hairline);
  background: var(--nag-panel-raised);
}

.board-cols,
.board-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 90px 110px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}

.board-cols {
  border-bottom: 1px solid var(--nag-hairline);
  color: var(--nag-text-mute);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.board-cols span:last-child { text-align: right; }

.board-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-row { border-bottom: 1px solid var(--nag-hairline); }
.board-row:last-child { border-bottom: none; }

.board-row__rank {
  color: var(--nag-text-mute);
  font-size: 0.95rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.board-row__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.board-row__name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nag-text);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-row__meta {
  color: var(--nag-text-faint);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-row__region {
  color: var(--nag-text-mute);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.board-row__score {
  color: var(--nag-text);
  font-size: 1.08rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
  text-align: right;
}

/* quiet states: loading, empty, unreadable — words, never fake rows */
.board-quiet {
  margin: 0;
  padding: 16px 18px;
  color: var(--nag-text-faint);
  font-size: 0.95rem;
  font-style: italic;
}
.board-quiet[hidden] { display: none; }

.board-foot {
  display: flex;
  justify-content: center;
  padding: 28px 0 0;
}

.board-note {
  margin: 26px auto 0;
  max-width: 62ch;
  color: var(--nag-text-faint);
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
}

/* ---------- class identity dots (palette shared with command-deck.css,
   verbatim — identity only, never judgement) ---------- */

.board-class-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.board-class-dot[data-class="WARRIOR"] { background: #c79c6e; }
.board-class-dot[data-class="PALADIN"] { background: #f58cba; }
.board-class-dot[data-class="HUNTER"] { background: #abd473; }
.board-class-dot[data-class="ROGUE"] { background: #fff569; }
.board-class-dot[data-class="PRIEST"] { background: #ffffff; }
.board-class-dot[data-class="DEATHKNIGHT"] { background: #c41f3b; }
.board-class-dot[data-class="SHAMAN"] { background: #0070de; }
.board-class-dot[data-class="MAGE"] { background: #69ccf0; }
.board-class-dot[data-class="WARLOCK"] { background: #9482c9; }
.board-class-dot[data-class="MONK"] { background: #00ff96; }
.board-class-dot[data-class="DRUID"] { background: #ff7d0a; }
.board-class-dot:not([data-class]) { background: var(--nag-neutral); }

/* ---------- responsive: collapse, never reflow ---------- */

@media (max-width: 900px) {
  .board-cols,
  .board-row { grid-template-columns: 52px minmax(0, 1fr) 72px 96px; gap: 12px; }
}

@media (max-width: 620px) {
  .board-cols,
  .board-row { grid-template-columns: 40px minmax(0, 1fr) 84px; gap: 10px; padding: 10px 12px; }
  .board-cols span:nth-child(3),
  .board-row__region { display: none; }
  .board-quiet { padding: 14px 12px; }
}