/* Nine equal, large ranking portraits in a stable 3 x 3 grid. */
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading p {
  margin: 0;
  color: #087ca6;
  font: 950 clamp(.78rem, 1.8vw, 1.08rem)/1.55 Vazirmatn, Tahoma, Arial, sans-serif;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading h2 {
  margin: 1px 0 0;
  color: #123f56;
  font: 950 clamp(1.02rem, 2.25vw, 1.42rem)/1.45 Vazirmatn, Tahoma, Arial, sans-serif;
}

/* The grid is rendered as a static dashboard card, so its confetti must not
   depend on the carousel's transient is-active class. */
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i {
  animation: signed-in-top-nine-confetti-float-a var(--top-nine-confetti-duration, 6.8s) linear var(--confetti-delay, 0s) infinite;
  will-change: transform, opacity;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(3n + 1) {
  --top-nine-confetti-duration: 5.8s;
  animation-name: signed-in-top-nine-confetti-float-b;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(3n + 2) {
  --top-nine-confetti-duration: 7.6s;
  animation-name: signed-in-top-nine-confetti-float-c;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(4n) { --confetti-delay: -2.4s; }
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(5n) { --confetti-delay: -4.1s; }

@keyframes signed-in-top-nine-confetti-float-a {
  0% { transform: translate3d(0, -18px, 0) rotate(var(--confetti-rotate, 0deg)); opacity: 0; }
  12% { opacity: .9; }
  52% { transform: translate3d(18px, 34px, 0) rotate(calc(var(--confetti-rotate, 0deg) + 150deg)); opacity: .85; }
  100% { transform: translate3d(-12px, 96px, 0) rotate(calc(var(--confetti-rotate, 0deg) + 320deg)); opacity: 0; }
}

@keyframes signed-in-top-nine-confetti-float-b {
  0% { transform: translate3d(0, -24px, 0) rotate(var(--confetti-rotate, 0deg)); opacity: 0; }
  14% { opacity: .8; }
  58% { transform: translate3d(-22px, 42px, 0) rotate(calc(var(--confetti-rotate, 0deg) - 170deg)); opacity: .9; }
  100% { transform: translate3d(13px, 108px, 0) rotate(calc(var(--confetti-rotate, 0deg) - 340deg)); opacity: 0; }
}

@keyframes signed-in-top-nine-confetti-float-c {
  0% { transform: translate3d(0, -20px, 0) rotate(var(--confetti-rotate, 0deg)); opacity: 0; }
  10% { opacity: .88; }
  46% { transform: translate3d(14px, 28px, 0) rotate(calc(var(--confetti-rotate, 0deg) + 120deg)); opacity: .82; }
  100% { transform: translate3d(-18px, 102px, 0) rotate(calc(var(--confetti-rotate, 0deg) + 300deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i { animation: none !important; }
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-stage {
  padding-inline: clamp(22px, 5vw, 58px);
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-grid[data-top-nine-grid] {
  --top-nine-avatar-size: clamp(88px, 15vw, 112px);
  direction: ltr;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, auto) !important;
  align-content: center;
  align-items: start;
  justify-items: center;
  column-gap: clamp(12px, 3vw, 30px) !important;
  row-gap: clamp(12px, 2.2vh, 24px) !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-person {
  direction: rtl;
  width: 100%;
  min-width: 0;
  grid-template-rows: auto auto !important;
  align-content: start;
  justify-items: center;
  gap: 2px !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-avatar,
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-person:nth-child(-n + 3) .signed-in-top-ten-avatar {
  position: relative;
  width: var(--top-nine-avatar-size) !important;
  min-width: var(--top-nine-avatar-size);
  max-width: var(--top-nine-avatar-size);
  height: var(--top-nine-avatar-size);
  aspect-ratio: 1;
  overflow: visible;
  box-sizing: border-box;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-avatar > img:not(.signed-in-top-ten-trophy),
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-avatar > svg,
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-avatar > span {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-trophy {
  position: absolute !important;
  z-index: 4;
  left: -7% !important;
  bottom: -7% !important;
  width: 36% !important;
  height: 36% !important;
  object-fit: contain;
  pointer-events: none;
  transform: none !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-meta {
  width: 100%;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0 !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-name,
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-account,
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-city,
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-rank-text {
  line-height: 1.25 !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-name {
  font-size: clamp(.56rem, 1.25vw, .69rem);
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-account.is-empty,
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-city.is-empty {
  display: none !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-account.is-a3-badge {
  display: inline-grid !important;
  place-items: center;
  min-width: 24px;
  min-height: 15px;
  margin: 1px 0;
  padding: 0 5px;
  border-radius: 5px;
  background: #087fae;
  color: #fff;
  font: 900 .48rem/1.2 Tahoma, Arial, sans-serif;
  direction: ltr;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-rank-text {
  margin-top: 1px;
  font-weight: 900;
}

@media (max-width: 600px) and (orientation: portrait) {
  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading p {
    font-size: .72rem;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading h2 {
    font-size: .91rem;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-stage {
    padding: 8px 22px 42px;
    gap: 3px;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-grid[data-top-nine-grid] {
    --top-nine-avatar-size: clamp(78px, 21vw, 92px);
    column-gap: 8px !important;
    row-gap: clamp(10px, 1.8vh, 18px) !important;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-name {
    font-size: .53rem;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-account,
  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-city,
  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-rank-text {
    font-size: .47rem;
  }
}

@media (orientation: landscape) and (min-width: 601px) and (max-height: 700px) {
  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-stage {
    padding: 7px 34px 28px;
    gap: 2px;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-grid[data-top-nine-grid] {
    --top-nine-avatar-size: clamp(70px, 10.5vh, 82px);
    row-gap: 7px !important;
  }
}