/* fx.css — owner A10. Particle overlay, flash, shake fallback. */
.fx-overlay { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; z-index: 150; }
.fx-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 250; mix-blend-mode: screen; }
.fx-flash.on { animation: fxFlash .4s ease-out; }
@keyframes fxFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
/* shake fallback when the Web Animations API is unavailable (otherwise FX.shake animates #screen-layer directly) */
#screen-layer.fx-shake { animation: fxShake .35s linear; }
@keyframes fxShake {
  0% { transform: translate(0, 0); }
  12% { transform: translate(calc(var(--fx-shake, 6px) * -1), calc(var(--fx-shake, 6px) * .5)); }
  25% { transform: translate(var(--fx-shake, 6px), calc(var(--fx-shake, 6px) * -.6)); }
  40% { transform: translate(calc(var(--fx-shake, 6px) * -.7), calc(var(--fx-shake, 6px) * .4)); }
  60% { transform: translate(calc(var(--fx-shake, 6px) * .5), calc(var(--fx-shake, 6px) * -.3)); }
  80% { transform: translate(calc(var(--fx-shake, 6px) * -.2), 0); }
  100% { transform: translate(0, 0); }
}