/* ==================== CAPAS DEL MOTOR VFX Y FLECHA TÁCTICA ==================== */

.capa-vfx {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

.canvas-vfx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.svg-flecha-vfx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.svg-flecha-vfx.activa {
  opacity: 1;
}

.svg-flecha-vfx .flecha-sombra {
  fill: none;
  stroke: rgba(0, 0, 0, 0.48);
  stroke-width: 15px;
  stroke-linecap: round;
  filter: blur(4px);
}

.svg-flecha-vfx .flecha-cuerpo {
  fill: none;
  stroke-width: 14px;
  stroke-linecap: round;
  stroke-dasharray: 22 12;
  animation: flujo-flecha .42s linear infinite;
}

.svg-flecha-vfx .flecha-nucleo {
  fill: none;
  stroke: #fff7d6;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-dasharray: 22 12;
  animation: flujo-flecha .42s linear infinite;
}

.svg-flecha-vfx .reticula-ext {
  fill: rgba(255, 42, 30, 0.14);
  stroke: #ff4436;
  stroke-width: 3.5px;
  stroke-dasharray: 10 6;
  transform-origin: 0 0;
  animation: girar-reticula 2.2s linear infinite;
}

.svg-flecha-vfx .reticula-int {
  fill: rgba(255, 220, 120, 0.25);
  stroke: #ffe580;
  stroke-width: 2.5px;
}

.svg-flecha-vfx .reticula-cruces {
  stroke: #ff5447;
  stroke-width: 3px;
  stroke-linecap: round;
}

.svg-flecha-vfx .reticula-punta {
  fill: #fff2b3;
  stroke: #ff2a1e;
  stroke-width: 2.5px;
}

.svg-flecha-vfx.sobre-valido .reticula-ext {
  r: 30;
  stroke: #7dff88;
  fill: rgba(80, 255, 110, 0.24);
}
.svg-flecha-vfx.sobre-valido .reticula-int {
  stroke: #ffffff;
  fill: rgba(255, 240, 130, 0.45);
}
.svg-flecha-vfx.sobre-valido .reticula-cruces {
  stroke: #9effa6;
}

/* ==================== SPLATS DE DAÑO, CURACIÓN Y ARMADURA ==================== */

.vfx-splat {
  position: fixed;
  z-index: 9500;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.vfx-splat-dano {
  background: radial-gradient(circle at 38% 35%, #ff9d7a 0%, #ff2b1f 42%, #990808 78%, #470000 100%);
  clip-path: polygon(
    50% 0%, 64% 18%, 88% 8%, 78% 33%, 100% 48%, 79% 63%,
    91% 88%, 65% 80%, 50% 100%, 35% 80%, 9% 88%, 21% 63%,
    0% 48%, 22% 33%, 12% 8%, 36% 18%
  );
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 45, 30, 0.8));
}

.vfx-splat-dano.vfx-splat-veneno {
  background: radial-gradient(circle at 38% 35%, #d4ff8a 0%, #49d415 45%, #165e04 82%, #072900 100%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(95, 255, 40, 0.9));
}

.vfx-splat-cura {
  background: radial-gradient(circle at 38% 35%, #fff9b3 0%, #52eb67 45%, #13822c 82%, #063d12 100%);
  border: 3px solid #dcffe0;
  border-radius: 50%;
  box-shadow: 0 0 18px #4dff6b, 0 4px 10px #000c;
}

.vfx-splat-armadura {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #99aebf 50%, #3d4d5c 90%);
  clip-path: polygon(50% 0, 92% 16%, 84% 68%, 50% 100%, 16% 68%, 8% 16%);
  filter: drop-shadow(0 4px 8px #000d) drop-shadow(0 0 10px #b8e2ff);
}

.vfx-splat-num {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    -2px -2px 0 #1f0505,
     2px -2px 0 #1f0505,
    -2px  2px 0 #1f0505,
     2px  2px 0 #1f0505,
     0 3px 6px #000;
}

/* ==================== ONDAS DE CHOQUE, TAJOS, PROYECTILES Y ETIQUETAS ==================== */

.vfx-onda-choque {
  position: fixed;
  z-index: 9100;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 5px solid var(--onda-color, #ffd56b);
  box-shadow: 0 0 18px var(--onda-color, #ffd56b), inset 0 0 14px var(--onda-color, #ffd56b);
  pointer-events: none;
}

.vfx-tajo {
  position: fixed;
  z-index: 9300;
  width: 118px;
  height: 22px;
  background: linear-gradient(90deg, transparent, #ffae2b 20%, #ffffff 50%, #ff442b 80%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 18px #ff622b, 0 0 30px #ffd56b;
  pointer-events: none;
}

.vfx-proyectil {
  position: fixed;
  z-index: 9400;
  width: 30px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 50%, #ffffff 0%, var(--proy-pri, #59c9ff) 45%, var(--proy-sec, #ff6b3d) 85%, transparent 100%);
  box-shadow:
    0 0 16px 4px var(--proy-pri, #59c9ff),
    -12px 0 22px 6px var(--proy-glow, #3b9dff);
  pointer-events: none;
}

.vfx-tag-efimero {
  position: fixed;
  z-index: 9550;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 2px 4px #000;
  box-shadow: 0 4px 12px #000c;
  pointer-events: none;
}
.vfx-tag-efimero.dorado { color: #fff8d6; background: linear-gradient(145deg, #d4941c, #6e4405); border: 2px solid #ffe98a; }
.vfx-tag-efimero.veneno { color: #eaffd6; background: linear-gradient(145deg, #2ca80d, #114702); border: 2px solid #9eff75; }
.vfx-tag-efimero.robovida { color: #ffd9f2; background: linear-gradient(145deg, #a61975, #470530); border: 2px solid #ff85d4; }
.vfx-tag-efimero.buff { color: #fff9c7; background: linear-gradient(145deg, #289c3e, #0e4a1a); border: 2px solid #a8ff9e; }
.vfx-tag-efimero.hielo { color: #e6fbff; background: linear-gradient(145deg, #1b8cc4, #093c5e); border: 2px solid #9ef0ff; }
.vfx-tag-efimero.silencio { color: #f5d9ff; background: linear-gradient(145deg, #7c1fb8, #340754); border: 2px solid #dfa6ff; }
.vfx-tag-efimero.aliento { color: #d9fff5; background: linear-gradient(145deg, #167d68, #07382e); border: 2px solid #75ffe0; }

/* ==================== GRIETAS DE MUERTE, SHOWCASE DE CARTA Y BANNERS ==================== */

.vfx-grieta-muerte {
  position: absolute;
  inset: -4px;
  z-index: 20;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(255, 80, 30, 0.55) 0%, rgba(20, 10, 8, 0.75) 75%),
    repeating-conic-gradient(from 15deg, transparent 0deg 28deg, rgba(255, 195, 70, 0.75) 29deg 31deg, transparent 32deg 65deg);
  box-shadow: 0 0 22px #ff4d29, inset 0 0 18px #ff2200;
}

.vfx-calavera-muerte {
  font-size: 2.1rem;
  filter: drop-shadow(0 3px 6px #000) drop-shadow(0 0 12px #ffae3d);
}

.vfx-carta-showcase {
  position: fixed;
  top: 26%;
  left: 18%;
  z-index: 9450;
  pointer-events: none;
}
.vfx-carta-showcase.rival {
  top: 18%;
  left: 20%;
}
.showcase-marco {
  position: relative;
  width: 138px;
  height: 184px;
  background: linear-gradient(145deg, #6e4823, #24150b);
  border: 4px ridge #e3b459;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.9), 0 0 28px rgba(255, 196, 77, 0.75);
  overflow: visible;
}
.showcase-arte {
  position: absolute;
  inset: 5px;
  border-radius: 9px;
  overflow: hidden;
  background: #1a110b;
}
.showcase-arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase-coste {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.15rem;
  background: radial-gradient(circle at 35% 25%, #9eeaff, #1b65cc 72%);
  border: 2px solid #e3f8ff;
  border-radius: 50%;
  box-shadow: 0 3px 7px #000d;
}
.showcase-tipo {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  font-size: .58rem;
  font-weight: 900;
  color: #fff4c9;
  background: rgba(20, 12, 8, 0.85);
  border: 1px solid #dfb45e;
  border-radius: 99px;
}
.showcase-nombre {
  position: absolute;
  right: 4px;
  bottom: 10px;
  left: 4px;
  padding: 5px 6px;
  color: #fff8df;
  background: rgba(16, 10, 7, 0.92);
  border: 1px solid #d4a44e;
  border-radius: 7px;
  font-size: .74rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}

.vfx-banner-turno {
  position: fixed;
  top: 48%;
  left: 50%;
  z-index: 9600;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.banner-cinta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 44px;
  background: linear-gradient(90deg, transparent, #3b2412 15%, #5e3a1c 50%, #3b2412 85%, transparent);
  border-top: 3px ridge #f0c665;
  border-bottom: 3px ridge #f0c665;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85), 0 0 26px rgba(255, 200, 80, 0.45);
}
.banner-sub {
  color: #e8c987;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.banner-titulo {
  color: #fff5cc;
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  text-shadow: 0 3px 6px #000, 0 0 16px #ffae2b;
}

.vfx-secreto-revelado {
  position: fixed;
  top: 42%;
  left: 50%;
  z-index: 9650;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 28px;
  background: radial-gradient(circle, #4f3218, #1c1008);
  border: 4px ridge #f5c862;
  border-radius: 18px;
  box-shadow: 0 18px 40px #000e, 0 0 34px #ffae2bcc;
  pointer-events: none;
}
.secreto-esfera {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.9rem;
  font-weight: 900;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffd86b, #b86212 75%);
  border: 3px solid #fff3bd;
  box-shadow: 0 0 18px #ffbe3d;
}
.secreto-titulo {
  margin-top: 8px;
  color: #ffd875;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.secreto-nombre {
  margin-top: 3px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 900;
}

/* ==================== KEYFRAMES CONTINUOS DE CARTAS Y PALABRAS CLAVE ==================== */

.carta-mano.jugable::after { animation: aura-jugable 1.3s cubic-bezier(.175, .885, .32, 1.275) infinite alternate; }
.esbirro.objetivo::before, .heroe.objetivo::before { animation: objetivo-pulsante .8s cubic-bezier(.175, .885, .32, 1.275) infinite alternate; }

@keyframes flujo-flecha {
  from { stroke-dashoffset: 34; }
  to { stroke-dashoffset: 0; }
}

@keyframes girar-reticula {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes respirar-provocar {
  from { filter: drop-shadow(0 0 5px rgba(243, 203, 104, 0.45)) brightness(0.96); }
  to { filter: drop-shadow(0 0 12px rgba(255, 220, 120, 0.85)) brightness(1.08); }
}

@keyframes domo-divino {
  from { transform: scale(0.99); opacity: 0.88; }
  to { transform: scale(1.03); opacity: 1; }
}

@keyframes destello-escudo {
  0%, 100% { transform: translateX(-110%) rotate(15deg); }
  50% { transform: translateX(110%) rotate(15deg); }
}

@keyframes niebla-sigilo {
  from { opacity: 0.78; transform: scale(0.99); }
  to { opacity: 0.96; transform: scale(1.02); }
}

@keyframes remolino-furia {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulso-renacer {
  from { opacity: 0.55; box-shadow: 0 0 8px #36d6ff88; }
  to { opacity: 1; box-shadow: 0 0 16px #59f2ffdd, inset 0 0 12px #ffe066aa; }
}

@keyframes flotar-zzz {
  0%, 100% { transform: translateY(0) scale(0.95); opacity: 0.75; }
  50% { transform: translateY(-6px) scale(1.1); opacity: 1; }
}

@keyframes latido-herido {
  from { filter: brightness(0.95); }
  to { filter: brightness(1.18); }
}

@keyframes pulso-hueco {
  from { transform: scale(0.96); opacity: 0.78; }
  to { transform: scale(1.03); opacity: 1; }
}

@keyframes aura-jugable {
  from { opacity: .35; transform: scale(.98); }
  to { opacity: .9; transform: scale(1.04); }
}

@keyframes objetivo-pulsante {
  from { opacity: .45; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.09); }
}

@keyframes pulso-turno {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .carta-mano.jugable::after,
  .esbirro.objetivo::before,
  .heroe.objetivo::before {
    animation-duration: 2s !important;
  }
}