/* ==========================================================================
   Nitro Circuit — simulator
   Keyframes and base rules carried over from the design prototype's <helmet>.
   Everything else is inline on the template, as the prototype had it.
   ========================================================================== */

html, body { margin: 0; padding: 0; background: #07040F; overflow: hidden; }
* { box-sizing: border-box; }
a { color: #00E5FF; text-decoration: none; }
a:hover { color: #FF2E88; }
::selection { background: #FF2E88; color: #fff; }

@keyframes winpulse { from { filter: brightness(1) } to { filter: brightness(1.55) } }
@keyframes popin {
  0% { transform: scale(.7); opacity: 0 }
  60% { transform: scale(1.05); opacity: 1 }
  100% { transform: scale(1); opacity: 1 }
}
@keyframes neonflicker {
  0%, 100% { opacity: 1 }
  92% { opacity: 1 }
  93% { opacity: .55 }
  95% { opacity: 1 }
  96% { opacity: .7 }
  97% { opacity: 1 }
}
@keyframes dash { to { stroke-dashoffset: -40 } }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .25 } }
@keyframes hzn { from { background-position-y: 0 } to { background-position-y: 64px } }
@keyframes idle { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* Pixel art scales up through background-image; keep the edges hard. */
[style*="sprites/"] { image-rendering: pixelated; }

/* The prototype expressed hover as a design-tool-only `style-hover`
   attribute. The renderer marks every clickable with data-click instead, so
   one rule covers all of them — and gives the keyboard a visible focus ring. */
[data-click] { transition: filter .12s ease; }
[data-click]:hover { filter: brightness(1.28); }
[data-click]:focus-visible {
  outline: 3px solid #FFD83D;
  outline-offset: 2px;
  filter: brightness(1.28);
}

.noscript {
  max-width: 44rem;
  margin: 0 auto;
  padding: 18vh 24px 0;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  color: #EDE6FF;
  font-size: 20px;
  line-height: 1.4;
}
.noscript h1 {
  font-family: 'Bungee', cursive;
  font-weight: 400;
  font-size: clamp(34px, 7vw, 56px);
  color: #fff;
  text-shadow: 4px 4px 0 #FF2E88;
  margin: 0 0 18px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}