/* Approved floating-dust background. Scoreboard layout remains separate. */
.arena-background {
  --dust-unit: clamp(.75px, .0625vw, 2px);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(ellipse 72% 72% at 43% -20%, #64845a85 0%, #345c3d6b 38%, transparent 80%),
    radial-gradient(ellipse 44% 95% at 0% 26%, #356e4155, transparent 82%),
    radial-gradient(ellipse 48% 88% at 100% 40%, #315f3952, transparent 84%),
    #070d09;
}

/* The light source is stationary, so only dust moves through the air. */
.arena-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 51% 35% at 45% -8%, #b4cc963c, transparent 94%);
}

.arena-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 36% 46% at 50% 56%, #04080570, transparent 100%),
    linear-gradient(to bottom, transparent 20%, #0206031c 65%, #02060357 100%);
}

.dust-field {
  position: absolute;
  inset: -3%;
}

.dust-particle {
  position: absolute;
  left: var(--dust-x);
  top: var(--dust-y);
  width: calc(var(--dust-size) * var(--dust-unit));
  height: calc(var(--dust-size) * var(--dust-unit));
  border-radius: 50%;
  opacity: var(--dust-opacity);
  background: radial-gradient(ellipse at 46% 42%, #d2e5bd 0%, #bad2a1 21%, #88b6759e 48%, #88b67500 76%);
  animation: dust-airborne var(--dust-duration) linear var(--dust-delay) infinite;
}

.dust-particle--middle {
  background: radial-gradient(ellipse at 44% 43%, #c7ddb1 0%, #adc996e8 20%, #8ab5758c 43%, #8ab57500 74%);
}

.dust-particle--near {
  background: radial-gradient(ellipse at 47% 44%, #c0d7a8b3 0%, #a7c18b73 30%, #8bb6753d 48%, #8bb67500 73%);
}

/* Each particle follows its own shallow curved path. Transform and opacity
   are the only animated properties; zero-opacity ends hide the loop reset. */
@keyframes dust-airborne {
  0% {
    transform: translate3d(0, 0, 0) scale(.91);
    opacity: 0;
  }
  5% {
    transform: translate3d(calc(var(--dust-x1) * var(--dust-unit)), calc(var(--dust-y1) * var(--dust-unit)), 0) scale(.925);
  }
  8% { opacity: calc(var(--dust-opacity) * .35); }
  10% {
    transform: translate3d(calc(var(--dust-x2) * var(--dust-unit)), calc(var(--dust-y2) * var(--dust-unit)), 0) scale(.94);
  }
  15% {
    transform: translate3d(calc(var(--dust-x3) * var(--dust-unit)), calc(var(--dust-y3) * var(--dust-unit)), 0) scale(.955);
  }
  20% {
    transform: translate3d(calc(var(--dust-x4) * var(--dust-unit)), calc(var(--dust-y4) * var(--dust-unit)), 0) scale(.97);
    opacity: calc(var(--dust-opacity) * .82);
  }
  25% {
    transform: translate3d(calc(var(--dust-x5) * var(--dust-unit)), calc(var(--dust-y5) * var(--dust-unit)), 0) scale(.99625);
  }
  30% {
    transform: translate3d(calc(var(--dust-x6) * var(--dust-unit)), calc(var(--dust-y6) * var(--dust-unit)), 0) scale(1.0225);
  }
  35% {
    transform: translate3d(calc(var(--dust-x7) * var(--dust-unit)), calc(var(--dust-y7) * var(--dust-unit)), 0) scale(1.04875);
  }
  40% {
    transform: translate3d(calc(var(--dust-x8) * var(--dust-unit)), calc(var(--dust-y8) * var(--dust-unit)), 0) scale(1.075);
    opacity: var(--dust-opacity);
  }
  45% {
    transform: translate3d(calc(var(--dust-x9) * var(--dust-unit)), calc(var(--dust-y9) * var(--dust-unit)), 0) scale(1.06625);
  }
  50% {
    transform: translate3d(calc(var(--dust-x10) * var(--dust-unit)), calc(var(--dust-y10) * var(--dust-unit)), 0) scale(1.0575);
  }
  55% {
    transform: translate3d(calc(var(--dust-x11) * var(--dust-unit)), calc(var(--dust-y11) * var(--dust-unit)), 0) scale(1.04875);
  }
  60% {
    transform: translate3d(calc(var(--dust-x12) * var(--dust-unit)), calc(var(--dust-y12) * var(--dust-unit)), 0) scale(1.04);
    opacity: calc(var(--dust-opacity) * .92);
  }
  65% {
    transform: translate3d(calc(var(--dust-x13) * var(--dust-unit)), calc(var(--dust-y13) * var(--dust-unit)), 0) scale(1.02);
  }
  70% {
    transform: translate3d(calc(var(--dust-x14) * var(--dust-unit)), calc(var(--dust-y14) * var(--dust-unit)), 0) scale(1);
  }
  75% {
    transform: translate3d(calc(var(--dust-x15) * var(--dust-unit)), calc(var(--dust-y15) * var(--dust-unit)), 0) scale(.98);
  }
  80% {
    transform: translate3d(calc(var(--dust-x16) * var(--dust-unit)), calc(var(--dust-y16) * var(--dust-unit)), 0) scale(.96);
    opacity: calc(var(--dust-opacity) * .66);
  }
  85% {
    transform: translate3d(calc(var(--dust-x17) * var(--dust-unit)), calc(var(--dust-y17) * var(--dust-unit)), 0) scale(.975);
  }
  90% {
    transform: translate3d(calc(var(--dust-x18) * var(--dust-unit)), calc(var(--dust-y18) * var(--dust-unit)), 0) scale(.99);
  }
  95% {
    transform: translate3d(calc(var(--dust-x19) * var(--dust-unit)), calc(var(--dust-y19) * var(--dust-unit)), 0) scale(1.005);
  }
  100% {
    transform: translate3d(calc(var(--dust-x20) * var(--dust-unit)), calc(var(--dust-y20) * var(--dust-unit)), 0) scale(1.02);
    opacity: 0;
  }
}

.arena-background.is-paused .dust-particle {
  animation-play-state: paused;
}

@media (max-width: 700px) {
  .dust-particle[data-mobile="hide"] { display: none; }
}

/* Keep the same deterministic still composition for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .arena-background .dust-particle { animation-play-state: paused; }
}

@media print {
  .arena-background { display: none; }
}