/* -----------------------------------------------------------------------------
   VALEON — leaderboards
   The phone is the system of record (v0.6 §3.3); this page publishes what the
   phones sent up.

   §9 holds: the chrome here is desaturated, thin and technical. The only family
   colour on the page is in the Community breakdown, where the seven families
   are the subject rather than the decoration — the same exemption the family
   cards get.
   -------------------------------------------------------------------------- */

.lb-hero {
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
}
.lb-hero h1 { margin-bottom: var(--space-3); }
.lb-hero p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink-mid);
}

.lb-panel {
  padding-bottom: var(--space-9);
  position: relative;
}

/* A soft pool behind the board, the same device MenuChrome.Backdrop() uses in
   the game and .hero::before uses on the landing page.
   Without it the drifting shards pass straight through a data table, and a
   ranked list is the one surface on this site where legibility outranks
   spectacle (§9 - the UI is an instrument panel, not part of the show). */
.lb-panel::before {
  content: "";
  position: absolute;
  inset: -2% -4% -1%;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(5, 8, 18, 0.88), transparent 78%);
  pointer-events: none;
  z-index: -1;
}

/* ----- Controls: tabs on the left, level picker on the right ------------- */
.lb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.lb-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lb-tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--grid-line-warm);
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-display);
  letter-spacing: var(--track-wide);
  font-size: 0.82rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.lb-tab:hover { color: var(--ink-hi); border-color: var(--ink-mid); }

/* Keyed off aria-selected rather than a class, so the styling cannot drift
   away from what assistive technology is being told. */
.lb-tab[aria-selected="true"] {
  color: var(--cryo);
  border-color: var(--cryo);
  background: rgba(51, 230, 255, 0.06);
}
/* A visible focus ring is not optional once arrow keys move focus between
   tabs — without it a keyboard user cannot see where they are. */
.lb-tab:focus-visible {
  outline: 2px solid var(--cryo);
  outline-offset: 2px;
}

.lb-level {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lb-level label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--ink-lo);
}
.lb-level select {
  appearance: none;
  padding: 0.5rem 2.2rem 0.5rem 0.85rem;
  border: 1px solid var(--grid-line-warm);
  border-radius: var(--radius-2);
  background-color: rgba(14, 22, 38, 0.6);
  color: var(--ink-hi);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  /* Inline chevron — an external asset for a 10px triangle is not worth a
     request, and this one inherits the text colour. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A8B0C7' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 10px 6px;
}
.lb-level select:hover { border-color: var(--ink-mid); }
.lb-level select:focus-visible { outline: 2px solid var(--cryo); outline-offset: 2px; }
.lb-level[hidden] { display: none; }

.lb-blurb {
  color: var(--ink-lo);
  font-size: 0.88rem;
  margin: 0 0 var(--space-5);
}

/* ----- Status ------------------------------------------------------------ */
.lb-status {
  max-width: 720px;
  margin: 0 auto var(--space-6);
  text-align: center;
  padding: var(--space-6);
  border: 1px dashed var(--grid-line-warm);
  border-radius: var(--radius-3);
  color: var(--ink-mid);
}
.lb-status.err { color: var(--plasma); border-color: rgba(255, 41, 140, 0.4); }
.lb-status .k {
  font-family: var(--font-display);
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ink-lo);
  margin-bottom: var(--space-2);
}

/* ----- Ranked table ------------------------------------------------------ */
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  /* Fixed layout so the columns are sized by these rules rather than by
     whatever the longest player name happens to be. It is also what makes
     ellipsis truncation work on a td at all: under `auto` layout a cell
     grows to fit its content and the overflow rules never engage. */
  table-layout: fixed;
}
.lb-table th.lb-rank,  .lb-table td.lb-rank  { width: 64px; }
.lb-table th.lb-value, .lb-table td.lb-value { width: 8.5rem; }
.lb-table th, .lb-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--grid-line);
}
.lb-table th {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--ink-lo);
  white-space: nowrap;
}
.lb-table tbody tr { transition: background var(--dur-1) var(--ease-out); }
.lb-table tbody tr:hover { background: rgba(51, 230, 255, 0.04); }

.lb-table td.lb-rank {
  color: var(--ink-lo);
  width: 64px;
  font-variant-numeric: tabular-nums;
}
/* The podium stays desaturated — §9. Rank reads through brightness and weight,
   not through colour, which is what the rest of the UI does too. */
.lb-table td.lb-rank-1 { color: var(--quantum); text-shadow: 0 0 12px rgba(240, 245, 255, 0.45); font-weight: 700; }
.lb-table td.lb-rank-2 { color: var(--ink-hi); font-weight: 700; }
.lb-table td.lb-rank-3 { color: var(--ink-mid); font-weight: 700; }

.lb-table td.lb-player {
  color: var(--ink-hi);
  /* Names are player-supplied and arbitrary length; truncate rather than let
     one push the value column off a phone. Works because the table is
     table-layout: fixed — see above. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-table th.lb-value, .lb-table td.lb-value {
  text-align: right;
  color: var(--cryo);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ----- Community --------------------------------------------------------- */
.lb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.lb-stat {
  padding: var(--space-5);
  border-left: 2px solid var(--cryo);
  background: rgba(14, 22, 38, 0.35);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}
.lb-stat .k {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--ink-lo);
  margin-bottom: var(--space-2);
}
.lb-stat .v {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink-hi);
  letter-spacing: var(--track-wide);
  font-variant-numeric: tabular-nums;
}

.lb-subhead {
  font-size: 0.86rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: var(--space-5);
}

.lb-families {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lb-family {
  display: grid;
  grid-template-columns: 34px 110px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-3);
  background: rgba(14, 22, 38, 0.3);
  transition: border-color var(--dur-2) var(--ease-out);
}
.lb-family:hover { border-color: color-mix(in oklab, var(--_glow) 45%, transparent); }
.lb-family-icon svg.shard { width: 30px; height: 30px; overflow: visible; }
.lb-family-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--_glow, var(--ink-hi));
}
.lb-family-bar {
  height: 6px;
  background: var(--grid-line);
  border-radius: 3px;
  overflow: hidden;
}
.lb-family-fill {
  height: 100%;
  min-width: 2px;
  background: var(--_glow, var(--cryo));
  box-shadow: 0 0 12px color-mix(in oklab, var(--_glow, var(--cryo)) 60%, transparent);
  transition: width var(--dur-4) var(--ease-out);
}
.lb-family-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}

/* ----- Narrow ------------------------------------------------------------ */
@media (max-width: 640px) {
  .lb-controls { flex-direction: column; align-items: stretch; }
  .lb-level { justify-content: space-between; }
  .lb-table th, .lb-table td { padding: var(--space-3) var(--space-2); }
  .lb-table td.lb-rank { width: 44px; }

  /* The bar is the first thing worth losing — the number carries the same
     information and the name must not truncate to nothing. */
  .lb-family { grid-template-columns: 28px 1fr auto; }
  .lb-family-bar { display: none; }
  .lb-family-icon svg.shard { width: 24px; height: 24px; }
}