/* Entraînement au Rythme — accent menthe (voir data-accent dans index.html).
   Base commune : ../../theme.css */

/* Un seul chiffre à afficher : on le centre au lieu de l'étaler */
.game-header { justify-content: center; margin-bottom: 20px; }
#bpm-target {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Zone de frappe : volontairement neutre, elle ne doit donner aucun indice de tempo */
#tap-zone {
  background-color: var(--papier);
  border: 3px dashed var(--encre);
  border-radius: var(--rayon-panneau);
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  margin-bottom: 20px;
  transition: border-color 0.2s, background-color 0.05s;
}
#tap-zone:focus-visible { box-shadow: 6px 6px 0 var(--accent); }
#tap-zone.running { border-style: solid; box-shadow: var(--ombre); }
#tap-zone.done { cursor: default; opacity: 0.55; }

/* Retour visuel du clic uniquement (pas du tempo) */
#tap-zone.hit { background-color: var(--creme-fonce); }

#tap-label {
  color: var(--encre-douce);
  font-family: var(--police-titre);
  font-size: 1rem;
  pointer-events: none;
}

#feedback {
  height: 24px;
  margin-bottom: 16px;
  font-family: var(--police-titre);
  font-weight: 700;
}

#results {
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre);
  padding: 20px;
  margin-bottom: 24px;
}
.result-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: var(--encre-douce);
  font-size: 0.95rem;
}
.result-line strong {
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: 1.2rem;
}

#score-display {
  font-family: var(--police-titre);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 12px;
}
#score-display.great { color: var(--succes); }
#score-display.ok { color: var(--tiede); }
#score-display.bad { color: var(--erreur); }

#next-btn {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 15px 30px;
  cursor: pointer;
  color: var(--encre);
  background-color: var(--accent);
  border: var(--bordure);
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-md);
  transition: transform 0.1s, box-shadow 0.1s;
}
#next-btn:active {
  transform: translate(4px, 4px);
  box-shadow: var(--ombre-plate);
}