.game-container {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: size;
  overflow: hidden;
  background-color: var(--color-darkness);
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#start-scene {
  background-image: url("../assets/images/bg/start-bg.webp");
}



#gameplay-scene {
  background-image: url("../assets/images/bg/main-bg.webp");
}

#victory-scene {
  background-image: url("../assets/images/bg/main-bg.webp");
}

.darkness-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.light-spotlight {
  position: absolute;
  left: 0;
  top: 0;
  width: 25cqw;
  height: 25cqw;
  border-radius: 50%;
  box-shadow: 0 0 0 200cqw rgba(5, 5, 10, 0.99);
  pointer-events: none;
  transform: translate3d(calc(var(--spotlight-x, 50%) - 50%), calc(var(--spotlight-y, 50%) - 50%), 0);
  will-change: transform;
  display: none;
  z-index: 5;
}

.light-shadow {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 2cqw 2cqw rgba(5, 5, 10, 0.95);
}

.speech-bubbles-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.paused * {
  animation-play-state: paused !important;
  transition: none !important;
}