/* CRT shell carried from moonlander src/index.css: scanlines, RGB shift,
   vignette, flicker, and the canvas glow filter. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  touch-action: none;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

#crt {
  z-index: 1;
}

#game {
  z-index: 2;
  /* phosphor bloom on the vector layer */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 8px rgba(120, 255, 180, 0.18)) contrast(1.1) brightness(1.08);
}

@keyframes crt-flicker {
  0% { opacity: 0.96; }
  5% { opacity: 0.86; }
  10% { opacity: 0.96; }
  15% { opacity: 1; }
  100% { opacity: 1; }
}

/* scanlines + aperture-grille tint + vignette, above both canvases */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 3px, 3px 100%;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.9);
  animation: crt-flicker 0.15s infinite;
}