/* Zone de jeu Chrono : consigne, cadran (anneau SVG + chiffres), libelle
   d ecart et bouton unique, sous le HUD commun (essai) du socle. Tout est
   DOM : l anneau est un cercle SVG dont on bouge le stroke-dashoffset, il
   n y a pas de canvas de jeu. */
.ch-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 96px 12px max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); background-size: cover; background-position: center; }
/* Decor par defaut : une lueur derriere la montre et des chevrons tres
   discrets, pour que l ecran ne soit pas un aplat. Une campagne qui
   depose une image de fond la pose par-dessus (background-image inline). */
.ch-jeu:not([style*="background-image: url"]) { background-image: radial-gradient(ellipse 70% 45% at 50% 42%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, rgba(255, 255, 255, 0) 2px 26px); }
.ch-jeu[hidden] { display: none; }
.ch-consigne { margin: 0; color: #ffffff; font-weight: 900; font-size: clamp(15px, 4.2vw, 22px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.ch-consigne[hidden] { display: none; }
.ch-logo { max-height: 44px; max-width: 50vw; object-fit: contain; }
.ch-logo[hidden] { display: none; }
.ch-hote { position: relative; flex: 0 1 auto; width: min(82vw, 380px); }

.ch-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Le cadran porte les chiffres en son centre : l anneau l entoure. */
.ch-cadran { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.ch-dessin { display: block; width: 100%; }
.ch-dessin svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); }
/* Les chiffres se posent sur le fond de cadran, qui est clair : encre
   sombre, et une taille qui tient dans le disque (cinq signes). En chasse
   fixe, sans quoi le centieme fait sauter la largeur dix fois par seconde
   et le nombre tressaute. */
.ch-chiffres { position: absolute; margin: 0; color: #171c26; font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(24px, 8.5vw, 46px); line-height: 1; letter-spacing: .01em; }
.ch-ecart { margin: 0; color: var(--jeu-hud-texte, #ffffff); font-weight: 900; font-size: clamp(14px, 3.8vw, 19px); letter-spacing: .04em; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.ch-ecart[hidden] { display: none; }

.ch-bouton { border: none; border-radius: 999px; padding: 15px 40px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-family: inherit; font-weight: 900; font-size: clamp(16px, 4.6vw, 21px); letter-spacing: .08em; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ch-bouton:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.ch-bouton[hidden] { display: none; }

/* Zone chaude : l anneau et les chiffres battent, pour que le joueur sente
   la cible arriver sans lire la consigne. */
.ch-scene.ch-chaud .ch-chiffres { animation: ch-battement .38s ease-in-out infinite; }
.ch-scene.ch-chaud .ch-dessin svg { filter: drop-shadow(0 0 18px var(--accent, #ff842b)) drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); }
/* Verdict : une secousse courte, verte si c est dans la tolerance. */
.ch-scene.ch-arrete .ch-chiffres { animation: ch-secousse .4s ease-out; }
.ch-scene.ch-reussi .ch-chiffres { color: #10794a; }
.ch-scene.ch-rate .ch-chiffres { color: #a8291a; }

@keyframes ch-battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ch-secousse { 0% { transform: translateX(0); } 25% { transform: translateX(-7px); } 55% { transform: translateX(6px); } 100% { transform: translateX(0); } }

/* Mouvement reduit : plus de battement ni de secousse ; la couleur du
   verdict suffit, le jeu reste jouable. */
@media (prefers-reduced-motion: reduce) {
  .ch-scene.ch-chaud .ch-chiffres, .ch-scene.ch-arrete .ch-chiffres { animation: none; }
}

@media (min-height: 900px) { .ch-jeu { padding-top: 120px; } }