/* FX */
#fx {
  position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0;
}
#fx.cops { animation: copsFlash 1.4s ease-out; }
@keyframes copsFlash {
  0%, 100% { opacity: 0; background: transparent; }
  8%, 32%, 56%  { opacity: 1; background: rgba(255,40,40,0.55); }
  20%, 44% { opacity: 1; background: rgba(40,80,255,0.55); }
}
#fx.mug { animation: mugFlash 0.7s ease-out; }
@keyframes mugFlash {
  0% { opacity: 0; background: black; }
  25% { opacity: 1; background: black; }
  50% { opacity: 0.5; background: rgba(255,68,68,0.4); }
  100% { opacity: 0; background: transparent; }
}
#fx.good { animation: goodFlash 0.9s ease-out; }
@keyframes goodFlash {
  0%, 100% { opacity: 0; box-shadow: inset 0 0 0 rgba(51,255,102,0); }
  40% { opacity: 1; box-shadow: inset 0 0 200px rgba(51,255,102,0.45); }
}
#fx.death { animation: deathFade 1.5s ease-out forwards; }
@keyframes deathFade {
  0% { opacity: 0; background: transparent; }
  20% { opacity: 1; background: rgba(255,0,0,0.7); }
  100% { opacity: 0.4; background: rgba(0,0,0,0.5); }
}
body.no-anim #fx { display: none !important; }
body.no-anim #screen.shake { animation: none !important; }
#screen.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-7px); }
  20%, 40%, 60%, 80% { transform: translateX(7px); }
}
#modal-bg.show #modal { animation: modalIn 0.18s ease-out; }
@keyframes modalIn {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.siren {
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  animation: sirenPulse 0.4s infinite alternate;
}
@keyframes sirenPulse {
  from { background: #ff3333; color: #000; }
  to { background: #3366ff; color: #fff; }
}