/* Basic Shake Animation for taking damage */
@keyframes shake {

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

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

/* Basic Lunge Animation for attacking */
@keyframes lunge {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(0, -15px) scale(1.1);
  }

  /* Move up/forward slightly and scale up */
  100% {
    transform: translate(0, 0) scale(1);
  }
}

.lunge-attack {
  animation: lunge 0.6s ease-in-out;
  position: relative;
  /* Needed for z-index to work during animation */
  z-index: 10;
  /* Bring attacking card to the front */
}

/* Heal Pulse Animation */
@keyframes heal-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }

  /* Green glow start */
  70% {
    box-shadow: 0 0 10px 15px rgba(76, 175, 80, 0);
  }

  /* Green glow expand */
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }

  /* Green glow end */
}

.heal-pulse {
  animation: heal-pulse 0.8s ease-out;
}

/* Add other animations as needed */

/* --- Venom Status Effects --- */
@keyframes venom-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(120, 255, 0, 0.5);
  }

  /* Toxic green glow start */
  50% {
    box-shadow: 0 0 10px 5px rgba(120, 255, 0, 0.3);
  }

  /* Toxic green glow expand */
  100% {
    box-shadow: 0 0 0 0 rgba(120, 255, 0, 0.1);
  }

  /* Toxic green glow fade */
}

/* Apply to cards with Venom status */
.venomed {
  animation: venom-pulse 2s infinite ease-in-out;
  position: relative;
  /* Ensure position for the indicator */
}

/* Status indicator for Venom */
.venom-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #7fff00;
  /* Bright green */
  font-size: 14px;
  z-index: 10;
  box-shadow: 0 0 3px 1px rgba(120, 255, 0, 0.6);
}

/* --- Melee Slash Animation --- */
@keyframes slash {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  30% {
    transform: translate(20px, -10px) rotate(15deg) scale(1.1);
    opacity: 1;
  }

  /* Lunge forward */
  60% {
    transform: translate(-10px, 5px) rotate(-10deg) scale(1.05);
    opacity: 1;
  }

  /* Quick slash back */
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

.slash-attack {
  animation: slash 0.5s ease-out;
  position: relative;
  /* Ensure z-index works */
  z-index: 10;
}

/* --- Fireball Projectile Style (Applied to .attack-effect) --- */
.attack-effect.fireball {
  width: 25px;
  /* Adjust size */
  height: 25px;
  background: radial-gradient(circle, #ffcc00, #ff6600);
  /* Yellow/Orange gradient */
  border-radius: 50%;
  box-shadow: 0 0 10px 5px #ff8800;
  /* Orange glow */
  /* Override default arrow styles */
  transform-origin: center center;
  animation: fireball-travel 0.5s linear forwards;
  /* Use a different animation */
}

.attack-effect.fireball::after {
  /* Remove arrow head */
  content: none;
}

@keyframes fireball-travel {
  0% {
    transform: scale(0.5) rotate(var(--angle, 0deg));
    /* Start small */
    opacity: 0.8;
  }

  100% {
    transform: translate(var(--end-x, 0px), var(--end-y, 0px)) scale(1) rotate(var(--angle, 0deg));
    /* Move to target */
    opacity: 1;
  }
}

/* --- Ice Shatter Impact --- */
@keyframes ice-shatter {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }

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

.impact-effect.ice-shatter {
  width: 50px;
  /* Adjust size */
  height: 50px;
  /* Add missing properties based on previous context and standard impact styling */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 61.8,38.2 100,38.2 69.1,61.8 80.9,100 50,76.4 19.1,100 30.9,61.8 0,38.2 38.2,38.2" fill="%23ADD8E6" stroke="%23FFFFFF" stroke-width="2"/></svg>');
  /* Example ice shard SVG */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  animation: ice-shatter 0.4s ease-out forwards;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  /* Ensure it's above cards */
}

/* Close the .impact-effect.ice-shatter rule */

/* --- Damage Flash Animation --- */
.card-damaged {
  animation: damage-flash 0.4s ease-out;
}

@keyframes damage-flash {

  0%,
  100% {
    /* Start and end states */
    transform: translateX(0) rotate(0);
    filter: brightness(1);
    /* Use filter for overlay effect */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  20% {
    /* Quick shake left */
    transform: translateX(-4px) rotate(-2deg);
    filter: brightness(0.8) sepia(100%) hue-rotate(-50deg) saturate(600%);
    /* Red tint */
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
    /* Stronger red glow */
  }

  40% {
    /* Quick shake right */
    transform: translateX(4px) rotate(2deg);
    filter: brightness(0.9) sepia(80%) hue-rotate(-45deg) saturate(500%);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
  }

  60% {
    /* Settle back slightly */
    transform: translateX(-1px) rotate(-0.5deg);
    filter: brightness(1);
    /* Fade tint */
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.3);
  }

  80% {
    transform: translateX(1px) rotate(0.5deg);
  }
}

/* Closing brace for @keyframes damage-flash */

/* --- Summon Animation --- */
.card-summoned {
  animation: summon-in 0.5s ease-out;
}

@keyframes summon-in {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

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

/* --- Destroy Animation --- */
.card-destroyed {
  animation: destroy-out 0.5s ease-in forwards;
  /* forwards keeps the final state */
  /* Ensure it stays in place during animation if needed */
  position: relative;
}

/* --- Slash Attack Visual (Applied to .attack-effect) --- */
.attack-effect.slash-visual {
  width: 50px;
  /* Adjust size of the slash */
  height: 50px;
  background: none;
  /* No background needed */
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.8);
  /* White slash color */
  position: absolute;
  opacity: 0;
  transform-origin: center center;
  animation: slash-effect-anim 0.3s ease-out forwards;
  /* Positioned by JS, but animation handles the visual effect */
  z-index: 1;
  /* Keep above others briefly if overlapping - Moved inside */
}

@keyframes slash-effect-anim {
  0% {
    opacity: 1;
    transform: rotate(-45deg) scale(0.5);
    border-width: 3px;
  }

  50% {
    border-width: 5px;
    /* Thicken slash mid-animation */
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) scale(1.2);
    border-width: 1px;
  }
}

/* Removed extraneous z-index and closing brace */


/* --- Default Attack Projectile Style & Animation --- */
.attack-effect {
  position: absolute;
  width: 20px;
  /* Length of the line */
  height: 4px;
  /* Thickness of the line */
  background-color: yellow;
  border-radius: 2px;
  transform-origin: center left;
  /* Rotate around the starting point */
  transform: rotate(var(--angle, 0deg));
  /* Apply initial rotation */
  opacity: 0;
  animation: default-attack-travel 0.4s linear forwards;
  z-index: 1000;
  /* Ensure it's visible */
  pointer-events: none;
  /* Prevent interaction */
}

@keyframes default-attack-travel {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--angle, 0deg));
  }

  100% {
    opacity: 1;
    transform: translate(var(--end-x, 0px), var(--end-y, 0px)) rotate(var(--angle, 0deg));
  }
}

@keyframes destroy-out {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
    filter: grayscale(50%) brightness(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(0.7);
    filter: grayscale(100%) brightness(0.5);
  }
}

/* --- Drag and Drop Animation --- */
.card.dragging {
  opacity: 0.7;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  cursor: grabbing;
  z-index: 1000;
}

/* Attack animation */
@keyframes card-attack {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-15px) scale(1.1);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.card-attacking {
  animation: card-attack 0.5s ease-in-out;
  z-index: 100;
}

/* Enhanced attack animation for better visibility */
.enhanced-attack-animation {
  animation: enhanced-card-attack 0.7s ease-in-out;
  filter: brightness(1.5) contrast(1.2);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
  z-index: 110;
}

/* Sound effect visual indicator */
.sound-effect-indicator {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url('../images/sound-wave.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: sound-effect 0.5s ease-out;
  pointer-events: none;
  z-index: 1000;
}

/* Enhanced sound effect indicator */
.sound-effect-indicator.enhanced {
  width: 40px;
  height: 40px;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  background-image: none;
  background-color: rgba(255, 0, 0, 0.3);
  border-radius: 50%;
  opacity: 1;
  animation: enhanced-sound-effect 1s ease-out;
}

/* Enhanced attack animation keyframes */
@keyframes enhanced-card-attack {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1) contrast(1);
  }

  10% {
    transform: translateY(-5px) scale(1.05);
    filter: brightness(1.2) contrast(1.1);
  }

  50% {
    transform: translateY(-20px) scale(1.15);
    filter: brightness(1.5) contrast(1.2);
  }

  90% {
    transform: translateY(-5px) scale(1.05);
    filter: brightness(1.2) contrast(1.1);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) contrast(1);
  }
}

/* Enhanced sound effect animation */
@keyframes enhanced-sound-effect {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }

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

@keyframes sound-effect {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

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

/* ===== PHASE TRANSITION ANIMATION - DISABLED ===== */
/* This animation was used for the blue modal popup during phase transitions */
/*
@keyframes phase-transition {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
    filter: brightness(1.5) blur(5px);
  }

  20% {
    opacity: 1;
    transform: translateY(0) scale(1.2);
    filter: brightness(2) blur(0px);
  }

  80% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
    filter: brightness(1.8) blur(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    filter: brightness(1) blur(2px);
  }
}
*/

/* Phase transition modal popup - DISABLED */
/* This creates the blue modal popup during phase transitions */
/*
.phase-transition-effect {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 150, 255, 0.8), 0 0 20px rgba(0, 100, 255, 0.6);
  z-index: 200;
  pointer-events: none;
  animation: phase-transition 1.5s ease-in-out forwards;
  background: radial-gradient(circle, rgba(0, 100, 255, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  padding: 20px 40px;
  border-radius: 10px;
  white-space: nowrap;
}
*/

/* ===== AETHER CRYSTAL ANIMATIONS ===== */
@keyframes aether-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 2px rgba(100, 200, 255, 0.5));
  }

  50% {
    transform: scale(1.15);
    filter: brightness(1.5) drop-shadow(0 0 8px rgba(100, 200, 255, 0.8));
  }

  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 2px rgba(100, 200, 255, 0.5));
  }
}

@keyframes aether-gain {
  0% {
    transform: scale(0.5);
    opacity: 0;
    filter: brightness(2) drop-shadow(0 0 10px rgba(100, 200, 255, 0.9));
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    filter: brightness(1.8) drop-shadow(0 0 15px rgba(100, 200, 255, 0.8));
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 5px rgba(100, 200, 255, 0.6));
  }
}

.aether-crystal.full {
  animation: aether-pulse 2s infinite ease-in-out;
}

.aether-crystal.gaining {
  animation: aether-gain 0.8s ease-out forwards;
}

/* ===== DAMAGE EFFECT ANIMATIONS ===== */
@keyframes screen-shake {

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

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes damage-flash {

  0%,
  100% {
    background-color: rgba(255, 0, 0, 0);
  }

  50% {
    background-color: rgba(255, 0, 0, 0.3);
  }
}

.screen-shake {
  animation: screen-shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

.damage-flash {
  animation: damage-flash 0.5s ease-out;
  pointer-events: none;
}

/* ===== CARD DRAW ANIMATION ENHANCEMENT ===== */
@keyframes enhanced-card-draw {
  0% {
    transform: translateY(20px) scale(0.8);
    opacity: 0;
    filter: brightness(0.8) blur(2px);
  }

  60% {
    transform: translateY(-10px) scale(1.05);
    opacity: 1;
    filter: brightness(1.2) blur(0px);
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: brightness(1) blur(0px);
  }
}

.card.drawn {
  animation: enhanced-card-draw 0.7s ease-out forwards;
}

/* ===== NEXT PHASE BUTTON ANIMATION ===== */
@keyframes phase-button-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    transform: scale(1);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
}

.next-phase-prompt.active {
  animation: phase-button-pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* --- Heavy Impact Attack Animation --- */
@keyframes heavy-impact {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }

  20% {
    transform: translate(-5px, -5px) rotate(-5deg) scale(1.05);
    opacity: 1;
  }

  40% {
    transform: translate(30px, -15px) rotate(10deg) scale(1.2);
    opacity: 1;
  }

  /* Powerful forward lunge */
  70% {
    transform: translate(-10px, 5px) rotate(-5deg) scale(1.1);
    opacity: 1;
  }

  /* Return to normal */
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

.heavy-impact-attack {
  animation: heavy-impact 0.7s ease-in-out;
  position: relative;
  z-index: 10;
}

/* --- Projectile Attack Animation --- */
@keyframes projectile-attack {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

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

  /* Slight backward motion before "firing" */
  60% {
    transform: translate(-5px, -5px) scale(1.02);
    opacity: 1;
  }

  /* Return to normal */
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

.projectile-attack {
  animation: projectile-attack 0.5s ease-out;
  position: relative;
  z-index: 10;
}

/* --- Magic Projectile Style --- */
.attack-effect.magic-projectile {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #a64dff, #6600cc);
  border-radius: 50%;
  box-shadow: 0 0 10px 5px #9933ff;
  transform-origin: center center;
  animation: magic-projectile-travel 0.6s linear forwards;
}

.attack-effect.magic-projectile::after {
  content: none;
}

@keyframes magic-projectile-travel {
  0% {
    transform: scale(0.5) rotate(var(--angle, 0deg));
    opacity: 0.8;
  }

  100% {
    transform: translate(var(--end-x, 0px), var(--end-y, 0px)) scale(1.2) rotate(var(--angle, 0deg));
    opacity: 1;
  }
}

/* --- Heavy Impact Effect --- */
@keyframes heavy-impact-effect {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }

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

.impact-effect.heavy-impact {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 150, 0, 0.8), rgba(255, 50, 0, 0.6));
  border-radius: 50%;
  box-shadow: 0 0 15px 8px rgba(255, 100, 0, 0.5);
  animation: heavy-impact-effect 0.5s ease-out forwards;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
}

/* --- Card Play Animations --- */

/* Animation for the "flying" card placeholder */
.flying-card-placeholder {
  position: fixed;
  /* Use fixed to overlay on everything during animation */
  /* background-color: #ccc; /* Placeholder visual */
  /* border: 1px solid #333; */
  /* width: 80px; /* Will be set by JS to match card */
  /* height: 110px; /* Will be set by JS to match card */
  z-index: 2000;
  /* Above other UI elements */
  pointer-events: none;
  /* Don't interfere with mouse events */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  /* Smooth flight */
  opacity: 1;
  /* box-shadow: 0 0 15px rgba(255, 255, 100, 0.7); */
  /* Optional glow */
}

/* Summon Impact Flash Animation */
@keyframes summon-impact-flash {
  0% {
    opacity: 0.8;
    transform: scale(1);
    box-shadow: 0 0 15px 10px rgba(255, 255, 150, 0.7),
      /* Yellowish core */
      0 0 30px 20px rgba(255, 220, 100, 0.5);
    /* Outer glow */
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 25px 15px rgba(255, 255, 200, 0.9),
      0 0 45px 30px rgba(255, 230, 120, 0.7);
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
    box-shadow: 0 0 35px 20px rgba(255, 255, 255, 0),
      0 0 60px 40px rgba(255, 240, 150, 0);
  }
}

.summon-impact-effect {
  position: absolute;
  /* Position within the zone */
  width: 100%;
  /* Cover the zone or card */
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  /* Match parent's border radius */
  animation: summon-impact-flash 0.3s ease-out forwards;
  pointer-events: none;
  z-index: 1;
  /* Above the card in the zone, but below hand/etc. */
}

/* Existing summon-in can be used for the card appearing after flight */
/* .card-summoned {
  animation: summon-in 0.5s ease-out;
}

@keyframes summon-in {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
} */

/* ===== CARD DRAW ANIMATION ===== */
@keyframes card-draw-from-deck {
  0% {
    opacity: 0;
    transform: translateY(40px) translateX(0) scale(0.6) rotateY(180deg);
    filter: brightness(0.5) blur(3px);
  }
  
  30% {
    opacity: 0.7;
    transform: translateY(20px) translateX(10px) scale(0.8) rotateY(90deg);
    filter: brightness(0.8) blur(1px);
  }
  
  70% {
    opacity: 0.9;
    transform: translateY(-5px) translateX(-5px) scale(1.05) rotateY(10deg);
    filter: brightness(1.2) blur(0px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) rotateY(0deg);
    filter: brightness(1) blur(0px);
  }
}

@keyframes deck-to-hand-travel {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  
  50% {
    opacity: 0.8;
    transform: scale(0.5) translateY(-20px);
  }
  
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-40px) translateX(var(--end-x, 0px));
  }
}

.card-draw-animation {
  position: fixed;
  width: 60px;
  height: 84px;
  background: linear-gradient(135deg, #4a90e2, #7b68ee);
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.6);
  z-index: 1500;
  pointer-events: none;
  animation: deck-to-hand-travel 0.7s ease-out forwards;
}

.card-draw-animation.player-draw {
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  --end-x: 0px;
}

.card-draw-animation.opponent-draw {
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  --end-x: 0px;
}

.card-draw-animation::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' fill='%23c9a84c' opacity='0.15'/%3E%3Crect x='4' y='2' width='16' height='20' rx='2' fill='none' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Ctext x='12' y='14' text-anchor='middle' font-size='10' font-weight='bold' fill='%23c9a84c' font-family='serif'%3EA%3C/text%3E%3Ccircle cx='8' cy='6' r='1.5' fill='%23c9a84c' opacity='0.5'/%3E%3Ccircle cx='16' cy='18' r='1.5' fill='%23c9a84c' opacity='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
}

.card.newly-drawn {
  animation: card-draw-from-deck 0.8s ease-out forwards;
}

/* Enhanced draw effect for the actual card appearing in hand */
@keyframes card-appear-in-hand {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(30px) rotateY(180deg);
    filter: brightness(0.3) blur(4px);
  }
  
  60% {
    opacity: 0.8;
    transform: scale(1.1) translateY(-10px) rotateY(20deg);
    filter: brightness(1.3) blur(0px);
  }
  
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateY(0deg);
    filter: brightness(1) blur(0px);
  }
}

.card.draw-appear {
  animation: card-appear-in-hand 0.6s ease-out forwards;
}

/* ===== ENHANCED FIREBALL SPELL ANIMATIONS ===== */

/* Spell casting preparation glow */
.spell-card-casting {
  animation: casting-preparation 0.8s ease-in-out;
  position: relative;
  z-index: 15;
}

@keyframes casting-preparation {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 100, 0, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 100, 0, 0.8);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 10px 5px rgba(255, 100, 0, 0.4);
    transform: scale(1);
  }
}

.spell-cost-highlight {
  animation: cost-glow 0.8s ease-in-out;
}

@keyframes cost-glow {
  0% { color: inherit; text-shadow: none; }
  50% { 
    color: #ffaa00; 
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.8);
  }
  100% { color: inherit; text-shadow: none; }
}

/* Enhanced Fireball Projectile */
.spell-projectile {
  position: fixed;
  z-index: 1500;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.spell-projectile.spell-fireball {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, 
    #fff 0%, 
    #ffdd00 15%, 
    #ff8800 40%, 
    #ff4400 70%, 
    #cc0000 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px 5px rgba(255, 100, 0, 0.8),
    0 0 40px 10px rgba(255, 150, 0, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: fireball-spin 0.8s linear;
}

@keyframes fireball-spin {
  0% { 
    transform: rotate(0deg) scale(0.5);
    opacity: 0.8;
  }
  100% { 
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* Fireball trailing particles */
.fireball-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #ff6600, #ff0000);
  border-radius: 50%;
  opacity: 0.8;
  animation: fireball-trail 0.6s ease-out infinite;
}

@keyframes fireball-trail {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

/* Fireball Impact Effect */
.fireball-impact {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 200, 0, 0.8) 20%,
    rgba(255, 100, 0, 0.6) 50%,
    rgba(255, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  animation: fireball-explosion 0.6s ease-out forwards;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

@keyframes fireball-explosion {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 1;
    box-shadow: 
      0 0 0 0 rgba(255, 100, 0, 0.8),
      0 0 0 0 rgba(255, 200, 0, 0.6);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.9;
    box-shadow: 
      0 0 30px 15px rgba(255, 100, 0, 0.6),
      0 0 60px 30px rgba(255, 200, 0, 0.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
    box-shadow: 
      0 0 50px 25px rgba(255, 100, 0, 0),
      0 0 100px 50px rgba(255, 200, 0, 0);
  }
}

/* Spell Impact on Target */
.spell-impact {
  animation: spell-target-impact 0.6s ease-out;
}

@keyframes spell-target-impact {
  0% { 
    transform: scale(1);
    filter: brightness(1);
  }
  20% { 
    transform: scale(0.95);
    filter: brightness(1.5) hue-rotate(10deg) saturate(1.5);
  }
  40% { 
    transform: scale(1.05);
    filter: brightness(1.8) hue-rotate(20deg) saturate(2);
  }
  60% { 
    transform: scale(0.98);
    filter: brightness(1.3) hue-rotate(10deg) saturate(1.3);
  }
  100% { 
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Damage/Heal Numbers */
.damage-number {
  position: fixed;
  font-size: 24px;
  font-weight: bold;
  color: #ff4444;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(255, 68, 68, 0.6);
  z-index: 2000;
  pointer-events: none;
  animation: damage-number-float 1.5s ease-out forwards;
}

.heal-number {
  position: fixed;
  font-size: 24px;
  font-weight: bold;
  color: #44ff44;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(68, 255, 68, 0.6);
  z-index: 2000;
  pointer-events: none;
  animation: heal-number-float 1.5s ease-out forwards;
}

/* Compound selector ensures critical-damage overrides .damage-number without !important */
.damage-number.critical-damage {
  font-size: 32px;
  color: #ff0000;
  text-shadow:
    3px 3px 6px rgba(0, 0, 0, 0.9),
    0 0 15px rgba(255, 0, 0, 0.8);
  animation: critical-damage-float 2s ease-out forwards;
}

@keyframes damage-number-float {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(1);
    opacity: 0;
  }
}

@keyframes heal-number-float {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translateY(-15px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(1);
    opacity: 0;
  }
}

@keyframes critical-damage-float {
  0% {
    transform: translateY(0) scale(0.3);
    opacity: 0;
  }
  15% {
    transform: translateY(-30px) scale(1.5);
    opacity: 1;
  }
  85% {
    transform: translateY(-80px) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-120px) scale(1);
    opacity: 0;
  }
}

/* Screen Shake for powerful spells */
.screen-shake {
  animation: screen-shake-spell 0.4s ease-in-out;
}

@keyframes screen-shake-spell {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) translateY(-4px); }
  20% { transform: translateX(8px) translateY(4px); }
  30% { transform: translateX(-6px) translateY(-2px); }
  40% { transform: translateX(6px) translateY(2px); }
  50% { transform: translateX(-4px) translateY(-1px); }
  60% { transform: translateX(4px) translateY(1px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

/* ===== ENHANCED SPELL ANIMATION MANAGER SUPPORT ===== */

/* Lightning bolt spell effects */
.spell-lightning {
  position: fixed;
  width: 6px;
  height: 150px;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(150, 200, 255, 0.8) 20%,
    rgba(100, 150, 255, 0.6) 60%,
    rgba(0, 100, 255, 0.4) 100%);
  border-radius: 3px;
  box-shadow: 
    0 0 10px 3px rgba(150, 200, 255, 0.8),
    0 0 20px 6px rgba(100, 150, 255, 0.4);
  animation: lightning-strike 0.4s ease-out forwards;
  z-index: 1500;
  pointer-events: none;
}

@keyframes lightning-strike {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  20% {
    opacity: 1;
    transform: scaleY(1);
  }
  80% {
    opacity: 0.8;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

.lightning-crackle {
  position: fixed;
  width: 3px;
  height: 20px;
  background: rgba(200, 220, 255, 0.9);
  border-radius: 1px;
  animation: lightning-crackle-effect 0.3s ease-out forwards;
  z-index: 1499;
  pointer-events: none;
}

@keyframes lightning-crackle-effect {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.lightning-impact {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(150, 200, 255, 0.7) 30%,
    rgba(100, 150, 255, 0.4) 70%,
    rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  animation: lightning-explosion 0.5s ease-out forwards;
  box-shadow: 
    0 0 30px 10px rgba(150, 200, 255, 0.6),
    0 0 60px 20px rgba(100, 150, 255, 0.3);
}

@keyframes lightning-explosion {
  0% {
    transform: scale(0.2);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Healing spell effects */
.spell-healing {
  position: fixed;
  width: 50px;
  height: 50px;
  z-index: 1500;
  pointer-events: none;
}

.healing-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #90ff90, #40ff40);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(144, 255, 144, 0.8);
  animation: healing-sparkle-effect 1.2s ease-out infinite;
}

@keyframes healing-sparkle-effect {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }
  30% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
  }
  70% {
    opacity: 0.8;
    transform: scale(1.2) translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateY(-30px);
  }
}

/* AoE spell effects */
.spell-aoe-effect {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle,
    rgba(255, 200, 0, 0.3) 0%,
    rgba(255, 150, 0, 0.2) 50%,
    rgba(255, 100, 0, 0.1) 100%);
  border: 3px solid rgba(255, 150, 0, 0.6);
  border-radius: 50%;
  animation: aoe-expand 1s ease-out forwards;
  z-index: 1400;
  pointer-events: none;
}

@keyframes aoe-expand {
  0% {
    transform: scale(0);
    opacity: 0.8;
    border-width: 3px;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
    border-width: 6px;
  }
  100% {
    transform: scale(2);
    opacity: 0;
    border-width: 1px;
  }
}

/* Generic spell impact animation */
@keyframes spell-impact {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}