/* Notation Rythmique — accent jaune (voir data-accent dans index.html).
   Base commune : ../../theme.css */

h1 { margin: 0 0 20px; }

/* Sélecteur de niveau : contrôle segmenté */
.level-select {
  display: inline-flex;
  gap: 0;
  margin-bottom: 20px;
  border: var(--bordure);
  border-radius: var(--rayon-pilule);
  overflow: hidden;
  box-shadow: var(--ombre-md);
}
.level-btn {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--encre);
  background-color: var(--papier);
  border: none;
  border-right: 3px solid var(--encre);
  padding: 9px 18px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.level-btn:last-child { border-right: none; }
.level-btn:hover { background-color: var(--creme-fonce); }
.level-btn.active { background-color: var(--accent); }

/* Rangées de boutons */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.btn-primary {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 13px 26px;
  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, opacity 0.15s;
}
.btn-primary:active {
  transform: translate(4px, 4px);
  box-shadow: var(--ombre-plate);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--ombre-md);
  transform: none;
}

/* Le bouton Écouter pulse doucement pendant la lecture */
.btn-primary.playing { animation: pulse 0.5s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary.playing { animation: none; }
}

.btn-ghost {
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 11px 18px;
  cursor: pointer;
  color: var(--encre);
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-bouton);
  box-shadow: var(--ombre-sm);
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s;
}
.btn-ghost:hover { background-color: var(--creme-fonce); }
.btn-ghost:active {
  transform: translate(3px, 3px);
  box-shadow: var(--ombre-plate);
}

/* Zone de frappe */
#tap-zone {
  position: relative;
  background-color: var(--papier);
  border: 3px dashed var(--encre);
  border-radius: var(--rayon-panneau);
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  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.hit { background-color: var(--creme-fonce); }
#tap-zone.done { cursor: default; opacity: 0.55; }

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

/* Partition dessinée en SVG */
#notation {
  background-color: var(--papier);
  border: var(--bordure);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre);
  padding: 14px 16px 18px;
  margin-bottom: 20px;
}
.notation-label {
  margin: 0 0 6px;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--encre-douce);
  text-align: left;
}
#notation svg { width: 100%; height: auto; display: block; }
#notation .staff,
#notation .bar { stroke: var(--encre); stroke-width: 2.5; }
#notation .barend { stroke-width: 3.5; }
#notation .head { fill: var(--encre); }
#notation .head-open { fill: none; stroke: var(--encre); stroke-width: 2.2; }
#notation .stem { stroke: var(--encre); stroke-width: 2.4; }
#notation .beam { fill: var(--encre); }
#notation .flag { fill: var(--encre); }
#notation .dot { fill: var(--encre); }
#notation .rest-stroke { stroke: var(--encre); stroke-width: 2.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#notation .rest-fill { fill: var(--encre); }
#notation .timesig {
  fill: var(--encre);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 19px;
}

#feedback {
  min-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: 16px 20px 20px;
  margin-bottom: 24px;
}
.result-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--encre-douce);
  font-size: 0.95rem;
}
#score-display {
  font-family: var(--police-titre);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
#score-display.great { color: var(--succes); }
#score-display.ok { color: var(--tiede); }
#score-display.bad { color: var(--erreur); }

#next-btn { margin: 0 auto; display: block; }