/* Keep the UI cards still; animate the actual portraits like the dungeon fighters. */
#v209PvpBattleOverlay .v209-fighter.attack-right,
#v209PvpBattleOverlay .v209-fighter.attack-left,
#v209PvpBattleOverlay .v209-fighter.hit{animation:none!important}

#v209PvpBattleOverlay .v209-fighter.attack-right .v209-avatar{
  animation:v617PvpStrikeRight .62s cubic-bezier(.18,.76,.23,1)!important;
  z-index:36!important
}
#v209PvpBattleOverlay .v209-fighter.attack-left .v209-avatar{
  animation:v617PvpStrikeLeft .62s cubic-bezier(.18,.76,.23,1)!important;
  z-index:36!important
}
#v209PvpBattleOverlay .v209-fighter.hit .v209-avatar{
  animation:v617PvpHit .48s ease!important
}
#v209PvpBattleOverlay .v209-fighter.v617-dodge .v209-avatar{
  animation:v617PvpDodge .56s cubic-bezier(.2,.8,.2,1)!important
}
#v209PvpBattleOverlay .v209-fighter.v617-guard .v209-avatar{
  animation:v617PvpGuard .58s ease!important
}
@keyframes v617PvpStrikeRight{
  0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:brightness(1)}
  18%{transform:translate3d(-6px,2px,0) rotate(-1.5deg) scale(.99)}
  48%{transform:translate3d(48px,-5px,0) rotate(2deg) scale(1.055);filter:brightness(1.17)}
  62%{transform:translate3d(40px,-2px,0) rotate(1deg) scale(1.035)}
  82%{transform:translate3d(7px,0,0) rotate(0) scale(1.01)}
}
@keyframes v617PvpStrikeLeft{
  0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:brightness(1)}
  18%{transform:translate3d(6px,2px,0) rotate(1.5deg) scale(.99)}
  48%{transform:translate3d(-48px,-5px,0) rotate(-2deg) scale(1.055);filter:brightness(1.17)}
  62%{transform:translate3d(-40px,-2px,0) rotate(-1deg) scale(1.035)}
  82%{transform:translate3d(-7px,0,0) rotate(0) scale(1.01)}
}
@keyframes v617PvpHit{
  0%,100%{transform:translate3d(0,0,0);filter:brightness(1)}
  14%{transform:translate3d(-7px,1px,0) rotate(-1deg);filter:brightness(1.9) saturate(.7)}
  34%{transform:translate3d(9px,-1px,0) rotate(1.5deg);filter:brightness(1.25)}
  56%{transform:translate3d(-5px,0,0)}
  76%{transform:translate3d(3px,0,0)}
}
@keyframes v617PvpDodge{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  30%{transform:translate3d(34px,-9px,0) rotate(3deg) scale(.98);filter:brightness(1.18)}
  58%{transform:translate3d(44px,-5px,0) rotate(2deg) scale(.98)}
  78%{transform:translate3d(9px,0,0) rotate(0)}
}
#v209PvpBattleOverlay .v209-fighter.enemy.v617-dodge .v209-avatar{animation-name:v617PvpDodgeEnemy!important}
@keyframes v617PvpDodgeEnemy{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  30%{transform:translate3d(-34px,-9px,0) rotate(-3deg) scale(.98);filter:brightness(1.18)}
  58%{transform:translate3d(-44px,-5px,0) rotate(-2deg) scale(.98)}
  78%{transform:translate3d(-9px,0,0) rotate(0)}
}
@keyframes v617PvpGuard{
  0%,100%{filter:none;transform:scale(1)}
  22%,62%{filter:drop-shadow(0 0 18px #81d6ff) brightness(1.28);transform:scale(1.018)}
}

/* Directional slash/impact layer, generated by the real PvP attack calls. */
.v617-pvp-slash{position:absolute;z-index:41;top:47%;width:34%;height:68px;pointer-events:none;opacity:0;filter:drop-shadow(0 0 8px #ffd878aa)}
.v617-pvp-slash:before,.v617-pvp-slash:after{content:"";position:absolute;left:0;top:32px;width:100%;height:5px;border-radius:999px;background:linear-gradient(90deg,transparent 0%,#fff4c8 24%,#ffc457 54%,rgba(255,148,42,.15) 86%,transparent 100%);transform:rotate(-12deg);box-shadow:0 0 8px #ffd775,0 0 17px #e89032aa}
.v617-pvp-slash:after{height:2px;top:42px;opacity:.7;transform:rotate(8deg)}
.v617-pvp-slash.to-right{left:32%;animation:v617SlashRight .53s ease-out forwards}
.v617-pvp-slash.to-left{right:32%;transform:scaleX(-1);animation:v617SlashLeft .53s ease-out forwards}
@keyframes v617SlashRight{0%{opacity:0;transform:translateX(-24px) scaleX(.28)}22%{opacity:1}68%{opacity:1;transform:translateX(22px) scaleX(1)}100%{opacity:0;transform:translateX(52px) scaleX(.86)}}
@keyframes v617SlashLeft{0%{opacity:0;transform:scaleX(-1) translateX(-24px) scaleY(.9)}22%{opacity:1}68%{opacity:1;transform:scaleX(-1) translateX(22px) scaleY(1)}100%{opacity:0;transform:scaleX(-1) translateX(52px) scaleY(.86)}}
.v617-pvp-impact{position:absolute;z-index:43;top:45%;width:76px;height:76px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff7d5 0 5%,#ffc45c 6% 13%,rgba(255,168,54,.48) 14% 28%,transparent 56%);filter:drop-shadow(0 0 10px #ffc050);animation:v617Impact .42s ease-out forwards}
.v617-pvp-impact.left{left:19%}.v617-pvp-impact.right{right:19%}
@keyframes v617Impact{0%{opacity:0;transform:scale(.28) rotate(0)}18%{opacity:1}55%{opacity:1;transform:scale(1.14) rotate(24deg)}100%{opacity:0;transform:scale(1.55) rotate(38deg)}}
#v209PvpBattleOverlay .v209-stage.v617-stage-hit{animation:v617StageHit .25s ease}
@keyframes v617StageHit{0%,100%{transform:translateX(0)}30%{transform:translateX(2px)}60%{transform:translateX(-2px)}}

@media(max-width:560px){
 @keyframes v617PvpStrikeRight{0%,100%{transform:translate3d(0,0,0)}18%{transform:translate3d(-4px,1px,0) rotate(-1deg)}48%{transform:translate3d(34px,-4px,0) rotate(2deg) scale(1.04)}68%{transform:translate3d(27px,-1px,0)}82%{transform:translate3d(5px,0,0)}}
 @keyframes v617PvpStrikeLeft{0%,100%{transform:translate3d(0,0,0)}18%{transform:translate3d(4px,1px,0) rotate(1deg)}48%{transform:translate3d(-34px,-4px,0) rotate(-2deg) scale(1.04)}68%{transform:translate3d(-27px,-1px,0)}82%{transform:translate3d(-5px,0,0)}}
 .v617-pvp-slash{top:48%;width:30%;height:58px}.v617-pvp-slash.to-right{left:35%}.v617-pvp-slash.to-left{right:35%}
 .v617-pvp-impact{top:46%;width:62px;height:62px}.v617-pvp-impact.left{left:16%}.v617-pvp-impact.right{right:16%}
}