System Requirements Document for f-rmula-1

1. Introduction

f-rmula-1 es un juego de carreras de Fórmula 1 completo, optimizado para dispositivos móviles (teléfonos y tablets) y ejecutable directamente en el navegador mediante HTML5/JavaScript con Three.js embebido vía CDN. El producto entrega una experiencia de conducción de monoplazas con sensación mecánica y de precisión: aceleración progresiva, agarre neumático, subviraje al tomar curvas a alta velocidad y fricción al salir de la pista (césped/grava).

El juego se entrega como un único archivo ejecutable index.html que contiene HTML, CSS y JavaScript/Three.js embebido vía CDN, sin librerías externas que requieran instalación ni servidor local. El código está comentado de forma clara señalando dónde se ajustan los parámetros de física (velocidad máxima, agarre, potencia de frenado) y de la IA.

Audiencia: Aficionados al motorsport que juegan en teléfonos y tablets, en el navegador, y buscan una sensación de simulación de conducción completa con controles táctiles, rivales controlados por IA y telemetría de carrera legible como instrumento de precisión.

2. System Overview

f-rmula-1 es un juego de carreras de Fórmula 1 que se ejecuta íntegramente en el navegador del dispositivo móvil. El jugador accede a la entrada pública anónima index.html, que presenta el producto y ofrece el inicio de la carrera, y desde ahí entra a la sesión de juego Carrera, donde se desarrolla toda la conducción.

Actores:

• Jugador de carreras móvil (persona activa): pilota el monoplaza con controles táctiles, compite contra rivales de IA, gestiona el boost DRS/ERS y persigue su mejor tiempo de vuelta.
• Coches rivales controlados por IA (actor no-persona, sistema): 2 a 4 competidores en pista con comportamientos de adelantamiento y trazada.

Comportamiento aceptado (resumen):

• Modo de carrera rápida o contrarreloj (Time Trial) con contador de vueltas y mejor tiempo de vuelta (Best Lap).
• Sistema de IA para 2 a 4 coches rivales con adelantamiento y trazada.
• HUD con indicador de velocidad (KM/H), marcha actual y posición de carrera (ej. 1/5).
• Controles táctiles: izquierda/derecha (o acelerómetro/deslizamiento), acelerar, frenar/reversa, y DRS/ERS con cooldown.
• Adaptación automática a orientación vertical y horizontal.
• Vista 3D con Three.js.
• Pista con curvas, zonas de frenado, pianos (curbs) y línea de meta.
• Monoplazas simplificados con colores distintivos por escudería.
• Física: aceleración progresiva, agarre neumático, subviraje a alta velocidad y fricción fuera de pista.

Exclusiones y límites: El producto no requiere instalación ni servidor local; no usa librerías externas que requieran instalación. La entrega es un único archivo index.html. No se incluyen capacidades adyacentes como cuentas de usuario, multijugador en red, tienda, ni progresión persistente más allá de lo que la sesión de juego registra.

2a. Product Interpretation and Delivery Boundary

Entrega: Todo el producto se entrega como un único archivo ejecutable index.html con HTML, CSS y JavaScript/Three.js embebido vía CDN. El juego se ejecuta directamente en el navegador del dispositivo móvil, sin instalación ni servidor local.

Acceso: La entrada pública index.html es anónima y explica el producto antes de jugar. La página Carrera también es de acceso anónimo: no se requiere identidad ni cuenta para jugar. No existe una capa de identidad de aplicación, ya que ninguna capacidad aceptada exige que un actor humano posea o reanude estado durable ligado a una cuenta; el estado relevante (vueltas, mejor tiempo, posición) vive dentro de la sesión de juego.

Frontera actual/futuro: Todo el alcance descrito es actual. No se han aceptado requisitos futuros.

2b. Source Content Inventory

No aplica: no se ha proporcionado ninguna directiva de referencia con content_source.

2c. Page Content and Component Coverage

index.html

Información y estado:

• Entrada pública anónima que presenta el producto antes de jugar.
• Titular de producto y contexto de la experiencia de conducción de Fórmula 1.
• Franja de instrumento en vivo con los valores de referencia del HUD: SPEED 000 KM/H · GEAR N · LAP 0/0 · POS 1/5.
• Mapa vectorial topográfico del circuito como motivo de marca.

Acciones primarias:

• INICIAR CARRERA: botón ancho tipo paleta que inicia el modo de carrera rápida.
• CONTRARRELOJ: botón fantasma secundario que inicia el modo contrarreloj (Time Trial).

Acciones de soporte:

• Lectura de la franja de instrumento como vista previa del HUD de juego.

Entidades de dominio:

• Producto (juego de carreras de F1), modos de juego (carrera rápida, contrarreloj), circuito (mapa topográfico), monoplaza (render 3D de presentación).

Responsabilidades de componentes:

• Hero de cockpit: monoplaza 3D en ángulo tres cuartos delantero, ocupando el 60% derecho del viewport y sangrando por los bordes derecho e inferior, iluminado por una única luz de contorno cálida.
• Columna tipográfica: titular condensado "FÓRMULA 1" sobre una regla capilar, con la franja de instrumento en vivo debajo.
• Paleta de inicio: CTA dorado ancho "INICIAR CARRERA" anclado abajo a la izquierda de la columna tipográfica, con el botón fantasma "CONTRARRELOJ" al lado.
• Mapa topográfico: vector teal fino del circuito en el tercio inferior, sangrando por ambos bordes.

Estados:

• Carga: render del monoplaza y del mapa del circuito; la franja de instrumento muestra valores de referencia.
• Vacío: no aplica (la entrada siempre presenta el producto y las dos acciones de inicio).
• Éxito: el jugador selecciona un modo y entra a Carrera.
• Error/recuperación: si el render 3D no está disponible, la entrada mantiene legibles el titular, la franja de instrumento y ambos botones de inicio.
• Reducción de movimiento: el turntable del monoplaza se convierte en una toma estática en tres cuartos.

Carrera

Información y estado:

• Sesión de carrera rápida o contrarreloj en curso.
• HUD de instrumento: velocímetro circular con aguja barrida y numeral interior, numeral de marcha, contador de vueltas, mejor tiempo de vuelta (Best Lap), posición de carrera (ej. 1/5), deltas de sector.
• Estado de DRS/ERS: energía disponible, estado armado y arco de cooldown.
• Minimapa del circuito derivado del mapa topográfico.

Acciones primarias:

• Dirección: pads circulares izquierda/derecha (o acelerómetro/deslizamiento).
• Acelerar: pad de aceleración.
• Frenar/Reversa: pad de frenado y reversa.
• DRS/ERS: disparador con forma de paleta de volante, con anillo interior que se llena de teal al agotarse la energía y destella en dorado al armarse, y arco de cooldown dibujado sobre el propio control.

Acciones de soporte:

• Lectura del velocímetro, marcha, vueltas, mejor tiempo, posición y deltas de sector.
• Lectura del minimapa.

Entidades de dominio:

• Monoplaza del jugador, coches rivales de IA (2 a 4), circuito (curvas, zonas de frenado, pianos, línea de meta), vueltas, tiempos de vuelta, mejor tiempo de vuelta, posición de carrera, energía DRS/ERS y su cooldown.

Responsabilidades de componentes:

• Clúster de instrumentos: velocímetro circular a la izquierda, marcha en el centro, vueltas/posición/deltas de sector a la derecha.
• Columna de dirección: paletas de acelerador y freno apiladas verticalmente en el borde exterior izquierdo, alcanzables con el pulgar.
• Paleta DRS/ERS: en el tercio derecho, con anillo interior y arco de cooldown.
• Franja de espejo retrovisor: en el tercio derecho.
• Pista 3D: escena Three.js con curvas, zonas de frenado, pianos y línea de meta.
• Monoplazas: modelos simplificados con colores distintivos por escudería.
• Deltas de sector: anotaciones de margen sobre una regla capilar (▲ 0.184 / ▼ 0.062 en teal y dorado).

Estados:

• Carga: inicialización de la escena 3D, la pista, los monoplazas y el HUD.
• Vacío: no aplica (la sesión siempre tiene un monoplaza del jugador y la pista).
• Éxito: el jugador completa vueltas, registra tiempos, mejora su mejor vuelta y termina la carrera o la sesión contrarreloj con una posición final.
• Error/recuperación: si el monoplaza sale de la pista, la fricción de césped/grava reduce la velocidad y el jugador puede recuperar la trazada; si el render 3D degrada el rendimiento, la vista puede ser superior/pseudo-3D isométrica tipo arcade.
• Reducción de movimiento: la aguja salta al valor final y las transiciones se convierten en cortes instantáneos.

3. Functional Requirements

Cada requisito se expresa como historia de usuario con su procedencia (explicit, basic_default, required_inference), hechos de ciclo de vida y aceptación observable.

FR-01 — Juego de carreras de Fórmula 1 completo en el navegador (explicit) Como Jugador de carreras móvil, quiero jugar un juego de carreras de Fórmula 1 completo directamente en el navegador de mi móvil o tablet, para disfrutar de una experiencia de conducción de F1 sin instalar nada.

• Disparador/entrada: el jugador abre index.html en el navegador del dispositivo móvil.
• Resultado observable: el juego carga y se ejecuta en el navegador con HTML5/JavaScript y Three.js embebido vía CDN.
• Estado/resultado: el juego está operativo en móviles y tablets.
• Fallo/recuperación: si el render 3D degrada el rendimiento, se puede usar la vista superior/pseudo-3D isométrica tipo arcade.
• Continuación: el jugador inicia un modo de juego.

FR-02 — Modo de carrera rápida o contrarreloj con contador de vueltas y mejor tiempo de vuelta (explicit) Como Jugador de carreras móvil, quiero disputar una carrera rápida o una sesión contrarreloj (Time Trial) con contador de vueltas y mejor tiempo de vuelta (Best Lap), para medir y mejorar mi rendimiento.

• Disparador/entrada: el jugador selecciona el modo de carrera rápida o contrarreloj desde index.html.
• Resultado observable: el HUD muestra el contador de vueltas y el mejor tiempo de vuelta (Best Lap).
• Estado/resultado: cada vuelta completada actualiza el contador y, si mejora, el mejor tiempo de vuelta.
• Fallo/recuperación: si el jugador sale de pista, la vuelta continúa con la penalización de fricción correspondiente.
• Continuación: el jugador sigue completando vueltas hasta terminar la carrera o la sesión contrarreloj.

FR-03 — Sistema de IA para 2 a 4 coches rivales con adelantamiento y trazada (explicit) Como Jugador de carreras móvil, quiero competir contra 2 a 4 coches rivales controlados por IA que adelanten y sigan una trazada, para tener una carrera disputada.

• Disparador/entrada: el jugador inicia una carrera.
• Resultado observable: 2 a 4 coches rivales aparecen en pista y se comportan con adelantamiento y trazada.
• Estado/resultado: los rivales ocupan posiciones de carrera y compiten con el jugador.
• Fallo/recuperación: si un rival se sale de la trazada, la IA recupera la línea de carrera.
• Continuación: la carrera continúa con los rivales en pista.

FR-04 — Indicador de velocidad (KM/H), marcha actual y posición de carrera (explicit) Como Jugador de carreras móvil, quiero ver mi velocidad en KM/H, la marcha actual y mi posición de carrera (ej. 1/5), para conocer mi estado en todo momento.

• Disparador/entrada: la sesión de carrera está en curso.
• Resultado observable: el HUD muestra la velocidad en KM/H, la marcha actual y la posición de carrera en formato como 1/5.
• Estado/resultado: los valores se actualizan conforme el jugador conduce.
• Fallo/recuperación: no aplica; los indicadores permanecen legibles.
• Continuación: el jugador ajusta su conducción según los indicadores.

FR-05 — Controles táctiles de dirección (explicit) Como Jugador de carreras móvil, quiero girar la dirección con botones virtuales izquierda/derecha o con acelerómetro/deslizamiento, para pilotar con precisión en pantalla táctil.

• Disparador/entrada: el jugador toca los botones virtuales izquierda/derecha o usa el acelerómetro/deslizamiento.
• Resultado observable: el monoplaza gira en la dirección indicada.
• Estado/resultado: la dirección responde de forma continua mientras se mantiene la entrada.
• Fallo/recuperación: si el jugador suelta el control, la dirección vuelve a neutro.
• Continuación: el jugador continúa trazando la curva.

FR-06 — Controles táctiles de acelerar y frenar/reversa (explicit) Como Jugador de carreras móvil, quiero acelerar y frenar/reversar con botones virtuales, para controlar la velocidad del monoplaza.

• Disparador/entrada: el jugador toca el botón de acelerar o el de frenar/reversa.
• Resultado observable: el monoplaza acelera progresivamente o frena/reversa.
• Estado/resultado: la velocidad cambia según la entrada mantenida.
• Fallo/recuperación: si el jugador suelta el botón, el monoplaza deja de acelerar o frenar.
• Continuación: el jugador ajusta su velocidad para la siguiente curva o recta.

FR-07 — Botón de DRS/ERS con boost temporal y cooldown (explicit) Como Jugador de carreras móvil, quiero activar un boost temporal de velocidad con DRS/ERS que tenga cooldown, para ganar velocidad en momentos clave.

• Disparador/entrada: el jugador toca el botón de DRS/ERS.
• Resultado observable: el monoplaza recibe un boost temporal de velocidad; el control muestra el estado armado y el cooldown.
• Estado/resultado: el boost se consume y entra en cooldown antes de poder reutilizarse.
• Fallo/recuperación: si el boost está en cooldown, no se puede reactivar hasta que el cooldown termine.
• Continuación: el jugador vuelve a usar el boost cuando el cooldown se completa.

FR-08 — Adaptación automática a pantallas verticales y horizontales (explicit) Como Jugador de carreras móvil, quiero que el juego se adapte automáticamente a la orientación vertical y horizontal, para jugar cómodamente en cualquier postura.

• Disparador/entrada: el jugador rota el dispositivo o lo usa en orientación vertical u horizontal.
• Resultado observable: el layout se reorganiza automáticamente (responsive layout).
• Estado/resultado: en horizontal, el clúster de instrumentos se sitúa abajo al centro; en vertical, el clúster se acopla arriba como barra horizontal y los controles caen a las esquinas inferiores.
• Fallo/recuperación: los valores legibles permanecen dentro del margen seguro en 375px, 768px y 1280px.
• Continuación: el jugador continúa la carrera en la nueva orientación.

FR-09 — Vista en 3D con Three.js (explicit) Como Jugador de carreras móvil, quiero una vista en 3D con Three.js (o vista superior/pseudo-3D isométrica tipo arcade si es más eficiente en rendimiento), para una experiencia visual inmersiva.

• Disparador/entrada: el jugador inicia la carrera.
• Resultado observable: la pista y los monoplazas se renderizan en 3D con Three.js.
• Estado/resultado: la vista sigue al monoplaza del jugador durante la conducción.
• Fallo/recuperación: si el rendimiento es insuficiente, se puede usar la vista superior/pseudo-3D isométrica tipo arcade.
• Continuación: el jugador conduce con la vista activa.

FR-10 — Pista con curvas, zonas de frenado, pianos y línea de meta (explicit) Como Jugador de carreras móvil, quiero una pista con curvas, zonas de frenado, pianos (curbs) y línea de meta, para una experiencia de circuito completa.

• Disparador/entrada: el jugador entra a la pista.
• Resultado observable: la pista presenta curvas, zonas de frenado, pianos y línea de meta.
• Estado/resultado: la línea de meta marca el cruce de vuelta; los pianos delimitan los bordes.
• Fallo/recuperación: si el jugador pisa fuera de pista, la fricción de césped/grava reduce la velocidad.
• Continuación: el jugador completa la vuelta cruzando la línea de meta.

FR-11 — Modelos de monoplazas simplificados con colores distintivos por escudería (explicit) Como Jugador de carreras móvil, quiero monoplazas simplificados con colores distintivos por escudería, para distinguir mi coche y a los rivales de un vistazo.

• Disparador/entrada: la carrera está en curso.
• Resultado observable: cada monoplaza muestra un color distintivo de escudería.
• Estado/resultado: el jugador y los rivales se distinguen visualmente.
• Fallo/recuperación: no aplica.
• Continuación: el jugador identifica rivales y compite.

FR-12 — Física: aceleración progresiva, agarre neumático, subviraje y fricción fuera de pista (explicit) Como Jugador de carreras móvil, quiero sentir aceleración progresiva, agarre neumático, subviraje al tomar curvas a alta velocidad y fricción al salir de la pista (césped/grava), para una sensación de conducción realista.

• Disparador/entrada: el jugador acelera, gira a alta velocidad o sale de la pista.
• Resultado observable: la aceleración es progresiva; el agarre neumático limita la conducción; a alta velocidad el monoplaza subvira; fuera de pista la fricción de césped/grava reduce la velocidad.
• Estado/resultado: el comportamiento del monoplaza refleja estos parámetros de física.
• Fallo/recuperación: el jugador corrige la trazada y vuelve a pista para recuperar velocidad.
• Continuación: el jugador continúa la vuelta.

FR-13 — Entrega en un único archivo ejecutable index.html (explicit) Como Jugador de carreras móvil, quiero recibir todo el juego en un único archivo ejecutable index.html con HTML, CSS y JavaScript/Three.js embebido vía CDN, para ejecutarlo sin instalación ni servidor local.

• Disparador/entrada: el jugador abre index.html.
• Resultado observable: el juego completo se ejecuta desde ese único archivo.
• Estado/resultado: HTML, CSS y JavaScript/Three.js están embebidos en el archivo.
• Fallo/recuperación: no aplica.
• Continuación: el jugador juega.

FR-14 — Código comentado señalando parámetros de física y de IA (explicit) Como Jugador de carreras móvil (y como lector del código), quiero que el código esté comentado claramente señalando dónde se ajustan los parámetros de física (velocidad máxima, agarre, potencia de frenado) y de la IA, para poder ajustar el comportamiento del juego.

• Disparador/entrada: se inspecciona el código de index.html.
• Resultado observable: los comentarios señalan los parámetros de física (velocidad máxima, agarre, potencia de frenado) y de la IA.
• Estado/resultado: los parámetros son localizables y ajustables.
• Fallo/recuperación: no aplica.
• Continuación: el lector ajusta los parámetros.

FR-15 — Código 100% funcional, limpio y sin librerías externas que requieran instalación o servidor local (explicit) Como Jugador de carreras móvil, quiero que el código sea 100% funcional, limpio y sin librerías externas que requieran instalación o servidor local, para ejecutarlo directamente en el navegador.

• Disparador/entrada: el jugador abre index.html.
• Resultado observable: el juego funciona sin instalación ni servidor local.
• Estado/resultado: el código es funcional y limpio.
• Fallo/recuperación: no aplica.
• Continuación: el jugador juega sin dependencias adicionales.

4. User Personas

Jugador de carreras móvil

Contexto de producto: Juega en móvil o tablet directamente en el navegador y busca una experiencia de conducción de Fórmula 1 completa. No instala nada ni levanta un servidor: abre index.html y juega.

Objetivo principal: Completar vueltas en modo carrera rápida o contrarreloj, competir contra 2 a 4 rivales controlados por IA, gestionar el boost de DRS/ERS con su cooldown y mejorar su mejor tiempo de vuelta.

Responsabilidades recurrentes:

• Pilotar con los controles táctiles: dirección (izquierda/derecha o acelerómetro/deslizamiento), acelerar, frenar/reversa y DRS/ERS.
• Leer el indicador de velocidad (KM/H), la marcha actual y la posición de carrera (ej. 1/5).
• Adaptarse a la orientación vertical u horizontal de la pantalla.
• Gestionar el momento de activación del boost DRS/ERS y esperar su cooldown.

Entradas y decisiones:

• Elección del modo de juego (carrera rápida o contrarreloj) en la entrada pública.
• Decisión de cuándo acelerar, frenar, girar y activar el boost.
• Decisión de trazada ante curvas, zonas de frenado y pianos.

Interacciones con otros participantes:

• Compite contra 2 a 4 coches rivales controlados por IA, que adelantan y siguen una trazada.
• Su posición de carrera depende del comportamiento de esos rivales.

Éxito observable: Terminar la carrera o la sesión contrarreloj con tiempos registrados y una posición final, habiendo mejorado su mejor tiempo de vuelta cuando corresponde.

Qué hace diferente a este rol: Es el único actor humano del producto; su trabajo es simultáneamente de conducción (física y trazada) y de lectura de instrumentos (velocidad, marcha, posición, vueltas, deltas), con la restricción de hacerlo en pantalla táctil y en dos orientaciones posibles.

5. Core User Flows

Flujo 1 — Iniciar una carrera rápida desde la entrada pública

1. Contexto inicial: El jugador abre index.html en el navegador de su móvil o tablet. La entrada pública es anónima y presenta el producto.
2. Acción: El jugador lee el titular "FÓRMULA 1" y la franja de instrumento en vivo (SPEED 000 KM/H · GEAR N · LAP 0/0 · POS 1/5), y observa el monoplaza 3D y el mapa topográfico del circuito.
3. Decisión: El jugador elige el modo de carrera rápida tocando INICIAR CARRERA.
4. Resultado observable: El juego entra a la página Carrera y comienza la sesión de carrera rápida con el HUD de instrumento activo.
5. Continuación: El jugador pilota con los controles táctiles (ver Flujo 3).

Flujo 2 — Iniciar una sesión contrarreloj (Time Trial)

1. Contexto inicial: El jugador está en index.html.
2. Acción: El jugador toca CONTRARRELOJ.
3. Resultado observable: El juego entra a la página Carrera en modo contrarreloj, con contador de vueltas y mejor tiempo de vuelta (Best Lap) visibles en el HUD.
4. Continuación: El jugador completa vueltas persiguiendo su mejor tiempo (ver Flujo 4).

Flujo 3 — Pilotar con controles táctiles y competir contra la IA

1. Contexto inicial: El jugador está en la página Carrera con una carrera rápida en curso; hay 2 a 4 coches rivales de IA en pista.
2. Acción: El jugador usa los pads circulares de dirección (izquierda/derecha) o el acelerómetro/deslizamiento, el pad de acelerar y el pad de frenar/reversa.
3. Resultado observable: El monoplaza acelera progresivamente, gira, frena o reversa; el velocímetro circular con aguja barrida y el numeral de marcha reflejan el estado.
4. Decisión: Ante una curva, el jugador decide frenar en la zona de frenado y trazar; a alta velocidad experimenta subviraje y debe corregir.
5. Resultado observable: Los rivales de IA adelantan y siguen su trazada; la posición de carrera (ej. 1/5) se actualiza en el HUD.
6. Fallo/recuperación: Si el jugador sale de pista, la fricción de césped/grava reduce su velocidad; el jugador corrige y vuelve a la trazada.
7. Continuación: El jugador cruza la línea de meta y el contador de vueltas avanza.

Flujo 4 — Gestionar el boost DRS/ERS y perseguir el mejor tiempo de vuelta

1. Contexto inicial: El jugador está en la página Carrera, en carrera rápida o contrarreloj.
2. Acción: El jugador toca el disparador DRS/ERS con forma de paleta de volante.
3. Resultado observable: El monoplaza recibe un boost temporal de velocidad; el anillo interior del control se llena de teal al agotarse la energía y destella en dorado al armarse; el arco de cooldown se dibuja sobre el propio control.
4. Decisión: El jugador espera a que el cooldown termine antes de volver a activar el boost.
5. Resultado observable: Al completar una vuelta, el contador de vueltas avanza y, si el tiempo mejora, se actualiza el mejor tiempo de vuelta (Best Lap); los deltas de sector aparecen como anotaciones de margen sobre una regla capilar (▲ 0.184 / ▼ 0.062 en teal y dorado).
6. Fallo/recuperación: Si el boost está en cooldown, el jugador no puede reactivarlo hasta que el arco se complete.
7. Continuación: El jugador sigue completando vueltas hasta terminar la carrera o la sesión contrarreloj con una posición final y tiempos registrados.

Flujo 5 — Adaptación a la orientación del dispositivo

1. Contexto inicial: El jugador está en la página Carrera en orientación horizontal.
2. Acción: El jugador rota el dispositivo a vertical (o viceversa).
3. Resultado observable: El layout se reorganiza automáticamente: en horizontal, el clúster de instrumentos está abajo al centro (velocímetro a la izquierda, marcha en el centro, vueltas/posición/deltas a la derecha); en vertical, el clúster se acopla arriba como barra horizontal y los controles caen a las esquinas inferiores, dejando la pista 3D como ventana vertical en el medio.
4. Resultado observable: Los valores legibles permanecen dentro del margen seguro de 12px en 375px, 768px y 1280px.
5. Continuación: El jugador continúa la carrera en la nueva orientación.

6. Visuals Colors and Theme

Muse: MARQ by Garmin — estética de instrumento de precisión sobre titanio oscuro. Headline: Precision instrument luxury at 340 km/h.

Modo: Dark mode.

Colores por rol:

Sin azul en ninguna parte; sin fondo blanco; sin blobs de gradiente. Los gradientes solo se usan como resplandor radial de instrumento dentro de la cara de un gauge.

Tipografía:

• Headings: Saira Condensed 700/800, mayúsculas, para todos los numerales de instrumento y palabras de estado de carrera — SPEED, GEAR, LAP, POS, DRS — con tracking amplio en micro-etiquetas (0.18em) y tracking cerrado en numerales grandes (-0.02em). Numerales tabulares por defecto.
• Body: Barlow 400/500 para cuerpo, etiquetas de botón y briefing pre-carrera; Barlow 600 mayúsculas para el CTA.
• Escala: 1.25 modular en móvil, 1.333 en desktop. Lectura de velocidad clamp(64px, 18vw, 168px); numeral de marcha clamp(40px, 10vw, 96px); contador de vueltas clamp(22px, 5vw, 40px); etiquetas HUD 11–13px mayúsculas con tracking; cuerpo 15–17px; etiquetas de botón 14px mayúsculas. Line-height 1.05 en numerales, 1.55 en cuerpo.

Lenguaje de forma: Gauges circulares y biseles como geometría primaria — el velocímetro es un dial real con aguja barrida, no una barra. Paneles rectangulares redondeados con radios de 4px (bisel de instrumento, no tarjeta de app suave) y reglas capilares de 1px en #2A2F33. Los controles táctiles son pads circulares grandes y un disparador DRS/ERS rectangular con forma de paleta de volante, cada uno con un anillo interior que se ilumina en dorado al armarse. Las filas de datos están regladas y alineadas etiqueta/valor, nunca chips flotantes. Los pianos de pista son bloques alternos de bordes duros rojo/hueso; la línea de meta es una banda de cuadros negro/blanco renderizada como geometría, no como imagen.

Ritmo de espaciado: Reglas capilares y filas alineadas; márgenes seguros de 12px para todo valor legible en 375px, 768px y 1280px.

Estilo de imagen: Detalle macro de material y textura de ingeniería: titanio cepillado, tejido de fibra de carbono, dibujo de neumático, resplandor de disco de freno, pintura de piano. El hero pre-carrera es un monoplaza 3D con iluminación de estudio sobre suelo de grafito con una única luz de contorno, más un motivo de líneas topográficas que funciona también como mapa del circuito. Los coches rivales son monoplazas low-poly simplificados con bloques de color de librea distintivos por escudería. Sin fotografía de stock de multitudes, sin personajes de dibujos animados, sin clip art.

7. Signature Design Concept

Concepto: El cockpit como instrumento.

La primera pantalla no es un titular centrado con un botón: es una cabina. Fondo grafito a sangre completa (#0B0D0F). El elemento dominante es un único monoplaza 3D renderizado en ángulo tres cuartos delantero, ocupando el 60% derecho del viewport y sangrando por los bordes derecho e inferior, iluminado por una única luz de contorno cálida para que el titanio y la librea se lean como metal mecanizado. En el 40% izquierdo, un titular condensado sobredimensionado "FÓRMULA 1" en Saira Condensed 800 a clamp(56px, 14vw, 128px), apilado sobre una regla capilar, con una franja de instrumento en vivo debajo (SPEED 000 KM/H · GEAR N · LAP 0/0 · POS 1/5) que ya parece el HUD en carrera. El CTA es una única paleta dorada ancha (#C9A227) etiquetada INICIAR CARRERA, anclada abajo a la izquierda de la columna tipográfica, con un botón fantasma más pequeño CONTRARRELOJ al lado. Un mapa vectorial topográfico del circuito recorre el tercio inferior como una fina línea teal (#1FB6A6), sangrando por ambos bordes.

Movimientos de firma:

• Un velocímetro real de aguja barrida en el HUD — bisel circular, aguja dorada, marcas cada 20 km/h — en lugar de un número digital en una tarjeta; el numeral se sitúa dentro del dial y ambos se mueven juntos.
• Una franja de instrumento en vivo que persiste desde el hero pre-carrera hasta el gameplay: SPEED · GEAR · LAP · POS renderizados como una sola barra de titanio reglada, de modo que la pantalla de presentación y la cabina son visiblemente el mismo objeto.
• DRS/ERS como un disparador físico con forma de paleta, con un anillo interior que se llena de teal al agotarse la energía y destella en dorado al armarse, más un arco de cooldown que barre el borde de la paleta — el cooldown se dibuja sobre el propio control, no en un toast separado.
• Deltas de sector entregados como anotaciones de margen sobre una regla capilar (▲ 0.184 / ▼ 0.062 en teal y dorado), como una hoja de tiempos pegada a la cabina, en lugar de tarjetas flotantes.
• El circuito dibujado como mapa vectorial topográfico que sangra por los bordes del hero y luego se convierte en el minimapa, de modo que la forma de la pista es la marca del juego.

En portrait: el coche rota a una vista trasera tres cuartos y se sitúa sobre el titular apilado; el coche se recorta pero ninguna palabra, numeral o botón se recorta ni se cubre.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: dimensional_css

Landing Hero Motion Brief

• Sujeto focal: Un único monoplaza 3D en ángulo tres cuartos delantero, sobre suelo de grafito, con una única luz de contorno cálida; el mapa topográfico del circuito como vector teal en el tercio inferior.
• Tesis entrada → transformación → resultado: El jugador abre index.html → el monoplaza gira lentamente en un turntable de producto (8s de rotación, sin rebote) mientras la franja de instrumento en vivo muestra los valores de referencia del HUD → el jugador toca INICIAR CARRERA o CONTRARRELOJ y entra a la página Carrera, donde la misma franja de instrumento se convierte en el HUD activo.
• Vocabulario de movimiento: Preciso y mecánico, nunca juguetón. La aguja barre con easing físico (cubic-bezier(.2,.8,.2,1)) conforme cambia la velocidad; los números cuentan hacia arriba/abajo en lugar de saltar; la barra ERS se agota como un barrido teal suave con un destello dorado duro al armarse; los deltas de sector se deslizan desde la derecha sobre una regla capilar. Sin partículas, sin confeti, sin hover-lift en tarjetas.
• Primer fotograma compuesto: Fondo grafito a sangre completa; monoplaza 3D en el 60% derecho sangrando por los bordes derecho e inferior; titular "FÓRMULA 1" en Saira Condensed 800 sobre regla capilar en el 40% izquierdo; franja de instrumento en vivo debajo; CTA dorado INICIAR CARRERA abajo a la izquierda con CONTRARRELOJ al lado; mapa topográfico teal en el tercio inferior sangrando por ambos bordes.
• Estado de movimiento reducido: El turntable se convierte en una toma estática en tres cuartos; las actualizaciones de la aguja saltan al valor final; todos los barridos se convierten en cortes instantáneos.

9. Non-Functional Requirements

NFR-01 — Entrega en un único archivo (explicit) Todo el código debe entregarse en un único archivo ejecutable index.html que incluya HTML, CSS y JavaScript/Three.js embebido vía CDN.

• Racional: Restricción dura explícita del usuario.

NFR-02 — Sin instalación ni servidor local (explicit) Sin librerías externas que requieran instalación o servidor local.

• Racional: Restricción dura explícita del usuario.

NFR-03 — Ejecución directa en el navegador (explicit) Ejecutable directamente en el navegador (HTML5/JavaScript).

• Racional: Restricción dura explícita del usuario.

NFR-04 — Optimización para móviles y tablets (explicit) Optimizado para dispositivos móviles (móviles y tablets).

• Racional: Restricción dura explícita del usuario.

NFR-05 — Código comentado (explicit) El código debe estar comentado señalando dónde se ajustan los parámetros de física (velocidad máxima, agarre, potencia de frenado) y de la IA.

• Racional: Restricción dura explícita del usuario.

NFR-06 — Código 100% funcional y limpio (explicit) El código debe ser 100% funcional y limpio.

• Racional: Restricción dura explícita del usuario.

NFR-07 — Rendimiento adaptable (explicit) La vista 3D con Three.js puede sustituirse por una vista superior/pseudo-3D isométrica tipo arcade si es más eficiente en rendimiento.

• Racional: El usuario acepta explícitamente esta alternativa por rendimiento.

NFR-08 — Legibilidad responsive (explicit) Los valores legibles del HUD permanecen dentro de un margen seguro de 12px en 375px, 768px y 1280px, y el clúster de instrumentos se reorganiza (no se encoge por debajo del tamaño legible) entre orientación vertical y horizontal.

• Racional: Dirección creativa autoritativa y requisito de adaptación responsive del usuario.

10. Tech Stack

• HTML5 + CSS + JavaScript embebidos en un único archivo index.html (explicit).
• Three.js embebido vía CDN para la vista 3D (explicit).
• Canvas 2D interactivo como alternativa aceptada si es más eficiente en rendimiento (explicit).
• Sin librerías externas que requieran instalación o servidor local (explicit).
• Tipografías: Saira Condensed (headings) y Barlow (body) (dirección creativa).

11. Assumptions and Constraints

Assumptions:

• A-01 (required_inference): El jugador accede a index.html mediante un navegador móvil moderno con soporte para WebGL/Three.js y controles táctiles.
• A-02 (required_inference): La sesión de juego (vueltas, mejor tiempo, posición) vive dentro de la propia sesión del navegador y no requiere identidad de aplicación ni persistencia entre sesiones, ya que ninguna capacidad aceptada exige que un actor humano posea o reanude estado durable ligado a una cuenta.
• A-03 (required_inference): El acelerómetro/deslizamiento como alternativa de dirección depende de que el dispositivo y el navegador expongan dicha capacidad; los botones virtuales izquierda/derecha son el control base.

Constraints:

• C-01 (explicit): Todo el código debe entregarse en un único archivo ejecutable index.html (HTML, CSS y JavaScript/Three.js embebido vía CDN).
• C-02 (explicit): Sin librerías externas que requieran instalación o servidor local.
• C-03 (explicit): Ejecutable directamente en el navegador (HTML5/JavaScript).
• C-04 (explicit): Optimizado para dispositivos móviles (móviles y tablets).
• C-05 (explicit): El código debe estar comentado señalando dónde se ajustan los parámetros de física (velocidad máxima, agarre, potencia de frenado) y de la IA.
• C-06 (explicit): El código debe ser 100% funcional y limpio.
• C-07 (explicit): La IA debe gestionar 2 a 4 coches rivales en pista con comportamientos de adelantamiento y trazada.
• C-08 (explicit): El boost DRS/ERS es temporal y tiene cooldown.
• C-09 (explicit): La adaptación a pantallas verticales y horizontales es automática (responsive layout).

12. Glossary

• Best Lap (mejor tiempo de vuelta): El mejor tiempo de vuelta registrado por el jugador en la sesión.
• Contrarreloj (Time Trial): Modo de juego en el que el jugador compite contra el reloj, con contador de vueltas y mejor tiempo de vuelta.
• Carrera rápida: Modo de juego de carrera con rivales controlados por IA.
• DRS/ERS: Boost temporal de velocidad activado por el jugador, con cooldown antes de poder reutilizarse.
• Cooldown: Periodo de espera tras usar el boost DRS/ERS antes de poder volver a activarlo.
• Pianos (curbs): Bordes elevados y pintados que delimitan la pista.
• Zona de frenado: Tramo de pista donde el jugador debe reducir velocidad antes de una curva.
• Línea de meta: Banda de cuadros negro/blanco que marca el cruce de vuelta.
• Subviraje: Comportamiento del monoplaza a alta velocidad en el que la parte delantera pierde agarre y el coche tiende a seguir recto en curva.
• Agarre neumático: Capacidad de los neumáticos de mantener la adherencia del monoplaza a la pista.
• Escudería: Identidad de equipo asociada a un color distintivo de librea en los monoplazas.
• HUD: Interfaz de instrumentos en pantalla durante la carrera (velocidad, marcha, vueltas, posición, deltas).
• Delta de sector: Diferencia de tiempo respecto a una referencia, mostrada como anotación de margen sobre una regla capilar.