/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&family=Rajdhani:wght@300;500;700&display=swap');

/* === CUSTOM ANIMATIONS === */
@keyframes neonPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color), 0 0 40px var(--neon-color); }
  50% { opacity: 0.8; text-shadow: 0 0 5px var(--neon-color), 0 0 10px var(--neon-color), 0 0 20px var(--neon-color); }
}

@keyframes scanline {
  0% { bottom: 100%; }
  100% { bottom: 0%; }
}

@keyframes flicker {
  0% { opacity: 0.97; }
  5% { opacity: 0.95; }
  10% { opacity: 0.9; }
  15% { opacity: 0.95; }
  20% { opacity: 0.98; }
  25% { opacity: 0.95; }
  30% { opacity: 0.9; }
  70% { opacity: 0.95; }
  100% { opacity: 0.98; }
}

/* === EFFECTS === */
.neon-text {
  --neon-color: #0ff;
  animation: neonPulse 2s infinite ease-in-out;
}

.neon-border {
  box-shadow: 0 0 10px var(--tw-shadow-color), inset 0 0 5px var(--tw-shadow-color);
}

.scanlines {
  position: relative;
  overflow: hidden;
}

.scanlines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0.1;
  z-index: 10;
  pointer-events: none;
  animation: scanline 6s linear infinite;
}

.crt-effect {
  position: relative;
  background: radial-gradient(circle, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 100%);
  animation: flicker 0.15s infinite;
}

/* module: game */
#game-canvas {
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.8);
  border: 4px solid #333;
}

.tetromino-ghost {
  opacity: 0.3;
}

.grid-bg {
  background-size: 30px 30px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}