/* Backdrops for the second batch of monsters (and Human). Same layering as fx.css. */

/* shared: candle flames (dybbuk, witch) */
.candle {
  bottom: 0; left: var(--x); width: 16px; height: var(--h);
  background: linear-gradient(90deg, #d9cdb0, #f4ecd8 45%, #bfb08e); border-radius: 3px 3px 0 0;
}
.candle::before {
  content: ''; position: absolute; left: 50%; bottom: 100%; width: 10px; height: 22px; translate: -50% 2px;
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 80%, #fff6c9, #ffb53c 45%, rgba(255, 90, 0, 0) 75%);
  transform-origin: 50% 100%; animation: flick-flame var(--d) var(--delay) ease-in-out infinite alternate;
}
.candle::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 90px; height: 90px; translate: -50% 50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 180, 60, .25), transparent 70%); }

/* screen-wide jolts */
html.wail .shell { animation: wail 1.1s ease-in-out; }
@keyframes wail { 0%, 100% { transform: none; filter: none; } 20% { transform: scale(1.01, .99); filter: blur(1px); } 40% { transform: scale(.99, 1.015) translateX(2px); } 60% { transform: scale(1.01, .99) translateX(-2px); filter: blur(.6px); } }
html.missing .shell { animation: missing .45s steps(1); }
@keyframes missing { 0% { opacity: 0; } 40% { opacity: 1; filter: brightness(3) saturate(0); } 100% { opacity: 1; filter: none; } }

/* ---------- slasher ---------- */
.fx-slasher .street-sky { inset: 0; background: radial-gradient(ellipse at 70% 100%, rgba(60, 90, 140, .25), transparent 60%); }
.fx-slasher .streetlight { right: 18vw; bottom: 0; width: 8px; height: 62vh; background: #050608; }
.fx-slasher .streetlight::before { content: ''; position: absolute; left: -26px; top: -6px; width: 40px; height: 12px; border-radius: 6px; background: #050608; }
.fx-slasher .streetlight::after {
  content: ''; position: absolute; left: -200px; top: 6px; width: 380px; height: 62vh;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 220, 150, .22), transparent 70%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  animation: lamp 6s infinite;
}
@keyframes lamp { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .2; } 94% { opacity: 1; } 95% { opacity: .3; } }
.fx-slasher .stalker { right: calc(18vw - 40px); bottom: 3vh; width: 9vmin; height: 24vmin; color: #000; animation: there 13s infinite; transition: scale 3s var(--ease); transform-origin: 50% 100%; }
.stage-3 .fx-slasher .stalker { scale: 1.6; right: 40vw; }
.fx-slasher .stalker .blade { fill: #c9ccd1; }
@keyframes there { 0%, 46%, 54%, 100% { opacity: 1; } 48%, 52% { opacity: 0; } }
.fx-slasher .fence { left: 0; right: 0; bottom: 0; height: 13vh; color: #020203; }
.fx-slasher .slash {
  left: -10vw; top: var(--y); width: 120vw; height: 3px; rotate: var(--r); background: linear-gradient(90deg, transparent, #fff 40%, #d10f1f 60%, transparent);
  box-shadow: 0 0 12px #d10f1f; transform-origin: 0 50%; animation: slash .5s ease-out forwards;
}
@keyframes slash { from { transform: scaleX(0); opacity: 1; } 60% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }

/* ---------- doppelganger ---------- */
.fx-doppel .mirror {
  top: 18vh; width: 22vmin; height: 34vmin; overflow: hidden; border: 6px solid #c9b27a; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, #ffffff, #d9e2ec 70%); box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.fx-doppel .mirror-left { left: 4vw; }
.fx-doppel .mirror-right { right: 4vw; }
.fx-doppel .reflection { position: absolute; left: 25%; bottom: -8%; width: 50%; height: 90%; color: #1f1a2e; opacity: .55; animation: sway-same 5s ease-in-out infinite; }
.fx-doppel .mirror-right .reflection { animation: sway-late 5s ease-in-out infinite; animation-delay: .35s; }
@keyframes sway-same { 0%, 100% { transform: translateX(-4px) rotate(-1deg); } 50% { transform: translateX(4px) rotate(1deg); } }
@keyframes sway-late { 0%, 100% { transform: translateX(-4px) rotate(-1deg); } 50% { transform: translateX(4px) rotate(1deg); } 70% { opacity: .55; } 72% { opacity: 0; } 74% { opacity: .55; } }

/* ---------- dybbuk ---------- */
.fx-dybbuk .candle-glow { inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(232, 164, 60, .28), transparent 60%); }
.fx-dybbuk .souls { left: 50%; bottom: 8vh; width: 18vmin; height: 46vmin; translate: -50% 0; }
.fx-dybbuk .souls svg { position: absolute; inset: 0; color: #000; opacity: .7; }
.fx-dybbuk .souls svg:last-child { color: #3b2a14; opacity: .5; animation: apart 7s ease-in-out infinite; }
@keyframes apart { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(14px) rotate(2deg); } }
.fx-dybbuk .wisp { bottom: 8vh; left: var(--x); width: 60px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(241, 231, 214, .14), transparent 70%); filter: blur(6px); animation: wisp-up var(--d) var(--delay) linear infinite; }
@keyframes wisp-up { from { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } to { transform: translate(30px, -70vh) scale(1.6); opacity: 0; } }

/* ---------- banshee ---------- */
.fx-banshee .moor-sky { inset: 0; background: radial-gradient(ellipse at 60% 20%, rgba(184, 224, 220, .14), transparent 55%); }
.fx-banshee .moor { left: 0; right: 0; bottom: 0; height: 36vh; }
.fx-banshee .moor .far { fill: #16211f; }
.fx-banshee .moor .near, .fx-banshee .moor .stones { fill: #060a0a; }
.fx-banshee .keener { left: 62vw; bottom: 25vh; width: 4vmin; height: 11vmin; color: #dfeeed; opacity: .55; filter: blur(.6px); }
.fx-banshee .wail-ring { left: calc(62vw + 2vmin); bottom: calc(25vh + 9vmin); width: 10vmin; height: 10vmin; translate: -50% 50%; border: 2px solid rgba(184, 224, 220, .5); border-radius: 50%; opacity: 0; animation: ring 4.8s var(--delay) ease-out infinite; }
@keyframes ring { 0% { transform: scale(.2); opacity: .8; } 100% { transform: scale(9); opacity: 0; } }
.fx-banshee .mist { top: var(--y); left: 0; width: 70vw; height: 24vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(200, 225, 222, .22), transparent 70%); filter: blur(10px); scale: var(--s); animation: mist var(--d) var(--delay) linear infinite; }

/* ---------- sasquatch ---------- */
.fx-sasquatch .pines { left: 0; right: 0; bottom: 0; height: 46vh; }
.fx-sasquatch .pines .back { fill: #0f2414; }
.fx-sasquatch .pines .front { fill: #020703; }
.fx-sasquatch .squatch { bottom: 6vh; left: 0; width: 16vmin; height: 24vmin; color: #030803; filter: blur(1.5px); animation: squatch var(--d) linear infinite; }
@keyframes squatch { 0% { translate: -20vw 0; } 60% { translate: 70vw 0; } 62%, 100% { translate: 120vw 0; } }
.fx-sasquatch .nv { inset: -50%; background-image: var(--noise); background-size: 200px; opacity: .1; mix-blend-mode: screen; animation: grain .5s steps(4) infinite; }
.fx-sasquatch .osd { left: 4vw; top: 74px; right: 4vw; bottom: 4vh; color: #c6f7b8; font-family: 'VT323', monospace; font-size: 26px; text-shadow: 0 0 6px rgba(155, 227, 127, .6); }
.fx-sasquatch .osd-rec { position: absolute; left: 0; top: 0; color: #ff4a3d; animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0; } }
.fx-sasquatch .osd-cam { position: absolute; right: 0; top: 0; }
.fx-sasquatch .osd-time { position: absolute; left: 0; bottom: 0; white-space: pre; }

/* ---------- mothman ---------- */
.fx-mothman .moth-sky { inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(80, 90, 140, .25), transparent 60%); }
.fx-mothman .red-eyes { left: 50%; top: 16vh; width: 16vmin; height: 4vmin; translate: -50% 0; transition: scale 3s; }
.stage-3 .fx-mothman .red-eyes { scale: 1.7; }
.fx-mothman .red-eyes i { position: absolute; top: 0; width: 34%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #ff8a8a, #ff1a1a 50%, rgba(255, 0, 0, 0) 72%); box-shadow: 0 0 30px 10px rgba(255, 30, 30, .35); animation: glow-eye 7s infinite; }
.fx-mothman .red-eyes i:first-child { left: 0; }
.fx-mothman .red-eyes i:last-child { right: 0; }
@keyframes glow-eye { 0%, 100% { opacity: .9; } 46% { opacity: .9; } 48%, 52% { opacity: 0; } 54% { opacity: .9; } }
.fx-mothman .moth-shadow { left: 0; top: 4vh; width: 70vmin; height: 35vmin; color: #000; opacity: .65; filter: blur(2px); animation: pass var(--d) linear infinite; }
.fx-mothman .moth-shadow .moth-eye { fill: #ff2b2b; }
.fx-mothman .bridge { left: 0; right: 0; bottom: 0; height: 40vh; color: #05060a; }
.fx-mothman .bridge-light { fill: #ff3b3b; animation: rec 2s steps(1) infinite; }
.fx-mothman .moth { left: var(--x); top: var(--y); width: 6px; height: 4px; border-radius: 50%; background: #d8d2c0; opacity: .6; animation: moth var(--d) var(--delay) ease-in-out infinite alternate; }
@keyframes moth { to { transform: translate(var(--dx), var(--dy)); } }

/* ---------- alien parasite ---------- */
.fx-parasite .flesh {
  inset: 0; background: radial-gradient(circle at 30% 40%, rgba(255, 82, 119, .16), transparent 40%), radial-gradient(circle at 75% 70%, rgba(150, 20, 50, .3), transparent 45%);
  animation: beat 1.6s infinite;
}
.fx-parasite .veins { inset: 0; color: rgba(160, 20, 50, .55); }
.stage-3 .fx-parasite .veins { color: rgba(220, 40, 80, .7); }
.fx-parasite .lump {
  left: 0; top: var(--y); width: 90px; height: 60px; border-radius: 50%; scale: var(--s);
  background: radial-gradient(ellipse at 40% 35%, rgba(255, 200, 210, .25), rgba(120, 10, 30, .15) 60%, transparent 70%);
  box-shadow: inset -6px -6px 14px rgba(0, 0, 0, .25); filter: blur(2px); animation: burrow var(--d) var(--delay) ease-in-out infinite;
}
@keyframes burrow { 0% { translate: -10vw 0; } 50% { translate: 50vw 6vh; } 100% { translate: 110vw -4vh; } }

/* ---------- alien ---------- */
.fx-alien .star { left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #e4fbff; animation: twinkle var(--d) var(--delay) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .2; } to { opacity: 1; } }
.fx-alien .saucer { left: 50%; top: 8vh; width: 26vmin; height: 12vmin; translate: -50% 0; color: #0d1d22; animation: hover 4s ease-in-out infinite alternate; }
@keyframes hover { to { transform: translateY(10px) rotate(-1deg); } }
.fx-alien .ufo-lights circle { fill: #7fffd4; animation: rec 1.2s steps(1) infinite; }
.fx-alien .ufo-lights circle:nth-child(2n) { animation-delay: .6s; }
.fx-alien .beam {
  left: 50%; top: calc(8vh + 10vmin); width: 50vmin; height: 90vh; translate: -50% 0;
  background: linear-gradient(rgba(127, 255, 212, .35), rgba(127, 255, 212, .02)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  animation: beam 3s ease-in-out infinite alternate;
}
@keyframes beam { from { opacity: .5; } to { opacity: 1; } }
.fx-alien .taken { left: calc(50% - 2vmin); bottom: 0; width: 4vmin; height: 10vmin; color: #000; opacity: 0; animation: taken var(--d) linear infinite; }
@keyframes taken { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .8; } 80% { opacity: .6; } 100% { transform: translateY(-70vh) rotate(30deg); opacity: 0; } }

/* ---------- alien creature ---------- */
.fx-xeno .ribs {
  inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 14px, rgba(60, 74, 78, .25) 14px 18px, rgba(0, 0, 0, .4) 18px 46px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse at 50% 50%, transparent 30%, #000 85%);
}
.fx-xeno .ooze { top: 0; left: var(--x); width: var(--w); height: 0; border-radius: 0 0 999px 999px; background: linear-gradient(#0a0d0a, #2b3a12); animation: drip var(--d) var(--delay) cubic-bezier(.5, 0, .9, .6) infinite; }
.fx-xeno .egg { bottom: 0; left: var(--x); width: 9vmin; height: 12vmin; color: #1b2318; scale: var(--s); transform-origin: 50% 100%; animation: pulse-egg 3s var(--delay) ease-in-out infinite; }
.fx-xeno .egg .egg-split { stroke: #b8ff2b; opacity: .5; }
@keyframes pulse-egg { 50% { transform: scale(1.04, .97); } }
.fx-xeno .tracker {
  --near: 1; right: 3vw; bottom: 3vh; width: 130px; height: 130px; border: 2px solid rgba(184, 255, 43, .6); border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 255, 43, .08), rgba(0, 0, 0, .6) 70%); overflow: hidden;
}
.fx-xeno .tracker .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(184, 255, 43, .35), transparent 25%); animation: turn 2.2s linear infinite; }
.fx-xeno .tracker .blip { position: absolute; left: 50%; top: calc(50% - var(--near) * 45%); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #b8ff2b; box-shadow: 0 0 8px #b8ff2b; transition: top 1s linear; }
.fx-xeno .tracker .blip.b2 { left: 62%; top: calc(54% - var(--near) * 38%); }
.fx-xeno .tracker .range { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #b8ff2b; font: 700 14px 'Space Mono', monospace; }

/* ---------- giant bat ---------- */
.fx-bat .cave-dark { inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(169, 124, 255, .18), transparent 60%); }
.fx-bat .stalactites { left: 0; right: 0; top: 60px; height: 22vh; color: #030205; }
.fx-bat .flyer { top: var(--y); left: 0; width: 60px; height: 30px; color: #000; scale: var(--s); animation: batfly var(--d) var(--delay) linear infinite; }
.fx-bat .flyer svg, .fx-bat .great-wing svg { transform-origin: 50% 40%; animation: flap .2s ease-in-out infinite alternate; }
.fx-bat .great-wing { top: 20vh; left: 0; width: 110vmin; height: 55vmin; color: #000; opacity: .8; filter: blur(3px); animation: pass var(--d) linear infinite; }
.fx-bat .great-wing svg { animation-duration: .9s; }
.fx-bat .echo { left: 50%; top: 30vh; width: 12vmin; height: 12vmin; translate: -50% -50%; border: 2px solid rgba(169, 124, 255, .35); border-radius: 50%; opacity: 0; animation: ring 3.9s var(--delay) ease-out infinite; }

/* ---------- fishman ---------- */
.fx-fishman .harbor-sky { inset: 0; background: radial-gradient(ellipse at 50% 70%, rgba(127, 209, 185, .14), transparent 60%); }
.fx-fishman .town { left: 0; right: 0; bottom: 22vh; height: 24vh; color: #020606; }
.fx-fishman .town .win { fill: #d8c27a; opacity: .7; }
.fx-fishman .harbor { left: 0; right: 0; bottom: 0; height: 23vh; }
.fx-fishman .wave { position: absolute; left: 0; top: -38px; width: 200%; height: 40px; animation: wave 12s linear infinite; }
.fx-fishman .wave path { fill: #0b2622; }
.fx-fishman .deep { position: absolute; inset: 0; background: linear-gradient(#0b2622, #020707); }
.fx-fishman .fish-eyes { left: var(--x); top: var(--y); width: 18px; height: 5px; opacity: 0; animation: glint 10s var(--delay) infinite; }
.fx-fishman .fish-eyes::before, .fx-fishman .fish-eyes::after { content: ''; position: absolute; top: 0; width: 5px; height: 5px; border-radius: 50%; background: #c7ffe9; box-shadow: 0 0 8px 2px rgba(127, 209, 185, .7); }
.fx-fishman .fish-eyes::before { left: 0; }
.fx-fishman .fish-eyes::after { right: 0; }
.fx-fishman .harbor-fog { left: -10%; right: -10%; bottom: 14vh; height: 26vh; background: radial-gradient(ellipse at 50% 60%, rgba(180, 220, 210, .2), transparent 70%); filter: blur(12px); animation: fogslide 30s linear infinite alternate; }

/* ---------- the creation ---------- */
.fx-creation .storm { inset: 0; background: radial-gradient(ellipse at 50% 0, rgba(140, 160, 190, .18), transparent 60%); transition: background-color .1s; }
.fx-creation.strike .storm { animation: strike .6s ease-out; }
@keyframes strike { 0% { background-color: rgba(220, 230, 255, .5); } 15% { background-color: transparent; } 25% { background-color: rgba(220, 230, 255, .35); } 100% { background-color: transparent; } }
.fx-creation .bolt { top: 0; left: 50%; width: 9vmin; height: 40vh; color: #eef3ff; opacity: 0; filter: drop-shadow(0 0 12px #9fb8ff); }
.fx-creation.strike .bolt { animation: bolt .6s ease-out; }
@keyframes bolt { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
.fx-creation .ice { left: 0; right: 0; bottom: 0; height: 26vh; }
.fx-creation .ice .far { fill: #2a3646; }
.fx-creation .ice .near { fill: #c9d6e4; opacity: .75; }
.fx-creation .letters {
  left: 4vw; right: 4vw; top: 22vh; color: rgba(216, 224, 234, .1); font: italic 400 clamp(20px, 3.4vw, 40px)/1.5 'EB Garamond', serif;
  transform: rotate(-4deg);
}
.fx-creation .letters p { margin: 0 0 .6em; }
.fx-creation .letters p:nth-child(2n) { margin-left: 12vw; }

/* ---------- warg ---------- */
.fx-warg .ember-sky { inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 138, 42, .28), rgba(120, 30, 0, .12) 45%, transparent 70%); }
.fx-warg .ridge { left: 0; right: 0; bottom: 0; height: 44vh; }
.fx-warg .ridge .far { fill: #1c100b; }
.fx-warg .ridge .near { fill: #050303; }
.fx-warg .glint::before, .fx-warg .glint::after { background: #ffb347; box-shadow: 0 0 8px 2px rgba(255, 140, 40, .8); }
.fx-warg .ash { top: -2vh; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #8a7f78; opacity: .7; animation: snow var(--d) var(--delay) linear infinite; }

/* ---------- skeleton ---------- */
.fx-skeleton .crypt { inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(239, 232, 212, .1), transparent 60%); }
.fx-skeleton .ossuary {
  inset: 60px 0 0; display: grid; align-content: start; gap: 4px; overflow: hidden; font-size: 46px; line-height: 1; white-space: nowrap;
  filter: grayscale(1) sepia(.35) brightness(.6); opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, #000 75%); mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, #000 75%);
}
.fx-skeleton .ossuary div:nth-child(2n) { margin-left: -24px; }
.fx-skeleton .ossuary span { display: inline-block; margin-right: 4px; }
.fx-skeleton .ossuary .rattle { animation: rattle 2.4s steps(2) infinite; }
@keyframes rattle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-8deg) translateY(-2px); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.fx-skeleton .bone-dust { top: -2vh; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #efe8d4; opacity: .4; animation: snow var(--d) var(--delay) linear infinite; --drift: 20px; }

/* ---------- harpy ---------- */
.fx-harpy .storm-sky { inset: 0; background: radial-gradient(ellipse at 50% 0, rgba(217, 164, 65, .14), transparent 55%), linear-gradient(transparent 60%, rgba(0, 0, 0, .4)); }
.fx-harpy .cliffs { inset: 0; color: #060505; }
.fx-harpy .circler { left: var(--x); top: var(--y); width: 0; height: 0; animation: orbit var(--d) var(--delay) linear infinite; }
.fx-harpy .circler svg { position: absolute; left: var(--r); top: 0; width: 70px; height: 30px; color: #000; scale: var(--s); }
@keyframes orbit { to { rotate: 360deg; } }
.fx-harpy .feather { top: -4vh; left: var(--x); width: 6px; height: 22px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: linear-gradient(#a39486, #3a3330); opacity: .7; animation: feather var(--d) var(--delay) ease-in-out infinite; }
@keyframes feather { 0% { transform: translate(0, 0) rotate(-30deg); } 50% { transform: translate(calc(var(--drift) * .5), 50vh) rotate(30deg); } 100% { transform: translate(var(--drift), 106vh) rotate(-20deg); } }

/* ---------- gargoyle ---------- */
.fx-gargoyle .rain-sky { inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(160, 170, 180, .12), transparent 60%); }
.fx-gargoyle .cathedral { left: 0; right: 0; bottom: 0; height: 58vh; color: #050608; }
.fx-gargoyle .cathedral .rose { fill: #3a2a12; stroke: #a3501b; stroke-width: 2; }
.fx-gargoyle .cathedral .win { fill: #6b4a1a; }
.fx-gargoyle .perch { width: 12vmin; height: 10vmin; color: #0d0e10; }
.fx-gargoyle .perch-l { left: 3vw; top: 24vh; }
.fx-gargoyle .perch-r { right: 3vw; top: 30vh; transform: scaleX(-1); }
.fx-gargoyle .garg-eye { fill: #ff8a2a; opacity: 0; animation: wake 9s infinite; }
.fx-gargoyle .perch-r .garg-eye { animation-delay: 4s; }
@keyframes wake { 0%, 80%, 100% { opacity: 0; } 84%, 94% { opacity: 1; } }
.fx-gargoyle .rain { top: -10vh; left: var(--x); width: 1px; height: var(--h); background: linear-gradient(transparent, rgba(200, 210, 220, .4)); animation: rain var(--d) var(--delay) linear infinite; }
@keyframes rain { to { transform: translate(-30px, 120vh); } }

/* ---------- witch ---------- */
.fx-witch .witch-glow { inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(140, 255, 90, .18), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(120, 60, 200, .2), transparent 50%); }
.fx-witch .charm { top: 0; left: var(--x); width: 44px; height: 80px; margin-top: calc(70px + var(--y)); color: #1a1224; transform-origin: 50% -60px; animation: swing var(--d) var(--delay) ease-in-out infinite alternate; }
.fx-witch .charm::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 120px; background: #1a1224; }
.fx-witch .chalk-circle { left: 50%; bottom: 2vh; width: 60vmin; height: 12vmin; translate: -50% 0; border: 2px solid rgba(240, 231, 251, .25); border-radius: 50%; box-shadow: 0 0 20px rgba(140, 255, 90, .15); }
.fx-witch .brew { bottom: 4vh; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(140, 255, 90, .6); animation: bubble var(--d) var(--delay) linear infinite; --drift: 10px; }

/* ---------- nightmare ---------- */
.fx-nightmare .wallpaper {
  inset: -5%; opacity: .35;
  background: repeating-linear-gradient(90deg, rgba(255, 92, 207, .12) 0 22px, transparent 22px 60px), repeating-linear-gradient(90deg, rgba(120, 60, 180, .2) 0 2px, transparent 2px 60px);
  animation: melt 9s ease-in-out infinite alternate;
}
@keyframes melt { 0% { transform: skewX(0) scaleY(1); filter: blur(0); } 50% { transform: skewX(4deg) scaleY(1.04); filter: blur(1px); } 100% { transform: skewX(-3deg) scaleY(.98); } }
.fx-nightmare .doorway { right: 8vw; bottom: 0; width: 20vmin; height: 60vh; background: #000; box-shadow: 0 0 0 10px #1a1024; }
.fx-nightmare .tall { position: absolute; left: 50%; bottom: 0; width: 70%; height: 92%; translate: -50% 0; color: #2a1438; transform-origin: 50% 100%; animation: lean 11s ease-in-out infinite; }
@keyframes lean { 0%, 70%, 100% { transform: rotate(0); } 80%, 90% { transform: rotate(-6deg) translateX(-20%); } }
.fx-nightmare .lids i { position: fixed; left: 0; right: 0; height: 0; background: #000; }
.fx-nightmare .lid-top { top: 0; }
.fx-nightmare .lid-bottom { bottom: 0; }
.fx-nightmare .lids.blink i { animation: lid 1.3s ease-in-out; }
@keyframes lid { 0%, 100% { height: 0; } 40%, 60% { height: 51vh; } }

/* ---------- human ---------- */
.fx-human .office { inset: 0; background: linear-gradient(#e4e2dc, #cfccc4); }
.fx-human .tube { top: 70px; left: var(--x); width: 22vw; height: 10px; border-radius: 4px; background: #fbfbf6; box-shadow: 0 0 30px 10px rgba(255, 255, 240, .5); }
.fx-human .tube.flicker { animation: lamp 4s infinite; }
.fx-human .crowd { left: 0; right: 0; bottom: 0; height: 22vh; color: #9a978f; opacity: .7; }