/* 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);
}

/* A ui/CommandDeck station: the Daily Ops station's frame (ui/DailyOps), so
   every station reads as one screen — no card of its own, same width and
   padding, the title in the stations' 14 px display face. */
.qc-leaderboard[data-variant="station"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  padding: 20px 16px 24px;
  border: none;
  border-radius: 0;
  background: none;
}
.qc-leaderboard[data-variant="station"] .qc-leaderboard__title {
  font-family: var(--qc-font-display);
  font-size: 14px;
  letter-spacing: 0.12em;
}

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

.qc-leaderboard__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

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

.qc-leaderboard__resets {
  margin: 0;
  font: 600 12px/1.2 var(--qc-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-text-dim);
}

/* --------------------------------------------------------- filter row --- */

/* One row (board 11): when, as a segmented control, then which board as two
   dropdowns. It wraps rather than scrolls. */
.qc-leaderboard__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* The windows: one track, three equal segments. */
.qc-leaderboard__windows {
  display: flex;
  flex: 0 1 420px;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--qc-line-strong);
  border-radius: 12px;
  background: var(--qc-space-1);
}

.qc-leaderboard__tab {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px; /* a thumb target, like every other control in the UI */
  padding: 0 10px;
  border-radius: 9px;
  color: var(--qc-text-dim);
  cursor: pointer;
  transition: 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); }

.qc-leaderboard__tab[data-selected] {
  color: var(--qc-space-0);
  background: var(--qc-accent);
}

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

/* A longer language wraps to a second line inside its 44 px segment, never clipped. */
.qc-leaderboard__tab-label {
  min-width: 0;
  font: 600 13px/1.1 var(--qc-font-display);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* The build mode and the region: native selects drawn as pills with a chevron.
   A phone opens its own picker sheet for them. */
.qc-leaderboard__dropdown {
  position: relative;
  display: inline-flex;
  flex: none;
}

.qc-leaderboard__dropdown::after {
  content: "▾";
  position: absolute;
  top: 50%;
  right: 14px;
  font-size: 12px;
  color: var(--qc-text-dim);
  pointer-events: none;
  transform: translateY(-50%);
}

.qc-leaderboard__select {
  min-height: 44px;
  padding: 0 34px 0 16px;
  border: 1px solid var(--qc-line-strong);
  border-radius: 999px;
  background: var(--qc-space-1);
  color: var(--qc-text);
  font: 500 14px/1 var(--qc-font-ui);
  appearance: none;
  cursor: pointer;
}

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

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

/* ------------------------------------------------------ podium and list --- */

.qc-leaderboard__podium,
.qc-leaderboard__list {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.qc-leaderboard__entry {
  --ship: var(--qc-accent);
  position: relative; /* the containing block of its tag button's hit area */
  border: 1px solid var(--qc-line);
  border-radius: 14px;
  background: var(--qc-space-1);
  animation: qc-leaderboard-rise 360ms var(--qc-ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: border-color var(--qc-dur-fast) var(--qc-ease-out);
}

.qc-leaderboard__entry[data-ship="laser"] { --ship: var(--qc-ship-laser); }
.qc-leaderboard__entry[data-ship="tracerTank"] { --ship: var(--qc-ship-laser); }
.qc-leaderboard__entry[data-ship="plasma"] { --ship: var(--qc-ship-plasma); }
.qc-leaderboard__entry[data-ship="heTank"] { --ship: var(--qc-ship-plasma); }
.qc-leaderboard__entry[data-ship="rocket"] { --ship: var(--qc-ship-rocket); }
.qc-leaderboard__entry[data-ship="scatter"] { --ship: var(--qc-ship-scatter); }
.qc-leaderboard__entry[data-ship="canisterTank"] { --ship: var(--qc-ship-scatter); }
.qc-leaderboard__entry[data-ship="arc"] { --ship: var(--qc-ship-arc); }
.qc-leaderboard__entry[data-ship="graviton"] { --ship: var(--qc-ship-graviton); }
.qc-leaderboard__entry[data-ship="mortarTank"] { --ship: var(--qc-ship-graviton); }
.qc-leaderboard__entry[data-ship="shuriken"] { --ship: var(--qc-ship-shuriken); }
.qc-leaderboard__entry[data-ship="gatling"] { --ship: var(--qc-ship-gatling); }
.qc-leaderboard__entry[data-ship="tesla"] { --ship: var(--qc-ship-tesla); }
.qc-leaderboard__entry[data-ship="inferno"] { --ship: var(--qc-ship-inferno); }
.qc-leaderboard__entry[data-ship="flameTank"] { --ship: var(--qc-ship-inferno); }
.qc-leaderboard__entry[data-ship="warden"] { --ship: var(--qc-ship-warden); }
.qc-leaderboard__entry[data-ship="harpoon"] { --ship: var(--qc-ship-harpoon); }
.qc-leaderboard__entry[data-ship="chrono"] { --ship: var(--qc-ship-chrono); }
.qc-leaderboard__entry[data-ship="fuseTank"] { --ship: var(--qc-ship-chrono); }
.qc-leaderboard__entry[data-ship="foundry"] { --ship: var(--qc-ship-foundry); }

.qc-leaderboard__entry[data-openable]:hover { border-color: var(--qc-accent-2); }

.qc-leaderboard__entry[data-you] {
  border-color: color-mix(in oklab, var(--qc-accent) 60%, transparent);
  background: color-mix(in oklab, var(--qc-accent) 12%, var(--qc-space-1));
  box-shadow: inset 3px 0 0 0 var(--qc-accent);
}

/* One button per row: the tag's hit area is stretched over the whole entry
   (docs/profiles.md), so a tap anywhere on the row opens the profile. */
.qc-leaderboard__entry button.qc-pilot-tag { position: static; }
.qc-leaderboard__entry button.qc-pilot-tag::before { inset: 0; border-radius: inherit; }
.qc-leaderboard__entry button.qc-pilot-tag:focus-visible { outline: none; }
.qc-leaderboard__entry:has(button.qc-pilot-tag:focus-visible) {
  outline: 2px solid var(--qc-accent-2);
  outline-offset: 2px;
}

.qc-leaderboard__rank {
  font: 700 15px/1 var(--qc-font-mono);
  color: var(--qc-text-dim);
  text-align: right;
}

.qc-leaderboard__star {
  margin-right: 2px;
  color: var(--qc-rarity-legendary);
}

/* The ship strip's hull (drawShipPreview, drawn by the parent). */
.qc-leaderboard__ship-icon {
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
}

.qc-leaderboard__who {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* The name line: the tag and the device mark; a callsign too long for the row takes two lines, never an ellipsis. */
.qc-leaderboard__pilot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.qc-leaderboard__pilot .qc-pilot-tag { max-width: 100%; }

/* The title, under the name and whole: at most 16 characters, never cut. */
.qc-leaderboard__title-plate {
  --rarity: var(--qc-rarity-common);
  position: relative; /* contains the visually hidden text */
  justify-self: start;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: var(--qc-radius-sm);
  background: color-mix(in oklab, var(--rarity) 16%, transparent);
  color: color-mix(in oklab, var(--rarity) 80%, var(--qc-text));
  font: 600 12px/1.3 var(--qc-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.qc-leaderboard__title-plate[data-rarity="rare"] { --rarity: var(--qc-rarity-rare); }
.qc-leaderboard__title-plate[data-rarity="epic"] { --rarity: var(--qc-rarity-epic); }
.qc-leaderboard__title-plate[data-rarity="legendary"] { --rarity: var(--qc-rarity-legendary); }

.qc-leaderboard__figures {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.qc-leaderboard__score {
  position: relative; /* contains the visually hidden text */
  font: 600 15px/1 var(--qc-font-mono);
  color: var(--qc-text);
  white-space: nowrap;
}

/* Context for the score, not a second ranking. */
.qc-leaderboard__kd {
  position: relative; /* contains the visually hidden text */
  font: 500 12px/1 var(--qc-font-mono);
  color: var(--qc-text-faint);
  white-space: nowrap;
}

.qc-leaderboard__chevron {
  font-size: 18px;
  color: var(--qc-text-faint);
}

/* The podium: rank order in the DOM, drawn 2 · 1 · 3. */
.qc-leaderboard__podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.qc-leaderboard__podium .qc-leaderboard__entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 8px 14px;
  text-align: center;
}
.qc-leaderboard__podium .qc-leaderboard__entry:first-child {
  order: 2;
  padding-top: 20px;
  border-color: color-mix(in oklab, var(--qc-rarity-legendary) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--qc-rarity-legendary) 14%, var(--qc-space-1)), var(--qc-space-1));
}
.qc-leaderboard__podium .qc-leaderboard__entry:nth-child(2) { order: 1; }
.qc-leaderboard__podium .qc-leaderboard__entry:nth-child(3) { order: 3; }
.qc-leaderboard__podium .qc-leaderboard__ship-icon { width: 44px; height: 44px; }
.qc-leaderboard__podium .qc-leaderboard__who { justify-items: center; width: 100%; }
.qc-leaderboard__podium .qc-leaderboard__pilot { justify-content: center; max-width: 100%; flex-wrap: wrap; white-space: normal; text-align: center; line-height: 1.2; } /* the callsign whole, on two lines if it must */
.qc-leaderboard__podium .qc-leaderboard__title-plate { justify-self: center; }
.qc-leaderboard__podium .qc-leaderboard__figures { justify-items: center; }
.qc-leaderboard__podium .qc-leaderboard__score { font-size: 17px; }
.qc-leaderboard__podium .qc-leaderboard__chevron { display: none; }

/* The list: one card per pilot. */
.qc-leaderboard__list {
  display: grid;
  gap: 6px;
}

.qc-leaderboard__list .qc-leaderboard__entry {
  display: grid;
  grid-template-columns: 34px 28px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
}

/* ------------------------------------------------------- the pinned bar --- */

.qc-leaderboard__you {
  position: sticky;
  bottom: 8px;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--qc-accent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--qc-accent) 18%, var(--qc-space-1));
  box-shadow: 0 12px 30px -18px var(--qc-space-0);
}
.qc-leaderboard__you .qc-leaderboard__ship-icon { width: 24px; height: 24px; }
.qc-leaderboard__you .qc-leaderboard__rank { color: var(--qc-text); }

.qc-leaderboard__you-name {
  font-size: 15px;
  font-weight: 700;
}

.qc-leaderboard__gap {
  font: 500 12px/1.2 var(--qc-font-mono);
  color: var(--qc-accent-2);
}

/* ------------------------------------------------------------ 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; }
}

/* A phone: the segmented control spans the row, the dropdowns share the next
   line, the podium shrinks and the pilot keeps the room. */
@media (max-width: 560px) {
  .qc-leaderboard {
    gap: 14px;
    padding: 18px 12px 20px;
  }
  .qc-leaderboard[data-variant="station"] { padding: 16px 12px 20px; }
  .qc-leaderboard__windows { flex: 1 1 100%; }
  .qc-leaderboard__dropdown { flex: 1 1 0; }
  .qc-leaderboard__select { width: 100%; }
  .qc-leaderboard__podium { gap: 6px; }
  .qc-leaderboard__podium .qc-leaderboard__entry { padding: 10px 6px 12px; }
  .qc-leaderboard__podium .qc-leaderboard__entry:first-child { padding-top: 16px; }
  .qc-leaderboard__podium .qc-leaderboard__ship-icon { width: 36px; height: 36px; }
  .qc-leaderboard__podium .qc-leaderboard__pilot { font-size: 14px; }
  .qc-leaderboard__list .qc-leaderboard__entry {
    grid-template-columns: 26px 28px minmax(0, 1fr) auto 10px;
    gap: 8px;
    padding: 8px;
  }
  .qc-leaderboard__you { grid-template-columns: 26px 24px minmax(0, 1fr) auto; gap: 8px; }
}

/* A phone held upright and narrow: the list's K/D steps aside. */
@media (max-width: 400px) {
  .qc-leaderboard__list .qc-leaderboard__kd { display: none; }
}