.leaderboard-scene {
  position: absolute;
  left: 54px;
  top: 280px;
  width: 972px;
  height: 778px;
}

.leaderboard-headline {
  position: absolute;
  left: 0;
  top: 0;
  width: 972px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px 0 32px;
  border: 2px solid rgba(39, 230, 255, .42);
  border-radius: 24px;
  background: linear-gradient(100deg, rgba(12, 39, 78, .96), rgba(10, 17, 43, .98));
  box-shadow: var(--shadow-cyan), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 380ms ease, transform 520ms var(--ease-enter);
  overflow: hidden;
}

.leaderboard-headline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 16%, rgba(255,255,255,.08) 42%, transparent 68%);
  transform: translateX(-120%);
}

.leaderboard-scene.show-headline .leaderboard-headline {
  opacity: 1;
  transform: translateY(0);
}

.leaderboard-scene.show-first .leaderboard-headline::before {
  animation: leaderboard-headline-sweep 900ms var(--ease-enter) forwards;
}

@keyframes leaderboard-headline-sweep {
  to { transform: translateX(120%); }
}

.leaderboard-heading-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.leaderboard-heading-copy strong {
  color: var(--color-cyan);
  font-size: 42px;
  font-weight: 950;
  letter-spacing: .055em;
}

.leaderboard-heading-copy span {
  color: var(--color-white);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: .075em;
}

.leaderboard-phase-chip {
  position: relative;
  z-index: 1;
  min-width: 178px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 212, 91, .42);
  border-radius: 999px;
  color: var(--color-gold);
  background: rgba(255, 212, 91, .08);
  font-size: 19px;
  font-weight: 950;
  letter-spacing: .065em;
  white-space: nowrap;
}

.leaderboard-panel {
  position: absolute;
  left: 0;
  top: 96px;
  width: 972px;
  height: 682px;
}

.leaderboard-row {
  position: absolute;
  left: 0;
  width: 972px;
  height: 120px;
  display: grid;
  grid-template-columns: 92px 88px 96px minmax(0, 1fr) 220px;
  align-items: center;
  padding: 0 26px 0 14px;
  border: 2px solid rgba(112, 190, 255, .25);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(29, 79, 132, .13), transparent 42%),
    linear-gradient(160deg, rgba(12, 25, 55, .98), rgba(5, 10, 25, .99));
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
  opacity: 0;
  transform: translateX(34px) scale(.985);
  transition:
    opacity 380ms ease var(--entry-delay),
    transform 560ms var(--ease-enter) var(--entry-delay),
    border-color 300ms ease,
    box-shadow 300ms ease;
  overflow: hidden;
}

.leaderboard-row:nth-child(1) { top: 0; }
.leaderboard-row:nth-child(2) { top: 152px; }
.leaderboard-row:nth-child(3) { top: 282px; }
.leaderboard-row:nth-child(4) { top: 412px; }
.leaderboard-row:nth-child(5) { top: 542px; }

.leaderboard-row.is-first {
  height: 142px;
  grid-template-columns: 98px 92px 104px minmax(0, 1fr) 236px;
  padding-right: 30px;
  border-color: rgba(255, 212, 91, .64);
  background:
    radial-gradient(circle at 76% 15%, rgba(255, 212, 91, .13), transparent 35%),
    linear-gradient(90deg, rgba(255, 212, 91, .13), transparent 44%),
    linear-gradient(155deg, rgba(38, 31, 22, .98), rgba(8, 14, 31, .99));
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-18px) scale(.97);
}

.leaderboard-row.is-first::before {
  content: "";
  position: absolute;
  left: 48px;
  right: 48px;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.leaderboard-row.is-tied {
  border-style: double;
}

.leaderboard-row.is-placeholder {
  opacity: 0;
  border-style: dashed;
  filter: saturate(.35);
}

.leaderboard-scene.show-rows .leaderboard-row:not(.is-first),
.leaderboard-scene.show-first .leaderboard-row,
.leaderboard-scene.is-settled .leaderboard-row,
.leaderboard-scene.is-updating .leaderboard-row {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.leaderboard-scene.show-rows .leaderboard-row.is-first {
  opacity: .16;
}

.leaderboard-scene.show-first .leaderboard-row.is-first,
.leaderboard-scene.is-settled .leaderboard-row.is-first,
.leaderboard-scene.is-updating .leaderboard-row.is-first {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.leaderboard-scene.is-updating .leaderboard-row {
  animation: leaderboard-update-pulse 700ms ease both;
}

@keyframes leaderboard-update-pulse {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.16); }
}

.leaderboard-scene.is-exiting .leaderboard-row,
.leaderboard-scene.is-exiting .leaderboard-headline {
  opacity: 0;
  transform: translateX(-34px);
  transition-delay: 0ms;
}

.leaderboard-rank {
  color: var(--color-white);
  font-size: 54px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  letter-spacing: -.05em;
}

.is-first .leaderboard-rank {
  color: var(--color-gold);
  font-size: 64px;
}

.leaderboard-movement {
  width: 64px;
  height: 52px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(142, 202, 255, .22);
  border-radius: 17px;
  background: rgba(8, 18, 42, .72);
  color: var(--color-muted);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.movement-up {
  color: var(--color-green);
  border-color: rgba(56, 236, 146, .34);
  background: rgba(56, 236, 146, .07);
}

.movement-down {
  color: var(--color-red);
  border-color: rgba(255, 79, 92, .34);
  background: rgba(255, 79, 92, .07);
}

.movement-new,
.movement-back {
  width: 74px;
  color: var(--color-gold);
  border-color: rgba(255, 212, 91, .36);
  background: rgba(255, 212, 91, .07);
  font-size: 16px;
  letter-spacing: .035em;
}

.leaderboard-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(39, 230, 255, .42);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(39,230,255,.17), rgba(61,78,255,.13));
  color: var(--color-white);
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.04em;
  overflow: hidden;
}

.is-first .leaderboard-avatar {
  width: 82px;
  height: 82px;
  border-color: rgba(255, 212, 91, .68);
  background: linear-gradient(145deg, rgba(255,212,91,.20), rgba(77,67,31,.18));
  box-shadow: 0 0 20px rgba(255,212,91,.12);
}

.leaderboard-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderboard-avatar span {
  position: relative;
  z-index: 0;
}

.leaderboard-identity {
  min-width: 0;
  padding: 0 18px 0 8px;
}

.leaderboard-name {
  width: 100%;
  height: 62px;
  display: flex;
  align-items: center;
  color: var(--color-white);
  font-size: 38px;
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.025em;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
  unicode-bidi: isolate;
}

.is-first .leaderboard-name {
  height: 70px;
  color: #fff8d4;
  font-size: 44px;
}

.leaderboard-status {
  margin-top: 4px;
  color: var(--color-cyan);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .085em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.is-first .leaderboard-status {
  color: var(--color-gold);
  font-size: 19px;
}

.leaderboard-score-block {
  min-width: 0;
  text-align: right;
}

.leaderboard-score {
  color: var(--color-white);
  font-size: 42px;
  font-weight: 950;
  line-height: .92;
  letter-spacing: -.045em;
}

.is-first .leaderboard-score {
  color: var(--color-gold);
  font-size: 50px;
  text-shadow: 0 0 20px rgba(255,212,91,.18);
}

.leaderboard-score-label {
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .11em;
}

.leaderboard-crown {
  position: absolute;
  right: 28px;
  top: 10px;
  color: var(--color-gold);
  font-size: 28px;
  line-height: 1;
  opacity: .76;
  transform: rotate(8deg);
}

.leaderboard-row.is-new-leader {
  animation: leaderboard-new-leader 1200ms var(--ease-impact) both;
}

@keyframes leaderboard-new-leader {
  0% { box-shadow: 0 0 0 rgba(255,212,91,0); }
  35% { box-shadow: 0 0 46px rgba(255,212,91,.32), inset 0 1px 0 rgba(255,255,255,.08); }
  100% { box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.06); }
}

.leaderboard-scene.has-new-leader .leaderboard-phase-chip {
  color: #171006;
  border-color: var(--color-gold);
  background: var(--color-gold);
  box-shadow: 0 0 20px rgba(255,212,91,.22);
}

.leaderboard-row.is-placeholder .leaderboard-name,
.leaderboard-row.is-placeholder .leaderboard-status,
.leaderboard-row.is-placeholder .leaderboard-score,
.leaderboard-row.is-placeholder .leaderboard-score-label {
  color: rgba(157,169,200,.58);
}

.reduced-motion .leaderboard-row,
.reduced-motion .leaderboard-headline {
  transition: none !important;
  animation: none !important;
}

.no-flash .leaderboard-row.is-new-leader,
.no-flash .leaderboard-scene.is-updating .leaderboard-row {
  animation: none !important;
}