/* FREESTYLE stadium overlay */

.graph-container.has-aviator-anim {
  position: relative;
  overflow: hidden;
  background: #050218 !important;
  border-color: rgba(168, 216, 255, 0.18);
}

.graph-container.has-aviator-anim #orbital-scene {
  opacity: 0 !important;
  pointer-events: none !important;
}

.graph-container.has-aviator-anim .graph-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 50;
}

.graph-container.has-aviator-anim .graph-overlay > * {
  pointer-events: auto;
}

.spin-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  background: #050218;
}

.spin-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  filter: brightness(0.92) saturate(1.08);
}

.spin-actor {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: min(78%, 640px);
  aspect-ratio: 582 / 490;
  transform: translateX(-36%);
  z-index: 3;
}

.spin-stage.is-waiting .spin-actor {
  opacity: 0;
}

.spin-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.spin-mult {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  z-index: 70;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.spin-mult.is-on {
  opacity: 1;
}

.spin-mult-val {
  font-family: Inter, Ubuntu, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.spin-mult-over {
  display: none;
  margin-top: 0.15rem;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  color: #ff3b3b;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.spin-mult.is-crash .spin-mult-val {
  color: #ff3b3b !important;
}

.graph-container.has-aviator-anim #multiplier-container {
  display: none !important;
}

.graph-container.has-aviator-anim #waiting-state {
  background: transparent !important;
  justify-content: flex-start;
  padding-top: 14%;
  gap: 0.55rem;
  z-index: 55;
}

.graph-container.has-aviator-anim #countdown-display {
  display: none;
}

.graph-container.has-aviator-anim #waiting-state .waiting-text,
.graph-container.has-aviator-anim #waiting-state .progress-container {
  opacity: 0;
}

.spin-loader {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  z-index: 65;
  width: min(58%, 340px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spin-loader.is-on {
  opacity: 1;
}

.spin-loader-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.75rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  margin-bottom: 0.7rem;
  line-height: 1.2;
}

.spin-loader-title span {
  display: block;
}

.spin-loader-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
  width: 100%;
}

.spin-loader-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #afc2ff;
}

.spin-ball {
  margin-top: 2.4rem;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 14%, transparent 16%),
    radial-gradient(circle at 50% 50%, #f4f4f4 0 42%, #1a1a1a 43% 48%, #efefef 50% 100%);
  box-shadow:
    inset -18px -14px 22px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.45);
  animation: fs-ball-spin 1s linear infinite;
  position: relative;
}

.spin-ball::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 40deg, #111 40deg 70deg, transparent 70deg 140deg, #111 140deg 175deg, transparent 175deg 260deg, #111 260deg 300deg, transparent 300deg);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

@keyframes fs-ball-spin {
  to { transform: rotate(360deg); }
}

.graph-container.has-aviator-anim #crashed-text {
  display: none;
}

@media (max-width: 812px) {
  .spin-mult-val {
    font-size: 2.2rem;
  }
  .spin-actor {
    width: 92%;
    transform: translateX(-42%);
  }
  .spin-ball {
    width: 120px;
    height: 120px;
  }
}