/* 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;
  }
}

/* S2132: compact stage with the genuine header Smile mark and depth layers. */
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-stage {
  position: relative;
  overflow: hidden;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border: 1px solid rgba(255, 255, 255, .28);
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, .11), transparent 39%),
    linear-gradient(155deg, #685487 0%, #59447b 50%, #49366b 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 30px rgba(54, 38, 78, .18);
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading {
  position: relative;
  z-index: 3;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading p {
  color: #dff5ff !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading h2 {
  color: #fff !important;
  font-size: clamp(1.28rem, 3vw, 1.82rem) !important;
  line-height: 1.45 !important;
  text-wrap: balance;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-grid {
  position: relative;
  z-index: 3;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti {
  z-index: 1;
  contain: layout paint;
}

.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 {
  color: #fff !important;
  text-shadow: 0 1px 5px rgba(37, 15, 72, .55);
}

.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 {
  border: 2px solid rgba(255, 255, 255, .82);
  box-shadow: 0 7px 18px rgba(35, 11, 73, .34);
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i {
  --smile-rain-opacity: .76;
  opacity: 0;
  width: 24px !important;
  height: 21px !important;
  border-radius: 0 !important;
  background: #fff !important;
  -webkit-mask: url("/assets/smile-logo-transparent.png?v=S1114G") center top/100% auto no-repeat;
  mask: url("/assets/smile-logo-transparent.png?v=S1114G") center top/100% auto no-repeat;
  animation: none !important;
  backface-visibility: hidden;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(even) {
  background: #8edcff !important;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(5n + 1) {
  --smile-rain-opacity: .18;
  width: 74px !important;
  height: 65px !important;
  filter: blur(4.8px);
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-confetti i:nth-child(7n + 3) {
  --smile-rain-opacity: .26;
  width: 48px !important;
  height: 42px !important;
  filter: blur(2.6px);
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-foreground-smiles {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-foreground-smiles i {
  position: absolute;
  top: var(--smile-top, 0%);
  left: var(--smile-left, 50%);
  width: var(--smile-size, 140px);
  height: calc(var(--smile-size, 140px) * .88);
  opacity: 0;
  background: #fff;
  -webkit-mask: url("/assets/smile-logo-transparent.png?v=S1114G") center top/100% auto no-repeat;
  mask: url("/assets/smile-logo-transparent.png?v=S1114G") center top/100% auto no-repeat;
  filter: blur(var(--smile-blur, 7px));
  transform: translate3d(0, -70px, 0) rotate(-8deg) scale(.92);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-rank-foreground-smiles i:nth-child(even) {
  background: #8edcff;
}

.signed-in-top-ten-slide[data-top-nine-ready].is-top-nine-in-view .signed-in-rank-foreground-smiles i {
  animation: signed-in-top-nine-foreground-smile var(--smile-duration, 8s) linear var(--smile-delay, 0s) infinite both;
}

.signed-in-top-ten-slide[data-top-nine-ready].is-top-nine-in-view .signed-in-rank-confetti i {
  animation: signed-in-top-nine-confetti-fall 7.8s linear var(--confetti-delay, 0s) infinite !important;
}

.signed-in-top-ten-slide[data-top-nine-ready].is-top-nine-in-view .signed-in-rank-confetti i:nth-child(3n + 1) {
  animation-duration: 6.7s !important;
}

.signed-in-top-ten-slide[data-top-nine-ready].is-top-nine-in-view .signed-in-rank-confetti i:nth-child(3n + 2) {
  animation-duration: 8.9s !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-meta {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* S2144: every ranked person is already visible before the card enters the
   viewport. The legacy parent animation was still replaying on scroll even
   though the avatar and metadata children had been made static in S2141. */
.signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-person {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

@keyframes signed-in-top-nine-confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -34px, 0) rotate(0deg); }
  10% { opacity: var(--smile-rain-opacity, .76); }
  72% { opacity: var(--smile-rain-opacity, .76); }
  100% { opacity: 0; transform: translate3d(18px, 138px, 0) rotate(310deg); }
}

@keyframes signed-in-top-nine-foreground-smile {
  0% { opacity: 0; transform: translate3d(0, -70px, 0) rotate(-8deg) scale(.92); }
  13% { opacity: var(--smile-opacity, .15); }
  70% { opacity: var(--smile-opacity, .15); }
  100% { opacity: 0; transform: translate3d(var(--smile-drift, 30px), var(--smile-travel, 250px), 0) rotate(22deg) scale(1.08); }
}

@media (max-width: 600px) and (orientation: portrait) {
  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-stage {
    padding: 8px 20px 18px !important;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-grid[data-top-nine-grid] {
    row-gap: 8px !important;
  }

  .signed-in-top-ten-slide[data-top-nine-ready] .signed-in-top-ten-heading h2 {
    font-size: clamp(1.08rem, 4.8vw, 1.34rem) !important;
  }
}

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