@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime&display=swap');

/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'VT323', monospace;
  background: #0a0014;
  color: #e0b0ff;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ===== CRT BACKGROUND (CSS-driven, replaces canvas) ===== */

/* perspective grid, drifting slowly */
#crtGrid {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(#2a1a4a 1px, transparent 1px),
    linear-gradient(90deg, #2a1a4a 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.35;
  transform: perspective(500px) rotateX(2deg);
  animation: crtDrift 40s linear infinite;
}

@keyframes crtDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 840px; }
}

/* soft purple/pink glow pools, matches title-bar gradient */
#crtGlow {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 0%,   rgba(177, 156, 217, 0.16), transparent 60%),
    radial-gradient(50% 35% at 100% 100%, rgba(255, 148, 214, 0.12), transparent 60%);
}

/* scanlines + flicker, applied to body so it sits above content but below UI chrome */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 998;
  mix-blend-mode: overlay;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(10,0,20,0.65) 100%); */
  pointer-events: none;
  z-index: 999;
  animation: crtFlicker 6s infinite;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  92%      { opacity: 1; }
  93%      { opacity: 0.85; }
  94%      { opacity: 1; }
  95%      { opacity: 0.9; }
  96%      { opacity: 1; }
}

/* ===== LAYOUT ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

/* ===== UTILITY ===== */
.hidden {
  display: none;
}