/* Quiz 3ª PIAs — base
   Variabili (colori, font, raggi), reset, barra in alto, schermate, adattamenti per schermi larghi e movimento ridotto. */

/* =====================================================================
   Quiz 3ª PIAs — foglio di stile
   I colori vengono dal professore: petrolio dei pantaloni, rosso papillon,
   bianco camice. Il colore della materia scelta colora la barra in alto.
   ===================================================================== */

:root {
  --carta: #EAF2F4;          /* sfondo pagina, azzurro carta */
  --carta-scura: #D7E5E9;
  --foglio: #FFFFFF;         /* superfici */
  --inchiostro: #17333B;     /* testo */
  --inchiostro-2: #4E6670;   /* testo secondario */
  --petrolio: #2F6F7E;       /* colore principale (pantaloni) */
  --petrolio-scuro: #235562;
  --papillon: #D23B3B;       /* sbagliato */
  --papillon-chiaro: #FBE3E3;
  --verde: #2E8B57;          /* giusto */
  --verde-chiaro: #DDF3E6;
  --evidenziatore: #F7D463;  /* compiti in arrivo */
  --evidenziatore-scuro: #8A6A00;
  --materia: var(--petrolio);          /* sovrascritti via JS con il colore della materia */
  --materia-rgb: 47,111,126;
  --materia-chiara: rgba(var(--materia-rgb), .14);

  --font-titoli: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-testo: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raggio: 18px;
  --raggio-piccolo: 12px;
  --ombra: 0 6px 0 -2px var(--carta-scura);
  --larghezza: 560px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; }
.sprite { position: absolute; width: 0; height: 0; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.45;
  min-height: 100vh;
  min-height: 100dvh;
}
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { width: 1.2em; height: 1.2em; }
[hidden] { display: none !important; }

/* ---------- barra superiore ---------- */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px;
  padding: calc(10px + env(safe-area-inset-top)) max(12px, calc((100% - var(--larghezza)) / 2 + 12px)) 10px;
  background: var(--materia);
  color: #fff;
  transition: background .35s;
}
.barra-indietro, .barra-info {
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center;
}
.barra-indietro svg, .barra-info svg { width: 24px; height: 24px; }
.barra-indietro:active, .barra-info:active { background: rgba(255,255,255,.32); }
.barra-indietro { grid-column: 1; }
.barra-testi { grid-column: 2; min-width: 0; padding-left: 4px; }
.barra-info { grid-column: 3; }
.barra-titolo { margin: 0; font-family: var(--font-titoli); font-weight: 600; font-size: 1.25rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.barra-sotto { font-size: .85rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-sotto:empty { display: none; }
.barra-progresso {
  grid-column: 1 / -1; height: 6px; margin-top: 8px; border-radius: 3px;
  background: rgba(255,255,255,.28); overflow: hidden;
}
.barra-progresso i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; transition: width .4s; }

/* ---------- schermate ---------- */
#app { max-width: var(--larghezza); margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
.schermata { animation: appare .28s ease-out; }
@keyframes appare { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.titolo-sezione {
  font-family: var(--font-titoli); font-weight: 600; font-size: 1.15rem;
  margin: 26px 0 10px; color: var(--inchiostro);
}
.titolo-sezione:first-child, :empty + .titolo-sezione { margin-top: 6px; }

/* ---------- schermi larghi ---------- */
@media (min-width: 700px) {
  body { background: radial-gradient(circle at 20% 0%, #F3F8F9, var(--carta) 60%); }
  .griglia-materie { grid-template-columns: repeat(3, 1fr); }
  .prof { width: 170px; height: 170px; }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}