/* === Existing styles preserved === */


.tcg-grid{display:grid;grid-template-columns:repeat(auto-fill,180px);gap:18px}
.tcg-card img{width:100%;height:auto;border-radius:10px}
.tcg-name{margin-top:8px;font-weight:700;font-size:14px}
.tcg-stats{margin-top:6px;font-size:12px;opacity:.95}
.tcg-stars{position:absolute;top:8px;left:10px;font-size:12px}
.tcg-qty{position:absolute;top:8px;right:10px;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:10px;font-size:12px}
.tcg-selectable.tcg-selected{outline:3px solid #00e5ff; box-shadow:0 0 25px rgba(0,229,255,.7), 0 0 18px rgba(255,215,0,.45)}
.tcg-vs{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin:30px 0;
  flex-wrap:nowrap;
}

.tcg-vs .tcg-card{
  width:220px;
  transform:scale(1.05);
}

.tcg-vs-text{
  font-size:32px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 15px rgba(255,255,255,.8);
}


#tcg-result .tcg-win-card{
  max-width:320px;
  margin-top:20px;
  animation:tcgReveal 1.2s ease;
}
@keyframes tcgReveal{
  0%{transform:scale(.4) rotate(-10deg); opacity:0}
  100%{transform:scale(1.1) rotate(0); opacity:1}
}
.tcg-vs .tcg-card{
  width:260px;
  animation:tcgBattleFloat 2s infinite ease-in-out;
}



/* === Phase 3 Cinematic FX === */

.tcg-battle-wrap{
  position:relative;
  overflow:hidden;
}

.tcg-fx-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:9997;
}

/* Impact shake */
@keyframes tcgShake {
  0%{transform:translate(0,0)}
  25%{transform:translate(4px,-4px)}
  50%{transform:translate(-4px,4px)}
  75%{transform:translate(4px,4px)}
  100%{transform:translate(0,0)}
}

.tcg-shake{
  animation:tcgShake .6s ease;
}

/* Power struggle glow */
@keyframes tcgPulse {
  0%{box-shadow:0 0 20px rgba(255,255,255,.2)}
  50%{box-shadow:0 0 60px rgba(255,255,255,.8)}
  100%{box-shadow:0 0 20px rgba(255,255,255,.2)}
}

.tcg-pulse{
  animation:tcgPulse 2s infinite;
}

/* Winner takeover */
.tcg-takeover{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.9), rgba(0,0,0,.95));
  z-index:9999;
  animation:tcgTakeover 3s ease forwards;
}

@keyframes tcgTakeover{
  0%{opacity:0;transform:scale(.6)}
  40%{opacity:1;transform:scale(1)}
  100%{opacity:1;transform:scale(1.4)}
}

/* Element color washes */
.tcg-element-lightning{background:radial-gradient(circle, rgba(120,180,255,.9), rgba(0,0,0,.95))}
.tcg-element-fire{background:radial-gradient(circle, rgba(255,120,0,.9), rgba(0,0,0,.95))}
.tcg-element-water{background:radial-gradient(circle, rgba(0,160,255,.9), rgba(0,0,0,.95))}
.tcg-element-light{background:radial-gradient(circle, rgba(255,255,200,.9), rgba(0,0,0,.95))}

/* Final result glow */
#tcg-result{
  text-shadow:0 0 20px rgba(255,255,255,.8);
  animation:tcgResultGlow 2s infinite alternate;
}

@keyframes tcgResultGlow{
  from{opacity:.6}
  to{opacity:1}
}
#tcg-result{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:48px;
  font-weight:900;
  color:#fff;
  z-index:10000;
  text-shadow:0 0 25px rgba(255,255,255,.9);
  background:rgba(0,0,0,.6);
}
/* === BASE CARD STYLES === */
.tcg-grid{display:grid;grid-template-columns:repeat(auto-fill,180px);gap:18px}
.tcg-card{
  border:3px solid gold;
  background:linear-gradient(180deg,#041026,#050b1a);
  color:#e6f7ff;
  padding:10px;
  border-radius:14px;
  box-shadow:0 0 18px rgba(255,215,0,.65);
  position:relative;
  cursor:pointer;
  overflow:hidden
}
.tcg-card img{width:100%;height:auto;border-radius:10px}
.tcg-name{margin-top:8px;font-weight:700;font-size:14px}
.tcg-stats{margin-top:6px;font-size:12px;opacity:.95}

/* === BATTLE WRAPPER === */
.tcg-battle-wrap{
  position:relative;
  overflow:hidden;
}

/* === COLLISION ARENA === */
.tcg-vs{
  position:relative;
  width:100%;
  height:420px;
  overflow:hidden;
}



/* LEFT GUARDIAN */
.tcg-vs .tcg-card:first-child{
  left:5%;
  animation:tcgMultiClashLeft 3.4s infinite ease-in-out;
}

/* RIGHT GUARDIAN */
.tcg-vs .tcg-card:last-child{
  right:5%;
  animation:tcgMultiClashRight 3.4s infinite ease-in-out;
}

/* LEFT CHARGES */
@keyframes tcgMultiClashLeft{
  0%{left:5%}
  20%{left:45%}   /* CLASH 1 */
  30%{left:25%}
  45%{left:50%}   /* CLASH 2 */
  55%{left:30%}
  70%{left:50%}   /* CLASH 3 */
  85%{left:20%}
  100%{left:5%}
}

/* RIGHT CHARGES */
@keyframes tcgMultiClashRight{
  0%{right:5%}
  20%{right:45%}  /* CLASH 1 */
  30%{right:25%}
  45%{right:50%}  /* CLASH 2 */
  55%{right:30%}
  70%{right:50%}  /* CLASH 3 */
  85%{right:20%}
  100%{right:5%}
}

/* IMPACT SHAKE */
@keyframes tcgImpactShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(8px,-8px)}
  45%{transform:translate(-8px,8px)}
  70%{transform:translate(8px,8px)}
}

.tcg-vs{
  animation:tcgImpactShake 3.4s infinite;
}

.tcg-shake-screen{
  animation:shakeScreen .6s ease;
}

@keyframes shakeScreen{
  0%{transform:translate(0,0)}
  25%{transform:translate(8px,-8px)}
  50%{transform:translate(-8px,8px)}
  75%{transform:translate(8px,8px)}
  100%{transform:translate(0,0)}
}


/* === BLACKOUT === */
#tcg-blackout{
  position:fixed;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity 1.5s ease;
  z-index:9998
}
#tcg-blackout.on{opacity:1}

/* === RESULT SCREEN === */
#tcg-result{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:48px;
  font-weight:900;
  color:#fff;
  z-index:10000;
  text-shadow:0 0 25px rgba(255,255,255,.9);
  background:rgba(0,0,0,.6);
}

#tcg-result .tcg-win-card{
  max-width:320px;
  margin-top:20px;
  animation:tcgReveal 1.2s ease;
}

@keyframes tcgReveal{
  0%{transform:scale(.4) rotate(-10deg); opacity:0}
  100%{transform:scale(1.1) rotate(0); opacity:1}
}
#tcg-fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
}
/* === FX CANVAS (PRIMARY EFFECT LAYER) === */
#tcg-fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
}
.tcg-flash {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.9);
  z-index: 9999;
  pointer-events: none;
  animation: tcgFlash 0.25s ease;
}

@keyframes tcgFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.tcg-flash {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.9);
  z-index: 9999;
  pointer-events: none;
  animation: tcgFlash 0.25s ease;
}

@keyframes tcgFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}


/* === SOFT ATMOSPHERE ONLY (NO BLACKOUT) === */
.tcg-dark-soft{
  position:absolute;
  inset:0;
  background:rgba(40,0,70,.15);
  z-index:4;
}

.tcg-snow-soft{
  position:absolute;
  inset:0;
  background:rgba(220,240,255,.12);
  z-index:4;
}

/* === KEEP WIN / LOSE SCREEN === */
#tcg-result{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:48px;
  font-weight:900;
  color:#fff;
  z-index:10000;
  text-shadow:0 0 25px rgba(255,255,255,.9);
  background:rgba(0,0,0,.6);
}

#tcg-result .tcg-win-card{
  max-width:320px;
  margin-top:20px;
  animation:tcgReveal 1.2s ease;
}

@keyframes tcgReveal{
  0%{transform:scale(.4) rotate(-10deg); opacity:0}
  100%{transform:scale(1.1) rotate(0); opacity:1}
}
/* ===== DARGO SHADOW ===== */
.fx-dargo-shadow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at left, rgba(0,0,0,0.9), transparent 60%),
    linear-gradient(90deg, rgba(30,0,50,0.8), transparent);
  animation: dargoShadow 2.6s ease-out;
  z-index:50;
}

@keyframes dargoShadow{
  from{opacity:0; transform:translateX(-120px) scale(1.2);}
  50%{opacity:1;}
  to{opacity:0; transform:translateX(180px) scale(1.4);}
}

/* ===== BANKZ DARK MATTER ===== */
.fx-bankz-darkmatter{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(120,0,180,0.9), rgba(10,0,30,0.9));
  animation: bankzWave 2.8s ease-in-out;
  z-index:50;
}

@keyframes bankzWave{
  from{opacity:0; transform:scale(0.6);}
  50%{opacity:1; transform:scale(1);}
  to{opacity:0; transform:scale(1.6);}
}

/* ===== EKEW BLIZZARD ===== */
.fx-ekew-blizzard{
  position:absolute;
  inset:0;
  background:
    repeating-radial-gradient(circle, rgba(200,240,255,0.9), rgba(120,200,255,0.6) 8px);
  animation: ekewStorm 3s linear;
  z-index:50;
}

@keyframes ekewStorm{
  from{opacity:0; transform:rotate(0deg) scale(1);}
  50%{opacity:1;}
  to{opacity:0; transform:rotate(30deg) scale(1.3);}
}

.tcg-dalco-lava{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:red;
  z-index:2147483647;
  opacity:1;
}

.dalco-lava{
  position:absolute;
  inset:0;
  background:rgba(255,60,0,0.9);
  z-index:50;
  animation:dalcoLava 1.5s ease forwards;
}

@keyframes dalcoLava{
  0%{opacity:0}
  100%{opacity:1}
}

.dalco-ice{
  position:absolute;
  inset:0;
  background:rgba(120,200,255,0.95);
  z-index:50;
  animation:dalcoIce 2s ease forwards;
}

@keyframes dalcoIce{
  0%{opacity:0}
  100%{opacity:1}
}

.tcg-screen-crack{
  position:fixed;
  inset:0;
  background:url("https://i.imgur.com/qIufhof.png") center/cover no-repeat;
  z-index:9999;
  pointer-events:none;
  animation:crackFade 2s ease forwards;
}

@keyframes crackFade{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0}
}


/* ===== AIRIW – SCREAMING WINDS ===== */
.fx-airiw-wind{
  position:absolute;
  left:110%;
  width:140%;
  height:6px;
  background:linear-gradient(90deg, 
    rgba(255,255,255,0), 
    rgba(180,240,255,0.9), 
    rgba(255,255,255,0)
  );
  filter: blur(1px);
  animation: airiwSlash 1s ease-out forwards;
  z-index:60;
}

@keyframes airiwSlash{
  0%{
    opacity:0;
    transform:translateX(0) skewX(-20deg);
  }
  30%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateX(-220%) skewX(20deg);
  }
}


/* ===== SITWOS MINI STARS ===== */

.fx-sitwos-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:60;
  overflow:hidden;
}

.sitwos-star{
  position:absolute;
  width:6px;
  height:6px;
  background:radial-gradient(circle, #fff, gold, transparent);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: sitwosStarShoot 1.8s ease-out forwards;
  animation-delay: var(--delay);
  opacity:0;
}

@keyframes sitwosStarShoot{
  0%{
    transform:translate(0,0) scale(0.2);
    opacity:1;
  }
  70%{
    opacity:1;
  }
  100%{
    transform:translate(var(--dx), var(--dy)) scale(0.8);
    opacity:0;
  }
}
/* ===== SITWOS MINI STARS ===== */

.fx-sitwos-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:80;
  overflow:hidden;
}

.sitwos-star{
  position:absolute;
  width:8px;
  height:8px;
  background:radial-gradient(circle, #fff, gold, orange);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: sitwosStarShoot 1.8s ease-out forwards;
  animation-delay: var(--delay);
  opacity:0;
  filter: drop-shadow(0 0 6px gold);
}

@keyframes sitwosStarShoot{
  0%{
    transform:translate(0,0) scale(0.3);
    opacity:1;
  }
  70%{
    opacity:1;
  }
  100%{
    transform:translate(var(--dx), var(--dy)) scale(1);
    opacity:0;
  }
}

/* ===== YOLZSTI COSMIC STAR (EXTENDED) ===== */

.fx-yolzsti-star{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:90;
  overflow:hidden;
}

/* HUGE STAR */
.yolzsti-star{
  position:absolute;
  left:-35%;
  top:50%;
  width:420px;
  height:420px;
  background:radial-gradient(circle, gold, orange, red, darkred);
  clip-path: polygon(
    50% 0%, 60% 35%, 100% 50%, 
    60% 65%, 50% 100%, 
    40% 65%, 0% 50%, 40% 35%
  );
  transform:translateY(-50%);
  animation: yolzstiStarRip 4.8s ease-in-out forwards;
  filter:
    drop-shadow(0 0 60px gold)
    drop-shadow(0 0 120px orange)
    drop-shadow(0 0 200px red);
}

/* GIANT FLARES */
.yolzsti-flare{
  position:absolute;
  left:25%;
  top:50%;
  width:10px;
  height:200px;
  background:linear-gradient(to top, red, blue, cyan, white);
  transform:rotate(var(--a)) translateY(-50%);
  animation: yolzstiFlare 4s ease-out forwards;
  filter: blur(2px);
}

/* STAR TEAR */
@keyframes yolzstiStarRip{
  0%{
    transform:translate(-140%, -50%) scale(0.3) rotate(0deg);
    opacity:1;
  }
  40%{
    transform:translate(40vw, -50%) scale(1.3) rotate(540deg);
  }
  70%{
    transform:translate(70vw, -50%) scale(1.1) rotate(720deg);
  }
  100%{
    transform:translate(140vw, -50%) scale(0.9) rotate(1080deg);
    opacity:0;
  }
}

/* COSMIC FLARE RAIN */
@keyframes yolzstiFlare{
  0%{
    opacity:0;
    transform:rotate(var(--a)) translateY(0);
  }
  30%{opacity:1}
  100%{
    transform:rotate(var(--a)) translateY(-80vh);
    opacity:0;
  }
}

/* ===== DARTHNE : SHADOW SWARM ===== */

.fx-darthne-swarm{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:70;
}

/* crawling shadow */
.darthne-shadow{
  position:absolute;
  bottom:12%;
  width:120px;
  height:60px;
  background:
    radial-gradient(circle at 50% 60%, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
  filter: blur(6px);
  border-radius: 50%;
  animation: darthneCrawl 2.8s ease forwards;
}

/* motion: crawl → bounce → pounce → evaporate */
@keyframes darthneCrawl{
  0%{
    transform:translateX(0) scale(0.6);
    opacity:0;
  }
  20%{
    opacity:1;
    transform:translateX(20vw) scale(0.9);
  }
  45%{
    transform:translateX(40vw) translateY(-40px) scale(1.2);
  }
  65%{
    transform:translateX(65vw) translateY(-120px) scale(1.6);
  }
  85%{
    transform:translateX(75vw) translateY(-40px) scale(1.3);
    opacity:1;
  }
  100%{
    transform:translateX(80vw) translateY(-80px) scale(2.2);
    opacity:0;
    filter: blur(18px);
  }
}

/* ===== INDIGOLEM : CHARM HEART ===== */

.fx-indigolem-charm{
  position:absolute;
  left:15%;
  top:50%;
  width:220px;
  height:200px;
  background:
    radial-gradient(circle at 30% 30%, #ff9fd6, #ff4fa3 60%, #c4005a);
  clip-path: path("M110 180 Q20 100 60 50 Q110 10 160 50 Q200 100 110 180 Z");
  filter: drop-shadow(0 0 40px rgba(255,80,180,0.9));
  animation: indigolemCharm 3s ease forwards;
  z-index:70;
}

/* Floating + pulsing heart motion */
@keyframes indigolemCharm{
  0%{
    transform:translateX(0) scale(0.3);
    opacity:0;
  }
  25%{
    opacity:1;
    transform:translateX(20vw) scale(1);
  }
  50%{
    transform:translateX(40vw) scale(1.3);
  }
  70%{
    transform:translateX(55vw) scale(1.1);
  }
  100%{
    transform:translateX(65vw) scale(0.2);
    opacity:0;
    filter: blur(20px);
  }
}


/* ===== KENJAREI : GOLDEN COSMIC ARROWS ===== */

/* Bow aura */
.fx-kenjarei-bow{
  position:absolute;
  left:12%;
  top:45%;
  width:140px;
  height:220px;
  border:6px solid gold;
  border-radius:50% 0 50% 0;
  box-shadow:0 0 60px rgba(255,215,0,1);
  background:radial-gradient(circle, rgba(255,255,200,.9), rgba(255,180,0,.6));
  animation: kenjareiBow 2.6s ease forwards;
  z-index:70;
}

@keyframes kenjareiBow{
  0%{opacity:0; transform:scale(.4) rotate(-20deg)}
  40%{opacity:1; transform:scale(1.1)}
  100%{opacity:0; transform:scale(1.4)}
}

/* Fired arrows */
.fx-kenjarei-arrow{
  position:absolute;
  left:22%;
  width:120px;
  height:6px;
  background:linear-gradient(90deg, gold, white, gold);
  box-shadow:0 0 20px rgba(255,220,120,1);
  animation: kenjareiArrow 1.2s linear forwards;
  z-index:75;
}

@keyframes kenjareiArrow{
  0%{transform:translateX(0); opacity:1}
  100%{transform:translateX(55vw); opacity:0}
}

/* Heavenly rain arrows */
.fx-kenjarei-rain{
  position:absolute;
  top:-80px;
  width:8px;
  height:100px;
  background:linear-gradient(180deg, white, gold);
  box-shadow:0 0 25px rgba(255,215,0,1);
  animation: kenjareiRain 1.5s linear forwards;
  z-index:76;
}

@keyframes kenjareiRain{
  0%{transform:translateY(0); opacity:1}
  100%{transform:translateY(120vh); opacity:0}
}


/* ===== OFUSA : TOXIC BURST ===== */

.fx-ofusa-cloud{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 50%, rgba(0,180,255,.6), transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(160,0,255,.6), transparent 60%),
    radial-gradient(circle at 50% 70%, rgba(255,120,0,.5), transparent 60%);
  animation: ofusaSwirl 2s ease-in-out forwards;
  z-index:70;
  filter: blur(10px);
}

@keyframes ofusaSwirl{
  0%{opacity:0; transform:scale(.6) rotate(0deg)}
  40%{opacity:1; transform:scale(1.1) rotate(12deg)}
  80%{transform:scale(1.2) rotate(-12deg)}
  100%{opacity:1; transform:scale(1)}
}

/* Compression before burst */
.ofusa-compress{
  animation: ofusaCompress .6s ease forwards;
}

@keyframes ofusaCompress{
  from{transform:scale(1.2)}
  to{transform:scale(.75)}
}

/* Explosion burst */
.ofusa-burst{
  animation: ofusaBurst .8s ease forwards;
}

@keyframes ofusaBurst{
  0%{opacity:1; transform:scale(.8)}
  60%{opacity:1; transform:scale(1.8)}
  100%{opacity:0; transform:scale(2.4)}
}


/* ===== LUMEQOLO : MAGNETIC IRON ===== */

.fx-lumeqolo-magnet{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at left center,
      rgba(255,120,0,.85),
      rgba(120,60,0,.4),
      transparent 65%);
  opacity:0;
  animation:lumeqoloAppear 1.2s ease forwards;
  z-index:60;
}

@keyframes lumeqoloAppear{
  from{opacity:0; transform:scale(.7)}
  to{opacity:1; transform:scale(1)}
}

/* Iron pull streams */
.fx-lumeqolo-pull{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,140,0,.7),
      rgba(255,140,0,.7) 6px,
      transparent 12px
    );
  opacity:0;
  transform:translateX(120px);
  z-index:65;
}

/* Charged magnet */
.lumeqolo-charge{
  animation:lumeqoloCharge 1s ease-in-out forwards;
}

@keyframes lumeqoloCharge{
  0%{filter:blur(0)}
  50%{filter:blur(2px)}
  100%{filter:blur(0)}
}

/* Pulling iron from opponent */
.lumeqolo-drag{
  animation:lumeqoloDrag 1.6s ease forwards;
}

@keyframes lumeqoloDrag{
  0%{opacity:0; transform:translateX(160px)}
  40%{opacity:1}
  100%{opacity:0; transform:translateX(-240px)}
}


/* ===== EVOLVED EKEW – ASTRAL BLIZZARD ===== */

.fx-ekew-sickle {
  position:absolute;
  width:14px;
  height:40px;
  background:linear-gradient(180deg,#e8f9ff,#6bdcff);
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  opacity:0.9;
  animation: ekewSickleFly 1.4s linear forwards;
  z-index:60;
}

@keyframes ekewSickleFly{
  from{
    transform:translate(0,0) rotate(0deg);
    opacity:1;
  }
  to{
    transform:translate(420px,-60px) rotate(720deg);
    opacity:0;
  }
}

/* FREEZE TARGET CARD */
.fx-ekew-freeze{
  position:absolute;
  inset:0;
  background:rgba(180,230,255,0.85);
  backdrop-filter:blur(2px);
  box-shadow:inset 0 0 40px rgba(120,220,255,0.9);
  animation: ekewFreeze 2s forwards;
  z-index:70;
}

@keyframes ekewFreeze{
  0%{opacity:0;}
  100%{opacity:1;}
}


/* ===== FALCOR – GALACTIC SANDSTORM ===== */

.fx-falcor-sand {
  position:absolute;
  width:6px;
  height:6px;
  background:#d8c28a;
  border-radius:50%;
  opacity:0.85;
  animation: falcorSandRise 2.2s ease-out forwards;
  z-index:60;
}

@keyframes falcorSandRise{
  from{
    transform:translateY(80px) scale(0.4);
    opacity:0;
  }
  to{
    transform:translateY(-140px) scale(1);
    opacity:1;
  }
}

/* SAND FIST */
.fx-falcor-fist{
  position:absolute;
  width:160px;
  height:160px;
  background:
    radial-gradient(circle at 30% 30%, #f2dfac, #c6a86a);
  border-radius:40% 40% 50% 50%;
  box-shadow:0 0 40px rgba(210,180,100,0.9);
  animation: falcorFistSmash 1.2s ease-in forwards;
  z-index:70;
}

@keyframes falcorFistSmash{
  0%{
    transform:scale(0.3) translateY(-100px);
    opacity:0;
  }
  40%{
    transform:scale(1) translateY(0);
    opacity:1;
  }
  100%{
    transform:scale(1.4) translateY(120px);
    opacity:0;
  }
}


/* ===== DETALEY ZT – SOUL DRAIN ===== */

.fx-detaley-shadow{
  position:absolute;
  width:20px;
  height:120px;
  background:linear-gradient(to top, rgba(20,0,40,0.9), transparent);
  border-radius:50%;
  animation: detaleyShadowRise 2s ease-out forwards;
  z-index:60;
}

@keyframes detaleyShadowRise{
  from{
    transform:translateY(40px) scale(0.5);
    opacity:0;
  }
  to{
    transform:translateY(-160px) scale(1.2);
    opacity:1;
  }
}

.fx-detaley-soul{
  position:absolute;
  width:18px;
  height:18px;
  background:radial-gradient(circle, #b388ff, #3a0066);
  border-radius:50%;
  box-shadow:0 0 20px rgba(180,120,255,0.9);
  animation: detaleySoulDrain 2.5s ease-in-out forwards;
  z-index:70;
}

@keyframes detaleySoulDrain{
  from{
    transform:translate(0,0) scale(1);
    opacity:1;
  }
  to{
    transform:translate(-220px,-120px) scale(0.3);
    opacity:0;
  }
}

.fx-detaley-dark{
  position:absolute;
  inset:0;
  background:rgba(30,0,50,0.25);
  z-index:55;
  animation: detaleyDarkFade 2.5s ease-out;
}

@keyframes detaleyDarkFade{
  from{opacity:0}
  50%{opacity:1}
  to{opacity:0}
}


/* ===== ZALDOR – LIGHTNING PIERCE ===== */

.fx-zaldor-charge{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 50%, rgba(180,220,255,0.9), transparent 60%),
    linear-gradient(90deg, rgba(120,180,255,0.7), transparent);
  animation: zaldorCharge 1.4s ease-in-out;
  z-index:60;
}

@keyframes zaldorCharge{
  0%{opacity:0; filter:blur(6px);}
  50%{opacity:1;}
  100%{opacity:0;}
}

.fx-zaldor-spear{
  position:absolute;
  width:160px;
  height:10px;
  background:linear-gradient(90deg, #e0f6ff, #6bdcff, #e0f6ff);
  box-shadow:0 0 25px rgba(120,200,255,1);
  border-radius:6px;
  animation: zaldorSpearFly 0.7s linear forwards;
  z-index:70;
}

@keyframes zaldorSpearFly{
  from{
    transform:translateX(0) scale(0.6);
    opacity:0;
  }
  to{
    transform:translateX(420px) scale(1.2);
    opacity:1;
  }
}

.fx-zaldor-impact{
  position:absolute;
  inset:0;
  background:rgba(200,240,255,0.8);
  animation:zaldorImpact 0.3s ease;
  z-index:80;
}

@keyframes zaldorImpact{
  from{opacity:1}
  to{opacity:0}
}


/* ===== PALMBRELA – NATURE'S WRATH ===== */

.fx-palmbrela-vine{
  position:absolute;
  width:18px;
  height:140px;
  background:linear-gradient(to top, #2e7d32, #81c784);
  border-radius:20px;
  animation: palmbrelaVineGrow 2s ease-out forwards;
  z-index:60;
}

@keyframes palmbrelaVineGrow{
  from{
    transform:translateY(80px) scale(0.4);
    opacity:0;
  }
  to{
    transform:translateY(-160px) scale(1.1);
    opacity:1;
  }
}

/* SPIRIT TREE */
.fx-palmbrela-tree{
  position:absolute;
  width:80px;
  height:120px;
  background:
    radial-gradient(circle at 50% 20%, #7cb342, #33691e);
  border-radius:40% 40% 50% 50%;
  box-shadow:0 0 30px rgba(120,200,120,0.9);
  animation: palmbrelaTreeRise 1.6s ease-out forwards;
  z-index:65;
}

@keyframes palmbrelaTreeRise{
  from{
    transform:translateY(120px) scale(0.4);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

/* ROCK PROJECTILE */
.fx-palmbrela-rock{
  position:absolute;
  width:60px;
  height:60px;
  background:radial-gradient(circle, #8d6e63, #4e342e);
  border-radius:50%;
  box-shadow:0 0 20px rgba(120,80,60,0.9);
  animation: palmbrelaRockThrow 1s ease-in forwards;
  z-index:75;
}

@keyframes palmbrelaRockThrow{
  from{
    transform:translate(0,0) scale(0.6);
    opacity:0;
  }
  to{
    transform:translate(420px,-160px) scale(1.2);
    opacity:1;
  }
}

/* IMPACT DUST */
.fx-palmbrela-dust{
  position:absolute;
  inset:0;
  background:rgba(160,120,80,0.25);
  animation: palmbrelaDust 0.5s ease;
  z-index:80;
}

@keyframes palmbrelaDust{
  from{opacity:1}
  to{opacity:0}
}


/* ===== PHANTOWSKI – GOLDEN LIGHTNING ===== */

.fx-phantowski-charge{
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow:0 0 40px rgba(255,215,0,0.9);
  animation: phantowskiCharge 1.2s ease;
  z-index:70;
}

@keyframes phantowskiCharge{
  0%{opacity:0; transform:scale(0.9)}
  50%{opacity:1; transform:scale(1.05)}
  100%{opacity:0; transform:scale(1)}
}

.fx-phantowski-bolt{
  position:absolute;
  width:8px;
  height:180px;
  background:linear-gradient(to bottom, #fff7b0, #ffd700, #ffae00);
  box-shadow:0 0 25px gold;
  border-radius:10px;
  animation: phantowskiZap 0.5s ease forwards;
  z-index:80;
}

@keyframes phantowskiZap{
  from{
    transform:translateY(0) rotate(0deg);
    opacity:1;
  }
  to{
    transform:translateY(-200px) rotate(15deg);
    opacity:0;
  }
}

/* Golden Impact Flash */
.fx-phantowski-impact{
  position:fixed;
  inset:0;
  background:rgba(255,215,0,0.7);
  animation: phantowskiFlash 0.3s ease;
  z-index:9999;
}

@keyframes phantowskiFlash{
  from{opacity:1}
  to{opacity:0}
}


/* ===== VETZIMILE – HEART FLARE ===== */

.fx-vetzimile-heart{
  position:absolute;
  width:160px;
  height:140px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(0.2);
  background:
    radial-gradient(circle at 30% 30%, #fff, #ff77aa 40%, #ff2f7a 70%);
  clip-path: path("M80 20 C100 -10 160 10 160 60 C160 120 80 160 80 160 C80 160 0 120 0 60 C0 10 60 -10 80 20 Z");
  box-shadow:0 0 40px rgba(255,80,140,0.9);
  animation: vetzimileHeartRise 1.6s ease forwards;
  z-index:60;
}

@keyframes vetzimileHeartRise{
  0%{opacity:0; transform:translate(-50%,-30%) scale(0.2)}
  40%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  70%{opacity:1; transform:translate(-50%,-65%) scale(1.1)}
  100%{opacity:0; transform:translate(-50%,-85%) scale(1.2)}
}

/* Sword slash */
.fx-vetzimile-sword{
  position:absolute;
  width:14px;
  height:260px;
  background:linear-gradient(to bottom, #fffbe6, #ffd700, #ff4fa3);
  box-shadow:0 0 30px rgba(255,215,120,0.9);
  border-radius:6px;
  animation: vetzimileSwordStrike 0.45s ease forwards;
  z-index:80;
}

@keyframes vetzimileSwordStrike{
  from{
    opacity:1;
    transform:rotate(-45deg) translateY(-200px);
  }
  to{
    opacity:0;
    transform:rotate(-45deg) translateY(200px);
  }
}

/* Impact flash */
.fx-vetzimile-flash{
  position:fixed;
  inset:0;
  background:rgba(255,180,220,0.8);
  animation: vetzimileFlash 0.3s ease;
  z-index:9999;
}

@keyframes vetzimileFlash{
  from{opacity:1}
  to{opacity:0}
}

/* ===== LUMEQ – FRICTION ===== */

.fx-lumeq-friction{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,180,60,0.25),
      rgba(255,180,60,0.25) 4px,
      rgba(120,120,120,0.15) 4px,
      rgba(120,120,120,0.15) 8px
    );
  animation:lumeqFriction 1.4s ease forwards;
  z-index:50;
}

@keyframes lumeqFriction{
  0%{opacity:0}
  40%{opacity:1}
  100%{opacity:0}
}

/* Sparks */
.fx-lumeq-spark{
  position:absolute;
  width:6px;
  height:6px;
  background:orange;
  box-shadow:0 0 10px orange;
  border-radius:50%;
  animation:lumeqSpark 0.6s ease-out forwards;
  z-index:60;
}

@keyframes lumeqSpark{
  from{opacity:1; transform:scale(1)}
  to{opacity:0; transform:translate(40px,-30px) scale(0.2)}
}

/* Weak magnet drag */
.lumeq-drag{
  animation:lumeqDrag 0.5s ease;
}

@keyframes lumeqDrag{
  0%{transform:translateX(0)}
  50%{transform:translateX(-12px)}
  100%{transform:translateX(0)}
}


/* ===== JARPHCO – GOLDEN SPIRIT HAMMER ===== */

.fx-jarphco-charge{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,215,120,0.9), rgba(80,40,0,0.9));
  animation:jarphcoCharge 1.8s ease forwards;
  z-index:50;
}

@keyframes jarphcoCharge{
  0%{opacity:0; transform:scale(0.6)}
  60%{opacity:1; transform:scale(1.05)}
  100%{opacity:0; transform:scale(1.3)}
}

/* Blue spirit fire rays */
.fx-jarphco-ray{
  position:absolute;
  width:10px;
  height:140px;
  background:linear-gradient(180deg, #00e5ff, #0077ff);
  box-shadow:0 0 25px rgba(0,200,255,0.9);
  border-radius:6px;
  animation:jarphcoRay 0.7s ease-out forwards;
  z-index:60;
}

@keyframes jarphcoRay{
  from{opacity:1; transform:scaleY(0.3)}
  to{opacity:0; transform:scaleY(1.2) translateY(180px)}
}

/* Hammer glow pulse */
.jarphco-hammer-glow{
  animation:jarphcoGlow 1.2s ease;
  box-shadow:0 0 40px gold, 0 0 80px rgba(0,200,255,0.7);
}

@keyframes jarphcoGlow{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.8)}
  100%{filter:brightness(1)}
}


/* ===== DALCO XT – DIMENSIONAL BREAKDOWN ===== */

.fx-dalco-ice{
  position:absolute;
  inset:0;
  background:rgba(120,200,255,0.9);
  animation:dalcoIce 1.2s ease forwards;
  z-index:50;
}

@keyframes dalcoIce{
  from{opacity:0}
  to{opacity:1}
}

.fx-dalco-lava{
  position:absolute;
  inset:0;
  background:rgba(255,60,0,0.95);
  animation:dalcoLava 1.4s ease forwards;
  z-index:55;
}

@keyframes dalcoLava{
  from{opacity:0}
  to{opacity:1}
}

/* Rising lava rocks */
.fx-dalco-rock{
  position:absolute;
  width:40px;
  height:40px;
  background:#aa2200;
  border-radius:8px;
  box-shadow:0 0 20px rgba(255,80,0,0.8);
  animation:dalcoRock 1.6s ease-out forwards;
  z-index:60;
}

@keyframes dalcoRock{
  from{transform:translateY(200px) scale(0.4); opacity:0}
  to{transform:translateY(-300px) scale(1.2); opacity:1}
}

/* Sun + Moon */
.fx-dalco-sun,
.fx-dalco-moon{
  position:fixed;
  width:200px;
  height:200px;
  border-radius:50%;
  z-index:9999;
  animation:dalcoOrb 2.5s ease forwards;
}

.fx-dalco-sun{
  background:radial-gradient(circle,#ffdd66,#ff4400);
  box-shadow:0 0 80px rgba(255,120,0,0.9);
  top:-220px;
  left:10%;
}

.fx-dalco-moon{
  background:radial-gradient(circle,#ccddee,#667799);
  box-shadow:0 0 60px rgba(180,200,255,0.8);
  top:-220px;
  right:10%;
}

@keyframes dalcoOrb{
  from{transform:translateY(-300px) scale(0.6)}
  to{transform:translateY(600px) scale(1.3)}
}

/* Dimensional crack */
.fx-dalco-crack{
  position:fixed;
  inset:0;
  background:
    linear-gradient(45deg, rgba(0,0,0,0.9), rgba(255,255,255,0.2), rgba(0,0,0,0.9));
  animation:dalcoCrack 1.4s ease forwards;
  z-index:99999;
}

@keyframes dalcoCrack{
  from{opacity:0}
  50%{opacity:1}
  to{opacity:0}
}


/* ===== BRELIUM – SPIRIT SHADOW SURGE ===== */

.fx-brelium-shadow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at left,
      rgba(160,80,255,0.85),
      rgba(60,0,90,0.55),
      transparent 65%
    );
  animation:breliumSurge 3.2s ease-in-out forwards;
  z-index:60;
  pointer-events:none;
}

@keyframes breliumSurge{
  0%{
    opacity:0;
    transform:translateX(-160px) scale(1.1);
  }
  15%{
    opacity:1;
  }
  30%{
    transform:translateX(220px) scale(1.25);
  }
  50%{
    transform:translateX(-180px) scale(1.3);
  }
  70%{
    transform:translateX(240px) scale(1.35);
  }
  100%{
    opacity:0;
    transform:translateX(0) scale(1.6);
  }
}

/* Spirit haze linger */
.fx-brelium-haze{
  position:absolute;
  inset:0;
  background:rgba(140,80,200,0.18);
  animation:breliumHaze 2s ease forwards;
  z-index:55;
}

@keyframes breliumHaze{
  from{opacity:0}
  to{opacity:1}
}


/* ===== KAHLINQO – COSMIC GALE FANG ===== */

.fx-kahlinqo-gale{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:60;
}

/* Twisters */
.fx-kahlinqo-twister{
  position:absolute;
  width:180px;
  height:420px;
  background:
    radial-gradient(circle at center,
      rgba(160,220,255,0.85),
      rgba(60,120,255,0.45),
      transparent 70%
    );
  filter: blur(1px);
  border-radius:50%;
  animation: kahlinqoTwist 2.4s ease-in forwards;
}

@keyframes kahlinqoTwist{
  0%{
    opacity:0;
    transform:translateX(-160px) rotate(0deg) scale(0.8);
  }
  20%{opacity:1}
  100%{
    transform:translateX(420px) rotate(720deg) scale(1.25);
    opacity:0;
  }
}

/* Cosmic claw slash */
.fx-kahlinqo-claw{
  position:fixed;
  inset:0;
  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,0.95) 45%,
      rgba(120,180,255,0.85) 55%,
      transparent 65%
    );
  animation: kahlinqoClaw 0.45s ease forwards;
  z-index:9999;
  pointer-events:none;
}

@keyframes kahlinqoClaw{
  from{
    opacity:0;
    transform:translateX(-120%) skewX(-20deg);
  }
  to{
    opacity:1;
    transform:translateX(120%) skewX(-20deg);
  }
}

/* Cosmic wind pressure */
.fx-kahlinqo-wind{
  position:absolute;
  inset:0;
  background:rgba(80,120,255,0.15);
  animation: kahlinqoWind 2.8s ease forwards;
  z-index:55;
}

@keyframes kahlinqoWind{
  0%{opacity:0}
  30%{opacity:1}
  100%{opacity:0}
}



/* ===== YILPHAQO – OBSIDIAN BOLT ===== */

.fx-yilphaqo-lightning{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(120,80,0,0.0),
      rgba(255,200,80,0.8),
      rgba(120,80,0,0.0)
    );
  animation: yilphaqoCharge 1.2s ease forwards;
  z-index:55;
  pointer-events:none;
}

@keyframes yilphaqoCharge{
  0%{opacity:0; transform:translateX(-120px) scaleY(0.4);}
  50%{opacity:1;}
  100%{opacity:0; transform:translateX(180px) scaleY(1.2);}
}

/* Heaven Strike Bolt */
.fx-yilphaqo-bolt{
  position:fixed;
  top:-100%;
  left:50%;
  width:120px;
  height:200vh;
  transform:translateX(-50%);
  background:
    linear-gradient(
      180deg,
      rgba(255,220,120,1),
      rgba(180,120,40,0.9),
      rgba(40,0,0,0.8)
    );
  animation: yilphaqoBolt 0.7s ease forwards;
  z-index:9999;
  pointer-events:none;
}

@keyframes yilphaqoBolt{
  0%{top:-120%; opacity:0;}
  30%{opacity:1;}
  100%{top:120%; opacity:0;}
}

/* Golden impact glow */
.fx-yilphaqo-impact{
  position:fixed;
  inset:0;
  background:rgba(255,200,100,0.9);
  animation:yilphaqoImpact 0.3s ease;
  z-index:9998;
}

@keyframes yilphaqoImpact{
  0%{opacity:1;}
  100%{opacity:0;}
}


/* ===== MANDOSHI – LIGHTNING PUNCH ===== */

.fx-mandoshi-charge{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at left, rgba(150,220,255,0.9), transparent 60%),
    linear-gradient(90deg, rgba(80,180,255,0.8), transparent);
  animation: mandoshiCharge 1s ease forwards;
  z-index:55;
  pointer-events:none;
}

@keyframes mandoshiCharge{
  0%{opacity:0; transform:translateX(-120px) scale(0.8);}
  50%{opacity:1;}
  100%{opacity:0; transform:translateX(100px) scale(1.1);}
}

/* Lightning Fist Punch */
.fx-mandoshi-punch{
  position:fixed;
  top:50%;
  left:50%;
  width:180px;
  height:180px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle, rgba(180,240,255,1), rgba(80,160,255,0.6), transparent);
  animation: mandoshiPunch 0.12s linear;
  z-index:9999;
  pointer-events:none;
}

@keyframes mandoshiPunch{
  0%{transform:translate(-50%,-50%) scale(0.4);}
  100%{transform:translate(-50%,-50%) scale(1.4);}
}

/* Lightning Flash Impact */
.fx-mandoshi-impact{
  position:fixed;
  inset:0;
  background:rgba(200,240,255,0.9);
  animation:mandoshiImpact 0.18s ease;
  z-index:9998;
}

@keyframes mandoshiImpact{
  0%{opacity:1;}
  100%{opacity:0;}
}