img {
  content-visibility: auto;
}

.screen:not(.active), dialog:not([open]) {
  content-visibility: hidden;
}

.battle-hero, .enemy, .beam, .attack-effects {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.lite-mode .attack-particle:nth-child(n+7),
.lite-mode .shock-ring:nth-child(n+3) {
  display: none !important;
}

.lite-mode .battle-hero,
.lite-mode .enemy,
.lite-mode .hero-art,
.lite-mode .monster-art {
  filter: drop-shadow(0 5px 10px rgba(48, 210, 255, .28));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}