.space-music {
  display: none;
}

.asteroid-swarm {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--swarm-w, 520px);
  height: var(--swarm-h, 260px);
  opacity: 0;
  pointer-events: none;
  animation: asteroidSwarmFly var(--ast-duration, 10s) cubic-bezier(.14, .74, .28, 1) forwards;
  will-change: transform, opacity;
}

.space-rock,
.bonus-asteroid {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: var(--rock-size, 84px);
  height: var(--rock-size, 84px);
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(125, 211, 252, .20))
    drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}

.space-rock {
  transform: rotate(var(--rock-rot, 0deg)) scale(var(--rock-scale, 1));
  animation: rockDrift var(--rock-spin, 7s) linear infinite;
  border-radius: 44% 56% 52% 48% / 48% 39% 61% 52%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.20) 0 8%, transparent 9%),
    radial-gradient(circle at 68% 30%, rgba(2,6,23,.36) 0 10%, transparent 11%),
    radial-gradient(circle at 42% 70%, rgba(2,6,23,.30) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--rock-a), var(--rock-b) 52%, var(--rock-c));
  box-shadow:
    inset -10px -12px 18px rgba(2,6,23,.28),
    inset 8px 7px 14px rgba(255,255,255,.12);
}

.space-rock:nth-child(3n) {
  border-radius: 56% 44% 51% 49% / 39% 58% 42% 61%;
}

.space-rock:nth-child(4n) {
  border-radius: 48% 52% 39% 61% / 55% 42% 58% 45%;
}

.bonus-asteroid {
  display: block;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  transform: scale(var(--rock-scale, 1));
  filter:
    drop-shadow(0 0 15px rgba(250, 204, 21, .42))
    drop-shadow(0 0 30px rgba(251, 113, 133, .36));
}

.bonus-asteroid img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform: rotate(var(--rock-rot, 0deg));
  animation: bonusAsteroidSpin var(--rock-spin, 9s) linear infinite;
}

.bonus-asteroid:hover,
.bonus-asteroid:focus-visible {
  outline: none;
  filter:
    drop-shadow(0 0 22px rgba(250, 204, 21, .72))
    drop-shadow(0 0 42px rgba(251, 113, 133, .56));
}

.bonus-asteroid::after {
  content: "";
  position: absolute;
  inset: 18% 56% 16% -18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.36), rgba(56,189,248,.16) 40%, transparent 70%);
  filter: blur(10px);
  opacity: .52;
  pointer-events: none;
  transform: rotate(-18deg);
}

.bonus-badge {
  position: absolute;
  left: 64%;
  top: -34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .78);
  border: 1px solid rgba(250, 204, 21, .74);
  color: #facc15;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(250, 204, 21, .24);
  animation: bonusBlink .92s steps(2,end) infinite;
}

.bonus-badge::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 14px solid #facc15;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, .8));
}

@keyframes asteroidSwarmFly {
  0% {
    opacity: 0;
    transform: translate3d(var(--ast-x-start), var(--ast-y-start), 0) scale(.82);
  }
  8% {
    opacity: .88;
  }
  54% {
    opacity: .78;
  }
  92% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ast-x-end), var(--ast-y-end), 0) scale(1);
  }
}

@keyframes rockDrift {
  to {
    transform: rotate(calc(var(--rock-rot, 0deg) + var(--rock-turn, 360deg))) scale(var(--rock-scale, 1));
  }
}

@keyframes bonusAsteroidSpin {
  to {
    transform: rotate(calc(var(--rock-rot, 0deg) + var(--rock-turn, 360deg)));
  }
}

@keyframes bonusBlink {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: .28;
    transform: translateY(-2px);
  }
}

@media (max-width: 980px) {
  .asteroid-swarm {
    width: var(--swarm-w-mobile, 330px);
    height: var(--swarm-h-mobile, 190px);
    z-index: 6;
  }

  .space-rock,
  .bonus-asteroid {
    width: var(--rock-size-mobile, 54px);
    height: var(--rock-size-mobile, 54px);
  }

  .bonus-badge {
    top: -28px;
    left: 50%;
    font-size: 10px;
    padding: 4px 8px 4px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asteroid-swarm {
    display: none;
  }
}