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

:root {
  --neon-cyan: #00f3ff;
  --neon-pink: #ff007f;
  --neon-amber: #ffb700;
  --neon-green: #39ff14;
  --crt-bg: #050711;
  --cabinet-bezel: #121526;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Press Start 2P', monospace;
  background-color: #08090e;
  background-image: 
    radial-gradient(ellipse at 50% 10%, rgba(0, 243, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 0, 127, 0.05) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 4px);
  color: #d1f7ff;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden;
}

/* CRT Screen Effect */
.crt-container {
  position: relative;
  overflow: hidden;
  background: #020307;
  border: 4px solid #1a2238;
  box-shadow: 
    0 0 0 2px #00f3ff22,
    0 0 35px rgba(0, 243, 255, 0.25),
    inset 0 0 40px rgba(0, 0, 0, 0.9);
  border-radius: 12px;
}

.crt-scanlines::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  z-index: 20;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.85;
}

.crt-scanlines::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: radial-gradient(circle at center, transparent 65%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 21;
}

/* Screen curvature and subtle flicker */
.crt-flicker {
  animation: flicker 0.15s infinite alternate;
}

@keyframes flicker {
  0% { opacity: 0.985; }
  100% { opacity: 1; }
}

/* Neon Text Glows */
.glow-cyan {
  color: #00f3ff;
  text-shadow: 0 0 5px #00f3ff, 0 0 12px rgba(0, 243, 255, 0.7);
}

.glow-amber {
  color: #ffb700;
  text-shadow: 0 0 5px #ffb700, 0 0 14px rgba(255, 183, 0, 0.7);
}

.glow-pink {
  color: #ff2d88;
  text-shadow: 0 0 5px #ff2d88, 0 0 14px rgba(255, 45, 136, 0.7);
}

.glow-green {
  color: #39ff14;
  text-shadow: 0 0 5px #39ff14, 0 0 12px rgba(57, 255, 20, 0.7);
}

/* Canvas styling */
#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background-color: #03050c;
}

/* Marquee Header */
.marquee-panel {
  background: linear-gradient(180deg, #1f113a 0%, #0c0818 100%);
  border: 3px solid #ff007f;
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.4), inset 0 0 10px rgba(255, 0, 127, 0.2);
}

/* Retro Arcade Buttons */
.arcade-btn {
  font-family: 'Press Start 2P', monospace;
  position: relative;
  transition: all 0.08s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,0.6);
  touch-action: manipulation;
}

.arcade-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* Mobile Virtual Touch Controls */
.touch-btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
}

.touch-btn:active, .touch-btn.active {
  filter: brightness(1.4);
  transform: scale(0.94);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090c16;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00f3ff;
}