/* ui/Leaderboard — contract: ./Leaderboard.spec.md. Tokens from ui/Theme. */

.qc-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 26px 24px 32px;
  border: 1px solid var(--qc-line);
  border-radius: var(--qc-radius);
  background: var(--qc-glass);
}

/* ------------------------------------------------------------- header --- */

.qc-leaderboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qc-leaderboard__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-text);
}

/* ------------------------------------------------------------ windows --- */

.qc-leaderboard__windows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.qc-leaderboard__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* a thumb target, like every other pill in the UI */
  padding: 0 18px;
  border: 1px solid var(--qc-line-strong);
  border-radius: 999px;
  font: inherit;
  color: var(--qc-text-dim);
  cursor: pointer;
  transition: color var(--qc-dur-fast) var(--qc-ease-out), border-color var(--qc-dur-fast) var(--qc-ease-out),
    background-color var(--qc-dur-fast) var(--qc-ease-out);
}

.qc-leaderboard__tab:hover {
  color: var(--qc-text);
  border-color: var(--qc-accent-2);
}

.qc-leaderboard__tab[data-selected] {
  color: var(--qc-text);
  border-color: var(--qc-accent);
  background: color-mix(in oklab, var(--qc-accent) 18%, transparent);
}

/* The radios are visually hidden, so the ring belongs to the whole pill. */
.qc-leaderboard__tab:has(:focus-visible) {
  outline: 2px solid var(--qc-accent-2);
  outline-offset: 2px;
}

.qc-leaderboard__tab-label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- meta --- */

.qc-leaderboard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.qc-leaderboard__subtitle,
.qc-leaderboard__resets {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-text-faint);
}

.qc-leaderboard__resets {
  color: var(--qc-text-dim);
}

/* -------------------------------------------------------------- board --- */

/* Narrow viewports scroll the table, never the page sideways. */
.qc-leaderboard__scroll {
  max-width: 100%;
  overflow-x: auto;
}

.qc-leaderboard__board {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.qc-leaderboard__head {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--qc-line);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--qc-text-faint);
}

.qc-leaderboard__head--rank,
.qc-leaderboard__head--score,
.qc-leaderboard__head--kd {
  text-align: right;
}

.qc-leaderboard__row {
  --ship: var(--qc-accent);
  animation: qc-leaderboard-rise 360ms var(--qc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

.qc-leaderboard__row[data-ship="laser"] { --ship: var(--qc-ship-laser); }
.qc-leaderboard__row[data-ship="plasma"] { --ship: var(--qc-ship-plasma); }
.qc-leaderboard__row[data-ship="rocket"] { --ship: var(--qc-ship-rocket); }
.qc-leaderboard__row[data-ship="scatter"] { --ship: var(--qc-ship-scatter); }
.qc-leaderboard__row[data-ship="arc"] { --ship: var(--qc-ship-arc); }
.qc-leaderboard__row[data-ship="graviton"] { --ship: var(--qc-ship-graviton); }
.qc-leaderboard__row[data-ship="shuriken"] { --ship: var(--qc-ship-shuriken); }
.qc-leaderboard__row[data-ship="gatling"] { --ship: var(--qc-ship-gatling); }
.qc-leaderboard__row[data-ship="tesla"] { --ship: var(--qc-ship-tesla); }

.qc-leaderboard__row > * {
  padding: 11px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--qc-line) 60%, transparent);
  font-weight: 400;
  text-align: left;
  color: var(--qc-text);
}

.qc-leaderboard__row[data-you] > * {
  background: color-mix(in oklab, var(--qc-accent) 12%, transparent);
  box-shadow: inset 2px 0 0 0 var(--qc-accent);
}

/* The pinned row is a second block, not the next line of the list. */
.qc-leaderboard__board tfoot .qc-leaderboard__row > * {
  border-top: 1px solid var(--qc-line-strong);
  border-bottom: 0;
}

.qc-leaderboard__rank {
  width: 1%;
  text-align: right;
  color: var(--qc-text-dim);
  font-family: var(--qc-font-mono);
}

.qc-leaderboard__pilot {
  font-weight: 500;
}

.qc-leaderboard__callsign {
  margin-right: 8px;
}

.qc-leaderboard__you-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--qc-accent);
  border-radius: var(--qc-radius-sm);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-accent);
}

.qc-leaderboard__ship {
  white-space: nowrap;
  color: var(--qc-text-dim);
}

.qc-leaderboard__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ship);
  box-shadow: 0 0 10px color-mix(in oklab, var(--ship) 60%, transparent);
}

.qc-leaderboard__score {
  text-align: right;
  font-family: var(--qc-font-mono);
  font-weight: 600;
}

/* Context for the score, not a second ranking. */
.qc-leaderboard__kd {
  text-align: right;
  font-family: var(--qc-font-mono);
  color: var(--qc-text-faint);
}

/* ------------------------------------------------------------ notices --- */

.qc-leaderboard__empty,
.qc-leaderboard__notice {
  margin: 0;
  padding: 26px 0;
  text-align: center;
  color: var(--qc-text-dim);
}

.qc-leaderboard__notice {
  padding: 18px 0;
  font-size: 0.86rem;
  color: var(--qc-text-faint);
}

@keyframes qc-leaderboard-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .qc-leaderboard {
    padding: 20px 14px 24px;
  }

  /* The ship name stays: it is the only thing that keeps the dot from being
     meaning carried by colour alone. It just gets out of the way. */
  .qc-leaderboard__ship-name {
    font-size: 0.74rem;
  }

  .qc-leaderboard__row > * {
    padding: 9px 8px;
  }
}