/* SolFaMi — stili base
 * Palette "quaderno caldo": crema + lilla + accenti ambra/salvia/terracotta.
 * Font self-hosted (OFL): Atkinson Hyperlegible (body) + Fraunces (display).
 */

/* ---- Font self-hosted (OFL license, vedi fonts/LICENSE.txt) ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-700.woff2') format('woff2');
}
/* Fraunces variable: un solo file copre 400..700 + optical size 9..144 */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
}

:root {
  /* ---- FONDI (crema caldo, mai bianco puro) ---- */
  --fondo-app:        #F9EFD8;
  --fondo-pannello:   #FFFBEF;
  --fondo-card:       #FDF5E0;
  --fondo-muted:      #F1E6CC;

  /* Alias retrocompatibili (usati in molte regole esistenti) */
  --sfondo-app:        var(--fondo-app);
  --sfondo-pannello:   var(--fondo-pannello);
  --sfondo-pentagramma: var(--fondo-pannello);

  /* ---- INCHIOSTRO (scala prugna, famiglia viola) ---- */
  --ink-900: #2B1530;   /* linee pentagramma, max contrasto */
  --ink-700: #3A1D3F;   /* testo primario */
  --ink-500: #6B4F6E;   /* testo secondario */
  --ink-300: #B5A0BA;   /* disabilitato */

  /* Alias retrocompatibili */
  --testo-primario:   var(--ink-700);
  --testo-secondario: var(--ink-500);
  --linea-pentagramma: var(--ink-900);
  --bordo:            var(--ink-700);
  --bordo-chiaro:     var(--ink-500);

  /* ---- LILLA (accento principale) ---- */
  --lilla-50:  #F5EEF7;
  --lilla-100: #EADCEE;
  --lilla-200: #DCC3E2;
  --lilla-300: #CB9DD8;
  --lilla-400: #B088BA;
  --lilla-500: #9462A3;
  --lilla-700: #6B3E7C;

  /* ---- AMBRA (accento caldo, stelline + celebrazione) ---- */
  --ambra-100: #FCEFC8;
  --ambra-300: #F4CB5A;
  --ambra-500: #E8A900;
  --ambra-700: #B88600;
  --stellina-oro: var(--ambra-500);

  /* ---- FEEDBACK (salvia/terracotta, non rosso/verde elettrico) ---- */
  --ok-bg:  #E8F3EC;  --ok-500: #7FB896;  --ok-ink: #2D5A3D;
  --ko-bg:  #FCEDE8;  --ko-500: #E07A5F;  --ko-ink: #7D3823;
  --pastello-verde:   var(--ok-bg);
  --pastello-rosa:    var(--ko-bg);
  --pastello-azzurro: #DDE8F5;

  /* ---- MONDI (saturazione ~45%, mai stridenti) ---- */
  --violino-ink:   #B05A1C;  --violino-bg:   #FBE8CE;
  --basso-ink:     #3D72B8;  --basso-bg:     #DDE8F5;
  --piano-ink:     #6C5474;  --piano-bg:     #EDE3EF;
  --ritmo-ink:     #A83838;  --ritmo-bg:     #F8DDD8;
  --orecchio-ink:  #4F7F5A;  --orecchio-bg:  #DDEDE0;
  --trascina-ink:  #7550A0;  --trascina-bg:  #E9DEF3;

  /* ---- FORME ---- */
  --radius:        14px;
  --radius-lg:     22px;
  --radius-card:   18px;
  --radius-pill:   999px;

  /* ---- OMBRE (tinte, mai nere) ---- */
  --ombra-1:      0 1px 0 var(--lilla-200);
  --ombra-2:      0 2px 0 var(--lilla-300);
  --ombra-3:      0 3px 0 var(--lilla-500);
  --ombra-soft:   0 4px 14px rgba(107, 62, 124, 0.10);
  --ombra-lift:   0 8px 22px rgba(107, 62, 124, 0.15);
  --ombra-calda:  0 4px 14px rgba(232, 169, 0, 0.12);

  /* ---- TRANSIZIONI ---- */
  --t-fast:   150ms ease;
  --t-smooth: 300ms ease;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- TIPOGRAFIA ---- */
  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body:    'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-700);
  background: var(--fondo-app);
  line-height: 1.5;
}

/* Reset essenziale */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  /* Due aloni pallidi negli angoli + base crema: atmosfera "quaderno ben
     stampato" senza texture pesanti. Zero immagini, zero overhead. */
  background:
    radial-gradient(circle at 8% 12%,  rgba(203, 157, 216, 0.18) 0, transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(232, 169, 0, 0.12) 0, transparent 42%),
    var(--fondo-app);
  background-attachment: fixed;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

/* Tipografia — display in Fraunces (serif caldo), corpo in Atkinson (sans leggibile) */
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: -0.005em;
}
p {
  color: var(--ink-700);
}
.secondario {
  color: var(--ink-500);
}

/* Bottoni — pill, bordo sottile, ombra a colore (stile "carta sollevata") */
button {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  box-shadow: var(--ombra-1);
}
button:hover:not(:disabled) {
  background: var(--lilla-50);
  border-color: var(--lilla-300);
  box-shadow: var(--ombra-2);
  transform: translateY(-1px);
}
button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--lilla-200);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.primario {
  background: var(--lilla-300);
  border-color: var(--lilla-500);
  color: var(--fondo-pannello);
  box-shadow: var(--ombra-3);
}
button.primario:hover:not(:disabled) {
  background: var(--lilla-400);
  border-color: var(--lilla-700);
}
button.primario:active:not(:disabled) {
  box-shadow: 0 0 0 var(--lilla-500);
}

/* Focus accessibile universale */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lilla-200), 0 0 0 5px var(--lilla-500);
}

/* Icone inline (usate da js/icone.js) */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { width: 1.15em; height: 1.15em; display: block; }

/* Stelline SVG — gradient oro con leggera ombra calda */
.stelline-row { display: inline-flex; gap: 2px; vertical-align: middle; }
.stella { width: 1.1em; height: 1.1em; display: block; }
.stella.piena { filter: drop-shadow(0 1px 0 var(--ambra-700)); }
.stella.vuota { opacity: 0.7; }

/* Input text */
input[type="text"] {
  font: inherit;
  color: var(--testo-primario);
  background: var(--sfondo-pannello);
  border: 3px solid var(--bordo);
  border-radius: var(--radius);
  padding: 12px 16px;
  width: 100%;
  max-width: 420px;
}
input[type="text"]:focus {
  outline: none;
  border-color: var(--lilla-500);
  box-shadow: 0 0 0 4px rgba(143, 104, 153, 0.30);
}

/* Schermata (wrapper con animazione di ingresso) */
.schermata {
  animation: fade-in 300ms ease;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Layout helpers */
.centro { text-align: center; }
.flex-centro {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-colonna {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================================================
   Schermata Benvenuto — scelta gatto + scelta nome
   ========================================================= */

.griglia-gatti {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 840px;
  width: 100%;
}
@media (max-width: 780px) {
  .griglia-gatti { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .griglia-gatti { grid-template-columns: repeat(2, 1fr); }
}

.card-gatto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px;
  background: var(--sfondo-pannello);
  border: 3px solid var(--bordo);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow: var(--ombra-soft);
  font: inherit;
  color: var(--testo-primario);
}
.card-gatto:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--ombra-lift);
  background: var(--lilla-50);
}
.card-gatto.selezionato {
  animation: salta-scelto 700ms ease;
  background: var(--lilla-200);
}
@keyframes salta-scelto {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.18) translateY(-12px); }
  70%  { transform: scale(1.05) translateY(-4px); }
  100% { transform: scale(1.05); }
}
.card-gatto img {
  width: 100%;
  max-width: 110px;
  height: auto;
}
.card-gatto .label {
  font-weight: 600;
  font-size: 0.92rem;
}

/* Griglia specie famigli (flusso benvenuto — fase 1) */
.griglia-famigli {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 900px;
  padding: 0 16px;
  margin: 0 auto;
}
@media (max-width: 780px) {
  .griglia-famigli { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .griglia-famigli { grid-template-columns: repeat(2, 1fr); }
}
.card-famiglio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 14px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--lilla-200);
  border-radius: var(--radius-card);
  box-shadow: var(--ombra-soft);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.card-mondo:focus-visible,
.card-livello:focus-visible,
.card-gatto:focus-visible,
.card-famiglio:focus-visible,
.card-profilo:focus-within,
.btn-nota:focus-visible {
  outline: 3px solid var(--lilla-500);
  outline-offset: 3px;
}
.card-famiglio:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--ombra-lift);
  background: var(--lilla-50);
}
.card-famiglio.selezionato {
  animation: salta-scelto 700ms ease;
  background: var(--lilla-200);
}
.card-famiglio img {
  width: 110px;
  height: auto;
}
.card-famiglio .label {
  font-weight: 700;
  font-size: 0.95rem;
}
.badge-varianti {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: var(--lilla-500);
  border-radius: 999px;
}


.btn-nome-suggerito {
  font-size: 0.92rem;
  padding: 8px 14px;
}

.nota-placeholder {
  font-size: 0.88rem;
  color: var(--testo-secondario);
  font-style: italic;
}

/* Gatto scelto mostrato nella fase nome */
.gatto-scelto-grande {
  width: 180px;
  height: auto;
  animation: entra-grande 400ms ease;
}
@keyframes entra-grande {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* =========================================================
   Schermata Home — 5 Mondi + gatto compagno
   ========================================================= */

.home-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
  border-bottom: 1.5px dashed var(--lilla-200);
}
.home-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--lilla-700);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Smartphone landscape: header compatto, saluto-mini visibile (nome+stelle+aiutante)
   accanto al titolo, e la "seconda riga" (.home-saluto) viene rimossa per
   guadagnare verticale per le card mondi. */
@media (max-height: 500px) {
  .home-header {
    padding: 2px 0 6px;
    border-bottom: 1px dashed var(--lilla-200);
  }
  .home-header h1 {
    font-size: 1.3rem;
  }
  .home-hamburger {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }
  .home-saluto { display: none; }
  .home-saluto-mini-testo { font-size: 0.85rem; }
  .home-mini-aiutante { width: 32px; height: 40px; }
}
@media (max-width: 480px) {
  .home-saluto-mini-testo { font-size: 0.85rem; }
  .home-mini-aiutante { width: 32px; height: 40px; }
}
.home-hamburger {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  border: 1.5px solid var(--lilla-300);
  border-radius: 12px;
  background: var(--lilla-50);
  color: var(--lilla-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, background 120ms, border-color 120ms, box-shadow 120ms;
  box-shadow: var(--ombra-1);
  font-family: inherit;
}
.home-hamburger:hover {
  transform: translateY(-1px);
  background: var(--lilla-100);
  border-color: var(--lilla-500);
  box-shadow: var(--ombra-2);
}
.home-hamburger:active { transform: translateY(0); }

/* Saluto inline in fondo al header — nome + stelle + iconcina aiutante.
   Ora la riga "Ciao..." è sempre visibile (anche su smartphone) e non
   serve più una seconda riga sotto. */
.home-saluto-mini {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 1;
  min-width: 0;
  background: var(--lilla-50);                  /* sempre viola chiaro, come il bottone ☰ */
  border: 1.5px solid var(--lilla-300);
  border-radius: 12px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--lilla-700);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.home-saluto-mini:hover {
  border-color: var(--lilla-500);
  box-shadow: var(--ombra-1);
}
.home-saluto-mini:focus-visible {
  outline: none;
  border-color: var(--lilla-500);
}

/* Popover profilo: piccola card con 3 azioni rapide ancorata sotto al saluto */
.popover-profilo {
  position: fixed;
  z-index: 1100;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-300);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(42, 27, 16, 0.25);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.popover-profilo.aperto {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.popover-profilo button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink-700);
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
}
.popover-profilo button:hover {
  background: var(--lilla-50);
  color: var(--lilla-700);
}
.home-saluto-mini-testo {
  font-size: 0.95rem;
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.home-saluto-mini-testo strong {
  color: var(--lilla-700);
  font-family: var(--font-display);
  font-weight: 700;
}
.home-mini-aiutante {
  width: 36px;
  height: 44px;
  flex-shrink: 0;
  background: var(--lilla-50);
  border-radius: 10px;
  padding: 2px;
  border: 1.5px solid var(--lilla-200);
}

.home-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--lilla-50);
  color: var(--lilla-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, background 120ms, border-color 120ms, box-shadow 120ms;
  box-shadow: var(--ombra-1);
}
.icon-btn:hover {
  transform: translateY(-1px);
  background: var(--lilla-100);
  border-color: var(--lilla-300);
  box-shadow: var(--ombra-2);
}
.icon-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--lilla-200);
}
.icon-btn[data-active="true"] {
  background: var(--lilla-300);
  color: var(--fondo-pannello);
  border-color: var(--lilla-500);
}
/* L'unica eccezione cromatica: il bottone help/guida resta lievemente caldo
   per evidenziarne la natura "di aiuto" (tinta ambra trasparente). */
.icon-btn#btn-help {
  background: var(--ambra-100);
  color: var(--ambra-700);
}
.icon-btn#btn-help:hover {
  background: #F9DE8A;
  border-color: var(--ambra-300);
}

.home-saluto {
  font-family: var(--font-display);
  text-align: center;
  margin: 24px 0 12px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}
.home-saluto strong {
  color: var(--lilla-700);
}

.griglia-mondi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (max-width: 960px) { .griglia-mondi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .griglia-mondi { grid-template-columns: repeat(2, 1fr); } }

/* Landscape mobile (smartphone orizzontale): griglia → carosello a scroll
   orizzontale con snap. Ogni card è un "riquadro" largo ~200px e l'utente
   scorre lateralmente. Evita lo scroll verticale interminabile della griglia
   2×4. */
@media (max-width: 900px) and (orientation: landscape) {
  /* Home in landscape: NON blocco lo scroll verticale del body, così il
     pull-to-refresh nativo (swipe alto-basso da fermo all'inizio della
     pagina) continua a funzionare per ricaricare la PWA. Il carousel ha
     già il suo overflow-x e scroll-snap, indipendente dal body. */
  .schermata-home .home-header { flex-shrink: 0; }
  .griglia-mondi {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 8px;
    margin: 8px -16px 0;       /* sfonda il padding di #app per full-width scroll */
    scrollbar-width: thin;
  }
  .griglia-mondi > * {
    flex: 0 0 auto;
    width: 180px;
    min-height: auto;
    scroll-snap-align: start;
  }
  .griglia-mondi::-webkit-scrollbar { height: 4px; }
  .griglia-mondi::-webkit-scrollbar-thumb { background: var(--lilla-300); border-radius: 4px; }
}

/* Card mondo — fondo bianco caldo uniforme. L'identità del mondo vive in
   bordo / label / chip / ombra, non nel fondo (più leggibile, meno rumore
   cromatico quando 7 card sono affiancate). */
.card-mondo {
  --accento-ink: var(--lilla-700);
  --accento-bg:  var(--lilla-50);

  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  padding: 18px 16px;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--accento-ink);
  border-color: color-mix(in srgb, var(--accento-ink) 55%, transparent);
  border-radius: var(--radius-card);
  text-align: left;
  min-height: 172px;
  font: inherit;
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accento-ink) 35%, transparent),
              var(--ombra-soft);
}
.card-mondo:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accento-ink) 45%, transparent),
              var(--ombra-lift);
  border-color: var(--accento-ink);
}
.card-mondo:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accento-ink) 35%, transparent);
}
.card-mondo:disabled {
  --accento-ink: var(--ink-500);
  --accento-bg:  var(--fondo-muted);
  cursor: not-allowed;
  border-style: dashed;
  box-shadow: none;
}
.card-mondo:disabled .card-mondo-emoji,
.card-mondo:disabled .card-mondo-label,
.card-mondo:disabled .card-mondo-desc {
  filter: grayscale(0.7);
  opacity: 0.55;
}
.card-mondo:disabled .card-mondo-status {
  opacity: 1;
  color: var(--ink-500);
  font-weight: 600;
}

/* Identità cromatica per mondo — derivata dai token --*-ink/--*-bg */
.card-mondo[data-mondo="violino"]   { --accento-ink: var(--violino-ink);   --accento-bg: var(--violino-bg); }
.card-mondo[data-mondo="basso"]     { --accento-ink: var(--basso-ink);     --accento-bg: var(--basso-bg); }
.card-mondo[data-mondo="piano"]     { --accento-ink: var(--piano-ink);     --accento-bg: var(--piano-bg); }
.card-mondo[data-mondo="ritmo"]     { --accento-ink: var(--ritmo-ink);     --accento-bg: var(--ritmo-bg); }
.card-mondo[data-mondo="orecchio"]  { --accento-ink: var(--orecchio-ink);  --accento-bg: var(--orecchio-bg); }
.card-mondo[data-mondo="trascina"]  { --accento-ink: var(--trascina-ink);  --accento-bg: var(--trascina-bg); }
.card-mondo[data-mondo="ripasso"]   { --accento-ink: var(--ambra-700);     --accento-bg: var(--ambra-100); }
.card-mondo[data-mondo="tornado"]   { --accento-ink: #A83838;              --accento-bg: #FAE3DD; }

.card-mondo-emoji  { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05)); }
.card-mondo-label  {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accento-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.card-mondo-desc   {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.4;
}
/* Chip status: rettangolo compatto con angoli morbidi. Testo su 1-2 righe
   (niente ellissi che tagliava i messaggi di lock importanti). */
.card-mondo-status {
  margin-top: auto;
  display: inline-block;
  padding: 4px 10px;
  background: var(--accento-bg);
  border: none;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accento-ink);
  width: fit-content;
  max-width: 100%;
  line-height: 1.3;
  word-wrap: break-word;
}


/* Pentagramma-box serve position relative per ospitare il barattolo */
.pentagramma-box { position: relative; }

/* Mondo Orecchio: pentagramma grande sempre visibile */
.pentagramma-orecchio {
  max-width: 860px;
  margin: 16px auto;
  padding: 16px 10px;
  background: var(--sfondo-pentagramma, #FFFBF0);
  border: 2px solid var(--bordo, #3A1D3F);
  border-radius: 12px;
}
/* Solo lo SVG diretto del pentagramma deve essere 100% — non gli svg overlay
   (es. la bocca del gatto feedback, che ha dimensioni native da rispettare). */
.pentagramma-orecchio > div > svg {
  width: 100%;
  height: auto;
}

.ascolto-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 16px 20px;
}
.btn-grande {
  font-size: 1.4rem;
  padding: 16px 30px;
}

/* Reveal orecchio/ritmo: rivela la risposta corretta con nome grande */
.orecchio-reveal,
.ritmo-reveal-label {
  text-align: center;
  margin: 16px auto;
  max-width: 720px;
  padding: 0 12px;
}
.reveal-etichetta,
.ritmo-reveal-label {
  font-size: 1.4rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 12px;
  display: inline-block;
}
.reveal-etichetta.corretto,
.ritmo-reveal-label.corretto {
  background: #DFF5DF;
  color: #2A7A3A;
  border: 2px solid #76C476;
}
.reveal-etichetta.sbagliato,
.ritmo-reveal-label.sbagliato {
  background: #FEE6E6;
  color: #A81010;
  border: 2px solid #C44040;
}
.istruzione.corretto { color: #2A7A3A; }
.istruzione.sbagliato { color: #A81010; }

/* Modalità "tieni premuto" del Ritmo */
.tieni-indicatore {
  max-width: 560px;
  margin: 10px auto 20px;
  padding: 0 16px;
  text-align: center;
}
.tieni-target {
  width: 100%;
  height: 24px;
  background: var(--lilla-100);
  border: 2px solid var(--lilla-300);
  border-radius: 14px;
  overflow: hidden;
}
.tieni-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--lilla-300), var(--lilla-500));
  transition: width 40ms linear;
}
.tieni-fill.attivo { box-shadow: 0 0 12px var(--lilla-500) inset; }
.tieni-label {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--testo-secondario, #6B5870);
  font-family: monospace;
}

/* Lista durate nei tutorial Ritmo/Orecchio/Trascina */
.lista-durate {
  list-style: none;
  padding: 0;
  max-width: 480px;
  margin: 10px auto;
  text-align: left;
}
.lista-durate li {
  padding: 6px 12px;
  margin: 4px 0;
  background: var(--lilla-50);
  border-left: 4px solid var(--lilla-300);
  border-radius: 6px;
  font-size: 1.02rem;
}
.lista-durate li strong {
  color: var(--lilla-600, var(--testo-primario));
}

/* Mondo Trascina: etichette + zona drop */
.zona-nomi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0 12px;
}
.etichetta-nome {
  padding: 10px 22px;
  background: var(--lilla-100);
  border: 2px solid var(--lilla-300);
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--testo-primario);
  cursor: grab;
  user-select: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.etichetta-nome:hover { transform: translateY(-2px); box-shadow: var(--ombra-lift); }
.etichetta-nome.dragging { opacity: 0.5; cursor: grabbing; }
.etichetta-nome.risposta-giusta { background: #C6F0C6; border-color: #2A7A3A; }
.etichetta-nome.risposta-sbagliata { background: #F4C6C6; border-color: #C44040; }

#drop-target.drop-hover {
  background: var(--lilla-50);
  box-shadow: inset 0 0 0 3px var(--lilla-500);
}

/* Trascina — modo POSIZIONA: drop target invisibili sovrapposti ai candidati sul rigo */
.candidato-drop {
  border: 2px dashed rgba(143, 104, 154, 0.5);
  background: rgba(143, 104, 154, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  padding: 0;
}
.candidato-drop:hover:not(.disabled) {
  background: rgba(143, 104, 154, 0.25);
  border-color: var(--lilla-500);
}
.candidato-drop.disabled { cursor: default; pointer-events: none; }
.candidato-drop.rivela-corretto {
  background: rgba(42, 122, 58, 0.25);
  border-color: #2A7A3A;
  border-style: solid;
}
.candidato-drop.rivela-sbagliato {
  background: rgba(196, 64, 64, 0.25);
  border-color: #C44040;
  border-style: solid;
}

/* Sfida — modo PUNTA & CLICCA: 5 mini-pentagrammi cliccabili */
.tornado-pc-candidati {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 0 auto;
  max-width: 720px;
}
.candidato-pc {
  flex: 1 1 100px;
  max-width: 130px;
  background: var(--fondo-pannello);
  border: 2px solid var(--lilla-200);
  border-radius: var(--radius);
  padding: 4px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: var(--ombra-1);
}
.candidato-pc:hover:not(:disabled) {
  border-color: var(--lilla-500);
  transform: translateY(-2px);
  box-shadow: var(--ombra-2);
}
.candidato-pc:disabled { cursor: default; opacity: 0.85; }
.candidato-pc.risposta-giusta { border-color: #2A7A3A; background: rgba(42, 122, 58, 0.18); }
.candidato-pc.risposta-sbagliata { border-color: #C44040; background: rgba(196, 64, 64, 0.18); }
.candidato-pc .cand-pent svg {
  display: block;
  max-width: 100%;
  height: auto;
}
@media (max-width: 520px) {
  .tornado-pc-candidati { gap: 5px; padding: 6px; }
  .candidato-pc { flex: 1 1 70px; max-width: 90px; padding: 2px; }
}

/* Trascina — modo ASSOCIA: slot "?" sopra ogni nota, da riempire */
.assoc-target {
  min-width: 52px;
  padding: 4px 8px;
  background: var(--sfondo-pannello);
  border: 2px dashed var(--lilla-300);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--lilla-500);
  text-align: center;
  cursor: default;
  transform: translateX(-50%);
  transition: background 150ms ease, border-color 150ms ease;
}
.assoc-target.drop-hover {
  background: var(--lilla-100);
  border-color: var(--lilla-500);
}
.assoc-target.rivela-corretto {
  background: #DFF5DF;
  border-color: #2A7A3A;
  border-style: solid;
  color: #2A7A3A;
}
.assoc-target.rivela-sbagliato {
  background: #FEE6E6;
  border-color: #C44040;
  animation: target-shake 300ms ease;
}
.etichetta-nome.matched {
  opacity: 0.4;
  cursor: default;
  background: #DFF5DF;
}
@keyframes target-shake {
  0%, 100% { transform: translateX(-50%); }
  25%      { transform: translateX(calc(-50% - 5px)); }
  75%      { transform: translateX(calc(-50% + 5px)); }
}

/* Overlay celebrativo quando un mondo viene completato al 5⭐ */
.overlay-mondo-completato {
  position: fixed;
  inset: 0;
  background: rgba(58, 29, 63, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: overlay-appare 400ms ease;
}
.overlay-contenuto {
  position: relative;
  background: var(--sfondo-pannello);
  border: 3px solid var(--lilla-500);
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  max-width: 520px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.35);
  animation: overlay-salta 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.overlay-stelle {
  font-size: 3rem;
  color: var(--stellina-oro, #E8A900);
  letter-spacing: 4px;
  margin-bottom: 10px;
}
.overlay-contenuto h1 {
  margin: 0 0 12px;
}
.overlay-coriandoli {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.coriandolo {
  position: absolute;
  top: -30px;
  left: var(--x);
  font-size: 1.4rem;
  animation: coriandolo-cade 3s ease-in calc(var(--i) * 100ms) infinite;
}
@keyframes overlay-appare {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlay-salta {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes coriandolo-cade {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(600px) rotate(720deg); opacity: 0; }
}

/* Mini-coriandoli: caduta breve sulla risultato page (sempre) */
.mini-coriandoli {
  position: fixed;
  top: 0; left: 0; right: 0; height: 200px;
  pointer-events: none;
  z-index: 5;
}
.mc-item {
  position: absolute;
  top: -20px;
  left: var(--x);
  font-size: 1.3rem;
  animation: mc-cade 2.5s ease-in var(--d) forwards;
}
@keyframes mc-cade {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(500px) rotate(360deg); opacity: 0; }
}

/* Overlay maestria livello: medio, meno invadente di quello mondo */
.overlay-maestria .overlay-contenuto {
  border-color: var(--stellina-oro, #E8A900);
  padding: 28px 36px;
  max-width: 440px;
}
.overlay-maestria .overlay-stelle {
  font-size: 2.4rem;
}

/* Slider nelle impostazioni */
.impostazioni-slider {
  margin-top: 10px;
}
.impostazioni-slider label {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.impostazioni-slider input[type="range"] {
  width: 100%;
  accent-color: var(--lilla-500);
}

/* Badge MIDI globale: appare solo con .connesso */
.midi-indicator {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--sfondo-pannello);
  border: 2px solid #B0A7AE;
  border-radius: 999px;
  box-shadow: var(--ombra-soft);
  font-size: 0.85rem;
  color: #7A6E74;
  font-weight: 600;
  z-index: 20;
  pointer-events: auto;
  max-width: 220px;
  overflow: hidden;
  opacity: 0.72;
  transition: all 240ms ease;
}
.midi-indicator .midi-icon { position: relative; }
.midi-indicator .midi-icon::after {
  /* Barra rossa sopra l'icona quando NON connesso */
  content: '';
  position: absolute;
  left: -4px; right: -4px; top: 50%;
  border-top: 2px solid #C44040;
  transform: rotate(-18deg);
  opacity: 0.8;
  pointer-events: none;
}
.midi-indicator.connesso {
  border-color: #2A7A3A;
  color: #2A5A2A;
  opacity: 1;
  cursor: pointer;
}
.midi-indicator.connesso:hover { background: rgba(42, 122, 58, 0.08); }
.midi-indicator.connesso .midi-icon::after { display: none; }
.midi-indicator .midi-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.midi-indicator .midi-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.midi-indicator.pulse .midi-icon {
  animation: midi-pulse 320ms ease-out;
}
@keyframes midi-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25) rotate(-6deg); }
  100% { transform: scale(1)    rotate(0); }
}

/* Su smartphone: indicator compatto a SINISTRA (come desktop), solo icona,
   niente etichetta. La destra è riservata all'aiutante mobile. Su tablet
   (incluso Onyx BOOX) lascio il badge come desktop, full-size con label. */
@media (max-width: 700px), (max-width: 900px) and (max-height: 600px) {
  .midi-indicator {
    left: 8px;
    right: auto;
    bottom: 8px;
    width: 36px;
    height: 36px;
    max-width: 36px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
    font-size: 0;
  }
  .midi-indicator .midi-label { display: none; }
  .midi-indicator .midi-icon { font-size: 1.05rem; }
  .midi-indicator .midi-icon::after {
    left: -2px; right: -2px;
    border-top-width: 1.5px;
  }
}

/* Anteprima famigli (pagina dev) */
.preview-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  padding: 0 16px;
  max-width: 960px;
  margin: 0 auto;
}
.preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 10px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--lilla-200);
  border-radius: var(--radius-card);
  box-shadow: var(--ombra-soft);
}
.preview-card.draft {
  border-color: var(--lilla-300);
  border-style: dashed;
}
.preview-box {
  width: 120px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lilla-50, #FAF5FF);
  border-radius: 10px;
}
.preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.preview-label {
  font-weight: 700;
  font-size: 0.98rem;
  text-align: center;
}
.preview-meta {
  font-size: 0.78rem;
  color: var(--testo-secondario, #6B5870);
}
.preview-card.draft .preview-meta { color: #8B5A3C; }
.preview-card.nativo .preview-meta { color: #2A7A3A; }

.preview-coppia {
  display: flex;
  gap: 8px;
  align-items: center;
}
.preview-box-ref {
  width: 90px;
  height: 110px;
  opacity: 0.85;
  background: #F5EFE0;
}

/* Gatto compagno (angolino basso-destra) */
.gatto-compagno {
  position: fixed;
  bottom: 16px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  outline: none;
}
.gatto-compagno:focus-visible .gatto-tutor-wrapper {
  box-shadow: 0 0 0 3px var(--lilla-500);
  border-radius: 50%;
}
.gatto-tutor-wrapper {
  position: relative;
  width: 120px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gatto-compagno img {
  width: 120px;
  height: auto;
  animation: onda-leggera 3.2s ease-in-out infinite;
  transition: transform 200ms ease;
}
.gatto-compagno:hover img {
  transform: scale(1.04);
}
.gatto-compagno .targhetta-nome {
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 2px;
  background: var(--sfondo-pannello);
  padding: 3px 12px;
  border-radius: 12px;
  border: 2px solid var(--bordo);
  box-shadow: var(--ombra-soft);
}
@keyframes onda-leggera {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-6px) rotate(1.5deg);  }
}

/* Fumetto del tutor (a sinistra del gatto, ben staccato, coda → gatto) */
.fumetto-tutor {
  position: absolute;
  bottom: 48px;
  right: 150px;
  min-width: 220px;
  max-width: 300px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--lilla-300);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--ombra-soft);
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateX(8px) scale(0.95);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
.fumetto-tutor.visibile {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
/* Coda del fumetto: punta verso destra (il gatto) */
.fumetto-tutor::after {
  content: '';
  position: absolute;
  right: -12px;
  bottom: 18px;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid var(--lilla-300);
}
.fumetto-tutor::before {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 20px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--sfondo-pannello);
  z-index: 1;
}
.fumetto-tutor p {
  margin: 0 0 8px 0;
}
.fumetto-tutor p:last-child {
  margin-bottom: 0;
}
.fumetto-tutor button {
  width: 100%;
  font-size: 0.9rem;
  padding: 6px 10px;
}
.tutor-nota-midi {
  display: inline-block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--lilla-200);
  font-size: 0.85rem;
  color: var(--lilla-500);
  line-height: 1.3;
}

/* Stato arrabbiato: shake sul WRAPPER (così la faccia cattiva segue) + tinta */
.gatto-compagno.arrabbiato .gatto-tutor-wrapper {
  animation: gatto-arrabbiato 180ms ease-in-out 4;
}
.gatto-compagno.arrabbiato img {
  animation: none;
  filter: hue-rotate(-10deg) saturate(1.4) brightness(0.95);
}
.gatto-compagno.arrabbiato .gatto-tutor-wrapper::before {
  content: '💢';
  position: absolute;
  top: -4px;
  right: 8px;
  font-size: 1.8rem;
  animation: arrabbiato-pop 500ms ease-out;
  z-index: 2;
}
@keyframes gatto-arrabbiato {
  0%, 100% { transform: translateX(0) rotate(0); }
  25%      { transform: translateX(-5px) rotate(-3deg); }
  75%      { transform: translateX(5px)  rotate(3deg); }
}
@keyframes arrabbiato-pop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  50%  { transform: scale(1.2) rotate(0); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Stato FURIOSO: faccia cattiva (sopracciglia + bocca malvagia) + tinta più rossa.
   Animazione sul WRAPPER così gli overlay SVG seguono il movimento. */
.faccia-cattiva {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 150px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 3;
}
.gatto-compagno.furioso .faccia-cattiva {
  opacity: 1;
}
.gatto-compagno.furioso .gatto-tutor-wrapper {
  animation: gatto-arrabbiato 180ms ease-in-out infinite;
}
.gatto-compagno.furioso img {
  animation: none;
  filter: hue-rotate(-20deg) saturate(1.8) brightness(0.9) contrast(1.1);
}
.gatto-compagno.furioso .gatto-tutor-wrapper::before {
  content: '💢💢💢';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.3rem;
  letter-spacing: -2px;
  animation: arrabbiato-pop 400ms ease-out, furioso-tremola 300ms ease-in-out infinite;
  z-index: 4;
}
@keyframes furioso-tremola {
  0%, 100% { transform: scale(1)   rotate(0); }
  50%      { transform: scale(1.1) rotate(8deg); }
}

/* Messaggio furioso: tutto maiuscolo, rosso e grassetto */
.fumetto-tutor.furioso-msg {
  border-color: #C44040;
  background: #FFE8E8;
}
.fumetto-tutor.furioso-msg p {
  color: #A81010;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.fumetto-tutor.furioso-msg::after { border-left-color: #C44040; }
.fumetto-tutor.furioso-msg::before { border-left-color: #FFE8E8; }

/* Stato dormiente: il gatto smette di ondeggiare, appare zzz */
.zzz {
  position: absolute;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lilla-500);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.zzz-1 { top: 18px; right: 10px; font-size: 1rem; }
.zzz-2 { top: 10px; right: 2px;  font-size: 1.25rem; }
.zzz-3 { top: 0px;  right: -6px; font-size: 1.6rem; }

.gatto-compagno.dormiente .gatto-tutor-wrapper {
  animation: respiro-sonno 3.2s ease-in-out infinite;
}
.gatto-compagno.dormiente img {
  animation: none;
  filter: brightness(0.94) saturate(0.88);
}
.gatto-compagno.dormiente .zzz { opacity: 1; }
.gatto-compagno.dormiente .zzz-1 { animation: zzz-flutua 3s ease-in-out infinite 0ms;    }
.gatto-compagno.dormiente .zzz-2 { animation: zzz-flutua 3s ease-in-out infinite 900ms;  }
.gatto-compagno.dormiente .zzz-3 { animation: zzz-flutua 3s ease-in-out infinite 1800ms; }
@keyframes respiro-sonno {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-3px) scale(1.025); }
}
@keyframes respiro-sonno {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(0); }
}
@keyframes zzz-flutua {
  0%   { transform: translate(0, 0) scale(0.9); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-18px, -28px) scale(1.3); opacity: 0; }
}

/* Impostazioni — stile "indice di quaderno": niente box con bordo, titolo con
   linea tratteggiata lilla sotto. Leggero e ariato. */
.impostazioni-sezione {
  margin-top: 30px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.impostazioni-sezione > h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink-700);
  padding-bottom: 10px;
  border-bottom: 1.5px dashed var(--lilla-200);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.impostazioni-bottoni {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.report-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.report-card {
  background: var(--sfondo-pannello);
  border: 2px solid var(--lilla-200);
  border-radius: var(--radius-card);
  padding: 18px 14px;
  text-align: center;
}
.report-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--lilla-500);
  line-height: 1;
}
.report-label {
  font-size: 0.85rem;
  color: var(--testo-secondario);
  margin-top: 6px;
}
.report-mondi, .note-deboli-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report-mondo-row, .nota-debole-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--lilla-50);
  border-radius: 8px;
}
.nota-debole-row span:first-child {
  font-weight: 700;
  min-width: 50px;
}
.nota-debole-pct {
  font-weight: 700;
  font-family: monospace;
}

.impostazioni-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--lilla-50);
  border: 2px solid var(--lilla-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast);
}
.impostazioni-toggle:hover {
  background: var(--lilla-100);
}
.impostazioni-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--lilla-500);
}
.impostazioni-toggle .toggle-testo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
}
.impostazioni-toggle .toggle-testo .secondario {
  font-size: 0.85rem;
}

/* =========================================================
   Schermata Mondo — selezione livello
   ========================================================= */

.esercizio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
  border-bottom: 1.5px dashed var(--lilla-200);
}
.header-toolbar {
  display: flex;
  gap: 8px;
}
.esercizio-titolo {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 700;
  flex: 1;
  text-align: center;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}
.esercizio-progresso {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-500);
  padding: 3px 12px;
  background: var(--lilla-50);
  border-radius: var(--radius-pill);
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

.griglia-livelli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
/* Mondi con 5 modalità (violino/basso/piano): card più larghe per far stare
   le 5 colonne stelline in 1 riga senza schiacciare. */
.griglia-livelli.quint {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
@media (max-width: 720px) {
  .griglia-livelli.quint {
    grid-template-columns: 1fr;
  }
}

/* Card-lezione come banner orizzontale full-width nella griglia livelli.
   Separa visivamente le "sezioni" del mondo (es. base → alterazioni). */
.card-lezione-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #EAF3FB 0%, #D5E6F6 100%);
  border: 2px solid var(--basso-ink);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-body);
  color: var(--ink-700);
  text-align: left;
  box-shadow: var(--ombra-2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.card-lezione-banner:hover {
  transform: translateY(-1px);
  box-shadow: var(--ombra-3);
}
.card-lezione-banner .banner-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.card-lezione-banner .banner-titoli {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.card-lezione-banner .banner-titolo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-700);
  line-height: 1.2;
}
.card-lezione-banner .banner-desc {
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.3;
}
.card-lezione-banner .banner-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
}
.card-lezione-banner .banner-badge-nuova {
  background: var(--basso-ink);
  color: white;
}
.card-lezione-banner .banner-badge-vista {
  background: var(--ok-500);
  color: white;
}
.card-lezione-banner .banner-arrow {
  font-size: 1.4rem;
  color: var(--basso-ink);
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .card-lezione-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .card-lezione-banner .banner-titolo { font-size: 0.95rem; }
  .card-lezione-banner .banner-desc { font-size: 0.78rem; }
  .card-lezione-banner .banner-arrow { display: none; }
}
.card-livello {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 16px 18px 18px;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: var(--radius-card);
  text-align: left;
  min-height: 180px;
  font: inherit;
  font-family: var(--font-body);
  color: var(--ink-700);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  box-shadow: var(--ombra-2);
}
.card-livello:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--ombra-3);
  border-color: var(--lilla-500);
}
.card-livello:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--lilla-300);
}
.card-livello:disabled {
  cursor: not-allowed;
  border-style: dashed;
  box-shadow: none;
}
/* Opacità sui figli (non sulla card stessa) così l'::after lucchetto resta
   al 100%. Niente filtro che attenua il bordo dashed. */
.card-livello:disabled > * { opacity: 0.5; }
.card-livello:disabled::after {
  content: '🔒';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.4rem;
  line-height: 1;
  pointer-events: none;
}
.card-livello.bonus {
  border-color: var(--ambra-300);
  background:
    linear-gradient(135deg, var(--ambra-100) 0%, var(--fondo-pannello) 60%);
}
.card-livello.bonus:hover:not(:disabled) { border-color: var(--ambra-500); }
.card-livello.super-bonus {
  border-color: var(--ambra-500);
  background:
    linear-gradient(135deg, #F9DE8A 0%, var(--fondo-pannello) 60%);
  box-shadow: 0 3px 0 var(--ambra-300), var(--ombra-soft);
}
.card-livello.super-bonus:hover:not(:disabled) {
  border-color: var(--ambra-700);
  box-shadow: 0 6px 0 var(--ambra-500), var(--ombra-lift);
}
/* Card-tempo: ora è in fondo alla card (sotto le stelle Base/Completo), non
   più absolute sopra il nome. Piccolo chip ambra inline nella colonna 2. */
.card-tempo {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ambra-100);
  color: var(--ambra-700);
  border: 1.5px solid var(--ambra-300);
  font-family: var(--font-body);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  width: fit-content;
}
.sezione-bonus {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 2px dashed var(--lilla-200);
  text-align: left;
}
.sezione-bonus.sezione-super {
  border-top-color: var(--lilla-400);
}
.sezione-bonus.sezione-avanzato {
  border-top-color: var(--lilla-500);
}
.bonus-titolo {
  margin: 0 0 4px 0;
  text-align: left;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}
.bonus-sottotitolo {
  margin: 0;
  text-align: left;
  color: var(--testo-secondario);
  font-size: 0.95rem;
}

.card-star-consigliata {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.2rem;
  animation: pulsa-stella 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.card-livello.super-bonus .card-star-consigliata,
.card-livello:has(.card-tempo) .card-star-consigliata {
  /* Se c'è già il chip ⚡ in alto-dx, sposto il sparkle in alto-sx */
  right: auto; left: 10px;
}
@keyframes pulsa-stella {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.25); opacity: 1; }
}
.card-livello.consigliata {
  border-color: var(--ok-500);
  box-shadow: 0 0 0 4px var(--ok-bg), 0 3px 0 var(--ok-500);
}
.card-livello.consigliata:hover:not(:disabled) {
  border-color: var(--ok-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-500) 30%, transparent), 0 6px 0 var(--ok-500);
}

/* Cifra livello: Fraunces optical-size display, colore leggero "watermark"
   → si percepisce come etichetta decorativa, il testo della descrizione
   fluisce accanto senza problemi di leggibilità. */
.livello-numero {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  font-variation-settings: 'opsz' 144;
  line-height: 0.9;
  color: var(--lilla-200);
  opacity: 0.85;
  letter-spacing: -0.04em;
  min-width: 0;
  padding-top: 2px;
}
/* B1/S1 a due caratteri: stringo letter-spacing e riduco dimensione */
.card-livello.bonus .livello-numero,
.card-livello.super-bonus .livello-numero {
  font-size: 2.6rem;
  letter-spacing: -0.02em;
}
.card-livello.bonus .livello-numero       { color: var(--ambra-300); opacity: 0.85; }
.card-livello.super-bonus .livello-numero { color: var(--ambra-500); opacity: 0.7; }
.card-livello.consigliata .livello-numero { color: var(--ok-500);    opacity: 1; }

.livello-nome  {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.livello-desc  {
  grid-column: 2; grid-row: 2;
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.4;
}
.livello-stelle {
  grid-column: 2;
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--ambra-500);
  margin-top: auto;
}
.livello-stelle-doppie {
  grid-column: 2;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.livello-stelle-doppie .slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
}
.livello-stelle-doppie .slot-label {
  color: var(--ink-500);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
}
.livello-stelle-doppie .slot-stelle {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.livello-stelle-doppie .slot-totale {
  color: var(--ink-500);
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 4px;
}
/* Sintesi numerica X/N nei mondi quint (violino/basso/piano). */
.livello-stelle-doppie .slot-num {
  color: var(--ambra-700);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Layout sintetico mondi violino/basso/piano: 3 gruppi (Base/Avanzato/P&C),
   ogni gruppo ha label + "X/N" sopra e 1-2 righe di 5 stelle piccole sotto.
   Le 2 righe per Avanzato e P&C rappresentano le 2 sotto-modalità del ramo. */
.livello-stelle-quint {
  grid-column: 2;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.livello-stelle-quint .slot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.livello-stelle-quint .slot-info {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}
.livello-stelle-quint .slot-label {
  color: var(--ink-500);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}
.livello-stelle-quint .slot-num {
  color: var(--ambra-700);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}
.livello-stelle-quint .slot-stelle-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
  flex-shrink: 0;
}
.livello-stelle-quint .slot-stelle {
  display: inline-flex;
  align-items: center;
}
.livello-stelle-quint .stelline-row { gap: 0; }
.livello-stelle-quint .stella { width: 0.72em; height: 0.72em; }

/* Colorazione per gruppo: Base=oro (default), Avanzato=lilla, P&C=verde salvia.
   Sovrascrivo fill/stroke del path SVG perché in SVG fill è un presentation
   attribute e CSS lo bat per specificità. */
.livello-stelle-quint .cstar-lilla .slot-num { color: var(--lilla-700); }
.livello-stelle-quint .cstar-lilla .stella.piena path {
  fill: var(--lilla-500);
  stroke: var(--lilla-700);
}
.livello-stelle-quint .cstar-lilla .stella.piena {
  filter: drop-shadow(0 1px 0 var(--lilla-700));
}
.livello-stelle-quint .cstar-azzurro .slot-num { color: var(--basso-ink); }
.livello-stelle-quint .cstar-azzurro .stella.piena path {
  fill: var(--basso-ink);
  stroke: #2A5A93;
}
.livello-stelle-quint .cstar-azzurro .stella.piena {
  filter: drop-shadow(0 1px 0 #2A5A93);
}

.livello-stelle-cinque {
  grid-column: 2;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
}
.livello-stelle-cinque .slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.livello-stelle-cinque .slot-label {
  color: var(--ink-500);
  font-weight: 600;
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
}
.livello-stelle-cinque .slot-stelle {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.livello-stelle-cinque .stelline-row { gap: 0; }
.livello-stelle-cinque .stella { width: 0.9em; height: 0.9em; }
.livello-stelle-cinque .slot-lock {
  font-size: 0.9rem;
  color: var(--lilla-300);
  line-height: 1;
}
@media (max-width: 640px) {
  .livello-stelle-cinque { gap: 3px; }
  .livello-stelle-cinque .slot-label { font-size: 0.6rem; }
  .livello-stelle-cinque .slot-stelle { font-size: 0.65rem; letter-spacing: -1.5px; }
  .livello-stelle-cinque .slot-lock { font-size: 0.75rem; }
}
@media (max-width: 400px) {
  .livello-stelle-cinque .slot-label { font-size: 0.54rem; }
  .livello-stelle-cinque .slot-stelle { font-size: 0.58rem; letter-spacing: -1.8px; }
}

/* Lock message nella card livello */
.livello-lock {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-700);
  padding: 6px 12px;
  background: var(--lilla-50);
  border: 1.5px solid var(--lilla-200);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  line-height: 1.3;
  box-shadow: var(--ombra-1);
}

/* Schermata intermedia livello — scelta Base/Avanzato/Sequenza (3 tile in riga). */
.griglia-sottolivelli {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 22px auto 0;
}
/* Smartphone portrait stretto: 1 colonna (impilati). */
@media (max-width: 520px) and (orientation: portrait) {
  .griglia-sottolivelli { grid-template-columns: 1fr; }
}
/* Smartphone landscape: tile più compatti per stare in riga. */
@media (max-height: 480px) {
  .griglia-sottolivelli { gap: 8px; margin: 10px auto 0; }
  .tile-sottolivello { min-height: 130px !important; padding: 12px 8px !important; }
}
.tile-sottolivello {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px;
  min-height: 190px;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: var(--radius-card);
  font: inherit;
  color: var(--ink-700);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  box-shadow: var(--ombra-2);
}
.tile-sottolivello:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--ombra-3);
  border-color: var(--lilla-500);
  background: var(--lilla-50);
}
.tile-sottolivello:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--lilla-300);
}
.tile-sottolivello:disabled {
  cursor: not-allowed;
  border-style: dashed;
  background: var(--lilla-50);
  border-color: var(--lilla-300) !important;
}
/* Opacità sui figli (non sul tile stesso) così il lucchetto ::after resta
   al 100% mentre label/desc/stelle/info appaiono "spenti". */
.tile-sottolivello:disabled > * { opacity: 0.4; }

/* Lucchetto 🔒 grande in alto-destra del tile bloccato — chiaro a colpo
   d'occhio. Sta sopra eventuali label/desc grazie al position absolute. */
.tile-sottolivello { position: relative; }
.tile-sottolivello:disabled::after {
  content: '🔒';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 1;
}

/* Layout albero per i mondi quintuplo (violino/basso/piano): tile in albero
   verticale. BASE in cima centrato + 2 rami sotto (Avanzato→Sequenza a
   sinistra, Punta&Clicca→Trascina a destra). Freccette ↓ tra le righe
   indicano i percorsi. */
.griglia-sottolivelli.albero {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "base     base"
    "avanzato pc"
    "sequenza trascina";
  max-width: 760px;
}
.tile-sottolivello.area-base     {
  grid-area: base;
  max-width: 50%;
  justify-self: center;   /* BASE centrato orizzontalmente nella riga */
}
.tile-sottolivello.area-avanzato { grid-area: avanzato; }
.tile-sottolivello.area-sequenza { grid-area: sequenza; }
.tile-sottolivello.area-pc       { grid-area: pc; }
.tile-sottolivello.area-trascina { grid-area: trascina; }

/* Colorazione dei rami: Base oro, Avanzato/Sequenza lilla, P&C/Trascina azzurro.
   Bordo + colore label per riconoscere a colpo d'occhio i 3 rami. */
.tile-sottolivello.ramo-base:not(:disabled)     { border-color: var(--ambra-300); }
.tile-sottolivello.ramo-base:not(:disabled) .tile-label { color: var(--ambra-700); }
.tile-sottolivello.ramo-avanzato:not(:disabled) { border-color: var(--lilla-300); }
.tile-sottolivello.ramo-avanzato:not(:disabled) .tile-label { color: var(--lilla-700); }
.tile-sottolivello.ramo-pc:not(:disabled)       { border-color: #99B8DE; }
.tile-sottolivello.ramo-pc:not(:disabled) .tile-label { color: var(--basso-ink); }

/* Mobile portrait <520px: torno a 1 colonna lineare (override del grid-areas). */
@media (max-width: 520px) and (orientation: portrait) {
  .griglia-sottolivelli.albero {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .griglia-sottolivelli.albero .tile-sottolivello { grid-area: auto; }
}
.tile-label {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lilla-700);
  letter-spacing: -0.01em;
}
.tile-desc {
  font-size: 0.95rem;
  color: var(--ink-500);
  text-align: center;
}
.tile-stelle {
  font-size: 1.8rem;
  letter-spacing: 3px;
  color: var(--ambra-500);
  margin: 6px 0;
  filter: drop-shadow(0 1px 0 var(--ambra-700));
}
.tile-info {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: auto;
  padding: 3px 10px;
  background: var(--lilla-50);
  border-radius: var(--radius-pill);
}
.livello-lock {
  font-size: 0.8rem;
  color: var(--testo-secondario);
  margin-top: 4px;
}

/* =========================================================
   Schermata Esercizio
   ========================================================= */

/* Pentagramma-box leggero: bordo sottile lilla + ombra morbida colorata.
   (Era 3px prugna pieno → troppo "blocco pesante" applicato ovunque.)
   Mobile/tablet: max-width 680px fissa (l'allargamento riduce spazio per
   bottoni nota su schermi piccoli — pessima idea). */
.pentagramma-box {
  position: relative;
  margin: 10px auto 6px;
  padding: 8px 10px;
  background: var(--sfondo-pentagramma);
  border: 1.5px solid var(--lilla-200);
  border-radius: var(--radius-card);
  max-width: 680px;
  width: 100%;
  box-shadow: var(--ombra-1);
}

/* Desktop: pentagramma ~+95% rispetto al mobile (1.95×). Valore fisso, ottimo
   su 1920×1080 a distanza di lettura normale.
   Uso il prefisso `html` per alzare la specificità sopra le regole
   .schermata.esercizio-play .pentagramma-box (760/640) che altrimenti
   vincerebbero per ordine cascade (sono dichiarate più in basso nel file). */
@media (min-width: 1024px) {
  html .pentagramma-box {
    max-width: 1326px;        /* 680 × 1.95 */
  }
  html .schermata.esercizio-play .pentagramma-box,
  html .schermata.esercizio-play .pentagramma-zona {
    max-width: 1482px;        /* 760 × 1.95 */
  }
  html .schermata.esercizio-play .pentagramma-box > *,
  html .schermata.esercizio-play .pentagramma-zona > * {
    max-width: 1248px;        /* 640 × 1.95 */
  }
  html .mini-intro .pentagramma-box {
    max-width: 1404px;        /* 720 × 1.95 */
  }
}

/* Feedback gatto — sostituisce ✅/❌ con la mascotte animata */
.feedback-gatto {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 110px;
  pointer-events: none;
  z-index: 5;
}
.gatto-wrapper {
  position: relative;
  width: 110px;
  height: 138px;
  filter: drop-shadow(0 3px 8px rgba(58, 29, 63, 0.25));
  animation: gatto-entra 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}
.feedback-gatto img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes gatto-entra {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Le animazioni sono sul WRAPPER così occhi/bocca/lacrima seguono il rimbalzo */

/* Stato OK: piccolo rimbalzo */
.feedback-gatto.stato-ok .gatto-wrapper {
  animation: gatto-entra 400ms cubic-bezier(0.34, 1.56, 0.64, 1), gatto-rimbalzo 700ms ease 400ms;
}
@keyframes gatto-rimbalzo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Stato KO: leggero shake */
.feedback-gatto.stato-ko .gatto-wrapper {
  animation: gatto-entra 400ms cubic-bezier(0.34, 1.56, 0.64, 1), gatto-shake 500ms ease 400ms;
}
@keyframes gatto-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* Stato svenuto: il gatto sta fermo, sono gli OCCHI a girare */

/* Stato festa: saltella */
.feedback-gatto.stato-festa .gatto-wrapper {
  animation: gatto-entra 400ms cubic-bezier(0.34, 1.56, 0.64, 1), gatto-festa 500ms ease 400ms infinite;
}
@keyframes gatto-festa {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}


/* Effetti emoji intorno al gatto (per stati OK e festa) */
.gatto-effetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gatto-effetti .eff {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.4rem;
  animation: eff-fluttua 1800ms ease forwards;
  animation-delay: calc(var(--i) * 120ms);
  opacity: 0;
}
@keyframes eff-fluttua {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  30%  { opacity: 1; transform: translate(calc(-50% + cos(var(--angle)) * 50px), calc(-50% + sin(var(--angle)) * 50px)) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + cos(var(--angle)) * 90px), calc(-50% + sin(var(--angle)) * 90px - 30px)) scale(0.7); }
}
.pentagramma-box svg {
  display: block;
  margin: 0 auto;
}

.timer-bar {
  width: 100%;
  max-width: 800px;
  height: 10px;
  background: var(--lilla-100);
  border: 2px solid var(--lilla-200);
  border-radius: 6px;
  overflow: hidden;
  margin: 10px auto 0;
}
.timer-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--lilla-300), var(--lilla-500));
  width: 100%;
}

.risposta-bottoni {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  transition: opacity 200ms ease;
}

/* Durante il "grace period": bottoni attenuati + istruzione pulsa */
.istruzione {
  font-weight: 600;
  transition: color 200ms ease;
}
.istruzione.in-ascolto {
  color: var(--lilla-500);
  animation: istr-pulsa 0.9s ease-in-out infinite;
}
@keyframes istr-pulsa {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

.risposta-bottoni.in-ascolto {
  opacity: 0.35;
  pointer-events: none;
}

/* Layout "piano": diesis sopra, naturali al centro, bemolli sotto —
   posizioni come i tasti del pianoforte. */
.risposta-bottoni.piano {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  grid-template-rows: auto auto auto;
  gap: 6px;
  max-width: 820px;
  margin: 20px auto 0;
  flex-wrap: initial;
}
.risposta-bottoni.piano .btn-nota.naturale { grid-row: 2; }
.risposta-bottoni.piano .btn-nota.diesis   { grid-row: 1; }
.risposta-bottoni.piano .btn-nota.bemolle  { grid-row: 3; }

.risposta-bottoni.piano .btn-nota.naturale[data-risposta="Do"]  { grid-column:  1 / span 4; }
.risposta-bottoni.piano .btn-nota.naturale[data-risposta="Re"]  { grid-column:  5 / span 4; }
.risposta-bottoni.piano .btn-nota.naturale[data-risposta="Mi"]  { grid-column:  9 / span 4; }
.risposta-bottoni.piano .btn-nota.naturale[data-risposta="Fa"]  { grid-column: 13 / span 4; }
.risposta-bottoni.piano .btn-nota.naturale[data-risposta="Sol"] { grid-column: 17 / span 4; }
.risposta-bottoni.piano .btn-nota.naturale[data-risposta="La"]  { grid-column: 21 / span 4; }
.risposta-bottoni.piano .btn-nota.naturale[data-risposta="Si"]  { grid-column: 25 / span 4; }

.risposta-bottoni.piano .btn-nota.diesis[data-risposta="Do♯"]  { grid-column:  3 / span 4; }
.risposta-bottoni.piano .btn-nota.diesis[data-risposta="Re♯"]  { grid-column:  7 / span 4; }
.risposta-bottoni.piano .btn-nota.diesis[data-risposta="Fa♯"]  { grid-column: 15 / span 4; }
.risposta-bottoni.piano .btn-nota.diesis[data-risposta="Sol♯"] { grid-column: 19 / span 4; }
.risposta-bottoni.piano .btn-nota.diesis[data-risposta="La♯"]  { grid-column: 23 / span 4; }

.risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Re♭"]  { grid-column:  3 / span 4; }
.risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Mi♭"]  { grid-column:  7 / span 4; }
.risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Sol♭"] { grid-column: 15 / span 4; }
.risposta-bottoni.piano .btn-nota.bemolle[data-risposta="La♭"]  { grid-column: 19 / span 4; }
.risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Si♭"]  { grid-column: 23 / span 4; }

.btn-nota {
  min-width: 72px;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 14px 18px;
  background: var(--sfondo-pannello);
}

/* Pulsantiera alterazioni: stile "tasti del piano":
   - naturali (Do-Re-Mi…): tasti bianchi/cream rettangolari arrotondati (default)
   - diesis (♯) e bemolli (♭): tasti NERI con scritta bianca, leggermente
     più piccoli dei naturali (come tasti neri di un pianoforte). */
.btn-nota.diesis,
.btn-nota.bemolle {
  font-weight: 700;
  border: 1.5px solid #1A1A1A;
  background: #1A1A1A;
  color: #FFFFFF;
  border-radius: 10px;
  min-height: 38px;          /* leggermente più piccolo di .btn-nota.naturale (48px) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  padding: 4px 6px;
  transition: background 120ms ease, transform 100ms ease;
  box-shadow: var(--ombra-1);
}
.btn-nota.diesis:hover:not(:disabled),
.btn-nota.bemolle:hover:not(:disabled) {
  background: #2A2A2A;
  transform: translateY(-1px);
}
.btn-nota.diesis:active:not(:disabled),
.btn-nota.bemolle:active:not(:disabled) {
  transform: translateY(0);
}
/* Naturali: rombo morbido (quadrato ruotato visivamente via border-radius). */
.risposta-bottoni.piano .btn-nota.naturale {
  background: var(--lilla-50);
  border: 1.5px solid var(--lilla-300);
  border-radius: 14px;
  min-height: 48px;
  font-weight: 700;
}
.risposta-bottoni.piano .btn-nota.naturale:hover:not(:disabled) {
  background: var(--lilla-100);
}
.btn-nota.risposta-giusta {
  background: var(--pastello-verde);
  animation: pulsa-giusta 400ms ease;
}
.btn-nota.risposta-sbagliata {
  background: var(--pastello-rosa);
  animation: scuoti 400ms ease;
}
.btn-nota.risposta-giusta-hint {
  background: var(--pastello-verde);
  animation: pulsa-giusta 800ms ease 200ms;
}
@keyframes pulsa-giusta {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes scuoti {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* =========================================================
   Tutorial a slide
   ========================================================= */

.tutorial {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 0;
}

/* Header compatto ~40px: badge chip a sinistra, "Salta ✕" a destra */
.tutorial-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  height: 40px;
}

.tutorial-badge {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink-500);
  font-size: 0.85rem;
  padding: 4px 14px;
  background: var(--lilla-50);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--lilla-100);
  letter-spacing: 0.01em;
}

.tutorial-salta {
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.tutorial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}

.tutorial-content h1 {
  font-size: 1.7rem;
  margin-bottom: 2px;
}

.tutorial-testo {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.5;
}

.tutorial-testo strong {
  color: var(--lilla-500);
}

.tutorial-content .pentagramma-box {
  margin-top: 6px;
  max-width: 680px;          /* uniformato con le tastiere dei tutorial */
  width: 100%;
}


.tutorial-recap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
  max-width: 720px;
  width: 100%;
}
.recap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--lilla-200);
  border-radius: var(--radius);
}
.recap-item strong { color: var(--lilla-500); }

.tutorial-gatto {
  margin-top: 10px;
}
.tutorial-gatto img {
  width: 140px;
  height: auto;
  animation: onda-leggera 3.2s ease-in-out infinite;
}

/* Narratore: fumetto largo max 680px (linee brevi = lettura agile per bambini),
   famiglio a destra che sporge. */
.tutorial-narratore {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 680px;
  width: 100%;
  margin: 6px auto 10px;
  padding: 0 20px;
  box-sizing: border-box;
}
.narratore-famiglio {
  position: absolute;
  right: -110px;
  bottom: -6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.narratore-famiglio img {
  width: 96px;
  height: auto;
  animation: onda-leggera 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(107, 62, 124, 0.22));
}
.narratore-nome {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lilla-700);
  background: var(--fondo-pannello);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--lilla-200);
  box-shadow: var(--ombra-1);
}
.narratore-fumetto {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  background: var(--lilla-50);
  border: 1.5px solid var(--lilla-200);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--ombra-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-700);
}
.narratore-fumetto::before {
  content: '';
  position: absolute;
  right: -11px;
  bottom: 22px;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid var(--lilla-50);
  z-index: 2;
}
.narratore-fumetto::after {
  content: '';
  position: absolute;
  right: -8px;
  bottom: 24px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--sfondo-pannello);
}
.narratore-fumetto p {
  margin: 0 0 10px 0;
}
.narratore-fumetto p:last-child {
  margin-bottom: 0;
}
.narratore-azioni {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* Con una sola azione (es. "Pronto! 🚀" nella mini-intro) il pulsante va
   centrato — altrimenti space-between lo lascia flush a sinistra. */
.narratore-azioni.azioni-uno { justify-content: center; }
.narratore-btn-prev {
  font-size: 0.9rem;
  padding: 6px 12px;
}
.narratore-btn-next {
  font-size: 0.95rem;
  padding: 8px 16px;
}
/* Su schermi piccoli il gatto non ha spazio esterno → torna inline in basso a destra del fumetto */
@media (max-width: 960px) {
  .narratore-famiglio {
    position: static;
    align-self: flex-end;
    margin: 6px 8px 0 auto;
  }
  .narratore-famiglio img { width: 75px; }
  .narratore-fumetto::before, .narratore-fumetto::after { display: none; }
}

.tutorial-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0 4px;
  border-top: 2px solid var(--lilla-100);
  background: var(--sfondo-app);
}

.tutorial-dots {
  display: flex;
  gap: 10px;
}
.tutorial-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lilla-100);
  border: 2px solid var(--lilla-200);
  transition: all var(--t-fast);
}
.tutorial-dot.visto  { background: var(--lilla-300); border-color: var(--lilla-400); }
.tutorial-dot.attivo { background: var(--lilla-500); border-color: var(--lilla-500); transform: scale(1.3); }

/* =========================================================
   Selettore profili — "Chi sta giocando?"
   ========================================================= */

.griglia-profili {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 28px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Card orizzontale compatta: immagine + info + bottone elimina */
.card-profilo {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: var(--sfondo-pannello);
  border: 3px solid var(--bordo);
  border-radius: var(--radius-card);
  padding: 6px;
  box-shadow: var(--ombra-soft);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.card-profilo:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombra-lift);
}

.card-entra {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: left;
  min-height: 84px;
  font: inherit;
  color: var(--testo-primario);
  cursor: pointer;
  border-radius: calc(var(--radius-card) - 6px);
  transition: background var(--t-fast);
}
.card-entra:hover {
  background: var(--lilla-50);
  transform: none;
  box-shadow: none;
}
.card-entra img {
  flex-shrink: 0;
}

.profilo-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.profilo-nome {
  font-weight: 700;
  font-size: 1.1rem;
}
.profilo-gatto {
  font-size: 0.88rem;
  color: var(--testo-secondario);
}
.profilo-ultima {
  font-size: 0.76rem;
  color: var(--testo-secondario);
}
/* Chip stelle: in fondo alla card-entra (a destra delle info), mostra il
   totale di stelle accumulate dal profilo su tutti i mondi/livelli. */
.profilo-stelle {
  flex-shrink: 0;
  align-self: center;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #422006;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}

.card-elimina {
  flex-shrink: 0;
  padding: 0 14px;
  font-size: 1.4rem;
  background: transparent;
  border: 2px solid var(--lilla-200);
  border-radius: 14px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.card-elimina:hover {
  opacity: 1;
  background: var(--pastello-rosa);
  border-color: var(--bordo);
  transform: scale(1.08);
}

/* Card "nuovo bambino" — stessa forma orizzontale ma tratteggiata */
.card-nuovo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--lilla-50);
  border: 3px dashed var(--bordo);
  border-radius: var(--radius-card);
  box-shadow: var(--ombra-soft);
  font: inherit;
  color: var(--testo-primario);
  cursor: pointer;
  min-height: 96px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.card-nuovo:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombra-lift);
  background: var(--lilla-100);
}
.card-nuovo .profilo-plus {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
  width: 56px;
  text-align: center;
}

/* =========================================================
   Mini-intro prima di ogni livello
   ========================================================= */

.mini-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 20px;
  text-align: center;
}
.mini-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--lilla-700);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
}
/* Su Android landscape stretto la spiegazione deve stare in viewport senza
   scroll: comprimo tutto ulteriormente (titolo, gap, padding). */
@media (max-width: 900px) and (orientation: landscape) {
  .mini-intro {
    gap: 8px;
    padding: 8px 16px 14px;
  }
  .mini-intro h2 { font-size: 1.1rem; }
  .mini-intro .pentagramma-box { max-height: 35vh; }
  .mini-intro .pentagramma-box svg { max-height: 35vh; height: auto; width: 100%; }
  .mini-intro .tutorial-narratore { margin: 0 auto; }
  .mini-intro .narratore-fumetto { padding: 10px 14px; font-size: 0.92rem; line-height: 1.45; }
  .mini-intro .narratore-famiglio img { width: 76px; height: auto; }
  .mini-intro .narratore-famiglio { right: -86px; bottom: -4px; }
}
.mini-intro p {
  max-width: 900px;
  width: 100%;
  font-size: 1.05rem;
  padding: 0 8px;
  box-sizing: border-box;
}
.mini-intro strong {
  color: var(--lilla-500);
}
/* Pentagrammi delle lezioni introduttive — ripensati da zero.
   Principio:
   - HEIGHT FISSA coerente sul device (compatta su mobile, ampia su desktop)
     così le note hanno sempre dimensione leggibile.
   - Se il rigo ha MOLTE note e non entra in larghezza, scroll-x orizzontale
     invece di comprimere tutto.
   - Niente schiacciamento del grand staff. */
.mini-intro .pentagramma-box {
  max-width: 720px;
  width: 100%;
  height: 180px;                /* altezza fissa, leggibile su tablet/desktop */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  overflow-x: auto;              /* scroll-x se le note sono tante */
  overflow-y: hidden;
  box-sizing: border-box;
  text-align: left;
}
.mini-intro .pentagramma-box > * {
  display: block;
  flex: 0 0 auto;                /* non comprime il SVG interno */
  max-height: 100%;
}
.mini-intro .pentagramma-box svg {
  display: block;
  height: 100%;                  /* SVG riempie l'altezza del box */
  width: auto;                   /* width deriva dall'aspect ratio — se ampio, scrolla */
  max-width: none;               /* no limite → i righi lunghi scrollano orizzontalmente */
  max-height: 100%;
}
/* Mobile landscape: altezza ridotta (meno verticale a disposizione). */
@media (max-width: 900px) and (orientation: landscape) {
  .mini-intro .pentagramma-box { height: 120px; }
}
/* Grand staff (mondo piano): serve un filo in più di altezza perché ha 2 righi. */
.mini-intro .pentagramma-box:has(svg[viewBox$="280"]) { height: 200px; }
@media (max-width: 900px) and (orientation: landscape) {
  .mini-intro .pentagramma-box:has(svg[viewBox$="280"]) { height: 140px; }
}
/* Scrollbar orizzontale sottile lilla per il pentagramma scrollable */
.mini-intro .pentagramma-box::-webkit-scrollbar { height: 4px; }
.mini-intro .pentagramma-box::-webkit-scrollbar-thumb {
  background: var(--lilla-300);
  border-radius: 3px;
}
/* (regole mini-intro pentagramma mobile landscape già sopra) */
/* Famigli invisibili su smartphone/tablet touch quando il FAB li ha nascosti
   (body.aiutante-nascosto, default su touch). L'utente può mostrarli cliccando
   🐱 nel menu ⋯: allora la classe viene tolta e questa regola smette di valere. */
@media (max-width: 900px), (pointer: coarse) {
  body.aiutante-nascosto .narratore-famiglio,
  body.aiutante-nascosto .tutorial-home-famiglio,
  body.aiutante-nascosto .gatto-compagno,
  body.aiutante-nascosto .tutorial-narratore .narratore-famiglio { display: none !important; }
  body.aiutante-nascosto .narratore-fumetto::before,
  body.aiutante-nascosto .narratore-fumetto::after { display: none !important; }
  body.aiutante-nascosto .tutorial-narratore { max-width: none !important; padding: 0 !important; }
}
/* Nella mini-intro il fumetto del narratore ha testi un po' lunghi. Allargo
   max-width, riduco padding orizzontale esterno (il gatto resta a destra
   ma più vicino), e comprimo il bottone "Pronto! 🚀" così non mangia verticale. */
.mini-intro .tutorial-narratore {
  max-width: 900px;
  padding: 0 8px;
}
.mini-intro .narratore-fumetto {
  padding: 12px 18px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.mini-intro .narratore-famiglio {
  right: -90px;
}
.mini-intro .narratore-famiglio img {
  width: 82px;
  height: auto;
}
.mini-intro .narratore-azioni button {
  font-size: 0.88rem;
  padding: 6px 14px;
}
.mini-intro .narratore-azioni .primario {
  padding: 7px 20px;
}

/* =========================================================
   Schermata Risultato
   ========================================================= */

.stelline-grandi {
  font-size: 3.5rem;
  letter-spacing: 8px;
  color: var(--stellina-oro);
  margin: 20px 0 8px;
  animation: entra-grande 500ms ease;
}
.stelline-grandi .spenta {
  color: #DFD5D2;
}

/* =========================================================
   Dev shell (placeholder) — rimovibile dopo Fase 1
   ========================================================= */
.dev-shell {
  padding: 80px 24px;
  text-align: center;
}
.dev-shell .logo {
  font-size: clamp(3rem, 10vw, 5rem);
  margin-bottom: 16px;
}
.dev-shell .titolo {
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--testo-primario);
  margin-bottom: 8px;
}
.dev-shell .sottotitolo {
  color: var(--testo-secondario);
  font-size: 1.1rem;
}

/* =========================================================
   Tutorial — esempi grafici (figure ritmiche, barra demo, pentagrammi embed)
   ========================================================= */
.tutorial-figure-grid {
  display: flex;
  flex-wrap: wrap;          /* su mobile vanno a capo: niente più scroll orizzontale */
  justify-content: center;
  gap: 10px;
  margin: 16px 0 8px;
  padding-bottom: 6px;
}
.fig-card {
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 130px;
}
.fig-card .fig-simbolo {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--testo-primario);
}
.fig-card strong {
  font-size: 0.9rem;
  color: var(--testo-primario);
}
.fig-card em {
  font-size: 0.8rem;
  color: var(--testo-secondario);
  font-style: normal;
}
.fig-frazione {
  display: inline-block;
  font-weight: 700;
  color: var(--accento, #8F6899);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.95em;
  padding: 0 4px;
  letter-spacing: 0.5px;
}

/* Slide "I due numeri del tempo" — ispirata MG1+MG2 */
.tutorial-due-numeri {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 660px;
  margin: 8px auto 14px;
  flex-wrap: wrap;
}
.tdn-frazione {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--accento, #8F6899);
  text-align: center;
  line-height: 1;
  min-width: 90px;
}
.tdn-frazione hr {
  border: 0;
  border-top: 3px solid currentColor;
  margin: 4px auto;
  width: 70%;
}
.tdn-sopra { display: block; }
.tdn-sotto { display: block; }
.tdn-spiegone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 240px;
  max-width: 460px;
}
.tdn-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}
.tdn-riga-sopra { background: rgba(143, 104, 153, 0.10); }
.tdn-riga-sotto { background: rgba(216, 189, 225, 0.30); }
.tdn-badge {
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--accento, #8F6899);
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}
.tutorial-formula {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.15rem;
  margin: 8px auto 0;
  padding: 8px 16px;
  background: #FFF8E1;
  border: 2px dashed #E2C97A;
  border-radius: 10px;
  max-width: 540px;
}

/* Esercizio Mondo Tempo · Quanti tempi? (MC 2/3/4) */
.risposta-bottoni-tempo {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 16px 0;
}
.btn-mc-tempo {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.2rem !important;
  font-weight: 700;
  min-width: 80px;
  min-height: 80px;
  padding: 12px 20px !important;
  border-radius: 14px;
}

/* Esercizio V/F */
.risposta-bottoni-vf {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin: 16px 0;
}
.btn-vf {
  font-size: 1.5rem;
  font-weight: 700;
  min-width: 140px;
  min-height: 72px;
  padding: 14px 26px;
  border: 2px solid var(--bordo);
  border-radius: 14px;
  background: var(--sfondo-pannello);
  color: var(--testo);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}
.btn-vf:hover:not(:disabled) { transform: translateY(-2px); }
.btn-vf-vero { color: #2a7d3a; border-color: #2a7d3a; }
.btn-vf-falso { color: #b03030; border-color: #b03030; }
.btn-vf.risposta-giusta { background: #d4f5d4; }
.btn-vf.risposta-sbagliata { background: #f8d4d4; }
.btn-vf:disabled { opacity: 0.6; cursor: default; }

/* Esercizio Completa battuta — bottoni con mini-figura */
.risposta-bottoni-figura {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.btn-figura-mc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 100px;
  border: 2px solid var(--bordo);
  border-radius: 14px;
  background: var(--sfondo-pannello);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.btn-figura-mc:hover:not(:disabled) { transform: translateY(-2px); }
.btn-figura-canvas {
  width: 80px;
  height: 70px;
  pointer-events: none;
}
.btn-figura-label {
  font-size: 0.85rem;
  color: var(--testo-secondario);
}
.btn-figura-mc.risposta-giusta { background: #d4f5d4; border-color: #2a7d3a; }
.btn-figura-mc.risposta-sbagliata { background: #f8d4d4; border-color: #b03030; }
.btn-figura-mc:disabled { opacity: 0.6; cursor: default; }

/* Risposta area generica — host comune per i bottoni e l'overlay esito */
.risposta-area {
  margin-top: 8px;
}

/* Bottoni compatti per riconosci-figura (nomi tipo "semibreve", "pausa-min") */
.risposta-bottoni-nomi {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 16px auto 0;
  flex-wrap: wrap;
  max-width: 640px;
}
.btn-mc-nome {
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 110px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--bordo);
  border-radius: 12px;
  background: var(--sfondo-pannello);
  color: var(--testo);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}
.btn-mc-nome:hover:not(:disabled) { transform: translateY(-1px); }
.btn-mc-nome.risposta-giusta { background: #d4f5d4; border-color: #2a7d3a; }
.btn-mc-nome.risposta-sbagliata { background: #f8d4d4; border-color: #b03030; }
.btn-mc-nome:disabled { opacity: 0.6; cursor: default; }

.tutorial-barra-demo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}
.tutorial-barra-esterna {
  flex: 1;
  height: 22px;
  border: 2px solid var(--bordo);
  border-radius: 12px;
  background: var(--sfondo-pannello);
  overflow: hidden;
}
.tutorial-barra-interna {
  height: 100%;
  background: linear-gradient(90deg, var(--lilla-300), var(--lilla-500));
  border-radius: 10px 0 0 10px;
  width: 0%;
  animation: tutorialBarraDemo 2.8s ease-in-out infinite;
}
.tutorial-barra-etichetta {
  font-size: 0.9rem;
  color: var(--testo-secondario);
  font-weight: 600;
  white-space: nowrap;
}
@keyframes tutorialBarraDemo {
  0%   { width: 0%; }
  45%  { width: 80%; }
  55%  { width: 80%; }
  80%  { width: 0%; }
  100% { width: 0%; }
}

.tutorial-esempio {
  margin: 14px auto;
  padding: 10px;
  background: var(--sfondo-pentagramma, #FFFBF0);
  border: 1.5px solid var(--bordo);
  border-radius: 10px;
  width: 100%;
  max-width: 680px;          /* uniforme con .pentagramma-box e tastiere tutorial */
  box-sizing: border-box;
}
.tutorial-esempio svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Auth — login, registrazione, reset, attesa
   Stile "biglietto illustrato": card su crema, icona chiave di violino
   che galleggia sopra, tipografia display per il titolo.
   ========================================================= */
.auth-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.auth-card {
  position: relative;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: 24px;
  padding: 40px 32px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--ombra-soft);
}
/* (Icona galleggiante rimossa: l'icona c'è già dentro .auth-brand con
   nome e tagline — non serve il duplicato in cima alla card.) */
@media (max-width: 600px) {
  .auth-shell {
    min-height: auto;
    align-items: flex-start;
    padding: 20px 14px 30px;
  }
  .auth-card {
    padding: 22px 18px 16px;
    border-radius: 18px;
  }
  .auth-card::before { display: none; }
  .auth-logo { font-size: 1.3rem; margin-bottom: 4px; }
  .auth-card h1 { font-size: 1.3rem; margin: 0 0 4px; }
  .auth-card .auth-subtitle { font-size: 0.85rem; margin-bottom: 12px; }
  .auth-form label { margin-bottom: 10px; }
  .auth-form label span { font-size: 0.82rem; margin-bottom: 3px; }
  .auth-form input { font-size: 0.95rem; padding: 9px 12px; }
  .auth-form button[type=submit] { padding: 10px; font-size: 0.95rem; }
  .auth-links { margin-top: 10px; font-size: 0.85rem; }
  .password-policy { font-size: 0.76rem; padding: 6px 10px; line-height: 1.35; margin: 4px 0 6px; }
  .auth-error, .auth-info { font-size: 0.8rem; padding: 6px 10px; margin: 4px 0; }
}
/* Auth brand — wrapper a sx con icona grande + nome + tagline.
   Di default è impilato sopra al content. Su max-height:560 diventa
   colonna sx affiancata al content (2-colonne). */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 18px;
  background: linear-gradient(145deg, var(--lilla-100) 0%, var(--ambra-100) 100%);
  border-radius: 16px;
  margin-bottom: 14px;
  text-align: center;
}
.auth-brand-icon {
  width: 76px;
  height: 76px;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(107, 62, 124, 0.22));
}
.auth-brand-nome {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--lilla-700);
  letter-spacing: -0.02em;
  line-height: 1;
}
.auth-brand-tag {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.3;
}

/* 2-colonne quando lo schermo è corto verticalmente */
@media (max-height: 560px) {
  .auth-shell {
    min-height: auto;
    align-items: center;
    padding: 4px 14px;
  }
  .auth-card {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 1.4fr;
    column-gap: 0;
    row-gap: 0;
    padding: 0;
    border-radius: 18px;
    max-width: 660px;
    overflow: hidden;
    align-items: stretch;
    position: relative;              /* anchor per la policy tooltip */
  }
  .auth-card::before { display: none; }

  .auth-brand {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    border-radius: 0;
    padding: 12px 14px;
    height: 100%;
    gap: 4px;
    justify-content: center;         /* brand centrato di default (login, reset) */
  }
  /* In registrazione il brand si sposta in alto per lasciare spazio alla
     policy tooltip nella colonna sx. */
  .auth-card:has(#form-reg) .auth-brand {
    justify-content: flex-start;
    padding-top: 12px;
  }
  .auth-brand-icon { width: 54px; height: 54px; }
  .auth-brand-nome { font-size: 1.2rem; }
  .auth-brand-tag  { font-size: 0.72rem; line-height: 1.25; }

  .auth-content {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
  }
  .auth-content .auth-subtitle {
    font-size: 0.76rem;
    margin: 0 0 8px;
    line-height: 1.3;
  }
  .auth-form label { margin-bottom: 5px; }
  .auth-form label span {
    font-size: 0.72rem;
    margin-bottom: 2px;
  }
  .auth-form input {
    font-size: 0.88rem;
    padding: 5px 12px;
  }
  .auth-form button[type=submit] {
    padding: 7px;
    font-size: 0.9rem;
    margin-top: 2px;
  }
  .auth-links {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px dashed var(--lilla-200);
    font-size: 0.76rem;
    text-align: center;
  }
  /* Policy password come tooltip centrato nello spazio vuoto della colonna
     sinistra sotto il brand. Left 20% = metà della colonna sx (che è ~40%),
     top 62% sotto il brand verticalmente; translate centra sul punto. */
  .password-policy { display: none; }
  .auth-card:has(input[name="password"]:focus) .password-policy,
  .auth-card:has(input[name="password2"]:focus) .password-policy {
    display: block;
    position: absolute;
    z-index: 20;
    left: 20%;
    top: 62%;
    transform: translate(-50%, -50%);
    width: calc(40% - 24px);
    max-width: 200px;
    background: var(--fondo-pannello);
    border: 1.5px solid var(--lilla-300);
    box-shadow: var(--ombra-soft);
    padding: 7px 11px;
    font-size: 0.7rem;
    line-height: 1.3;
    border-radius: 10px;
    margin: 0;
  }
  .auth-error, .auth-info {
    font-size: 0.76rem;
    padding: 4px 10px;
    margin: 4px 0 0;
  }
  .input-pwd-wrap input { padding-right: 36px !important; }
  .btn-eye { width: 26px; height: 26px; right: 4px; }
  .btn-eye .icon svg { width: 16px; height: 16px; }

}
.auth-card h1 {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--lilla-700);
  letter-spacing: -0.02em;
}
.auth-card .auth-subtitle {
  text-align: center;
  color: var(--ink-500);
  margin: 0 0 22px;
  font-size: 0.95rem;
}
.auth-logo {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--lilla-500);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.auth-form label {
  display: block;
  margin-bottom: 14px;
}
.auth-form label span {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 5px;
  color: var(--ink-700);
}
.auth-form input {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid var(--lilla-200);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--fondo-card);
  color: var(--ink-700);
  box-sizing: border-box;
  transition: border-color 120ms, box-shadow 120ms;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--lilla-500);
  box-shadow: 0 0 0 4px var(--lilla-50);
}

/* Password con occhio per show/hide: wrapper + bottone assoluto a destra */
.input-pwd-wrap {
  position: relative;
}
.input-pwd-wrap input {
  padding-right: 44px !important;
}
.btn-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.btn-eye:hover:not(:disabled) {
  background: var(--lilla-50);
  color: var(--lilla-700);
  box-shadow: none;
  transform: translateY(-50%);
}
.btn-eye .icon svg { width: 20px; height: 20px; }
.auth-form button[type=submit] {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  font-size: 1rem;
}
.auth-error {
  color: var(--ko-ink);
  background: var(--ko-bg);
  border: 1.5px solid var(--ko-500);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 8px 0;
  font-size: 0.9rem;
  min-height: 0;
  display: none;
}
.auth-error:not(:empty) { display: block; }
.auth-info {
  color: var(--ok-ink);
  background: var(--ok-bg);
  border: 1.5px solid var(--ok-500);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 8px 0;
  font-size: 0.9rem;
  display: none;
}
.auth-info:not(:empty) { display: block; }
.auth-links {
  margin-top: 18px;
  text-align: center;
  font-size: 0.9rem;
}
.auth-links a {
  color: var(--lilla-700);
  text-decoration: none;
  font-weight: 600;
}
.auth-links a:hover { text-decoration: underline; }
.auth-sep { margin: 0 8px; color: var(--ink-300); }
.auth-bottoni-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.password-policy {
  list-style: none;
  padding: 10px 14px;
  margin: 8px 0 12px;
  background: var(--fondo-card);
  border: 1.5px dashed var(--lilla-200);
  border-radius: 12px;
  font-size: 0.85rem;
}
.password-policy li {
  padding: 2px 0;
  color: var(--ink-500);
}
.password-policy li.ok { color: var(--ok-ink); font-weight: 600; }
.password-policy li.ok::before { content: '✓ '; color: var(--ok-500); }
.password-policy li.ko { color: var(--ink-500); }
.password-policy li.ko::before { content: '○ '; color: var(--ink-300); }

/* =========================================================
   Badge account (in alto a destra, sempre visibile)
   ========================================================= */
.account-badge {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sfondo-pannello);
  border: 1.5px solid var(--bordo);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(58, 29, 63, 0.06);
}
.account-email {
  color: var(--testo-secondario);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-admin-link {
  background: var(--lilla-200);
  color: var(--lilla-700);
  text-decoration: none;
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 0.95rem;
  line-height: 1;
}
.account-admin-link:hover { background: var(--lilla-300); }
.account-logout {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 1rem;
  color: var(--testo-secondario);
  border-radius: 8px;
}
.account-logout:hover { background: var(--lilla-100); color: var(--testo-primario); }

/* =========================================================
   Admin panel
   ========================================================= */
.admin-shell {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-header h1 {
  margin: 0;
  color: var(--testo-primario);
}
.admin-header-actions {
  display: flex;
  gap: 8px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.admin-stat-card {
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}
.admin-stat-card.alert {
  background: #FFF5E0;
  border-color: #E8A900;
}
.admin-stat-card strong {
  display: block;
  font-size: 2rem;
  color: var(--testo-primario);
  line-height: 1;
}
.admin-stat-card span {
  color: var(--testo-secondario);
  font-size: 0.85rem;
}

.admin-sezione {
  margin-bottom: 28px;
}
.admin-sezione h2 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: var(--testo-primario);
}
.admin-sez-count {
  background: var(--lilla-200);
  color: var(--lilla-700);
  border-radius: 10px;
  padding: 2px 9px;
  font-size: 0.85rem;
  margin-left: 6px;
}

.admin-tabella {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-riga {
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 6px 16px;
  align-items: center;
}
.admin-stats-zona {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Sezione config tempi (admin) */
.admin-config {
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.admin-config h2 { margin: 0 0 4px; font-size: 1rem; }
.admin-config-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.admin-config-griglia label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* input allineati in basso anche se label va a capo */
  gap: 4px;
  font-size: 0.85rem;
  color: var(--ink-500);
}
.admin-config-griglia input {
  padding: 6px 10px;
  border: 1.5px solid var(--lilla-200);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--fondo-pannello);
  width: 100%;
  box-sizing: border-box;
}
#cfg-status { margin-left: 10px; font-size: 0.85rem; }
.admin-stats-zona:empty { display: none; }
.admin-stats-card {
  background: var(--lilla-50, #FAF4FA);
  border: 1.5px solid var(--lilla-200);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 8px;
}
.admin-stats-titolo {
  font-weight: 700;
  color: var(--testo-secondario);
  margin-bottom: 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.admin-profilo {
  background: var(--sfondo-pannello);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.admin-profilo:last-child { margin-bottom: 0; }
.admin-profilo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin-profilo-tot {
  margin-left: auto;
  font-weight: 700;
  color: var(--ambra-700, var(--testo-primario));
}
.admin-mondi {
  margin: 4px 0 0 16px;
  padding: 0;
  font-size: 0.88rem;
}
.admin-mondi li { margin: 2px 0; }
.admin-email {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.admin-email strong {
  color: var(--testo-primario);
  margin-right: 4px;
}
.admin-meta {
  grid-column: 1;
  grid-row: 2;
  color: var(--testo-secondario);
  font-size: 0.8rem;
}
.admin-azioni {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-azioni button {
  font-size: 0.85rem;
  padding: 6px 10px;
}

.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}
.admin-badge.me       { background: var(--lilla-600); color: white; }
.admin-badge.admin    { background: #E8A900; color: white; }
.admin-badge.verified { background: #E8F6ED; color: #1E7A4A; border: 1px solid #A8DBBD; }
.admin-badge.unverified { background: #FDECEC; color: #C44040; border: 1px solid #E8A0A0; }
.admin-badge.approved { background: #E8F6ED; color: #1E7A4A; border: 1px solid #A8DBBD; }
.admin-badge.pending  { background: #FFF5E0; color: #8B6600; border: 1px solid #E8C98A; }

@media (max-width: 600px) {
  .admin-riga {
    grid-template-columns: 1fr;
  }
  .admin-azioni {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }
}

/* Navigazione fine tutorial (sotto il content, dopo narratore in alto) */
.tutorial-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 820px;
  width: 100%;
  margin: 24px auto 8px;
  padding: 0 20px;
  box-sizing: border-box;
}
.tutorial-nav button {
  font-size: 0.95rem;
  padding: 8px 16px;
}

/* Titolo fuori dal content, sopra il narratore */
.tutorial-titolo {
  max-width: 820px;
  width: 100%;
  margin: 12px auto 4px;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.7rem;
  color: var(--testo-primario);
}

/* Coppia di esempi impilati (es. Sol sopra, Fa sotto) — uno sopra l'altro
   così ciascun pentagramma può occupare tutta la larghezza disponibile. */
.tutorial-esempio-coppia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.tutorial-esempio-coppia > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tutorial-esempio-etichetta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--testo-primario);
  margin-bottom: 4px;
  text-align: center;
}

/* Bottoni Risuona + Avanti nel feedback KO dell'Orecchio */
.risposta-bottoni.feedback-ko {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.risposta-bottoni.feedback-ko .btn-grande {
  min-width: 160px;
}

/* =========================================================
   Blocco schermi piccoli: l'app richiede schermo desktop pieno
   ========================================================= */
#solo-desktop-blocco {
  display: none;
}
/* Il blocco NON si applica quando siamo in schermate di auth (login/registrazione/attesa),
   che devono restare usabili anche su smartphone in portrait. */
body.auth-view #solo-desktop-blocco { display: none !important; }
body.auth-view { overflow: auto !important; }
body.auth-view #app { filter: none !important; pointer-events: auto !important; }

/* Blocco solo in portrait stretto — in landscape (anche su smartphone con modalità
   desktop) l'app è usabile. */
@media (max-width: 900px) and (orientation: portrait) {
  #solo-desktop-blocco {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(58, 29, 63, 0.94);
    color: #FFFBF0;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #solo-desktop-blocco .blocco-contenuto {
    max-width: 420px;
    background: var(--sfondo-pannello, #FFFBF0);
    color: var(--testo-primario, #3A1D3F);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }
  #solo-desktop-blocco .blocco-emoji {
    font-size: 3rem;
    margin-bottom: 12px;
    line-height: 1;
  }
  #solo-desktop-blocco h1 {
    margin: 0 0 14px;
    font-size: 1.4rem;
    color: var(--testo-primario, #3A1D3F);
  }
  #solo-desktop-blocco p {
    margin: 8px 0;
    line-height: 1.5;
  }
  #solo-desktop-blocco .secondario {
    opacity: 0.75;
    font-size: 0.88rem;
  }
  /* Nasconde app sotto e disabilita scroll body per chi prova a ignorare */
  body { overflow: hidden; }
  #app { filter: blur(3px); pointer-events: none; }
  /* Anche il badge account in alto va nascosto altrimenti buca l'overlay */
  #account-badge { display: none; }
}

/* =========================================================
   Tutorial Ritmo — misura 4/4 + Ascolta con pattern
   ========================================================= */
.tutorial-misura {
  display: flex;
  gap: 22px;
  align-items: center;
  max-width: 640px;
  margin: 10px auto;
  padding: 14px 18px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}
.misura-frazione {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--testo-primario);
  text-align: center;
  line-height: 1;
}
.misura-frazione hr {
  border: none;
  border-top: 3px solid var(--testo-primario);
  margin: 4px 0;
}
.misura-testo {
  flex: 1;
  text-align: left;
}
.misura-testo p { margin: 0 0 8px; }
.misura-esempi {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
}
.misura-esempi li { font-family: 'Courier New', monospace; }
@media (max-width: 640px) {
  .tutorial-misura { flex-direction: column; align-items: stretch; }
  .misura-testo { text-align: center; }
}

.tutorial-ascolta-wrap .ascolta-pattern-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: 12px auto;
}
.ascolta-pattern {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  transition: all 200ms;
}
.ascolta-pattern.attivo {
  border-color: var(--lilla-500);
  background: var(--lilla-50);
  transform: scale(1.02);
}
.ascolta-pattern-info {
  flex: 1;
  text-align: left;
}
.ascolta-pattern-simboli {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 4px;
}
.ascolta-pattern-nome {
  color: var(--testo-primario);
  font-size: 0.95rem;
}
.ascolta-pattern-desc {
  color: var(--testo-secondario);
  font-size: 0.82rem;
}
.ascolta-pattern .btn-ascolta {
  flex-shrink: 0;
}

/* Ascolta pattern ritmici con pentagramma + barra progresso */
.ascolta-pentagramma {
  background: var(--sfondo-pentagramma, #FFFBF0);
  border: 1.5px solid var(--bordo);
  border-radius: 8px;
  padding: 4px;
  margin: 6px 0;
}
.ascolta-pentagramma svg {
  display: block;
  max-width: 100%;
  height: auto;
}
/* Evidenziazione "nota in riproduzione" è gestita inline da JS (setTimeout
   sincronizzato con l'attacco audio): coloraNota(el, colore) scrive direttamente
   style.fill/style.stroke sui <path|ellipse|rect|line> figli del <g> VexFlow. */

/* Figure ritmiche isolate (no più unicode, ora SVG VexFlow) */
.fig-pentagramma {
  width: 90px;
  margin: 0 auto 4px;
}
.fig-pentagramma svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Metafora torta per introdurre le frazioni delle note */
.torta-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: center;
  margin: 14px 0;
  overflow-x: auto;
  padding-bottom: 6px;
}
.torta-card {
  flex: 0 0 auto;
  min-width: 110px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.torta-card strong { font-size: 0.9rem; color: var(--testo-primario); }
.torta-card em {
  font-size: 0.78rem;
  color: var(--testo-secondario);
  font-style: normal;
  line-height: 1.3;
}
.torta {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  position: relative;
  border: 2px solid var(--bordo);
  overflow: hidden;
}
.torta-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--testo-primario);
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
  font-size: 1.3rem;
}
.torta-1 { background: var(--lilla-300, #D8BDE1); }
.torta-2 {
  background: conic-gradient(var(--lilla-300, #D8BDE1) 0 180deg, var(--lilla-500, #8F6899) 180deg 360deg);
}
.torta-4 {
  background: conic-gradient(
    var(--lilla-300, #D8BDE1) 0 90deg,
    var(--lilla-500, #8F6899) 90deg 180deg,
    var(--lilla-300, #D8BDE1) 180deg 270deg,
    var(--lilla-500, #8F6899) 270deg 360deg
  );
}
.torta-8 {
  background: conic-gradient(
    var(--lilla-300, #D8BDE1) 0 45deg,
    var(--lilla-500, #8F6899) 45deg 90deg,
    var(--lilla-300, #D8BDE1) 90deg 135deg,
    var(--lilla-500, #8F6899) 135deg 180deg,
    var(--lilla-300, #D8BDE1) 180deg 225deg,
    var(--lilla-500, #8F6899) 225deg 270deg,
    var(--lilla-300, #D8BDE1) 270deg 315deg,
    var(--lilla-500, #8F6899) 315deg 360deg
  );
}
.torta-16 {
  background: conic-gradient(
    var(--lilla-300, #D8BDE1) 0 22.5deg,
    var(--lilla-500, #8F6899) 22.5deg 45deg,
    var(--lilla-300, #D8BDE1) 45deg 67.5deg,
    var(--lilla-500, #8F6899) 67.5deg 90deg,
    var(--lilla-300, #D8BDE1) 90deg 112.5deg,
    var(--lilla-500, #8F6899) 112.5deg 135deg,
    var(--lilla-300, #D8BDE1) 135deg 157.5deg,
    var(--lilla-500, #8F6899) 157.5deg 180deg,
    var(--lilla-300, #D8BDE1) 180deg 202.5deg,
    var(--lilla-500, #8F6899) 202.5deg 225deg,
    var(--lilla-300, #D8BDE1) 225deg 247.5deg,
    var(--lilla-500, #8F6899) 247.5deg 270deg,
    var(--lilla-300, #D8BDE1) 270deg 292.5deg,
    var(--lilla-500, #8F6899) 292.5deg 315deg,
    var(--lilla-300, #D8BDE1) 315deg 337.5deg,
    var(--lilla-500, #8F6899) 337.5deg 360deg
  );
}

/* Slide BPM — scala velocità (Largo / Adagio / Andante / Moderato / Allegro / Prestissimo) */
.bpm-scala {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 760px;
  width: 100%;
  margin: 10px auto;
  padding: 0 6px;
}
.bpm-card {
  flex: 1 1 90px;
  min-width: 86px;
  max-width: 170px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bpm-card .bpm-emoji { font-size: 1.5rem; line-height: 1; }
.bpm-card strong {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--lilla-700);
}
.bpm-card em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-700);
}
.bpm-card span {
  font-size: 0.7rem;
  color: var(--testo-secondario);
  line-height: 1.15;
}
@media (min-width: 560px) {
  .bpm-scala { gap: 10px; padding: 0 8px; }
  .bpm-card { padding: 10px 8px; }
  .bpm-card .bpm-emoji { font-size: 1.8rem; }
  .bpm-card strong { font-size: 1rem; }
  .bpm-card em { font-size: 0.88rem; }
  .bpm-card span { font-size: 0.76rem; }
}

/* Slide metronomo del tutorial Ritmo */
.tutorial-metronomo-box {
  display: flex;
  gap: 20px;
  align-items: center;
  max-width: 640px;
  margin: 10px auto;
  padding: 14px 18px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}
.metronomo-icona {
  font-size: 3rem;
  line-height: 1;
}
.metronomo-icona .icon svg { width: 64px; height: 64px; }
/* Oscilla SOLO l'asta+peso attorno al perno in basso (128,198 nel viewBox 256),
   così il corpo del metronomo resta fermo e dritto. */
.metronomo-icona .metronome-asta {
  transform-box: view-box;
  transform-origin: 128px 198px;
  animation: metronomo-oscilla 1.2s ease-in-out infinite;
}
@keyframes metronomo-oscilla {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
.metronomo-testo { flex: 1; text-align: left; }
.metronomo-testo p { margin: 0 0 8px; }
.metronomo-testo p:last-child { margin-bottom: 0; }

/* Bottoni velocità metronomo (60 / 90 / 120 / 160 / 200 bpm) su unica riga */
.metronomo-bpm-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: center;
  max-width: 620px;
  width: 100%;
  margin: 4px auto 0;
  padding: 0 6px;
}
.btn-bpm {
  flex: 1 1 0;
  min-width: 0;
  max-width: 120px;
  padding: 7px 3px;
  background: var(--fondo-pannello);
  border: 2px solid var(--lilla-300);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: transform 120ms, border-color 160ms, background 160ms, box-shadow 160ms;
  overflow: hidden;
}
.btn-bpm:hover { transform: translateY(-1px); border-color: var(--lilla-500); }
.btn-bpm .bpm-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lilla-700);
  line-height: 1;
}
.btn-bpm em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--testo-secondario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.btn-bpm.attivo {
  background: linear-gradient(180deg, var(--ambra-100) 0%, var(--ambra-200) 100%);
  border-color: var(--ambra-500);
  box-shadow: 0 3px 10px rgba(184, 134, 0, 0.28);
}
.btn-bpm.attivo .bpm-num { color: var(--ink-700); }
.metronomo-stop-wrap {
  text-align: center;
  margin-top: 10px;
}
@media (min-width: 560px) {
  .metronomo-bpm-btns { gap: 8px; padding: 0 8px; }
  .btn-bpm { padding: 8px 6px; }
  .btn-bpm .bpm-num { font-size: 1.15rem; }
  .btn-bpm em { font-size: 0.78rem; }
}

@media (max-width: 640px) {
  .tutorial-metronomo-box { flex-direction: column; align-items: stretch; }
  .metronomo-testo { text-align: center; }
}

/* Card input nel tutorial Tieni Premuto (computer vs pianola) */
.tutorial-input-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  justify-content: center;
  max-width: 640px;
  margin: 14px auto 8px;
}
.input-opzione {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
  text-align: left;
}
.input-opzione-icona {
  font-size: 2.4rem;
  line-height: 1;
}
.input-opzione-sep {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--testo-secondario);
  font-size: 0.88rem;
  text-transform: uppercase;
}
.input-opzione kbd {
  display: inline-block;
  background: var(--sfondo-app);
  border: 1.5px solid var(--bordo);
  border-bottom-width: 2.5px;
  border-radius: 4px;
  padding: 1px 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}
@media (max-width: 560px) {
  .tutorial-input-card { flex-direction: column; }
}

/* Slide raffronto: pentagramma + torta lato a lato */
.raffronto-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}
.raffronto-riga {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--sfondo-pannello);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}
.raffronto-pentagramma {
  background: var(--sfondo-pentagramma, #FFFBF0);
  border-radius: 8px;
  padding: 2px;
}
.raffronto-pentagramma svg { display: block; max-width: 100%; height: auto; }
.raffronto-freccia {
  font-size: 1.4rem;
  color: var(--testo-secondario);
}
.raffronto-torta {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.torta-linee {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.raffronto-tempo-alt {
  background: linear-gradient(to right, #F7ECF7, var(--sfondo-pannello));
}
.torta-fetta-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: var(--testo-primario);
  text-shadow: 0 0 3px rgba(255,255,255,0.9);
  pointer-events: none;
}
.raffronto-etichetta {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--testo-primario);
}
@media (max-width: 600px) {
  .raffronto-riga {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .raffronto-freccia { display: none; }
  .raffronto-etichetta { grid-column: 1 / -1; text-align: center; }
}

/* =========================================================
   Gatto consigliere in home (banner sopra griglia mondi)
   ========================================================= */
.home-consiglio {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 820px;
  margin: 12px auto 20px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #F7ECF7 0%, #FFFBF0 100%);
  border: 2px solid var(--lilla-400, #A886B2);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(107, 62, 124, 0.12);
}
.home-consiglio-gatto {
  flex-shrink: 0;
  width: 80px;
  height: auto;
  animation: onda-leggera 3.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(58, 29, 63, 0.2));
}
.home-consiglio-corpo {
  flex: 1;
  text-align: left;
}
.home-consiglio-titolo {
  font-weight: 700;
  color: var(--lilla-700, #6B3E7C);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.home-consiglio-testo {
  margin: 0 0 10px;
  line-height: 1.45;
  color: var(--testo-primario);
}
.home-consiglio-btn {
  font-size: 0.95rem;
  padding: 8px 18px;
}
@media (max-width: 640px) {
  .home-consiglio {
    flex-direction: column;
    text-align: center;
  }
  .home-consiglio-corpo { text-align: center; }
}

/* Suggerimento laterale post-livello (nel narratore del risultato) */
.sugg-laterale {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--lilla-100, #F0E5F2);
  border-left: 3px solid var(--lilla-500, #8F6899);
  border-radius: 4px;
  color: var(--testo-primario);
  font-size: 0.92rem;
}

/* =========================================================
   Tutorial Home — modale in sovraimpressione
   ========================================================= */
.tutorial-home-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(58, 29, 63, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in 260ms ease;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tutorial-home-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: var(--sfondo-pannello);
  border: 3px solid var(--lilla-400, #A886B2);
  border-radius: 24px;
  padding: 28px 28px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  text-align: center;
  animation: slide-up 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tutorial-home-passo {
  position: absolute;
  top: 12px;
  left: 18px;
  font-size: 0.78rem;
  color: var(--testo-secondario);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.tutorial-home-salta {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--testo-secondario);
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}
.tutorial-home-salta:hover {
  background: var(--lilla-100);
  color: var(--testo-primario);
}
.tutorial-home-emoji {
  font-size: 3.4rem;
  margin: 6px 0 10px;
  line-height: 1;
}
.tutorial-home-titolo {
  margin: 0 0 10px;
  font-size: 1.35rem;
  color: var(--testo-primario);
}
.tutorial-home-testo {
  margin: 0 0 16px;
  line-height: 1.55;
  color: var(--testo-primario);
  font-size: 0.98rem;
}
.tutorial-home-famiglio {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.tutorial-home-famiglio img {
  width: 90px;
  height: auto;
  animation: onda-leggera 3.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(58, 29, 63, 0.2));
}
.tutorial-home-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.tutorial-home-nav button { font-size: 0.92rem; padding: 7px 14px; }
.tutorial-home-puntini {
  display: flex;
  gap: 5px;
}
.puntino {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lilla-200);
  transition: all 180ms;
}
.puntino.visto { background: var(--lilla-400); }
.puntino.attivo {
  background: var(--lilla-600);
  transform: scale(1.3);
}

/* =========================================================
   Tutorial Home — TOUR overlay-spotlight (v2: backdrop + box-shadow inset)
   ========================================================= */
/* Backdrop scuro full-screen: cattura i click fuori dallo spotlight (chiude).
   z-index 2000 sotto allo spotlight (2001) e al fumetto (2002). */
.th-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 24, 0.55);
  z-index: 2000;
  pointer-events: auto;
  animation: fade-in 240ms ease;
}
/* Spotlight: box trasparente con box-shadow inset gigante che "buca" il
   backdrop. Risultato: il riquadro è chiaro, intorno è scuro. */
.th-spotlight {
  position: fixed;
  z-index: 2001;
  background: transparent;
  border: 2px solid var(--ambra-500);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(20, 12, 24, 0.62), 0 0 0 4px rgba(255, 211, 105, 0.45);
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}
/* (Nascondo il vecchio backdrop SVG se tutorial-home-tour DOM non esiste più) */
.tutorial-home-tour {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: auto;
  animation: fade-in 240ms ease;
}
.th-maschera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.th-maschera #th-buco,
.th-maschera #th-ring {
  transition: x 280ms ease, y 280ms ease, width 280ms ease, height 280ms ease;
}
.th-fumetto {
  position: fixed;
  z-index: 2002;
  max-width: 360px;
  width: calc(100vw - 24px);
  background: var(--fondo-pannello);
  border: 2px solid var(--lilla-500, #8F6899);
  border-radius: 16px;
  padding: 14px 18px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  text-align: left;
  pointer-events: auto;
  transition: top 220ms ease, left 220ms ease;
  font-family: var(--font-body);
}
.th-fumetto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.th-fumetto-prog {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lilla-700);
  background: var(--lilla-50);
  padding: 3px 10px;
  border-radius: 999px;
}
.th-fumetto-skip {
  width: 28px; height: 28px;
  padding: 0;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ink-500, var(--testo-secondario));
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.th-fumetto-skip svg { width: 14px; height: 14px; }
.th-fumetto-skip:hover {
  background: var(--lilla-50);
  border-color: var(--lilla-200);
  color: var(--lilla-700);
}
.th-fumetto-titolo {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--lilla-700);
}
.th-fumetto-testo {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-700);
}
.th-fumetto-nav {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.th-fumetto-nav button {
  flex: 1;
  padding: 7px 12px;
  font-size: 0.88rem;
}
.th-fumetto.th-fumetto-centrato {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.th-passo {
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 0.74rem;
  color: var(--testo-secondario);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.th-chiudi {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ink-500, var(--testo-secondario));
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.th-chiudi svg { width: 16px; height: 16px; display: block; }
.th-chiudi:hover {
  background: var(--lilla-50);
  border-color: var(--lilla-200);
  color: var(--lilla-700);
}
.th-chiudi:active { transform: scale(0.94); }
.th-emoji {
  font-size: 2.6rem;
  margin: 10px 0 6px;
  line-height: 1;
}
.th-titolo {
  margin: 0 0 8px;
  font-size: 1.18rem;
  color: var(--testo-primario);
}
.th-testo {
  margin: 0 0 14px;
  line-height: 1.5;
  color: var(--testo-primario);
  font-size: 0.94rem;
}
.th-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.th-nav button {
  font-size: 0.9rem;
  padding: 6px 12px;
}
.th-puntini {
  display: flex;
  gap: 5px;
}

.th-famiglio {
  display: flex;
  justify-content: center;
  margin: 8px 0 10px;
}
.th-famiglio img {
  width: 100px;
  height: auto;
  animation: onda-leggera 3.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(58, 29, 63, 0.25));
}

/* =========================================================
   Mappa Mondi × Lezioni — overlay modale
   ========================================================= */
.mappa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 29, 63, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 220ms ease;
}
.mappa-card {
  background: var(--sfondo-pannello);
  border: 3px solid var(--lilla-500);
  border-radius: 22px;
  padding: 24px 28px;
  max-width: 960px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
}
/* Pulsante chiudi modale: SVG icona x via window.SolFaMi.icona('x'),
   square con angoli arrotondati che combaciano col design system del resto
   delle icon-btn. Hover sobrio (nessuno cerchio appariscente). */
.mappa-chiudi {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-500, var(--testo-secondario));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.mappa-chiudi svg {
  width: 18px;
  height: 18px;
  display: block;
}
.mappa-chiudi:hover {
  background: var(--lilla-50);
  border-color: var(--lilla-200);
  color: var(--lilla-700);
}
.mappa-chiudi:active { transform: scale(0.94); }
.mappa-chiudi:focus-visible {
  outline: none;
  border-color: var(--lilla-500);
  background: var(--lilla-50);
}
.mappa-card h2 { margin: 0 0 4px; color: var(--testo-primario); }
.mappa-intro { margin: 0 0 16px; font-size: 0.92rem; }

.mappa-tabella-wrap {
  overflow-x: auto;
  border: 2px solid var(--bordo);
  border-radius: 14px;
  background: var(--sfondo-app);
}
.mappa-tabella {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
}
.mappa-tabella th, .mappa-tabella td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid var(--lilla-100);
  border-right: 1px solid var(--lilla-100);
}
.mappa-tabella tr:last-child th,
.mappa-tabella tr:last-child td { border-bottom: none; }
.mappa-tabella th:last-child,
.mappa-tabella td:last-child { border-right: none; }
.mappa-angolo {
  font-size: 0.78rem;
  color: var(--testo-secondario);
  font-weight: 600;
  text-align: left !important;
  background: var(--lilla-50, #F7ECF7);
}
.mappa-livello {
  font-size: 0.85rem;
  color: var(--testo-primario);
  background: var(--lilla-50, #F7ECF7);
  min-width: 56px;
}
.mappa-mondo {
  text-align: left !important;
  padding-left: 14px !important;
  white-space: nowrap;
  background: var(--sfondo-pannello);
}
.mappa-mondo-emoji { font-size: 1.15rem; margin-right: 6px; }
.mappa-mondo-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--testo-primario);
}

.mappa-cella {
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 140ms;
  color: #E8A900;
  letter-spacing: 1px;
}
.mappa-cella:hover { background: var(--lilla-100); }
.mappa-cella.max   { background: #E8F6ED; color: #E8A900; }
.mappa-cella.ok    { background: #F0E5F2; color: #E8A900; }
.mappa-cella.parz  { background: #FFF5E0; color: #C77D3B; }
.mappa-cella.aperta {
  color: var(--lilla-500);
  font-size: 1.2rem;
  background: #FFFBF0;
}
.mappa-cella.bloccata {
  color: #B0A7AE;
  cursor: default;
  background: #F5F0F5;
}
.mappa-cella.bloccata:hover { background: #F5F0F5; }
.mappa-cella.vuota {
  color: #CBC2CA;
  cursor: default;
  background: #FAF7FA;
}
.mappa-cella.vuota:hover { background: #FAF7FA; }

.mappa-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  margin: 14px 0 18px;
  font-size: 0.82rem;
  color: var(--testo-secondario);
}
.mappa-legenda .lg {
  font-style: normal;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-right: 4px;
}
.mappa-legenda .lg-max     { background: #E8F6ED; color: #E8A900; }
.mappa-legenda .lg-ok      { background: #F0E5F2; color: #E8A900; }
.mappa-legenda .lg-parz    { background: #FFF5E0; color: #C77D3B; }
.mappa-legenda .lg-aperta  { background: #FFFBF0; color: var(--lilla-500); }
.mappa-legenda .lg-bloccata{ background: #F5F0F5; color: #7A6E74; }

.mappa-sub {
  margin: 18px 0 10px;
  font-size: 1.02rem;
  color: var(--testo-primario);
}
.mappa-ritmo-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mappa-ritmo-cella {
  min-width: 70px;
  padding: 8px 10px;
  border: 2px solid var(--bordo);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  background: var(--sfondo-pannello);
}
.mappa-ritmo-cella:hover { background: var(--lilla-100); }
.mappa-ritmo-cella.max  { background: #E8F6ED; border-color: #3D8F3D; }
.mappa-ritmo-cella.ok   { background: #F0E5F2; border-color: var(--lilla-400); }
.mappa-ritmo-cella.parz { background: #FFF5E0; border-color: #E8A900; }
.mappa-ritmo-cella.bloccata {
  background: #F5F0F5;
  color: #B0A7AE;
  cursor: default;
  border-color: #CBC2CA;
}
.mappa-ritmo-cella .r-n {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--testo-primario);
}
.mappa-ritmo-cella .r-s {
  margin-top: 2px;
  color: #E8A900;
  font-size: 0.88rem;
  letter-spacing: 1px;
}

@media (max-width: 640px) {
  .mappa-card { padding: 18px 14px; }
  .mappa-legenda { font-size: 0.76rem; gap: 8px 12px; }
}

/* Card "speciale" (Ripasso/Sfida): già gestite da data-mondo nel sistema
   cromatico generale. Qui solo un leggero pattern per distinguerle dai mondi
   normali — linea tratteggiata + piccolo badge "speciale". */
.card-mondo-speciale {
  border-style: solid;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      color-mix(in srgb, var(--accento-ink) 6%, transparent) 14px 16px);
}

/* Mondo Tornado — timer barra + score */
.tornado-timer {
  max-width: 820px;
  height: 10px;
  margin: 6px auto;
  background: var(--lilla-100);
  border-radius: 5px;
  overflow: hidden;
}
.tornado-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #3D8F3D, #E8A900, #C44040);
  border-radius: 5px;
}
.tornado-score {
  display: flex;
  justify-content: center;
  gap: 18px;
  max-width: 820px;
  margin: 6px auto 12px;
  font-size: 0.95rem;
  font-weight: 700;
}
.tornado-score .tornado-ok { color: #2A7A3A; }
.tornado-score .tornado-ko { color: #C44040; }

/* (keyframes tornado-spin rimossi: usiamo fulmine-balza per l'icona ⚡) */

/* (La card Tornado prende già le sue tinte dal sistema data-mondo.) */

/* Etichetta tipo esercizio in Tornado */
.tornado-tipo {
  text-align: center;
  font-weight: 700;
  color: var(--testo-primario);
  background: var(--lilla-100, #F0E5F2);
  padding: 6px 14px;
  margin: 0 auto 6px;
  max-width: 520px;
  border-radius: 999px;
  font-size: 0.92rem;
  letter-spacing: 0.4px;
}
/* Timer con label */
.tornado-timer {
  position: relative;
}
.tornado-timer-lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--testo-primario);
  text-shadow: 0 0 4px rgba(255,255,255,0.9);
  pointer-events: none;
}
/* Overlay pre-domanda del Tornado (aiutante che annuncia esercizio + tempo) */
.tornado-pre-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 29, 63, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 220ms ease;
}
.tornado-pre-card {
  max-width: 520px;
  width: 100%;
  background: var(--sfondo-pannello);
  border: 3px solid var(--lilla-500);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4);
  text-align: center;
  animation: slide-up 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tornado-pre-card .narratore-azioni { justify-content: center; }
.tornado-pre-card .tornado-pre-tipo {
  background: transparent;
  font-size: 0.82rem;
  color: var(--testo-secondario);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 0;
  margin: 0 0 8px;
  max-width: none;
}
.tornado-pre-card .tornado-pre-tipo-big {
  font-size: 1.4rem;
  color: var(--testo-primario);
  font-weight: 700;
  margin: 0 0 6px;
}
.tornado-pre-card .tornado-pre-tempo {
  color: var(--testo-secondario);
  font-size: 0.95rem;
  margin: 0 0 18px;
  background: transparent;
}
.tornado-pre-card .tornado-countdown-num {
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--lilla-600);
  text-shadow: none;
  min-height: 6rem;
}
.tornado-pre-card .tornado-countdown-num.via { color: #C44040; }

/* Stelline disposte a CERCHIO (per celle strette della mappa) */
.stl-cerchio {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin: 0 auto;
}
.stl-cerchio .stl-p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  font-size: 11px;
  line-height: 1;
  color: rgba(58, 29, 63, 0.15);
  text-align: center;
}
.stl-cerchio .stl-p.attiva { color: #E8A900; }
/* 5 punti a 72° partendo dall'alto */
.stl-cerchio .p0 { transform: translate(0,    -11px); }
.stl-cerchio .p1 { transform: translate(10px, -3.5px); }
.stl-cerchio .p2 { transform: translate(6.5px, 9px); }
.stl-cerchio .p3 { transform: translate(-6.5px, 9px); }
.stl-cerchio .p4 { transform: translate(-10px, -3.5px); }


/* Chip note nella mini-intro del Ripasso e Tornado */
.chip-note-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 720px;
  margin: 10px auto 14px;
}
.chip-nota {
  background: var(--lilla-100);
  border: 2px solid var(--lilla-400);
  border-radius: 14px;
  padding: 4px 10px;
  font-weight: 700;
  color: var(--testo-primario);
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-nota .chip-mondi {
  font-weight: 400;
  opacity: 0.85;
}

/* Righe mondo lockate nella mappa */
.mappa-tabella tr.mappa-mondo-locked { opacity: 0.5; }
.mappa-mondo-lock { font-size: 0.85rem; margin-left: 4px; }

/* Mappa — Modalità speciali (Ripasso + Sfida) allineate a destra per distinguerle */
.mappa-speciali {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.mappa-speciale-cell {
  min-width: 90px;
  max-width: 130px;
  padding: 10px 8px;
  border: 2px solid var(--bordo);
  border-radius: 10px;
  background: var(--sfondo-pannello);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background 160ms;
}
.mappa-speciale-cell:hover { background: var(--lilla-100); }
.mappa-speciale-cell .ms-emoji {
  font-size: 1.6rem;
  line-height: 1;
}
.mappa-speciale-cell .ms-label {
  font-weight: 700;
  color: var(--testo-primario);
  font-size: 0.85rem;
}
.mappa-speciale-cell .ms-sottotesto {
  color: var(--testo-secondario);
  font-size: 0.72rem;
  line-height: 1.2;
}
.mappa-speciale-cell.lock {
  opacity: 0.55;
  cursor: default;
  background: #F5F0F5;
}
.mappa-speciale-cell.lock:hover { background: #F5F0F5; }

/* Sezione extra del Ripasso per le figure ritmiche deboli */
.ripasso-sezione-extra {
  max-width: 720px;
  margin: 20px auto 10px;
  padding: 14px 18px;
  background: #FFF5E0;
  border: 2px solid #E8A900;
  border-radius: 14px;
  text-align: center;
}
.ripasso-sezione-extra h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--testo-primario);
}
.ripasso-sezione-extra .secondario {
  margin: 8px 0;
  font-size: 0.88rem;
}

/* Mappa — tabellina di riepilogo sblocco mondi */
.mappa-sblocchi {
  margin: 6px 0 16px;
}
.mappa-sblocchi-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--bordo);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9rem;
}
.mappa-sblocchi-table th,
.mappa-sblocchi-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--lilla-100);
}
.mappa-sblocchi-table tr:last-child td { border-bottom: none; }
.mappa-sblocchi-table th {
  background: var(--lilla-50, #F7ECF7);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--testo-secondario);
  font-weight: 600;
}
.mappa-sblocchi-table .m-emoji {
  display: inline-block;
  width: 22px;
  text-align: center;
  margin-right: 4px;
}
.mappa-sblocchi-table .m-criterio {
  color: var(--testo-secondario);
  font-size: 0.85rem;
}
.mappa-sblocchi-table .m-stato {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.85rem;
}
.mappa-sblocchi-table .riga-sbloccato .m-stato { color: #2A7A3A; }
.mappa-sblocchi-table .riga-locked { opacity: 0.7; }
.mappa-sblocchi-table .riga-locked .m-stato { color: #C77D3B; }

@media (max-width: 560px) {
  .mappa-sblocchi-table .m-criterio { display: none; }
}

/* Badge pallino rosso con contatore pending sull'icona admin in home */
.account-admin-link { position: relative; }
.account-admin-pending {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #C44040;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sfondo-pannello);
  line-height: 1;
}

/* Il bottone fullscreen globale è stato rimosso: il toggle ⛶ vive nel FAB ⋯. */

/* =========================================================
   Menu a raggera (FAB ⋯ in basso-dx) — sempre visibile.
   Sostituisce OVUNQUE il vecchio bottone fullscreen globale.
   Su desktop, se c'è il gatto-compagno in basso-dx, si sposta
   sopra di esso per non sovrapporsi (vedi :has() più sotto).
   Su mobile (<=900px) il gatto-compagno resta nascosto.
   ========================================================= */
#fab-mobile {
  display: block;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1600;
}
/* Nelle schermate di auth (login, verifica email, attesa approvazione) il
   FAB non ha senso: appare solo dopo che l'app è avviata. */
body.auth-view #fab-mobile { display: none; }
/* Su desktop, se il gatto-compagno è fisso in basso-dx ED è davvero visibile
   (niente classe aiutante-nascosto), il FAB sale sopra di esso per non
   sovrapporsi. Su mobile NON spostiamo il FAB (lo schermo è troppo basso:
   a bottom:210 i sotto-pulsanti uscirebbero dallo schermo in landscape):
   il FAB resta in basso-dx e sta sopra il gatto grazie allo z-index. */
@media (min-width: 901px) {
  body:not(.aiutante-nascosto):has(.gatto-compagno) #fab-mobile {
    bottom: 210px;
  }
}
.fab-toggle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--lilla-500, #8F6899);
  background: var(--lilla-600, #6B3E7C);
  color: #FFFBF0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(58, 29, 63, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab-toggle.aperto { transform: rotate(90deg); }
.fab-menu {
  position: absolute;
  bottom: 64px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#fab-mobile.aperto .fab-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.fab-azione {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--bordo);
  background: var(--sfondo-pannello);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(58, 29, 63, 0.25);
  transition: transform 140ms;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.fab-azione:hover, .fab-azione:active { transform: scale(1.08); }

/* Il tutor-gatto resta visibile anche su mobile: può essere nascosto/mostrato
   dal pulsante 🐱 del FAB (body.aiutante-nascosto). */

/* Toggle visibility dal FAB 🐱: nasconde tutte le apparizioni del famiglio
   quando "aiutante-nascosto" è attiva (default su smartphone).
   Non tocco il famiglio nei tutorial home interattivi perché lì è il
   protagonista del tour, non un elemento decorativo. */
body.aiutante-nascosto .gatto-compagno,
body.aiutante-nascosto .home-consiglio,
body.aiutante-nascosto .narratore-famiglio { display: none !important; }

/* Senza il famiglio a destra, ha senso che il fumetto non "sporga" verso
   destra come faceva prima (per lasciare spazio al gatto): tolgo la coda
   triangolare e riduco il padding interno. */
body.aiutante-nascosto .narratore-fumetto::before { display: none; }
body.aiutante-nascosto .tutorial-narratore { max-width: none; }

/* Su smartphone il bottone ⛶ fullscreen del FAB non serve (il browser ha già
   i suoi controlli + "Aggiungi a Home" per app senza barre): nel FAB resta
   solo 🐱 per mostrare/nascondere l'aiutante. */
@media (max-width: 900px) {
  #fab-fs { display: none; }
}

/* =========================================================
   Troncone 3 — dettagli tipografici/decorativi
   ========================================================= */

/* Stelline count nel report */
.report-stelle-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ambra-700);
}

/* (Rimosso watermark pentagramma dietro gli header: sembrava un test stampante
   inkjet. Se un giorno vorremo una firma grafica useremo un SVG più
   riconoscibile, non linee dritte in un angolo.) */

/* Card mondo status: la stellina SVG dentro al chip deve essere leggermente
   più piccola del contenitore, niente drop-shadow che sfora il chip. */
.card-mondo-status .stella {
  width: 0.95em; height: 0.95em;
  filter: none;
}

/* ---- Stagger entrance: le card entrano come note di una scala ---- */
.griglia-mondi > *,
.griglia-sottolivelli > *,
.griglia-livelli > * {
  animation: sf-nota-arriva 480ms var(--ease-bounce) both;
}
.griglia-mondi > *:nth-child(1),
.griglia-sottolivelli > *:nth-child(1),
.griglia-livelli > *:nth-child(1) { animation-delay:   0ms; }
.griglia-mondi > *:nth-child(2),
.griglia-sottolivelli > *:nth-child(2),
.griglia-livelli > *:nth-child(2) { animation-delay:  70ms; }
.griglia-mondi > *:nth-child(3),
.griglia-sottolivelli > *:nth-child(3),
.griglia-livelli > *:nth-child(3) { animation-delay: 140ms; }
.griglia-mondi > *:nth-child(4),
.griglia-sottolivelli > *:nth-child(4),
.griglia-livelli > *:nth-child(4) { animation-delay: 210ms; }
.griglia-mondi > *:nth-child(5),
.griglia-sottolivelli > *:nth-child(5),
.griglia-livelli > *:nth-child(5) { animation-delay: 280ms; }
.griglia-mondi > *:nth-child(6),
.griglia-sottolivelli > *:nth-child(6),
.griglia-livelli > *:nth-child(6) { animation-delay: 350ms; }
.griglia-mondi > *:nth-child(7),
.griglia-sottolivelli > *:nth-child(7),
.griglia-livelli > *:nth-child(7) { animation-delay: 420ms; }
.griglia-mondi > *:nth-child(8),
.griglia-sottolivelli > *:nth-child(8),
.griglia-livelli > *:nth-child(8) { animation-delay: 490ms; }
.griglia-mondi > *:nth-child(9),
.griglia-sottolivelli > *:nth-child(9),
.griglia-livelli > *:nth-child(9) { animation-delay: 560ms; }
.griglia-mondi > *:nth-child(10),
.griglia-sottolivelli > *:nth-child(10),
.griglia-livelli > *:nth-child(10) { animation-delay: 630ms; }
.griglia-mondi > *:nth-child(11),
.griglia-sottolivelli > *:nth-child(11),
.griglia-livelli > *:nth-child(11) { animation-delay: 700ms; }
.griglia-mondi > *:nth-child(12),
.griglia-sottolivelli > *:nth-child(12),
.griglia-livelli > *:nth-child(12) { animation-delay: 770ms; }

@keyframes sf-nota-arriva {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Ingresso scaglionato anche per le card del report e delle modalità speciali */
.report-griglia > * {
  animation: sf-nota-arriva 420ms var(--ease-bounce) both;
}
.report-griglia > *:nth-child(1) { animation-delay:   0ms; }
.report-griglia > *:nth-child(2) { animation-delay:  80ms; }
.report-griglia > *:nth-child(3) { animation-delay: 160ms; }
.report-griglia > *:nth-child(4) { animation-delay: 240ms; }

/* ---- Rispetto preferenze accessibilità: niente animazioni d'ingresso ---- */
@media (prefers-reduced-motion: reduce) {
  .griglia-mondi > *,
  .griglia-sottolivelli > *,
  .griglia-livelli > *,
  .report-griglia > * {
    animation: none;
  }
  .narratore-famiglio img,
  .gatto-compagno img { animation: none; }
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* Pulsante "indietro" con icona SVG + parola. Compatto, coerente ovunque. */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.btn-back .icon svg { width: 1em; height: 1em; }
.btn-back:hover:not(:disabled) .icon {
  transform: translateX(-2px);
  transition: transform 140ms ease;
}

/* =========================================================
   Troncone 4a — Foundation smartphone + top-bar + 100dvh
   ========================================================= */

/* ---- Tap smoothness: niente flash blu, niente delay 300ms zoom ---- */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], .card-mondo, .card-livello, .tile-sottolivello,
.btn-nota, .fab-toggle, .fab-azione, .icon-btn, .menu-voce {
  touch-action: manipulation;
}

/* Evita che una parola lunga rompa layout su schermi stretti */
p, .secondario, .menu-voce-desc, .card-mondo-desc, .livello-desc {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ---- Top-bar condivisa (compatta, ~44px, safe-area aware) ----
   Layout: la topbar è SEMPRE full-width viewport (anche dentro container
   con padding/margin). Padding interno con safe-area + 20px per garantire
   che la freccia indietro non finisca attaccata al bordo sinistro su
   nessun dispositivo (anche iPhone con notch landscape o Android con
   gesture-bar laterale). */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px max(20px, env(safe-area-inset-right, 0px)) 6px max(20px, env(safe-area-inset-left, 0px));
  padding-top: max(6px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--fondo-app) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1.5px dashed var(--lilla-200);
  min-height: 44px;
}
/* Top-bar flush al bordo del viewport: la estendo SEMPRE a tutto il viewport
   con width: 100vw + margin-left calcolato, indipendentemente dal padding
   del padre (#app, .schermata, ecc.). Più robusto del margin negativo fisso
   -24px che non considerava override successivi (es. .esercizio-play). */
.schermata > .top-bar:first-child {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -24px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.top-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px 7px 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--lilla-700);
  background: var(--lilla-50);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  min-height: 36px;
}
.top-bar-back:hover:not(:disabled) {
  background: var(--lilla-100);
  border-color: var(--lilla-300);
  box-shadow: none;
  transform: none;
}
.top-bar-back:hover .icon { transform: translateX(-2px); transition: transform 140ms ease; }
.top-bar-back .icon svg { width: 1em; height: 1em; }
@media (max-width: 520px) {
  /* Nasconde SOLO la label di testo, non lo span .icon che contiene l'svg. */
  .top-bar-back > span:not(.icon) { display: none; }
  .top-bar-back { padding: 8px; }
}
.top-bar-titolo {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 700;
  text-align: center;
  color: var(--ink-700);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.top-bar-sottotitolo {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.top-bar-azioni {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.top-bar-azioni .icon-btn {
  width: 36px; height: 36px;
  font-size: 1rem;
}
.top-bar-chip {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  background: var(--lilla-50);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--lilla-700);
}

/* Smartphone landscape (altezza ridotta): topbar compatta su TUTTE le pagine
   (tutorial, mondo, livello, esercizio, impostazioni, report, ecc.).
   Recupera ~12px verticali, sufficienti a rendere il body comodo. */
@media (max-height: 500px) {
  .top-bar {
    min-height: 38px;
    padding: 3px 8px;
  }
  /* Back button senza label = bottone quadrato simmetrico, icona ben centrata */
  .top-bar-back {
    padding: 6px;
    min-height: 32px;
    min-width: 32px;
    font-size: 1rem;
    justify-content: center;
  }
  .top-bar-back > span:not(.icon) { display: none; }
  .top-bar-back .icon svg { width: 18px; height: 18px; }
  .top-bar-titolo { font-size: 0.95rem; }
  .top-bar-sottotitolo { display: none; }
  .top-bar-azioni .icon-btn { width: 32px; height: 32px; font-size: 0.92rem; }
  .top-bar-chip { padding: 3px 10px; font-size: 0.78rem; }
  /* Margine top-bar al bordo viewport: applico SOLO a pagine non-esercizio
     (.esercizio-play ha già il suo trattamento speciale a `margin: 0`). */
  .schermata:not(.esercizio-play) > .top-bar:first-child {
    margin: -24px -24px 6px -24px;
  }
  /* #app padding ridotto su smartphone short: meno spazio sprecato, niente
     scroll verticale inutile sotto al carousel. */
  #app { padding: 12px 24px; }
}

/* ---- Layout esercizio: pentagramma che si dilata, istruzione + pulsanti
   "incollati" sotto come blocco coeso. min-height invece di height per evitare
   overflow quando la pulsantiera è alta (alterazioni, piano) su viewport corti:
   con height:100dvh i pulsanti uscivano fuori dallo schermo. ---- */
.schermata.esercizio-play {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Annulla il padding 24px di #app: la top-bar tocca il bordo del viewport. */
  margin: -24px -24px 0 -24px;
  box-sizing: border-box;
  max-width: 100vw;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Se l'esercizio NON ha pulsanti risposta classici (es. Punta o Abbina
   che clicca direttamente sul rigo), niente forzare min-height: 100dvh →
   il contenuto occupa solo quello che serve, niente ampio spazio bianco sotto. */
.schermata.esercizio-play:not(:has(.risposta-bottoni)) {
  min-height: auto;
}
.schermata.esercizio-play > .top-bar,
.schermata.esercizio-play > .timer-bar { flex: 0 0 auto; }
.schermata.esercizio-play > .top-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -24px;
  margin-bottom: 14px;          /* spazio chiaro tra topbar e pentagramma */
}
.schermata.esercizio-play .timer-bar {
  padding: 0;
  height: 8px;
  background: var(--lilla-100);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--lilla-200);
}
.schermata.esercizio-play .timer-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ok-500), var(--ambra-500), var(--ko-500));
  transition: width 100ms linear;
  box-shadow: 0 0 6px rgba(196, 64, 64, 0.4);
}
/* Pentagramma dimensionato sul SVG naturale + max-height ragionevole.
   Bordo/bg leggeri della regola base (.pentagramma-box) sono mantenuti:
   il box chiaro stacca il rigo dallo sfondo della pagina. */
.schermata.esercizio-play .pentagramma-box,
.schermata.esercizio-play .pentagramma-zona {
  flex: 0 1 auto;
  max-height: 48vh;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  width: calc(100% - 32px);
  max-width: 760px;
  margin: 16px auto 6px;     /* spazio top abbondante per non "incollare" alla topbar */
  box-sizing: border-box;
}
.schermata.esercizio-play .pentagramma-box > *,
.schermata.esercizio-play .pentagramma-zona > * {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Targetto solo lo SVG del pentagramma, NON gli SVG interni a .feedback-gatto
   (bocca), a .gatto-compagno, a .narratore-famiglio che hanno dimensioni proprie. */
.schermata.esercizio-play .pentagramma-box > svg,
.schermata.esercizio-play .pentagramma-zona > svg,
.schermata.esercizio-play .pentagramma-box > :not(.feedback-gatto):not(.gatto-compagno) svg:not(.bocca-gatto),
.schermata.esercizio-play .pentagramma-zona > :not(.feedback-gatto):not(.gatto-compagno) svg:not(.bocca-gatto) {
  width: 100%;
  height: auto;
  max-height: 100%;   /* già vincolato dalla max-height 48vh del box parent */
}
.schermata.esercizio-play .pentagramma-box > *,
.schermata.esercizio-play .pentagramma-zona > * {
  max-width: 640px;   /* L1 ha solo 3 note: tenere il rigo più compatto evita
                         l'effetto "pentagramma gigantesco su monitor largo" */
}
/* Istruzione e pulsanti incollati subito sotto al pentagramma (no margin auto
   che prima spingeva i pulsanti in basso creando un buco vuoto nel mezzo). */
.schermata.esercizio-play .istruzione {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 16px 2px;
  text-align: center;
  font-size: 0.98rem;
}
.schermata.esercizio-play .risposta-bottoni {
  flex: 0 0 auto;
  padding: 4px 16px 10px;
  position: relative;     /* anchor per .esito-overlay */
}
/* Badge account nascosto durante l'esercizio (focus sul gioco,
   si sovrapponeva alla top-bar) */
.schermata.esercizio-play ~ .account-badge,
body:has(.schermata.esercizio-play) .account-badge { display: none; }

/* Badge account (email + admin + logout in alto-dx) nascosto SEMPRE:
   ingombra la top-bar anche su desktop, e le azioni sono accessibili da
   Impostazioni → Account. */
.account-badge { display: none !important; }
/* Landscape mobile stretto: tutto più compatto */
@media (max-width: 900px) and (orientation: landscape) {
  .schermata.esercizio-play .top-bar { min-height: 34px; }
  .schermata.esercizio-play .top-bar-titolo { font-size: 0.88rem; }
  .schermata.esercizio-play .top-bar-sottotitolo { display: none; }
  .schermata.esercizio-play .istruzione { font-size: 0.9rem; margin-top: 2px; }
  .schermata.esercizio-play .pentagramma-box,
  .schermata.esercizio-play .pentagramma-zona { padding: 4px 12px 0; }
  .schermata.esercizio-play .risposta-bottoni { padding: 6px 12px 10px; }
}

/* ---- Overlay esito: trasparenza elegante, niente bordi hard ---- */
.esito-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Sfondo molto sottile con blur: pulsanti si vedono sotto, non li nasconde */
  background: color-mix(in srgb, var(--fondo-app) 55%, transparent);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  z-index: 10;
  animation: esito-enter 220ms var(--ease-bounce) both;
  pointer-events: auto;
}
.esito-overlay.ok { background: color-mix(in srgb, var(--ok-bg) 75%, transparent); }
.esito-overlay.ko { background: color-mix(in srgb, var(--ko-bg) 75%, transparent); }
/* Card orizzontale morbida: niente bordo "sticker", ombra a colore soffusa.
   Icona + testo + bottone tutti in linea. Su landscape stretto resta nell'altezza
   della zona pulsanti senza invadere. */
.esito-overlay-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--fondo-pannello) 95%, transparent);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 24px rgba(58, 29, 63, 0.16);
  text-align: left;
  max-width: 580px;
  width: fit-content;
}
.esito-overlay.ok .esito-overlay-card {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ok-500) 40%, transparent);
}
.esito-overlay.ko .esito-overlay-card {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ko-500) 30%, transparent);
}
.esito-overlay-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.esito-overlay-card .esito-overlay-titolo { text-align: left; }
.esito-overlay-card .esito-overlay-sotto  { text-align: left; line-height: 1.3; }
/* Figura ritmica inline nel messaggio (Ritmo): solo la nota/pausa (no pentagramma).
   ViewBox croppato runtime sul bbox reale della nota → la nota riempie il box. */
.ritmo-fig-inline {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 30px;
  margin: 0 3px;
  line-height: 0;
}
.ritmo-fig-inline svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Tieni la coppia "Nome + figura" indivisibile: se va a capo, vanno insieme. */
.figura-pair {
  display: inline-block;
  white-space: nowrap;
}
.esito-overlay-card button {
  justify-self: end;
  margin-top: 0;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .esito-overlay-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    text-align: left;
    gap: 6px 12px;
    border-radius: var(--radius-card);
    padding: 12px 16px;
  }
  .esito-overlay-icon  { grid-row: 1 / span 2; }
  .esito-overlay-testo { grid-column: 2; grid-row: 1; }
  .esito-overlay-card button {
    grid-column: 1 / -1; grid-row: 2;
    justify-self: center;
  }
}
.esito-overlay.ok .esito-overlay-card { border-color: var(--ok-500); }
.esito-overlay.ko .esito-overlay-card { border-color: var(--ko-500); }
.esito-overlay-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fondo-card);
  flex-shrink: 0;
}
.esito-overlay.ok .esito-overlay-icon { background: var(--ok-bg); color: var(--ok-ink); }
.esito-overlay.ko .esito-overlay-icon { background: var(--ko-bg); color: var(--ko-ink); }
.esito-overlay-icon svg { width: 26px; height: 26px; }
.esito-overlay-titolo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: -0.01em;
}
.esito-overlay.ok .esito-overlay-titolo { color: var(--ok-ink); }
.esito-overlay.ko .esito-overlay-titolo { color: var(--ko-ink); }
.esito-overlay-sotto {
  font-size: 0.88rem;
  color: var(--ink-500);
  max-width: 260px;
}
.esito-overlay button {
  margin-top: 8px;
  padding: 8px 18px;
  font-size: 0.9rem;
}
@keyframes esito-enter {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}


/* ---- Tweaks mobile per moduli specifici ----------------------------------
   - btn-grande "🔊 Riascolta" dell'orecchio: ridimensionato per smartphone.
   - Doppio pentagramma / grand-staff (mondo piano): dimensione ridotta in
     landscape mobile così sta in viewport senza zoom.
--------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) {
  .btn-grande {
    font-size: 1rem;
    padding: 10px 20px;
  }
  /* Grand staff ha aspect ratio ~4:2.2 → su mobile landscape 640×380 diventa
     enorme. Limito la height a 40vh per lasciare spazio ai pulsanti. */
  .schermata.esercizio-play .pentagramma-box svg,
  .schermata.esercizio-play .pentagramma-zona svg {
    max-height: 42vh;
  }
}

/* Animazione fulmine (sfida) — niente più rotazione tornado che girava
   continuamente, ora un ballo verticale breve. */
@keyframes fulmine-balza {
  0%, 100% { transform: translateY(0)  scale(1); filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: translateY(-6px) scale(1.08); filter: drop-shadow(0 0 18px rgba(232, 169, 0, 0.55)); }
}

/* ---- Pulsantiera alterazioni V◇^ (SVG) ---- */
.pulsantiera-alterata {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px auto;
  user-select: none;
  -webkit-user-select: none;
}
/* Selettori unificati: polygon (rombi naturali) + ellipse (alterazioni). */
.pulsantiera-alterata .pa-tasto polygon,
.pulsantiera-alterata .pa-tasto ellipse {
  fill: var(--lilla-50);
  stroke: var(--lilla-300);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
  cursor: pointer;
  transition: fill 120ms ease, transform 120ms ease;
  transform-origin: center;
  transform-box: fill-box;
}
.pulsantiera-alterata .pa-tasto text {
  fill: var(--ink-700);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  pointer-events: none;
}
.pulsantiera-alterata .pa-diesis ellipse {
  fill: var(--ambra-100);
  stroke: var(--ambra-500);
}
.pulsantiera-alterata .pa-diesis text {
  fill: var(--ambra-700);
  font-size: 22px;
}
.pulsantiera-alterata .pa-bemolle ellipse {
  fill: var(--basso-bg);
  stroke: var(--basso-ink);
}
.pulsantiera-alterata .pa-bemolle text {
  fill: var(--basso-ink);
  font-size: 22px;
}
.pulsantiera-alterata .pa-tasto:hover polygon,
.pulsantiera-alterata .pa-tasto:hover ellipse {
  fill: var(--lilla-100);
}
.pulsantiera-alterata .pa-diesis:hover ellipse { fill: var(--ambra-300); }
.pulsantiera-alterata .pa-bemolle:hover ellipse {
  fill: color-mix(in srgb, var(--basso-bg) 60%, var(--basso-ink));
}
.pulsantiera-alterata .pa-tasto.risposta-giusta polygon,
.pulsantiera-alterata .pa-tasto.risposta-giusta ellipse {
  fill: var(--ok-bg) !important;
  stroke: var(--ok-500);
  animation: pa-pulsa 400ms ease;
}
.pulsantiera-alterata .pa-tasto.risposta-sbagliata polygon,
.pulsantiera-alterata .pa-tasto.risposta-sbagliata ellipse {
  fill: var(--ko-bg) !important;
  stroke: var(--ko-500);
  animation: pa-scuoti 400ms ease;
}
.pulsantiera-alterata .pa-tasto.risposta-giusta-hint polygon,
.pulsantiera-alterata .pa-tasto.risposta-giusta-hint ellipse {
  fill: var(--ok-bg) !important;
  stroke: var(--ok-500);
  animation: pa-pulsa 800ms ease 200ms;
}
.pulsantiera-alterata .pa-tasto.disabilitato polygon,
.pulsantiera-alterata .pa-tasto.disabilitato ellipse {
  opacity: 0.6;
  cursor: not-allowed;
}
@keyframes pa-pulsa {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes pa-scuoti {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* Quando la risposta-bottoni contiene la pulsantiera SVG invece dei button,
   deve essere un block plain (senza flex/grid del layout .risposta-bottoni base). */
.risposta-bottoni-svg {
  display: block !important;
  padding: 6px 16px 14px;
}
.schermata.esercizio-play .risposta-bottoni-svg { padding: 4px 16px 10px; }

/* Sezione "Prossimamente" nel Mondo (es. Ritmo): sfondo tratteggiato. */
.sezione-prossimamente { border-top-color: var(--lilla-300); }
.sezione-prossimamente + .griglia-livelli .card-livello:disabled {
  opacity: 0.55;
  border-style: dashed;
}
.sezione-prossimamente + .griglia-livelli .card-livello .livello-numero {
  font-size: 2rem;
}

/* Warning calibrazione: appare prima dell'esercizio se note fuori dal range
   della pianola calibrata + midiStrict ON. Suggerisce OFF o "prosegui". */
.warning-cal-card {
  max-width: 540px;
  margin: 12px auto;
  padding: 24px 22px;
  background: var(--fondo-pannello);
  border: 2px solid var(--ambra-500);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(184, 134, 0, 0.2);
  text-align: center;
}
.warning-cal-icona { font-size: 3.4rem; line-height: 1; margin: 4px 0 10px; }
.warning-cal-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: var(--lilla-700);
  font-size: 1.2rem;
}
.warning-cal-card p {
  margin: 6px 0;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.4;
}
.warning-cal-suggerimento {
  background: var(--ambra-100);
  border-left: 3px solid var(--ambra-500);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  text-align: left;
  margin-top: 10px !important;
}
.warning-cal-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  font-size: 0.88rem;
  color: var(--ink-500);
  cursor: pointer;
}
.warning-cal-azioni {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Messaggio record (nuovo / mantenuto) nel risultato di livello */
.record-msg {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.record-msg.record-nuovo {
  background: var(--ambra-100);
  color: var(--ambra-700);
  border: 1px solid var(--ambra-500);
}
.record-msg.record-mantenuto {
  background: var(--lilla-50);
  color: var(--lilla-700);
  border: 1px solid var(--lilla-300);
}

/* Test Audio + MIDI — sezioni evidenziate (rilevazione + calibrazione in alto) */
.impostazioni-evidenziata {
  border-color: var(--ambra-500) !important;
  background: linear-gradient(180deg, var(--ambra-100) 0%, var(--fondo-pannello) 60%) !important;
  box-shadow: var(--ombra-1, 0 2px 6px rgba(0,0,0,0.08));
}

/* Test Audio + MIDI — sezione "Dispositivi testati" */
.dispositivi-testati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.dt-gruppo {
  background: var(--lilla-50);
  border: 1.5px solid var(--lilla-200);
  border-radius: 12px;
  padding: 10px 14px;
}
.dt-gruppo h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--lilla-700);
  font-weight: 700;
}
.dt-gruppo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dt-gruppo li {
  font-size: 0.86rem;
  color: var(--ink-700);
  padding-left: 14px;
  position: relative;
}
.dt-gruppo li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ok-500);
  font-weight: 700;
}

/* Test Audio + MIDI — indicatori di stato */
.test-stato {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--fondo-card);
  border: 1.5px solid var(--lilla-200);
  font-size: 0.95rem;
}
.test-stato.ok   { background: var(--ok-bg); border-color: var(--ok-500); color: var(--ok-ink); }
.test-stato.warn { background: var(--ambra-100); border-color: var(--ambra-500); color: var(--ambra-700); }
.test-stato.ko   { background: var(--ko-bg); border-color: var(--ko-500); color: var(--ko-ink); }
.test-stato.flash { animation: test-flash 400ms ease; }
@keyframes test-flash {
  0%   { transform: scale(1); box-shadow: 0 0 0 var(--lilla-300); }
  50%  { transform: scale(1.02); box-shadow: 0 0 0 6px var(--lilla-100); }
  100% { transform: scale(1); box-shadow: 0 0 0 var(--lilla-300); }
}

/* Demo top-bar dentro il tutorial Orecchio — mostra visualmente dove sta
   il pulsante Riascolta. */
.tutorial-topbar-demo {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  max-width: 520px;
  margin: 10px auto 4px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--fondo-app) 92%, transparent);
  border: 1.5px dashed var(--lilla-300);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.tbd-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--lilla-50);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lilla-700);
}
.tbd-titolo {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-700);
  font-size: 0.95rem;
  text-align: center;
}
/* Replica fedele del pulsante Riascolta reale (.icon-btn lilla), con
   un'animazione pulse d'attenzione aggiuntiva solo nel tutorial. */
.tbd-ico-riascolta.icon-btn {
  animation: tbd-pulsa 1.4s ease-in-out infinite;
}
@keyframes tbd-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lilla-500) 55%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--lilla-500) 0%, transparent); }
}
.tutorial-freccia-giu {
  text-align: right;
  max-width: 520px;
  margin: 2px auto 10px;
  padding-right: 32px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ambra-700);
}

/* Overlay confronto Orecchio: due bottoni affiancati per riascoltare la nota
   giusta e quella sbagliata dell'utente. */
.orecchio-confronto-btns {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.orecchio-confronto-btns button {
  flex: 1 1 auto;
  padding: 6px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1.5px solid var(--lilla-300);
  background: var(--lilla-50);
  color: var(--lilla-700);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.orecchio-confronto-btns button:hover:not(:disabled) {
  background: var(--lilla-100);
  border-color: var(--lilla-500);
}
.orecchio-confronto-btns button:active { transform: translateY(1px); }
.orecchio-confronto-btns button:nth-child(1) {
  background: var(--ok-bg);
  border-color: var(--ok-500);
  color: var(--ok-ink);
}
.orecchio-confronto-btns button:nth-child(2) {
  background: var(--ko-bg);
  border-color: var(--ko-500);
  color: var(--ko-ink);
}
.orecchio-confronto-card { max-width: 460px; }

/* Overlay confronto Orecchio: full-screen (non solo zona pulsanti) per dare
   spazio a icona + testo + 2 bottoni confronto + "Ho capito". */
.esito-overlay.orecchio-confronto {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--ko-bg) 75%, transparent);
}
.esito-overlay.orecchio-confronto .esito-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 16px 20px;
  border-radius: var(--radius-card);
}
.esito-overlay.orecchio-confronto .esito-overlay-icon {
  align-self: center;
  width: 46px; height: 46px;
}
.esito-overlay.orecchio-confronto .esito-overlay-titolo { text-align: center; }
.esito-overlay.orecchio-confronto .esito-overlay-sotto  {
  text-align: center;
  white-space: normal;
  overflow: visible;
}
.esito-overlay.orecchio-confronto .orecchio-confronto-btns { margin-top: 4px; }
.esito-overlay.orecchio-confronto .orecchio-confronto-btns button {
  padding: 10px 16px;
  font-size: 0.95rem;
}
.esito-overlay.orecchio-confronto button[data-avanti] {
  align-self: center;
  margin-top: 6px;
  padding: 9px 24px;
}

/* ---- Landscape mobile (smartphone orizzontale) ----
   Vincolo principale: altezza ≤ ~400px. Comprimo pentagramma + pulsantiera
   alterazioni (.piano = 3 righe) per evitare overflow / cropping. */
@media (max-height: 480px) {
  /* Pentagramma compatto su landscape mobile: max-height 26vh per lasciare
     spazio a slot+pulsantiera senza overflow verticale.
     align-items flex-start: il SVG parte dall'alto, così se viene clipped
     lo è solo in basso (chiave di violino sempre visibile in cima al rigo). */
  .esercizio-play .pentagramma-box {
    max-height: 26vh;
    margin: 8px auto 4px;
    padding: 4px 8px;
    overflow: hidden;
    align-items: flex-start !important;
  }
  /* Forzo width 100% e height auto: anche se la larghezza nativa è > 820
     (caso grand staff con tante note) NIENTE scroll-x — meglio vedere il
     pentagramma intero più piccolo che a metà tagliato. */
  .esercizio-play .pentagramma-box svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
  }
  /* Anche per il mini-intro (sommario del livello) niente scroll-x. */
  .mini-intro .pentagramma-box,
  .mini-intro .pentagramma-box > div { overflow: hidden !important; }
  .mini-intro .pentagramma-box svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Pulsantiera alterazioni piano su smartphone: FLEX unica riga.
     Su landscape stretto il layout grid 3-righe non sta in altezza, e i bambini
     non distinguono i tasti neri di pianola in così poco spazio. Meglio una
     sola riga con naturali bianche + alterazioni nere consecutive. */
  .risposta-bottoni.piano {
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 3px;
    justify-content: center;
    margin: 6px auto 0;
    max-width: none;
  }
  .risposta-bottoni.piano > .btn-nota {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 auto;
    min-width: 0;
  }
  .risposta-bottoni.piano .btn-nota.naturale {
    min-height: 28px;
    font-size: 0.82rem;
    padding: 3px 5px;
    border-radius: 6px;
  }
  .btn-nota.diesis,
  .btn-nota.bemolle {
    min-height: 28px;       /* uniforme con i naturali in unica riga */
    font-size: 0.72rem;
    padding: 3px 4px;
    border-radius: 6px;
  }
  /* Ordine cromatico: Do, Do♯/Re♭, Re, Re♯/Mi♭, Mi, Fa, Fa♯/Sol♭, Sol,
     Sol♯/La♭, La, La♯/Si♭, Si — così le alterazioni stanno fra le naturali
     come sui tasti del pianoforte. */
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="Do"]  { order:  1; }
  .risposta-bottoni.piano .btn-nota.diesis[data-risposta="Do♯"]   { order:  2; }
  .risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Re♭"]  { order:  3; }
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="Re"]  { order:  4; }
  .risposta-bottoni.piano .btn-nota.diesis[data-risposta="Re♯"]   { order:  5; }
  .risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Mi♭"]  { order:  6; }
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="Mi"]  { order:  7; }
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="Fa"]  { order:  8; }
  .risposta-bottoni.piano .btn-nota.diesis[data-risposta="Fa♯"]   { order:  9; }
  .risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Sol♭"] { order: 10; }
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="Sol"] { order: 11; }
  .risposta-bottoni.piano .btn-nota.diesis[data-risposta="Sol♯"]  { order: 12; }
  .risposta-bottoni.piano .btn-nota.bemolle[data-risposta="La♭"]  { order: 13; }
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="La"]  { order: 14; }
  .risposta-bottoni.piano .btn-nota.diesis[data-risposta="La♯"]   { order: 15; }
  .risposta-bottoni.piano .btn-nota.bemolle[data-risposta="Si♭"]  { order: 16; }
  .risposta-bottoni.piano .btn-nota.naturale[data-risposta="Si"]  { order: 17; }
  /* Naturali sempre visibili anche con min-width più basso. */
  .btn-nota { min-width: 0; padding: 6px 8px; font-size: 0.95rem; }
  /* Istruzione e timer compatti. */
  .esercizio-play .istruzione { margin: 2px 0; font-size: 0.85rem; }
  .esercizio-play .timer-bar { height: 6px; }
  /* Sequenza/Dettato: slot di progresso + risposta bottoni compatti */
  .risposta-sequenza-progress { margin: 4px auto; gap: 3px; padding: 0 4px; }
  .seq-slot { min-width: 32px; min-height: 28px; padding: 3px 5px; font-size: 0.78rem; }
  /* Tabellina mie/tue compatta */
  .seq-confronto { padding: 6px 8px 8px; gap: 4px; margin: 4px auto; }
  .seq-titolo { font-size: 1rem; }
  .tab-mie-tue th { font-size: 0.7rem; padding: 2px 6px 2px 2px; }
  .cella-mt { min-width: 28px; padding: 3px 4px; font-size: 0.78rem; }
  .seq-confronto p { font-size: 0.82rem; margin: 2px 0; }
}

/* ---- Sequenza/Dettato — confronto Mie/Tue (post-risposta) ----
   Tabellina 2 righe: sopra le note "mie" (target), sotto le "tue" (cliccate),
   colorate verde/rosso per OK/KO. + Bottoni riascolto (solo dettato). */
.seq-confronto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px auto;
  padding: 10px 14px 16px;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: 14px;
  max-width: 760px;
}
.seq-titolo { margin: 0; font-size: 1.15rem; color: var(--ink-700); }
.tab-mie-tue {
  border-collapse: separate;
  border-spacing: 4px;
  margin: 4px 0;
}
.tab-mie-tue th {
  text-align: right;
  padding: 4px 10px 4px 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cella-mt {
  min-width: 38px;
  padding: 6px 8px;
  text-align: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}
.cella-mt.mie {
  background: var(--lilla-100);
  color: var(--ink-700);
  border: 1.5px solid var(--lilla-300);
}
.cella-mt.tue.giusta {
  background: #D8F0D6;
  color: #1B5E1B;
  border: 1.5px solid #2E7B2E;
}
.cella-mt.tue.sbagliata {
  background: #FFD9D9;
  color: #7B1A1A;
  border: 1.5px solid #C53030;
}
.cella-mt.tue.mancante {
  background: #F0F0F0;
  color: #777;
  border: 1.5px dashed #BBB;
}
.seq-riascolti {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.seq-riascolti.compatti { gap: 6px; margin-top: 4px; }
.seq-riascolti.compatti .btn-riascolta { padding: 5px 10px; font-size: 0.82rem; }

/* Pannello esito INLINE per Sequenza/Dettato — appena sotto il pentagramma.
   Niente overlay: il pentagramma resta sempre visibile sopra. Sottile barra
   verde/rosso trasparente sull'esterno per indicare l'esito a colpo d'occhio. */
.seq-confronto-inline {
  margin: 4px auto;
  padding: 6px 10px 8px;
  border-radius: 12px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 760px;
}
.seq-confronto-inline.ok {
  background: color-mix(in srgb, var(--ok-500, #2E7B2E) 16%, transparent);
  border-color: color-mix(in srgb, var(--ok-500, #2E7B2E) 70%, transparent);
}
.seq-confronto-inline.ko {
  background: color-mix(in srgb, var(--ko-500, #C53030) 14%, transparent);
  border-color: color-mix(in srgb, var(--ko-500, #C53030) 60%, transparent);
}
.sci-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.sci-titolo {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-700);
  flex-shrink: 0;
}
.sci-msg {
  flex: 1 1 auto;
  font-size: 0.9rem;
  color: var(--ink-500);
}
.sci-avanti {
  margin-left: auto;
  white-space: nowrap;
  padding: 6px 16px;
}
.sci-line {
  width: 100%;
  font-size: 0.92rem;
  color: var(--ink-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sci-label {
  font-weight: 700;
  color: var(--ink-500);
  flex-shrink: 0;
}
.sci-note {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}
.nota-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}
.nota-pill.att {
  background: var(--lilla-100);
  color: var(--ink-700);
}
.nota-pill.giusta {
  background: color-mix(in srgb, var(--ok-500, #2E7B2E) 20%, transparent);
  color: var(--ok-700, #1B5E1B);
}
.nota-pill.sbagliata {
  background: color-mix(in srgb, var(--ko-500, #C53030) 22%, transparent);
  color: var(--ko-700, #7B1A1A);
}
.nota-pill.mancante {
  background: #ECECEC;
  color: #888;
}
@media (max-height: 480px) {
  .seq-confronto-inline { padding: 4px 8px 6px; gap: 2px; margin: 2px auto; }
  .sci-titolo { font-size: 0.92rem; }
  .sci-msg { font-size: 0.82rem; }
  .sci-avanti { padding: 5px 14px; font-size: 0.85rem; }
  .sci-line { font-size: 0.84rem; gap: 4px; }
  .nota-pill { font-size: 0.78rem; padding: 1px 5px; }
}
.tab-mie-tue.compatta {
  border-spacing: 3px;
  margin: 4px 0 2px;
}
.tab-mie-tue.compatta th {
  padding: 2px 6px 2px 0;
  font-size: 0.7rem;
}
.tab-mie-tue.compatta .cella-mt {
  min-width: 28px;
  padding: 3px 5px;
  font-size: 0.78rem;
}
/* Tabella esito sequenza: layout fixed → tutte le celle nota larghe uguali,
   così "Esercizio: Do Re Mi" e "Hai suonato: Do Re Mi" sono incolonnate. */
.sci-tabella {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
.sci-tabella th {
  width: auto;
  white-space: nowrap;
  text-align: right;
  padding-right: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sci-tabella .cella-mt {
  text-align: center;
}

/* Ripasso ritmo: figura isolata piccola (viewBox 90x100). NON deve stirarsi
   a tutto lo schermo come fanno gli altri pentagrammi: la limito a ~140px
   di larghezza e la centro. Senza questo, su mobile il fix `width: 100%`
   dei pentagrammi la rendeva gigantesca/distorta. */
.pentagramma-box.ripasso-figura-box {
  max-width: 280px;
  margin: 0 auto 6px;       /* niente margine sopra: figura più in alto */
  padding: 4px 10px;
  display: flex;
  justify-content: center;
  /* Figura piccola (90×100): NON limitarla con max-height/overflow (era ereditato
     da .esercizio-play .pentagramma-box). Senza questo override la figura
     veniva tagliata in basso. */
  max-height: none !important;
  overflow: visible !important;
}
.esercizio-play .pentagramma-box.ripasso-figura-box {
  margin-top: 0;
  max-height: none !important;
  overflow: visible !important;
}
.esercizio-play .pentagramma-box.ripasso-figura-box svg,
.pentagramma-box.ripasso-figura-box svg {
  max-width: 180px !important;
  width: 180px !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 auto;
  display: block;
}
@media (max-height: 480px) {
  .pentagramma-box.ripasso-figura-box { max-width: 220px; padding: 4px 8px; }
  .esercizio-play .pentagramma-box.ripasso-figura-box svg,
  .pentagramma-box.ripasso-figura-box svg {
    max-width: 140px !important;
    width: 140px !important;
    max-height: none !important;
  }
}

/* Riga istruzione + bottone Conferma affianco — niente nuova riga verticale,
   risparmia altezza su smartphone. Quando il bottone è hidden, l'istruzione
   resta centrata; quando visibile, sono fianco a fianco. */
.seq-istr-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px auto;
}
.seq-istr-row .istruzione { margin: 0; }

.btn-conferma-seq {
  padding: 6px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--ok-500, #2E7B2E);
  color: #FFFFFF;
  border: 2px solid var(--ok-700, #1B5E1B);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ok-500, #2E7B2E) 35%, transparent);
  transition: background 140ms ease, transform 100ms ease;
  white-space: nowrap;
}
.btn-conferma-seq:hover { background: var(--ok-700, #1B5E1B); transform: translateY(-1px); }
.btn-conferma-seq:active { transform: translateY(0); }
.btn-conferma-seq[hidden] { display: none; }
@media (max-height: 480px) {
  .btn-conferma-seq { padding: 4px 14px; font-size: 0.82rem; }
  .seq-istr-row { margin: 2px auto; gap: 8px; }
}

/* Toggle "Controllo nota e ottava" (midiStrict) — visibile inline nella
   mini-intro degli esercizi quando il MIDI è connesso. */
.midi-strict-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto;
  padding: 6px 14px;
  border: 1.5px solid var(--lilla-300);
  border-radius: 999px;
  background: var(--lilla-50, #FAF4FA);
  font-size: 0.88rem;
  color: var(--ink-700);
  cursor: pointer;
  user-select: none;
}
.midi-strict-toggle input[type="checkbox"] {
  accent-color: var(--ok-500, #2E7B2E);
  margin: 0;
}
.midi-strict-toggle:hover { background: var(--lilla-100); }
.midi-strict-toggle.disabilitato {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--lilla-50);
}
.midi-strict-toggle.disabilitato:hover { background: var(--lilla-50); }

/* Chip MIDI strict in topbar — mostro stato visivo dello strict ON/OFF. */
.icon-btn#btn-midi-strict[data-active="true"] {
  background: color-mix(in srgb, var(--ok-500, #2E7B2E) 25%, transparent);
  border-color: var(--ok-500, #2E7B2E);
}

/* ---- Sequenza/Dettato — bottoni riascolto (post-risposta) ---- */
.btn-riascolta {
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  border: 1.5px solid var(--lilla-300);
  background: var(--fondo-pannello);
  color: var(--lilla-700, var(--ink-700));
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.btn-riascolta:not(:disabled):hover {
  background: var(--lilla-100);
  border-color: var(--lilla-500);
}
.btn-riascolta:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- Sequenza/Dettato — slot di progresso (riga di N caselle) ----
   Mostra l'avanzamento dell'utente nelle N note: ogni slot si riempie con
   il nome cliccato; alla fine giuste/sbagliate si colorano. */
.risposta-sequenza-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px auto 2px;
  padding: 0 6px;
  max-width: 760px;
}
/* Quando subito dopo c'è la pulsantiera risposte, riduco il margin top
   della pulsantiera per "tirare su" i bottoni sotto le note selezionate. */
.risposta-sequenza-progress + .risposta-bottoni { margin-top: 4px; }
.risposta-sequenza-progress + .risposta-bottoni.piano { margin-top: 6px; }
.seq-slot {
  min-width: 44px;
  min-height: 36px;
  padding: 6px 8px;
  border: 2px solid var(--lilla-300);
  border-radius: 8px;
  background: var(--fondo-pannello);
  color: var(--ink-500);
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.seq-slot.riempito {
  color: var(--ink-700);
  border-color: var(--lilla-500);
  background: var(--lilla-100);
  cursor: pointer;          /* tap per correggere */
}
.seq-slot.riempito:hover { background: var(--lilla-200); }
.seq-slot.giusta {
  background: #D8F0D6;
  border-color: #2E7B2E;
  color: #1B5E1B;
}
.seq-slot.sbagliata {
  background: #FFD9D9;
  border-color: #C53030;
  color: #7B1A1A;
}

/* ---- Sfida — selettore difficoltà (gattino / lince / tigre) ----
   Slider orizzontale con thumb a forma di nota (♩): track + rail-fill + thumb
   sono pura decorazione (pointer-events: none). I 3 <button> sotto coprono
   tutta la larghezza (flex: 1) → hit-target ≈33% viewport × ~90px, click
   rock-solid su desktop (mouse), smartphone (touch) e tastiera (tab+Enter). */
.sfida-intro-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
}
/* Header account nella schermata "Benvenuto / Crea profilo": mostra l'email
   loggata e un bottone Logout. Visibile soprattutto dopo clear cache su mobile,
   quando Firebase Auth resta loggato in IndexedDB ma l'app vede stato vuoto
   e mostra "crea profilo" — l'utente può uscire dall'account da qui. */
.benvenuto-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 14px;
  background: var(--lilla-50, #FAF4FA);
  border: 1px solid var(--lilla-200);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: 12px;
  max-width: 90vw;
}
.benvenuto-account .ba-info strong { color: var(--ink-700); }
.benvenuto-account .ba-logout {
  padding: 4px 12px;
  font-size: 0.82rem;
  border-radius: 999px;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--ko-300, #ECC);
  color: var(--ko-700, #8B2020);
  cursor: pointer;
}
.benvenuto-account .ba-logout:hover {
  background: var(--ko-bg, #FFE9E9);
  border-color: var(--ko-500, #C53030);
}

/* Bottone secondario per la "Sfida Dettato" — separato dal "Via!" classico */
.sfida-divisore {
  margin: 12px auto 6px;
  font-size: 0.85rem;
  color: var(--ink-500);
  letter-spacing: 0.5px;
}
.sfida-btn-dettato {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 20px;
  background: var(--lilla-100);
  border: 2px solid var(--lilla-300);
  border-radius: var(--radius-pill);
  color: var(--lilla-700, var(--ink-700));
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 160ms ease, transform 100ms ease;
}
.sfida-btn-dettato:hover { background: var(--lilla-200); transform: translateY(-1px); }
.sfida-btn-dettato .sd-spec {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.3px;
}

.sfida-difficolta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px auto 0;
  /* Forzo larghezza viewport: il container padre (.sfida-intro-body) ha
     align-items: center con "fit-content" implicito sui figli — questo
     selettore continuava a comparire stretto. Con 95vw e max-width: 95vw
     occupa quasi tutto il viewport reale. */
  width: 95vw !important;
  max-width: 720px !important;
  padding: 0 6px;
}
.sd-slider {
  position: relative;
  width: 100%;
  display: flex;
  padding: 34px 0 4px; /* spazio in alto per rail+thumb, visibili sopra i bottoni */
}
/* Rail e fill posizionati nel bordo superiore del contenitore. Decorativi. */
.sd-rail, .sd-rail-fill {
  position: absolute;
  top: 32px; /* sopra i bottoni */
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
  transform: translateY(-50%);
}
.sd-rail {
  left: 0;
  width: 100%;
  background: var(--lilla-100);
  border: 1.5px solid var(--lilla-200);
}
.sd-rail-fill {
  left: 0;
  background: linear-gradient(to right, var(--ambra-300), var(--ambra-500));
  transition: width 220ms ease;
}
.sd-thumb {
  position: absolute;
  top: 32px;
  width: 36px; height: 36px;
  background: var(--fondo-pannello);
  border: 2.5px solid var(--ambra-500);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--ink-700);
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 10px rgba(184, 134, 0, 0.35);
  pointer-events: none;
  transition: left 220ms ease;
  z-index: 3;
}
/* I 3 button: nessun bordo/sfondo, occupano tutta la larghezza flex. */
.sd-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 18px 4px 2px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 70px;
  position: relative;
  z-index: 2;
  border-radius: 10px;
  transition: background 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sd-btn:hover { background: rgba(184, 134, 0, 0.06); }
.sd-btn:focus-visible { outline: 2px solid var(--ambra-500); outline-offset: 2px; }
.sd-btn-emoji {
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 180ms ease, transform 180ms ease;
}
.sd-btn.sel .sd-btn-emoji { opacity: 1; transform: scale(1.15); }
.sd-btn-nome {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lilla-500);
  transition: color 180ms ease;
}
.sd-btn.sel .sd-btn-nome { color: var(--ambra-700, var(--lilla-700)); }
.sd-info {
  font-size: 0.92rem;
  color: var(--ink-500);
  text-align: center;
}
.sd-info strong { color: var(--ink-700); font-size: 1.05rem; }
@media (max-height: 420px) {
  .sd-slider { padding: 28px 0 2px; }
  .sd-rail, .sd-rail-fill, .sd-thumb { top: 26px; }
  .sd-btn { min-height: 58px; padding: 14px 4px 2px; }
  .sd-btn-emoji { font-size: 1.3rem; }
}

/* ---- Tutorial iniziale (slide di benvenuto) ---- */
.tutorial-iniziale .ti-hero,
.tutorial-iniziale .ti-final {
  text-align: center;
  margin: 4px auto 8px;
}
.tutorial-iniziale .ti-emoji-grande {
  font-size: 3.4rem;
  line-height: 1;
  margin: 0 0 4px;
}
.tutorial-iniziale .ti-frase {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lilla-700);
  margin: 0;
}
.tutorial-iniziale .ti-frase-piccola {
  font-size: 0.95rem;
  color: var(--testo-secondario);
  margin: 6px auto;
  max-width: 480px;
}
.tutorial-iniziale .ti-paragrafo {
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 520px;
  margin: 6px auto 8px;
  color: var(--ink-700);
}
.tutorial-iniziale .ti-bullets {
  list-style: none;
  padding: 0;
  margin: 6px auto;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tutorial-iniziale .ti-bullets li {
  background: var(--lilla-50);
  border: 1.5px solid var(--lilla-200);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.9rem;
  color: var(--ink-700);
  text-align: left;
}
/* Stesso esatto stile sia per il primo (#ti-penta) sia per il secondo (#ti-esempio,
   dentro .ti-esempio-celebre): box crema, niente min-height fisso, niente overflow
   hidden — la card cresce naturalmente con l'aspect ratio del viewBox SVG. */
.tutorial-iniziale .ti-pentagramma-demo {
  width: 100%;
  max-width: 820px;
  margin: 8px auto;
  background: var(--sfondo-pentagramma, #FFFBF0);
  border: 1.5px solid var(--bordo);
  border-radius: 12px;
  padding: 8px 8px;
}
.tutorial-iniziale .ti-pentagramma-demo svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}
/* Wrapper "Inno alla gioia": niente padding/bg/border propri — lascio che
   il pentagramma interno (.ti-pentagramma-demo) abbia lo stesso aspetto del
   pentagramma della scala sopra (stessi 820px max, stesso BG, stesso bordo).
   IMPORTANTE: width 100% — senza, il flex parent (.tutorial-content con
   align-items: center) lo collassava a fit-content del titolo (~250px) e
   il pentagramma sembrava minuscolo. */
.tutorial-iniziale .ti-esempio-celebre {
  max-width: 820px;
  width: 100%;
  margin: 14px auto 0;
  padding: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
}
.tutorial-iniziale .ti-esempio-celebre .ti-pentagramma-demo {
  margin: 6px auto;        /* margine ridotto perché c'è già il titolo sopra */
}
.tutorial-iniziale .ti-esempio-celebre .ti-pentagramma-demo svg {
  width: 100% !important;
  height: auto !important;
}
.tutorial-iniziale .ti-esempio-titolo {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--lilla-700);
  text-align: center;
  margin-bottom: 4px;
}
.tutorial-iniziale .ti-esempio-azioni {
  text-align: center;
  margin-top: 8px;
}
.tutorial-iniziale .ti-esempio-azioni button { padding: 8px 22px; font-size: 0.95rem; }
.tutorial-iniziale .ti-piano-demo {
  text-align: center;
  margin: 10px 0;
}
.tutorial-iniziale .ti-piano-emoji {
  font-size: 4rem;
  line-height: 1;
}
.tutorial-iniziale .ti-mondi-anteprima {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 480px;
  margin: 10px auto;
}
.tutorial-iniziale .ti-mondo-tile {
  background: var(--lilla-50);
  border: 1.5px solid var(--lilla-200);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tutorial-iniziale .ti-mondo-tile span {
  font-size: 0.78rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--lilla-700);
}
.tutorial-iniziale .ti-modi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* sempre 4 card su una riga, niente scroll */
  gap: 8px;
  max-width: 720px;
  margin: 6px auto 4px;
}
.tutorial-iniziale .ti-modo {
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: var(--ombra-1);
  font-size: 0.78rem;          /* card piccole su una riga */
  min-width: 0;
}
.tutorial-iniziale .ti-modo strong { font-size: 0.85rem; }
.tutorial-iniziale .ti-modo span { font-size: 0.75rem; line-height: 1.2; }
.tutorial-iniziale .ti-modo-bonus {
  border-color: var(--ambra-500);
  background: linear-gradient(180deg, var(--ambra-100) 0%, var(--fondo-pannello) 100%);
}
.tutorial-iniziale .ti-modo-wip {
  border-style: dashed;
  border-color: var(--lilla-300);
  background: var(--lilla-50);
  opacity: 0.85;
}
.tutorial-iniziale .ti-modo-wip span { font-style: italic; }
.tutorial-iniziale .ti-modo-emoji {
  font-size: 1.4rem;        /* compatto per card su una riga */
  line-height: 1;
}
.tutorial-iniziale .ti-modo strong {
  font-family: var(--font-display);
  color: var(--lilla-700);
  font-size: 0.92rem;
}
.tutorial-iniziale .ti-modo span {
  font-size: 0.78rem;
  color: var(--testo-secondario);
}
.tutorial-iniziale .ti-nota {
  font-size: 0.82rem;
  color: var(--testo-secondario);
  max-width: 560px;
  margin: 4px auto 6px;     /* ridotto: meno spazio fra card mondo e paragrafo bonus */
  background: var(--lilla-50);
  border-left: 3px solid var(--ambra-500);
  padding: 7px 12px;
  border-radius: 0 8px 8px 0;
  text-align: left;
  line-height: 1.35;
}
@media (max-height: 500px) {
  .tutorial-iniziale .ti-emoji-grande { font-size: 2.6rem; }
  .tutorial-iniziale .ti-frase { font-size: 1rem; }
  .tutorial-iniziale .ti-piano-emoji { font-size: 2.6rem; }
  .tutorial-iniziale .ti-bullets li { padding: 6px 12px; font-size: 0.85rem; }
  .tutorial-iniziale .ti-mondo-tile { padding: 6px 4px; font-size: 1.2rem; }
  .tutorial-iniziale .ti-mondo-tile span { font-size: 0.68rem; }
  .tutorial-iniziale .ti-modo-emoji { font-size: 1.4rem; }
  .tutorial-iniziale .ti-modo strong { font-size: 0.82rem; }
  .tutorial-iniziale .ti-modo span { font-size: 0.7rem; }
}

/* ---- Libreria tutorial ---- */
.lt-wrap {
  max-width: 720px;
  margin: 12px auto 0;
  padding: 0 4px 12px;
  display: flex;
  flex-direction: column;
}
.lt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.lt-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--fondo-pannello);
  border: 1.5px solid var(--lilla-200);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-700);
  transition: transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease;
  box-shadow: var(--ombra-1);
}
.lt-card:hover {
  transform: translateY(-2px);
  border-color: var(--lilla-400);
  box-shadow: var(--ombra-2);
}
.lt-card-bloccato {
  cursor: default;
  background: var(--lilla-50);
  border-style: dashed;
  opacity: 0.85;
}
.lt-card-bloccato:hover { transform: none; box-shadow: var(--ombra-1); border-color: var(--lilla-200); }
.lt-card-emoji {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}
.lt-card-bloccato .lt-card-emoji { font-size: 1.4rem; opacity: 0.7; }
.lt-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lt-card-titolo {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-700);
  font-weight: 700;
}
.lt-card-bloccato .lt-card-titolo {
  color: var(--lilla-500);
  letter-spacing: 0.1em;
}
.lt-card-desc {
  font-size: 0.82rem;
  color: var(--testo-secondario);
  line-height: 1.3;
}
.lt-card-bloccato .lt-card-desc {
  font-style: italic;
}
/* Meta box (categoria + stato) sulla destra della card */
.lt-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.lt-card-cat {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lilla-500);
  padding: 2px 8px;
  background: var(--lilla-50);
  border-radius: 999px;
  white-space: nowrap;
}
.lt-card-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.lt-card-status.visto {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border: 1px solid var(--ok-500);
}
.lt-card-status.nuovo {
  background: var(--ambra-100);
  color: var(--ambra-700);
  border: 1px solid var(--ambra-500);
}
.lt-card-status.bloccato {
  background: var(--lilla-100);
  color: var(--lilla-700);
  border: 1px solid var(--lilla-300);
  font-size: 0.85rem;
  padding: 2px 8px;
}
@media (max-height: 500px) {
  .lt-wrap { gap: 6px; }
  .lt-cards { gap: 8px; }
  .lt-card { padding: 8px 10px; gap: 8px; }
  .lt-card-emoji { font-size: 1.3rem; }
  .lt-card-titolo { font-size: 0.92rem; }
  .lt-card-desc { font-size: 0.76rem; }
  .lt-card-cat { font-size: 0.6rem; padding: 1px 6px; }
}

/* ---- Menu laterale (drawer principale) ---- */
/* Apertura: hamburger ☰ in home → slide-in da sinistra + dim fondo. Chiusura:
   tap fuori, tasto ✕, Esc. Su touch device il body è bloccato dallo scroll. */
#menu-laterale-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 27, 16, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 1000;
}
#menu-laterale-backdrop.aperto {
  opacity: 1;
  pointer-events: auto;
}
#menu-laterale {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 320px;
  max-width: 88%;
  background: var(--lilla-700);
  color: #fff;
  transform: translateX(-100%);
  transition: transform 220ms ease;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(42, 27, 16, 0.35);
  font-family: var(--font-body);
}
#menu-laterale.aperto { transform: translateX(0); }

.ml-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.ml-header img {
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  padding: 4px;
  width: 56px;
  height: 70px;
}
.ml-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ml-header-info strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-header-info span {
  font-size: 0.95rem;
  opacity: 0.88;
  color: var(--ambra-200);
}
.ml-chiudi {
  background: transparent;
  border: 1.5px solid transparent;
  color: #fff;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  transition: background 160ms ease, border-color 160ms ease, transform 100ms ease;
  font-family: inherit;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ml-chiudi svg {
  width: 18px;
  height: 18px;
  display: block;
}
.ml-chiudi:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
}
.ml-chiudi:active { transform: scale(0.94); }

.ml-sezioni {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.ml-sezioni section {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.ml-sezioni section:last-child { border-bottom: none; }

/* Sezione collapsible: header cliccabile, sub-voci nascoste fino al click. */
.ml-collapsible > .ml-titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}
.ml-collapsible > .ml-titolo:hover { background: rgba(255,255,255,0.1); }
.ml-collapsible > .ml-titolo > span:first-child { display: inline-flex; gap: 6px; align-items: center; }
.ml-chevron {
  font-size: 0.9rem;
  opacity: 0.7;
  transition: transform 220ms ease;
}
.ml-collapsible.aperta > .ml-titolo > .ml-chevron {
  transform: rotate(180deg);
}
/* Contenuti espansi: stesso fondo dark del drawer principale (così la
   "scatola" rimane uniforme), e le sub-voci dentro sono pillole lilla
   chiare che galleggiano sopra → distinzione netta sub-voci vs spazio. */
.ml-contenuti {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
  background: transparent;
}
.ml-collapsible.aperta > .ml-contenuti {
  max-height: 400px;
  padding: 6px 14px 10px;
}

/* Pulsanti standalone (non collapsible): tema dark drawer (testo bianco) */
.ml-sezioni section > button:not(.ml-titolo) {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  padding: 11px 18px;
  font-size: 0.98rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 140ms ease;
}
.ml-sezioni section > button:not(.ml-titolo):hover { background: rgba(255,255,255,0.14); }
/* Voci dentro le sezioni espanse: pillole lilla chiare con testo scuro,
   margin verticale per fare spazio tra una e l'altra → si vede chiaramente
   il fondo dark del drawer in mezzo. */
.ml-contenuti button {
  display: block;
  width: 100%;
  background: var(--lilla-100);
  border: 1.5px solid var(--lilla-200);
  text-align: left;
  padding: 9px 14px 9px 22px;
  margin: 4px 0;
  font-size: 0.94rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-700);
  border-radius: 10px;
  transition: background 140ms ease, border-color 140ms ease, transform 100ms ease;
}
.ml-contenuti button:hover {
  background: var(--lilla-200);
  border-color: var(--lilla-400);
  color: var(--lilla-700);
}
.ml-contenuti button:active { transform: scale(0.98); }
.ml-sezioni button:hover,
.ml-sezioni button:focus-visible {
  background: rgba(255,255,255,0.14);
  outline: none;
}

/* Modale Crediti: piccolo overlay con logo + autore. Apertura via voce
   "💜 Crediti" del menu laterale. Click fuori, ✕ o Esc per chiudere. */
.crediti-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 27, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  transition: opacity 200ms ease;
  padding: 20px;
}
.crediti-overlay.aperto { opacity: 1; }
.crediti-card {
  position: relative;
  background: var(--fondo-pannello, #FFFBF0);
  border: 2px solid var(--lilla-200);
  border-radius: 18px;
  padding: 28px 24px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(42, 27, 16, 0.30);
  transform: scale(0.96);
  transition: transform 220ms ease;
  /* Su smartphone con i <details> aperti il contenuto può eccedere il
     viewport. Limito l'altezza e rendo il card scrollabile internamente
     (il bottone X resta sticky in alto, vedi sotto). */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.crediti-overlay.aperto .crediti-card { transform: scale(1); }
.crediti-chiudi {
  position: sticky;
  top: 4px;
  float: right;       /* sticky + float per allineare a destra dentro il card scrollabile */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ink-500, var(--testo-secondario));
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.crediti-chiudi svg { width: 16px; height: 16px; display: block; }
.crediti-chiudi:hover {
  background: var(--lilla-50);
  border-color: var(--lilla-200);
  color: var(--lilla-700);
}
.crediti-chiudi:active { transform: scale(0.94); }
.crediti-titolo {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--lilla-700);
  letter-spacing: -0.01em;
}
.crediti-tagline {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--ink-700);
  line-height: 1.4;
}
.crediti-info {
  margin: 0 0 22px;
  font-size: 0.82rem;
  color: var(--ink-500, var(--testo-secondario));
  line-height: 1.4;
}
.crediti-autore {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-500, var(--testo-secondario));
  letter-spacing: 0.02em;
}
/* Conferma in-app: piccola card con 2 bottoni, riusa lo stile crediti */
.conferma-card { max-width: 380px; padding: 24px 20px 18px; text-align: center; }
.conferma-azioni {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.conferma-azioni button {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.95rem;
}
/* Sezioni espandibili (Privacy, Tecnologie) nei crediti */
.crediti-details {
  text-align: left;
  margin: 8px 0;
  background: var(--lilla-50);
  border: 1px solid var(--lilla-200);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 0.82rem;
}
.crediti-details > summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 700;
  color: var(--lilla-700);
  list-style: none;
  position: relative;
  padding-right: 22px;
}
.crediti-details > summary::-webkit-details-marker { display: none; }
.crediti-details > summary::after {
  content: '▸';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform 160ms ease;
}
.crediti-details[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
}
.crediti-details p {
  margin: 6px 0;
  color: var(--ink-700);
  line-height: 1.4;
}
.crediti-details p:last-child { margin-bottom: 10px; }
.crediti-lista,
.crediti-tech {
  margin: 4px 0 8px;
  padding: 0 0 0 16px;
  color: var(--ink-700);
  line-height: 1.5;
}
.crediti-lista li,
.crediti-tech li {
  margin-bottom: 2px;
  font-size: 0.8rem;
}
.crediti-autore .papavero {
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.4em;
  margin: 0 2px;
}

/* Picker "Cambia aiutante": riusa la card stilizzata dei crediti, aggiunge una
   griglia di tutti i famigli. Click su una tile → salva e ricarica. */
.aiutante-picker-card { max-width: 560px; }

/* Overlay impostazioni rapide MIDI: card un po' più larga della crediti-card
   standard (380px) per far stare le 2 toggle senza forzare scroll su mobile. */
.midi-rapid-card { max-width: 560px; }
.midi-rapid-card .impostazioni-toggle { text-align: left; }
.midi-rapid-card .crediti-titolo { white-space: nowrap; }
.ap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 14px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px;
}
.ap-tile {
  background: var(--lilla-50);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  color: var(--ink-700);
  transition: border-color 140ms ease, background 140ms ease, transform 100ms ease;
}
.ap-tile:hover {
  border-color: var(--lilla-300);
  background: var(--lilla-100);
  transform: translateY(-1px);
}
.ap-tile.sel {
  border-color: var(--ambra-500);
  background: var(--ambra-100);
  box-shadow: 0 2px 8px rgba(184, 134, 0, 0.25);
}
.ap-tile img { display: block; width: 64px; height: 80px; object-fit: contain; }
.ap-tile span { font-size: 0.78rem; line-height: 1.1; text-align: center; }

/* Sezione logout: distinta in fondo, colore tinto per segnalare azione "uscita". */
.ml-sezione-logout {
  border-bottom: none !important;
  margin-top: auto;
}
.ml-logout {
  color: #FFD2B0 !important;
}
.ml-logout:hover {
  background: rgba(255, 138, 92, 0.18) !important;
  color: #FFE0C0 !important;
}

.ml-footer {
  padding: 10px 16px;
  font-size: 0.78rem;
  opacity: 0.55;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ml-footer-sw {
  font-size: 0.72rem;
  font-family: 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  opacity: 0.85;
}
/* Su smartphone il footer del menù è ridondante: le info (since + SW version)
   sono accessibili via "Crediti". Liberiamo spazio nel drawer. */
@media (max-width: 700px), (max-height: 600px) {
  .ml-footer { display: none; }
}
.crediti-meta {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--ink-500);
  text-align: center;
  font-family: 'SF Mono', 'Cascadia Mono', Consolas, monospace;
  opacity: 0.85;
}

body.menu-laterale-aperto { overflow: hidden; }

@media (max-height: 420px) {
  .ml-header { padding: 10px 14px; }
  .ml-header img { width: 44px; height: 56px; }
  .ml-header-info strong { font-size: 1.05rem; }
  .ml-sezioni button { padding: 9px 16px; font-size: 0.95rem; }
}
/* Crediti compatti su smartphone landscape: l'overlay deve stare nel viewport
   senza scroll verticale quando i <details> Privacy/Tecnologie sono chiusi. */
@media (max-height: 520px) {
  .crediti-card { padding: 16px 18px 14px; }
  .crediti-titolo { font-size: 1.4rem; margin: 0 0 4px; }
  .crediti-tagline { margin: 0 0 4px; font-size: 0.92rem; }
  .crediti-info { margin: 0 0 8px; font-size: 0.78rem; }
  .crediti-meta { margin-top: 2px; font-size: 0.72rem; }
  .crediti-details { margin: 4px 0; }
  .crediti-details > summary { padding: 6px 0; }
  .crediti-autore { font-size: 0.74rem; margin-top: 6px; }
}
@media (max-width: 380px) {
  #menu-laterale { width: 280px; }
}

/* ---- Modulo Canta (solfeggio cantato) ---- */
/* Badge BETA: piccolo, tondeggiante, ambra, in alto a destra sulla card e
   dopo il titolo nella topbar. Serve a segnalare che la feature è nuova
   e potrebbe avere bug (pitch detection su voce di bambino è delicata). */
.card-mondo-beta,
.topbar-beta {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #422006;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
  font-family: var(--font-body, sans-serif);
}
.card-mondo-beta {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.68rem;
  padding: 3px 8px;
}
.topbar-beta { margin-left: 6px; font-size: 0.58rem; }

.canto-intro-body {
  padding: 16px 12px;
}

/* ===========================================================
   Mic indicator — pillola in basso-sx (sopra il midi-indicator)
   visibile solo nelle pagine canto. Stile coerente col midi-indicator.
   =========================================================== */
.mic-indicator {
  position: fixed;
  left: 16px;
  bottom: 64px;  /* sopra il midi-indicator */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--sfondo-pannello);
  border: 2px solid #B0A7AE;
  border-radius: 999px;
  box-shadow: var(--ombra-soft);
  font-size: 0.85rem;
  color: #7A6E74;
  font-weight: 600;
  z-index: 20;
  pointer-events: auto;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.mic-indicator:hover { background: rgba(123, 75, 155, 0.08); }
.mic-indicator .mic-icon { font-size: 1.2rem; line-height: 1; }
.mic-indicator .mic-led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #bbb;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  transition: background 80ms linear;
}
.mic-indicator.attivo { border-color: #7B4B9B; color: #4A2A6A; }
@media (max-width: 700px), (max-width: 900px) and (max-height: 600px) {
  .mic-indicator {
    left: 8px;
    bottom: 52px;
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .mic-indicator .mic-led {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 8px; height: 8px;
    border: 1.5px solid var(--sfondo-pannello);
  }
}

.mic-popover {
  position: fixed;
  left: 16px;
  bottom: 112px;
  z-index: 25;
  background: var(--sfondo-pannello);
  border: 2px solid #B0A7AE;
  border-radius: 12px;
  padding: 14px;
  min-width: 280px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  animation: fade-in 180ms ease;
}
@media (max-width: 700px) {
  .mic-popover {
    left: 8px;
    right: 8px;
    bottom: 96px;
    min-width: 0;
  }
}
.canto-nome-suggerito {
  font-size: 1.4rem;
  font-family: var(--font-display);
  color: var(--lilla-700);
  margin: 6px 0 4px;
}

/* Canzoncina: pentagramma multiriga. Su PC e mobile lascio scroll-y se la
   canzoncina ha tante frasi (max-height: 60vh, overflow auto). Le regole di
   .esercizio-play (max-height: 48vh, > * max-width:640) qui non si applicano. */
.schermata.canto-canzoncina .pentagramma-box {
  max-height: 60vh !important;
  height: auto !important;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start !important;
  max-width: 1000px;
  width: 100%;
}
.schermata.canto-canzoncina .pentagramma-box > * {
  max-width: 1000px !important;
  width: 100% !important;
}
.schermata.canto-canzoncina .pentagramma-box svg {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.canto-feedback {
  max-width: 520px;
  margin: 8px auto 0;
  width: 100%;
}
/* Pitch meter: barra orizzontale con centro = nota giusta.
   La fill si sposta a sinistra/destra rispetto al centro in funzione dei cent
   dal target, e si restringe quando sei più lontano (visivamente meno "pieno"). */
.canto-meter {
  position: relative;
  height: 20px;
  background: var(--lilla-100);
  border: 1.5px solid var(--lilla-200);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 420px;
}
.canto-meter-center {
  position: absolute;
  top: -4px; bottom: -4px;
  left: 50%;
  width: 2px;
  background: var(--lilla-500);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.canto-meter-fill {
  position: absolute;
  top: 2px; bottom: 2px;
  left: 50%;
  width: 60%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 999px;
  transform-origin: center;
  transform: translateX(-50%) scaleX(0);
  transition: transform 120ms ease;
}
.canto-meter-fill.ok {
  background: linear-gradient(90deg, #4ade80, #16a34a);
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.5);
}
.canto-pitch-info {
  text-align: center;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--ink-600, var(--ink-700));
  font-variant-numeric: tabular-nums;
}
.canto-fine .titolo { color: var(--lilla-700); }

/* ===========================================================
   Aiutante mobile: bottoncino in basso-dx + overlay con gatto grande.
   Mostrato solo su mobile landscape (max-height: 520px) e attivato dal
   modulo aiutanteMobile.js (vedi js/gatto/aiutanteMobile.js).
   =========================================================== */
.aiutante-mobile-trigger {
  position: fixed;
  bottom: 8px;
  right: 8px;
  width: 36px;                  /* allineato al midi-indicator mobile */
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--fondo-pannello, #FFFBF0);
  border: 2px solid var(--lilla-400, #A977B5);
  cursor: pointer;
  display: none;                /* nascosto di default; visibile solo via media query mobile */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(58, 29, 63, 0.28);
  z-index: 50;
  animation: am-rimbalza 2.6s ease-in-out infinite;
  overflow: hidden;
}
.aiutante-mobile-trigger img {
  width: 30px;
  height: auto;
  display: block;
  pointer-events: none;
}
.aiutante-mobile-trigger:hover {
  transform: scale(1.08);
  background: var(--lilla-50, #FAF4FA);
}
@keyframes am-rimbalza {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Overlay full-screen semi-trasparente (la pagina sotto si vede leggermente) */
.aiutante-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  animation: am-fade-in 180ms ease-out;
}
.aiutante-mobile-overlay.chiusura { animation: am-fade-out 160ms ease-in forwards; }
@keyframes am-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes am-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.aiutante-mobile-overlay .amov-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: var(--fondo-pannello, #FFFBF0);
  border: 2px solid var(--lilla-300, #C8A2D0);
  border-radius: 18px;
  padding: 12px 14px;
  max-width: 560px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  animation: am-pop 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes am-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.aiutante-mobile-overlay .amov-gatto {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  box-shadow: none;
}
.aiutante-mobile-overlay .amov-hint {
  font-size: 0.7rem;
  color: var(--ink-500, var(--testo-secondario));
  font-style: italic;
  text-align: center;
  pointer-events: none;
  line-height: 1.15;
}
.aiutante-mobile-overlay .amov-gatto img {
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: transform 200ms ease;
}
.aiutante-mobile-overlay .amov-gatto:active img { transform: scale(0.95); }
.aiutante-mobile-overlay .amov-gatto {
  position: relative;
}
.aiutante-mobile-overlay .amov-gatto.arrabbiato img {
  animation: am-shake 220ms ease-in-out 0s 6;
  filter: hue-rotate(-10deg) saturate(1.4) brightness(0.95);
}
.aiutante-mobile-overlay .amov-gatto.arrabbiato::before {
  content: '💢';
  position: absolute;
  top: -6px;
  right: 4px;
  font-size: 1.6rem;
  animation: am-pop-icon 500ms ease-out;
  z-index: 2;
  pointer-events: none;
}
.aiutante-mobile-overlay .amov-gatto.furioso img {
  filter: hue-rotate(-20deg) saturate(1.8) brightness(0.9) contrast(1.1);
  animation: am-shake 180ms ease-in-out 0s 12;
}
.aiutante-mobile-overlay .amov-gatto.furioso::before {
  content: '💢💢💢';
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 1.2rem;
  letter-spacing: -2px;
  animation: am-pop-icon 400ms ease-out, am-tremola 300ms ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes am-pop-icon {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  50%  { transform: scale(1.2) rotate(0); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes am-tremola {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg) scale(1.06); }
}
@keyframes am-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.aiutante-mobile-overlay .amov-fumetto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink-700, #2A1B10);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aiutante-mobile-overlay .amov-fumetto p { margin: 0; }
.aiutante-mobile-overlay .amov-fumetto button {
  align-self: flex-start;
  padding: 6px 14px;
  min-height: 34px;
  font-size: 0.9rem;
  border-radius: 10px;
  cursor: pointer;
}
.aiutante-mobile-overlay .amov-fumetto.furioso-msg p { color: #C44569; font-weight: 700; }

/* Visibile solo su mobile landscape (≤520px alto). Su PC il gatto-compagno
   tradizionale resta in basso-dx come prima. */
@media (max-height: 520px) {
  .aiutante-mobile-trigger { display: flex; }
}

/* Su mobile landscape compatto, riduco il gatto e dispongo verticalmente per non
   andare in scroll quando il fumetto è lungo */
@media (max-height: 380px) {
  .aiutante-mobile-overlay .amov-card { padding: 8px 10px; gap: 10px; max-width: 480px; }
  .aiutante-mobile-overlay .amov-gatto { width: 100px; height: 125px; }
  .aiutante-mobile-overlay .amov-fumetto { font-size: 0.85rem; }
}

/* ===========================================================
   Smartphone landscape — compattazione benvenuto / scelta gatto / selettore profili
   per stare in viewport e gestire la tastiera virtuale che mangia metà schermo.
   =========================================================== */
@media (max-height: 520px) {
  /* H1 compatto su tutte le schermate di onboarding/selezione */
  .schermata h1 {
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  /* Forza margin-top dei wrapper centrali (sovrascrive gli inline-style 40/28/16px) */
  .schermata > .centro[style*="margin-top"] {
    margin-top: 6px !important;
  }
  .schermata.flex-colonna {
    gap: 10px !important;
  }
  /* Scelta famiglio: tile più piccole */
  .griglia-famigli { gap: 8px; }
  /* Selezione profili: lascio invariata griglia/card (layout originale era buono) */
  /* Header account compatto */
  .benvenuto-account {
    padding: 4px 8px;
    font-size: 0.78rem;
  }
  /* Input nome bambino: meno padding verticale per stare con tastiera */
  #input-nome-bambino {
    padding: 8px 14px !important;
    font-size: 1rem;
  }
  /* Paragrafi secondari più piccoli */
  .schermata .centro .secondario {
    font-size: 0.85rem !important;
    margin-top: 4px !important;
  }
}

/* ===========================================================
   Overlay limite tempo giornaliero (limite-tempo + overlayLimite.js)
   =========================================================== */
.overlay-limite {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ovl-fade-in 200ms ease-out;
}
.overlay-limite.sera { background: rgba(13, 20, 50, 0.85); }
.overlay-limite.giorno { background: rgba(20, 60, 30, 0.7); }

.overlay-limite .ovl-card {
  max-width: 380px;
  width: 100%;
  background: #FFFBF0;
  border-radius: 18px;
  padding: 14px 18px 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: ovl-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.overlay-limite .ovl-art {
  /* PC: SVG orizzontale (aspect 320:200), full width del card */
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 0 12px;
}
.overlay-limite .ovl-titolo {
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: #3A1D3F;
}
.overlay-limite .ovl-msg {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: #2A1B10;
  line-height: 1.4;
}
.overlay-limite .ovl-azioni {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.overlay-limite .ovl-azioni button {
  width: 100%;
}

@keyframes ovl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ovl-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Smartphone landscape: pannellino ORIZZONTALE (largo e basso).
   SVG orizzontale a sinistra (compatto), testo+pulsanti a destra in colonna,
   pulsanti in fila su una sola riga per non rubare altezza. */
@media (max-height: 520px) {
  .overlay-limite { padding: 6px; }
  .overlay-limite .ovl-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    padding: 8px 12px;
  }
  .overlay-limite .ovl-art {
    flex: 0 0 auto;
    width: 200px;             /* SVG orizzontale 320×200 → height auto = 125px */
    height: auto;
    margin: 0;
  }
  .overlay-limite .ovl-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .overlay-limite .ovl-titolo { font-size: 1rem; margin: 0; }
  .overlay-limite .ovl-msg { font-size: 0.82rem; margin: 0 0 4px; line-height: 1.25; }
  .overlay-limite .ovl-azioni {
    flex-direction: row;       /* pulsanti in fila, non in colonna */
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
  }
  .overlay-limite .ovl-azioni button {
    flex: 1 1 auto;
    padding: 5px 10px;
    min-height: 28px;
    font-size: 0.82rem;
  }
}

/* Banner inline nella home quando il limite è raggiunto */
.home-banner-limite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFE9A8 0%, #FFD166 100%);
  border: 2px solid #B8860B;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(184, 134, 11, 0.25);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.home-banner-limite:hover,
.home-banner-limite:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(184, 134, 11, 0.35);
  outline: none;
}
.home-banner-limite .hbl-icona {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.home-banner-limite .hbl-testo {
  font-weight: 700;
  color: #2A1B10;
  line-height: 1.3;
}

/* Mondi "addormentati" — clessidra al posto dell'emoji, opacità ridotta.
   Restano cliccabili (per riaprire l'overlay) ma sembrano disabilitati. */
.card-mondo-limite {
  filter: grayscale(0.8);
  opacity: 0.6;
  cursor: pointer;  /* invece di not-allowed → l'utente può riaprire l'overlay */
}
.card-mondo-limite .card-mondo-emoji {
  position: relative;
}
.card-mondo-limite .card-mondo-emoji::after {
  content: '⏳';
  position: absolute;
  bottom: -2px;
  right: -8px;
  font-size: 0.7em;
  filter: grayscale(0);
  opacity: 1;
}
.home-limite-attivo .card-mondo-status {
  color: #6B3E0B !important;
  font-weight: 700;
}

/* Menu laterale: voci disattivate visivamente quando limite raggiunto.
   Eccezioni cliccabili: cambia-profilo, logout, admin (vedi JS). */
#menu-laterale.ml-limite-attivo button[data-action]:not([data-action="cambia-profilo"]):not([data-action="logout"]):not([data-action="admin"]) {
  filter: grayscale(0.7);
  opacity: 0.45;
}
#menu-laterale.ml-limite-attivo button[data-action="cambia-profilo"]::after {
  content: ' ⏳';
  opacity: 0.85;
}

/* ===========================================================
   tutorialFrame — overlay fullscreen uniforme per tutti i tutorial.
   position: fixed inset 0 → copre il viewport indipendentemente dal parent
   (risolve il bottom-cut dei pulsanti dovuto a scroll esterno).
   =========================================================== */
.tutorial-frame {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Stesso sfondo "quaderno" del body (home/mondi): crema caldo con due aloni
     pastello agli angoli. Il tutorial sembra parte dell'app, non un overlay
     isolato. Footer banda crema chiara per stacco dei pulsanti. */
  background:
    radial-gradient(circle at 8% 12%,  rgba(203, 157, 216, 0.18) 0, transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(232, 169, 0, 0.12) 0, transparent 42%),
    var(--fondo-app, #F9EFD8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* uso 100dvh tramite inset:0 (più robusto di height:100dvh in alcuni browser) */
}

/* === Slide copertina (indice 0) === */
.tf-cover {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  gap: 14px;
}
.tf-cover-emoji {
  font-size: clamp(3rem, 12vh, 5.5rem);
  line-height: 1;
}
.tf-cover-titolo {
  margin: 0;
  font-size: clamp(1.4rem, 5vh, 2.2rem);
  color: var(--lilla-700, #6B3E7C);
  font-weight: 800;
  line-height: 1.15;
}
.tf-cover-sottotitolo {
  margin: 0;
  font-size: clamp(1rem, 2.6vh, 1.15rem);
  color: var(--ink-600, var(--ink-700));
  max-width: 540px;
  line-height: 1.35;
}

/* === Narratore (slide >0) === */
.tf-narratore {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 0;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.tf-famiglio {
  flex: 0 0 auto;
  width: 60px;
  height: 75px;
  object-fit: contain;
}
.tf-fumetto {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--fondo-pannello, #FFFBF0);  /* crema, risalta sul fondo lilla-50 */
  border: 2px solid var(--lilla-300, #C8A2D0);
  border-radius: 14px;
  padding: 10px 14px 12px;                      /* più padding sotto, niente cut */
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-700, #2A1B10);
  /* niente max-height: il fumetto cresce naturalmente; il contenuto sotto si scala */
}
.tf-fumetto p { margin: 0; }

/* === Contenuto (slide >0) === */
/* tf-body raggruppa narratore + content, così su PC si possono centrare
   verticalmente come gruppo (gatto resta vicino al contenuto, niente dispersione). */
.tf-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tf-content {
  flex: 1 1 auto;
  min-height: 0;            /* CRUCIALE: senza, flex non rispetta il contenitore */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* PC / schermi alti: centra narratore+contenuto come blocco unico verticalmente.
   Il contenuto NON espande a riempire (flex: 0 1 auto) → resta vicino al narratore.
   Su mobile (≤520px) resta in alto perché è più naturale leggere. */
@media (min-height: 600px) {
  .tf-body { justify-content: center; }
  .tf-content { flex: 0 1 auto; max-height: 100%; }
}

/* B mirato: su PC i pentagrammi/tastiere dentro il tutorial possono crescere
   fino a ~880-960px (invece dei 680 di mobile) per occupare meglio la pagina. */
@media (min-width: 900px) {
  .tutorial-frame .pentagramma-box {
    max-width: 880px;
  }
  /* Aiutante (gatto narratore) più grande su PC, restando proporzionato al fumetto. */
  .tf-famiglio {
    width: 100px;
    height: 125px;
  }
}

/* === Freccia "scorri giù" pulsante (laterale, non in centro per non disturbare la lettura) === */
.tf-scroll-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  transform: translateY(8px);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(107, 62, 124, 0.78);    /* lilla-700 con alpha */
  border: none;
  color: #FFFBF0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(58, 29, 63, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 5;
}
.tf-scroll-hint.visibile {
  opacity: 0.85;
  pointer-events: auto;
  transform: translateY(0);
  animation: tf-pulse 1.4s ease-in-out infinite;
}
.tf-scroll-hint:hover { opacity: 1; }
.tf-scroll-hint-arrow {
  display: inline-block;
  margin-top: -5px;       /* visivamente centra il glifo "⌄" */
  font-weight: 800;
}
@keyframes tf-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* il body contiene la freccina come overlay relativo */
.tf-body { position: relative; }

/* === Barra di progresso === */
.tf-progress {
  flex: 0 0 auto;
  height: 3px;
  background: var(--lilla-100, #EDE5F0);
  position: relative;
}
.tf-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--lilla-500, #8F6899);
  transition: width 220ms ease;
}

/* === Footer fisso === */
/* Footer: full-width crema (banda uniforme), contenuto bottoni centrato a 880px. */
.tf-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  background: var(--fondo-pannello, #FFFBF0);
  border-top: 1px solid var(--lilla-100, #EDE5F0);
  width: 100%;
  box-sizing: border-box;
  /* Centro il contenuto interno via padding/max-width sui figli, non sull'intera footer */
  justify-content: center;
}
.tf-footer > * {
  /* I bottoni stessi sono centrati come gruppo: tf-x flex 0, tf-prev/next flex 1 con max-width */
}
.tf-footer .tf-prev,
.tf-footer .tf-next {
  max-width: 380px;
}
/* X come .th-chiudi del tutorial-home: sober icon button (non un cerchio prominente). */
.tf-x {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ink-500, var(--testo-secondario));
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}
.tf-x svg { width: 18px; height: 18px; display: block; }
.tf-x:hover {
  background: var(--lilla-50, #FAF4FA);
  border-color: var(--lilla-200, #DCC0E3);
  color: var(--lilla-700, #6B3E7C);
}
.tf-x:active { transform: scale(0.94); }
.tf-prev, .tf-next {
  flex: 1 1 auto;
  min-height: 42px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  padding: 0 12px;
}
.tf-prev {
  background: var(--lilla-50, #FAF4FA);
  color: var(--lilla-700, #6B3E7C);
  border: 1.5px solid var(--lilla-300, #C8A2D0);
}
.tf-prev:hover:not(:disabled) { background: var(--lilla-100, #EDE5F0); }
.tf-prev:disabled { opacity: 0.4; cursor: not-allowed; }
.tf-next {
  background: var(--lilla-700, #6B3E7C);
  color: white;
  border: 1.5px solid var(--lilla-700, #6B3E7C);
}
.tf-next:hover { background: var(--lilla-800, #5A2D6F); }

/* ===========================================================
   esercizioFrame — telaio pre-esercizio (overlay come tutorialFrame ma con
   header Esci + titolo, body con pentagramma+narratore+MIDI strict, footer
   con un solo CTA "Pronto!".
   =========================================================== */
.esercizio-frame {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(circle at 8% 12%,  rgba(203, 157, 216, 0.18) 0, transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(232, 169, 0, 0.12) 0, transparent 42%),
    var(--fondo-app, #F9EFD8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* PC default: footer con info+pulsanti centrati, mobile landscape switch a 2 colonne */
.ef-info {
  flex: 1 1 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ef-titolo {
  font-size: 1.1rem;
  color: var(--lilla-700, #6B3E7C);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ef-sottotitolo {
  font-size: 0.82rem;
  color: var(--ink-500, var(--testo-secondario));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ef-azioni-secondarie {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.esercizio-frame .ef-azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.esercizio-frame .ef-esci {
  flex: 0 0 auto;
  background: transparent;
  border: 1.5px solid var(--lilla-300, #C8A2D0);
  color: var(--lilla-700, #6B3E7C);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 34px;
  box-shadow: none;
}
.esercizio-frame .ef-esci:hover { background: var(--lilla-50, #FAF4FA); }

.ef-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@media (min-height: 600px) {
  .ef-body { justify-content: center; }
}

.ef-pentagramma {
  width: 100%;
  display: flex;
  justify-content: center;
}

.ef-narratore {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 720px;
}
.ef-famiglio {
  flex: 0 0 auto;
  width: 60px;
  height: 75px;
  object-fit: contain;
}
.ef-fumetto {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--fondo-pannello, #FFFBF0);
  border: 2px solid var(--lilla-300, #C8A2D0);
  border-radius: 14px;
  padding: 10px 14px 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-700, #2A1B10);
}
.ef-fumetto p { margin: 0; }

.ef-midi-strict {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.esercizio-frame .ef-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;          /* PC: tutto in colonna, info sopra, CTA sotto centrato */
  align-items: center;
  gap: 8px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  background: var(--fondo-pannello, #FFFBF0);
  border-top: 1px solid var(--lilla-100, #EDE5F0);
  width: 100%;
  box-sizing: border-box;
}
.esercizio-frame .ef-cta {
  flex: 0 0 auto;
  min-height: 42px;
  min-width: 220px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  padding: 6px 22px;
  white-space: nowrap;
  box-shadow: none;
}

/* PC: aiutante più grande (allineato a tutorialFrame) */
@media (min-width: 900px) {
  .ef-famiglio { width: 100px; height: 125px; }
}

/* Smartphone landscape: footer 3 colonne — [Esci+Ottava] | [Title+Sub] | [Pronto] */
@media (max-height: 520px) {
  .esercizio-frame .ef-footer {
    flex-direction: row;
    align-items: stretch;        /* tutte le colonne stessa altezza */
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px max(6px, env(safe-area-inset-bottom));
  }
  .esercizio-frame .ef-azioni-sx {
    display: flex;
    flex-direction: column;      /* Esci sopra, Ottava sotto (compatte) */
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
  }
  .esercizio-frame .ef-info {
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 auto;
  }
  .esercizio-frame .ef-titolo { font-size: 0.95rem; line-height: 1.2; white-space: normal; }
  .esercizio-frame .ef-sottotitolo { font-size: 0.75rem; line-height: 1.2; white-space: normal; }
  .esercizio-frame .ef-esci { padding: 2px 10px; min-height: 26px; font-size: 0.75rem; }
  .esercizio-frame .ef-midi-strict { margin: 0; }
  .midi-strict-toggle { padding: 2px 8px; font-size: 0.72rem; margin: 0; }
  .esercizio-frame .ef-cta {
    flex: 0 0 auto;
    min-height: auto;
    min-width: 130px;
    font-size: 1rem;
    padding: 6px 18px;
    align-self: stretch;         /* CTA alta come tutto il footer */
  }
  .ef-body { padding: 6px 12px; gap: 6px; }
  .ef-narratore { gap: 8px; }
  .ef-famiglio { width: 44px; height: 55px; }
  .ef-fumetto { font-size: 0.85rem; padding: 7px 10px 9px; line-height: 1.32; }
}

/* === Smartphone landscape (altezza ridotta) === */
@media (max-height: 520px) {
  .tf-cover { padding: 14px 18px; gap: 8px; }
  .tf-cover-emoji { font-size: clamp(2.5rem, 16vh, 4rem); }
  .tf-cover-titolo { font-size: clamp(1.2rem, 6vh, 1.7rem); }
  .tf-cover-sottotitolo { font-size: 0.95rem; }

  .tf-narratore { padding: 6px 12px 0; gap: 8px; }
  .tf-famiglio { width: 44px; height: 55px; }
  .tf-fumetto {
    font-size: 0.85rem;
    line-height: 1.32;
    padding: 7px 10px 9px;
    /* niente max-height: il fumetto cresce naturalmente; .tf-content si scala */
  }
  .tf-content { padding: 6px 12px; gap: 6px; }
  .tf-footer { padding: 6px 12px max(6px, env(safe-area-inset-bottom)); gap: 6px; }
  .tf-x { width: 38px; height: 38px; }
  .tf-prev, .tf-next { min-height: 38px; font-size: 0.9rem; }
}

/* === Smartphone molto piccoli === */
@media (max-height: 380px) {
  .tf-narratore { padding: 4px 10px 0; }
  .tf-famiglio { width: 36px; height: 45px; }
  .tf-fumetto { font-size: 0.8rem; padding: 6px 8px 8px; }
}