:root {
  --time-pilot-accent: #f6d889;
  --time-pilot-alt: #8dd8ff;
  --time-pilot-glow: 0 0 18px rgba(246, 216, 137, 0.5), 0 0 48px rgba(141, 216, 255, 0.35);
  --time-pilot-frame-shadow: inset 0 0 90px rgba(112, 186, 255, 0.25);
}

body {
  background: radial-gradient(circle at 50% -10%, #213452, #050914 72%);
  color: #f3f7ff;
  font-family: 'Share Tech Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 100vh;
}

.time-pilot-screen {
  --screen-aspect: 22 / 14;
  --screen-padding: clamp(12px, 2.8vw, 30px);
  --crt-radius: 18px;
  --crt-scanline-spacing: 3px;
  --crt-scanline-thickness: 1px;
  --crt-scanline-alpha: 0.06;
  --crt-scanline-opacity: 0.82;
  --crt-aperture-opacity: 0.12;
  --crt-vignette-gradient: radial-gradient(ellipse at center, rgba(14, 34, 64, 0.35) 0%, rgba(6, 16, 36, 0.92) 75%, rgba(0, 0, 0, 0.98) 100%);
  --crt-flicker-animation: timepilot-flicker 2.1s steps(2, end) infinite;
  --crt-glow-shadow: inset 0 0 96px rgba(120, 200, 255, 0.28);
}

.time-pilot-screen canvas {
  background: linear-gradient(180deg, rgba(10, 26, 52, 0.92) 0%, rgba(4, 10, 24, 0.96) 55%, rgba(1, 3, 12, 1) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.85),
    var(--time-pilot-frame-shadow);
}

.time-pilot-hud {
  color: var(--time-pilot-accent);
  text-shadow: var(--time-pilot-glow);
  gap: clamp(12px, 2.4vw, 30px);
}

.time-pilot-hud .retro-controls {
  justify-content: space-between;
  font-size: clamp(12px, 1.85vw, 18px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.time-pilot-hud .title {
  font-weight: 700;
  color: var(--time-pilot-alt);
}

.time-pilot-hud .fps {
  opacity: 0.8;
}

.time-pilot-controls {
  font-size: clamp(10px, 1.7vw, 15px);
  letter-spacing: 0.08em;
  color: rgba(237, 247, 255, 0.85);
}

.crt-overlay::after {
  box-shadow: 0 0 36px rgba(150, 210, 255, 0.32);
}

@keyframes timepilot-flicker {
  0%,
  100% {
    opacity: 0.84;
  }
  38% {
    opacity: 0.78;
  }
  64% {
    opacity: 0.9;
  }
}