/* Combat overlay */
.combat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 50;
  pointer-events: none;
}

.combat-overlay.active {
  pointer-events: auto;
}

/* Attacker/blocker highlights */
.ring-slot .card.attacker {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.ring-slot .card.blocker {
  border-color: var(--spirit-blue);
  box-shadow: 0 0 12px rgba(78, 168, 222, 0.4);
}

.ring-slot .card.blocker-candidate {
  border-color: var(--spirit-blue);
  animation: pulse-border 1s ease infinite;
}

/* Playable: subtle neutral glow indicating an available action in the current phase */
.card.playable {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* Support target: ring card that the selected hand card can support */
.ring-slot .card.support-target {
  border-color: var(--hp-green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

/* Support source: hand card that can support the hovered ring card */
.hand-area .card.support-source {
  border-color: var(--hp-green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

/* Faint variants — applied when tag-compatibility holds but supportsUsed
   is at the per-turn cap. Lets players still read which cards support
   each other after they've spent their support actions, without
   implying they can act on it right now. */
.ring-slot .card.support-target-faint,
.hand-area .card.support-source-faint {
  border-color: rgba(74, 222, 128, 0.35);
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.15);
}

/* United attack indicator on selected ring cards */
.ring-slot .card.united {
  border-color: var(--spirit-blue);
  box-shadow: 0 0 12px rgba(78, 168, 222, 0.5);
}

/* Damage numbers */
.damage-popup {
  position: absolute;
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 1100;
  animation: damage-float 1s ease-out forwards;
}

.damage-popup.heal {
  color: var(--hp-green);
}

.damage-popup.spirit {
  color: var(--spirit-blue);
}

.damage-popup.armor {
  color: #c8cdd3;
}

/* KO effect */
.card.ko-effect {
  animation: ko-shake 0.3s ease;
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 8px rgba(78, 168, 222, 0.3); }
  50% { box-shadow: 0 0 16px rgba(78, 168, 222, 0.6); }
}

@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1.5);
  }
}

@keyframes ko-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Combat arrow overlay */
.combat-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

.combat-arrow {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-opacity: 0.7;
  stroke-dasharray: 8 4;
  animation: arrow-dash 0.6s linear infinite;
}

@keyframes arrow-dash {
  to { stroke-dashoffset: -12; }
}

/* Unblocked badge */
.unblocked-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  animation: badge-pulse 1.2s ease infinite;
  pointer-events: none;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Combat hit flash on card */
.card.anim-hit {
  animation: hit-flash 0.35s ease;
}

@keyframes hit-flash {
  0% { filter: brightness(1); }
  30% { filter: brightness(2) saturate(0.5); }
  100% { filter: brightness(1); }
}