.scene {
  position: relative;
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #24133f 0%, #8a3a68 40%, #e07842 70%, #8a4a2a 100%);
}

.bg-picture,
.bg-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bg-art {
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(1.12) contrast(1.06);
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 36%, rgba(8, 2, 6, 0.5) 100%),
    linear-gradient(180deg, rgba(8, 2, 8, 0.28), transparent 22%, transparent 62%, rgba(8, 2, 6, 0.42));
  pointer-events: none;
}

.godrays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 28%, rgba(255, 186, 90, 0.28), transparent 42%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

.playfield .stage {
  position: relative;
  width: min(100%, 420px);
  height: min(58vh, 380px);
  perspective: var(--stage-perspective);
  transform-style: preserve-3d;
}

.playfield .stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 8%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 200, 90, 0.28), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1.4px);
  background-size: 90px 110px;
  animation: dust-drift 18s linear infinite;
  opacity: 0.25;
}

@keyframes dust-drift {
  to {
    background-position: 90px -110px;
  }
}

.table {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  z-index: 1;
}

.plate {
  position: absolute;
  left: 50%;
  top: 48%;
  width: var(--plate-w);
  transform: translateX(-50%);
  background: transparent;
  filter: drop-shadow(0 14px 12px rgba(40, 12, 0, 0.4));
  z-index: 2;
}

.plate img {
  width: 100%;
  height: auto;
  background: transparent;
  object-fit: contain;
}

.axis {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 3px;
  height: 36%;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #e05050, #9a1515);
  border-radius: 2px;
  opacity: 0;
}

.axis.is-on {
  opacity: 1;
}

.tiger {
  position: absolute;
  bottom: 18%;
  left: -20%;
  width: clamp(96px, 22vmin, 180px);
  z-index: 1;
  animation: tiger-pace 16s linear infinite;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  background: transparent;
}

.tiger img {
  width: 100%;
  height: auto;
  background: transparent;
}

@keyframes tiger-pace {
  0% {
    left: -24%;
    transform: scaleX(1);
  }
  48% {
    left: 70%;
    transform: scaleX(1);
  }
  50% {
    left: 70%;
    transform: scaleX(-1);
  }
  100% {
    left: -24%;
    transform: scaleX(-1);
  }
}

.fx-layer,
.glow-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}