/* Le pagine descrittive (compendio): mostri, incantesimi, oggetti… Si aggiunge a stile.css, che
   dà i caratteri, i colori, la barra, il pulsante e il piè di pagina. Prima il telefono. */
.compendio main{padding:84px 0 40px}
/* le sezioni della home hanno 72px sopra e sotto (stile.css): qui no */
.compendio section{padding:0}
.compendio .barra .marchio{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}

/* sul telefono la barra non ha posto per cinque lingue e "Prova": qui c'è già il pulsante grande */
@media (max-width:479px){.compendio .barra .prova{display:none}.compendio .lingue{margin-left:auto}}

/* le briciole */
.briciole{font-size:.82rem;color:var(--muted);margin-bottom:18px;overflow-wrap:anywhere}
.briciole a{color:var(--muted);text-decoration:none}
.briciole a:hover{color:var(--text)}
.briciole [aria-current]{color:var(--text)}

/* la testata: ritratto, nome, tipo, invito, nomi nelle altre lingue */
.testata{display:grid;gap:22px;margin-bottom:28px}
.ritratto{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:1;max-width:420px;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08),0 0 70px rgba(220,20,60,.16)}
.ritratto img{width:100%;height:100%;object-fit:cover}
.scheda h1{font-size:clamp(1.9rem,8vw,3rem);margin-bottom:6px;hyphens:auto;overflow-wrap:anywhere}
/* un nome lungo (tedesco: "Drachenschuppenpanzer") non allarga la colonna */
.testata,.intestazione{min-width:0}
.tipo{color:var(--muted);font-style:italic;margin-bottom:20px}
.invito{display:grid;gap:10px;justify-items:start;margin-bottom:24px}
.invito p{font-size:.9rem;color:var(--muted);max-width:46ch}
.altre-lingue h2{font:700 .72rem Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2);margin-bottom:8px}
.altre-lingue ul{list-style:none;display:grid;gap:6px}
.altre-lingue a{display:inline-flex;gap:10px;align-items:baseline;color:var(--text);text-decoration:none}
.altre-lingue a:hover{color:var(--acc2)}
.altre-lingue abbr{text-decoration:none;font:700 .72rem Inter,sans-serif;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* il blocco delle statistiche, come nell'SRD */
.statistiche{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:var(--r);padding:20px 18px}
.statistiche p{margin-bottom:6px}
.statistiche p b{color:var(--acc2);font-weight:700;margin-right:4px}
.statistiche p b i{color:var(--text)}
.statistiche .riga-alta{display:flex;flex-wrap:wrap;gap:4px 26px}
.statistiche h2{font-size:1.05rem;letter-spacing:.08em;color:var(--acc2);border-bottom:1px solid rgba(220,20,60,.45);
  padding-bottom:4px;margin:22px 0 10px}
.statistiche .intro{font-style:italic;color:var(--muted)}
.statistiche a,.collegati a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,59,92,.6);text-underline-offset:3px}
.statistiche a:hover,.collegati a:hover{color:var(--acc2)}
.caratteristiche{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 16px}
.car{display:grid;justify-items:center;background:rgba(220,20,60,.08);border:1px solid rgba(220,20,60,.25);border-radius:12px;padding:8px 4px}
.car abbr{text-decoration:none;font:700 .72rem Inter,sans-serif;letter-spacing:.12em;color:var(--acc2)}
.car b{font:800 1.35rem Cinzel,Georgia,serif;line-height:1.3}
.car span{font-size:.72rem;color:var(--muted);white-space:nowrap}

/* il gruppo e i collegamenti */
.gruppo,.collegati{margin-top:28px}
.gruppo h2,.collegati h2{font-size:1.15rem;margin:22px 0 10px}
.gruppo p{color:var(--muted);max-width:75ch}
.schede{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.schede a{display:flex;gap:12px;align-items:center;padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  text-decoration:none;color:var(--text)}
.schede a:hover{border-color:rgba(220,20,60,.5)}
.schede img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.schede span{display:grid;line-height:1.3}
.schede small{color:var(--muted)}

/* computer: ritratto e testata a sinistra, statistiche a destra */
@media (min-width:900px){
  .scheda{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:0 40px;align-items:start}
  .testata{position:sticky;top:84px;margin:0}
  .statistiche,.gruppo,.collegati{grid-column:2}
  .caratteristiche{grid-template-columns:repeat(6,1fr)}
  .statistiche{padding:26px 28px}
  .scheda h1{font-size:clamp(1.8rem,2.6vw,2.5rem)}
}

/* l'indice di un tipo: titolo, lettere per saltare, voci raggruppate per iniziale */
.titolo-indice{font-size:clamp(2rem,8vw,3.2rem);margin-bottom:10px}
.compendio .sotto{margin-bottom:22px}
.lettere{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.lettere a{font:700 .85rem Inter,sans-serif;color:var(--text);text-decoration:none;min-width:34px;text-align:center;
  padding:6px 8px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.lettere a:hover{border-color:rgba(220,20,60,.5);color:var(--acc2)}
.lettera{scroll-margin-top:76px}
.lettera h2{font-size:1.4rem;color:var(--acc2);margin:24px 0 10px}

/* ---- gli incantesimi ---- */
/* al posto del ritratto: il livello (o il d20 per i trucchetti) e la scuola */
.sigillo{display:flex;align-items:center;gap:14px;width:max-content;padding:12px 18px 12px 14px;border-radius:18px;background:var(--panel);
  border:1px solid rgba(220,20,60,.35);box-shadow:0 0 50px rgba(220,20,60,.12)}
.sigillo b{font:800 2.4rem Cinzel,Georgia,serif;line-height:1;color:var(--acc2);min-width:44px;text-align:center}
.sigillo svg{width:44px;height:48px}
.sigillo span{font:700 .8rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.incantesimo .campi{display:grid;gap:2px 26px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid rgba(220,20,60,.45)}
.incantesimo .testo p{margin-bottom:10px;max-width:75ch}
.tabella-testo{margin:4px 0 14px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:.92rem}
.tabella-testo p{margin-bottom:4px}
.tabella-testo b{color:var(--acc2)}
.elenco-link{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.elenco-link a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);text-decoration:none}
.elenco-link a:hover{border-color:rgba(220,20,60,.5)}
.schede.testo a{padding:10px 14px}
@media (min-width:900px){
  .incantesimo .campi{grid-template-columns:1fr 1fr}
  .sigillo{margin-bottom:22px}
}

/* i nomi con una parola molto lunga (classeNome in mostro.mjs) */
.scheda h1.lungo{font-size:clamp(1.5rem,6.6vw,1.95rem)}
.scheda h1.lunghissimo{font-size:clamp(1.2rem,5.2vw,1.5rem)}