/* Capas temáticas por tipo de criatura, detrás del grito de combate (EncounterFX en fx.js). */
.enc-theme {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --f1: #ffb347;
  --f2: #e2412b;
}
.enc-theme svg {
  position: absolute;
}

/* Niebla, partículas que suben y círculo de runas */
.fx-fog {
  position: absolute;
  inset: auto 0 0;
  height: 70%;
  background: radial-gradient(ellipse at 50% 100%, #6fd39c66 0%, #2a6b4a33 45%, transparent 75%);
  animation: fx-fog 2.6s ease-out both;
}
.theme-cult .fx-fog {
  background: radial-gradient(ellipse at 50% 100%, #b0303066 0%, #4a101033 45%, transparent 75%);
}
.fx-rise {
  position: absolute;
  bottom: -10%;
  font-size: calc(1.6rem * var(--s));
  color: #d9f2df;
  text-shadow: 0 0 12px #6fd39c;
  opacity: 0;
  animation: fx-rise 2.4s var(--d) ease-out forwards;
}
.fx-circle {
  left: 50%;
  top: 50%;
  width: min(80vw, 520px);
  height: min(80vw, 520px);
  translate: -50% -50%;
  fill: none;
  stroke: #a98bff;
  stroke-width: 1.5;
  opacity: 0;
  filter: drop-shadow(0 0 8px #a98bff);
  animation:
    fx-appear 0.6s ease-out forwards,
    fx-spin 9s linear infinite;
}
.fx-circle .dash {
  stroke-dasharray: 4 6;
}
.fx-circle text {
  fill: #a98bff;
  stroke: none;
  font-size: 10px;
  text-anchor: middle;
  letter-spacing: 2px;
}
.theme-necro .fx-circle {
  stroke: #6fd39c;
  filter: drop-shadow(0 0 8px #6fd39c);
}
.theme-necro .fx-circle text {
  fill: #6fd39c;
}
.theme-cult .fx-circle {
  stroke: #e05050;
  filter: drop-shadow(0 0 8px #e05050);
}
.theme-cult .fx-circle text {
  fill: #e05050;
}
.fx-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfc0ff;
  box-shadow: 0 0 10px 3px #a98bff;
  opacity: 0;
  animation: fx-twinkle 1.2s var(--d) ease-in-out 2;
}
.fx-spark.fey {
  background: #fff3b0;
  box-shadow: 0 0 10px 3px #8be0a0;
}

/* Llamas (dragones e infernales): lenguas con punta que titilan, núcleo claro y brasas */
.fx-fire {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
  filter: drop-shadow(0 0 14px var(--f2));
}
.fx-fire .flame {
  fill: url(#fx-fire-g);
  opacity: 0.92;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation:
    fx-flame-up 0.6s var(--d) ease-out forwards,
    fx-flame-lick var(--f) calc(var(--d) + 0.6s) ease-in-out infinite alternate;
}
.fx-fire .flame.core {
  fill: var(--f1);
  opacity: 0.85;
}
.fx-ember {
  position: absolute;
  bottom: 8%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--f1);
  box-shadow: 0 0 8px 2px var(--f2);
  opacity: 0;
  animation: fx-ember 1.8s var(--d) ease-out forwards;
}
.theme-fiend {
  --f1: #ff7a3c;
  --f2: #8a0f0f;
}
.v-ice {
  --f1: #e9fbff;
  --f2: #5fb7e8;
}
.v-lightning {
  --f1: #f5f7ff;
  --f2: #4f6bff;
}
.v-poison {
  --f1: #c9f28a;
  --f2: #2f7d32;
}
.v-acid {
  --f1: #eaff6a;
  --f2: #6a8f00;
}
.fx-bolts {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #f5f7ff;
  filter: drop-shadow(0 0 12px #6f8bff);
  opacity: 0;
  animation: fx-bolt 0.9s 0.3s steps(1) 2;
}
.fx-sigil {
  left: 50%;
  top: 50%;
  width: min(70vw, 420px);
  height: min(70vw, 420px);
  translate: -50% -50%;
  fill: none;
  stroke: #ff5a3c;
  stroke-width: 2;
  filter: drop-shadow(0 0 10px #ff3c1c);
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: fx-draw 1.4s 0.2s ease-out forwards;
}

/* Gigantes: grietas en el piso y dos pisotones */
.fx-cracks {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 45%;
  fill: none;
  stroke: #e0be80;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px #e0be80);
}
.fx-cracks path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: fx-draw 0.5s ease-out forwards;
}
.fx-cracks path:nth-child(n + 4) {
  animation-delay: 0.55s;
}
body.enc-stomp .workspace {
  animation: enc-stomp 1.1s 0.05s;
}

/* Aberraciones: tentáculos y un ojo que se abre */
.fx-tentacles {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #b36bd6;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.8;
}
.fx-tentacles path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transform-origin: center;
  animation:
    fx-draw 0.9s ease-out forwards,
    fx-wiggle 1.2s 0.9s ease-in-out infinite alternate;
}
.fx-eye {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 120px;
  height: 60px;
  translate: -50% 0;
  border-radius: 50%;
  background: #e8d9f2;
  box-shadow: 0 0 30px #b36bd6;
  overflow: hidden;
  transform: scaleY(0);
  animation: fx-eye 0.5s 0.6s ease-out forwards;
}
.fx-eye i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #000 30%, #7a2aa8 32%, #3a0e55 70%);
}

/* Bestias y monstruosidades: zarpazos y rugido */
.fx-claws {
  position: absolute;
  inset: 0;
  transform: rotate(-30deg);
}
.fx-claws i {
  position: absolute;
  left: 10%;
  top: calc(36% + var(--i) * 9%);
  width: 80%;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #fff, #f39995, transparent);
  box-shadow: 0 0 14px #f39995;
  transform: scaleX(0);
  transform-origin: left;
  animation:
    fx-slash 0.22s calc(0.1s + var(--i) * 0.08s) ease-out forwards,
    fx-fadeout 0.8s 1.3s forwards;
}
.fx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  translate: -50% -50%;
  border: 3px solid #f2a65a;
  border-radius: 50%;
  opacity: 0;
  animation: fx-ring 1s var(--d) ease-out forwards;
}
.fx-ring.drum {
  border-color: #e0be80;
}

/* Enjambres */
.fx-bug {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1b1b1b;
  box-shadow: 0 0 2px #c9c9c9;
  animation: fx-swarm 1.6s var(--d) ease-in-out infinite alternate;
}

/* Bandas de guerra (goblins, orcos, kobolds, gnolls): andanada de flechas y tambores */
.fx-arrow {
  position: absolute;
  left: -20%;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c8a46a 30%, #e0be80);
  rotate: var(--r);
  animation: fx-arrow 0.7s var(--d) linear forwards;
}
.fx-arrow::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -4px;
  border: 5px solid transparent;
  border-left: 8px solid #e8e8e8;
}

/* Humanoides: dos filos que se cruzan */
.fx-blades i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70vw, 460px);
  height: 4px;
  translate: -50% -50%;
  background: linear-gradient(90deg, transparent, #f1f1e8, transparent);
  box-shadow: 0 0 12px #f1f1e8;
  transform: rotate(35deg) scaleX(0);
  animation: fx-blade 0.4s 0.1s ease-out forwards;
}
.fx-blades i + i {
  transform: rotate(-35deg) scaleX(0);
  animation-name: fx-blade2;
  animation-delay: 0.25s;
}

/* Arañas: telas desde las esquinas y una araña que baja */
.fx-web {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #e8e8e8aa;
  stroke-width: 1.2;
}
.fx-web path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: fx-draw 1s ease-out forwards;
}
.fx-spider {
  position: absolute;
  left: 72%;
  top: 0;
  width: 2px;
  height: 0;
  background: #e8e8e8aa;
  animation: fx-thread 1.2s 0.4s ease-out forwards;
}
.fx-spider i {
  position: absolute;
  bottom: -14px;
  left: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
  box-shadow:
    0 0 0 2px #444,
    -10px 4px 0 -8px #111,
    10px 4px 0 -8px #111;
}

/* Elementales, constructos, plantas, cienos y celestiales */
.fx-vortex {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 600px);
  height: min(90vw, 600px);
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(#ff7a3c55, #4fc3f755, #8bc34a55, #c8a46a55, #ff7a3c55);
  mask: radial-gradient(circle, transparent 18%, #000 20%, #000 60%, transparent 70%);
  animation:
    fx-appear 0.5s ease-out both,
    fx-spin 1.8s linear infinite;
}
.fx-gear {
  width: min(40vw, 240px);
  height: min(40vw, 240px);
  fill: #8a8f96aa;
  stroke: #c8ccd2;
  stroke-width: 1;
}
.fx-gear circle {
  fill: #0b171c;
}
.fx-gear.g0 {
  left: 8%;
  top: 12%;
  animation: fx-spin 3s linear infinite;
}
.fx-gear.g1 {
  right: 8%;
  bottom: 10%;
  animation: fx-spin 3s linear infinite reverse;
}
.fx-vines {
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #4f9a4a;
  stroke-width: 6;
  stroke-linecap: round;
}
.fx-vines path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: fx-draw 1.3s ease-out forwards;
}
.fx-drip {
  position: absolute;
  top: -5%;
  width: 18px;
  height: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(#7fd36a, #3f8f2c);
  box-shadow: 0 0 10px #7fd36a88;
  animation: fx-drip 1.4s var(--d) ease-in forwards;
}
.fx-rays {
  position: absolute;
  left: 50%;
  top: -30%;
  width: 160%;
  height: 160%;
  translate: -50% 0;
  background: repeating-conic-gradient(from 0deg at 50% 0%, #ffe9a055 0deg 6deg, transparent 6deg 18deg);
  mask: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
  animation:
    fx-appear 0.6s ease-out both,
    fx-sway 3s ease-in-out infinite alternate;
}

@keyframes fx-fog {
  from {
    transform: translateY(40%);
    opacity: 0;
  }
}
@keyframes fx-rise {
  15% {
    opacity: 0.9;
  }
  to {
    transform: translateY(-110vh) rotate(25deg);
    opacity: 0;
  }
}
@keyframes fx-appear {
  from {
    opacity: 0;
    scale: 0.6;
  }
  to {
    opacity: 0.85;
    scale: 1;
  }
}
@keyframes fx-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes fx-twinkle {
  50% {
    opacity: 1;
    scale: 1.6;
  }
}
@keyframes fx-flame-up {
  to {
    transform: scaleY(1);
  }
}
@keyframes fx-flame-lick {
  from {
    transform: scaleY(1) skewX(-3deg);
  }
  to {
    transform: scaleY(0.82) skewX(4deg);
  }
}
@keyframes fx-ember {
  10% {
    opacity: 1;
  }
  to {
    transform: translate(var(--x), -60vh);
    opacity: 0;
  }
}
@keyframes fx-bolt {
  0%,
  30%,
  60% {
    opacity: 0;
  }
  15%,
  45%,
  75% {
    opacity: 1;
  }
}
@keyframes fx-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes enc-stomp {
  0%,
  30%,
  55%,
  100% {
    transform: none;
  }
  8% {
    transform: translateY(10px);
  }
  16% {
    transform: translateY(-4px);
  }
  38% {
    transform: translateY(12px);
  }
  46% {
    transform: translateY(-5px);
  }
}
@keyframes fx-wiggle {
  to {
    transform: rotate(3deg) translateY(-8px);
  }
}
@keyframes fx-eye {
  to {
    transform: scaleY(1);
  }
}
@keyframes fx-slash {
  to {
    transform: scaleX(1);
  }
}
@keyframes fx-fadeout {
  to {
    opacity: 0;
  }
}
@keyframes fx-ring {
  from {
    opacity: 0.9;
  }
  to {
    width: 160vmax;
    height: 160vmax;
    opacity: 0;
  }
}
@keyframes fx-swarm {
  to {
    transform: translate(var(--x), var(--y));
  }
}
@keyframes fx-arrow {
  to {
    left: 120%;
  }
}
@keyframes fx-blade {
  to {
    transform: rotate(35deg) scaleX(1);
  }
}
@keyframes fx-blade2 {
  to {
    transform: rotate(-35deg) scaleX(1);
  }
}
@keyframes fx-thread {
  to {
    height: 38%;
  }
}
@keyframes fx-drip {
  to {
    height: var(--l);
  }
}
@keyframes fx-sway {
  to {
    rotate: 6deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .enc-theme {
    display: none;
  }
  body.enc-stomp .workspace {
    animation: none;
  }
}