/* ═══════════════════════════════════════════
   THINK TWICE — Retro CRT & Arcade Effects
   ═══════════════════════════════════════════ */

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

:root {
  /* Neon Arcade Palette */
  --bg-dark: #0a0a0f;
  --bg-card: #12121e;
  --neon-cyan: #00fff5;
  --neon-pink: #ff00aa;
  --neon-yellow: #ffe600;
  --neon-green: #39ff14;
  --neon-red: #ff3131;
  --text-white: #e8e8e8;
  --text-dim: #6a6a8a;
  --scanline-opacity: 0.04;

  /* Fonts */
  --font-pixel: 'Press Start 2P', monospace;
  --font-terminal: 'VT323', monospace;
}

/* CRT Scanline Overlay — applied to body::after */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* CRT Edge Vignette */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* Neon Glow Utility Classes */
.glow-cyan {
  text-shadow: 0 0 7px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 40px rgba(0, 255, 245, 0.3);
}

.glow-pink {
  text-shadow: 0 0 7px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 40px rgba(255, 0, 170, 0.3);
}

.glow-green {
  text-shadow: 0 0 7px var(--neon-green), 0 0 20px var(--neon-green), 0 0 40px rgba(57, 255, 20, 0.3);
}

.glow-yellow {
  text-shadow: 0 0 7px var(--neon-yellow), 0 0 20px var(--neon-yellow), 0 0 40px rgba(255, 230, 0, 0.3);
}

.glow-red {
  text-shadow: 0 0 7px var(--neon-red), 0 0 20px var(--neon-red), 0 0 40px rgba(255, 49, 49, 0.3);
}

/* Box glow variants */
.box-glow-cyan {
  box-shadow: 0 0 5px var(--neon-cyan), 0 0 15px rgba(0, 255, 245, 0.3), inset 0 0 5px rgba(0, 255, 245, 0.1);
}

.box-glow-pink {
  box-shadow: 0 0 5px var(--neon-pink), 0 0 15px rgba(255, 0, 170, 0.3), inset 0 0 5px rgba(255, 0, 170, 0.1);
}

.box-glow-green {
  box-shadow: 0 0 5px var(--neon-green), 0 0 15px rgba(57, 255, 20, 0.3), inset 0 0 5px rgba(57, 255, 20, 0.1);
}

/* Flashing "PRESS START" animation */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

.blink {
  animation: blink 1s step-end infinite;
}

/* Slow pulse glow */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* CRT flicker — very subtle */
@keyframes crtFlicker {
  0% { opacity: 1; }
  5% { opacity: 0.98; }
  10% { opacity: 1; }
  15% { opacity: 0.97; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}

.crt-flicker {
  animation: crtFlicker 4s linear infinite;
}

/* Screen shake for wrong answers */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, -2px); }
  20% { transform: translate(4px, 2px); }
  30% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  50% { transform: translate(-2px, 2px); }
  60% { transform: translate(2px, -2px); }
  70% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
  90% { transform: translate(0, 0); }
}

.screen-shake {
  animation: screenShake 0.4s ease-out;
}

/* Correct answer celebration burst */
@keyframes correctBurst {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.correct-burst {
  animation: correctBurst 0.4s ease-out;
}

/* Score tick-up counter animation */
@keyframes scoreUp {
  0% { transform: translateY(0); color: var(--neon-green); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); color: var(--text-white); }
}

.score-up {
  animation: scoreUp 0.5s ease-out;
}

/* Grid background pattern (Tron-style) */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 255, 245, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 245, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Pixel border utility */
.pixel-border {
  border: 3px solid var(--neon-cyan);
  box-shadow: 
    inset 0 0 0 1px var(--bg-dark),
    0 0 0 1px var(--neon-cyan);
}