/* ui/RunBoard — the endless arena's live board. Contract: ./RunBoard.spec.md.
   Where the board sits is ui/Hud's `board` slot; this sheet is the board itself.
   Tokens only (ui/Theme C8). */

.sp-board {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 216px;
  max-width: 100%;
  margin: 0;
  padding: 5px;
  list-style: none;
  pointer-events: none; /* a readout: never a thumb's or the aim's */
  color: var(--sp-text-dim);
  /* Glass, lit from above: a wash of the accent that is gone by the middle, and a
     hairline of light along the top edge (the offer cards' own). */
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--sp-accent) 9%, transparent), transparent 62%),
    var(--sp-glass);
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--sp-text) 9%, transparent);
  backdrop-filter: blur(6px);
}

.sp-board__row {
  --bar: var(--sp-accent);
  position: relative;
  isolation: isolate; /* the bar sits behind the row's words and over nothing else */
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  border-radius: 4px;
}

/* The score bar: the row's run against the best on the board (`--share`, 0 to 1),
   so the gaps between pilots read without a number. It is scaled, never resized:
   a growing bar costs no layout. A bright line along the row's foot is the meter;
   the ground over it is its glow, gone before the tip so no edge crosses a name. */
.sp-board__row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--bar) 25%, transparent), color-mix(in oklab, var(--bar) 85%, transparent)) 0 100% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in oklab, var(--bar) 15%, transparent) 60%, transparent);
  transform: scaleX(var(--share, 0));
  transform-origin: 0 50%;
}

.sp-board__rank {
  flex: none;
  min-width: 1.4em;
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sp-text-faint);
}

/* The leader's bounty: the renderer's reticle, in its colour, and a word for a screen reader. */
.sp-board__bounty {
  flex: none;
  color: var(--sp-rarity-legendary);
  text-shadow: 0 0 6px color-mix(in oklab, var(--sp-rarity-legendary) 60%, transparent);
}

.sp-board__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sp-text);
}

/* The tier: a chip, as the menu's tier is (ui/SproksPlay) and the feed's weapon
   tag. The outline is a shadow, so the chip is no taller than the line it sits on. */
.sp-board__tier {
  flex: none;
  padding: 0 4px;
  font: 600 12px/14px var(--sp-font-mono);
  color: var(--sp-text-faint);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--sp-line);
}

.sp-board__score {
  flex: none;
  min-width: 3.2em;
  text-align: right;
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Your row: a bar, a ground and heavier type; its name is the word "You". */
.sp-board__row[data-local="true"] {
  --bar: var(--sp-accent-2);
  font-weight: 700;
  color: var(--sp-text);
  background: color-mix(in oklab, var(--sp-accent-2) 13%, transparent);
  box-shadow: inset 2px 0 0 var(--sp-accent-2);
}

.sp-board__row[data-local="true"] .sp-board__rank {
  color: var(--sp-text-dim);
}

.sp-board__row[data-local="true"] .sp-board__tier {
  color: color-mix(in oklab, var(--sp-accent-2) 70%, var(--sp-text));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sp-accent-2) 38%, transparent);
}

/* The best run going: its place and its score lit, its name heavier. */
.sp-board__row[data-lead="true"] .sp-board__rank {
  font-weight: 700;
  color: var(--sp-text);
  text-shadow: 0 0 8px var(--bar);
}

.sp-board__row[data-lead="true"] .sp-board__name {
  font-weight: 700;
}

.sp-board__row[data-lead="true"] .sp-board__score {
  font-weight: 700;
  color: var(--sp-text);
}

/* The hunted one: the bounty's gold on its name and its bar (after the local
   row's, so a pilot carrying the bounty reads as hunted first). */
.sp-board__row[data-bounty="true"] {
  --bar: var(--sp-rarity-legendary);
}

.sp-board__row[data-bounty="true"] .sp-board__name {
  color: var(--sp-rarity-legendary);
}

/* Yours and hunted: the ground turns gold with the bar (two tints over each other
   are mud); the bar down the left edge is still yours. */
.sp-board__row[data-local="true"][data-bounty="true"] {
  background: color-mix(in oklab, var(--sp-rarity-legendary) 9%, transparent);
}

/* The local pilot, further down than the rows above: the board breaks here, and
   says so with three dots in the gap. */
.sp-board__row[data-apart="true"] {
  margin-top: 6px;
}

.sp-board__row[data-apart="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 22px;
  height: 4px;
  margin-left: -11px;
  background: radial-gradient(circle, var(--sp-text-faint) 1.1px, transparent 1.6px) 0 0 / 8px 4px repeat-x;
}

/* A phone: tighter rows, the type held at 12px. */
.sp-board[data-touch="true"] {
  width: 184px;
  padding: 3px;
  gap: 0;
}

.sp-board[data-touch="true"] .sp-board__row {
  gap: 5px;
  padding: 1px 6px;
  line-height: 1.2;
}

.sp-board[data-touch="true"] .sp-board__tier {
  padding: 0 3px;
}

.sp-board[data-touch="true"] .sp-board__row[data-apart="true"] {
  margin-top: 4px;
}

.sp-board[data-touch="true"] .sp-board__row[data-apart="true"]::after {
  top: -4px;
}

/* Motion, for a pilot who has not asked for less (ui/Theme's policy): a bar grows
   to its new length, and a row that changed place slides in from where it was
   (`--shift` rows below, or above). Transforms only: nothing here lays out or
   repaints the arena. The two keyframes are the same slide under two names: a
   row's next move swaps the name, which is what starts it again. */
@media (prefers-reduced-motion: no-preference) {
  .sp-board__row::before {
    transition: transform 400ms var(--sp-ease-out);
  }

  .sp-board__row[data-move$="-a"] {
    animation: sp-board-move-a 420ms var(--sp-ease-out);
  }

  .sp-board__row[data-move$="-b"] {
    animation: sp-board-move-b 420ms var(--sp-ease-out);
  }

  /* The climber passes over the row it overtakes. */
  .sp-board__row[data-move^="up"] {
    z-index: 1;
  }

  @keyframes sp-board-move-a {
    from { transform: translateY(calc(var(--shift, 0) * 100%)); }
  }

  @keyframes sp-board-move-b {
    from { transform: translateY(calc(var(--shift, 0) * 100%)); }
  }
}