:root{
  --carta:#ECEDE7; --carta-alta:#F7F7F3; --inchiostro:#1C1E22; --grigio:#6B6F76;
  --rosso:#C1272D; --blu:#14539A; --giallo:#F2C10E; --verde:#2C7A4B;
  --linea:rgba(28,30,34,.16);
  --sans:"Archivo Narrow","Helvetica Neue Condensed","Arial Narrow",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:var(--serif);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:24px 20px 60px}
h1,h2,h3,.sans{font-family:var(--sans);letter-spacing:.01em}
h1{font-size:38px;line-height:1.03;margin:0 0 14px;font-weight:700}
h2{font-size:25px;margin:38px 0 12px;font-weight:700}
h3{font-size:19px;margin:24px 0 8px;font-weight:600}
p{margin:0 0 14px}
a{color:var(--blu)}
.muted{color:var(--grigio)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--blu);outline-offset:3px}
.hidden{display:none !important}
kbd{font-family:var(--sans);border:1px solid var(--linea);border-bottom-width:2px;border-radius:3px;padding:0 5px;background:#fff;font-size:13px}

.salta{position:absolute;left:-9999px;background:var(--inchiostro);color:#fff;padding:10px 16px;font-family:var(--sans)}
.salta:focus{left:12px;top:12px;z-index:10}

.testata{border-top:6px solid var(--inchiostro);padding-top:14px;margin-bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.logo{font-family:var(--sans);font-weight:700;font-size:24px;text-decoration:none;color:var(--inchiostro);letter-spacing:-.01em}
.logo span{color:var(--rosso)}
.testata .sotto{font-family:var(--sans);font-size:14px;color:var(--grigio)}
.regola{display:flex;gap:8px;font-family:var(--sans);font-size:14px;font-weight:600}
.regola span{border:2px solid var(--inchiostro);padding:3px 9px;background:var(--carta-alta)}

.occhiello{font-size:19px;max-width:66ch}
/* --- avvio: CTA sopra la piega --- */
.avvio{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 14px}
.cta{font-family:var(--sans);font-weight:700;font-size:21px;padding:15px 34px;border:3px solid var(--inchiostro);background:var(--inchiostro);color:var(--carta);text-decoration:none;display:inline-block;transition:transform .1s ease}
.cta:hover{transform:translateY(-2px);background:#000}
.cta.secondaria{background:var(--carta-alta);color:var(--inchiostro)}
.cta.secondaria:hover{background:#fff}
.etichette{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0 0 26px;font-family:var(--sans);font-size:14px}
.etichette li{border:1px solid var(--linea);background:var(--carta-alta);padding:3px 10px}
.etichette li::before{content:"✓ ";color:var(--verde);font-weight:700}

.numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:34px 0 8px}
.numeri div{border:1px solid var(--linea);background:var(--carta-alta);padding:12px;text-align:center}
.numeri b{display:block;font-family:var(--sans);font-size:26px;line-height:1.1}
.numeri span{font-family:var(--sans);font-size:13px;color:var(--grigio)}

.modi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px}
.modo{border:2px solid var(--inchiostro);background:var(--carta-alta);padding:16px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:118px;transition:transform .12s ease,background .12s ease}
.modo:hover{background:#fff;transform:translateY(-2px)}
.modo .titolo{font-family:var(--sans);font-weight:700;font-size:20px}
.modo .desc{font-size:15px;color:var(--grigio);line-height:1.35}
.modo[data-azione="esame"]{border-width:3px}
.modo[data-azione="esame"] .titolo{font-size:22px}

.argomenti{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.arg{border:1px solid var(--linea);background:var(--carta-alta);padding:10px 12px;text-align:left;font-family:var(--sans);font-size:15px;display:flex;justify-content:space-between;gap:10px;align-items:center;line-height:1.25}
.arg:hover{border-color:var(--inchiostro);background:#fff}
.arg .n{color:var(--grigio);font-size:13px}
.arg .punteggio{font-weight:700;white-space:nowrap}
.arg .punteggio.buono{color:var(--verde)}
.arg .punteggio.scarso{color:var(--rosso)}
.caricamento{font-family:var(--sans);color:var(--grigio)}

.progresso{border:1px solid var(--linea);background:var(--carta-alta);padding:16px;margin-top:26px}
.progresso h3{margin-top:0}
.bottone.piccolo{font-size:14px;padding:5px 12px;border-width:1px}

.barra{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cronometro{font-family:var(--sans);font-weight:700;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.cronometro.allarme{color:var(--rosso)}
.contatore{font-family:var(--sans);font-size:15px;color:var(--grigio)}

.scheda{border:2px solid var(--inchiostro);background:var(--carta-alta);padding:10px;margin-bottom:20px}
.griglia{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.cella{aspect-ratio:1/1;border:1px solid var(--linea);background:#fff;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--grigio);display:flex;align-items:center;justify-content:center;padding:0}
.cella.risposta{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.cella.corrente{outline:3px solid var(--blu);outline-offset:-1px;z-index:1}
.cella.giusta{background:var(--verde);color:#fff;border-color:var(--verde)}
.cella.sbagliata{background:var(--rosso);color:#fff;border-color:var(--rosso)}

.domanda{border:2px solid var(--inchiostro);background:var(--carta-alta);padding:22px;margin-bottom:18px}
.etichetta{font-family:var(--sans);font-size:14px;color:var(--grigio);margin-bottom:12px;display:flex;justify-content:space-between;gap:12px}
.corpo{display:flex;gap:22px;align-items:flex-start;min-height:120px}
.figura{flex:0 0 auto;width:150px;border:1px solid var(--linea);background:#fff;padding:6px}
.figura img{display:block;width:100%;height:auto}
.testo{font-size:23px;line-height:1.38;margin:0}
.scelte{display:flex;gap:18px;justify-content:center;margin:26px 0 4px}
.disco{width:118px;height:118px;border-radius:50%;font-family:var(--sans);font-weight:700;font-size:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:7px solid var(--blu);background:var(--blu);color:#fff;transition:transform .1s ease}
.disco.falso{border-color:var(--rosso);background:#fff;color:var(--rosso)}
.disco small{font-size:11px;font-weight:600;opacity:.8;letter-spacing:.06em}
.disco:hover{transform:scale(1.04)}
.disco.scelto{box-shadow:0 0 0 4px var(--inchiostro)}
.disco[disabled]{opacity:.45;transform:none;cursor:default}

.esito{border-left:8px solid var(--verde);background:var(--carta-alta);padding:14px 16px;margin-bottom:18px}
.esito.no{border-left-color:var(--rosso)}
.esito .verdetto{font-family:var(--sans);font-weight:700;font-size:17px;margin-bottom:4px}
.esito .spiega{font-size:16px;line-height:1.45}

.nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.bottone{font-family:var(--sans);font-weight:600;font-size:16px;border:2px solid var(--inchiostro);background:var(--carta-alta);padding:9px 18px}
.bottone:hover{background:#fff}
.bottone.primario{background:var(--inchiostro);color:var(--carta)}
.bottone[disabled]{opacity:.4;cursor:default}
.scorciatoie{font-size:14px}

.verdetto-grande{border:3px solid var(--inchiostro);background:var(--carta-alta);padding:20px;margin-bottom:20px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.verdetto-grande .esitone{font-family:var(--sans);font-weight:700;font-size:42px;line-height:1}
.verdetto-grande.idoneo{border-color:var(--verde)}
.verdetto-grande.idoneo .esitone{color:var(--verde)}
.verdetto-grande.respinto{border-color:var(--rosso)}
.verdetto-grande.respinto .esitone{color:var(--rosso)}
.cifre{display:flex;gap:22px;font-family:var(--sans)}
.cifra .num{font-size:28px;font-weight:700;line-height:1}
.cifra .lab{font-size:13px;color:var(--grigio)}
.analisi{border:1px solid var(--linea);background:var(--carta-alta);padding:16px;margin-bottom:20px}
.analisi h3{margin-top:0}
.analisi ul{margin:8px 0 0;padding-left:20px}

.rev{border-top:1px solid var(--linea);padding:14px 0;display:flex;gap:18px;align-items:flex-start}
.rev .figurina{flex:0 0 auto;width:96px;border:1px solid var(--linea);background:#fff;padding:4px}
.rev .figurina img{display:block;width:100%;height:auto}
.rev .cap{font-family:var(--sans);font-size:13px;color:var(--grigio);margin-bottom:4px}
.rev .dom{font-size:18px;margin-bottom:6px}
.rev .risp{font-family:var(--sans);font-size:15px}
.rev .risp b.ok{color:var(--verde)}
.rev .risp b.ko{color:var(--rosso)}
.rev .sp{font-size:15px;color:var(--grigio);margin-top:4px}

.elenco-arg{font-family:var(--sans);columns:2;column-gap:28px;padding-left:22px}
.elenco-arg li{margin-bottom:5px;break-inside:avoid}
.elenco-arg span{color:var(--grigio);font-size:14px}

#faq details{border-bottom:1px solid var(--linea);padding:12px 0}
#faq summary{font-family:var(--sans);font-weight:600;font-size:18px;cursor:pointer}
#faq details p{margin:8px 0 0}

footer{border-top:6px solid var(--inchiostro);margin-top:46px;padding-top:16px;font-size:15px}

@media (max-width:640px){
  .wrap{padding:16px 14px 50px}
  h1{font-size:29px}
  h2{font-size:22px}
  .numeri{grid-template-columns:1fr 1fr}
  .modi{grid-template-columns:1fr}
  .griglia{grid-template-columns:repeat(10,1fr)}
  .corpo{flex-direction:column;align-items:center;min-height:0}
  .figura{width:168px}
  .testo{font-size:20px}
  .disco{width:104px;height:104px;font-size:23px}
  .cta{width:100%;text-align:center;font-size:20px;padding:16px 20px}
  .avvio{gap:10px}
  .elenco-arg{columns:1}
  .rev{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}html{scroll-behavior:auto}}
@media print{
  body{background:#fff}
  .noprint,.modi,.barra,.scelte,#intro,#come-funziona,#faq,#perche,#argomenti-elenco{display:none !important}
  .rev{break-inside:avoid}
}