:root {
  color-scheme: only dark;
  --bg: #050505;
  --flash: rgba(255, 255, 255, 0.85);
  --scanline: rgba(255, 255, 255, 0.05);
  --burn1: rgba(255, 60, 20, 0.4);
  --burn2: rgba(180, 10, 0, 0.32);
  --burn3: rgba(255, 255, 255, 0.12);
}

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

html,
body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: "Courier New", monospace;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 40%, #111 0%, #050505 55%, #000 100%);
  isolation: isolate;
}

.tap {
  position: absolute;
  inset: 0;
  z-index: 10;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#scene,
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#scene {
  z-index: 1;
  filter: saturate(1.4) contrast(1.25) brightness(0.95);
  mix-blend-mode: screen;
}

#fx {
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, 1) 100%);
  z-index: 5;
  pointer-events: none;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    var(--scanline) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  opacity: 0.5;
  z-index: 6;
  mix-blend-mode: screen;
  animation: scan-jitter 1.6s steps(2, end) infinite;
  pointer-events: none;
}

.burn {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 20% 20%, var(--burn1), transparent 55%),
    radial-gradient(circle at 80% 30%, var(--burn2), transparent 60%),
    radial-gradient(circle at 50% 80%, var(--burn3), transparent 55%);
  filter: blur(18px) saturate(1.6);
  opacity: 0.7;
  z-index: 4;
  mix-blend-mode: screen;
  animation: burn-warp 6s ease-in-out infinite;
  pointer-events: none;
}

.strobe {
  position: absolute;
  inset: 0;
  background: var(--flash);
  opacity: 0;
  z-index: 7;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: strobe 5.5s steps(1, end) infinite;
}

body.tribute .strobe {
  animation: none;
  opacity: 0;
}

body.tribute .burn {
  opacity: 0.45;
}

body.tribute .scanlines {
  opacity: 0.3;
}

@keyframes burn-warp {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0.5deg);
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.12) rotate(-0.8deg);
  }
  100% {
    transform: translate3d(-2%, 4%, 0) scale(1.08) rotate(0.4deg);
  }
}

@keyframes scan-jitter {
  0% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-2px);
    opacity: 0.65;
  }
  100% {
    transform: translateY(1px);
    opacity: 0.45;
  }
}

@keyframes strobe {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0;
  }
  5% {
    opacity: 0.95;
  }
  5.5% {
    opacity: 0.1;
  }
  6% {
    opacity: 0.85;
  }
  6.4% {
    opacity: 0;
  }
  18% {
    opacity: 0;
  }
  18.8% {
    opacity: 0.8;
  }
  19.2% {
    opacity: 0.05;
  }
  19.8% {
    opacity: 0.9;
  }
  20.2% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0.95;
  }
  43.6% {
    opacity: 0;
  }
  68% {
    opacity: 0;
  }
  69% {
    opacity: 0.9;
  }
  69.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines,
  .burn,
  .strobe {
    animation: none;
  }
}