:root {
  --bg: #12161f;
  --panel: #1b2130;
  --ink: #e8ecf4;
  --muted: #8b93a7;
  --accent: #4c8dff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 16px;
}
/* zone haute (titre + contrôles + import). Repliée par défaut (.topfold) et
   pendant le jeu (.playing) : on ne veut pas des réglages sous les yeux quand
   on joue, ni à l'ouverture. */
#topzone { max-height: 1200px; overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; }
body.playing #topzone,
body.topfold #topzone { max-height: 0; opacity: 0; }
/* barre toujours visible : seul accès aux réglages quand ils sont repliés */
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
/* Modes de déchiffrage : 2 axes, chacun sur sa ligne, toutes les options
   visibles, la sélectionnée en gras et plus grosse. Toujours accessibles
   (hors des réglages repliables), car on les change à chaque essai. */
.modes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.mode-row { display: flex; align-items: baseline; justify-content: center; gap: 4px 10px; flex-wrap: wrap; }
.mode-row kbd { align-self: center; }
.mode-row .opt {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1.1; font-family: inherit;
  transition: color 0.12s, font-size 0.12s;
}
.mode-row .opt:hover { color: var(--ink); }
.mode-row .opt.sel { color: var(--accent); font-weight: 800; font-size: 17px; }
body.playing .modes, body.topfold .modes { /* restent visibles */ }
/* ligne de tempo, sous les deux axes */
.tempo-row { margin-top: 2px; gap: 8px; }
.tempo-lbl { color: var(--muted); font-size: 13px; }
.tempo-read { font-size: 16px; }
.tempo-read strong { color: var(--accent); font-size: 18px; }
.tempo-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #2a3143; color: var(--ink); border: 0; border-radius: 6px;
  padding: 3px 9px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.tempo-btn:hover { filter: brightness(1.2); }

/* bannière de mode : au-dessus de la partition, bien lisible pendant le jeu */
.mode-banner {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  background: #10233a; border: 1px solid #24487a; border-radius: 6px;
  padding: 7px 12px; margin-bottom: 8px; font-size: 15px; font-weight: 600;
  color: #cfe0ff;
}
.mode-banner .tag { display: inline-flex; align-items: center; gap: 5px; }
.mode-banner .tag.work { color: #7ee0a8; }
.mode-banner .tag.rhythm { color: #ffcf6b; }
.mode-banner .tag.hide { color: #9db9ff; }
.mode-banner .tag.hand { color: #d6a8ff; }
header h1 { margin: 0 0 4px; font-size: 22px; }
.sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.controls {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background: var(--panel); padding: 12px 16px; border-radius: 10px;
  margin-bottom: 14px;
}
.controls label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; }
.controls .chk { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); }
.controls select, .controls input[type=range] { font-size: 14px; }
#demo {
  margin-left: auto; background: #2a3143; color: var(--ink); border: 0;
  padding: 10px 16px; border-radius: 8px; font-size: 15px; cursor: pointer;
}
#play {
  background: var(--accent); color: #fff; border: 0;
  padding: 10px 16px; border-radius: 8px; font-size: 15px; cursor: pointer;
}
#demo:hover, #play:hover { filter: brightness(1.15); }

.panel {
  background: var(--panel); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
/* import ABC */
.import summary { cursor: pointer; font-size: 14px; color: var(--ink); }
.import .hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0; }
.import textarea {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; background: #0f131c; color: #e8ecf4; border: 1px solid #2a3040;
  border-radius: 6px; padding: 8px; resize: vertical;
}
.import-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.import-actions button, .filebtn {
  background: var(--accent); color: #fff; border: 0; padding: 8px 14px; border-radius: 7px;
  font-size: 14px; cursor: pointer;
}
.filebtn { background: #2a3143; }
button.ghost { margin-left: 0; background: #2a3143; color: var(--ink); font-size: 13px; padding: 8px 12px; }
.panel h2 { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; }

/* Partition */
.score-outer { position: relative; }
.countin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 90px; font-weight: 800; color: var(--accent);
  text-shadow: 0 2px 10px rgba(0,0,0,0.4); pointer-events: none; opacity: 0;
  transition: opacity 0.08s;
}
.countin.show { opacity: 0.92; }
/* Partition rendue par abcjs : fenêtre de ~3 portées, scroll vertical */
/* color sombre : abcjs dessine les notes en `currentColor` (sinon grisées) */
/* hauteur bornée ET relative à l'écran : ne dépasse jamais, laisse voir le piano.
   overflow-y: auto -> défilement interne (géré par le curseur pendant le jeu). */
/* hauteur fixée en JS (Score.limitHeight) = MAX_SYSTEMS lignes ; fallback ici */
.score-wrap { max-height: 320px; overflow-x: hidden; overflow-y: auto; background: #fbfbf7; color: #1a1a1a; border-radius: 6px; padding: 6px; }
.score-wrap svg { display: block; }
/* mode anticipation : la note disparaît, la portée et le curseur restent */
.abcjs-hidden { visibility: hidden; }
/* mode travail : les mesures hors passage sont estompées */
.abcjs-dim { opacity: 0.2; }
/* curseur de position (pas de surlignage des notes : déchiffrage) */
.abc-cursor { stroke: #e05260; stroke-width: 2; opacity: 0.7; }
/* restitution de fin : fond coloré par note selon le statut */
.rest-mark { opacity: 0.38; }
.rest-perfect { fill: #2fbf71; }
.rest-good { fill: #a8d84f; }
.rest-early { fill: #5aa9e6; }
.rest-late { fill: #f4a259; }
.rest-miss { fill: #b8bcc6; }
/* légende */
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; opacity: 0.55; }
.lg-perfect { background: #2fbf71; }
.lg-good { background: #a8d84f; }
.lg-early { background: #5aa9e6; }
.lg-late { background: #f4a259; }
.lg-miss { background: #b8bcc6; }

/* Mode travail */
.practice { border-left: 3px solid var(--accent); }
.practice-info { font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.practice-info strong { color: var(--accent); }
.practice-info .muted { color: var(--muted); }
.practice-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.practice-actions button {
  background: var(--accent); color: #fff; border: 0; padding: 9px 14px;
  border-radius: 7px; font-size: 14px; cursor: pointer;
}
.practice-actions button.sec { background: #2a3143; color: var(--ink); }
.practice-actions button:hover { filter: brightness(1.15); }
/* jauge de passes propres */
.streak { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.streak i { width: 10px; height: 10px; border-radius: 50%; background: #2a3143; display: inline-block; }
.streak i.on { background: #2fbf71; }

/* Aide-mémoire des raccourcis : groupes thématiques en colonnes, et dans chaque
   groupe une ligne « action ......... raccourci ». Le raccourci n'est plus une
   pastille en relief mais un simple texte aligné à droite : on balaye la colonne
   des actions, et la touche se trouve là où l'œil l'attend. */
.shortcuts {
  display: grid; gap: 4px 28px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.sc-group h4 {
  margin: 0 0 4px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid #2a3143; padding-bottom: 4px;
}
.sc-group dl {
  margin: 0; display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; column-gap: 16px; row-gap: 3px;
}
.sc-group dt { color: var(--muted); font-size: 13px; }
.sc-group dd { margin: 0; color: #cfe0ff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.sc-note { color: #5f6779; font-size: 11px; }

kbd {
  background: #2a3143; color: var(--ink); border: 1px solid #3a4258;
  border-radius: 4px; padding: 1px 6px; font-family: inherit; font-size: 11px;
  font-weight: 600; margin-right: 2px;
}

/* Feedback */
.feedback { display: flex; align-items: center; gap: 20px; min-height: 44px; }
.last-judge { font-size: 22px; font-weight: 700; min-width: 90px; }
.last-judge.j-perfect { color: #2fbf71; }
.last-judge.j-good { color: #8bd450; }
.last-judge.j-off { color: #f4a259; }
.last-judge.j-miss { color: #e05260; }
/* Verdict de tenue : même colonne que l'attaque, en plus petit — deux axes
   distincts, lisibles d'un coup d'œil sans se confondre. */
.verdicts { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.last-hold { font-size: 13px; font-weight: 600; color: var(--muted); }
.last-hold.j-perfect { color: #2fbf71; }
.last-hold.j-off { color: #f4a259; }
.stat-lines { display: flex; flex-direction: column; gap: 2px; }
.stats { color: var(--muted); font-size: 14px; }

/* Piano */
.piano-wrap { overflow-x: auto; }
.piano-svg { display: block; }
.key { cursor: pointer; }
.key.white { fill: #f6f6f2; stroke: #b8b8b0; stroke-width: 1; }
.key.black { fill: #23262e; stroke: #000; stroke-width: 1; }
/* teinte par main + touches non mappées */
.key.white.hand-left { fill: #eaf0ff; }
.key.white.hand-right { fill: #e9f8ef; }
.key.white.unmapped { fill: #e6e6e0; }
.key.black.hand-left { fill: #2b3552; }
.key.black.hand-right { fill: #28402f; }
.key.black.unmapped { fill: #2a2d35; }
.key.white.active { fill: #cfe0ff; }
.key.black.active { fill: #4c6bd6; }
.key.white.target { fill: #d4f3df; stroke: #2fbf71; stroke-width: 2; }
.key.black.target { fill: #2f7d55; stroke: #2fbf71; stroke-width: 2; }
.key-label, .note-label { text-anchor: middle; pointer-events: none; }
.key-label { font-size: 13px; font-weight: 700; }
.note-label { font-size: 11px; }
.note-label-dark { fill: #3a3f4b; }
.note-label-light { fill: #e8ecf4; }
.note-label.dim { fill: #a7a7a0; }

/* ---------------- Menu des actions (souris) ----------------
   Les raccourcis clavier restent la voie rapide, mais rien ne doit être
   accessible AU SEUL clavier : le menu expose les mêmes actions, avec leur
   raccourci affiché — il sert donc aussi d'aide-mémoire. */
.menu-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 18px; font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.menu-btn:hover { filter: brightness(1.12); }
.menu {
  position: fixed; right: 16px; bottom: 64px; z-index: 41;
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 620px); overflow-y: auto;
  background: var(--panel); border: 1px solid #2c3450; border-radius: 12px;
  padding: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.menu h4 {
  margin: 10px 8px 4px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.menu h4:first-child { margin-top: 4px; }
.menu button {
  display: flex; width: 100%; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 8px; padding: 8px 10px;
  color: var(--ink); font-family: inherit; font-size: 14px; text-align: left;
  cursor: pointer;
}
.menu button:hover:not(:disabled) { background: #263048; }
.menu button:disabled { color: #5a6178; cursor: default; }
.menu button .mi-label { flex: 1; }
.menu button .mi-val { color: var(--accent); font-size: 12px; font-weight: 700; }
.menu button kbd { flex: none; }

/* ---------------- Tutoriel du premier lancement ---------------- */
.tuto { position: fixed; inset: 0; z-index: 60; background: rgba(8, 11, 18, 0.72); }
.tuto-card {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid #2c3450; border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
}
.tuto-card h3 { margin: 2px 0 8px; font-size: 20px; }
.tuto-step { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.tuto-body { color: #c9d2e4; font-size: 14px; line-height: 1.55; }
.tuto-body kbd { font-size: 12px; }
.tuto-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tuto-actions button {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
}
.tuto-actions button.ghost { background: #2a3143; color: var(--ink); }
.tuto-actions button:disabled { opacity: 0.4; cursor: default; }
#tutoSkip { margin-right: auto; }
.tuto-dots { display: inline-flex; gap: 5px; margin-right: 8px; }
.tuto-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2a3143; }
.tuto-dots i.on { background: var(--accent); }
/* l'élément commenté par l'étape courante passe AU-DESSUS du voile */
.tuto-spot {
  position: relative; z-index: 61; border-radius: 10px;
  outline: 2px solid var(--accent); outline-offset: 6px;
  background: var(--panel);
}