/* combat_tint.css — combat-mode whole-screen tint / vignette (IT61).
 *
 * A single full-viewport overlay. While the player is in combat, combat_tint.js
 * adds `.active`, fading in a subtle desaturated-red vignette so the screen
 * FEELS like a fight; it lifts the instant combat ends. Never intercepts input,
 * sits above the game pane but below modals/cinematic (z-index < status_fx's 60
 * so the brighter status auras still read on top). Low alpha keeps combat text
 * fully legible. Nothing renders unless `.active` is present. */

#combat-tint-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;       /* never block clicks */
  z-index: 55;                /* above game pane, below status_fx (60) + modals */
  opacity: 0;
  transition: opacity 0.45s ease;
  will-change: opacity;

  /* Faint reddish wash + a darker desaturating vignette toward the edges. The
   * radial keeps the scene center readable while the rim turns combat-grim. */
  background:
    radial-gradient(ellipse at center,
      rgba(120, 0, 0, 0.0) 38%,
      rgba(90, 8, 8, 0.12) 78%,
      rgba(55, 5, 5, 0.30) 100%),
    rgba(70, 6, 6, 0.06);
}

#combat-tint-overlay.active {
  /* HP-reactive: opacity scales with --combat-danger (0..1, set per turn by
   * combat_tint.js from player HP). At full HP this is ~0 (no violent red — the
   * combat morph alone signals combat); it climbs to a full red vignette as the
   * player is hurt. */
  opacity: calc(var(--combat-danger, 0) * 0.95);
  /* Breathe via BRIGHTNESS, not opacity, so the danger-driven opacity holds. */
  animation: combatTintPulse 3.6s ease-in-out infinite;
}

@keyframes combatTintPulse {
  0%, 100% { filter: brightness(0.9); }
  50%      { filter: brightness(1.12); }
}

/* Accessibility — no motion: hold a steady tint, no pulsing. */
@media (prefers-reduced-motion: reduce) {
  #combat-tint-overlay {
    transition: opacity 0.15s linear;
  }
  #combat-tint-overlay.active {
    animation: none;
    opacity: calc(var(--combat-danger, 0) * 0.95);
  }
}