#layer-effects { pointer-events: none; z-index: 2; }

/* ── Low-health death warning ────────────────────── */
#low-health-vignette {
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(200,0,0,0.6) 100%);
}
#low-health-vignette.active {
  animation: vignette-pulse 0.8s ease-in-out infinite;
}
@keyframes vignette-pulse {
  0%, 100% { opacity: var(--vignette-intensity, 0); }
  50% { opacity: calc(var(--vignette-intensity, 0) * 1.5); }
}

#character-container.low-health #character-sprite {
  animation: char-danger-pulse 0.5s ease-in-out infinite;
}
@keyframes char-danger-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) saturate(0.5) sepia(0.8) hue-rotate(-30deg); }
}

/* ── Parallax Background Layers ──────────────────── */
.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  will-change: transform;
  background-repeat: repeat;
}
.parallax-deep  { opacity: 0.15; }
.parallax-mid   { opacity: 0.4; }
.parallax-near  { opacity: 0.12; }