/* Bullet hole */
  .bullet-hole {
    margin-bottom: 0 !important;
    padding: 0 !important;
    position: absolute;
    width: 12px;
    height: 12px;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, #000 0%, #1a1a1a 60%, transparent 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: holeFade 3s ease-out forwards;
    z-index: 9998;
  }

  @keyframes holeFade {
    0%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Smoke puff */
  .smoke {
    margin-bottom: 0 !important;
    padding: 0 !important;
    position: absolute;
    width: 20px;
    height: 20px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,200,200,0.8) 0%, rgba(200,200,200,0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: smokeRise 1s ease-out forwards;
    z-index: 9999;
  }

  @keyframes smokeRise {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(3);
    }
    10% {
      opacity: 0.9;
      transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
      opacity: 0;
      transform: translate(-60%, -140%) scale(2.2);
    }
  }

.screen-flash {
    z-index: 9999;
    pointer-events: none;
    margin-bottom: 0;
    padding: 0;
    position: fixed;
    opacity: 0;
    inset: 0;
    mask-image: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    animation: flash 0.2s ease-out forwards;
    backdrop-filter: blur(6px) brightness(3.6) saturate(1.6);
  -webkit-backdrop-filter: blur(6px) brightness(3.6) saturate(1.6);
}

  @keyframes flash {
    0% {
      display: block;
      opacity: 0.4;
    }
    2% {
      opacity: 0.2;
    }
    10% {
      opacity: 0.1;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }