/* ==========================================================
   RONIN: SLASHDOWN — COMBAT FX v3.3.3
========================================================== */

.ronin-combat-fx{
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
  overflow:hidden;
  contain:layout style paint;
}

.ronin-combat-fx i{
  position:absolute;
  display:block;
  pointer-events:none;
  transform-origin:center;
  will-change:transform,opacity,filter;
}

/* IMPACT CORE */
.ronin-fx-impact{
  width:78px;
  height:78px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.18);
  background:
    radial-gradient(circle,
      #fff 0 5%,
      #ffd8dc 6% 10%,
      #ff174d 12% 24%,
      rgba(255,0,55,.82) 25% 34%,
      rgba(255,0,55,.22) 48%,
      transparent 70%);
  box-shadow:
    0 0 14px #fff,
    0 0 28px #ff244f,
    0 0 65px rgba(255,0,55,.92),
    0 0 110px rgba(255,0,55,.42);
  animation:roninImpact .52s cubic-bezier(.14,.76,.16,1) forwards;
}

@keyframes roninImpact{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.12);
    filter:brightness(3);
  }
  20%{
    opacity:1;
    transform:translate(-50%,-50%) scale(calc(.72 * var(--fx-scale)));
  }
  52%{
    opacity:.95;
    transform:translate(-50%,-50%) scale(calc(1.05 * var(--fx-scale)));
    filter:brightness(1.8);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(calc(1.55 * var(--fx-scale)));
    filter:brightness(.9);
  }
}

/* SHOCKWAVE */
.ronin-fx-ring{
  width:84px;
  height:84px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  border:3px solid rgba(255,74,91,.98);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.7),
    0 0 22px #ff123f,
    0 0 55px rgba(255,0,50,.8);
  animation:roninRing .72s cubic-bezier(.08,.7,.18,1) forwards;
}

.ronin-fx-ring:after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
}

@keyframes roninRing{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.18);
  }
  15%{opacity:1}
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(calc(2.25 * var(--fx-scale)));
  }
}

/* KATANA SLASH */
.ronin-fx-slash{
  width:min(39vw,390px);
  height:5px;
  transform:
    translate(-50%,-50%)
    rotate(var(--fx-angle))
    scaleX(.08);
  border-radius:100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,40,72,.2) 8%,
      #ff163f 24%,
      #fff 48% 52%,
      #ff244d 76%,
      rgba(255,15,55,.2) 92%,
      transparent
    );
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 9px #ff1748)
    drop-shadow(0 0 18px #ff003c);
  animation:roninSlash .46s cubic-bezier(.1,.72,.18,1) forwards;
}

.ronin-fx-slash-alt{
  height:3px;
  opacity:.85;
}

@keyframes roninSlash{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(.04);
  }
  25%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(calc(.95 * var(--fx-scale)));
  }
  60%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(calc(1.08 * var(--fx-scale)));
  }
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(calc(1.22 * var(--fx-scale)));
    filter:blur(2px);
  }
}

/* SPARKS */
.ronin-fx-spark{
  width:34px;
  height:3px;
  border-radius:100%;
  transform:
    translate(-50%,-50%)
    rotate(var(--fx-angle))
    translateX(8px)
    scaleX(.3);
  transform-origin:left center;
  background:
    linear-gradient(90deg,#fff,#ff5c68 40%,#ff123d 65%,transparent);
  box-shadow:0 0 7px #ff244d;
  animation:roninSpark .58s ease-out forwards;
}

@keyframes roninSpark{
  0%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      translateX(4px)
      scaleX(.15);
  }
  65%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      translateX(calc(90px * var(--fx-scale)))
      scaleX(1);
  }
}

/* INDIVIDUAL TILE ENERGY */
.ronin-fx-cell-burst{
  width:54px;
  height:54px;
  border-radius:13px;
  transform:translate(-50%,-50%) scale(.35);
  border:1px solid rgba(255,220,225,.92);
  background:
    radial-gradient(circle,#fff 0 3%,#ff3156 12%,rgba(255,0,48,.2) 42%,transparent 68%);
  box-shadow:
    0 0 11px #fff,
    0 0 26px #ff1748;
  animation:roninCellBurst .48s ease-out forwards;
}

@keyframes roninCellBurst{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.25) rotate(0);
  }
  28%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(calc(1.42 * var(--fx-scale)))
      rotate(18deg);
  }
}

/* BLOOD MOON */
.ronin-fx-moon{
  width:150px;
  height:150px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  background:
    radial-gradient(
      circle at 38% 34%,
      #fff3f3 0 2%,
      #ff6471 5%,
      #d90832 24%,
      #750018 55%,
      rgba(45,0,8,.08) 72%
    );
  opacity:0;
  box-shadow:
    0 0 25px #ff244e,
    0 0 70px rgba(255,0,50,.85),
    0 0 130px rgba(255,0,50,.38);
  mix-blend-mode:screen;
  animation:roninMoon .95s ease-out forwards;
}

@keyframes roninMoon{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.15);
  }
  25%{
    opacity:.86;
    transform:translate(-50%,-50%) scale(calc(.72 * var(--fx-scale)));
  }
  65%{opacity:.55}
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(calc(1.32 * var(--fx-scale)));
    filter:blur(2px);
  }
}

/* LIGHTNING */
.ronin-fx-lightning{
  width:min(34vw,320px);
  height:4px;
  transform:
    translate(-50%,-50%)
    rotate(var(--fx-angle))
    scaleX(.1);
  transform-origin:center;
  background:
    linear-gradient(
      90deg,
      transparent,
      #ff1c46 14%,
      #fff 29%,
      #ff234d 43%,
      #fff 56%,
      #ff143f 75%,
      transparent
    );
  clip-path:
    polygon(
      0 40%,16% 18%,28% 60%,40% 22%,
      52% 67%,65% 25%,78% 63%,100% 38%,
      100% 64%,79% 85%,66% 52%,53% 90%,
      39% 50%,27% 82%,15% 48%,0 70%
    );
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 10px #ff1646);
  animation:roninLightning .44s steps(2,end) forwards;
}

@keyframes roninLightning{
  0%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(.08);
  }
  18%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(calc(.9 * var(--fx-scale)));
  }
  40%{opacity:.25}
  55%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(var(--fx-angle))
      scaleX(calc(1.08 * var(--fx-scale)));
  }
}

/* WARPATH HIGH-COMBO AURA */
.ronin-fx-warpath{
  width:260px;
  height:260px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,30,68,.82),
      transparent 12%,
      rgba(255,255,255,.72) 15%,
      transparent 19%,
      rgba(255,0,48,.8) 28%,
      transparent 38%,
      rgba(255,40,70,.72) 52%,
      transparent 66%,
      #ff123d 78%,
      transparent
    );
  filter:
    blur(2px)
    drop-shadow(0 0 20px #ff1748);
  mix-blend-mode:screen;
  animation:roninWarpath .9s cubic-bezier(.12,.75,.2,1) forwards;
}

@keyframes roninWarpath{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) rotate(-25deg) scale(.2);
  }
  22%{opacity:.95}
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(105deg)
      scale(calc(1.5 * var(--fx-scale)));
  }
}

/* CHAIN + CURSE BREAK */
.ronin-fx-chainbreak,
.ronin-fx-cursebreak{
  width:118px;
  height:118px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  animation:roninBreak .7s ease-out forwards;
}

.ronin-fx-chainbreak{
  border:5px dashed rgba(88,255,171,.95);
  box-shadow:
    0 0 22px #38ff95,
    inset 0 0 25px rgba(56,255,149,.35);
}

.ronin-fx-cursebreak{
  border:5px dashed rgba(174,62,255,.95);
  box-shadow:
    0 0 22px #a83dff,
    inset 0 0 25px rgba(168,61,255,.4);
}

@keyframes roninBreak{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.25) rotate(0);
  }
  32%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(calc(1.7 * var(--fx-scale)))
      rotate(80deg);
  }
}

/* FULL SCREEN LIGHT BLOOM */
.ronin-fx-screen-flash{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.34),
      rgba(255,18,60,.18) 18%,
      rgba(190,0,28,.07) 45%,
      transparent 72%
    );
  mix-blend-mode:screen;
  animation:roninScreenFlash .35s ease-out forwards;
}

.ronin-fx-screen-flash.level-2{filter:brightness(1.12)}
.ronin-fx-screen-flash.level-3{filter:brightness(1.28)}
.ronin-fx-screen-flash.level-4{filter:brightness(1.5)}

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

/* COMBO CALLOUT */
.ronin-fx-callout{
  position:fixed;
  z-index:9995;
  left:50%;
  top:30%;
  width:min(92vw,720px);
  transform:translate(-50%,-50%) scale(.68);
  opacity:0;
  pointer-events:none;
  text-align:center;
  filter:blur(7px);
  transition:
    opacity .15s ease,
    transform .36s cubic-bezier(.12,.83,.18,1),
    filter .22s ease;
}

.ronin-fx-callout strong{
  display:block;
  font-family:Orbitron,system-ui,sans-serif;
  font-size:clamp(25px,4.2vw,58px);
  font-weight:1000;
  letter-spacing:.10em;
  line-height:1;
  color:#fff;
  text-shadow:
    0 0 4px #fff,
    0 0 14px #ff1a45,
    0 0 31px #ff003b,
    0 6px 22px rgba(0,0,0,.9);
}

.ronin-fx-callout span{
  display:block;
  margin-top:9px;
  font-family:Orbitron,system-ui,sans-serif;
  font-size:clamp(9px,1.25vw,15px);
  font-weight:800;
  letter-spacing:.34em;
  color:#ff718a;
  text-shadow:0 0 13px rgba(255,0,55,.8);
}

.ronin-fx-callout.visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  filter:blur(0);
}

.ronin-fx-callout.cascade-4 strong,
.ronin-fx-callout.cascade-5 strong,
.ronin-fx-callout.cascade-6 strong{
  font-size:clamp(31px,5vw,70px);
}

.ronin-fx-callout.cascade-5 strong,
.ronin-fx-callout.cascade-6 strong{
  color:#fff5f5;
  text-shadow:
    0 0 5px #fff,
    0 0 17px #ff173f,
    0 0 42px #ff0038,
    0 0 80px rgba(255,0,40,.85),
    0 8px 28px #000;
}

/* BOARD / GAME SHAKE — escalates carefully */
.ronin-shake-1{animation:roninShake1 .22s linear}
.ronin-shake-2{animation:roninShake2 .26s linear}
.ronin-shake-3{animation:roninShake3 .30s linear}
.ronin-shake-4{animation:roninShake4 .34s linear}
.ronin-shake-5{animation:roninShake5 .38s linear}

@keyframes roninShake1{
  0%,100%{transform:translate3d(0,0,0)}
  40%{transform:translate3d(-2px,1px,0)}
  70%{transform:translate3d(2px,-1px,0)}
}

@keyframes roninShake2{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-3px,1px,0)}
  50%{transform:translate3d(3px,-2px,0)}
  75%{transform:translate3d(-2px,1px,0)}
}

@keyframes roninShake3{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-4px,2px,0)}
  42%{transform:translate3d(4px,-2px,0)}
  64%{transform:translate3d(-3px,-1px,0)}
  82%{transform:translate3d(2px,1px,0)}
}

@keyframes roninShake4{
  0%,100%{transform:translate3d(0,0,0)}
  16%{transform:translate3d(-5px,2px,0)}
  34%{transform:translate3d(5px,-3px,0)}
  52%{transform:translate3d(-4px,-2px,0)}
  70%{transform:translate3d(4px,2px,0)}
  86%{transform:translate3d(-2px,1px,0)}
}

@keyframes roninShake5{
  0%,100%{transform:translate3d(0,0,0)}
  14%{transform:translate3d(-6px,3px,0)}
  30%{transform:translate3d(6px,-3px,0)}
  46%{transform:translate3d(-5px,-2px,0)}
  62%{transform:translate3d(5px,2px,0)}
  78%{transform:translate3d(-3px,1px,0)}
  90%{transform:translate3d(2px,-1px,0)}
}

/* Mobile GPU / clutter control */
@media (max-width:767px),(pointer:coarse){
  .ronin-fx-slash{
    width:min(62vw,310px);
  }

  .ronin-fx-moon{
    width:118px;
    height:118px;
  }

  .ronin-fx-warpath{
    width:205px;
    height:205px;
  }

  .ronin-fx-callout{
    top:27%;
  }

  .ronin-fx-callout strong{
    font-size:clamp(22px,8vw,42px);
  }
}

@media (prefers-reduced-motion:reduce) and (pointer:fine){
  .ronin-combat-fx{
    display:none!important;
  }

  .ronin-fx-callout{
    transition:none;
  }

  .ronin-shake-1,
  .ronin-shake-2,
  .ronin-shake-3,
  .ronin-shake-4,
  .ronin-shake-5{
    animation:none!important;
  }
}