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

.sp-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 26px 24px 32px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-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. */
.sp-leaderboard[data-variant="station"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  padding: 20px 16px 24px;
  border: none;
  border-radius: 0;
  background: none;
}
.sp-leaderboard[data-variant="station"] .sp-leaderboard__title {
  font-family: var(--sp-font-display);
  font-size: 14px;
  letter-spacing: 0.12em;
}

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

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

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

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

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

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

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

.sp-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(--sp-text-dim);
  cursor: pointer;
  transition: color var(--sp-dur-fast) var(--sp-ease-out), background-color var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-leaderboard__tab:hover { color: var(--sp-text); }

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

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

/* A longer language wraps to a second line inside its 44 px segment, never clipped. */
.sp-leaderboard__tab-label {
  min-width: 0;
  font: 600 13px/1.1 var(--sp-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. */
.sp-leaderboard__dropdown {
  position: relative;
  display: inline-flex;
  flex: none;
}

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

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

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

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

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

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

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

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

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

.sp-leaderboard__entry[data-you] {
  border-color: color-mix(in oklab, var(--sp-accent) 60%, transparent);
  background: color-mix(in oklab, var(--sp-accent) 12%, var(--sp-space-1));
  box-shadow: inset 3px 0 0 0 var(--sp-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. */
.sp-leaderboard__entry button.sp-pilot-tag { position: static; }
.sp-leaderboard__entry button.sp-pilot-tag::before { inset: 0; border-radius: inherit; }
.sp-leaderboard__entry button.sp-pilot-tag:focus-visible { outline: none; }
.sp-leaderboard__entry:has(button.sp-pilot-tag:focus-visible) {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 2px;
}

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

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

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

.sp-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. */
.sp-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;
}
.sp-leaderboard__pilot .sp-pilot-tag { max-width: 100%; }

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

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

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

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

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

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

.sp-leaderboard__podium .sp-leaderboard__entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 8px 14px;
  text-align: center;
}
.sp-leaderboard__podium .sp-leaderboard__entry:first-child {
  order: 2;
  padding-top: 20px;
  border-color: color-mix(in oklab, var(--sp-rarity-legendary) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--sp-rarity-legendary) 14%, var(--sp-space-1)), var(--sp-space-1));
}
.sp-leaderboard__podium .sp-leaderboard__entry:nth-child(2) { order: 1; }
.sp-leaderboard__podium .sp-leaderboard__entry:nth-child(3) { order: 3; }
.sp-leaderboard__podium .sp-leaderboard__ship-icon { width: 44px; height: 44px; }
.sp-leaderboard__podium .sp-leaderboard__who { justify-items: center; width: 100%; }
.sp-leaderboard__podium .sp-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 */
.sp-leaderboard__podium .sp-leaderboard__title-plate { justify-self: center; }
.sp-leaderboard__podium .sp-leaderboard__figures { justify-items: center; }
.sp-leaderboard__podium .sp-leaderboard__score { font-size: 17px; }
.sp-leaderboard__podium .sp-leaderboard__chevron { display: none; }

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

.sp-leaderboard__list .sp-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 --- */

.sp-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(--sp-accent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--sp-accent) 18%, var(--sp-space-1));
  box-shadow: 0 12px 30px -18px var(--sp-space-0);
}
.sp-leaderboard__you .sp-leaderboard__ship-icon { width: 24px; height: 24px; }
.sp-leaderboard__you .sp-leaderboard__rank { color: var(--sp-text); }

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

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

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

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

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

@keyframes sp-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) {
  .sp-leaderboard {
    gap: 14px;
    padding: 18px 12px 20px;
  }
  .sp-leaderboard[data-variant="station"] { padding: 16px 12px 20px; }
  .sp-leaderboard__windows { flex: 1 1 100%; }
  .sp-leaderboard__dropdown { flex: 1 1 0; }
  .sp-leaderboard__select { width: 100%; }
  .sp-leaderboard__podium { gap: 6px; }
  .sp-leaderboard__podium .sp-leaderboard__entry { padding: 10px 6px 12px; }
  .sp-leaderboard__podium .sp-leaderboard__entry:first-child { padding-top: 16px; }
  .sp-leaderboard__podium .sp-leaderboard__ship-icon { width: 36px; height: 36px; }
  .sp-leaderboard__podium .sp-leaderboard__pilot { font-size: 14px; }
  .sp-leaderboard__list .sp-leaderboard__entry {
    grid-template-columns: 26px 28px minmax(0, 1fr) auto 10px;
    gap: 8px;
    padding: 8px;
  }
  .sp-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) {
  .sp-leaderboard__list .sp-leaderboard__kd { display: none; }
}

/* A run board's line: the weapon at death, the level, the build size (Sproks). */
.sp-leaderboard__run { display: block; font: 400 12px/1.3 var(--sp-font-ui); color: var(--sp-text-dim); }

/* A blueprint run (docs/blueprints.md §6): its main weapon as a mark in its colour, its blueprint's
   name, and its tier chip with the stage's pips; the board's Best run / Highest tier control. */
.sp-leaderboard__blueprint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.sp-leaderboard__weapon {
  flex: none;
  width: 22px;
  height: 14px;
  background: var(--weapon, var(--sp-text-dim));
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--weapon, var(--sp-text-dim)) 60%, transparent));
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.sp-leaderboard__weapon[data-weapon="laser"] { --weapon: var(--sp-ship-laser); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h15' stroke-width='3.2'/%3E%3Cpath d='M6 9v6' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='12' r='2.4' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.sp-leaderboard__weapon[data-weapon="scatter"] { --weapon: var(--sp-ship-scatter); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h9' stroke-width='3'/%3E%3Cpath d='M11 12l9-6M11 12h10M11 12l9 6' stroke-width='1.8'/%3E%3C/svg%3E"); }
.sp-leaderboard__weapon[data-weapon="rocket"] { --weapon: var(--sp-ship-rocket); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12v8H2z' fill='black'/%3E%3Cpath d='M14 8l6 4-6 4z' fill='black'/%3E%3C/svg%3E"); }

.sp-leaderboard__bp-name { color: var(--sp-text); font-weight: 600; }

.sp-leaderboard__tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font: 700 12px/1.2 var(--sp-font-mono);
  color: var(--sp-accent-2);
  border: 1px solid color-mix(in srgb, var(--sp-accent-2) 45%, transparent);
  border-radius: 999px;
}

.sp-leaderboard__pips { display: inline-flex; gap: 2px; }

.sp-leaderboard__pip { width: 4px; height: 4px; transform: rotate(45deg); background: var(--sp-line-strong); }
.sp-leaderboard__pip[data-on="true"] { background: var(--sp-accent-2); }

.sp-leaderboard__kinds { flex: 0 1 300px; }

.sp-leaderboard__score--tier { color: var(--sp-accent-2); }