/* The board on the splash screen. Rows come from docs/chronicle.js by way of
   src/ui/board.js, so this file only cares how one row is laid out — the panel
   around them is part of the rack, and overlay.css draws that. */

.board .ranks {
  list-style: none;
  display: grid;
  gap: 0.22rem;
}
.rank {
  display: grid;
  grid-template-columns: 1.35rem 1fr auto 2rem;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.28rem 0.5rem;
  border-left: 2px solid rgba(160, 75, 255, 0.3);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.rank .rn {
  color: var(--violet);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rank .rwho {
  color: var(--ink);
  letter-spacing: 0.12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank .rsc {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.rank .rwv { color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; }

/* Only the top row is lit. Second and third are the two colours below it on
   the rack, which is enough to read as a podium without three medals and a
   fanfare — everybody below third is a row, which is the honest arrangement. */
.rank.r1 {
  border-left-color: var(--lime);
  background: linear-gradient(90deg, rgba(182, 255, 61, 0.14), rgba(182, 255, 61, 0));
}
.rank.r1 .rn { color: var(--lime); text-shadow: 0 0 8px currentColor; }
.rank.r1 .rsc { text-shadow: 0 0 9px currentColor; }
.rank.r2 { border-left-color: rgba(33, 243, 255, 0.55); }
.rank.r2 .rn { color: var(--cyan); }
.rank.r3 { border-left-color: rgba(255, 176, 32, 0.5); }
.rank.r3 .rn { color: var(--amber); }

/* Your own name on the board, while you are sitting in that seat. The pilot
   picker knows who is flying and this follows it, so changing seats changes
   which row is glowing at you — which is the whole reason the panel is next to
   the picker rather than anywhere else on the screen. */
.rank.you {
  border-left-color: var(--magenta);
  box-shadow: inset 0 0 16px rgba(255, 62, 200, 0.12);
}
.rank.you .rwho { color: var(--magenta); text-shadow: 0 0 9px currentColor; }

.boardnone {
  font-size: 0.64rem;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--dim);
  text-wrap: pretty;
}
.boardnote {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(182, 255, 61, 0.2);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}
.boardnote .ic { color: var(--lime); width: 0.8rem; height: 0.8rem; }
.boardnote a {
  color: var(--lime);
  text-decoration: none;
  text-shadow: 0 0 9px currentColor;
  transition: color 0.15s;
}
.boardnote a:hover { color: var(--magenta); }
.boardnote span {
  flex: 1 1 100%;
  color: var(--dim);
  letter-spacing: 0.08em;
  text-transform: none;
}

@media (max-height: 820px) {
  .boardnote span { display: none; }
}