:root {
  --bg: #020805;
  --green-1: #00ff66;
  --green-2: #00cc44;
  --green-3: #009933;
  --green-4: #66ff99;
  --glow: rgba(0, 255, 102, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, #03120a 0%, var(--bg) 70%);
  font-family: Consolas, Monaco, "Courier New", monospace;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 255, 102, 0.03) 0px,
      rgba(0, 255, 102, 0.03) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: screen;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85);
}

.title {
  position: fixed;
  inset: auto 0 7vh 0;
  text-align: center;
  color: var(--green-4);
  text-shadow:
    0 0 8px rgba(0, 255, 102, 0.7),
    0 0 20px rgba(0, 255, 102, 0.35);
  letter-spacing: 0.25em;
  font-size: clamp(16px, 2vw, 24px);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}