/* ============================================================
   QAZ Arcade Zone — Scanline Overlay
   CRT scanline texture for fantasy/pixel RPG aesthetic
   Applied as a ::after pseudo-element on .app-frame
   ============================================================ */

/* Prevent scanline from affecting layout — use pointer-events: none */

.scanline-overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-toast); /* Above everything except modals */
}

/* Scanline layer 1: horizontal lines */
.scanline-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
}

/* Scanline layer 2: subtle vignette at edges */
.scanline-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(31, 27, 94, 0.06) 100%
  );
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION: disable scanlines for accessibility
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .scanline-overlay::before,
  .scanline-overlay::after {
    display: none;
  }
}