/*
 * Animationsebene der Leinwand (Spec docs/superpowers/specs/2026-10-23-halloween-theme-design.md, B1–B3, B5, B6;
 * frontend/js/quizStage/themeAnim/). Liegt im Stapelkontext des Hosts (stage-theme.css: isolation) über Kulisse (-2) und Bühnenlicht
 * (-1, früher im DOM) und hinter Text und Figuren. Bewegung nur mit transform und opacity.
 * `.is-paused` (Hintergrund-Tab) hält alles an, `.is-static` (reduzierte Bewegung) zeigt nur das ruhige Bild.
 */
.pq-themeanim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.pq-themeanim [hidden] {
  display: none !important;
}
.pq-themeanim.is-paused,
.pq-themeanim.is-paused * {
  animation-play-state: paused !important;
}
.pq-themeanim.is-static,
.pq-themeanim.is-static * {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .pq-themeanim,
  .pq-themeanim * {
    animation: none !important;
    transition: none !important;
  }
}
/* Hoher Kontrast: keine Kulisse, also auch keine Ebene darüber. */
@media (prefers-contrast: more) {
  .pq-themeanim { display: none; }
}
.pq-themeanim svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pausenfolie über einer animierten Kulisse (Halloween, Weihnachten, Oktoberfest): Fläche durchsichtig, Text auf der hellen Fläche (Kontrast wie überall). */
.view-stage:is([data-pq-theme="halloween"], [data-pq-theme="christmas"], [data-pq-theme="oktoberfest"]) .ess {
  background: transparent;
}
.view-stage:is([data-pq-theme="halloween"], [data-pq-theme="christmas"], [data-pq-theme="oktoberfest"]) .ess-inner {
  background: var(--stage-panel, rgb(255 255 255 / 0.92));
  border-radius: 16px;
  padding: 1.25rem 2rem;
}