#image-warning {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  overflow: hidden; /* ensures glitch doesn't overflow */
}

/* =========================
   GLITCH BACKGROUND LAYER
   ========================= */
.glitch-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* behind content */

  /* noise + scanlines */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.08) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.15),
      transparent 60%
    );

  animation: glitchMove 0.2s infinite steps(2);
}

/* Slight jitter movement */
@keyframes glitchMove {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(2px, -2px); }
  60%  { transform: translate(-2px, 0); }
  80%  { transform: translate(2px, 2px); }
  100% { transform: translate(0, 0); }
}

/* Optional: image and buttons layering */
#image-warning img,
#image-warning .buttons {
  position: relative;
  z-index: 1;
}