/* Testy Rewards leaderboard */

.leaderboard-page {
  background:
    radial-gradient(circle at 50% 8%, rgba(179, 65, 225, .18), transparent 34rem),
    radial-gradient(circle at 10% 70%, rgba(108, 35, 137, .1), transparent 35rem),
    var(--ink);
}

.leaderboard-shell {
  width: min(100%, 91rem);
  margin: 0 auto;
  padding: clamp(7rem, 11vw, 11rem) max(3vw, 1.25rem);
}

.leaderboard-hero {
  position: relative;
  min-height: 100svh;
  padding: 9rem max(4vw, 1.25rem) 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.leaderboard-hero__grid {
  position: absolute;
  z-index: -3;
  inset: -25%;
  opacity: .28;
  background-image:
    linear-gradient(rgba(216, 93, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 93, 255, .12) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(circle at 50% 44%, black 0, transparent 64%);
  transform: perspective(800px) rotateX(63deg) translateY(24%);
  animation: leaderboard-grid 12s linear infinite;
}

.leaderboard-hero__flare {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 42%;
  width: min(85vw, 68rem);
  height: min(85vw, 68rem);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(213, 90, 255, .22), rgba(116, 35, 150, .09) 36%, transparent 68%);
  filter: blur(12px);
  transform: translate(-50%, -50%);
  animation: prize-flare 4.5s ease-in-out infinite alternate;
}

.leaderboard-hero::before,
.leaderboard-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(64vw, 53rem);
  aspect-ratio: 1;
  border: 1px solid rgba(215, 98, 255, .1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: slow-spin 35s linear infinite;
}

.leaderboard-hero::after {
  width: min(48vw, 39rem);
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 25s;
}

.stake-emblem {
  position: relative;
  z-index: 3;
  width: min(22rem, 66vw);
  height: 8rem;
  display: grid;
  place-items: center;
}

.stake-emblem__plate {
  position: relative;
  z-index: 3;
  width: 18rem;
  height: 7.5rem;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  animation: stake-plate 4s var(--ease) infinite alternate;
}

.stake-emblem__plate img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.13));
}

.stake-emblem__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(220, 103, 255, .2);
  border-radius: 50%;
}

.stake-emblem__orbit i {
  position: absolute;
  left: -.25rem;
  top: 50%;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--violet-hot);
  box-shadow: 0 0 18px var(--violet-hot);
}

.orbit-a {
  width: 21rem;
  height: 6.8rem;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: emblem-orbit-a 7s linear infinite;
}

.orbit-b {
  width: 12rem;
  height: 9.7rem;
  transform: translate(-50%, -50%) rotate(20deg);
  animation: emblem-orbit-b 9s linear infinite reverse;
}

.orbit-b i {
  left: auto;
  right: -.25rem;
  background: #fff;
  box-shadow: 0 0 18px #fff;
}

.leaderboard-title {
  position: relative;
  z-index: 4;
  margin: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--display);
  line-height: .85;
}

.leaderboard-title__amount {
  position: relative;
  color: transparent;
  background: linear-gradient(115deg, #fff 7%, var(--lavender) 30%, var(--violet-hot) 55%, #fff 76%, var(--violet-hot) 95%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(5.5rem, 14.5vw, 13.5rem);
  font-weight: 800;
  letter-spacing: -.095em;
  filter: drop-shadow(0 0 34px rgba(201, 77, 249, .22));
  animation: prize-text 5s linear infinite;
}

.leaderboard-title__amount sup {
  display: inline-block;
  margin-right: .04em;
  font-size: .28em;
  vertical-align: top;
  transform: translateY(.48em);
}

.leaderboard-title__label {
  margin-top: .3rem;
  color: #fff;
  font-size: clamp(1.25rem, 3.45vw, 3.45rem);
  font-weight: 700;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.leaderboard-hero__copy {
  position: relative;
  z-index: 4;
  max-width: 45rem;
  margin: 2rem 0 0;
  color: #aaa2b3;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  line-height: 1.7;
}

.play-actions {
  position: relative;
  z-index: 5;
  width: min(100%, 46rem);
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}

.play-button {
  position: relative;
  min-height: 5.2rem;
  padding: .75rem .85rem;
  display: grid;
  grid-template-columns: 6.7rem 1fr auto;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1rem;
  background: rgba(18, 12, 24, .76);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.05);
  text-align: left;
  backdrop-filter: blur(14px);
  transition: border-color .35s ease, box-shadow .35s ease;
}

.play-button::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(100deg, rgba(193, 72, 242, .18), transparent 65%);
  transition: opacity .35s ease;
}

.play-button--us::before { background: linear-gradient(100deg, rgba(130, 88, 239, .18), transparent 65%); }
.play-button:hover { border-color: rgba(219, 104, 255, .42); box-shadow: 0 1.4rem 4rem rgba(83, 25, 104, .3); }
.play-button:hover::before { opacity: 1; }

.play-button__logo {
  position: relative;
  width: 6.7rem;
  height: 3.65rem;
  padding: .5rem .65rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .75rem;
  background: rgba(255,255,255,.045);
}

.play-button__logo img { width: 100%; height: 100%; object-fit: contain; }

.play-button__text {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-size: .83rem;
  font-weight: 700;
  text-transform: uppercase;
}

.play-button__text small {
  margin-bottom: .25rem;
  color: #746d7c;
  font-family: var(--body);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
}

.play-button > i {
  position: relative;
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #130b18;
  background: var(--violet-hot);
  font-size: .75rem;
  transition: transform .4s var(--ease);
}

.play-button:hover > i { transform: rotate(45deg) scale(1.08); }

.leaderboard-scroll {
  position: absolute;
  z-index: 4;
  bottom: 2.1rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #716978;
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.leaderboard-scroll i {
  color: var(--violet-hot);
  animation: scroll-arrow 1.5s ease-in-out infinite;
}

.leaderboard-hero__coins .coin {
  position: absolute;
  z-index: 1;
  color: rgba(221, 103, 255, .28);
  filter: drop-shadow(0 0 14px rgba(196, 74, 242, .3));
  animation: float-coin 5s ease-in-out infinite alternate;
}

.coin--one { left: 10%; top: 28%; font-size: 2.2rem; rotate: -18deg; }
.coin--two { right: 11%; top: 32%; font-size: 1.55rem; animation-delay: -1.8s !important; }
.coin--three { left: 16%; bottom: 18%; font-size: 1.3rem; animation-delay: -3s !important; }
.coin--four { right: 17%; bottom: 20%; font-size: 1.1rem; animation-delay: -4s !important; }

.leaderboard-ticker {
  overflow: hidden;
  padding: .9rem 0;
  color: #100915;
  background: var(--violet-hot);
  border-block: 1px solid rgba(255,255,255,.35);
  transform: rotate(.8deg) scale(1.02);
}

.leaderboard-ticker__track {
  width: max-content;
  display: flex;
  animation: board-ticker 29s linear infinite;
  will-change: transform;
}

.leaderboard-ticker__group {
  flex: 0 0 auto;
  padding-right: 2.4rem;
  display: flex;
  align-items: center;
  gap: 2.4rem;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.leaderboard-ticker__group i { font-size: .82rem; }

.leaderboard-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 4rem;
}

.leaderboard-heading > div { position: relative; }

.leaderboard-heading__icon {
  position: absolute;
  right: 8%;
  top: -1rem;
  width: clamp(4rem, 7vw, 7rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 98, 255, .25);
  border-radius: 50%;
  color: var(--violet-hot);
  background: rgba(189, 77, 242, .07);
  font-size: clamp(1.2rem, 2.4vw, 2.2rem);
  box-shadow: 0 0 45px rgba(189,77,242,.11), inset 0 0 25px rgba(189,77,242,.08);
  animation: heading-icon 4s ease-in-out infinite;
}

.leaderboard-heading .split-heading { font-size: clamp(2.7rem, 6vw, 6.3rem); }

.leaderboard-heading > p {
  max-width: 31rem;
  margin: 0 0 .5rem;
  color: #938b9c;
  font-size: .96rem;
  line-height: 1.75;
}

.podium {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: end;
  gap: 1.1rem;
  perspective: 1400px;
}

.podium-card {
  --rank-color: #a39eaa;
  --rank-rgb: 163, 158, 170;
  position: relative;
  min-height: 23rem;
  padding: 2rem 1.7rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--rank-rgb), .25);
  border-radius: 1.4rem 1.4rem .4rem .4rem;
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--rank-rgb), .13), transparent 35%),
    linear-gradient(155deg, rgba(255,255,255,.05), transparent 35%),
    #110c18;
  box-shadow: 0 2rem 6rem rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
  transform: rotateX(var(--podium-y, 0deg)) rotateY(var(--podium-x, 0deg));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, border-color .35s ease, box-shadow .35s ease;
}

.podium-card--first {
  --rank-color: #db69ff;
  --rank-rgb: 219, 105, 255;
  min-height: 27rem;
  border-color: rgba(219, 105, 255, .4);
  box-shadow: 0 2.5rem 8rem rgba(98, 26, 124, .37), 0 0 60px rgba(189,77,242,.09), inset 0 1px rgba(255,255,255,.09);
}

.podium-card--third {
  --rank-color: #ae70e8;
  --rank-rgb: 174, 112, 232;
  min-height: 21rem;
}

.podium-card:hover {
  border-color: rgba(var(--rank-rgb), .58);
  box-shadow: 0 2.7rem 8rem rgba(var(--rank-rgb), .18), inset 0 1px rgba(255,255,255,.1);
}

.podium-card__beam {
  position: absolute;
  left: 50%;
  top: -8rem;
  width: 12rem;
  height: 28rem;
  opacity: .18;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--rank-color), transparent 80%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  animation: podium-beam 3.5s ease-in-out infinite alternate;
}

.podium-card__medal {
  position: relative;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--rank-rgb), .32);
  border-radius: 50%;
  color: var(--rank-color);
  background: rgba(var(--rank-rgb), .08);
  box-shadow: 0 0 30px rgba(var(--rank-rgb), .18), inset 0 0 18px rgba(var(--rank-rgb), .08);
  font-size: 1.25rem;
  animation: medal-float 3s ease-in-out infinite;
}

.podium-card--first .podium-card__medal {
  width: 4.6rem;
  height: 4.6rem;
  font-size: 1.65rem;
}

.podium-card__place {
  position: absolute;
  right: 1.35rem;
  top: 1.2rem;
  color: rgba(var(--rank-rgb), .32);
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.08em;
}

.podium-card__place sup { font-size: .32em; letter-spacing: 0; }

.podium-card h3 {
  position: relative;
  margin: 2.4rem 0 .35rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  letter-spacing: -.04em;
}

.leaderboard-market-flag {
  width: 1.35em;
  height: auto;
  flex: 0 0 auto;
  border-radius: .14em;
  vertical-align: -.08em;
  box-shadow: 0 .2rem .7rem rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .14);
}

.has-market-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  white-space: nowrap;
}

.podium-stats {
  position: relative;
  width: 100%;
  margin: auto 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.08);
}

.podium-stats div { padding: 1.35rem .3rem; text-align: center; }
.podium-stats div + div { border-left: 1px solid rgba(255,255,255,.08); }
.podium-stats dt { margin-bottom: .35rem; color: #6f6876; font-size: .56rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.podium-stats dd { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(.88rem, 1.5vw, 1.15rem); font-weight: 700; }
.podium-stats div:last-child dd { color: var(--rank-color); }

.countdown-section { padding-top: 4rem; }

.countdown-card {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.7rem);
  overflow: hidden;
  border: 1px solid rgba(218, 101, 255, .24);
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 50% 100%, rgba(181, 58, 229, .14), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 35%),
    #0f0a15;
  box-shadow: 0 2.5rem 8rem rgba(59, 16, 75, .28), inset 0 1px rgba(255,255,255,.07);
}

.countdown-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(220,103,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,103,255,.16) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(to bottom, transparent, black);
  animation: timer-grid 12s linear infinite;
}

.countdown-card__glow {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 40rem;
  height: 22rem;
  border-radius: 50%;
  opacity: .16;
  background: var(--violet);
  filter: blur(90px);
  transform: translate(-50%, -50%);
  animation: timer-glow 4s ease-in-out infinite alternate;
}

.countdown-card__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.countdown-card__header > div { display: flex; align-items: center; gap: 1rem; }

.countdown-icon {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(219,103,255,.25);
  border-radius: .85rem;
  color: var(--violet-hot);
  background: rgba(189,77,242,.08);
  font-size: 1rem;
}

.countdown-card__header h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  letter-spacing: -.03em;
}

.countdown-display {
  position: relative;
  margin: 3rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}

.countdown-unit {
  position: relative;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) .5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), transparent 50%),
    rgba(255,255,255,.025);
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.countdown-unit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.05);
}

.countdown-unit strong {
  position: relative;
  display: block;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(2.7rem, 7vw, 7rem);
  font-weight: 700;
  letter-spacing: -.09em;
  line-height: .9;
  text-shadow: 0 0 30px rgba(214,93,255,.17);
  transition: transform .3s var(--ease), color .3s ease;
}

.countdown-unit strong.is-ticking {
  color: var(--violet-hot);
  transform: translateY(-.12em) scale(1.035);
}

.countdown-unit span {
  position: relative;
  display: block;
  margin-top: .8rem;
  color: #756e7b;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.countdown-progress { position: relative; }
.countdown-progress__meta { display: flex; justify-content: space-between; color: #77707e; font-size: .61rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.countdown-progress__meta strong { color: var(--violet-hot); }
.countdown-progress__track { height: .3rem; margin-top: .7rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.countdown-progress__track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--violet-hot), #fff); box-shadow: 0 0 14px var(--violet); transition: width 1s linear; }
.countdown-progress p { margin: .9rem 0 0; color: #716a77; font-size: .68rem; }
.countdown-progress b { color: #a8a1ad; font-weight: 600; }

.standings-section { padding-top: 4rem; }
.leaderboard-heading--standings .leaderboard-heading__icon { color: #fff; }

.standings-card {
  position: relative;
  margin-top: 5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.4rem;
  background: rgba(15, 10, 21, .75);
  box-shadow: 0 2rem 7rem rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
}

.standings-head,
.standing-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(13rem, 1.5fr) minmax(8rem, 1fr) minmax(6rem, .65fr);
  align-items: center;
  gap: 1rem;
}

.standings-head {
  min-height: 3.5rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #625b68;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.standings-list { margin: 0; padding: 0; list-style: none; }

.standing-row {
  --row-x: 50%;
  position: relative;
  min-height: 6.1rem;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity .75s var(--ease), transform .75s var(--ease), background .35s ease, padding .4s var(--ease);
  transition-delay: var(--row-delay, 0ms);
}

.standings-card.is-visible .standing-row { opacity: 1; transform: none; }

.standing-row::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--row-x) 50%, rgba(205,87,248,.12), transparent 24%);
  transition: opacity .3s ease;
}

.standing-row:hover { padding-inline: 1.9rem 1.1rem; background: rgba(189,77,242,.035); }
.standing-row:hover::before { opacity: 1; }

.standing-rank {
  color: #696171;
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 700;
}

.standing-player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.standing-avatar {
  flex: 0 0 auto;
  width: 3.45rem;
  height: 3.45rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,96,255,.18);
  border-radius: .85rem;
  color: var(--lavender);
  background: linear-gradient(135deg, rgba(189,77,242,.16), rgba(255,255,255,.025));
  font-family: var(--display);
  font-size: .71rem;
  font-weight: 700;
  transition: transform .4s var(--ease), border-color .3s ease;
}

.standing-row:hover .standing-avatar { border-color: rgba(215,96,255,.46); transform: rotate(-5deg) scale(1.06); }

.standing-player div { display: flex; flex-direction: column; gap: .25rem; }
.standing-player strong { font-family: var(--display); font-size: .8rem; letter-spacing: -.02em; }
.standing-player small { color: #68616e; font-size: .61rem; }

.standing-wager,
.standing-prize {
  position: relative;
  color: #b2aab8;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 600;
}

.standing-prize { color: var(--violet-hot); }

.standing-row:last-child { border-bottom: 0; }

@keyframes leaderboard-grid { to { background-position: 5rem 5rem; } }
@keyframes prize-flare { to { scale: 1.1; opacity: .72; } }
@keyframes slow-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes stake-plate { to { transform: translateY(-.45rem) scale(1.025); filter: drop-shadow(0 0 28px rgba(215, 98, 255, .2)); } }
@keyframes emblem-orbit-a { to { transform: translate(-50%, -50%) rotate(352deg); } }
@keyframes emblem-orbit-b { to { transform: translate(-50%, -50%) rotate(380deg); } }
@keyframes prize-text { to { background-position: -220% 0; } }
@keyframes scroll-arrow { 50% { transform: translateY(.4rem); } }
@keyframes float-coin { to { translate: 1rem -1.4rem; rotate: 15deg; opacity: .8; } }
@keyframes board-ticker { to { transform: translate3d(-50%, 0, 0); } }
@keyframes heading-icon { 50% { translate: 0 -.5rem; rotate: 8deg; box-shadow: 0 0 65px rgba(189,77,242,.2), inset 0 0 25px rgba(189,77,242,.12); } }
@keyframes podium-beam { to { opacity: .32; transform: translateX(-50%) scaleX(1.2); } }
@keyframes medal-float { 50% { transform: translateY(-.5rem) rotate(6deg); } }
@keyframes rank-blink { 50% { opacity: .25; } }
@keyframes timer-grid { to { background-position: 4rem 4rem; } }
@keyframes timer-glow { to { width: 48rem; opacity: .25; } }

@media (max-width: 1000px) {
  .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .podium-card { padding-inline: 1rem; }
  .standings-head,
  .standing-row { grid-template-columns: 3.5rem minmax(11rem, 1.4fr) minmax(7rem, 1fr) minmax(5rem, .6fr); }
}

@media (max-width: 760px) {
  .leaderboard-page .site-header { grid-template-columns: 1fr auto; }
  .leaderboard-hero { min-height: 58rem; padding-top: 7rem; justify-content: flex-start; }
  .stake-emblem { margin-top: 2.3rem; }
  .leaderboard-title__amount { font-size: clamp(5.2rem, 23vw, 8rem); }
  .leaderboard-title__label { font-size: clamp(1.05rem, 5vw, 1.6rem); }
  .leaderboard-hero__copy { max-width: 34rem; }
  .play-actions { width: min(100%, 31rem); grid-template-columns: 1fr; }
  .leaderboard-scroll { bottom: 1.5rem; }
  .leaderboard-hero__coins .coin { opacity: .45; }
  .leaderboard-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .leaderboard-heading > p { max-width: 34rem; }
  .leaderboard-heading__icon { right: 1rem; }
  .podium { grid-template-columns: 1fr; align-items: stretch; margin-top: 4rem; }
  .podium-card { width: min(100%, 31rem); min-height: 22rem; margin-inline: auto; }
  .podium-card--first { order: 1; min-height: 25rem; }
  .podium-card--second { order: 2; }
  .podium-card--third { order: 3; }
  .countdown-display { grid-template-columns: repeat(2, 1fr); }
  .countdown-unit strong { font-size: clamp(3rem, 14vw, 5rem); }
  .standings-head { display: none; }
  .standing-row {
    min-height: 7.2rem;
    padding: 1rem;
    grid-template-columns: 2.8rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: .55rem .8rem;
  }
  .standing-rank { grid-row: 1 / 3; align-self: center; }
  .standing-player { grid-column: 2; }
  .standing-prize { grid-column: 3; grid-row: 1; justify-self: end; }
  .standing-prize::before { content: "Prize "; color: #655e6b; font-family: var(--body); font-size: .55rem; text-transform: uppercase; }
  .standing-wager { grid-column: 2; grid-row: 2; font-size: .65rem; }
  .standing-wager::before { content: "Wagered · "; color: #655e6b; font-family: var(--body); font-size: .55rem; text-transform: uppercase; }
}

@media (max-width: 480px) {
  .leaderboard-shell { padding-block: 6rem; }
  .leaderboard-hero { min-height: 56rem; }
  .stake-emblem { width: 17rem; }
  .stake-emblem__plate { width: 14rem; height: 6rem; }
  .orbit-a { width: 17rem; }
  .leaderboard-title { margin-top: .7rem; }
  .leaderboard-title__amount { font-size: 5rem; }
  .leaderboard-title__label { font-size: 1rem; }
  .leaderboard-hero__copy { margin-top: 1.5rem; font-size: .88rem; }
  .play-button { grid-template-columns: 5.7rem 1fr auto; gap: .7rem; }
  .play-button__logo { width: 5.7rem; }
  .play-button > i { width: 2.35rem; height: 2.35rem; }
  .leaderboard-scroll span { display: none; }
  .leaderboard-heading .split-heading { font-size: 2.25rem; }
  .leaderboard-heading__icon { width: 3.4rem; top: -.5rem; }
  .podium-card { border-radius: 1rem .9rem .35rem .35rem; }
  .countdown-card { border-radius: 1rem; }
  .countdown-card__header { align-items: flex-start; }
  .countdown-display { margin: 2rem 0; gap: .55rem; }
  .countdown-unit { padding-block: 1.25rem; border-radius: .75rem; }
  .countdown-unit strong { font-size: 2.8rem; }
  .countdown-unit span { font-size: .48rem; }
  .countdown-progress p { line-height: 1.5; }
  .standings-card { margin-top: 3rem; border-radius: 1rem; }
  .standing-row { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .standing-avatar { width: 2.8rem; height: 2.8rem; border-radius: .7rem; }
  .standing-player { gap: .7rem; }
  .standing-player strong { font-size: .7rem; }
  .standing-player small { font-size: .54rem; }
}