frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Keyframes (defined here so they're always emitted) ──────────── */
@keyframes stepReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fillBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scanPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body, #root { height: 100%; overflow: hidden; }

  body {
    background: #080810;
    color: #dde1f0;
    font-family: 'IBM Plex Mono', monospace;
    -webkit-font-smoothing: antialiased;
    font-size: 13px;
  }

  /* Scanline texture */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.025) 3px,
      rgba(0,0,0,0.025) 4px
    );
    pointer-events: none;
    z-index: 9999;
  }
}

@layer utilities {
  .font-display { font-family: 'Syne', sans-serif; }

  .step-item {
    opacity: 0;
    animation: stepReveal 0.35s ease forwards;
  }

  .score-bar {
    transform-origin: left;
    transform: scaleX(0);
    animation: fillBar 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  }

  .fade-up {
    opacity: 0;
    animation: fadeUp 0.4s ease forwards;
  }

  .animate-scanPulse { animation: scanPulse 1.4s ease-in-out infinite; }
  .animate-ping      { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
  .slide-in          { animation: slideInRight 0.3s ease forwards; }

  .glow-red    { text-shadow: 0 0 35px rgba(248,113,113,0.55), 0 0 70px rgba(248,113,113,0.2); }
  .glow-green  { text-shadow: 0 0 35px rgba(74,222,128,0.55),  0 0 70px rgba(74,222,128,0.2);  }
  .glow-orange { text-shadow: 0 0 35px rgba(251,146,60,0.55),  0 0 70px rgba(251,146,60,0.2);  }
  .glow-purple { text-shadow: 0 0 35px rgba(192,132,252,0.55), 0 0 70px rgba(192,132,252,0.2); }
}

::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: #0f0f1a; }
::-webkit-scrollbar-thumb { background: #2a2a45; }