/* effects.css — Overlays visuales y animaciones (@keyframes)
   Extraido automaticamente de index.html (bloques <style> originales) */

.dead-eye-active{filter:var(--western-sepia);transition:filter 0.4s ease-in-out!important;}

#recOverlay{position:absolute;top:20px;right:20px;display:none;flex-direction:column;align-items:flex-end;z-index:80;pointer-events:none;font-family:'Courier New',Courier,monospace;color:rgba(255,255,255,0.8);text-shadow:0 0 5px rgba(0,0,0,0.8);}

@keyframes glitch-anim{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)}}

.glitch{animation:glitch-anim 0.2s infinite;color:red;text-shadow:2px 0 blue,-2px 0 green;}

.rec-row{display:flex;align-items:center;gap:10px;margin-bottom:5px;}

.rec-dot{width:15px;height:15px;background-color:red;border-radius:50%;animation:blinkRec 1s infinite;}

.rec-text{font-weight:bold;font-size:20px;letter-spacing:2px;}

.rec-border{position:absolute;top:0;left:0;width:100%;height:100%;border:20px solid rgba(0,0,0,0.0);pointer-events:none;z-index:79;box-shadow:inset 0 0 100px rgba(0,0,0,0.5);}

.scanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0) 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1));background-size:100% 4px;pointer-events:none;z-index:78;opacity:0.3;}

@keyframes blinkRec{0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}




#damageIndicator{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:55;display:none;}

.damage-blood-edge{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 0.15s ease-in;border-radius:0;}

.damage-arrow{display:none;}

#vignetteOverlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,transparent 50%,rgba(0,0,0,0.8) 100%);pointer-events:none;z-index:48;}

#dirtyLens{position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.1"/></svg>');pointer-events:none;z-index:49;opacity:0;mix-blend-mode:overlay;}

#lowHealthBlur{position:absolute;top:0;left:0;width:100%;height:100%;backdrop-filter:blur(0px);pointer-events:none;z-index:47;transition:backdrop-filter 0.5s;}

#scratchEffect{position:absolute;top:0;left:0;width:100%;height:100%;background:none;opacity:0;pointer-events:none;z-index:51;transition:opacity 0.8s ease-out;}

#distortionOverlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:46;opacity:0.018;mix-blend-mode:overlay;}

@keyframes distortShift{0%{filter:url(#distortFilter) brightness(1.0);}33%{filter:url(#distortFilter) brightness(1.01);}66%{filter:url(#distortFilter) brightness(0.99);}100%{filter:url(#distortFilter) brightness(1.0);}}

#distortionOverlay.active{opacity:0.018;animation:distortShift 8s ease-in-out infinite;}

#infectionOverlay{position:absolute;bottom:0;right:0;width:40%;height:40%;background:radial-gradient(circle at bottom right,rgba(var(--fx-blood),0.4),transparent 70%);opacity:0;pointer-events:none;z-index:49;}

@keyframes flashWarning{from{opacity:0.8;}to{opacity:1;}}

@keyframes pulseRed{0%{opacity:0.6;}50%{opacity:1;}100%{opacity:0.6;}}

@keyframes jamPulse{0%{box-shadow:0 0 20px rgba(255,0,0,0.5);transform:scale(1);}100%{box-shadow:0 0 35px rgba(255,80,80,0.9);transform:scale(1.03);}}

@keyframes painPulse{0%{opacity:0.1;}50%{opacity:0.4;}100%{opacity:0.1;}}

#painOverlay{animation:painPulse 1.2s ease-in-out infinite;}

#nvgOverlay::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");opacity:0.25;mix-blend-mode:overlay;pointer-events:none;}

#nvgOverlay{background:rgba(0,40,0,0.5)!important;mix-blend-mode:multiply;}

@keyframes anomalyFloat{0%{transform:translateY(0) scale(1);opacity:0.6;}50%{transform:translateY(-8px) scale(1.1);opacity:1;}100%{transform:translateY(0) scale(1);opacity:0.6;}}

@keyframes timerPulse{from{opacity:1;}to{opacity:0.4;}}

@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:0;}}

@keyframes slideInLeft{from{transform:translateX(-60px);opacity:0;}to{transform:translateX(0);opacity:1;}}

@keyframes pulseBtn{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}

@keyframes rdtSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes rdtFadeOut {
  to { transform: translateX(120%); opacity: 0; }
}

@keyframes rdtGlowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1);   }
  50%       { opacity: 0.8; transform: scale(1.05); }
}

@keyframes rdtEmojiBounce {
  0%, 100% { transform: scale(1) rotate(0deg);    }
  25%       { transform: scale(1.2) rotate(-8deg); }
  75%       { transform: scale(1.2) rotate(8deg);  }
}

/* ── OVERLAY DISTORSIÓN RADIOACTIVA ───────────────────────── */

#radioHUDDistort {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 56;
    opacity: 0;
    transition: opacity 0.15s;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,255,0,0.04) 0px,
        rgba(0,255,0,0.04) 2px,
        transparent 2px,
        transparent 4px
    );
    mix-blend-mode: screen;
}

#radioHUDDistort.active {
    opacity: 1;
    animation: radioGlitch 0.18s steps(1) infinite;
}

@keyframes radioGlitch {
    0%   { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
    20%  { transform: translate(-3px, 1px) skewX(1.5deg); filter: hue-rotate(60deg); }
    40%  { transform: translate(2px, -2px) skewX(-1deg); filter: hue-rotate(120deg); }
    60%  { transform: translate(-1px, 3px) skewX(0.5deg); filter: hue-rotate(180deg); }
    80%  { transform: translate(3px, -1px) skewX(-2deg); filter: hue-rotate(240deg); }
    100% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
}

/* ── FLASH TAKEDOWN SIGILOSO ───────────────────────────────── */

#takedownFlash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 57;
    opacity: 0;
    background: radial-gradient(circle at center, rgba(0,200,0,0.25), transparent 70%);
    transition: opacity 0.05s ease-in;
}

#takedownFlash.active {
    opacity: 1;
    animation: takedownFade 0.6s ease-out forwards;
}

@keyframes takedownFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes _ss_spin {
            0%   { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Blood spot */

.blood-spot {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        animation: bloodFade 4s ease-in-out forwards;
    }

@keyframes bloodFade {
        0%   { opacity: 0; transform: scale(0.5); }
        20%  { opacity: 0.6; transform: scale(1); }
        80%  { opacity: 0.5; }
        100% { opacity: 0; }
    }

/* Lore/fatigue text shake animation */

@keyframes loreShake {
        0%   { transform: translateX(-50%) rotate(-0.5deg); }
        25%  { transform: translateX(calc(-50% + 1px)) rotate(0.3deg); }
        50%  { transform: translateX(calc(-50% - 1px)) rotate(-0.2deg); }
        75%  { transform: translateX(calc(-50% + 0.5px)) rotate(0.4deg); }
        100% { transform: translateX(-50%) rotate(-0.5deg); }
    }

#loreText.shaking { animation: loreShake 0.3s infinite; }

#fatigueText.shaking { animation: loreShake 0.25s infinite; }

/* ============ v29-REALISM: NVG Soviético mejorado (Item 10) ============ */

#nvgOverlay {
        background: rgba(0,40,0,0.45) !important;
        mix-blend-mode: multiply;
        box-shadow: inset 0 0 0 55vmax rgba(0,0,0,0.93), inset 0 0 120px rgba(0,0,0,0.88);
        border-radius: 50%;
        animation: nvgFlicker 0.11s step-end infinite;
    }

@keyframes nvgFlicker {
        0%   { opacity: 1; filter: brightness(1) contrast(1.3); }
        10%  { opacity: 0.97; filter: brightness(1.05) contrast(1.2); }
        25%  { opacity: 1; filter: brightness(0.93) contrast(1.4); }
        50%  { opacity: 1; }
        87%  { opacity: 1; filter: brightness(1); }
        88%  { opacity: 0.5; filter: brightness(0.5); }
        89%  { opacity: 1; filter: brightness(1); }
        100% { opacity: 1; }
    }

#nvgOverlay::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.28'/%3E%3C/svg%3E");
        opacity: 0.45;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

/* Item 4: Viñeta de hemorragia pulsante */

@keyframes bleedPulse {
        0%   { box-shadow: inset 0 0 55px rgba(180,0,0,0.4); }
        50%  { box-shadow: inset 0 0 105px rgba(210,0,0,0.78); }
        100% { box-shadow: inset 0 0 55px rgba(180,0,0,0.4); }
    }

#bleedVignetteOverlay.active { animation: bleedPulse 1.8s ease-in-out infinite; opacity: 1 !important; }

/* Item 5: Heartbeat vignette */

@keyframes heartbeatPulse {
        0%   { box-shadow: inset 0 0 0 rgba(200,0,0,0); opacity: 0; }
        10%  { box-shadow: inset 0 0 90px rgba(200,0,0,0.65); opacity: 1; }
        20%  { box-shadow: inset 0 0 40px rgba(200,0,0,0.2); opacity: 0.3; }
        30%  { box-shadow: inset 0 0 70px rgba(200,0,0,0.5); opacity: 0.8; }
        100% { box-shadow: inset 0 0 0 rgba(200,0,0,0); opacity: 0; }
    }

.heartbeat-flash { animation: heartbeatPulse var(--hb-speed, 0.9s) ease-out !important; }

/* Item 8: Raid timer (eliminado) */

/* Item 11: Stamina blur */

#staminaBlurOverlay.active { backdrop-filter: blur(2.5px) !important; }

/* Item 31: Blood on screen */

#bloodScreenCanvas { opacity: 0.85; }

/* ============ WakeUpSystem: secuencia de despertar al iniciar partida ============
   Capas (de abajo a arriba): velo blanco (luz que entra por la rendija) -> parpados -> brillo
   intrinseco (lo que se ve con los ojos cerrados). Variables que escribe js/device-fx.js sobre
   #wakeUpOverlay: --wu-open (0 cerrado .. 1 abierto), --wu-lid-dur, --wu-veil, --wu-veil-dur,
   --wu-glow, --wu-glow-dur. Solo transform y opacity; sin backdrop-filter. */

#wakeUpOverlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    pointer-events: none;
    display: none;
    overflow: hidden;
    --wu-open: 0;
    --wu-lid-dur: 0ms;
    --wu-veil: 0;
    --wu-veil-dur: 0ms;
    --wu-glow: 1;
    --wu-glow-dur: 0ms;
}

#wakeUpOverlay.active { display: block; }

#wakeUpVeil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 46%, #ffffff 0%, #fffdf4 55%, #f6efdc 100%);
    opacity: var(--wu-veil);
    transition: opacity var(--wu-veil-dur) ease-out;
    will-change: opacity;
}

#wakeUpEyelidTop,
#wakeUpEyelidBottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 54%;
    transition: transform var(--wu-lid-dur) cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

#wakeUpEyelidTop {
    top: 0;
    transform: translateY(calc(var(--wu-open) * -100%));
    background: linear-gradient(to bottom, #0d0b0a 55%, rgba(13,11,10,0.94) 100%);
    box-shadow: 0 8px 30px rgba(13,11,10,0.6);
}

#wakeUpEyelidBottom {
    bottom: 0;
    transform: translateY(calc(var(--wu-open) * 100%));
    background: linear-gradient(to top, #0d0b0a 55%, rgba(13,11,10,0.94) 100%);
    box-shadow: 0 -8px 30px rgba(13,11,10,0.6);
}

/* Brillo intrinseco: gris calido oscuro (no negro) + manchas difusas + fosfenos.
   Solo se ve con los parpados cerrados; JS baja --wu-glow a 0 cuando se abren. */
#wakeUpGlow {
    position: absolute;
    inset: 0;
    background: #1c1b1a;
    opacity: var(--wu-glow);
    transition: opacity var(--wu-glow-dur) ease-out;
    overflow: hidden;
}

/* Manchas de luz suaves que derivan despacio */
#wakeUpGlow::before {
    content: "";
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(ellipse 38% 32% at 28% 38%, rgba(150,124,104,0.20), transparent 70%),
        radial-gradient(ellipse 30% 40% at 68% 30%, rgba(132,112,98,0.16), transparent 70%),
        radial-gradient(ellipse 42% 30% at 56% 74%, rgba(140,110,92,0.17), transparent 72%),
        radial-gradient(ellipse 22% 26% at 14% 72%, rgba(120,104,92,0.12), transparent 70%);
    animation: wuBlotch 4.6s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Tinte rojizo en los bordes: luz atravesando el parpado */
#wakeUpGlow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 85% at 50% 50%, rgba(0,0,0,0) 42%, rgba(120,34,22,0.30) 100%);
}

.wu-phos {
    position: absolute;
    width: 16vmin;
    height: 16vmin;
    margin: -8vmin 0 0 -8vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,246,226,0.95) 0%, rgba(255,226,186,0.55) 14%, rgba(200,150,110,0.18) 38%, rgba(0,0,0,0) 68%);
    opacity: 0;
    will-change: transform, opacity;
    animation: wuPhos 2.4s ease-in-out infinite;
}

.wu-phos:nth-child(1) { left: 22%; top: 34%; width: 9vmin;  height: 9vmin;  margin: -4.5vmin 0 0 -4.5vmin; animation-duration: 2.1s; animation-delay: 0.05s; }
.wu-phos:nth-child(2) { left: 71%; top: 26%; width: 12vmin; height: 12vmin; margin: -6vmin 0 0 -6vmin;     animation-duration: 3.0s; animation-delay: 0.35s; }
.wu-phos:nth-child(3) { left: 47%; top: 62%; width: 7vmin;  height: 7vmin;  margin: -3.5vmin 0 0 -3.5vmin; animation-duration: 1.7s; animation-delay: 0.80s; }
.wu-phos:nth-child(4) { left: 83%; top: 68%; width: 10vmin; height: 10vmin; margin: -5vmin 0 0 -5vmin;     animation-duration: 2.6s; animation-delay: 0.15s; }
.wu-phos:nth-child(5) { left: 12%; top: 70%; width: 6vmin;  height: 6vmin;  margin: -3vmin 0 0 -3vmin;     animation-duration: 3.4s; animation-delay: 0.55s; }
.wu-phos:nth-child(6) { left: 58%; top: 20%; width: 8vmin;  height: 8vmin;  margin: -4vmin 0 0 -4vmin;     animation-duration: 2.3s; animation-delay: 1.10s; }
.wu-phos:nth-child(7) { left: 35%; top: 78%; width: 11vmin; height: 11vmin; margin: -5.5vmin 0 0 -5.5vmin; animation-duration: 2.9s; animation-delay: 0.70s; }

@keyframes wuBlotch {
    0%   { transform: translate3d(-2%, 1%, 0) scale(1);    opacity: 0.55; }
    100% { transform: translate3d(3%, -2%, 0) scale(1.08); opacity: 1; }
}

@keyframes wuPhos {
    0%, 100% { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.6); }
    18%      { opacity: 0.85; transform: translate3d(0.6vmin, -0.4vmin, 0) scale(1); }
    34%      { opacity: 0.15; transform: translate3d(1.2vmin, -0.9vmin, 0) scale(0.85); }
    52%      { opacity: 0.55; transform: translate3d(-0.5vmin, 0.6vmin, 0) scale(1.15); }
    72%      { opacity: 0;    transform: translate3d(-1vmin, 1vmin, 0) scale(0.7); }
}

/* Calidad "performance": gris plano, sin destellos animados, parpados planos con transicion simple */
body[data-quality="performance"] #wakeUpGlow::before,
body[data-quality="performance"] #wakeUpGlow::after,
body[data-quality="performance"] .wu-phos { display: none; animation: none; }
body[data-quality="performance"] #wakeUpVeil { background: #ffffff; }
body[data-quality="performance"] #wakeUpEyelidTop,
body[data-quality="performance"] #wakeUpEyelidBottom {
    background: #0d0b0a;
    box-shadow: none;
    transition: transform var(--wu-lid-dur) ease;
}

/* Movimiento reducido: sin fosfenos parpadeantes ni deriva; el velo maximo lo limita JS (0,5) */
@media (prefers-reduced-motion: reduce) {
    #wakeUpGlow::before { animation: none; opacity: 0.8; }
    .wu-phos { display: none; animation: none; }
}

/* ── Capas migradas desde index.html (antes estilos inline; mismos valores). Van al final para que, a igual especificidad, ganen como lo hacia el inline. ── */

#radiationOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(var(--fx-ochre), 0.08) 0%, rgba(var(--fx-umber), 0.42) 100%);   /* U3d: antes verde neon */
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  --fx-t: 0.5s;
}

#suppressionOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(60,60,80,0.8) 100%);
  pointer-events: none;
  z-index: 505;
  opacity: 0;
  --fx-t: 0.2s;
}

#muzzleBlindOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  pointer-events: none;
  z-index: 506;
  opacity: 0;
  --fx-t: 0.05s;
}

#afterimageOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,240,200,0.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: 507;
  opacity: 0;
  --fx-t: 1s;
}

#rainScreenOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 53;
  opacity: 0;
  background: repeating-linear-gradient(175deg,transparent 0%,transparent 92%,rgba(180,220,255,0.07) 93%,transparent 94%);
  background-size: 4px 100%;
  --fx-t: 1s;
}

#_rainDropsOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 54;
  opacity: 0;
  --fx-t: 1.5s;
}

#eyeAdaptOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 58;
  --fx-t: 0.3s;
}

#nightOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,rgba(0,0,20,0.0) 30%,rgba(0,0,10,0.9) 100%);
  pointer-events: none;
  z-index: 46;
  opacity: 0;
  --fx-t: 2s;
}

#jumpScareOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.6);
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  --fx-t: 0.05s;
}

#lightningFlashOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200,220,255,1);
  pointer-events: none;
  z-index: 9001;
  opacity: 0;
  --fx-t: 0.06s;
}

#gasMaskFog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0);
  pointer-events: none;
  z-index: 504;
  opacity: 0;
  --fx-t: 0.5s;
}

#painOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(120,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 501;
  display: none;
  opacity: 0;
}

#nvgOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0,80,0,0.05) 50%, rgba(0,30,0,0.85) 100%);
  pointer-events: none;
  z-index: 502;
  display: none;
  mix-blend-mode: multiply;
}

#gasMaskOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.95) 100%);
  pointer-events: none;
  z-index: 503;
  display: none;
  border-radius: 50% 50% / 40% 40%;
}

#heartbeatOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 54;
  opacity: 0;
  box-shadow: inset 0 0 0px rgba(200,0,0,0);
  transition: opacity 0.1s;
}

#staminaBlurOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 46;
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.4s ease;
}

#anomalyZoneOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 52;
  opacity: 0;
  transition: opacity 0.5s;
  background: radial-gradient(ellipse at center,transparent 40%,rgba(var(--fx-umber),0.16) 100%);   /* U3d: antes azul */
  filter: url(#anomalyFilter) blur(0px);
}

#bloodScreenCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 56;
}

#damageDirectionCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 54;
}

#eyeAdaptFlash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  pointer-events: none;
  z-index: 99994;
  opacity: 0;
  transition: opacity 2s ease;
}

#bleedVignetteOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 53;
  opacity: 0;
  box-shadow: inset 0 0 80px rgba(180,0,0,0.6);
  transition: opacity 0.5s;
}

#filmGrainCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 51;
  opacity: 0.0;
  mix-blend-mode: overlay;
  display: none;
}

#dynamicScanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 49;
}


/* ============================================================================================
   U3c — CAPAS DE PANTALLA (efectos de pantalla de la partida)
   Principios: (1) una capa que no se usa es display:none, no solo opacity:0; (2) el peligro se
   dibuja con UNA capa (#damageOverlay) cuya intensidad es continua (--fx-danger); (3) un solo
   lenguaje de color: rojo oxido apagado para herida, tierra oscura para sombra, hueso para destellos.
   Mecanismos de reposo (sin tocar el JS que escribe cada capa):
     .fx-auto        -> oculta mientras su opacity inline no exista o sea 0; visible en cuanto el JS la sube.
     [data-fx="on"]  -> capas que activa FxLayers (js/ui-feedback.js) o su sistema: #damageOverlay, canvas.
     .fx-on / .active-> #lowHealthBlur / #staminaBlurOverlay (filtros de fondo, solo bajo umbral).
     "Capas retiradas" -> display:none !important; quitar esa regla las reactiva (ver el informe).
   ============================================================================================ */

:root {
  --fx-wound: 138, 42, 34;    /* rojo oxido apagado: bordes de herida/peligro (RGB sin rgba) */
  --fx-blood: 162, 71, 61;    /* = --hud-blood (#a2473d): indicadores direccionales, rasguno, infeccion */
  --fx-ink:   13, 11, 10;     /* tierra oscura (= parpados del despertar): sombra y noche */
  --fx-bone:  232, 222, 200;  /* hueso/ocre claro: destellos (fogonazo, rayo, adaptacion ocular) */
  --fx-dust:  60, 56, 50;     /* gris tierra: supresion */
  --fx-ochre: 168, 128, 58;   /* ocre apagado (= --hud-paint atenuado): velo de radiacion (U3d) */
  --fx-umber: 96, 70, 40;     /* siena quemada: bordes de radiacion y zona de anomalia (U3d) */
}

/* ── Peligro unificado: herida + dolor + sangrado + poca vida + impacto ── */
#damageOverlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
      transparent 50%,
      rgba(var(--fx-wound), 0.30) 78%,
      rgba(var(--fx-wound), 0.78) 100%);
  opacity: var(--fx-danger, 0);
  transition-property: opacity, display;
  transition-duration: 0.6s;
  transition-behavior: allow-discrete;
}
#damageOverlay:not([data-fx="on"]) { display: none; }
#damageOverlay[data-hit] { transition-duration: 0.08s; }
/* a punto de morir (hp <= 30): latido lento de la misma capa */
#damageOverlay.critical { animation: fxDangerPulse 1.6s ease-in-out infinite; }
@keyframes fxDangerPulse {
  0%, 100% { opacity: calc(var(--fx-danger, 1) * 0.72); }
  50%      { opacity: var(--fx-danger, 1); }
}

/* ── Capas por opacidad (.fx-auto): ocultas en reposo, con fundido de entrada y de salida ── */
.fx-auto {
  transition-property: opacity, display;
  transition-duration: var(--fx-t, 0s);
  transition-behavior: allow-discrete;
}
.fx-auto:not([style*="opacity"]),
.fx-auto[style*="opacity: 0;"],
.fx-auto[style*="opacity:0;"],
.fx-auto[style$="opacity: 0"],
.fx-auto[style$="opacity:0"] { display: none; }
@starting-style { .fx-auto { opacity: 0; } }
#dirtyLens, #infectionOverlay, #vignetteOverlay { --fx-t: 0.5s; }

/* ── Capas por activacion explicita ── */
#damageDirectionCanvas:not([data-fx="on"]),
#bloodScreenCanvas:not([data-fx="on"]) { display: none; }
#lowHealthBlur:not(.fx-on) { display: none; }
#staminaBlurOverlay:not(.active) { display: none; }

/* ── Capas retiradas: sin JS que las active, o fusionadas en otra capa. Quitar la regla las reactiva. ── */
#painOverlay,            /* fusionada en #damageOverlay (FxLayers.danger('pain')) */
#heartbeatOverlay,       /* fusionada: el latido es el pulso de #damageOverlay.critical; sin JS */
#bleedVignetteOverlay,   /* fusionada: sangrado = FxLayers.danger('bleed'); sin JS que la active */
#eyeAdaptFlash,          /* sin JS */
#anomalyZoneOverlay,     /* sin JS (filtro SVG de pantalla completa) */
#filmGrainCanvas,        /* grano unico = el de #recVignette; se apaga el bucle de canvas */
#dynamicScanlines,       /* las rayas ya van dentro de #recVignette */
#distortionOverlay       /* sin fondo (no pinta nada) pero con filtro SVG animado y mezcla */
{ display: none !important; }

/* ── Paleta: sin rojo puro, sin azul/blanco frio, sin neon ── */
#jumpScareOverlay      { background: rgba(var(--fx-wound), 0.6); }
#lightningFlashOverlay { background: rgb(var(--fx-bone)); }
#muzzleBlindOverlay    { background: rgb(var(--fx-bone)); }
#suppressionOverlay    { background: radial-gradient(ellipse at center, transparent 40%, rgba(var(--fx-dust), 0.8) 100%); }
#nightOverlay          { background: radial-gradient(ellipse at center, rgba(var(--fx-ink), 0) 30%, rgba(var(--fx-ink), 0.9) 100%); }
#eyeAdaptOverlay                  { background: rgb(var(--fx-bone)) !important; }
#eyeAdaptOverlay[style*="black"]  { background: rgb(var(--fx-ink)) !important; }

/* ── U3d: UNA sola viñeta. La dinamica es #vignetteOverlay (opacidad 0,45 de base, la sube/baja VisualImprovements).
   #recVignette conserva solo grano y rayas. El gradiente radial original vive en css/hud.css (regla de #recOverlay
   #recVignette y su variante de Bajo); effects.css carga despues y, con el mismo selector, gana. ── */
#recOverlay #recVignette {
  background:
    var(--hud-rec-grain),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 4px);
  background-size: 160px 160px, auto;
}
/* En Bajo la capa solo llevaba la viñeta (sin grano ni rayas): sin viñeta no queda nada que pintar */
body[data-quality="performance"] #recOverlay #recVignette { display: none; }

/* ── Ajuste "Efecto TV antigua" (tvStatic): sin el, el filtro REC queda solo con rayas, sin grano ── */
body.fx-no-grain { --hud-rec-grain: none; }

/* ── Calidad Bajo (data-quality="performance"): viñeta y dano planos, sin filtros, sin mezclas, sin grano ── */
body[data-quality="performance"] #lowHealthBlur,
body[data-quality="performance"] #staminaBlurOverlay,
body[data-quality="performance"] #dirtyLens { display: none !important; }
body[data-quality="performance"] #bloodScreenCanvas { filter: none !important; }
body[data-quality="performance"] #damageOverlay { transition: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(var(--fx-wound), 0.7) 100%); }
body[data-quality="performance"] #damageOverlay.critical { animation: none; }
body[data-quality="performance"] .fx-auto { transition: none; }

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  #damageOverlay { transition: none; }
  #damageOverlay.critical { animation: none; }
  .fx-auto { transition: none; }
  #nvgOverlay { animation: none; }
}