@keyframes damageTaken {
  20% {
    transform: translateY(-10px);
    opacity: 1;
  }

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

@keyframes healthGained {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes bossDamageTaken {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

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

@keyframes bossHealthRecovered {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

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

.damage-taken {
  opacity: 0;
  position: absolute;
  left: 20px;
  top: 20px;
  animation: damageTaken 3s ease-in-out;
  animation-delay: 1.5s;
}

.health-gained {
  opacity: 0;
  position: absolute;
  right: 20px;
  top: 20px;
  animation: healthGained 3s ease-in-out;
  animation-delay: 1.8s;
}

.health-stolen {
  opacity: 0;
  position: absolute;
  right: 20px;
  top: 20px;
  animation: healthGained 2s ease-in-out;
  animation-delay: 2.4s;
}

.boss-damage-taken {
  opacity: 0;
  position: absolute;
  left: 20px;
  top: 20px;
  animation: bossDamageTaken 3s ease-in-out;
  animation-delay: 0.3s;
}

/* .boss-health-recovered {
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    animation: bossHealthRecovered 4s ease-in-out;
    animation-delay: 3.2s;
  } */






@keyframes flash-fade-out {
  0% {
    opacity: 1;
  }

  /* 5% { opacity: 0.2; }
    10% { opacity: 1; } */
  15% {
    opacity: 0.2;
  }

  /* 20% { opacity: 1; }
    25% { opacity: 0.2; } */
  30% {
    opacity: 1;
  }

  /* 50% { opacity: 0.8; } */
  100% {
    opacity: 0;
    display: none;
  }

  /* Biến mất hoàn toàn */
}

/* Cách sử dụng */
.element-flash-fade {
  animation: flash-fade-out 3s forwards;
  /* 1.5 giây, giữ trạng thái cuối cùng */
}

.user_effect .block-rate-effect.element-flash-fade {
  animation: flash-fade-out 3s forwards;
  /* 1.5 giây, giữ trạng thái cuối cùng */
  animation-delay: 1.1s;
}

.user_effect .heal-rate-effect.element-flash-fade {
  animation: flash-fade-out 4s forwards;
  /* 1.5 giây, giữ trạng thái cuối cùng */
  animation-delay: 1.6s;
}


@keyframes flash-fade-in {
  0% {
    opacity: 0;
  }

  /* 5% { opacity: 0.2; }
    10% { opacity: 1; } */
  15% {
    opacity: 0.2;
  }

  /* 20% { opacity: 1; }
    25% { opacity: 0.2; } */
  30% {
    opacity: 0.7;
  }

  /* 50% { opacity: 0.8; } */
  100% {
    opacity: 1;
    display: block;
  }
}

.user_effect .frozen-effect {
  animation: flash-fade-in 2s forwards;
  /* 1.5 giây, giữ trạng thái cuối cùng */
  animation-delay: 1.2s;
}

.boss_effect .frozen-effect {
  animation: flash-fade-in 2s forwards;
  /* 1.5 giây, giữ trạng thái cuối cùng */
  animation-delay: 0.2s;
}




@keyframes shake-rapid {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  80% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Cách sử dụng */
.element-shake-rapid {
  animation: shake-rapid 0.8s ease-in-out;
}

/* Cách sử dụng */
.user_effect .element-shake-rapid {
  animation: shake-rapid 0.8s ease-in-out;
  animation-delay: 1.2s;
}




.user_atk {
  animation: atk-right-enemy 0.5s ease-in-out;
}

@keyframes atk-right-enemy {
  0% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(150px);
  }

  /* Phình to lại */
  100% {
    transform: translateX(0);
  }

  /* Thu nhỏ về 0 và biến mất */
}

.boss_atk {
  animation: atk-left-enemy 0.5s ease-in-out;
  animation-delay: 1.2s;
}

@keyframes atk-left-enemy {
  0% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(-150px);
  }

  /* Phình to lại */
  100% {
    transform: translateX(0);
  }

  /* Thu nhỏ về 0 và biến mất */
}

.battle_result {
  display: none;
}

.battle_result.victory {
  display: block;
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url("../uploads/elements/victory-2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  animation: victoryAnimation 2s ease;
  z-index: 300;
}

.battle_result.defeat {
  display: block;
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url("../uploads/elements/defeat-2.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  animation: defeatAnimation 2s ease;
  z-index: 300;
}

@keyframes victoryAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes defeatAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* Tùy chỉnh nhanh bằng CSS variables */
.right_to_cook {
  --start-offset: 120vw;
  /* bắt đầu ngoài màn hình bên phải */
  --end-offset: -120vw;
  /* kết thúc ngoài màn hình bên trái */
  --enter-time: 0.25s;
  /* thời gian lao vào */
  --hold-time: 2s;
  /* thời gian giữ lại */
  --exit-time: 0.6s;
  /* thời gian đi ra trái */

  animation: rtc-slide calc(var(--enter-time) + var(--hold-time) + var(--exit-time)) ease-in-out forwards;
  will-change: transform, opacity;
  pointer-events: none;
  /* không chặn click; bỏ nếu cần tương tác */
}

/* Keyframes: vào nhanh -> giữ -> đi ra trái và biến mất */
@keyframes rtc-slide {

  /* 0%  ->  nhanh vào */
  0% {
    transform: translateX(var(--start-offset));
    opacity: 0.001;
  }

  /* vào xong đứng yên ở vị trí (0) */
  /* Tính tỉ lệ thời gian để đặt các mốc phần trăm chính xác */
  /* enter% = enter-time / total; hold% = hold-time / total */
  /* Với mặc định: 0.25/(0.25+2+0.6) ≈ 8.1% ; (0.25+2)/(2.85) ≈ 78.9% */

  8% {
    transform: translateX(0);
    opacity: 1;
  }

  79% {
    transform: translateX(0);
    opacity: 1;
    /* giữ 2s */
  }

  /* thoát sang trái và mờ dần */
  100% {
    transform: translateX(var(--end-offset));
    opacity: 0;
  }
}

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .right_to_cook {
    animation: none;
    transform: none;
    opacity: 1;
  }
}