/* ==========================================================================
   effect.css —— 恐怖特效：屏幕抖动、暗化、闪白、流血遮罩、阴影
   这些类由 utils.js（或 audio-manager）在触发点动态加到 #effect-overlay
   / #game-container 上，配合动画产生惊吓效果。
   ========================================================================== */

/* ---------- 屏幕抖动 ---------- */
@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6px, 4px); }
  40%  { transform: translate(5px, -5px); }
  60%  { transform: translate(-4px, -3px); }
  80%  { transform: translate(4px, 5px); }
  100% { transform: translate(0, 0); }
}

#game-container.shake {
  animation: screen-shake 0.4s linear;
}

/* ---------- 暗化遮罩 ---------- */
.darken {
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.3s;
}

/* ---------- 闪白 ---------- */
@keyframes screen-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.flash-white {
  background: #fff;
  animation: screen-flash 0.25s ease-out forwards;
}

/* ---------- 流血遮罩（边缘渗血） ---------- */
.blood-overlay {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(120, 0, 0, 0.55), transparent 60%),
    radial-gradient(ellipse at 0% 100%,  rgba(90, 0, 0, 0.45),  transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(90, 0, 0, 0.45),  transparent 55%);
}

/* ---------- 恐怖阴影 / 暗角（vignette） ---------- */
.vignette {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.85) 100%);
}

/* ---------- 红色脉动（通道红光） ---------- */
@keyframes red-pulse {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.45; }
}

.red-pulse {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(160, 0, 0, 0.7) 100%);
  animation: red-pulse 2s ease-in-out infinite;
}