/* motore.css — veste grafica del motore unico (piano del motore, tappe 3-4).
   Dal prototipo approvato da Daniele l'8 novembre (docs/prototipo): misure calcolate
   dallo spazio, cornice unica, tastiera vera come tasti di risposta, esito a striscia.
   Classi con prefisso "m-" (non toccano gli stili di oggi). Colori: quelli di main.css. */

.m-schermo {
  --m-spazio: clamp(6px, 1.4vh, 14px);
  --m-testo: clamp(16px, 2.1vh + 0.75vw, 30px);
  --m-titolo: clamp(16px, 2.2vh + 0.6vw, 30px);
  --m-pulsante-h: clamp(40px, 7.2vh, 58px);
  --m-pulsante-testo: clamp(15px, 1.5vh + 0.45vw, 21px);
  --m-raggio: 12px;
  /* Occupa esattamente lo schermo, qualunque margine abbia il contenitore dell'app:
     niente scorrimento (gli esercizi di oggi scorrono di 24 px per quel margine). */
  position: fixed; inset: 0; z-index: 5;
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
  font-size: var(--m-testo); color: var(--ink-700); background: var(--fondo-app);
}
@media (min-aspect-ratio: 2/1) { .m-schermo { --m-pulsante-h: clamp(40px, 12vh, 58px); } }

/* ---------- cornice: una riga in alto ---------- */
.m-barra { display: flex; align-items: center; gap: var(--m-spazio); padding: calc(var(--m-spazio) * 0.5) var(--m-spazio); min-height: 44px; }
.m-barra .m-titolo { font-family: var(--font-display, 'Fraunces', serif); font-weight: 700; font-size: var(--m-titolo); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-700); }
.m-barra .m-chip { font-size: 0.75em; color: var(--ink-500); background: var(--lilla-50); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.m-icona { width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--ink-500); font-size: 22px; cursor: pointer; padding: 0; flex: none; }
.m-icona:hover { background: var(--lilla-50); }
.m-tempo { height: 5px; background: var(--lilla-100); border-radius: 3px; overflow: hidden; margin: 0 var(--m-spazio); }
.m-tempo > i { display: block; height: 100%; width: 100%; background: var(--ambra-500); transform-origin: left; }

/* ---------- pulsanti azione (Ascolta, Ho capito, Pronto) ---------- */
.m-azione { height: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--lilla-500); background: transparent;
  color: var(--lilla-700); font: 700 calc(var(--m-pulsante-testo) * 0.85) var(--font-body, sans-serif); white-space: nowrap; cursor: pointer; box-shadow: none; }
.m-azione.m-primaria { background: var(--lilla-700); border-color: var(--lilla-700); color: #fff; }
.m-azione:hover { filter: brightness(1.05); transform: none; }

/* ---------- area dell'esercizio ---------- */
.m-esercizio { display: grid; gap: var(--m-spazio); padding: 0 var(--m-spazio) var(--m-spazio); min-height: 0;
  grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "stimolo" "risposte"; }
@media (min-aspect-ratio: 2/1) {
  .m-esercizio { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "stimolo risposte"; }
}
.m-stimolo { grid-area: stimolo; min-height: 0; background: var(--fondo-pannello); border: 1px solid var(--lilla-100); border-radius: 18px;
  display: grid; place-items: center; padding: var(--m-spazio); justify-self: center; width: min(100%, 720px); }
.m-stimolo .m-disegno { width: 100%; aspect-ratio: 300 / 140; max-height: 100%; }
@media (min-aspect-ratio: 2/1) { .m-stimolo { width: 100%; } .m-stimolo .m-disegno { height: 100%; aspect-ratio: auto; } }
.m-disegno svg { width: 100% !important; height: 100% !important; display: block; }
.m-risposte { grid-area: risposte; display: flex; flex-direction: column; justify-content: center; gap: var(--m-spazio); min-width: 0; min-height: 0;
  width: 100%; max-width: 980px; justify-self: center; }
.m-domanda { text-align: center; font-weight: 700; color: var(--ink-500); }
/* su PC (stimolo sopra, risposte sotto) la striscia dell'esito è larga quanto la tastiera */
@media (max-aspect-ratio: 2/1) { #m-esito { width: min(100%, calc(clamp(140px, 36vh, 300px) * 2.6)); align-self: center; } }

/* ---------- tastiera vera (tasti di risposta) ---------- */
.m-tastiera { position: relative; display: flex; gap: 2px; height: min(100%, clamp(140px, 38vh, 300px)); width: 100%; align-self: center;
  background: linear-gradient(#3A2340, #2B1530); padding: 10px 8px 8px; border-radius: 14px; box-shadow: 0 6px 16px rgba(43, 21, 48, 0.25); flex: none; }
.m-tastiera::before { content: ''; position: absolute; left: 8px; right: 8px; top: 6px; height: 4px; border-radius: 2px; background: #9462A3; opacity: 0.85; }
@media (max-aspect-ratio: 2/1) { .m-tastiera { width: auto; aspect-ratio: 2.6 / 1; height: clamp(140px, 36vh, 300px); max-width: 100%; } }
.m-tasto { -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.m-bianco { flex: 1; position: relative; border: none; border-radius: 0 0 9px 9px; margin-top: 6px; padding: 0 0 12px;
  background: linear-gradient(#FFFFFF, #F6EEDD 85%, #EADDC4); box-shadow: inset 0 -5px 0 #E2D2B5;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; cursor: pointer;
  font: 700 clamp(15px, 2.6vh, 24px) var(--font-body, sans-serif); color: var(--ink-700); transition: background 0.12s, transform 0.08s; }
.m-nero { position: absolute; top: 16px; width: calc((100% - 16px) / 7 * 0.6); height: 58%; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(#5A4260, #24112A 70%); border: none; border-radius: 0 0 7px 7px; box-shadow: inset 0 -4px 0 #4A3550, 0 3px 4px rgba(0,0,0,0.35);
  color: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 2px 9px; gap: 3px;
  font: 700 clamp(12px, 1.9vh, 18px) var(--font-body, sans-serif); line-height: 1; transition: background 0.12s; }
.m-nero span:last-child:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.35); padding-top: 3px; }
.m-nero.m-spento { background: linear-gradient(#3E2A44, #24112A); cursor: default; }
.m-bianco:active { transform: translateY(2px); }
@media (hover: hover) and (pointer: fine) {
  .m-bianco:hover { background: linear-gradient(#FFFFFF, #FFF3D6); }
  .m-nero:not(.m-spento):hover { background: linear-gradient(#6E5375, #3A2340 70%); }
}
.m-bianco.m-giusta { background: linear-gradient(#F2FAF4, #DDF0E3); box-shadow: inset 0 0 0 4px var(--ok-500); color: var(--ok-ink); }
.m-nero.m-giusta { background: linear-gradient(#5E9C72, #2D5A3D); }
.m-bianco.m-sbagliata { background: linear-gradient(#FFF6F3, #FCE3DB); box-shadow: inset 0 0 0 4px var(--ko-500); color: var(--ko-ink); }
.m-nero.m-sbagliata { background: linear-gradient(#E9957F, #A9472F); }
.m-tastiera.m-bloccata .m-tasto { cursor: default; }

/* ---------- esito: striscia leggera sopra le risposte ---------- */
.m-esito { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--m-spazio);
  padding: calc(var(--m-spazio) * 0.7) var(--m-spazio); border-radius: var(--m-raggio); border: 1.5px solid; min-height: 52px; }
.m-esito.m-ok { background: var(--ok-bg); border-color: var(--ok-500); color: var(--ok-ink); }
.m-esito.m-ko { background: var(--ko-bg); border-color: var(--ko-500); color: var(--ko-ink); }
/* aiutante del bambino: tutto dentro il suo spazio, centrato, un po' più grande sugli schermi grandi */
.m-esito .m-aiutante { --m-aiut: clamp(44px, 7vh, 64px); width: var(--m-aiut); height: var(--m-aiut); flex: none; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.m-esito .m-aiutante img { height: var(--m-aiut) !important; width: auto !important; max-width: var(--m-aiut) !important; object-fit: contain; display: block; filter: none !important; }
.m-esito .m-parole { flex: 1; min-width: 0; } .m-esito strong { font-size: 1.05em; }
.m-esito .m-suggerimento { display: block; font-size: 0.75em; opacity: 0.85; }
.m-esito .m-conto { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--ko-500); opacity: 0.55; transform-origin: left; }
.m-esito.m-ok .m-conto { background: var(--ok-500); }

/* ---------- introduzione unica ---------- */
.m-intro { display: grid; gap: var(--m-spazio); padding: 0 var(--m-spazio) var(--m-spazio); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
@media (min-aspect-ratio: 2/1) { .m-intro { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.m-intro .m-spiega { display: flex; flex-direction: column; justify-content: center; gap: var(--m-spazio); text-align: center; }
.m-intro .m-spiega p { margin: 0; line-height: 1.35; }
.m-intro .m-pronto { align-self: center; height: 52px; font-size: 1.05em; padding: 0 28px; }
/* nell'introduzione il riquadro non usa l'area "stimolo" degli esercizi */
.m-intro .m-stimolo { grid-area: auto; align-self: stretch; }

/* ---------- Stati dei pulsanti (passaggio del mouse, pressione) ----------
   La regola generale di main.css (button:hover → sfondo lilla chiaro, ombra, spostamento
   di 1 px) qui NON deve valere: rendeva illeggibile "Pronto!" (bianco su lilla chiaro) e
   spostava i tasti neri (perdevano il translateX(-50%) che li mette fra due bianchi).
   Segnalato da Daniele due volte (8 novembre): ogni pulsante del motore ha i suoi stati,
   scritti qui con il prefisso .m-schermo per vincere sulla regola generale. */
.m-schermo .m-icona:hover:not(:disabled) { background: var(--lilla-50); box-shadow: none; transform: none; border: none; }
.m-schermo .m-azione:hover:not(:disabled) { background: var(--lilla-50); color: var(--lilla-700); border-color: var(--lilla-500); box-shadow: none; transform: none; }
.m-schermo .m-azione.m-primaria:hover:not(:disabled) { background: #5A2F75; color: #fff; border-color: #5A2F75; }
.m-schermo .m-azione:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
/* tasti bianchi */
.m-schermo .m-bianco:hover:not(:disabled) { background: linear-gradient(#FFFFFF, #FFF3D6); box-shadow: inset 0 -5px 0 #E2D2B5; transform: none; border: none; }
.m-schermo .m-bianco:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 #E2D2B5; }
.m-schermo .m-bianco.m-giusta, .m-schermo .m-bianco.m-giusta:hover:not(:disabled) { background: linear-gradient(#F2FAF4, #DDF0E3); box-shadow: inset 0 0 0 4px var(--ok-500); color: var(--ok-ink); }
.m-schermo .m-bianco.m-sbagliata, .m-schermo .m-bianco.m-sbagliata:hover:not(:disabled) { background: linear-gradient(#FFF6F3, #FCE3DB); box-shadow: inset 0 0 0 4px var(--ko-500); color: var(--ko-ink); }
/* tasti neri: il translateX(-50%) deve restare in ogni stato */
.m-schermo .m-nero, .m-schermo .m-nero:hover:not(:disabled), .m-schermo .m-nero:active:not(:disabled) { transform: translateX(-50%); border: none; color: #fff; }
.m-schermo .m-nero:hover:not(:disabled) { background: linear-gradient(#6E5375, #3A2340 70%); box-shadow: inset 0 -4px 0 #4A3550, 0 3px 4px rgba(0,0,0,0.35); }
.m-schermo .m-nero:active:not(:disabled) { transform: translateX(-50%) translateY(2px); box-shadow: inset 0 -2px 0 #4A3550; }
.m-schermo .m-nero.m-spento, .m-schermo .m-nero.m-spento:hover:not(:disabled) { background: linear-gradient(#3E2A44, #24112A); box-shadow: inset 0 -4px 0 #4A3550; }
.m-schermo .m-nero.m-giusta, .m-schermo .m-nero.m-giusta:hover:not(:disabled) { background: linear-gradient(#5E9C72, #2D5A3D); }
.m-schermo .m-nero.m-sbagliata, .m-schermo .m-nero.m-sbagliata:hover:not(:disabled) { background: linear-gradient(#E9957F, #A9472F); }
/* fuoco da tastiera: anello visibile senza spostare nulla */
.m-schermo .m-tasto:focus-visible { outline: 3px solid var(--ambra-500); outline-offset: -3px; box-shadow: none; }

/* ---------- sequenza: caselle delle note scritte ---------- */
.m-fila-seq { display: flex; align-items: center; gap: var(--m-spazio); justify-content: center; flex-wrap: wrap; }
.m-caselle { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.m-casella { min-width: 52px; height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px dashed var(--lilla-300); background: transparent;
  color: var(--ink-500); font: 700 var(--m-pulsante-testo) var(--font-body, sans-serif); cursor: pointer; box-shadow: none; }
.m-casella.m-piena { border-style: solid; border-color: var(--lilla-500); background: var(--fondo-pannello); color: var(--ink-700); }
.m-casella.m-giusta { border: 1.5px solid var(--ok-500); background: var(--ok-bg); color: var(--ok-ink); }
.m-casella.m-sbagliata { border: 1.5px solid var(--ko-500); background: var(--ko-bg); color: var(--ko-ink); }
.m-casella s { opacity: 0.6; font-weight: 400; }
.m-schermo .m-casella:hover:not(:disabled) { background: var(--lilla-50); color: var(--ink-700); border-color: var(--lilla-500); box-shadow: none; transform: none; }
.m-schermo .m-casella.m-giusta:hover:not(:disabled) { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-500); }
.m-schermo .m-casella.m-sbagliata:hover:not(:disabled) { background: var(--ko-bg); color: var(--ko-ink); border-color: var(--ko-500); }

/* ---------- tasti neri spenti (livelli senza ♯ e ♭): si vede che non si usano ---------- */
.m-schermo .m-nero.m-spento, .m-schermo .m-nero.m-spento:hover:not(:disabled), .m-schermo .m-nero.m-spento:active:not(:disabled) {
  background: repeating-linear-gradient(135deg, #4A3A4F 0 6px, #3B2C40 6px 12px); box-shadow: inset 0 -4px 0 #34253A;
  cursor: not-allowed; transform: translateX(-50%); }
.m-nero .m-divieto { font-size: clamp(14px, 2.2vh, 20px); opacity: 0.55; font-weight: 400; }
.m-avviso { text-align: center; font-size: 0.8em; font-weight: 700; color: var(--lilla-700); background: var(--lilla-50); border-radius: 10px; padding: 4px 10px; }
.m-nota-tasti { font-size: 0.85em; color: var(--ink-500); }

/* ---------- Punta e clicca / Trascina: rigo interattivo ---------- */
.m-rigo svg { touch-action: none; }
.m-candidato rect { fill: transparent; stroke: transparent; cursor: pointer; }
.m-candidato:hover rect { fill: rgba(148, 98, 163, 0.12); stroke: var(--lilla-300); stroke-width: 1.5; }
.m-candidato.m-giusta rect { fill: rgba(127, 184, 150, 0.30); stroke: var(--ok-500); stroke-width: 2.5; }
.m-candidato.m-sbagliata rect { fill: rgba(224, 122, 95, 0.25); stroke: var(--ko-500); stroke-width: 2.5; }
.m-bersaglio rect { fill: #FFFDF6; stroke: var(--lilla-300); stroke-width: 1.5; stroke-dasharray: 4 3; cursor: pointer; }
.m-bersaglio text { font: 700 17px var(--font-body, sans-serif); fill: var(--ink-500); pointer-events: none; }
.m-bersaglio:hover rect { fill: var(--lilla-50); stroke: var(--lilla-500); }
.m-bersaglio.m-giusta rect { fill: var(--ok-bg); stroke: var(--ok-500); stroke-dasharray: none; }
.m-bersaglio.m-giusta text { fill: var(--ok-ink); }
.m-bersaglio.m-sbagliata rect { fill: var(--ko-bg); stroke: var(--ko-500); stroke-dasharray: none; }
.m-bersaglio.m-mostrata rect { fill: #FFFDF6; stroke: var(--ink-300); stroke-dasharray: none; }
.m-bersaglio.m-mostrata text { fill: var(--ink-700); }
.m-consegna { text-align: center; font-size: 1.15em; color: var(--ink-700); }
.m-consegna strong { color: var(--lilla-700); font-size: 1.2em; }
.m-aiuto { text-align: center; margin: 0; font-size: 0.8em; color: var(--ink-500); }
.m-etichette { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.m-etichetta { height: var(--m-pulsante-h); min-width: 64px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--lilla-300); background: #FFFDF6;
  color: var(--ink-700); font: 700 var(--m-pulsante-testo) var(--font-body, sans-serif); cursor: grab; touch-action: none; box-shadow: 0 2px 0 var(--lilla-200); }
.m-schermo .m-etichetta:hover:not(:disabled) { background: var(--lilla-50); color: var(--ink-700); border-color: var(--lilla-500); box-shadow: 0 2px 0 var(--lilla-300); transform: none; }
.m-schermo .m-etichetta.m-scelta, .m-schermo .m-etichetta.m-scelta:hover:not(:disabled) { background: var(--lilla-700); color: #fff; border-color: var(--lilla-700); }
.m-schermo .m-etichetta.m-usata, .m-schermo .m-etichetta.m-usata:hover:not(:disabled) { opacity: 0.35; cursor: default; background: transparent; box-shadow: none; }
.m-fantasma { position: fixed; z-index: 50; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.9; height: 48px; min-width: 64px; padding: 0 14px;
  border-radius: 12px; border: 1.5px solid var(--lilla-500); background: #FFFDF6; font: 700 18px var(--font-body, sans-serif); color: var(--ink-700); box-shadow: 0 6px 16px rgba(43,21,48,.25); }

/* =====================================================================
   LEZIONI nel formato nuovo (tutorialFrame con .m-lezione, solo pippo per ora)
   Riga sottile in alto; spiegazione grande a sinistra con "‹ / Avanti ›";
   contenuto a destra che riempie la colonna. Prototipo: docs/prototipo/lezione.html
   ===================================================================== */
.tutorial-frame.m-lezione {
  --m-spazio: clamp(6px, 1.4vh, 14px);
  --m-testo: clamp(16px, 2.3vh + 0.8vw, 30px);
  --m-titolo: clamp(16px, 2.2vh + 0.6vw, 28px);
  --m-pulsante-h: clamp(40px, 7.2vh, 58px);
  --m-pulsante-testo: clamp(15px, 1.5vh + 0.45vw, 21px);
  position: fixed; inset: 0; z-index: 1500; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--fondo-app); color: var(--ink-700); padding: 0; margin: 0; max-width: none; border-radius: 0;
}
.m-pallini { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; align-content: center; min-width: 0; }
.m-pallini i { width: 8px; height: 8px; border-radius: 50%; background: var(--lilla-200); }
.m-pallini i.m-fatto { background: var(--lilla-500); }
/* Il foglio: spiegazione, esempio e striscia dei pulsanti in un riquadro solo, largo al
   massimo 1240 px e alto al massimo 860 px (su PC non resta niente isolato ai bordi). */
.m-foglio { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100%; max-height: 860px; align-self: center;
  width: min(calc(100% - 2 * var(--m-spazio)), 1240px); margin: 0 auto var(--m-spazio);
  background: #FFFCF6; border: 1px solid var(--lilla-100); border-radius: 18px; box-shadow: 0 4px 18px rgba(107, 62, 124, 0.08); overflow: hidden; }
.m-piede { display: flex; align-items: center; gap: var(--m-spazio);
  padding: calc(var(--m-spazio) * 0.7) calc(var(--m-spazio) * 1.4); border-top: 1px solid var(--lilla-100); background: #F8F1F8; }
.m-piede .m-pallini { flex: 1; }
.m-piede .m-azione { min-width: clamp(110px, 12vw, 170px); }
.m-piede .m-chiudi { display: none; }
@media (max-width: 520px) { .m-pallini { gap: 3px; } .m-pallini i { width: 6px; height: 6px; } .m-piede .m-azione { min-width: 0; } }
/* Schermi bassi (telefono in orizzontale): niente barra del titolo, la ✕ nella striscia,
   foglio a tutto schermo: lo spazio va all'esempio. */
@media (max-height: 460px) {
  .tutorial-frame.m-lezione { grid-template-rows: minmax(0, 1fr); }
  .tutorial-frame.m-lezione > .m-barra { display: none; }
  .m-foglio { width: calc(100% - 8px); margin: 4px auto; border-radius: 14px; }
  .m-piede { padding: 4px 8px; }
  .m-piede .m-chiudi { display: inline-grid; place-items: center; }
  .m-lezione-corpo { padding: 6px 10px; }
}
.m-lezione-corpo { display: grid; gap: calc(var(--m-spazio) * 1.4); padding: calc(var(--m-spazio) * 1.2) calc(var(--m-spazio) * 1.4); min-height: 0;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.m-lezione-corpo.m-due { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); grid-template-rows: minmax(0, 1fr); }
@media (max-aspect-ratio: 4/3) { .m-lezione-corpo.m-due { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } }
.m-spiega { display: flex; flex-direction: column; gap: var(--m-spazio); min-height: 0; }
.m-spiega-testo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  font-size: var(--m-testo); line-height: 1.38; }
.m-spiega-testo p { margin: 0 0 0.4em; }
.m-spiega-aiutante img { height: clamp(40px, 8vh, 72px) !important; width: auto !important; }
.m-lezione .tf-content.m-esempio { min-height: 0; overflow: auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  padding: 0; margin: 0; max-width: none; width: 100%; font-size: calc(var(--m-testo) * 0.8); }
.m-nav { display: flex; justify-content: flex-end; gap: var(--m-spazio); }
.m-lezione .m-azione { height: clamp(40px, 6.5vh, 54px); font-size: clamp(14px, 1.4vh + 0.5vw, 20px); }
.m-lezione .m-azione:disabled { opacity: 0.4; cursor: default; }
.m-copertina { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--m-spazio); text-align: center; padding: var(--m-spazio); }
.m-copertina-icona { font-size: clamp(48px, 14vh, 120px); line-height: 1; }
.m-copertina-icona svg { width: clamp(48px, 14vh, 120px); height: auto; }
.m-copertina h1 { font-family: var(--font-display, serif); font-size: clamp(24px, 5vh, 52px); margin: 0; color: var(--ink-700); }
.m-copertina p { margin: 0; color: var(--ink-500); font-size: var(--m-testo); }
/* stati espliciti (la regola generale button:hover non deve valere: vedi sopra) */
.tutorial-frame.m-lezione .m-icona:hover:not(:disabled) { background: var(--lilla-50); box-shadow: none; transform: none; border: none; }
.tutorial-frame.m-lezione .m-azione:hover:not(:disabled) { background: var(--lilla-50); color: var(--lilla-700); border-color: var(--lilla-500); box-shadow: none; transform: none; }
.tutorial-frame.m-lezione .m-azione.m-primaria:hover:not(:disabled) { background: #5A2F75; color: #fff; border-color: #5A2F75; }
/* Lezioni Accordi dentro la cornice nuova: la loro disposizione interna a colonne non
   entra nella colonna destra (pulsanti tagliati). Qui: ricetta sopra, spartito e
   tastiera affiancati, messaggi e pulsanti sotto a tutta larghezza. */
.tutorial-frame.m-lezione .tf-content .tut-acc-blocco,
.tutorial-frame.m-lezione .tf-content .tut-acc-blocco:not(.no-tast) {
  display: grid; width: 100%; max-width: none; margin: 0; gap: 8px; align-items: center;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "sopra sopra" "pent tast" "msg msg" "bot bot"; }
.tutorial-frame.m-lezione .tf-content .tut-acc-blocco.no-tast { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sopra" "pent" "msg" "bot"; }
.tutorial-frame.m-lezione .tf-content .tut-acc-blocco > .tut-acc-pent,
.tutorial-frame.m-lezione .tf-content .tut-acc-blocco > .tut-acc-tast { max-width: none; width: 100%; margin: 0; }
.tutorial-frame.m-lezione .tf-content .tut-acc-bottoni,
.tutorial-frame.m-lezione .tf-content .tut-acc-confronto { flex-wrap: wrap; justify-content: center; }
.tutorial-frame.m-lezione .tf-content { overflow-x: hidden; }
/* Passi di adattamento (tutorialFrame li aggiunge solo se la slide non entra) */
.m-lezione-corpo.m-due.m-stretta { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.45fr); }
.m-lezione-corpo.m-stretta .m-spiega-testo { font-size: calc(var(--m-testo) * 0.88); }
.m-lezione-corpo.m-compatta .tf-content.m-esempio { font-size: calc(var(--m-testo) * 0.68); zoom: 0.9; }
.m-lezione-corpo.m-minima .tf-content.m-esempio { zoom: 0.8; }
.m-lezione-corpo.m-minima .m-spiega-testo { font-size: calc(var(--m-testo) * 0.8); }
/* Pulsanti dentro le slide (Insieme, Una alla volta, Ascolta…) nello stile nuovo, con
   stati espliciti (la regola generale button:hover qui non deve valere). */
.tutorial-frame.m-lezione .tf-content button.primario,
.tutorial-frame.m-lezione .tf-content button.secondario,
.tutorial-frame.m-lezione .tf-content .tut-acc-bottoni button,
.tutorial-frame.m-lezione .tf-content .tut-acc-confronto button {
  height: clamp(40px, 6.5vh, 54px); padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--lilla-500);
  background: transparent; color: var(--lilla-700); box-shadow: none; transform: none;
  font: 700 clamp(14px, 1.4vh + 0.5vw, 20px) var(--font-body, sans-serif); white-space: nowrap; }
.tutorial-frame.m-lezione .tf-content button.primario { background: var(--lilla-700); border-color: var(--lilla-700); color: #fff; }
.tutorial-frame.m-lezione .tf-content button.secondario:hover:not(:disabled),
.tutorial-frame.m-lezione .tf-content .tut-acc-bottoni button:not(.primario):hover:not(:disabled),
.tutorial-frame.m-lezione .tf-content .tut-acc-confronto button:not(.primario):hover:not(:disabled) { background: var(--lilla-50); color: var(--lilla-700); border-color: var(--lilla-500); box-shadow: none; transform: none; }
.tutorial-frame.m-lezione .tf-content button.primario:hover:not(:disabled) { background: #5A2F75; color: #fff; border-color: #5A2F75; box-shadow: none; transform: none; }

/* ---------- Orecchio: si ascolta invece di leggere ---------- */
.m-stimolo.m-ascolto { display: grid; place-items: center; }
.m-ascolta { width: clamp(90px, 22vh, 170px); height: clamp(90px, 22vh, 170px); border-radius: 50%; border: 3px solid var(--lilla-500);
  background: var(--lilla-50); font-size: clamp(40px, 10vh, 78px); cursor: pointer; box-shadow: 0 6px 16px rgba(107, 62, 124, 0.18); }
.m-schermo .m-ascolta:hover:not(:disabled) { background: var(--lilla-100); border-color: var(--lilla-700); transform: none; box-shadow: 0 6px 16px rgba(107, 62, 124, 0.25); }
.m-schermo .m-ascolta:active:not(:disabled) { transform: scale(0.97); }
.m-ascolto .m-dopo { display: none; }
.m-ascolto.m-rivelato { position: relative; }
.m-ascolto.m-rivelato .m-dopo { display: block; }
/* Nota di riferimento: "🔊 Do" → "🔊" (la nota misteriosa). Il Do ha il colore ambra,
   lo stesso della tacca sul suo tasto (il verde resta solo per "giusto"). */
.m-rif { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 36px); }
.m-rif-voce { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-rif-voce small { font-size: clamp(11px, 1.6vh, 15px); color: var(--ink-500); font-weight: 700; }
.m-rif-freccia { font-size: clamp(22px, 5vh, 40px); color: var(--lilla-500); font-weight: 800; }
.m-ascolta.m-do { width: clamp(60px, 14vh, 112px); height: clamp(60px, 14vh, 112px); font-size: clamp(20px, 4.5vh, 36px);
  border-color: var(--ambra-500); background: var(--ambra-100); display: grid; place-content: center; line-height: 1; padding: 0; }
.m-ascolta.m-do b { display: block; font-size: clamp(13px, 2.4vh, 20px); color: var(--ink-700); }
.m-schermo .m-ascolta.m-do:hover:not(:disabled) { background: #FFE6A3; border-color: var(--ambra-700); }
.m-schermo .m-ascolta.m-do:active:not(:disabled) { transform: scale(0.97); }
/* dopo la risposta i due pulsanti diventano piccoli in alto a sinistra, sopra lo spartito */
.m-ascolto.m-rivelato .m-rif { position: absolute; top: 10px; left: 10px; gap: 6px; z-index: 1; }
.m-ascolto.m-rivelato .m-rif small, .m-ascolto.m-rivelato .m-rif-freccia { display: none; }
.m-ascolto.m-rivelato .m-ascolta { width: 56px; height: 56px; font-size: 26px; box-shadow: none; }
.m-ascolto.m-rivelato .m-ascolta.m-do { font-size: 16px; }
.m-ascolto.m-rivelato .m-ascolta.m-do b { font-size: 12px; }
/* il Do sulla tastiera: una tacca ambra in basso (finché non è segnato giusto o sbagliato) */
.m-schermo .m-bianco.m-rif-do:not(.m-giusta):not(.m-sbagliata),
.m-schermo .m-bianco.m-rif-do:not(.m-giusta):not(.m-sbagliata):hover:not(:disabled) { box-shadow: inset 0 -6px 0 var(--ambra-500); }
/* esito con più pulsanti (es. Confronta + Ho capito): se lo spazio non basta, i pulsanti
   vanno su una seconda riga invece di schiacciare il testo */
.m-esito { flex-wrap: wrap; row-gap: 6px; }
.m-esito .m-parole { flex: 1 1 170px; }
.m-esito .m-azione { margin-left: auto; }
.m-esito .m-azione + .m-azione { margin-left: 0; }

/* ==========================================================================
   Dimostrazioni nelle lezioni (Orecchio, Sequenza, Dettato): i pezzi veri del
   motore dentro le slide, in tutte e due le cornici (vecchia e nuova).
   Fuori da .m-schermo valgono i colori di hover di main.css: li rifaccio qui.
   ========================================================================== */
.m-demo { --m-spazio: clamp(6px, 1.4vh, 14px); --m-pulsante-testo: clamp(15px, 1.5vh + 0.45vw, 21px);
  display: flex; flex-direction: column; align-items: center; gap: var(--m-spazio); width: 100%; color: var(--ink-700); }
.m-demo .m-tastiera { width: 100%; max-width: 560px; height: clamp(76px, 25vh, 210px); aspect-ratio: auto; }
.m-demo .m-stimolo { width: min(100%, 520px); padding: clamp(8px, 2.4vh, 20px); }
.m-demo .m-ascolta { width: clamp(64px, 17vh, 130px); height: clamp(64px, 17vh, 130px); font-size: clamp(28px, 7.5vh, 58px); padding: 0; }
.m-demo .m-ascolta.m-do { width: clamp(50px, 12vh, 96px); height: clamp(50px, 12vh, 96px); font-size: clamp(18px, 4vh, 32px); }
.m-demo .m-disegno { width: min(100%, 520px); height: clamp(64px, 30vh, 210px); aspect-ratio: auto; }
/* i contenitori delle dimostrazioni sono larghi quanto la slide (se no la tastiera si stringe) */
.m-demo-seq, .m-demo-rif, .m-demo-esito { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--m-spazio); }
.m-demo .m-disegno svg { width: 100% !important; height: 100% !important; display: block; }
.m-demo > div:has(> .m-esito), .m-demo-esito { width: min(100%, 560px); }
.m-demo .m-esito { font-size: clamp(14px, 1.6vh + 0.4vw, 19px); }
.m-demo .m-casella { min-width: clamp(44px, 8vh, 64px); height: clamp(38px, 7vh, 56px); font-size: clamp(15px, 2.3vh, 22px); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 700; }
.m-demo-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 16px); align-items: stretch; }
.m-demo-carta { background: #fff; border: 1.5px solid var(--lilla-100); border-radius: 14px; padding: clamp(4px, 1vh, 10px);
  display: flex; flex-direction: column; gap: clamp(3px, 0.8vh, 8px); align-items: center; min-width: 0; }
.m-demo-carta .m-disegno { height: clamp(56px, 20vh, 160px); }
.m-demo-titoletto { font-weight: 700; color: var(--lilla-700); font-size: 0.85em; }
.m-demo .m-azione { height: clamp(38px, 6.5vh, 50px); min-height: 0; }
/* hover e tocco espliciti (la regola generale button:hover di main.css qui non deve valere) */
.m-demo .m-azione:hover:not(:disabled) { background: var(--lilla-50); color: var(--lilla-700); border-color: var(--lilla-500); box-shadow: none; transform: none; }
.m-demo .m-azione.m-primaria:hover:not(:disabled) { background: #5A2F75; color: #fff; border-color: #5A2F75; }
.m-demo .m-azione:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.m-demo .m-ascolta:hover:not(:disabled) { background: var(--lilla-100); border-color: var(--lilla-700); transform: none; box-shadow: 0 6px 16px rgba(107, 62, 124, 0.25); }
.m-demo .m-ascolta.m-do:hover:not(:disabled) { background: #FFE6A3; border-color: var(--ambra-700); }
.m-demo .m-ascolta:active:not(:disabled) { transform: scale(0.97); }
.m-demo .m-bianco:hover:not(:disabled) { background: linear-gradient(#FFFFFF, #FFF3D6); box-shadow: inset 0 -5px 0 #E2D2B5; transform: none; border: none; }
.m-demo .m-bianco:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 #E2D2B5; }
.m-demo .m-bianco.m-rif-do, .m-demo .m-bianco.m-rif-do:hover:not(:disabled) { box-shadow: inset 0 -6px 0 var(--ambra-500); }
.m-demo .m-nero, .m-demo .m-nero:hover:not(:disabled), .m-demo .m-nero:active:not(:disabled) { transform: translateX(-50%); border: none; color: #fff; }
.m-demo .m-nero.m-spento, .m-demo .m-nero.m-spento:hover:not(:disabled) { background: linear-gradient(#3E2A44, #24112A); box-shadow: inset 0 -4px 0 #4A3550; }
.m-demo .m-casella:hover:not(:disabled) { background: var(--lilla-50); color: var(--ink-700); border-color: var(--lilla-500); box-shadow: none; transform: none; }
.m-demo .m-casella.m-giusta:hover:not(:disabled) { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-500); }
.m-demo .m-casella.m-sbagliata:hover:not(:disabled) { background: var(--ko-bg); color: var(--ko-ink); border-color: var(--ko-500); }
.m-demo .m-tasto:focus-visible { outline: 3px solid var(--ambra-500); outline-offset: -3px; box-shadow: none; }

/* Tasti segnati in una lezione (es. Mi Sol Si del primo livello): anello ambra */
.m-demo .m-bianco.m-segnato, .m-demo .m-bianco.m-segnato:hover:not(:disabled) { box-shadow: inset 0 0 0 4px var(--ambra-500); }
/* riga di pulsanti 🔊 sotto un disegno */
.m-demo-riga { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 0; }

/* ---------- Tutorial iniziale (9 novembre 2026): 5 slide + "Per i grandi" ---------- */
.ti-ciao { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 48px); width: 100%; }
.ti-aiutante-grande { display: grid; place-items: center; }
.ti-aiutante-grande img { height: clamp(90px, 32vh, 260px) !important; width: auto !important; max-width: 40vw; }
.ti-tre { display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 14px); }
.ti-tre span { background: #fff; border: 1.5px solid var(--lilla-200); border-radius: 999px; padding: 4px 16px; font-weight: 700; color: var(--lilla-700);
  font-size: clamp(15px, 2.4vh, 22px); white-space: nowrap; }
.ti-lista { margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(4px, 1.2vh, 12px); width: min(100%, 640px);
  font-size: clamp(14px, 1.6vh + 0.4vw, 19px); }
.ti-lista li { background: #fff; border: 1px solid var(--lilla-100); border-radius: 10px; padding: 4px 10px; text-align: left; }
.ti-passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 14px); align-items: stretch; width: min(100%, 720px); }
.ti-passo { background: #fff; border: 1.5px solid var(--lilla-100); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: space-between; text-align: center; min-width: 0; }
.ti-passo b { font-size: clamp(13px, 1.8vh, 17px); color: var(--lilla-700); }
.m-demo .ti-passo .m-disegno.ti-mini { height: clamp(44px, 22vh, 150px); }
.m-demo .ti-passo .m-tastiera { height: clamp(44px, 22vh, 150px); padding: 5px 4px 4px; border-radius: 8px; width: 100%; }
.m-demo .ti-passo .m-tastiera::before { display: none; }
.m-demo .ti-passo .m-bianco { font-size: clamp(8px, 1.4vh, 13px); padding-bottom: 3px; margin-top: 0; }
.m-demo .ti-passo .m-nero { top: 5px; }
.m-demo .ti-passo .m-divieto { font-size: 7px; }
.ti-ok { width: clamp(40px, 14vh, 100px); height: clamp(40px, 14vh, 100px); border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-bg); border: 3px solid var(--ok-500); color: var(--ok-ink); font-size: clamp(22px, 7vh, 54px); font-weight: 800; }
.ti-mondo-carta { width: min(100%, 520px); }
.ti-didascalia { margin: 0; text-align: center; color: var(--ink-500); font-size: clamp(13px, 1.8vh, 17px); }
/* Inno alla gioia: la nota che suona si accende */
.ti-inno g.vf-stavenote.ti-suona path, .ti-inno g.vf-stavenote.ti-suona ellipse { fill: var(--lilla-500); stroke: var(--lilla-500); }

/* ---------- Tempo, lezioni corte (9 novembre 2026): battute compatte ---------- */
.m-tempo-battuta { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 24px); width: min(100%, 620px); }
.m-frazione { display: flex; flex-direction: column; align-items: center; font-family: var(--font-display, serif); font-weight: 800;
  font-size: clamp(30px, 11vh, 84px); line-height: 0.95; color: var(--lilla-700); }
.m-frazione b + b { border-top: 3px solid var(--lilla-700); }
.m-demo .m-disegno.m-battuta { flex: 1; min-width: 0; width: auto; height: clamp(60px, 26vh, 190px); }
.m-demo-carta .m-disegno.m-battuta { width: 100%; height: clamp(50px, 21vh, 160px); }
.m-conta { margin: 0; text-align: center; font-weight: 700; color: var(--ink-500); font-size: clamp(15px, 2.4vh + 0.3vw, 24px); letter-spacing: 0.02em; }
.m-conta b { color: var(--lilla-700); }
.m-somma { margin: 0; text-align: center; font-size: clamp(13px, 1.8vh + 0.2vw, 18px); }
.m-somma span { display: block; font-size: 0.85em; color: var(--ko-ink); }
.m-carta-si { border-color: var(--ok-500); }
.m-carta-no { border-color: var(--ko-500); }
/* figure e pause su una riga sola (niente a capo sul telefono) */
.m-figure .tutorial-figure-grid { flex-wrap: nowrap; margin: 0; padding: 0; gap: clamp(4px, 1vw, 10px); width: 100%; justify-content: center; }
.m-figure .fig-card { min-width: 0; flex: 1 1 0; max-width: 130px; padding: 6px 4px; }
.m-figure .fig-pentagramma { width: min(90px, 100%); }
.m-figure .fig-card strong { font-size: clamp(11px, 1.7vh, 14px); line-height: 1.15; }
.m-figure .fig-card em { font-size: clamp(11px, 1.6vh, 13px); }
.m-figure .fig-card em strong { font-size: 1em; }
/* BPM: le sei card su una riga */
.bpm-scala.m-bpm { flex-wrap: nowrap; margin: 0 auto; }
.bpm-scala.m-bpm .bpm-card { min-width: 0; flex: 1 1 0; padding: 6px 2px; }