/* ================================================================
   IMPARARE — Il Rovello · il foglio di stile della sezione

   Sta in un file solo e non dentro ogni pagina come nei giochi, perche'
   qui le pagine sono destinate a diventare parecchie: /matematica/, poi
   magari /grammatica/ e /inglese/, piu' un indice per ognuna. Tre copie
   dello stesso CSS si allineano il primo giorno e divergono il secondo.
   Quello che riguarda UN gioco solo resta invece dentro la sua pagina:
   li' il foglio comune non c'entra niente.

   I colori e i caratteri sono quelli del Rovello, stessi nomi: se un
   giorno cambia la carta del sito, cambia anche qui.
   ================================================================ */
:root{
  --carta:#F1ECE0; --carta-2:#E8E2D2; --cella:#DED7C4; --linea:#C7BEA6;
  --inchiostro:#1B2436; --inchiostro-70:#3A4252;
  --cobalto:#243FB0; --cobalto-soft:#E4E7F7;
  --verde:#205840; --verde-soft:#E3EFE9; --rosso:#912822; --rosso-soft:#F7E6E4;
  --mattone:#8B0655; --mattone-soft:#F5E9EF;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,'Courier New',monospace;
}
*{box-sizing:border-box}
/* Il corpo base passa da 16 a 18 px, in percentuale: chi ha gia' alzato il
   carattere nelle impostazioni del telefono se lo tiene e parte da li'. */
html{-webkit-text-size-adjust:100%;font-size:112.5%}
body{margin:0;background:var(--carta);color:var(--inchiostro);
     font-family:var(--sans);line-height:1.55}
.wrap{max-width:660px;margin:0 auto;padding:18px 16px 64px}

.briciole{font-size:.8rem;color:var(--inchiostro-70);margin:0 0 10px}
.briciole ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.briciole li+li::before{content:"\203A";color:var(--linea);font-weight:700;margin-right:6px}
.briciole a{color:var(--cobalto);text-decoration:none;font-weight:600}
.briciole a:hover{text-decoration:underline}
.briciole [aria-current]{font-weight:600;color:var(--inchiostro)}
.indietro{display:inline-flex;align-items:center;gap:6px;color:var(--cobalto);text-decoration:none;
          font-weight:600;font-size:.95rem;margin:0 0 14px;border-bottom:2px solid transparent}
.indietro:hover{border-bottom-color:var(--cobalto)}

.occhiello{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mattone);
           margin:0 0 4px;font-weight:600}
h1{font-family:var(--serif);font-size:1.9rem;margin:0 0 4px;line-height:1.15}
.sub{color:var(--inchiostro-70);margin:0 0 16px;font-size:.95rem}
.sez{font-family:var(--serif);font-size:1.3rem;margin:30px 0 8px}
.anteprima{background:#FBF6E7;border-left:4px solid #B5892A;padding:10px 14px;margin:0 0 16px;
           font-size:.9rem;color:#5a4a1e}

.testo p{margin:0 0 12px}
.testo ul{margin:0 0 12px;padding-left:20px}
.testo li{margin:0 0 6px}
.testo b{color:var(--inchiostro)}
.testo a{color:var(--cobalto);font-weight:600;text-decoration:none}
.testo a:hover{text-decoration:underline}
.nota{background:var(--carta-2);border-left:3px solid var(--mattone);padding:11px 14px;
      font-size:.92rem;margin:0 0 14px}

.panel{background:var(--carta);border:2.5px solid var(--inchiostro);padding:clamp(14px,3vw,24px);
       box-shadow:7px 7px 0 var(--linea);margin:0 0 26px}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.ph .no{font-family:var(--mono);font-size:.8rem;color:var(--cobalto);letter-spacing:.1em}
.ph .gg{font-size:.8rem;color:var(--inchiostro-70)}

.riquadro{border:2px solid var(--inchiostro);padding:14px 16px;margin:18px 0;background:var(--carta-2)}
.riquadro h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 6px}
.riquadro p{margin:0;font-size:.93rem;color:var(--inchiostro-70)}
.btn-carta{display:inline-block;margin-top:10px;font-weight:600;font-size:.93rem;padding:10px 15px;
           border:1.8px solid var(--inchiostro);color:inherit;text-decoration:none}
.btn-carta:hover{background:var(--inchiostro);color:var(--carta)}

/* le schede dell'indice: una per gioco, e crescono di numero */
.schede{display:grid;gap:14px;margin:18px 0 0}
@media (min-width:560px){ .schede{grid-template-columns:1fr 1fr} }
/* Quando la scheda e' una sola prende tutta la riga. Senza, l'indice di
   /imparare/ restava con una scheda stretta a sinistra e mezza pagina
   vuota a destra — e capitera' di nuovo ogni volta che una sezione
   nuova nasce con un gioco solo. Cosi' si sistema da se', e quando
   arriva la seconda scheda tornano in colonna senza toccare niente. */
.schede > :only-child{grid-column:1/-1}
.scheda{display:block;border:2.5px solid var(--inchiostro);background:var(--carta);
        box-shadow:5px 5px 0 var(--linea);padding:16px 18px;text-decoration:none;color:inherit}
.scheda:hover{box-shadow:7px 7px 0 var(--cobalto);border-color:var(--cobalto)}
.scheda .et{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mattone);
            font-weight:600;display:block;margin:0 0 4px}
.scheda h2,.scheda h3{font-family:var(--serif);font-size:1.25rem;margin:0 0 6px;line-height:1.2}
.scheda p{margin:0;font-size:.92rem;color:var(--inchiostro-70)}
.scheda .oggi{margin-top:9px;font-family:var(--mono);font-size:.78rem;color:var(--cobalto)}

.chiusa{border:2px dashed var(--linea);background:none;box-shadow:none;cursor:default;
        padding:16px 18px}
.chiusa h3{font-family:var(--serif);font-size:1.25rem;margin:0 0 6px;color:var(--inchiostro-70)}
.chiusa p{margin:0;font-size:.92rem;color:var(--inchiostro-70)}