/* ══ LEADERBOARD ══════════════════════════════════════════════════════
   This surface has two audiences: the guest holding their phone, and the
   whole room, because the board is put on a shared screen. So the rank,
   the handle and the number have to survive being read from across a
   venue, while everything else stays quiet.

   Redesigned 24 Aug 2026. Two things were wrong:

   1. It was a third un-tokenised palette. Steel-blue rows, a navy scrim,
      cream text at #f5e7c6, the pre-rebrand gold #e8b93e and the
      pre-rebrand accent #72d4cc — none of them the app's tokens, so this
      screen agreed with neither the shell nor the games.
   2. The title was set in Arial Narrow, and at 38px it filled the crest's
      inner frame edge to edge on a 390px phone. Anything narrower clipped
      it. A condensed system face was standing in for a display voice it
      does not have.
   ══════════════════════════════════════════════════════════════════════ */

.leaderboard-view { position: relative; }

.leaderboard-head {
  position: relative;
  min-height: 132px;
  margin: -4px 0 14px;
  padding: 26px 22px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 18px;
  background: var(--panel2) url("/img/leaderboard-crest.svg") center/cover no-repeat;
}

/* The crest is a full-width banner with its star and wave motifs sitting at
   exactly the height the title occupies, so the two collided. A scrim over the
   lower half gives the type clean ground while the crest still reads above it. */
.leaderboard-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7, 27, 31, 0) 30%,
    rgba(7, 27, 31, .74) 60%,
    rgba(7, 27, 31, .95) 100%);
  pointer-events: none;
}

.leaderboard-head h1,
.leaderboard-head .lb-where { position: relative; z-index: 1; }

.leaderboard-head h1 {
  color: var(--text);
  /* System stack, sized to fit. The condensed face is gone; the weight and
     the scale do the work, and clamp means it cannot clip on a narrow phone. */
  font-family: inherit;
  font-size: clamp(27px, 8.2vw, 34px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.015em;
  text-transform: uppercase;
  /* Offset and blur, not a hard 0-blur block: this exists to keep the type
     legible over the busiest part of the crest, not as a costume. */
  text-shadow: 0 2px 7px rgba(7, 27, 31, .9);
}

/* Which board this is, and which window. Real orientation on a screen that
   several events can produce — but it sits under the title as a subtitle
   rather than above it as a kicker. */
.leaderboard-head .lb-where {
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.leaderboard-card {
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--stub);
}

.leaderboard-table { display: grid; gap: 5px; }

.leaderboard-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  font-family: inherit;
}

.leaderboard-row:nth-child(even) { background: var(--panel2); }
.leaderboard-rank {
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.leaderboard-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -.01em;
}
.leaderboard-score {
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.leaderboard-row.is-top-three {
  min-height: 52px;
  border-color: rgba(230, 179, 51, .5);
  background: linear-gradient(90deg, rgba(230, 179, 51, .15), var(--panel2));
}

.leaderboard-row.is-top-three .leaderboard-rank {
  width: 34px;
  height: 34px;
  color: transparent;
  background: var(--rank-badge) center/contain no-repeat;
}

.leaderboard-row.is-rank-1 { --rank-badge: url("/img/rank-badge-1.svg"); }
.leaderboard-row.is-rank-2 { --rank-badge: url("/img/rank-badge-2.svg"); }
.leaderboard-row.is-rank-3 { --rank-badge: url("/img/rank-badge-3.svg"); }

.leaderboard-row.is-mine {
  border-color: var(--gold);
  background: rgba(230, 179, 51, .17);
}

/* The "you" marker. This was a bare " ← you" appended to the handle, while
   this pill sat in the stylesheet unused — an arrow made of text next to a
   handle that is already a code reads as noise. */
.leaderboard-you {
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #2a1c02;
  background: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  vertical-align: 2px;
}

.leaderboard-winners {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gold);
  background: linear-gradient(145deg, rgba(47, 215, 200, .16), var(--stub));
}

.leaderboard-winners::after {
  content: "";
  position: absolute;
  width: 128px;
  height: 128px;
  right: -24px;
  bottom: -28px;
  opacity: .16;
  background: url("/img/winner-trophy.svg") center/contain no-repeat;
  pointer-events: none;
}

.leaderboard-winners h2 {
  color: var(--gold);
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: none;
}

.leaderboard-winner-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(230, 179, 51, .24);
  color: var(--text);
}

.leaderboard-empty {
  padding: 36px 20px;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .leaderboard-row.is-rank-1 { animation: leaderboard-first 700ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes leaderboard-first {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: none; }
  }
}