/* Quiz 3ª PIAs — quiz
   Domanda, opzioni, esito, professore in alto, cronometro. */

/* ---------- quiz ---------- */
.quiz-testa { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--foglio); color: var(--inchiostro-2); }
.chip-argomento { background: var(--materia-chiara); color: var(--inchiostro); }
.chip-tipo { background: var(--evidenziatore); color: #3A2E00; }

.card-domanda { background: var(--foglio); border-radius: var(--raggio); padding: 18px 16px 16px; box-shadow: var(--ombra); }
.testo-domanda { font-size: 1.18rem; font-weight: 700; line-height: 1.4; margin: 0 0 16px; }
.opzioni { display: flex; flex-direction: column; gap: 9px; }
.opzione {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center;
  width: 100%; text-align: left; border: 2px solid var(--carta-scura); background: var(--foglio);
  border-radius: 14px; padding: 11px 12px; line-height: 1.35;
  transition: border-color .15s, background .15s;
}
.opzione .lettera {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carta); font-family: var(--font-titoli); font-weight: 600;
}
.opzione.scelta { border-color: var(--materia); background: var(--materia-chiara); }
.opzione.scelta .lettera { background: var(--materia); color: #fff; }
.opzione.giusta { border-color: var(--verde); background: var(--verde-chiaro); }
.opzione.giusta .lettera { background: var(--verde); color: #fff; }
.opzione.sbagliata { border-color: var(--papillon); background: var(--papillon-chiaro); }
.opzione.sbagliata .lettera { background: var(--papillon); color: #fff; }
.opzione.mancata { border-style: dashed; border-color: var(--verde); }
.opzione.mancata .lettera { background: var(--verde-chiaro); color: var(--verde); }
.opzione[disabled] { cursor: default; }
.opzione .lettera svg { width: 20px; height: 20px; }

.esito { margin-top: 14px; animation: appare .25s ease-out; }
.quiz-prof { display: flex; align-items: center; gap: 2px; margin: 2px 0 10px; }
.prof-quiz { width: 112px; height: 112px; }
/* leggero "respiro" del professore, così si vede che è vivo anche quando l'animazione è sottile */
.prof-quiz img, .prof-hero .prof img, .risultato-prof .prof img { animation: respiro 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03) translateY(-2px); } }
.quiz-prof .fumetto { min-height: 52px; display: flex; align-items: center; }
.chip-tempo { margin-left: auto; font-variant-numeric: tabular-nums; background: var(--foglio); color: var(--inchiostro); }
.tempo-ris { text-align: center; margin: 14px 0 0; font-family: var(--font-titoli); font-weight: 600; color: var(--inchiostro-2); }
.tempo-ris b { color: var(--inchiostro); font-size: 1.15rem; }
.fumetto.ok { background: var(--verde-chiaro); }
.fumetto.ok::before { border-right-color: var(--verde-chiaro); }
.fumetto.ko { background: var(--papillon-chiaro); }
.fumetto.ko::before { border-right-color: var(--papillon-chiaro); }
.spiegazione { background: var(--foglio); border-radius: var(--raggio); padding: 14px 16px; margin-top: 10px; }
.spiegazione.ok { border-left: 6px solid var(--verde); }
.spiegazione.ko { border-left: 6px solid var(--papillon); }
.ripassa { margin-top: 8px; font-size: .92rem; color: var(--inchiostro-2); padding: 0 4px; }
.ripassa b { color: var(--inchiostro); }