.card.status-shield .card-body,
.card.status-shield .attacks {
  border-color: #3498db !important;
  box-shadow:
    0 0 30px rgba(52, 152, 219, 0.9),
    inset 0 0 20px rgba(52, 152, 219, 0.5) !important;
}
.card.status-burn .card-body,
.card.status-burn .attacks {
  animation: auraBurn 1s infinite alternate !important;
}
.card.status-para .card-body,
.card.status-para .attacks {
  animation: auraPara 0.15s infinite alternate !important;
}
.card.status-poison .card-body,
.card.status-poison .attacks {
  animation: auraPoison 1.5s infinite alternate !important;
}
.card.status-mark .card-body,
.card.status-mark .attacks {
  box-shadow:
    0 0 30px rgba(231, 76, 60, 0.8),
    inset 0 0 20px rgba(231, 76, 60, 0.5) !important;
  border-color: #e74c3c !important;
}
.card.status-counter .card-body,
.card.status-counter .attacks {
  box-shadow:
    0 0 30px rgba(189, 195, 199, 0.8),
    inset 0 0 20px rgba(189, 195, 199, 0.5) !important;
  border-color: #bdc3c7 !important;
}

/* ANIMÁCIÓK */
.card.anim-attack {
  animation: lungePC 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  z-index: 10 !important;
}
.card.anim-damage {
  animation: shakePC 0.4s ease-in-out;
}
.card.anim-damage .card-body,
.card.anim-damage .attacks {
  border-color: #ff4757 !important;
  box-shadow:
    0 0 25px #ff4757,
    inset 0 0 15px rgba(255, 71, 87, 0.4) !important;
}
.card.anim-heal .card-body,
.card.anim-heal .attacks {
  animation: healPulse 0.6s ease-out;
}
.card.anim-charge .card-body,
.card.anim-charge .attacks {
  animation: chargePulse 0.6s ease-out;
}
.screen-shake {
  animation: globalShake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transition: none !important;
}

@keyframes lungePC {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shakePC {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}
@keyframes healPulse {
  50% {
    box-shadow:
      0 0 30px rgba(46, 204, 113, 0.8),
      inset 0 0 20px rgba(46, 204, 113, 0.5) !important;
    border-color: #2ecc71 !important;
  }
}
@keyframes chargePulse {
  50% {
    box-shadow:
      0 0 30px rgba(243, 156, 18, 0.8),
      inset 0 0 20px rgba(243, 156, 18, 0.5) !important;
    border-color: #f39c12 !important;
  }
}
@keyframes auraBurn {
  from {
    border-color: #e67e22;
    box-shadow:
      0 0 15px #e67e22,
      0 0 30px #e74c3c;
  }
  to {
    border-color: #ff4d4d;
    box-shadow:
      0 0 25px #ff4d4d,
      0 0 55px #ff944d;
  }
}
@keyframes auraPara {
  0%,
  100% {
    border-color: #f1c40f;
    box-shadow: 0 0 15px #f1c40f;
  }
  50% {
    border-color: #fff;
    box-shadow:
      0 0 35px #f1c40f,
      0 0 10px #fff;
    filter: brightness(1.2);
  }
}
@keyframes auraPoison {
  from {
    border-color: #8e44ad;
    box-shadow:
      0 0 15px #8e44ad,
      0 0 30px #9b59b6;
  }
  to {
    border-color: #2ecc71;
    box-shadow:
      0 0 25px #2ecc71,
      0 0 55px #27ae60;
  }
}
@keyframes globalShake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-8px, 5px);
  }
  40% {
    transform: translate(8px, -5px);
  }
  60% {
    transform: translate(-5px, -3px);
  }
  80% {
    transform: translate(5px, 3px);
  }
}

/* --- LÖVEDÉK EFFEKTEK --- */
.projectile {
  position: fixed;
  width: 50px;
  height: 50px;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  transition: transform 0.45s linear;
  transform: translate(0, 0) rotate(0deg);
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
  will-change: transform;
}

/* --- RÉSZECSKE ÉS BECSAPÓDÁS --- */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  animation: particle-fly 0.6s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes particle-fly {
  0% {
    transform: translate(0, 0) scale(1.5) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0) rotate(360deg);
    opacity: 0;
  }
}

.impact-effect {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  z-index: 10001;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: impact-ripple 0.4s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes impact-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
    border-width: 10px;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
    border-width: 1px;
  }
}

/* --- PAJZS SCANLINE EFFEKT --- */
.shield-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(52, 152, 219, 0.8), transparent);
  background-size: 100% 50px;
  background-repeat: no-repeat;
  z-index: 26;
  pointer-events: none;
  animation: shield-scan 0.7s ease-out forwards;
  will-change: background-position, opacity;
}
@keyframes shield-scan {
  0% {
    background-position: 0 100%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    background-position: 0 0;
    opacity: 0;
  }
}

.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10002;
  opacity: 0;
  animation: flash-anim 0.2s ease-out;
  will-change: opacity;
}
@keyframes flash-anim {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

/* --- LEBEGŐ HARCI SZÖVEG (FLOATING COMBAT TEXT) --- */
.floating-text {
  position: fixed;
  pointer-events: none;
  z-index: 10003;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 1),
    0 4px 6px rgba(0, 0, 0, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

.floating-text.dmg {
  color: #ff4757;
  animation: float-dmg 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.floating-text.crit {
  color: #ffa502;
  font-size: 3.2rem;
  text-shadow:
    0 0 15px rgba(255, 165, 2, 0.9),
    0 0 5px #fff,
    0 4px 10px rgba(0, 0, 0, 1);
  animation: float-crit 1s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
}

.floating-text.heal {
  color: #2ecc71;
  animation: float-up-fade 0.8s ease-out forwards;
}

.floating-text.shield {
  color: #3498db;
  animation: float-up-fade 0.8s ease-out forwards;
}

.floating-text.status {
  font-size: 1.8rem;
  animation: float-status 0.9s ease-out forwards;
}

.floating-text.miss {
  color: #a4b0be;
  font-size: 1.8rem;
  animation: float-miss 0.7s ease-out forwards;
}

@keyframes float-dmg {
  0% {
    transform: scale(0.3) translateY(20px) rotate(5deg);
    opacity: 0;
  }
  30% {
    transform: scale(1.1) translateY(-20px) rotate(-5deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(-60px) rotate(-10deg);
    opacity: 0;
  }
}

@keyframes float-crit {
  0% {
    transform: scale(0.2) translateY(30px) rotate(-10deg);
    opacity: 0;
  }
  25% {
    transform: scale(1.4) translateY(-30px) rotate(10deg);
    opacity: 1;
  }
  40% {
    transform: scale(1.2) translateY(-20px) rotate(5deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(0.9) translateY(-85px) rotate(-5deg);
    opacity: 0;
  }
}

@keyframes float-up-fade {
  0% {
    transform: scale(0.5) translateY(10px);
    opacity: 0;
  }
  20% {
    transform: scale(1) translateY(-10px);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: scale(0.9) translateY(-50px);
    opacity: 0;
  }
}

@keyframes float-status {
  0% {
    transform: scale(0.5) translateY(10px) translateX(0);
    opacity: 0;
  }
  20% {
    transform: scale(1) translateY(-10px) translateX(5px);
    opacity: 1;
  }
  40% {
    transform: translateY(-25px) translateX(-5px);
  }
  60% {
    transform: translateY(-40px) translateX(5px);
  }
  100% {
    transform: scale(0.8) translateY(-60px);
    opacity: 0;
  }
}

@keyframes float-miss {
  0% {
    transform: scale(0.8) translateY(10px) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: scale(1) translateY(-15px) rotate(-10deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.9) translateY(-30px) rotate(-15deg);
    opacity: 0;
  }
}

/* --- KÉPERNYŐ-RÁZKÓDÁS VÁLTOZATOK --- */
.screen-shake-subtle {
  animation: shake-subtle 0.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transition: none !important;
}

.screen-shake-heavy {
  animation: shake-heavy 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transition: none !important;
}

.screen-shake-shield-break {
  animation: shake-shield 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transition: none !important;
}

@keyframes shake-subtle {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-3px, 3px);
  }
  50% {
    transform: translate(3px, -3px);
  }
  75% {
    transform: translate(-1.5px, -1.5px);
  }
}

@keyframes shake-heavy {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-12px, 9px) rotate(-1.5deg);
  }
  20% {
    transform: translate(12px, -9px) rotate(1.5deg);
  }
  30% {
    transform: translate(-9px, -6px) rotate(-0.5deg);
  }
  40% {
    transform: translate(9px, 6px) rotate(0.5deg);
  }
  50% {
    transform: translate(-6px, 4px);
  }
  60% {
    transform: translate(6px, -4px);
  }
  70% {
    transform: translate(-4px, -1.5px);
  }
  80% {
    transform: translate(4px, 1.5px);
  }
  90% {
    transform: translate(-1.5px, 1.5px);
  }
}

@keyframes shake-shield {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-8px, 0);
  }
  40% {
    transform: translate(8px, 0);
  }
  60% {
    transform: translate(-4px, 0);
  }
  80% {
    transform: translate(4px, 0);
  }
}

/* --- HALADÓ RÉSZECSKE EFFEKTEK --- */
.particle.blood {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  animation: particle-blood-fall 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes particle-blood-fall {
  0% {
    transform: translate(0, 0) scale(1) rotate(-45deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0) rotate(135deg);
    opacity: 0;
  }
}

.particle.shield-shard {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: particle-shard-fly 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes particle-shard-fly {
  0% {
    transform: translate(0, 0) scale(1.5) rotate(0deg);
    opacity: 1;
    filter: brightness(1.5);
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0.2) rotate(720deg);
    opacity: 0;
  }
}

.particle.status-spark {
  border-radius: 20%;
  animation: particle-spark-rise 0.7s ease-out forwards;
}

@keyframes particle-spark-rise {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0) rotate(180deg);
    opacity: 0;
  }
}
/* --- LÁTVÁNYOS KÁRTYA HALÁL EFFEKT --- */
.card.anim-death {
  z-index: 100 !important;
  transition: none !important;
  animation: cardCollapse 1.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards !important;
}

.card.anim-death .card-body {
  transition: none !important;
}

.card.anim-death .attacks {
  transition: none !important;
}

@keyframes cardCollapse {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  15% {
    transform: scale(1.08) rotate(4deg);
    opacity: 1;
  }
  40% {
    transform: scale(0.9) rotate(-5deg) translateY(-15px);
    opacity: 0.9;
  }
  100% {
    transform: scale(0) rotate(-20deg) translateY(180px);
    opacity: 0;
  }
}