/* ==== Fight add-on: pose/bg/FX ==== */
.fighter {
  position: absolute;
  bottom: 0;
  width: 320px;
  height: 420px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform, filter;
}

.fighter.me {
  left: 24px;
}

/* Spark */
.spark {
  position: absolute;
  width: 140px;
  height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 12px 18px rgba(255, 255, 255, .35));
}

.spark.on {
  animation: spark .22s ease;
}

@keyframes spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45)
  }

  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05)
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35)
  }
}

/* 파티클 레이어는 arena 내부 absolute여야 함 */
#particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

#particles i.pfx {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--sc, 1)) rotate(var(--rot, 0deg));
  opacity: 1;
  will-change: transform, opacity, filter;
  animation: pfxMove var(--dur, 520ms) cubic-bezier(.15, .7, .25, 1) forwards;
}

/* ✅ 방향성 모션블러(트레일) */
#particles i.pfx::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 12px;
  transform: translate(-50%, -50%) scaleX(var(--dir, 1));
  transform-origin: 50% 50%;
  opacity: .65;
  filter: blur(2.6px);
  background: linear-gradient(90deg,
      rgba(255, 255, 255, .0) 0%,
      rgba(255, 255, 255, .0) 30%,
      rgba(220, 240, 255, .55) 55%,
      rgba(255, 255, 255, .25) 70%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* 불꽃 */
#particles i.pfx.spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, .95),
      rgba(255, 220, 120, .9) 35%,
      rgba(255, 120, 30, .75) 70%,
      rgba(255, 60, 0, 0) 100%);
  filter: blur(.15px) brightness(1.12);
}

/* 금속 파편 */
#particles i.pfx.shard {
  width: 12px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, .92),
      rgba(190, 210, 230, .78) 45%,
      rgba(120, 140, 160, .65) 70%,
      rgba(255, 255, 255, .86));
  box-shadow:
    0 0 10px rgba(200, 230, 255, .35),
    0 0 2px rgba(255, 255, 255, .55) inset;
  filter: contrast(1.12);
}

/* ✅ 글린트(반짝) 1~2회 랜덤: --glint=0/1/2 */
#particles i.pfx.shard {
  animation:
    pfxMove var(--dur, 520ms) cubic-bezier(.15, .7, .25, 1) forwards,
    glint1 calc(var(--dur, 520ms) * .62) ease-in-out var(--gdelay, 0ms);
}

#particles i.pfx.shard[style*="--glint:0"] {
  animation-name: pfxMove;
}

#particles i.pfx.shard[style*="--glint:1"] {
  animation-name: pfxMove, glint1;
}

#particles i.pfx.shard[style*="--glint:2"] {
  animation-name: pfxMove, glint2;
}

@keyframes glint1 {

  0%,
  35%,
  100% {
    filter: contrast(1.12);
  }

  45% {
    filter: contrast(1.22) brightness(1.35);
  }

  55% {
    filter: contrast(1.12);
  }
}

@keyframes glint2 {

  0%,
  28%,
  100% {
    filter: contrast(1.12);
  }

  36% {
    filter: contrast(1.22) brightness(1.35);
  }

  44% {
    filter: contrast(1.12);
  }

  58% {
    filter: contrast(1.22) brightness(1.35);
  }

  66% {
    filter: contrast(1.12);
  }
}

@keyframes pfxMove {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(var(--sc, 1)) rotate(var(--rot, 0deg));
  }

  65% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--sc, 1)) rotate(calc(var(--rot) * 1.2));
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 1.05), calc(var(--dy) * -0.25 + 140px)) scale(calc(var(--sc, 1) * .9)) rotate(calc(var(--rot) * 1.6));
  }
}

/* 이동 + 중력 느낌(아래로 떨어짐) */
@keyframes pfxMove {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(var(--sc, 1)) rotate(var(--rot, 0deg));
  }

  65% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--sc, 1)) rotate(calc(var(--rot) * 1.2));
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 1.05), calc(var(--dy) * -0.25 + 140px)) scale(calc(var(--sc, 1) * .9)) rotate(calc(var(--rot) * 1.6));
  }
}

/* KO flash */
.ko-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
}

.ko-flash.on {
  animation: flash .28s ease;
}

@keyframes flash {
  0% {
    opacity: 0
  }

  25% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* Shake */
.arena.shake {
  animation: shake .32s ease;
}

@keyframes shake {
  0% {
    transform: translate(0, 0)
  }

  15% {
    transform: translate(-6px, 2px)
  }

  30% {
    transform: translate(6px, -2px)
  }

  45% {
    transform: translate(-5px, -1px)
  }

  60% {
    transform: translate(5px, 1px)
  }

  100% {
    transform: translate(0, 0)
  }
}

/* Log highlight */
tr.just-added td {
  background: #fff6c9 !important;
}

.fighter {
  position: absolute;
  bottom: 0;
  width: 240px;
  transition: transform .35s ease;
}

/* 기본 위치 (대기) */
.fighter.me {
  left: 0;
  transform: translateX(0);
}

.fighter.enemy {
  right: 0;
  transform: translateX(0);
}

/* 전투 위치 (중앙 이동) */
.arena.fight .fighter.me {
  transform: translateX(180px);
}

.arena.fight .fighter.enemy {
  transform: translateX(-180px);
}

/* 히트스톱: 순간 강조 */
.arena.hitstop {
  filter: contrast(1.15) brightness(1.08);
}

/* KO 직전 줌/슬로 분위기 */
.arena.ko-zoom {
  animation: koZoom .6s ease-in-out;
  filter: saturate(1.08) contrast(1.08);
}

@keyframes koZoom {
  0% {
    transform: scale(1)
  }

  60% {
    transform: scale(1.06)
  }

  100% {
    transform: scale(1.04)
  }
}

/* 벽콤보 강 쉐이크 */
.arena.shake-hard {
  animation: shakeHard .52s linear;
}

@keyframes shakeHard {
  0% {
    transform: translate(0, 0)
  }

  10% {
    transform: translate(-10px, 3px)
  }

  20% {
    transform: translate(12px, -4px)
  }

  30% {
    transform: translate(-14px, -2px)
  }

  40% {
    transform: translate(12px, 6px)
  }

  50% {
    transform: translate(-10px, -6px)
  }

  60% {
    transform: translate(14px, 3px)
  }

  70% {
    transform: translate(-12px, 4px)
  }

  80% {
    transform: translate(10px, -3px)
  }

  90% {
    transform: translate(-8px, 2px)
  }

  100% {
    transform: translate(0, 0)
  }
}

/* 슈퍼아머 파란 실드 */
.arena .shield-layer {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  border-radius: 22px;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(120, 190, 255, .40), rgba(0, 0, 0, 0) 60%),
    radial-gradient(circle at 50% 70%, rgba(30, 120, 255, .26), rgba(0, 0, 0, 0) 70%);
  box-shadow:
    0 0 0 2px rgba(120, 200, 255, .35) inset,
    0 0 24px rgba(70, 170, 255, .55),
    0 0 46px rgba(40, 120, 255, .35);
  transform: scale(.92);
  filter: saturate(1.2);
}

.arena .shield-layer.on {
  animation: shieldPop .28s ease-out;
}

@keyframes shieldPop {
  0% {
    opacity: 0;
    transform: scale(.86)
  }

  40% {
    opacity: 1;
    transform: scale(1.02)
  }

  100% {
    opacity: 0;
    transform: scale(1.06)
  }
}

/* 벽 스파크(금속) */
.arena .wall-spark {
  position: absolute;
  z-index: 31;
  width: 70px;
  height: 70px;
  pointer-events: none;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) scale(.92);
  filter: brightness(1.15) contrast(1.2);
}

.arena .wall-spark.on {
  animation: wallSpark .26s ease-out;
}

@keyframes wallSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.75) rotate(-10deg)
  }

  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12) rotate(8deg)
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25) rotate(16deg)
  }
}

/* ✅ 히트스톱: 순간 대비/밝기 + 짧은 흔들림 */
.arena.hitstop {
  filter: contrast(1.15) brightness(1.08);
}

.arena.hit-jolt {
  animation: hitJolt 0.12s steps(1, end);
}

@keyframes hitJolt {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(-6px, 2px)
  }
}

/* ✅ KO 직전 줌인 + 비네팅 */
.arena {
  position: relative;
  overflow: hidden;
}

.arena.ko-zoom {
  animation: koZoom .6s ease-in-out;
  filter: saturate(1.08) contrast(1.08);
}

@keyframes koZoom {
  0% {
    transform: scale(1)
  }

  60% {
    transform: scale(1.06)
  }

  100% {
    transform: scale(1.04)
  }
}

.arena.ko-zoom::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, .35) 78%,
      rgba(0, 0, 0, .70) 100%);
  opacity: 0;
  animation: vignetteIn .6s ease-in-out forwards;
}

@keyframes vignetteIn {
  0% {
    opacity: 0
  }

  40% {
    opacity: .55
  }

  100% {
    opacity: .75
  }
}


.arena .wall-scratch {
  position: absolute;
  z-index: 32;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  /* “스크래치” 질감: 금속 긁힘 느낌 */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .28) 18%,
      rgba(180, 210, 240, .22) 40%,
      rgba(255, 255, 255, .18) 62%,
      rgba(0, 0, 0, 0) 100%),
    repeating-linear-gradient(12deg,
      rgba(255, 255, 255, .22) 0px,
      rgba(255, 255, 255, .22) 2px,
      rgba(0, 0, 0, 0) 3px,
      rgba(0, 0, 0, 0) 8px);
  mix-blend-mode: screen;
  filter: contrast(1.1) brightness(1.05);
  border-radius: 10px;
  mask-image: radial-gradient(circle at 55% 45%, #000 0 58%, transparent 75%);
}

.arena .wall-scratch.on {
  animation: wallScratch .65s ease-out forwards;
}

@keyframes wallScratch {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(.92) rotate(calc(8deg * var(--flip, 1)))
  }

  18% {
    opacity: .9;
    transform: translateZ(0) scale(1.02) rotate(calc(-10deg * var(--flip, 1)))
  }

  100% {
    opacity: 0;
    transform: translateZ(0) scale(1.06) rotate(calc(-16deg * var(--flip, 1)))
  }
}

/* 기본 바운스 (대기) */
@keyframes fighterBounceIdle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* 전투 중 더 빠른 바운스 */
@keyframes fighterBounceFight {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* 상태 클래스 */
.fighter-idle {
  animation: fighterBounceIdle 1.2s ease-in-out infinite;
}

.fighter-fight {
  animation: fighterBounceFight .55s ease-in-out infinite;
}

/* ===== bounce (HP 연동) ===== */
/* 두 파이터 공통: transform은 CSS가 관리, JS는 --tx만 바꿈 */
#me,
#enemy {
  --tx: 0px;
  --bounce-amp: 2px;
  --bounce-dur: 1000ms;
  transform: translateX(var(--tx)) translateY(0);
  will-change: transform;
}

/* idle 바운스 */
.fighter-idle {
  animation: bounceIdle var(--bounce-dur) ease-in-out infinite;
}

@keyframes bounceIdle {

  0%,
  100% {
    transform: translateX(var(--tx)) translateY(0);
  }

  50% {
    transform: translateX(var(--tx)) translateY(calc(var(--bounce-amp) * -1));
  }
}

/* fight 바운스 */
.fighter-fight {
  animation: bounceFight var(--bounce-dur) ease-in-out infinite;
}

@keyframes bounceFight {

  0%,
  100% {
    transform: translateX(var(--tx)) translateY(0);
  }

  50% {
    transform: translateX(var(--tx)) translateY(calc(var(--bounce-amp) * -1.2));
  }
}

.arena.micro-shake {
  animation: microShake 140ms linear 1;
}

@keyframes microShake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1px, 0px);
  }

  50% {
    transform: translate(1px, 0px);
  }

  75% {
    transform: translate(0px, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}


/* ===== 착지 먼지 ===== */
.dust {
  position: absolute;
  width: 120px;
  height: 60px;
  pointer-events: none;
  background: url("./assets/img/effects/dust.png") center/contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
}

.dust.on {
  animation: dustPop .45s ease-out forwards;
}

@keyframes dustPop {
  0% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(.5);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1.2);
  }
}


/* ===== 카메라 미세 흔들림 ===== */
.arena.micro-shake {
  animation: camMicro .18s linear;
}

@keyframes camMicro {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1px, 1px);
  }

  50% {
    transform: translate(1px, -1px);
  }

  75% {
    transform: translate(-1px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}


/* ===== HP 낮을수록 바운스 ===== */
.fighter-lowhp {
  animation-duration: .35s !important;
}

/* ===== dust layer ===== */
.arena {
  position: relative;
  overflow: hidden;
}

.dust-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.dust {
  position: absolute;
  width: 40px;
  height: 22px;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  filter: blur(.2px);
}

.dust::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

.dust.on {
  animation: dustPop .52s ease-out forwards;
}

@keyframes dustPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
  }

  15% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(calc(1.0 + var(--p, 1)*0.35));
  }
}


/* ===== micro shake ===== */
.micro-shake {
  animation: microShake .14s linear;
}

@keyframes microShake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1px, 0);
  }

  50% {
    transform: translate(1px, 0);
  }

  75% {
    transform: translate(0, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}