:root {
  --color-fondo: #0d0f1a;
  --color-fondo-2: #161a2e;
  --color-acento: #ffd23f;
  --color-acento-2: #ff5964;
  --color-texto: #e8e9f3;
  --color-tecla-bg: #232842;
  --fuente-pixel: "Courier New", Courier, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fondo oscuro alrededor del canvas, con un leve degradado para dar atmósfera. */
  background:
    radial-gradient(circle at 50% 0%, var(--color-fondo-2), var(--color-fondo) 70%);
  font-family: var(--fuente-pixel);
  color: var(--color-texto);
  /* Evita que las flechas hagan scroll en la página al jugar. */
  overflow: hidden;
}

.contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.titulo {
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
  letter-spacing: 0.35em;
  font-weight: 700;
  text-transform: uppercase;
  /* "Sombra dura" de pixel art: sin desenfoque, desplazada en bloque. */
  text-shadow:
    3px 3px 0 var(--color-acento-2),
    6px 6px 0 #00000055;
  color: var(--color-acento);
}

#pista {
  /* Borde grueso tipo cabina arcade. */
  border: 4px solid var(--color-acento);
  border-radius: 6px;
  background: #20243c; /* color base del asfalto provisional */
  box-shadow:
    0 0 0 4px #000,
    0 18px 50px #000a;
  /* Clave para pixel art: el navegador NO debe suavizar al escalar el canvas. */
  image-rendering: pixelated;
  /* El canvas mide 1280x720; lo encajamos en la ventana manteniendo 16:9
     sin perder nitidez (image-rendering: pixelated). */
  width: min(1280px, 96vw);
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
}

.controles {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.tecla {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.15em 0.5em;
  text-align: center;
  background: var(--color-tecla-bg);
  border: 2px solid #3a416a;
  border-radius: 4px;
  box-shadow: 0 2px 0 #0008;
}