/* UI 016.2.1 — Visible Impact Frame
   Additive contact FX only. 016.1.3 fighter motion, damage trails and layout remain untouched. */

body.arena-battle014-active #battle014-root .b14-scene{
  transform-origin:50% 52%;
}

/* Scene-only kick. Deliberately readable on a phone, still short enough not to feel shaky. */
body.arena-battle014-active #battle014-root .b14-scene.b162-kick-normal{
  animation:b162KickNormal 168ms cubic-bezier(.18,.72,.24,1) both!important;
}
body.arena-battle014-active #battle014-root .b14-scene.b162-kick-crit{
  animation:b162KickCrit 208ms cubic-bezier(.14,.76,.2,1) both!important;
}
body.arena-battle014-active #battle014-root .b14-scene.b162-kick-block{
  animation:b162KickBlock 148ms cubic-bezier(.2,.7,.28,1) both!important;
}
body.arena-battle014-active #battle014-root .b14-scene.b162-kick-counter{
  animation:b162KickCounter 188ms cubic-bezier(.14,.76,.22,1) both!important;
}

@keyframes b162KickNormal{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  18%{transform:translate3d(-4px,1px,0) scale(1.002)}
  42%{transform:translate3d(4px,-2px,0) scale(1.003)}
  66%{transform:translate3d(-2px,1px,0) scale(1.001)}
  84%{transform:translate3d(1px,0,0) scale(1)}
}
@keyframes b162KickCrit{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  14%{transform:translate3d(-7px,2px,0) scale(1.005)}
  32%{transform:translate3d(6px,-3px,0) scale(1.006)}
  52%{transform:translate3d(-5px,2px,0) scale(1.003)}
  71%{transform:translate3d(3px,-1px,0) scale(1.002)}
  88%{transform:translate3d(-1px,0,0) scale(1)}
}
@keyframes b162KickBlock{
  0%,100%{transform:translate3d(0,0,0)}
  28%{transform:translate3d(-3px,1px,0)}
  58%{transform:translate3d(3px,-1px,0)}
  80%{transform:translate3d(-1px,0,0)}
}
@keyframes b162KickCounter{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  18%{transform:translate3d(6px,-2px,0) scale(1.004)}
  42%{transform:translate3d(-6px,2px,0) scale(1.004)}
  67%{transform:translate3d(3px,-1px,0) scale(1.002)}
  84%{transform:translate3d(-1px,0,0)}
}

/* Full-scene impact frame sits above the cinematic layer so it cannot disappear behind art.
   It briefly darkens the arena while keeping a bright local hotspot at the actual target. */
.b162-impact-frame{
  position:absolute;
  z-index:30;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
}
.b162-impact-frame.is-normal{
  background:
    radial-gradient(circle at var(--b162-x) var(--b162-y),rgba(255,255,246,.96) 0 2.5%,rgba(255,154,138,.70) 5%,rgba(255,77,105,.30) 12%,rgba(255,69,105,.10) 22%,transparent 38%),
    rgba(5,1,10,.16);
  animation:b162FrameNormal 176ms cubic-bezier(.12,.75,.2,1) both;
}
.b162-impact-frame.is-crit{
  background:
    radial-gradient(circle at var(--b162-x) var(--b162-y),rgba(255,255,248,1) 0 3%,rgba(255,226,102,.90) 6%,rgba(255,169,48,.52) 13%,rgba(179,79,255,.20) 24%,transparent 43%),
    rgba(7,2,10,.25);
  animation:b162FrameCrit 224ms cubic-bezier(.1,.78,.18,1) both;
}
.b162-impact-frame.is-block{
  background:
    radial-gradient(circle at var(--b162-x) var(--b162-y),rgba(240,254,255,.96) 0 2.5%,rgba(95,211,255,.65) 7%,rgba(49,161,255,.22) 17%,transparent 38%),
    rgba(2,7,12,.11);
  animation:b162FrameBlock 184ms ease-out both;
}
.b162-impact-frame.is-counter{
  background:
    radial-gradient(circle at var(--b162-x) var(--b162-y),rgba(255,250,244,.98) 0 2.5%,rgba(217,139,255,.72) 7%,rgba(255,86,104,.30) 17%,transparent 40%),
    rgba(8,2,12,.20);
  animation:b162FrameCrit 204ms ease-out both;
}
.b162-impact-frame.is-miss,
.b162-impact-frame.is-dodge{
  background:radial-gradient(circle at var(--b162-x) var(--b162-y),rgba(151,235,255,.25),transparent 31%);
  animation:b162FrameSoft 170ms ease-out both;
}

@keyframes b162FrameNormal{
  0%{opacity:0}
  14%{opacity:.96}
  34%{opacity:.72}
  100%{opacity:0}
}
@keyframes b162FrameCrit{
  0%{opacity:0}
  11%{opacity:1}
  31%{opacity:.94}
  58%{opacity:.46}
  100%{opacity:0}
}
@keyframes b162FrameBlock{
  0%{opacity:0}
  17%{opacity:.96}
  42%{opacity:.66}
  100%{opacity:0}
}
@keyframes b162FrameSoft{0%{opacity:0}25%{opacity:.52}100%{opacity:0}}

/* Local contact bloom — substantially larger than 016.2.0, but still centered on the body. */
.b162-contact{
  position:absolute;
  z-index:31;
  left:var(--b162-x);
  top:var(--b162-y);
  width:104px;
  height:104px;
  border-radius:50%;
  translate:-50% -50%;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 8px currentColor);
}
.b162-contact:before,
.b162-contact:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border-radius:50%;
}
.b162-contact:before{
  width:28px;
  height:28px;
  background:rgba(255,255,255,.98);
  box-shadow:0 0 14px #fff,0 0 26px currentColor;
  filter:blur(.5px);
}
.b162-contact:after{
  width:68px;
  height:68px;
  border:2px solid currentColor;
  box-shadow:0 0 18px currentColor,inset 0 0 14px currentColor;
}
.b162-contact.is-normal{color:rgba(255,87,111,.94);animation:b162Contact 380ms cubic-bezier(.12,.72,.22,1) both}
.b162-contact.is-crit{width:132px;height:132px;color:rgba(255,218,76,1);animation:b162ContactCrit 460ms cubic-bezier(.1,.74,.18,1) both}
.b162-contact.is-block{color:rgba(93,208,255,.98);animation:b162ContactBlock 390ms ease-out both}
.b162-contact.is-counter{width:118px;height:118px;color:rgba(211,116,255,.98);animation:b162ContactCrit 430ms ease-out both}
.b162-contact.is-dodge,.b162-contact.is-miss{display:none}

@keyframes b162Contact{
  0%{opacity:0;scale:.24}
  14%{opacity:1;scale:.64}
  38%{opacity:.96;scale:1}
  70%{opacity:.48;scale:1.28}
  100%{opacity:0;scale:1.62}
}
@keyframes b162ContactCrit{
  0%{opacity:0;scale:.18;rotate:-10deg}
  11%{opacity:1;scale:.58}
  34%{opacity:1;scale:1.02;rotate:3deg}
  65%{opacity:.62;scale:1.34;rotate:8deg}
  100%{opacity:0;scale:1.78;rotate:14deg}
}
@keyframes b162ContactBlock{
  0%{opacity:0;scale:.35}
  18%{opacity:1;scale:.72}
  50%{opacity:.88;scale:1.02}
  100%{opacity:0;scale:1.48}
}

/* Cross-sparks. */
.b162-contact i,
.b162-contact b{
  position:absolute;
  left:50%;
  top:50%;
  width:94px;
  height:3px;
  translate:-50% -50%;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,currentColor 18%,#fff 50%,currentColor 82%,transparent);
  box-shadow:0 0 8px currentColor;
}
.b162-contact i{rotate:21deg}
.b162-contact b{rotate:-34deg}

@media(max-width:430px){
  .b162-contact{width:92px;height:92px}
  .b162-contact.is-crit{width:116px;height:116px}
  .b162-contact.is-counter{width:106px;height:106px}
  .b162-contact i,.b162-contact b{width:82px}
}

@media(prefers-reduced-motion:reduce){
  body.arena-battle014-active #battle014-root .b14-scene.b162-kick-normal,
  body.arena-battle014-active #battle014-root .b14-scene.b162-kick-crit,
  body.arena-battle014-active #battle014-root .b14-scene.b162-kick-block,
  body.arena-battle014-active #battle014-root .b14-scene.b162-kick-counter{
    animation:none!important;
  }
  .b162-impact-frame{animation:b162FrameReduced 150ms ease-out both!important}
  .b162-contact{animation:b162ContactReduced 210ms ease-out both!important}
  @keyframes b162FrameReduced{0%{opacity:0}30%{opacity:.48}100%{opacity:0}}
  @keyframes b162ContactReduced{0%{opacity:0}38%{opacity:.55}100%{opacity:0}}
}