.dynamic-world {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: opacity .35s ease;
}

.dynamic-world.is-loading { opacity: .35; }
.dynamic-world canvas { display: block; width: 100% !important; height: 100% !important; }

.landing > .dynamic-world--landing { z-index: 3; }

/* A lightweight visual fallback remains active when WebGL/Canvas initialization
   fails, so the original text game is always playable. */
.dynamic-world::before,
.dynamic-world::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dynamic-world::before {
  top: 8%;
  left: 42%;
  width: 42%;
  height: 30%;
  opacity: .18;
  background: radial-gradient(ellipse, rgba(255, 239, 187, .72), rgba(160, 226, 216, .12) 42%, transparent 72%);
  filter: blur(8px);
  animation: dynamic-light-breathe 5.5s ease-in-out infinite alternate;
}

.dynamic-world::after {
  right: -18%;
  bottom: 22%;
  width: 68%;
  height: 12%;
  opacity: .16;
  background: linear-gradient(90deg, transparent, rgba(215, 244, 236, .72), transparent);
  filter: blur(14px);
  transform: rotate(-4deg);
  animation: dynamic-mist-drift 12s ease-in-out infinite alternate;
}

.combat-visual > .dynamic-world {
  z-index: 1;
  background: radial-gradient(circle at 50% 42%, rgba(79, 194, 184, .06), transparent 58%);
}

.combat-visual > .dynamic-world::before,
.combat-visual > .dynamic-world::after { display: none; }

.world-stage.has-dynamic-world > .world-stage__mist,
.world-stage.has-dynamic-world > .spirit-particles { opacity: .1; }

@keyframes dynamic-light-breathe {
  from { opacity: .08; transform: translate3d(-3%, 2%, 0) scale(.9); }
  to { opacity: .28; transform: translate3d(4%, -2%, 0) scale(1.12); }
}

@keyframes dynamic-mist-drift {
  from { opacity: .1; transform: translate3d(-18%, 0, 0) rotate(-4deg) scale(.9); }
  to { opacity: .22; transform: translate3d(6%, -8%, 0) rotate(-2deg) scale(1.12); }
}

@media (max-width:760px) {
  .dynamic-world::before { top: 4%; left: 34%; width: 58%; height: 23%; }
  .dynamic-world::after { bottom: 44%; width: 88%; }
  .combat-visual > .dynamic-world { inset: 0; }
}

@media (prefers-reduced-motion:reduce) {
  .dynamic-world { display: none; }
  .dynamic-world::before,
  .dynamic-world::after { animation: none !important; }
}