GYROLL: tilt-to-roll marble runner

Crée un jeu vidéo HTML5 complet et extrêmement soigné dans **un seul fichier `index.html`**.

## Concept

Le joueur contrôle une **bille** qui roule sur une **longue planche étroite en 3D**, suspendue dans le vide.

La planche contient un **chemin sinueux en virages et zigzag**, avec des virages de plus en plus difficiles. Le chemin avance continuellement vers l’avant et est généré/prolongé au fur et à mesure : le jeu est donc **endless**.

Objectif : **aller le plus loin possible sans tomber**.

Le score augmente continuellement avec la distance parcourue. Afficher :

* distance
* score
* meilleur score
* vitesse actuelle

Le joueur doit avoir immédiatement la sensation d'un **jeu arcade mobile premium**, pas d'une simple démo technique.

## CONTRAINTE ABSOLUE : UN SEUL HTML

Tout doit être contenu dans **un unique fichier HTML** :

* HTML
* CSS
* JavaScript
* shaders éventuels
* effets visuels
* sons générés par Web Audio API

**Aucune librairie externe.**
Pas de Three.js.
Pas de Babylon.js.
Pas de Cannon.js.
Pas de CDN.
Pas de fichiers externes.
Pas d'images externes.
Pas de polices externes.

Le fichier doit pouvoir être sauvegardé puis ouvert directement dans un navigateur moderne.

## Contrôle mobile

Le contrôle principal doit utiliser **l'accéléromètre / gyroscope du téléphone**.

Sur mobile :

* incliner le téléphone vers la gauche → la bille se déplace vers la gauche
* incliner vers la droite → la bille se déplace vers la droite
* Incliner vers l’avant → la bille se déplace vers l’avant
* Incliner vers l’arrière → la bille ralentit puis se déplace vers l’arrière 
* l'orientation doit être filtrée/lissée pour éviter les mouvements brusques
* prévoir une calibration initiale afin que la position naturelle du téléphone corresponde au centre

IMPORTANT :
Sur iOS, gérer correctement la permission `DeviceOrientationEvent.requestPermission()` lorsqu'elle est nécessaire.
Afficher un bouton clair :
**« ACTIVER LE CONTRÔLE PAR INCLINAISON »**

Si les capteurs ne sont pas disponibles ou refusés :

* proposer automatiquement un contrôle tactile de secours
* le jeu doit rester parfaitement jouable

Sur desktop :

* WASD / flèches
* éventuellement souris ou trackpad comme contrôle secondaire.

## Gameplay

La bille doit avoir une vraie sensation de poids et d'inertie.

Implémenter une physique suffisamment crédible :

* accélération
* friction
* inertie
* gravité
* vitesse maximale
* collisions avec les bords du chemin
* chute lorsque la bille quitte la planche

Le joueur ne doit pas simplement déplacer directement la bille avec une coordonnée X.

La bille doit réellement sembler rouler.

### Génération du parcours

Créer un parcours endless procédural.

Le chemin doit :

* être étroit
* zigzaguer
* avoir des virages doux et des virages serrés
* varier sa largeur
* introduire progressivement davantage de difficulté
* contenir occasionnellement des sections spéciales

Exemples de sections :

* ligne droite rapide
* grand virage
* succession de petits zigzags
* passage étroit
* plateforme légèrement inclinée
* trous / zones dangereuses
* plateformes discontinues
* obstacles simples
* accélérateurs

La difficulté doit augmenter progressivement avec la distance.

Éviter que la génération produise des situations impossibles.

## Direction artistique

Je veux quelque chose de **visuellement extraordinaire**.

Pas un simple canvas avec des rectangles.

Direction artistique :
**arcade futuriste premium + jouet physique + environnement spectaculaire.**

Imagine un mélange entre :

* un jouet miniature extrêmement détaillé
* une piste suspendue dans un immense espace
* une esthétique arcade moderne
* des matériaux réalistes
* des effets lumineux élégants

La planche doit être très travaillée :

* matériau détaillé
* bords visibles
* dessous de la plateforme
* petites pièces mécaniques
* rivets
* bandes lumineuses
* texture subtile
* variations de matériaux

La bille doit être magnifique :

* matériau métallique/verre
* réflexions simulées
* highlight dynamique
* ombre portée
* légère traînée lumineuse à grande vitesse

Potentiellement on peut choisir plusieurs textures pour la planche et la bille. 

L'environnement autour de la planche doit donner une vraie impression de profondeur :

* immense vide
* brume
* particules
* étoiles ou architecture abstraite
* lumière volumétrique simulée
* éléments qui défilent à différentes vitesses

## Rendu

Puisqu'aucune librairie 3D externe n'est autorisée, construis toi-même un moteur de rendu suffisamment convaincant avec **Canvas 2D**, éventuellement avec WebGL natif si tu estimes que cela apporte une amélioration majeure.

Tu peux utiliser :

* Canvas 2D
* WebGL natif
* Web Audio API
* DeviceOrientation API
* requestAnimationFrame
* Pointer Events
* CSS avancé

Si WebGL est utilisé, écris directement les shaders GLSL dans le fichier HTML.

Priorité :
**60 FPS sur téléphone moderne.**

Prévoir une adaptation automatique :

* résolution
* pixel ratio
* nombre de particules
* qualité des ombres
* effets post-processing

afin de maintenir de bonnes performances.

## Caméra

Caméra troisième personne légèrement au-dessus et derrière la bille.

Elle doit suivre la bille avec :

* interpolation fluide
* léger retard cinématique
* anticipation dans la direction du déplacement
* léger mouvement de caméra avec la vitesse

Lors des gros virages, la caméra doit donner une sensation spectaculaire de mouvement.

## Effets

Ajouter de nombreux petits détails qui donnent une sensation premium :

* particules lors des collisions
* particules lorsque la bille accélère
* poussière/étincelles très légères
* traînée lumineuse
* motion blur simulé si performant
* vignette
* légère profondeur atmosphérique
* flash subtil lors d'un événement important
* effets de particules lors de la chute
* caméra dynamique

Ne pas surcharger l'écran.

L'ensemble doit rester élégant.

## Sons

Créer **tous les sons avec Web Audio API**, sans fichiers audio externes.

Créer au minimum :

* son de roulement de la bille
* petites variations sonores selon la vitesse
* son lors d'une collision avec le bord
* son lorsqu'un bonus est récupéré
* son lors du passage d'un checkpoint
* son lors d'une accélération
* son de chute
* son de game over
* musique d'ambiance générative minimaliste

La musique doit être générée procéduralement et rester agréable en boucle.

IMPORTANT :
les navigateurs bloquent généralement l'audio avant une interaction utilisateur. Initialiser l'AudioContext après le premier clic/tap.

Ajouter un bouton :
🔊 / 🔇

Prévoir une gestion propre du volume.

## Interface

L'interface doit être minimaliste et magnifique.

En haut :
**SCORE**
`12 840`

**DISTANCE**
`284 m`

**BEST**
`1 920 m`

Afficher éventuellement la vitesse de façon discrète.

Au démarrage :
un écran élégant avec :

**ROLL**

*How far can you go?*

Puis :

**ACTIVER LE CONTRÔLE PAR INCLINAISON**

et une petite indication :
**Inclinez votre téléphone pour contrôler la bille**

Après la calibration, lancer immédiatement le jeu.

## Game Over

Lorsque la bille tombe :

ralentir brièvement le temps,
faire tomber la caméra avec elle,
ajouter des particules,
jouer le son de chute,
puis afficher :

**GAME OVER**

`1 284 m`

`SCORE 48 920`

`BEST 2 041 m`

Bouton :

**REJOUER**

Si le score est un record :

**NOUVEAU RECORD**

avec une animation spectaculaire mais courte.

## UX mobile

Le jeu doit être pensé d'abord pour un écran de smartphone en portrait.

* aucun scroll
* aucun élément minuscule
* boutons facilement utilisables au doigt
* interface lisible en plein soleil
* aucune dépendance à un hover
* gestion correcte du changement d'orientation
* empêcher les gestes tactiles accidentels pendant le jeu lorsque nécessaire

Prévoir aussi un mode paysage si pertinent.

## Architecture du code

Même si tout est dans un seul HTML, organiser proprement le JavaScript en modules/classes logiques :

* Game
* Renderer
* Physics
* TrackGenerator
* Ball
* Camera
* InputManager
* AudioManager
* ParticleSystem
* UI

Ne pas écrire un énorme bloc de code spaghetti.

Ajouter des commentaires uniquement là où ils sont réellement utiles.

## Robustesse

Le jeu doit :

* fonctionner sans serveur si possible
* fonctionner sur Chrome/Safari modernes
* fonctionner sur iPhone et Android
* gérer l'absence de DeviceOrientation
* gérer le refus de permission
* gérer la perte de focus
* mettre le jeu en pause si nécessaire
* reprendre proprement
* éviter les fuites mémoire
* limiter le nombre de particules
* ne jamais produire de NaN ou d'objets invalides
* ne jamais générer un parcours impossible

## Très important

Ne me donne pas une simple maquette.

Je veux **un jeu réellement jouable et fini**.

Avant de terminer, vérifie mentalement :

1. que le fichier est autonome ;
2. qu'il ne dépend d'aucune ressource externe ;
3. que le contrôle gyroscopique fonctionne sur mobile ;
4. que la permission iOS est correctement demandée ;
5. qu'un fallback tactile existe ;
6. que le parcours est réellement endless ;
7. que le score augmente avec la distance ;
8. que la bille peut réellement tomber ;
9. que le bouton Rejouer fonctionne ;
10. que les sons sont générés sans fichiers externes ;
11. que le jeu reste performant sur mobile.

**Donne-moi directement le contenu complet du fichier `index.html`, prêt à être copié-collé et exécuté.**

Prompt by Erwann Robin, quoted word for word from their GitHub repository. Model as stated by the creator; your result will differ.