/* ================================================================================================================================ */
/* Halloween                                                                                                                           */
/* ================================================================================================================================ */

@property --hw-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffb347;
}

.hwa-scene {
  position: absolute;
  inset: 0;
  --hw-glow: #ffb347;
  transition: --hw-glow 600ms ease-out;
}

/* Kürbis-Laternen: weiches Leuchten über den Gesichtern, flackert unregelmäßig. */
.hwa-stop { stop-color: var(--hw-glow); }
.hwa-stop--0 { stop-opacity: 0.75; }
.hwa-stop--1 { stop-opacity: 0.3; }
.hwa-stop--2 { stop-opacity: 0; }
.hwa-glow {
  opacity: 0.55;
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: hwa-flicker var(--d, 3s) var(--dl, 0s) infinite linear;
}
@keyframes hwa-flicker {
  0% { opacity: 0.55; }
  9% { opacity: 0.78; }
  14% { opacity: 0.5; }
  31% { opacity: 0.72; }
  38% { opacity: 0.62; }
  55% { opacity: 0.85; }
  61% { opacity: 0.56; }
  78% { opacity: 0.74; }
  86% { opacity: 0.48; }
  100% { opacity: 0.55; }
}
/* Auflösung: kräftig in der Farbe der richtigen Antwort (die Farbe selbst wechselt über --hw-glow). */
.hwa-scene.is-reveal .hwa-stop--0 { stop-opacity: 1; }
.hwa-scene.is-reveal .hwa-stop--1 { stop-opacity: 0.55; }
.hwa-scene.is-reveal .hwa-glow {
  animation: hwa-reveal 5200ms ease-out both;
}
@keyframes hwa-reveal {
  0% { opacity: 0.55; transform: scale(1); }
  14% { opacity: 1; transform: scale(1.5); }
  80% { opacity: 0.95; transform: scale(1.4); }
  100% { opacity: 0.55; transform: scale(1); }
}

/* Sterne funkeln. */
.hwa-twinkle {
  fill: #fff8dc;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hwa-twinkle var(--d, 4s) var(--dl, 0s) infinite ease-in-out;
}
@keyframes hwa-twinkle {
  0%, 62%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  76% { opacity: 0.95; transform: scale(1.15) rotate(20deg); }
  88% { opacity: 0.3; transform: scale(0.8) rotate(35deg); }
}
.is-static .hwa-twinkle { opacity: 0.5; }

/* Spukhaus leuchtet beim Rundenstart auf. */
.hwa-house {
  opacity: 0;
}
.hwa-house.is-on {
  animation: hwa-house 2800ms ease-out both;
}
@keyframes hwa-house {
  0% { opacity: 0; }
  5% { opacity: 1; }
  12% { opacity: 0.45; }
  20% { opacity: 1; }
  65% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Nebel: zwei Bänder ziehen langsam am unteren Rand; das dritte kommt in der Pause dazu. */
.hwa-fog {
  position: absolute;
  left: 0;
  bottom: -3vh;
  width: 200vw;
  height: 24vh;
  opacity: 0.7;
  background:
    radial-gradient(ellipse 18vw 7vh at 8% 70%, rgb(240 234 250 / 0.75), transparent 70%),
    radial-gradient(ellipse 22vw 8vh at 27% 62%, rgb(230 222 245 / 0.7), transparent 70%),
    radial-gradient(ellipse 16vw 6vh at 45% 74%, rgb(244 240 252 / 0.75), transparent 70%),
    radial-gradient(ellipse 24vw 8vh at 62% 64%, rgb(230 222 245 / 0.7), transparent 70%),
    radial-gradient(ellipse 18vw 7vh at 82% 72%, rgb(240 234 250 / 0.75), transparent 70%),
    radial-gradient(ellipse 20vw 7vh at 96% 66%, rgb(230 222 245 / 0.7), transparent 70%);
  transition: opacity 3s ease;
}
.hwa-fog--a {
  animation: hwa-drift 90s linear infinite;
}
.hwa-fog--b {
  bottom: -6vh;
  height: 20vh;
  opacity: 0.55;
  animation: hwa-drift 130s linear infinite reverse;
}
.hwa-fog--c {
  height: 38vh;
  opacity: 0;
  background:
    radial-gradient(ellipse 22vw 12vh at 10% 70%, rgb(250 248 255 / 0.95), transparent 72%),
    radial-gradient(ellipse 26vw 14vh at 30% 60%, rgb(244 240 252 / 0.9), transparent 72%),
    radial-gradient(ellipse 20vw 11vh at 50% 72%, rgb(250 248 255 / 0.95), transparent 72%),
    radial-gradient(ellipse 26vw 13vh at 70% 62%, rgb(244 240 252 / 0.9), transparent 72%),
    radial-gradient(ellipse 22vw 12vh at 90% 70%, rgb(250 248 255 / 0.95), transparent 72%);
  animation: hwa-drift 160s linear infinite;
}
@keyframes hwa-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-100vw); }
}
.is-pause .hwa-fog--a { opacity: 0.85; }
.is-pause .hwa-fog--b { opacity: 0.75; }
.is-pause .hwa-fog--c { opacity: 0.8; }

/* Blitz: Himmel oben hellt zweimal auf (Abstand 450 ms, also unter 3 Blitzen je Sekunde), dazu ein Strahl rechts neben dem Haus. */
.hwa-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 28vh;
  opacity: 0;
  background: linear-gradient(to bottom, rgb(255 255 255 / 1), rgb(250 248 255 / 0.75) 50%, rgb(250 248 255 / 0));
}
.hwa-flash.is-on {
  animation: hwa-flash 2800ms linear both;
}
@keyframes hwa-flash {
  0% { opacity: 0; }
  1.5% { opacity: 0.9; }
  5% { opacity: 0; }
  16% { opacity: 0; }
  17.5% { opacity: 0.6; }
  22% { opacity: 0; }
  100% { opacity: 0; }
}
.hwa-bolt {
  position: absolute;
  left: 79vw;
  top: 0;
  width: 5vw;
  height: 27vh;
  opacity: 0;
}
.hwa-bolt.is-on {
  animation: hwa-bolt 2800ms linear both;
}
@keyframes hwa-bolt {
  0% { opacity: 0; }
  1.5% { opacity: 1; }
  6% { opacity: 0; }
  16% { opacity: 0; }
  17.5% { opacity: 0.8; }
  22% { opacity: 0; }
  100% { opacity: 0; }
}

/* Geist: schwebt langsam an einem Rand von unten nach oben, leicht schwankend. */
.hwa-ghost {
  position: absolute;
  left: 2vw;
  top: 0;
  width: 9vh;
  height: 12vh;
  opacity: 0;
}
.hwa-ghost--right {
  left: auto;
  right: 2vw;
}
.hwa-ghost.is-on {
  animation: hwa-ghost 16000ms ease-in-out both;
}
.hwa-ghost__body {
  display: block;
  width: 100%;
  height: 100%;
}
.hwa-ghost.is-on .hwa-ghost__body {
  animation: hwa-sway 3.2s ease-in-out infinite alternate;
}
@keyframes hwa-ghost {
  0% { opacity: 0; transform: translateY(78vh); }
  12% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(8vh); }
}
@keyframes hwa-sway {
  from { transform: translateX(-0.8vw) rotate(-6deg); }
  to { transform: translateX(0.8vw) rotate(6deg); }
}

/* Fledermausschwarm quer über den oberen Rand. */
.hwa-bats {
  position: absolute;
  left: 0;
  top: 2vh;
  width: 26vw;
  height: 13vh;
}
.hwa-bats.is-on {
  animation: hwa-cross 9000ms linear both;
}
.hwa-bats--rtl.is-on {
  animation-name: hwa-cross-rtl;
}
@keyframes hwa-cross {
  from { transform: translateX(-30vw); }
  to { transform: translateX(110vw); }
}
@keyframes hwa-cross-rtl {
  from { transform: translateX(110vw) scaleX(-1); }
  to { transform: translateX(-30vw) scaleX(-1); }
}
.hwa-bat {
  position: absolute;
  width: calc(3.4vw - var(--i) * 0.2vw);
  height: calc(1.7vw - var(--i) * 0.1vw);
  left: calc(var(--i) * 3.4vw);
  top: calc(var(--y, 0) * 1vh);
}
.hwa-bat svg {
  transform-origin: 50% 60%;
}
.hwa-bats.is-on .hwa-bat svg {
  animation: hwa-flap 0.26s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.07s);
}
@keyframes hwa-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.35); }
}

/* Spinne seilt sich am rechten Rand ab. */
.hwa-spider {
  position: absolute;
  right: 7vw;
  top: 0;
  width: 6vh;
  height: 6vh;
  transform: translateY(-8vh);
}
.hwa-spider.is-on {
  animation: hwa-drop 4200ms cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
.hwa-spider__thread {
  position: absolute;
  left: calc(50% - 1px);
  bottom: 70%;
  width: 2px;
  height: 60vh;
  background: rgb(244 232 193 / 0.9);
}
.hwa-spider__body {
  position: absolute;
  inset: 0;
}
.hwa-spider.is-on .hwa-spider__body {
  animation: hwa-wiggle 0.5s ease-in-out infinite alternate;
}
@keyframes hwa-drop {
  0% { transform: translateY(-8vh); }
  30% { transform: translateY(40vh); }
  36% { transform: translateY(37vh); }
  42% { transform: translateY(40vh); }
  75% { transform: translateY(40vh); }
  100% { transform: translateY(-8vh); }
}
@keyframes hwa-wiggle {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}

/* Endstand: Geister tanzen um das Podest. */
.hwa-dance {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hwa-dance.is-on {
  animation: hwa-show 10000ms ease both;
}
@keyframes hwa-show {
  0% { opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
.hwa-dancer {
  position: absolute;
  width: 12vh;
  height: 16vh;
  margin: -8vh 0 0 -6vh;
}
.hwa-dancer__body {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
.hwa-dance.is-on .hwa-dancer {
  animation: hwa-hop 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.27s);
}
.hwa-dance.is-on .hwa-dancer__body {
  animation: hwa-spin 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.55s);
}
@keyframes hwa-hop {
  from { transform: translate(-1.5vw, 1.5vh); }
  to { transform: translate(1.5vw, -3vh); }
}
@keyframes hwa-spin {
  0%, 100% { transform: rotate(-25deg) scaleX(1); }
  50% { transform: rotate(14deg) scaleX(-1); }
}

/* Fledermaus-Feuerwerk: Stöße strahlen aus und verglühen. */
.hwa-fireworks {
  position: absolute;
  inset: 0;
}
.hwa-burst {
  position: absolute;
  width: 0;
  height: 0;
}
.hwa-spark {
  position: absolute;
  left: -2.5vw;
  top: -1.25vw;
  width: 5vw;
  height: 2.5vw;
  opacity: 0;
}
.hwa-fireworks.is-on .hwa-spark {
  animation: hwa-burst 1800ms cubic-bezier(0.15, 0.7, 0.3, 1) var(--delay, 0ms) both;
}
.hwa-burst:nth-child(odd) .hwa-spark svg path { fill: #c4521a; }
.hwa-burst:nth-child(even) .hwa-spark svg path { fill: #4a3b63; }
@keyframes hwa-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(0.2); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* Pause: Kerze brennt über die Dauer der Pause herunter (Wachs schrumpft, Flamme sinkt mit). */
.hwa-candle {
  --h: 20vh;
  position: absolute;
  left: 3vw;
  bottom: 13vh;
  width: 4.6vh;
  height: calc(var(--h) + 5vh);
}
.hwa-candle__wax {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1vh;
  height: var(--h);
  box-sizing: border-box;
  border: 0.45vh solid #2b2430;
  border-radius: 0.8vh 0.8vh 0.4vh 0.4vh;
  background: linear-gradient(to right, #efe4cf, #fbf6ea 45%, #ddd0b6);
  transform-origin: 50% 100%;
  animation: hwa-burn var(--burn, 600000ms) var(--burn-at, 0ms) linear both;
}
.hwa-candle__plate {
  position: absolute;
  left: -1.4vh;
  right: -1.4vh;
  bottom: 0;
  height: 1.4vh;
  border: 0.45vh solid #2b2430;
  border-radius: 50%;
  background: #6f5b8f;
  box-sizing: border-box;
}
.hwa-candle__flame {
  position: absolute;
  left: 0.6vh;
  right: 0.6vh;
  bottom: calc(var(--h) + 0.6vh);
  height: 4.6vh;
  animation: hwa-sink var(--burn, 600000ms) var(--burn-at, 0ms) linear both;
}
.hwa-candle__flame svg {
  transform-origin: 50% 90%;
  animation: hwa-candle-flicker 0.9s ease-in-out infinite alternate;
}
@keyframes hwa-burn {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.12); }
}
@keyframes hwa-sink {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--h) * 0.88)); }
}
@keyframes hwa-candle-flicker {
  0% { transform: scale(1, 1) rotate(-3deg); opacity: 0.95; }
  50% { transform: scale(0.92, 1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1.04, 0.94) rotate(-1deg); opacity: 0.9; }
}

/* ================================================================================================================================ */
/* Halloween: Schreckmomente (B4) – selten, nur in ruhigen Phasen (Planer: themeAnim/kit/scarePlan.js). Kein Rot, Blitze ≤ 3 je Sekunde.  */
/* ================================================================================================================================ */

/* Totenkopf: zwei Blitze (0 und 520 ms), beim zweiten stehen Totenköpfe in den Fenstern und ein großer Schatten auf dem Spukhaus. */
.hwa-scare-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(to bottom, rgb(250 248 255 / 0.95), rgb(236 230 252 / 0.6) 55%, rgb(236 230 252 / 0.2));
}
.hwa-scare-flash.is-on {
  animation: hwa-scare-flash 3200ms linear both;
}
@keyframes hwa-scare-flash {
  0% { opacity: 0; }
  1.5% { opacity: 0.6; }
  5% { opacity: 0; }
  16.25% { opacity: 0; }
  17.75% { opacity: 0.5; }
  24% { opacity: 0; }
  100% { opacity: 0; }
}
.hwa-skull {
  opacity: 0;
}
.hwa-skull.is-on {
  animation: hwa-skull 3200ms ease-out both;
}
@keyframes hwa-skull {
  0% { opacity: 0; }
  16% { opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}
.hwa-skull__eye {
  fill: #e6ff8a;
}
.hwa-skull__shade {
  opacity: 0.42;
}
.hwa-skull__shade > path:first-child {
  fill: #1d1724;
}
.hwa-skull.is-on .hwa-skull__shade {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: hwa-skull-lunge 3200ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes hwa-skull-lunge {
  0%, 16% { scale: 0.86; }
  30% { scale: 1.04; }
  72% { scale: 1; }
  100% { scale: 1.08; }
}

/* Leuchtende Augen im Dunkel: Ränder dunkeln ab (Mitte frei), Augenpaare gehen auf und blinzeln, eine Skeletthand greift aus dem Boden. */
.hwa-dark {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 60% 56% at 50% 45%, rgb(20 12 32 / 0) 40%, rgb(20 12 32 / 0.72) 76%, rgb(12 6 22 / 0.92));
}
.hwa-dark.is-on {
  animation: hwa-dark 4800ms ease-in-out both;
}
@keyframes hwa-dark {
  0% { opacity: 0; }
  14% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
.hwa-eyes {
  position: absolute;
  inset: 0;
}
.hwa-eye {
  position: absolute;
  display: flex;
  gap: calc(var(--s) * 0.55);
  opacity: 0;
}
.hwa-eye i {
  display: block;
  width: var(--s);
  height: calc(var(--s) * 0.62);
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(circle at 50% 55%, #1d1724 0 18%, #f4ff9c 22%, #c8e04a 62%, rgb(200 224 74 / 0) 72%);
  box-shadow: 0 0 calc(var(--s) * 0.6) rgb(215 240 110 / 0.75);
}
.hwa-eye:nth-child(2n) i {
  background: radial-gradient(circle at 50% 55%, #1d1724 0 18%, #ffe8a0 22%, #f2b33d 62%, rgb(242 179 61 / 0) 72%);
  box-shadow: 0 0 calc(var(--s) * 0.6) rgb(242 179 61 / 0.7);
}
.hwa-eyes.is-on .hwa-eye {
  animation: hwa-eye 3000ms ease-in-out var(--delay) both;
}
.hwa-eyes.is-on .hwa-eye i {
  animation: hwa-blink 3000ms ease-in-out var(--delay) both;
}
@keyframes hwa-eye {
  0% { opacity: 0; }
  8% { opacity: 1; }
  55% { opacity: 1; }
  70% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hwa-blink {
  0%, 30% { transform: scaleY(1); }
  33% { transform: scaleY(0.1); }
  36%, 100% { transform: scaleY(1); }
}
.hwa-hand {
  position: absolute;
  left: 12vw;
  bottom: -3vh;
  width: 15vh;
  height: 26vh;
  transform: translateY(100%);
  transform-origin: 50% 100%;
}
.hwa-hand.is-on {
  animation: hwa-hand 4800ms cubic-bezier(0.3, 0.8, 0.3, 1) both;
}
@keyframes hwa-hand {
  0%, 18% { transform: translateY(100%) rotate(0deg); }
  34% { transform: translateY(0) rotate(-6deg); }
  44% { transform: translateY(2%) rotate(5deg); }
  54% { transform: translateY(0) rotate(-4deg); }
  78% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(100%) rotate(0deg); }
}

/* ================================================================================================================================ */
/* Halloween: Sarg mit Mumie (Grundstimmung, nur Leinwand) und das klapprige Skelett (Schreck „skeleton“)                             */
/* ================================================================================================================================ */

/* Sarg links unten (Kulisse-Koordinaten, im SVG der Ebene). Ruhig geschlossen; in ruhigen Phasen alle 3–5 min (4600 ms): der Deckel knarrt auf
   (Scharnier links), die Mumie taucht auf, wiegt den Kopf, die Hand greift über den Rand, dann taucht sie ab und der Deckel schließt. */
.hwa-coffin__mummy {
  transform: translateY(210px);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hwa-coffin__lid {
  transform-box: fill-box;
  transform-origin: 0% 50%;
}
.hwa-coffin__hand {
  opacity: 0;
  transform: translateY(34px);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hwa-coffin__eyes { opacity: 0.85; }
.hwa-coffin.is-on .hwa-coffin__lid { animation: hwa-coffin-lid 4600ms ease-in-out both; }
.hwa-coffin.is-on .hwa-coffin__mummy { animation: hwa-coffin-mummy 4600ms ease-in-out both; }
.hwa-coffin.is-on .hwa-coffin__hand { animation: hwa-coffin-hand 4600ms ease-in-out both; }
.hwa-coffin.is-on .hwa-coffin__eyes { animation: hwa-coffin-eyes 900ms ease-in-out infinite alternate; }
@keyframes hwa-coffin-lid {
  0% { transform: scaleX(1) skewY(0deg); }
  4% { transform: scaleX(0.98) skewY(0.8deg); }
  7% { transform: scaleX(1) skewY(0deg); }
  11% { transform: scaleX(0.95) skewY(1.6deg); }
  14% { transform: scaleX(0.99) skewY(0.3deg); }
  26% { transform: scaleX(0.16) skewY(-9deg); }
  76% { transform: scaleX(0.16) skewY(-9deg); }
  80% { transform: scaleX(0.24) skewY(-7deg); }
  94% { transform: scaleX(1) skewY(0deg); }
  96.5% { transform: scaleX(0.985) skewY(0.4deg); }
  100% { transform: scaleX(1) skewY(0deg); }
}
@keyframes hwa-coffin-mummy {
  0%, 18% { transform: translateY(210px) rotate(0deg); }
  31% { transform: translateY(-5px) rotate(0deg); }
  35% { transform: translateY(3px) rotate(-3deg); }
  44% { transform: translateY(0) rotate(5deg); }
  54% { transform: translateY(0) rotate(-5deg); }
  64% { transform: translateY(0) rotate(3deg); }
  70% { transform: translateY(0) rotate(0deg); }
  80%, 100% { transform: translateY(210px) rotate(0deg); }
}
@keyframes hwa-coffin-hand {
  0%, 30% { opacity: 0; transform: translateY(34px) rotate(0deg); }
  36% { opacity: 1; transform: translateY(0) rotate(0deg); }
  44% { transform: translateY(0) rotate(-10deg); }
  52% { transform: translateY(0) rotate(8deg); }
  60% { transform: translateY(0) rotate(-8deg); }
  68% { opacity: 1; transform: translateY(0) rotate(0deg); }
  74%, 100% { opacity: 0; transform: translateY(34px) rotate(0deg); }
}
@keyframes hwa-coffin-eyes {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* Klappriges Skelett: Länge 5700 ms quer durch das untere Drittel (unter 70 % der Höhe, die Mitte bleibt frei). Zwei Schritt-Abschnitte
   à 2 Zyklen (1200 ms), dazwischen 900 ms Halt: Der Kopf dreht sich zum Publikum, der Kiefer klappert, ein Arm winkt. Kein Blitz. */
.hwa-skel {
  position: absolute;
  left: 0;
  bottom: 3vh;
  height: 25vh;
  width: 15vh;
  will-change: transform;
}
.hwa-skel__walk {
  display: block;
  width: 100%;
  height: 100%;
}
.pq-themeanim .hwa-skel svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hwa-skel--rtl svg { transform: scaleX(-1); }
.hwa-skel.is-on { animation: hwa-skel-travel 5700ms linear both; }
.hwa-skel--rtl.is-on { animation-name: hwa-skel-travel-rtl; }
@keyframes hwa-skel-travel {
  0% { transform: translateX(calc(-100% - 2vw)); }
  42% { transform: translateX(46vw); }
  58% { transform: translateX(46vw); }
  100% { transform: translateX(calc(100vw + 2vw)); }
}
@keyframes hwa-skel-travel-rtl {
  0% { transform: translateX(calc(100vw + 2vw)); }
  42% { transform: translateX(40vw); }
  58% { transform: translateX(40vw); }
  100% { transform: translateX(calc(-100% - 2vw)); }
}
.hwa-skel__bob,
.hwa-skel__head,
.hwa-skel__jaw,
.hwa-skel__pupils,
.hwa-skel__arm,
.hwa-skel__fore,
.hwa-skel__leg,
.hwa-skel__shin {
  transform-box: view-box;
}
.hwa-skel__bob { transform-origin: 60px 200px; }
.hwa-skel__head { transform-origin: 60px 56px; }
.hwa-skel__jaw { transform-origin: 60px 52px; }
.hwa-skel__pupils { transform-origin: 60px 34px; }
.hwa-skel__arm--l { transform-origin: 41px 77px; }
.hwa-skel__arm--r { transform-origin: 79px 77px; }
.hwa-skel__arm--l .hwa-skel__fore { transform-origin: 31px 104px; }
.hwa-skel__arm--r .hwa-skel__fore { transform-origin: 89px 104px; }
.hwa-skel__leg--l { transform-origin: 51px 130px; }
.hwa-skel__leg--r { transform-origin: 69px 130px; }
.hwa-skel__leg--l .hwa-skel__shin { transform-origin: 49px 161px; }
.hwa-skel__leg--r .hwa-skel__shin { transform-origin: 71px 161px; }
.hwa-skel.is-on .hwa-skel__bob { animation: hwa-sk-bob 600ms ease-in-out infinite; }
.hwa-skel.is-on .hwa-skel__jaw { animation: hwa-sk-jaw 280ms ease-in-out infinite alternate; }
.hwa-skel.is-on .hwa-skel__head { animation: hwa-sk-head 5700ms ease-in-out both; }
.hwa-skel.is-on .hwa-skel__pupils { animation: hwa-sk-pupils 5700ms ease-in-out both; }
.hwa-skel.is-on .hwa-skel__leg--l { animation: hwa-sk-legA 1200ms ease-in-out 0ms 2, hwa-sk-legA 1200ms ease-in-out 3300ms 2; }
.hwa-skel.is-on .hwa-skel__leg--r { animation: hwa-sk-legB 1200ms ease-in-out 0ms 2, hwa-sk-legB 1200ms ease-in-out 3300ms 2; }
.hwa-skel.is-on .hwa-skel__leg--l .hwa-skel__shin { animation: hwa-sk-shinA 1200ms ease-in-out 0ms 2, hwa-sk-shinA 1200ms ease-in-out 3300ms 2; }
.hwa-skel.is-on .hwa-skel__leg--r .hwa-skel__shin { animation: hwa-sk-shinB 1200ms ease-in-out 0ms 2, hwa-sk-shinB 1200ms ease-in-out 3300ms 2; }
.hwa-skel.is-on .hwa-skel__arm--l { animation: hwa-sk-legB 1200ms ease-in-out 0ms 2, hwa-sk-legB 1200ms ease-in-out 3300ms 2; }
.hwa-skel.is-on .hwa-skel__arm--r { animation: hwa-sk-legA 1200ms ease-in-out 0ms 2, hwa-sk-wave 900ms ease-in-out 2400ms 1, hwa-sk-legA 1200ms ease-in-out 3300ms 2; }
.hwa-skel.is-on .hwa-skel__fore { animation: hwa-sk-elbow 600ms ease-in-out infinite alternate; }
.hwa-skel.is-on .hwa-skel__arm--r .hwa-skel__fore { animation-name: hwa-sk-elbow-r; }
@keyframes hwa-sk-bob {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50% { transform: translateY(-4px) rotate(1.6deg); }
}
@keyframes hwa-sk-jaw {
  0% { transform: translateY(0); }
  100% { transform: translateY(5px) rotate(2deg); }
}
@keyframes hwa-sk-head {
  0%, 40% { transform: rotate(7deg); }
  44% { transform: rotate(-4deg); }
  50% { transform: rotate(0deg) translateY(-1px); }
  56% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(7deg); }
}
@keyframes hwa-sk-pupils {
  0%, 40% { transform: translateX(3.6px); }
  44%, 56% { transform: translateX(0) scale(1.5); }
  60%, 100% { transform: translateX(3.6px); }
}
@keyframes hwa-sk-legA {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(24deg); }
  75% { transform: rotate(-24deg); }
}
@keyframes hwa-sk-legB {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-24deg); }
  75% { transform: rotate(24deg); }
}
@keyframes hwa-sk-shinA {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  75% { transform: rotate(-34deg); }
}
@keyframes hwa-sk-shinB {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-34deg); }
  75% { transform: rotate(4deg); }
}
@keyframes hwa-sk-wave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-150deg); }
  35% { transform: rotate(-120deg); }
  55% { transform: rotate(-150deg); }
  75% { transform: rotate(-120deg); }
  90% { transform: rotate(-10deg); }
}
@keyframes hwa-sk-elbow-r {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(-26deg); }
}
@keyframes hwa-sk-elbow {
  0% { transform: rotate(8deg); }
  100% { transform: rotate(26deg); }
}

/* ================================================================================================================================ */
/* Halloween auf den Handys (C1–C3; frontend/js/quizStage/themeAnim/phone.js)                                                         */
/* ================================================================================================================================ */

/* Akzentstreifen: Spinnennetz in der linken oberen Ecke des Teamrahmens, der Kürbis rückt daneben. */
.pq-frame-accent--hw {
  position: relative;
  overflow: hidden;
  padding-left: 32px;
}
.pq-frame-web {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  color: rgb(255 255 255 / 0.82);
  pointer-events: none;
}
.pq-frame-web svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fledermaus: flattert einmal quer durch den Streifen (nur Kopfbereich), dann wieder versteckt. */
.pq-frame-bat {
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  height: 14px;
  pointer-events: none;
}
.pq-frame-bat[hidden] {
  display: none;
}
.pq-frame-bat svg {
  display: block;
  width: 28px;
  height: 14px;
  margin-left: -28px;
  transform-origin: 50% 60%;
}
.pq-frame-bat.is-on {
  animation: pq-bat-cross 2600ms ease-in-out both;
}
.pq-frame-bat--rtl.is-on {
  animation-name: pq-bat-cross-rtl;
}
.pq-frame-bat--rtl svg {
  scale: -1 1;
}
.pq-frame-bat.is-on svg {
  animation: hwa-flap 0.22s ease-in-out infinite alternate;
}
@keyframes pq-bat-cross {
  0% { transform: translate(0, 2px); }
  30% { transform: translate(calc(30% + 28px), -2px); }
  60% { transform: translate(calc(62% + 28px), 3px); }
  100% { transform: translate(calc(100% + 28px), -1px); }
}
@keyframes pq-bat-cross-rtl {
  0% { transform: translate(calc(100% + 28px), 2px); }
  40% { transform: translate(calc(60% + 28px), -2px); }
  70% { transform: translate(calc(30% + 28px), 3px); }
  100% { transform: translate(0, -1px); }
}
@media (prefers-reduced-motion: reduce) {
  .pq-frame-bat { display: none !important; }
}
@media (prefers-contrast: more) {
  .pq-frame-bat,
  .pq-frame-web { display: none !important; }
  .pq-frame-accent--hw { padding-left: 14px; }
}

/* Mobiles Pubquiz: Ebene im Teamrahmen, über dessen Fläche und hinter dem Inhalt (Stapelkontext des Rahmens). */
.pq-frame--themeanim {
  position: relative;
  isolation: isolate;
}
.pq-themeanim--mobile {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* Antwortzeit: alles steht still (Spec C1). */
.pq-themeanim--mobile[data-phase="question"],
.pq-themeanim--mobile[data-phase="question"] * {
  animation-play-state: paused !important;
}
/* Nebel ohne Kulisse darunter: violett getönt statt weiß, flacher. */
.pq-themeanim--mobile .hwa-fog {
  height: 15vh;
  opacity: 0.8;
  background:
    radial-gradient(ellipse 30vw 6vh at 10% 70%, rgb(124 92 176 / 0.42), transparent 70%),
    radial-gradient(ellipse 36vw 7vh at 32% 62%, rgb(110 84 160 / 0.36), transparent 70%),
    radial-gradient(ellipse 30vw 6vh at 56% 74%, rgb(124 92 176 / 0.42), transparent 70%),
    radial-gradient(ellipse 36vw 7vh at 78% 64%, rgb(110 84 160 / 0.36), transparent 70%),
    radial-gradient(ellipse 30vw 6vh at 96% 70%, rgb(124 92 176 / 0.42), transparent 70%);
}
.pq-themeanim--mobile .hwa-fog--b {
  height: 11vh;
  opacity: 0.45;
}
/* Schreck: nur die Ränder dunkeln ab, oben bleibt die Frage lesbar (die Ebene liegt hinter dem Text). */
.pq-themeanim--mobile .hwa-dark {
  background: radial-gradient(ellipse 85% 75% at 50% 32%, rgb(20 12 32 / 0) 52%, rgb(20 12 32 / 0.55) 82%, rgb(12 6 22 / 0.85));
}
.pq-themeanim--mobile.is-pause .hwa-fog--a,
.pq-themeanim--mobile.is-pause .hwa-fog--b { opacity: 0.9; }
.pq-themeanim--mobile .hwa-ghost {
  width: 7vh;
  height: 9vh;
}
.pq-themeanim--mobile .hwa-dancer {
  width: 8vh;
  height: 11vh;
  margin: -5.5vh 0 0 -4vh;
}
/* Zwei Kürbislaternen in den unteren Ecken, ihr Licht flackert; bei der Auflösung in der Farbe der richtigen Antwort. */
.hwm-pumpkins {
  position: absolute;
  inset: 0;
  --hw-glow: #ffb347;
  transition: --hw-glow 600ms ease-out;
}
.hwm-pumpkin {
  position: absolute;
  bottom: 8px;
  width: 52px;
  height: 46px;
}
.hwm-pumpkin--l { left: 8px; }
.hwm-pumpkin--r { right: 8px; width: 44px; height: 39px; }
.hwm-pumpkin > svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.hwm-glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hw-glow) 75%, transparent) 0, color-mix(in srgb, var(--hw-glow) 25%, transparent) 40%, transparent 68%);
  opacity: 0.55;
  animation: hwa-flicker 3.1s linear infinite;
}
.hwm-pumpkin--r .hwm-glow {
  animation-duration: 3.7s;
  animation-delay: -1.3s;
}
.hwm-pumpkins.is-reveal .hwm-glow {
  animation: hwa-reveal 5200ms ease-out both;
}
.hwm-pumpkins.is-reveal .hwm-face {
  fill: var(--hw-glow);
}