:root {
  --bg: #050505;
  --ink: #e8e2d8;
  --red: #ff1a1a;
  --dim: #6b6560;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  display: grid;
  place-items: center;
  padding: 16px;
  /* CRT scanlines */
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}

.gate { text-align: center; display: grid; gap: 18px; justify-items: center; }

.sprite { image-rendering: pixelated; width: 96px; height: 96px; }

.title {
  font-size: clamp(3rem, 14vw, 8rem);
  letter-spacing: .08em;
  color: var(--red);
  text-shadow: 0 0 12px rgba(255,26,26,.7), 0 0 40px rgba(255,26,26,.35);
  white-space: nowrap;
}

.tag { font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; }

.sig { color: var(--dim); letter-spacing: .6em; font-size: .8rem; }

@media (prefers-reduced-motion: no-preference) {
  .title { animation: flicker 6s infinite steps(1); }
  @keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .55; } 98% { opacity: 1; } 99% { opacity: .7; } }
}