/* ==========================================================================
   STATE WARS — css/leaderboard.css
   The Hall of Commanders.

   A ranked list has one job: let somebody find their own line without reading.
   So the rank column is fixed width and monospaced (numbers that line up read
   as a ranking; numbers that shift read as a list), the top three carry a
   colour, and the player's own row is outlined rather than merely tinted so it
   is findable at a glance in a column of twenty.
   ========================================================================== */

.lb__sub {
  max-width: 46rem;
  margin: .2rem 0 .9rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--c-dim);
}

.lb__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .6rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.lb__meta b { color: var(--c-gold); }

.lb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .22rem;
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.lb--you {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed rgba(127, 216, 255, .25);
  max-height: none;
  overflow: visible;
}

.lbrow {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(127, 216, 255, .12);
  border-radius: 5px;
  background: rgba(10, 18, 28, .55);
}

.lbrow__rank {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  text-align: right;
  color: var(--c-muted);
}

.lbrow__name {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lbrow__time {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--c-ice);
}

.lbrow__badge {
  flex: 0 0 auto;
  padding: .05rem .3rem;
  border-radius: 3px;
  background: var(--c-gold);
  color: #10151c;
  font-family: var(--font-mono);
  font-size: .48rem;
  letter-spacing: .14em;
}

/* The top three, by colour rather than by medal glyphs — an emoji renders at a
   different size on every machine and half of them are the wrong one. */
.lbrow--top1 { border-color: rgba(255, 194, 92, .65); background: rgba(60, 44, 10, .5); }
.lbrow--top1 .lbrow__rank,
.lbrow--top1 .lbrow__name { color: var(--c-gold); }

.lbrow--top2 { border-color: rgba(200, 214, 232, .5); background: rgba(30, 38, 50, .55); }
.lbrow--top2 .lbrow__rank { color: #d3dcea; }

.lbrow--top3 { border-color: rgba(206, 140, 84, .5); background: rgba(44, 30, 20, .5); }
.lbrow--top3 .lbrow__rank { color: #d8a071; }

.lbrow.is-you {
  border-color: rgba(127, 216, 255, .75);
  box-shadow: 0 0 0 1px rgba(127, 216, 255, .25);
}

.lb__note {
  margin-top: .7rem;
  font-size: .78rem;
  color: var(--c-muted);
}

@media (max-width: 620px) {
  .lbrow { grid-template-columns: 2rem minmax(0, 1fr) auto; padding: .4rem .5rem; }
  .lb { max-height: 52vh; }
}