/* Stile condiviso delle pagine quiz della Sala Giochi.
   Va incluso insieme a motore-quiz.js. Ogni quiz ha solo il suo banco domande. */

:root{
  --feltro:#0E2229;--tavolo:#14313A;--bordo:#1F4451;--crema:#F1E9D6;--tenue:#A9B9B9;
  --senape:#E9B44C;--ciliegia:#C7365B;--salvia:#5FA97F;--cobalto:#4C7DD1;--viola:#8E6BC9;
  --tinta:var(--senape);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:24px 16px 40px;
  background:var(--feltro);
  color:var(--crema);
  font-family:"Trebuchet MS","Avenir Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}

.contenitore{max-width:520px;margin:0 auto}

.indietro{display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);text-decoration:none}
.indietro:hover{color:var(--crema)}
h1{margin:8px 0 0;font-size:clamp(1.8rem,7vw,2.6rem);text-transform:uppercase;line-height:1.05}
.sottotitolo{margin:8px 0 0;font-size:.92rem;color:var(--tenue)}

.btn{font:inherit;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--crema);
  background:transparent;border:1px solid var(--bordo);border-radius:8px;padding:10px 14px;cursor:pointer}
.btn:hover{background:#183A45}
.btn:disabled{opacity:.35;cursor:default}
.btn.principale{background:var(--tinta);border-color:var(--tinta);color:#0E2229;font-weight:700}
.btn.principale:hover{filter:brightness(1.06)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--crema);outline-offset:2px}

/* ---- schermate ---- */
.q-schermo{display:none;margin-top:18px}
.q-schermo.attiva{display:block}

/* ---- scelta di classe e materia ---- */
.q-pannello{margin:0 0 12px;padding:14px;background:var(--tavolo);border:1px solid var(--bordo);
  border-left:4px solid var(--tinta);border-radius:10px}
.q-pannello > p{margin:0 0 10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.q-righe{display:flex;gap:8px}
.q-righe .q-voce{flex:1}
.q-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.q-voce{font:inherit;font-size:.85rem;color:var(--crema);background:#0F262E;border:1px solid var(--bordo);
  border-radius:10px;padding:14px 6px;cursor:pointer;text-align:center;line-height:1.2}
.q-voce:hover{background:#183A45}
.q-voce .q-icona{display:block;font-size:1.3rem;margin-bottom:3px}
.q-voce.scelta{background:var(--tinta);border-color:var(--tinta);color:#0E2229;font-weight:700}
.q-azioni{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.q-spingi{margin-left:auto}

/* ---- domanda ---- */
.q-barra{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 12px;background:var(--tavolo);
  border:1px solid var(--bordo);border-left:4px solid var(--tinta);border-radius:10px;font-size:.82rem;color:var(--tenue)}
.q-barra b{color:var(--crema)}
.q-avanzamento{height:8px;background:#0F262E;border:1px solid var(--bordo);border-radius:6px;overflow:hidden;margin:10px 0 14px}
.q-avanzamento span{display:block;height:100%;width:0;background:var(--tinta);transition:width .3s ease}

.q-carta{background:#F6F1E4;color:#12242B;border-radius:14px;padding:16px}
.q-numero{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7A6A52}
.q-testo{margin:6px 0 0;font-size:clamp(1.05rem,4.6vw,1.3rem);font-weight:700;line-height:1.3}
.q-opzioni{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.q-opzione{display:flex;align-items:center;gap:10px;width:100%;font:inherit;font-size:1rem;text-align:left;
  background:#FFFFFF;color:#12242B;border:1px solid #DCD0B4;border-radius:10px;padding:11px 12px;cursor:pointer}
.q-opzione:hover{background:#F1E9D6}
.q-opzione::before{content:attr(data-lettera);flex:0 0 24px;height:24px;display:flex;align-items:center;
  justify-content:center;border-radius:6px;background:#2C5361;color:#F6F1E4;font-weight:700;font-size:.82rem}
.q-opzione:disabled{cursor:default}
.q-opzione.giusta{background:#DFF2E4;border-color:#3E9A63}
.q-opzione.giusta::before{background:#3E9A63}
.q-opzione.sbagliata{background:#FADFDB;border-color:#C7365B}
.q-opzione.sbagliata::before{background:#C7365B}
.q-esitoRisposta{min-height:1.5em;margin:12px 0 0;font-size:.92rem;font-weight:700}
.q-esitoRisposta.giusto{color:#2A7A49}
.q-esitoRisposta.sbagliato{color:#A82D4B}
.q-carta .q-azioni{margin-top:12px}

/* ---- risultato ---- */
.q-risultato{padding:20px 16px;background:var(--tavolo);border:1px solid var(--bordo);
  border-left:4px solid var(--tinta);border-radius:10px;text-align:center}
.q-punteggio{font-size:3rem;font-weight:700;line-height:1;color:var(--tinta)}
.q-punteggio small{font-size:1.2rem;color:var(--tenue)}
.q-commento{margin:10px 0 0;color:var(--tenue)}
.q-risultato .q-azioni{justify-content:center;margin-top:16px}
.q-risultato .q-spingi{margin-left:0}

.spazio-pub{margin:28px 0 0;min-height:100px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.chiusura{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--bordo);font-size:.78rem;color:var(--tenue)}

@media (prefers-reduced-motion:reduce){.q-avanzamento span{transition:none}}