:root {
  --accent: #e10600;
  --bg: #0b0b0b;
  --fg: #f5f5f5;
  --track: #333;
}

/* Global + palette variables. */

:root {
  /* Palette */
  --bg-deep:    #0B1026;
  --bg-surface: #151B2E;
  --bg-inset:   #0A0E1F;
  --line:       #1F2937;
  --primary:    #E63946;
  --accent:     #FFD166;
  --success:    #B4E33D;
  --warning:    #FF9F1C;
  --danger:     #EF476F;
  --text:       #F1FAEE;
  --text-dim:   #8895B2;
  --track:      #FFD166;
  --track-glow: #FFD16633;

  /* Typography */
  --font-pixel: "Silkscreen", "Press Start 2P", monospace;
  --font-body:  "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Spacing */
  --gap: 16px;
  --radius: 2px;  /* pixel art = no big radii */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient background: subtle grid of dots, like a graph paper for track design */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(230, 57, 70, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 10% 90%, rgba(255, 209, 102, 0.05) 0%, transparent 40%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    32px 32px,
    32px 32px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 16, 38, 0.6) 80%, var(--bg-deep) 100%);
  z-index: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
}

h1, h2, h3 {
  font-family: var(--font-pixel);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

/* Scrollbars kept in theme */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line); }
*::-webkit-scrollbar-track { background: transparent; }

/* Scanline overlay — pure decoration */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.5) 2px,
    rgba(255, 255, 255, 0.5) 3px
  );
  mix-blend-mode: overlay;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}