/* Game extras: sky scenes, clouds, stars and confetti. All of it is decoration:
   it stops in Simple mode and for reduced motion, and nothing depends on it. */

.sky-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sky-scene);
}

.cloud {
  position: absolute;
  z-index: -1;
  width: 140px;
  height: 44px;
  background: var(--cloud);
  border-radius: var(--radius-pill);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: var(--cloud);
  border-radius: 50%;
}

.cloud::before { top: -28px; left: 22px; width: 60px; height: 60px; }
.cloud::after { top: -18px; left: 70px; width: 44px; height: 44px; }
.cloud--1 { top: 40px; left: -24px; }
.cloud--2 { top: 110px; right: -36px; transform: scale(.8); }
.cloud--3 { bottom: 60px; left: 40%; transform: scale(.6); }

/* Stars */
.stars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-2);
}

.star {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .18));
}

.star--big { width: 78px; height: 78px; margin-bottom: 12px; }

.pop { animation: pop .5s var(--ease-bounce) both; }
.pop--1 { animation-delay: .1s; }
.pop--2 { animation-delay: .3s; }
.pop--3 { animation-delay: .5s; }

@keyframes pop {
  from { opacity: 0; transform: scale(0) rotate(-25deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* Confetti */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti span {
  position: absolute;
  top: -16px;
  width: 8px;
  height: 14px;
  border-radius: 3px;
  animation: fall 3s linear 2 both;
}

.confetti span:nth-child(1) { left: 6%; background: var(--tangerine-500); }
.confetti span:nth-child(2) { left: 16%; background: var(--leaf-400); animation-delay: .4s; }
.confetti span:nth-child(3) { left: 27%; background: var(--sunshine-400); animation-delay: .9s; }
.confetti span:nth-child(4) { left: 38%; background: var(--pink-400); animation-delay: .2s; }
.confetti span:nth-child(5) { left: 49%; background: var(--sky-400); animation-delay: 1.2s; }
.confetti span:nth-child(6) { left: 60%; background: var(--tangerine-500); animation-delay: .6s; }
.confetti span:nth-child(7) { left: 71%; background: var(--leaf-400); animation-delay: 1.5s; }
.confetti span:nth-child(8) { left: 81%; background: var(--sunshine-400); animation-delay: .3s; }
.confetti span:nth-child(9) { left: 90%; background: var(--pink-400); animation-delay: 1s; }
.confetti span:nth-child(10) { left: 96%; background: var(--sky-400); animation-delay: .7s; }

@keyframes fall {
  to { transform: translateY(620px) rotate(540deg); }
}

/* The "Sold out!" results screen */
.sold-out {
  max-width: 380px;
  margin-inline: auto;
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--radius-xl);
}

.sold-out__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-5);
  text-align: center;
}

.sold-out__inner p { margin: 0; font-weight: 700; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: 100%;
}

.stat-tile {
  padding: var(--space-2) var(--space-1);
  background: var(--surface);
  border: 2px solid var(--outline);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
}

.stat-tile b {
  display: block;
  font: 600 var(--fs-xl) / 1.1 var(--font-display);
}