/* Impacto visual (js/fx.js). Solo transform/opacity en lo que se anima cada frame; el sprite no se filtra. */
#fx-cam{ position:absolute; inset:0; z-index:2; transform-origin:0 0; will-change:transform; }
#fx-bg{ position:absolute; inset:0 -2.5%; background-repeat:no-repeat; background-position:center; background-size:cover; image-rendering:pixelated; }
#fx-cv{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.fx-sh{ position:absolute; left:0; top:0; height:26px; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.25) 55%, transparent 72%); transform-origin:center; }
.fx-ghost{ position:absolute; left:0; bottom:0; z-index:1; opacity:0; pointer-events:none; background-size:100% 100%; background-repeat:no-repeat; image-rendering:pixelated; transform-origin:bottom center; }
#fx-ko{ position:absolute; top:25%; left:50%; z-index:6; font-size:120px; color:#ff3b2e; letter-spacing:8px; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%); text-shadow:6px 6px 0 #000, 0 0 30px rgba(255,80,40,.8), 0 0 2px #fff; }
#fx-ko.on{ animation:fxKO 1.6s ease-out forwards; }
@keyframes fxKO{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(3); } 12%{ opacity:1; transform:translate(-50%,-50%) scale(.9); }
  20%{ transform:translate(-50%,-50%) scale(1.06); } 80%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.08); } }
#fx-flash{ position:absolute; inset:0; z-index:7; background:#fff; opacity:0; pointer-events:none; }

/* HUD: daño pendiente, energía llena, combo, anuncios y tiempo */
.hp-bar{ position:relative; }
.hp-fill{ position:relative; }
.fx-hpg{ position:absolute; top:0; bottom:0; left:0; width:100%; background:linear-gradient(#fff,#ffd9c8); opacity:.85; }
.hud-p2 .fx-hpg{ left:auto; right:0; }
.en-bar.full{ animation:fxEn .9s ease-in-out infinite; }
@keyframes fxEn{ 50%{ box-shadow:0 0 0 1px #fff, 0 0 18px 4px var(--gold); } }
.combo.pop{ animation:fxShake .32s linear; }
@keyframes fxShake{ 20%{ transform:translate(-5px,2px); } 40%{ transform:translate(5px,-2px); } 60%{ transform:translate(-3px,1px); } 80%{ transform:translate(2px,0); } }
#announce.show{ animation:fxAnn .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes fxAnn{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(2.6); letter-spacing:30px; } 60%{ opacity:1; letter-spacing:2px; } 100%{ transform:translate(-50%,-50%) scale(1); letter-spacing:0; } }
#timer.fx-low{ color:#ff4a3a; animation:fxLow .5s steps(2) infinite; }
@keyframes fxLow{ 50%{ color:#fff; background:rgba(160,20,20,.75); } }

/* Repetición: copia de fondo y poses con marco de TV */
#fx-replay{ z-index:25; display:block; background:#000; }
#fx-replay.hidden{ display:none; }
.fx-tv{ position:absolute; inset:0; overflow:hidden; }
.fx-tv::after{ content:""; position:absolute; inset:0; pointer-events:none; border:22px solid #0b0d14; border-radius:44px;
  box-shadow:inset 0 0 0 4px var(--gold), inset 0 0 90px rgba(0,0,0,.85);
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 2px, transparent 2px 4px); }
.fx-rw{ position:absolute; left:0; top:0; width:1280px; height:853px; transform-origin:0 0; }
.fx-rbg{ position:absolute; inset:0; background-size:cover; background-position:center; image-rendering:pixelated; filter:saturate(.55) sepia(.3); }
.fx-rf{ position:absolute; left:0; bottom:0; z-index:2; background-repeat:no-repeat; background-size:100% 100%; image-rendering:pixelated; transform-origin:bottom center; }
.fx-rl{ position:absolute; top:46px; left:56px; font-size:22px; color:#fff; text-shadow:3px 3px 0 #000; pointer-events:none; }
.fx-rl::before{ content:""; display:inline-block; width:18px; height:18px; margin-right:12px; border-radius:50%; background:#ff2a2a; box-shadow:0 0 10px #ff2a2a; animation:blink 1s steps(2) infinite; }
.fx-skip{ position:absolute; right:56px; bottom:46px; }

@media (prefers-reduced-motion: reduce){
  #fx-ko.on{ animation:fxFade 1.6s forwards; } #announce.show, .combo.pop, .en-bar.full, #timer.fx-low, .fx-rl::before{ animation:none; }
}
html.reduce-motion #fx-ko.on{ animation:fxFade 1.6s forwards; }
html.reduce-motion #announce.show, html.reduce-motion .combo.pop, html.reduce-motion .en-bar.full,
html.reduce-motion #timer.fx-low, html.reduce-motion .fx-rl::before{ animation:none; }
@keyframes fxFade{ 0%, 80%{ opacity:1; } 100%{ opacity:0; } }