/* =========================================
   PRIMAL — style.css
   Supplementary styles for ability visuals,
   status tints, and UI utility classes.

   RULE: Nothing here sets position on .gcard.
   Nothing here uses inset box-shadow on card elements.
   Status colour is communicated via outer box-shadow only.
   .gcard is position:absolute in game.html — do not override.
   ========================================= */


/* ── Shield Barricade ripple ── */
.gcard--barricade::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(224, 242, 254, 0.7);
  border-radius: inherit;
  animation: pulse-ripple 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  pointer-events: none;
  z-index: 13;
}
@keyframes pulse-ripple {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}


/* ── Submerged wave ──
   Uses ::after on .gcard — contained within the card,
   does not touch gcard__img. z-index 2 keeps it below the image (z-index 6). */
.gcard--submerged {
  overflow: hidden;
}
.gcard--submerged::after {
  content: '';
  position: absolute;
  left: -50%;
  top: 50%;
  width: 200%;
  height: 200%;
  background: rgba(14, 165, 233, 0.22);
  border-radius: 40%;
  animation: wave-spin 5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.gcard--submerged .gcard__name,
.gcard--submerged .gcard__tier {
  z-index: 8;
  position: relative;
}
@keyframes wave-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ── Spore Choke (one-shot) ── */
@keyframes sporeChoke {
  0%   { filter: sepia(0.4) hue-rotate(60deg) saturate(2); transform: scale(1); }
  50%  { filter: sepia(0.4) hue-rotate(60deg) saturate(2); transform: scale(0.97); opacity: 0.85; }
  100% { filter: none; transform: scale(1); opacity: 1; }
}
.anim-spore-choke {
  animation: sporeChoke 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ── Titan Grow (one-shot) ── */
@keyframes titanGrow {
  0%   { filter: brightness(1); transform: scale(1); }
  30%  { filter: brightness(1.5) drop-shadow(0 0 15px #fbbf24); transform: scale(1.15); }
  100% { filter: brightness(1); transform: scale(1); }
}
.anim-titan-grow {
  animation: titanGrow 1s ease-out;
  z-index: 100;
}


/* ── Floating heal number ── */
.dmg-float--heal {
  color: #4ade80;
  text-shadow: 0px 0px 5px #000, 0px 0px 10px #4ade80;
  font-size: 24px;
}


/* ── Status tint overlay (.has-anim-tint)
   Outer glow only — no inset, no face coverage.
   JS sets --anim-tint on the element. ── */
.gcard { overflow: visible; }

.gcard.has-anim-tint::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 10px 3px var(--anim-tint, transparent);
  pointer-events: none;
  z-index: 13;
  animation: statusPulse 1.2s ease-in-out infinite alternate;
}
@keyframes statusPulse {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}


/* ── LP bar critical pulse ── */
@keyframes lpPulse {
  from { filter: brightness(1) drop-shadow(0 0 2px #ef4444); }
  to   { filter: brightness(1.5) drop-shadow(0 0 10px #ef4444); }
}
.lp-bar--critical {
  background-color: #ef4444 !important;
  animation: lpPulse 0.8s ease-in-out infinite alternate !important;
}


/* ── Active card gold pulse (legacy) ── */
@keyframes activeCardPulse {
  0%   { box-shadow: 0 0 5px 2px rgba(255,215,0,0.5); transform: scale(1); }
  50%  { box-shadow: 0 0 15px 5px rgba(255,215,0,0.9); transform: scale(1.02); }
  100% { box-shadow: 0 0 5px 2px rgba(255,215,0,0.5); transform: scale(1); }
}
.active-turn-highlight {
  animation: activeCardPulse 1.5s infinite ease-in-out;
  border-color: #FFD700 !important;
  z-index: 10;
}


/* ── Active turn blue pulse ── */
@keyframes activeTurnPulse {
  0%   { box-shadow: 0 0 5px 2px rgba(56,189,248,0.4); transform: translateY(-4px) scale(1.02); border-color: rgba(56,189,248,0.5); }
  50%  { box-shadow: 0 0 20px 6px rgba(56,189,248,0.9); transform: translateY(-8px) scale(1.05); border-color: #38bdf8; }
  100% { box-shadow: 0 0 5px 2px rgba(56,189,248,0.4); transform: translateY(-4px) scale(1.02); border-color: rgba(56,189,248,0.5); }
}
.anim-active-turn {
  animation: activeTurnPulse 1.5s infinite ease-in-out;
  z-index: 15;
}


/* ── Active turn slot glow ── */
@keyframes activeSlotPulse {
  0%   { box-shadow: inset 0 0 10px 2px rgba(56,189,248,0.4); border-color: rgba(56,189,248,0.5); }
  50%  { box-shadow: inset 0 0 35px 8px rgba(56,189,248,1); border-color: #38bdf8; }
  100% { box-shadow: inset 0 0 10px 2px rgba(56,189,248,0.4); border-color: rgba(56,189,248,0.5); }
}
.slot--active-turn {
  animation: activeSlotPulse 1.2s infinite ease-in-out !important;
}