/* Low-HP blood (blood-overlay.js): edges only, never over the card's middle. */
.blood-overlay { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
.blood-vignette {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(90, 0, 4, .55) 80%, rgba(60, 0, 2, .9) 100%);
  transition: opacity 1.2s ease;
}
.blood-overlay.is-critical .blood-vignette { animation: blood-beat var(--beat, 1s) ease-in-out infinite; }
@keyframes blood-beat {
  0%, 100% { filter: brightness(1); }
  15% { filter: brightness(1.6) saturate(1.3); }
  30% { filter: brightness(1.1); }
  45% { filter: brightness(1.45) saturate(1.2); }
}
.blood-stain { position: absolute; opacity: 0; transition: opacity 1.4s ease; filter: drop-shadow(0 0 2px rgba(20, 0, 0, .6)); }
.blood-stain svg { width: 100%; height: 100%; display: block; }
.blood-stain.is-shown { transition: opacity .35s ease-out; }
.blood-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, rgba(170, 0, 8, .55) 100%);
}
.blood-flash.is-on { animation: blood-flash .45s ease-out; }
@keyframes blood-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .blood-overlay.is-critical .blood-vignette, .blood-flash.is-on { animation: none; }
}