@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --neon-green: #39ff14;
  --neon-magenta: #ff2bd6;
  --neon-cyan: #2be7ff;
  --neon-yellow: #ffe72b;
  --bg-black: #050507;
  --panel-bg: #0c0c12;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-black);
  color: var(--neon-green);
  font-family: 'Press Start 2P', monospace;
  min-height: 100vh;
}

body {
  position: relative;
  overflow-x: hidden;
}

/* CRT scanline + vignette overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 2px,
    transparent 3px
  );
  z-index: 999;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 998;
}

a {
  color: inherit;
  text-decoration: none;
}

.neon-text {
  text-shadow:
    0 0 4px currentColor,
    0 0 11px currentColor,
    0 0 19px currentColor;
}

.neon-flicker {
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 55% { opacity: 0.55; }
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 0.7rem;
  padding: 0.8em 1.4em;
  background: transparent;
  border: 2px solid var(--neon-green);
  color: var(--neon-green);
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

.btn:hover, .btn:focus {
  background: var(--neon-green);
  color: #001a00;
  box-shadow: 0 0 18px var(--neon-green);
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #555;
  color: #555;
  box-shadow: none;
}