.leaderboard-screen {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* .lb-layout grid is defined once in components/list-screen.css; only cells here. */
.lb-empty-cell { text-align: center; padding: 24px 12px; color: var(--ink-3); }

/* Scoped so it out-ranks admin-dashboard.css's .dash-tiles 2-col default regardless of load order. */
.lb-kpis { width: 100%; }

/* Both classes: battlefield.css loads after and its .bf-table min-width would win on equal specificity. */
.bf-table.lb-table { min-width: 820px; }
.lb-table.is-compact .lb-hide-sm { display: none; }

.lb-rank-col { width: 56px; }

.lb-rank {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  color: var(--ink-3);
}
.lb-medal { font-size: 1.05rem; }

.lb-av {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
}
.lb-name {
  font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-name-link {
  all: unset; cursor: pointer; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.lb-name-link:hover { color: var(--bronze-2); text-decoration: underline; }
.lb-name-link:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; border-radius: var(--radius-s); }
/* Own row blue, top ten gold, and the overlap named outright at (0,4,2) so the pair does not
   rest on source order. Each tint out-ranks .lb-name-link:hover, so the cue is restated below. */
.lb-table tbody tr.is-me .lb-name-link { color: var(--lapis-2); }
.lb-table tbody tr.is-top .lb-name-link { color: var(--gold); }
.lb-table tbody tr.is-me.is-top .lb-name-link { color: var(--gold); }
.lb-table tbody tr.is-me .lb-name-link:hover,
.lb-table tbody tr.is-top .lb-name-link:hover { color: var(--bronze-2); }

/* Both are the shared pills (.nl-you-pill / .nl-admin-pill) plus this flex line. */
.lb-pill-you, .lb-pill-admin { flex: 0 0 auto; }

.lb-title-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--ink-2); font-size: 0.74rem; font-weight: 600;
  white-space: nowrap;
}

.lb-rating { font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.lb-games, .lb-winrate { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-stars { white-space: nowrap; }
.leaderboard-stars { letter-spacing: 1px; }

.lb-table tbody tr.is-me td { background: color-mix(in srgb, var(--lapis-2) 8%, transparent); }
.lb-table tbody tr.is-me:hover td { background: color-mix(in srgb, var(--lapis-2) 14%, transparent); }

.lb-form { display: inline-flex; gap: 3px; }
.lb-dot {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--bg-3); border: 1px solid var(--border);
}
.lb-dot-w { background: var(--laurel); border-color: var(--laurel-2); }
.lb-dot-l { background: var(--porphyry); border-color: var(--porphyry-2); }
.lb-dot-d { background: var(--bronze-deep); border-color: var(--bronze); }
/* 'n' = fewer than 10 games on record — an empty slot, not a result. */
.lb-dot-n { opacity: 0.45; }

@media (max-width: 640px) {
  .bf-table.lb-table { min-width: 560px; font-size: 0.84rem; }
  .lb-table thead th, .lb-table tbody td { padding: 8px 10px; }
  .lb-dot { width: 7px; height: 7px; }
  .lb-pill-you, .lb-pill-admin { font-size: 0.56rem; padding: 1px 6px; }
}