/* ============================================================
   CODEX DEL VELO — sistema di design
   ------------------------------------------------------------
   La palette viene dalla cosmologia di Yokuro, non da una moodboard:
   oro del Celestiale per la Volontà, osso per il Fato (il dado visibile
   sul tavolo, che è di tutti), rosso inchiostro per l'Avversità.
   I quattro esiti hanno quattro colori propri e ricorrono identici
   in ogni tabella, scheda e stat block del sito.

   Tema notturno di default; pergamena via prefers-color-scheme
   e via data-tema="chiaro" quando il lettore sceglie.
   ============================================================ */

:root {
  --inchiostro:  #14110d;
  --superficie:  #1c1813;
  --superficie2: #242019;
  --superficie3: #2d2720;
  --linea:       #3a3228;
  --linea-tenue: #292319;

  --testo:       #e9e1d1;
  --testo-medio: #a2967e;
  --testo-lieve: #7b7060;

  --volonta:     #dcae4e;
  --fato:        #cec5ad;
  --avversita:   #c05a4f;

  --trionfo:     #d4a942;
  --amara:       #bd8140;
  --spiraglio:   #7b9b85;
  --rovina:      #b04740;

  --abisso:      #8a68ad;
  --accento:     #d4a942;

  /* Soglie del Carico e Gradi di Minaccia: i dati del VTT portano tinte pensate
     per il fondo scuro del tavolo virtuale, quindi qui vivono come token e
     vengono riscritte per il tema pergamena. */
  --carico-stabile:  #4ad6a0;
  --carico-affanno:  #e8c15a;
  --carico-frattura: #e8893a;
  --carico-crollo:   #e0533f;

  --grado-1: #9c968a;
  --grado-2: #c06a6a;
  --grado-3: #a99bbd;
  --grado-4: #d4794a;
  --grado-5: #a87fc7;

  --ombra: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px -18px rgba(0, 0, 0, .9);

  --f-titolo: "IM Fell English", "Hoefler Text", Georgia, serif;
  --f-testo:  "Spectral", Georgia, "Times New Roman", serif;
  --f-dato:   "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;

  --barra: 55px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    --inchiostro:  #ebe2d0;
    --superficie:  #f4ecdc;
    --superficie2: #e8ddc7;
    --superficie3: #ddd0b6;
    --linea:       #c6b696;
    --linea-tenue: #d8cbaf;

    --testo:       #211a12;
    --testo-medio: #5b4f3d;
    --testo-lieve: #837760;

    --volonta:     #8f6209;
    --fato:        #6c6146;
    --avversita:   #9c352b;

    --trionfo:     #8b6207;
    --amara:       #8a5418;
    --spiraglio:   #3f6b50;
    --rovina:      #9a322a;

    --abisso:      #5d3d80;
    --accento:     #8b6207;

    --carico-stabile:  #1f7a55;
    --carico-affanno:  #8a6410;
    --carico-frattura: #99511a;
    --carico-crollo:   #a3301f;

    --grado-1: #5d574b;
    --grado-2: #96352f;
    --grado-3: #5d4f75;
    --grado-4: #9a4a1c;
    --grado-5: #6b3f91;

    --ombra: 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -20px rgba(60, 42, 16, .6);
    color-scheme: light;
  }
}

:root[data-tema="chiaro"] {
  --inchiostro:  #ebe2d0;
  --superficie:  #f4ecdc;
  --superficie2: #e8ddc7;
  --superficie3: #ddd0b6;
  --linea:       #c6b696;
  --linea-tenue: #d8cbaf;

  --testo:       #211a12;
  --testo-medio: #5b4f3d;
  --testo-lieve: #837760;

  --volonta:     #8f6209;
  --fato:        #6c6146;
  --avversita:   #9c352b;

  --trionfo:     #8b6207;
  --amara:       #8a5418;
  --spiraglio:   #3f6b50;
  --rovina:      #9a322a;

  --abisso:      #5d3d80;
  --accento:     #8b6207;

  --carico-stabile:  #1f7a55;
  --carico-affanno:  #8a6410;
  --carico-frattura: #99511a;
  --carico-crollo:   #a3301f;

  --grado-1: #5d574b;
  --grado-2: #96352f;
  --grado-3: #5d4f75;
  --grado-4: #9a4a1c;
  --grado-5: #6b3f91;

  --ombra: 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -20px rgba(60, 42, 16, .6);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 16px); }

body {
  margin: 0;
  background: var(--inchiostro);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accento);
  color: var(--inchiostro);
  font-family: var(--f-dato);
  padding: 10px 16px;
  z-index: 100;
}
.salta:focus { left: 0; }

/* ---------- guscio ---------- */

.guscio {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 292px;
  grid-template-areas: "menu palco lato";
  max-width: 1720px;
  margin: 0 auto;
  align-items: start;
}

/* ---------- barra superiore ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 9px;
  padding-inline: 18px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}

.marchio { display: flex; align-items: baseline; gap: 9px; text-decoration: none; flex-shrink: 0; }
.marchio b {
  font-family: var(--f-titolo);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .10em;
  color: var(--testo);
}
.marchio span {
  font-family: var(--f-dato);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo-lieve);
}

.cerca-avvio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 520px;
  padding: 7px 12px;
  background: var(--inchiostro);
  border: 1px solid var(--linea);
  border-radius: 3px;
  font-family: var(--f-dato);
  font-size: 14px;
  color: var(--testo-lieve);
  cursor: pointer;
  text-align: left;
}
.cerca-avvio:hover { border-color: var(--testo-lieve); color: var(--testo-medio); }
.cerca-avvio kbd {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 2px 6px;
  border: 1px solid var(--linea);
  border-radius: 2px;
  color: var(--testo-lieve);
}

.azioni-barra { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.bottone-lieve {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 3px;
  color: var(--testo-medio);
  padding: 6px 11px;
  cursor: pointer;
}
.bottone-lieve:hover { border-color: var(--accento); color: var(--testo); }

/* ---------- menu di sinistra ---------- */

.menu {
  grid-area: menu;
  position: sticky;
  top: var(--barra);
  max-height: calc(100vh - var(--barra));
  overflow-y: auto;
  border-right: 1px solid var(--linea);
  background: var(--superficie);
  padding-block: 18px 40px;
}

.menu-gruppo { margin-bottom: 20px; }
.menu-gruppo > h2 {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin: 0 0 6px;
  padding-inline: 18px;
}

.menu a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 18px;
  font-family: var(--f-dato);
  font-size: 15px;
  color: var(--testo-medio);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.menu a:hover { color: var(--testo); background: var(--superficie2); }
.menu a[aria-current="page"] {
  color: var(--testo);
  border-left-color: var(--accento);
  background: var(--superficie2);
}
.menu a i {
  font-style: normal;
  font-size: 11px;
  color: var(--testo-lieve);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---------- palco ---------- */

.palco {
  grid-area: palco;
  --margine: 34px;
  padding-block: 26px 80px;
  padding-inline: var(--margine);
  min-width: 0;
}

.briciole {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin: 0 0 10px;
}
.briciole a { color: var(--testo-lieve); text-decoration: none; }
.briciole a:hover { color: var(--accento); }

.occhiello {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin: 0 0 6px;
}

h1 {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  margin: 0 0 8px;
  text-wrap: balance;
}

h2 {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  margin: 34px 0 10px;
  text-wrap: balance;
  scroll-margin-top: calc(var(--barra) + 16px);
}
h2:first-of-type { margin-top: 0; }

h3 {
  font-family: var(--f-dato);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-medio);
  margin: 24px 0 8px;
  scroll-margin-top: calc(var(--barra) + 16px);
}

h4 { font-family: var(--f-dato); font-size: 14px; letter-spacing: .06em; margin: 16px 0 4px; }

.sommario {
  font-size: 17px;
  line-height: 1.55;
  color: var(--testo-medio);
  max-width: 62ch;
  margin: 0 0 24px;
  font-weight: 300;
}

p { max-width: 68ch; margin: 0 0 12px; }

a { color: var(--accento); text-underline-offset: 2px; }
a:hover { color: var(--testo); }

.epigrafe {
  font-family: var(--f-titolo);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--testo-medio);
  border-left: 2px solid var(--linea);
  padding-left: 16px;
  margin: 0 0 24px;
  max-width: 58ch;
}

.riga { border: 0; border-top: 1px solid var(--linea); margin-block: 32px; }

/* ---------- indice di pagina ---------- */

.indice-pagina { margin: 0 0 26px; padding: 0; list-style: none; columns: 2; column-gap: 26px; max-width: 62ch; }
.indice-pagina li { break-inside: avoid; padding: 3px 0; }
.indice-pagina a { font-family: var(--f-dato); font-size: 14px; text-decoration: none; }

/* ---------- riquadri ---------- */

.avviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  background: var(--superficie2);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--abisso);
  border-radius: 3px;
  padding: 14px 16px;
  margin-block: 22px;
}
.avviso-segno { font-family: var(--f-titolo); font-size: 30px; line-height: 1; color: var(--abisso); }
.avviso h3 { color: var(--abisso); margin: 0 0 4px; }
.avviso p { margin: 0 0 6px; font-size: 14.5px; color: var(--testo-medio); max-width: none; }
.avviso p:last-child { margin-bottom: 0; }
.avviso em { color: var(--testo); font-style: italic; }

.avviso.oro { border-top-color: var(--volonta); }
.avviso.oro .avviso-segno, .avviso.oro h3 { color: var(--volonta); }

/* ---------- tabelle ---------- */

.tabella { overflow-x: auto; margin-block: 16px 24px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-dato);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  padding-bottom: 6px;
}
th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  border-bottom: 1px solid var(--linea);
  padding: 6px 12px 6px 0;
  white-space: nowrap;
}
td {
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--linea-tenue);
  color: var(--testo-medio);
  vertical-align: top;
}
td:first-child { color: var(--testo); }
tbody tr:last-child td { border-bottom: 0; }

.c-stabile  { color: var(--carico-stabile)  !important; }
.c-affanno  { color: var(--carico-affanno)  !important; }
.c-frattura { color: var(--carico-frattura) !important; }
.c-crollo   { color: var(--carico-crollo)   !important; }

.g-1 { color: var(--grado-1) !important; }
.g-2 { color: var(--grado-2) !important; }
.g-3 { color: var(--grado-3) !important; }
.g-4 { color: var(--grado-4) !important; }
.g-5 { color: var(--grado-5) !important; }

.e-trionfo   { color: var(--trionfo)   !important; }
.e-amara     { color: var(--amara)     !important; }
.e-spiraglio { color: var(--spiraglio) !important; }
.e-rovina    { color: var(--rovina)    !important; }

/* ---------- elenchi ---------- */

.battute { list-style: none; padding: 0; margin: 0 0 22px; max-width: 66ch; }
.battute li {
  padding: 7px 0 7px 20px;
  border-bottom: 1px solid var(--linea-tenue);
  position: relative;
  color: var(--testo-medio);
}
.battute li::before { content: "—"; position: absolute; left: 0; color: var(--testo-lieve); }
.battute li:last-child { border-bottom: 0; }
.battute b { color: var(--testo); }

.passi { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: passo; max-width: 66ch; }
/* Numero fuori dal flusso, come in .romani: una voce che contiene un <b>
   seguito da testo non deve poter finire spezzata in due celle. */
.passi li {
  counter-increment: passo;
  position: relative;
  padding: 6px 0 6px 36px;
  border-bottom: 1px solid var(--linea-tenue);
  color: var(--testo-medio);
}
.passi li:last-child { border-bottom: 0; }
.passi li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 10px;
  width: 26px;
  font-family: var(--f-dato);
  font-size: 12px;
  color: var(--testo-lieve);
  font-variant-numeric: tabular-nums;
}

/* ---------- il tiro della Triade ---------- */

.prova {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 3px;
  box-shadow: var(--ombra);
  overflow: hidden;
  margin-bottom: 26px;
}

.prova-dadi { display: grid; grid-template-columns: repeat(3, 1fr); }

.dado { padding: 16px 14px 14px; text-align: center; border-right: 1px solid var(--linea); }
.dado:last-child { border-right: 0; }

.dado-nome {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dado-ruolo {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--testo-lieve);
  margin-bottom: 6px;
}
.dado-valore {
  font-family: var(--f-titolo);
  font-size: 54px;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  display: block;
}
.dado-nudo {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--testo-lieve);
  min-height: 17px;
  display: block;
  margin-top: 3px;
}

.dado[data-d="v"] .dado-nome, .dado[data-d="v"] .dado-valore { color: var(--volonta); }
.dado[data-d="f"] .dado-nome, .dado[data-d="f"] .dado-valore { color: var(--fato); }
.dado[data-d="a"] .dado-nome, .dado[data-d="a"] .dado-valore { color: var(--avversita); }

.dado.gira .dado-valore { animation: guizzo .4s steps(6) 1; }
@keyframes guizzo { from { opacity: .25; } to { opacity: 1; } }

.prova-esito {
  border-top: 1px solid var(--linea);
  padding: 14px 18px 16px;
  background: var(--superficie2);
  border-left: 3px solid var(--linea);
}
.prova-esito[data-esito="trionfo"]   { border-left-color: var(--trionfo); }
.prova-esito[data-esito="amara"]     { border-left-color: var(--amara); }
.prova-esito[data-esito="spiraglio"] { border-left-color: var(--spiraglio); }
.prova-esito[data-esito="rovina"]    { border-left-color: var(--rovina); }

.esito-nome { font-family: var(--f-titolo); font-size: 30px; line-height: 1.05; margin: 0 0 2px; }
.prova-esito[data-esito="trionfo"] .esito-nome   { color: var(--trionfo); }
.prova-esito[data-esito="amara"] .esito-nome     { color: var(--amara); }
.prova-esito[data-esito="spiraglio"] .esito-nome { color: var(--spiraglio); }
.prova-esito[data-esito="rovina"] .esito-nome    { color: var(--rovina); }

.esito-conto {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  font-variant-numeric: tabular-nums;
  margin: 0 0 7px;
}
.esito-testo { margin: 0; font-size: 15px; color: var(--testo-medio); max-width: 64ch; }

.sigillo {
  display: inline-block;
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  margin-bottom: 6px;
  border: 1px solid;
}
.sigillo.miracolo { color: var(--trionfo); border-color: var(--trionfo); }
.sigillo.critico  { color: var(--abisso);  border-color: var(--abisso); }
.sigillo.sciagura { color: var(--rovina);  border-color: var(--rovina); }

.prova-comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 11px 18px;
  border-top: 1px solid var(--linea);
  background: var(--superficie);
}

.comando {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-lieve);
}
.comando select {
  font-family: var(--f-dato);
  font-size: 13px;
  background: var(--inchiostro);
  color: var(--testo);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 4px 6px;
}

.tira {
  font-family: var(--f-dato);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--accento);
  color: var(--inchiostro);
  border: 0;
  border-radius: 2px;
  padding: 9px 22px;
  cursor: pointer;
  margin-left: auto;
}
.tira:hover { filter: brightness(1.12); }
.tira:active { transform: translateY(1px); }

/* ---------- griglie di schede ---------- */

/* Le righe della griglia sono disegnate dalle schede stesse (box-shadow di 1px,
   che non occupa spazio e si sovrappone nel gap): così una riga incompleta non
   lascia mai una cella vuota colorata. */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1px;
  padding: 1px;
  margin-bottom: 26px;
}

/* Per gruppi di poche schede: colonne più larghe, così due o quattro elementi
   riempiono le righe invece di lasciarne una spaiata. */
.griglia.larga { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.scheda {
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linea);
  padding: 14px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.scheda:hover { background: var(--superficie2); }

.scheda-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
.scheda-testa h3 { min-width: 0; }
.scheda-testa h3 {
  font-family: var(--f-titolo);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
  margin: 0;
  line-height: 1.1;
}
.misura {
  margin-left: auto;
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  white-space: nowrap;
}
.misura b { color: var(--volonta); font-size: 15px; font-variant-numeric: tabular-nums; }

.scheda-riga { font-family: var(--f-dato); font-size: 12px; letter-spacing: .06em; color: var(--testo-lieve); margin: 0; }

.coppie { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 3px 10px; font-size: 13.5px; margin: 0; }
.coppie dt {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  padding-top: 3px;
}
.coppie dd { margin: 0; color: var(--testo-medio); }

.gettoni { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; }
.gettone {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--testo-medio);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 2px 7px;
}

/* ---------- filtri ---------- */

.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.filtri > span {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin-right: 4px;
}
.filtro {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 2px;
  color: var(--testo-medio);
  padding: 4px 11px;
  cursor: pointer;
}
.filtro:hover { border-color: var(--testo-lieve); color: var(--testo); }
.filtro[aria-pressed="true"] {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--inchiostro);
  font-weight: 600;
}

.vuoto { font-family: var(--f-dato); color: var(--testo-lieve); padding: 18px 0; }

/* ---------- stat block ---------- */

.creature { display: flex; flex-direction: column; gap: 14px; }

.creatura {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--grado-colore, var(--linea));
  border-radius: 3px;
  padding: 14px 16px 15px;
}
.creatura[hidden] { display: none; }

.creatura-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 3px; }
.creatura-testa h3 {
  font-family: var(--f-titolo);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
  margin: 0;
  line-height: 1.1;
}
.creatura-testa h3 a { color: inherit; text-decoration: none; }
.creatura-testa h3 a:hover { color: var(--accento); }

.grado {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--grado-colore);
  color: var(--grado-colore);
  white-space: nowrap;
}
.creatura-tipo {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--testo-lieve);
  margin-left: auto;
}

.valori {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--linea);
  border-radius: 2px;
  margin: 10px 0 12px;
  overflow: hidden;
}
.valore {
  flex: 1 1 78px;
  padding: 7px 10px;
  border-right: 1px solid var(--linea);
  background: var(--superficie2);
}
.valore:last-child { border-right: 0; }
.valore dt {
  font-family: var(--f-dato);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-lieve);
}
.valore dd {
  margin: 0;
  font-family: var(--f-dato);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
  line-height: 1.2;
}

.creatura-riga { font-size: 14px; color: var(--testo-medio); margin: 0 0 6px; max-width: none; }
.creatura-riga b {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin-right: 7px;
}

.codice { margin: 12px 0 0; border-top: 1px solid var(--linea); padding-top: 10px; }
.codice > h4 {
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--abisso);
  margin: 0 0 7px;
}
.codice ol { margin: 0; padding: 0; list-style: none; counter-reset: voce; }
.codice li {
  counter-increment: voce;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 4px 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--linea-tenue);
  font-size: 14px;
}
.codice li:last-child { border-bottom: 0; }
.codice li::before {
  content: counter(voce);
  font-family: var(--f-dato);
  font-size: 11px;
  color: var(--testo-lieve);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.codice b { color: var(--testo); font-weight: 600; }
.codice span { color: var(--testo-medio); display: block; }

/* Postilla: un'eccezione o una precisazione che non va confusa con la regola. */
.nota {
  font-size: 14px;
  color: var(--testo-lieve);
  border-left: 2px solid var(--linea);
  padding-left: 13px;
  margin: -6px 0 18px;
}
.nota b { color: var(--testo-medio); font-weight: 600; }

.nota-design {
  font-size: 13.5px;
  font-style: italic;
  color: var(--testo-lieve);
  border-left: 2px solid var(--linea);
  padding-left: 11px;
  margin: 0 0 10px;
  max-width: none;
}

/* ---------- personaggi pronti ---------- */

.pronto {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--volonta);
  border-radius: 3px;
  padding: 15px 17px;
  margin-bottom: 26px;
}
.pronto-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 12px;
}
.pronto-testa h3 { margin: 0; min-width: 0; }
.pronto-note {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-lieve);
}

/* I sei Attributi in riga, come sulla scheda di carta. */
.attributi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.attributo {
  background: var(--superficie2);
  padding: 8px 4px 7px;
  text-align: center;
  min-width: 0;
}
.attributo-nome,
.attributo-scala {
  display: block;
  font-family: var(--f-dato);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  overflow-wrap: anywhere;
}
.attributo-cifra {
  display: block;
  font-family: var(--f-titolo);
  font-size: 27px;
  line-height: 1.1;
  color: var(--volonta);
  padding: 2px 0 1px;
}

.misure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 14px;
  font-family: var(--f-dato);
}
.misure dt {
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-lieve);
}
.misure dd {
  margin: 0;
  font-size: 17px;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .attributi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attributo-cifra { font-size: 23px; }
}

/* ---------- ritratti di classi e popoli ---------- */

/*
 * Le illustrazioni sono verticali (572x1024). In colonna occuperebbero uno
 * schermo intero, quindi stanno di fianco ai dati d'identita' e passano sopra
 * solo quando la pagina si stringe. I figli sono due elementi espliciti, mai
 * testo libero: la griglia qui e' sicura.
 */
.identita {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}
.identita-dati { min-width: 0; }
.identita-dati > :first-child { margin-top: 0; }
.identita .tabella { margin-top: 0; }

.ritratto {
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
  background: var(--superficie);
  line-height: 0;
}
.ritratto img { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .identita { grid-template-columns: 1fr; gap: 14px; }
  /* Da solo in colonna il ritratto sarebbe altissimo: lo ritaglio a fascia. */
  .ritratto img {
    height: clamp(220px, 46vw, 300px);
    object-fit: cover;
    object-position: center 22%;
  }
}

/* La miniatura nelle griglie di classi e popoli. */
.scheda.con-miniatura {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 13px;
  align-items: start;
}
.scheda.con-miniatura > .miniatura {
  grid-row: 1 / -1;
  width: 62px;
  height: 111px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--linea);
  align-self: stretch;
}
.scheda.con-miniatura > :not(.miniatura) { grid-column: 2; }

/* ---------- l'apertura della home ---------- */

/*
 * L'illustrazione ha il vuoto a sinistra e la citta' a destra: il titolo si
 * posa sul vuoto e non copre niente di disegnato. Sotto i 700px il testo
 * scende invece sotto l'immagine — sovrapporlo a quella larghezza lo
 * renderebbe illeggibile, e il ritaglio verticale perderebbe la figura.
 */
.eroe {
  position: relative;
  margin: -26px calc(var(--margine) * -1) 30px;
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
  background: #07060a;
}

.eroe-arte { display: block; }

.eroe-arte img {
  display: block;
  width: 100%;
  height: clamp(300px, 33vw, 460px);
  object-fit: cover;
  object-position: 72% 44%;
}

.eroe-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7, 6, 10, .94) 0%,
    rgba(7, 6, 10, .88) 32%,
    rgba(7, 6, 10, .46) 56%,
    rgba(7, 6, 10, 0) 78%);
}

.eroe-testo {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(640px, 60%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--margine);
}

/* L'arte resta scura anche col tema pergamena: qui i colori sono fissi. */
.eroe-testo .occhiello { color: #9c8f78; }
.eroe-testo h1 { color: #f4ede0; text-shadow: 0 2px 22px rgba(0, 0, 0, .75); }
.eroe-testo .sommario {
  color: #c4b9a6;
  margin-bottom: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}

@media (max-width: 700px) {
  .eroe {
    background: none;
    border-bottom: 0;
    margin-bottom: 24px;
  }
  .eroe-arte img {
    height: clamp(230px, 62vw, 320px);
    object-position: 76% center;
    border-bottom: 1px solid var(--linea);
  }
  .eroe-velo { display: none; }
  .eroe-testo {
    position: static;
    width: auto;
    padding-top: 20px;
  }
  .eroe-testo .occhiello { color: var(--testo-lieve); }
  .eroe-testo h1 { color: var(--testo); text-shadow: none; }
  .eroe-testo .sommario { color: var(--testo-medio); text-shadow: none; }
}

/* ---------- colonna destra ---------- */

.lato {
  grid-area: lato;
  position: sticky;
  top: var(--barra);
  max-height: calc(100vh - var(--barra));
  overflow-y: auto;
  border-left: 1px solid var(--linea);
  background: var(--superficie);
  padding-block: 22px 60px;
  padding-inline: 18px;
}

.lato-blocco + .lato-blocco { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linea); }
.lato-blocco h2 {
  font-family: var(--f-dato);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-medio);
  margin: 0 0 9px;
}
.lato-blocco p { font-size: 13.5px; color: var(--testo-medio); margin: 0 0 8px; max-width: none; }
.lato-blocco .tabella { margin: 0; }
.lato-blocco ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--testo-medio); }

.quattro {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 2px;
  overflow: hidden;
  margin: 0;
}
.quattro > div { background: var(--superficie2); padding: 7px 10px; }
.quattro dt { font-family: var(--f-titolo); font-size: 16px; line-height: 1.1; }
.quattro dd {
  margin: 0;
  font-family: var(--f-dato);
  font-size: 12px;
  color: var(--testo-lieve);
  font-variant-numeric: tabular-nums;
}

.romani { list-style: none; margin: 0; padding: 0; counter-reset: romano; }
/*
 * Il numero romano sta in un riquadro assoluto, non in una colonna di griglia.
 * Con la griglia bastava che il glossario marcasse una parola dentro la voce
 * perche' il testo si spezzasse in piu' celle: meta' finiva nella colonna da
 * 22px del numero e si accavallava. Qui il testo resta un flusso unico e
 * qualunque elemento inline dentro la voce e' innocuo.
 */
.romani li {
  counter-increment: romano;
  position: relative;
  padding: 4px 0 4px 30px;
  font-family: var(--f-dato);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--testo-medio);
  border-bottom: 1px solid var(--linea-tenue);
}
.romani li:last-child { border-bottom: 0; }
.romani li::before {
  content: counter(romano, upper-roman);
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  color: var(--testo-lieve);
  font-size: 11px;
  line-height: 1.3;
}

/* ---------- piede ---------- */

.piede {
  border-top: 1px solid var(--linea);
  margin-top: 48px;
  padding-top: 20px;
  font-family: var(--f-dato);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--testo-lieve);
}
.piede p { max-width: 70ch; margin: 0 0 6px; }
.piede a { color: var(--testo-medio); }

/* ---------- ricerca ---------- */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, .74);
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* senza questo il riquadro si stira a tutta altezza */
  padding-block: 12vh 20px;
  padding-inline: 16px;
}
.velo[hidden] { display: none !important; }

.cercatore {
  width: min(640px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 4px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
  overflow: hidden;
}
.cercatore input {
  font-family: var(--f-testo);
  font-size: 19px;
  background: var(--superficie);
  color: var(--testo);
  border: 0;
  border-bottom: 1px solid var(--linea);
  padding: 14px 18px;
  width: 100%;
}
.cercatore input:focus { outline: none; border-bottom-color: var(--accento); }
.cercatore input::placeholder { color: var(--testo-lieve); }

.esiti { overflow-y: auto; padding: 6px 0 8px; }
.esiti ul { margin: 0; padding: 0; list-style: none; }
.esiti li a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 18px;
  font-family: var(--f-dato);
  font-size: 15px;
  color: var(--testo-medio);
  text-decoration: none;
}
.esiti li[aria-selected="true"] a { background: var(--superficie3); color: var(--testo); }
.esiti li a b { font-weight: 600; color: var(--testo); }
.esiti li a em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin-left: auto;
  flex-shrink: 0;
}
.esiti .vuoto { padding: 18px; font-size: 14px; }

/* ---------- adattamento ---------- */

@media (max-width: 1200px) {
  .guscio { grid-template-columns: 196px minmax(0, 1fr); grid-template-areas: "menu palco"; }
  .lato { display: none; }
}

@media (max-width: 880px) {
  .guscio { grid-template-columns: 1fr; grid-template-areas: "menu" "palco"; }
  .menu {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
    display: flex;
    overflow-x: auto;
    padding-block: 0;
  }
  .menu-gruppo { margin-bottom: 0; display: flex; }
  .menu-gruppo > h2 { display: none; }
  .menu a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 10px 14px; }
  .menu a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--accento); }
  .menu a i { display: none; }
  .palco { --margine: 18px; }
  .barra { flex-wrap: wrap; }
  .cerca-avvio { order: 3; max-width: none; flex-basis: 100%; }
  .indice-pagina { columns: 1; }
}

@media (max-width: 620px) {
  /*
   * Su un telefono una tabella a tre o quattro colonne si spreme finche' i
   * nomi si rompono a meta' («Ivar / di / Namar» in 37px). Qui do una
   * larghezza minima alla singola cella: le tabelle strette restano come
   * sono, e solo quelle che davvero non ci stanno superano il contenitore e
   * scorrono — cosa per cui .tabella ha gia' overflow-x: auto.
   */
  .tabella td,
  .tabella th { min-width: 92px; }
  .tabella { overscroll-behavior-x: contain; }
}

@media (max-width: 440px) {
  .palco { --margine: 16px; }
  .dado { padding: 12px 6px 10px; }
  .dado-valore { font-size: 34px; }
  .dado-ruolo { display: none; }
  .esito-nome { font-size: 25px; }
  .coppie { grid-template-columns: 1fr; }
  .coppie dt { padding-top: 6px; }
  .creatura-tipo { margin-left: 0; flex-basis: 100%; }
}

@media print {
  .eroe { margin: 0 0 16px; background: none; border: 0; }
  .eroe-arte, .eroe-velo { display: none; }
  .eroe-testo { position: static; width: auto; padding: 0; }
  .eroe-testo .occhiello,
  .eroe-testo h1,
  .eroe-testo .sommario { color: #000; text-shadow: none; }
  .barra, .menu, .lato, .velo, .prova-comandi, .filtri { display: none !important; }
  .guscio { display: block; max-width: none; }
  .palco { padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
}

/* ---------- tavole del Bestiario ---------- */

/* Solo sei creature su diciannove hanno una tavola: quando c'è, lo stat block
   diventa a due colonne; quando manca, resta esattamente com'era. */
.creatura.con-tavola {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
}

.tavola { margin: 0; }
.tavola img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 1004;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--linea);
}

.creatura-corpo { min-width: 0; }

.creatura-token {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--grado-colore);
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 620px) {
  .creatura.con-tavola { grid-template-columns: 1fr; gap: 12px; }
  .tavola img { aspect-ratio: 16 / 9; object-position: center 22%; }
}

/* ---------- Atlante di Yokuro ---------- */

.parte { margin-bottom: 8px; }

.voce { margin-bottom: 26px; }
.voce h3 {
  font-family: var(--f-titolo);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
  margin: 22px 0 2px;
}

.voce-occhiello {
  font-family: var(--f-testo);
  font-style: italic;
  font-size: 15.5px;
  color: var(--testo-lieve);
  margin: 0 0 10px;
  max-width: 64ch;
}

/* Rete di relazioni, Ambizione, Uso in campagna: stessa forma, etichetta diversa. */
.marcato {
  border-left: 2px solid var(--linea);
  padding-left: 13px;
  margin: 0 0 12px;
  max-width: 66ch;
}
.marcato > b {
  display: block;
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin-bottom: 2px;
}
.marcato p { margin: 0; }
.marcato .battute { margin-bottom: 0; }

.filologo {
  background: var(--superficie2);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--fato);
  border-radius: 3px;
  padding: 12px 15px;
  margin: 0 0 14px;
  max-width: 68ch;
}
.filologo > b {
  display: block;
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fato);
  margin-bottom: 3px;
}
.filologo p { margin: 0; font-style: italic; color: var(--testo-medio); max-width: none; }

/* ---------- segreti del Custode ---------- */

.segreto {
  border: 1px solid var(--linea);
  border-left: 2px solid var(--abisso);
  border-radius: 3px;
  background: var(--superficie);
  margin: 0 0 14px;
  max-width: 68ch;
}
.segreto > summary {
  font-family: var(--f-dato);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--abisso);
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.segreto > summary::-webkit-details-marker { display: none; }
.segreto > summary::before {
  content: "✦";
  font-size: 13px;
  opacity: .8;
}
.segreto > summary::after {
  content: "chiuso";
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--testo-lieve);
}
.segreto[open] > summary::after { content: "aperto"; }
.segreto > summary:hover { color: var(--testo); }
.segreto > *:not(summary) { padding: 0 14px; }
.segreto > p { margin: 0 0 11px; color: var(--testo-medio); max-width: none; }
.segreto > .battute { margin-bottom: 11px; }

.comando-segreti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 22px;
}
.comando-segreti span {
  font-family: var(--f-dato);
  font-size: 12.5px;
  color: var(--testo-lieve);
}
#apri-segreti[aria-pressed="true"] {
  border-color: var(--abisso);
  color: var(--abisso);
}

.scheda-citazione {
  font-family: var(--f-testo);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--testo-lieve);
  margin: 2px 0 0;
}

/* ---------- accesso, iscrizione, registro ---------- */

/* Pagine senza menu né colonna destra: il contenuto si centra. */
.guscio.solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "palco"; max-width: 940px; }
.guscio.solo .palco { padding-block: 44px 60px; }

.barra-vuoto { flex: 1; }

.chi-sei {
  font-family: var(--f-dato);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--testo-medio);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.azioni-barra .esci { margin: 0; }
.azioni-barra a.bottone-lieve { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

.pallino {
  display: inline-block;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--avversita);
  color: var(--inchiostro);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 15px;
}

.modulo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 3px;
  box-shadow: var(--ombra);
  padding: 22px;
  margin: 0 0 16px;
}

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label {
  font-family: var(--f-dato);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-lieve);
}
.campo input,
.campo textarea {
  font-family: var(--f-testo);
  font-size: 16px;
  background: var(--inchiostro);
  color: var(--testo);
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 9px 11px;
  width: 100%;
  resize: vertical;
}
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--accento); }
.campo-aiuto {
  font-family: var(--f-dato);
  font-size: 12.5px;
  color: var(--testo-lieve);
  margin: 0;
  max-width: none;
}

.modulo .tira { margin-left: 0; align-self: flex-start; }

.allarme,
.lieta {
  font-family: var(--f-dato);
  font-size: 14px;
  border-radius: 3px;
  padding: 10px 14px;
  margin: 0 0 16px;
  max-width: 420px;
}
.allarme { border: 1px solid var(--avversita); border-left-width: 3px; color: var(--avversita); }
.lieta { border: 1px solid var(--spiraglio); border-left-width: 3px; color: var(--spiraglio); }

.sotto-modulo { font-family: var(--f-dato); font-size: 14px; color: var(--testo-lieve); max-width: 60ch; }

/* ---------- registro degli iscritti ---------- */

.conteggio {
  font-family: var(--f-dato);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--testo-lieve);
  vertical-align: middle;
}

.registro td { vertical-align: middle; }
.registro .email { font-size: 12.5px; color: var(--testo-lieve); }
.registro .motivo { font-family: var(--f-testo); font-size: 14px; font-style: italic; }

.pastiglia {
  display: inline-block;
  font-family: var(--f-dato);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.p-in-attesa  { color: var(--volonta); }
.p-approvato  { color: var(--spiraglio); }
.p-rifiutato  { color: var(--rovina); }
.p-sospeso    { color: var(--amara); }

.azioni-riga { display: flex; flex-wrap: wrap; gap: 6px; }
.azioni-riga form { margin: 0; }
.tira.minuto { padding: 5px 12px; font-size: 11px; letter-spacing: .14em; margin-left: 0; }
.stato-nota {
  font-family: var(--f-dato);
  font-size: 12px;
  font-style: italic;
  color: var(--testo-lieve);
}

@media (max-width: 620px) {
  .modulo { padding: 16px; }
  .chi-sei { display: none; }
}

/* ---------- capacità e sistemi di classe ---------- */

.capacita-elenco { display: flex; flex-direction: column; gap: 1px; margin-bottom: 26px; }

.capacita {
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linea);
  padding: 12px 15px 13px;
}
.capacita-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; }
.capacita-testa h4 {
  font-family: var(--f-titolo);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.15;
}
.capacita-note {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-lieve);
  margin-left: auto;
  white-space: nowrap;
}
.capacita p { margin: 0 0 6px; color: var(--testo-medio); max-width: 70ch; }
.capacita .gettoni { margin-top: 0; }

/*
 * Le famiglie dentro una capacità: il manuale le scrive in fila dentro una
 * frase sola, qui tornano sei blocchi leggibili. Due colonne quando c'è
 * spazio, perché sono corte e in colonna singola farebbero una lista infinita.
 */
.famiglie {
  columns: 2;
  column-gap: 26px;
  margin: 8px 0 2px;
}
.famiglia {
  break-inside: avoid;
  margin-bottom: 11px;
}
.famiglie .famiglia-nome {
  font-family: var(--f-dato);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accento);
  margin: 0 0 3px;
}
.famiglia ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.famiglia li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--testo-medio);
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--linea-tenue);
  margin-bottom: 2px;
}
.famiglia li b { color: var(--testo); font-weight: 600; }

@media (max-width: 700px) {
  .famiglie { columns: 1; }
}

.momento {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--volonta);
  border-radius: 3px;
  padding: 15px 17px;
  margin-bottom: 20px;
}
.momento-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.momento-testa h3 {
  font-family: var(--f-titolo);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--volonta);
  margin: 0;
}
.momento .marcato:last-child { margin-bottom: 0; }

.sistema {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.sistema-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.sistema-testa h3 {
  font-family: var(--f-titolo);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
  margin: 0;
}
.sistema .tabella { margin-bottom: 0; }
.sistema .marcato:last-child { margin-bottom: 0; }

.motto {
  font-family: var(--f-testo);
  font-style: italic;
  font-size: 14px;
  color: var(--testo-lieve);
}

.giuramento {
  font-family: var(--f-titolo);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--testo);
  border-left: 2px solid var(--volonta);
  padding-left: 14px;
  margin: 0 0 12px;
  max-width: 62ch;
}

@media (max-width: 620px) {
  .capacita-note { margin-left: 0; white-space: normal; }
}

/* ---------- termini del glossario ---------- */

/* Un termine si riconosce senza gridare: una sottolineatura punteggiata che
   diventa piena al passaggio. Senza JavaScript resta testo normale, leggibile. */
.termine {
  border-bottom: 1px dotted var(--testo-lieve);
  cursor: help;
  transition: color .12s, border-color .12s;
}
.termine:hover,
.termine:focus-visible {
  color: var(--accento);
  border-bottom-color: var(--accento);
  border-bottom-style: solid;
}
.termine[aria-expanded="true"] {
  color: var(--accento);
  border-bottom-color: var(--accento);
  border-bottom-style: solid;
}

/* Nelle etichette in maiuscoletto dei blocchi la punteggiatura sparirebbe:
   lì il segnale è un piccolo indicatore dopo la parola. */
.marcato > b .termine,
.capacita-note .termine,
.valore dt .termine {
  border-bottom: 0;
}
.marcato > b .termine::after,
.capacita-note .termine::after {
  content: "?";
  font-size: .85em;
  vertical-align: super;
  margin-left: 2px;
  opacity: .55;
}
.marcato > b .termine:hover::after { opacity: 1; }

.scheda-glossario {
  position: absolute;
  z-index: 80;
  width: min(340px, calc(100vw - 32px));
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--accento);
  border-radius: 3px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8);
  padding: 13px 15px 12px;
}
.scheda-glossario[hidden] { display: none !important; }

.scheda-glossario h4 {
  font-family: var(--f-titolo);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accento);
  margin: 0 0 5px;
  line-height: 1.15;
}
.scheda-glossario p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--testo-medio);
  max-width: none;
}
.scheda-glossario p b { color: var(--testo); }
.scheda-glossario footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--linea-tenue);
  padding-top: 9px;
}
.scheda-glossario a {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.scheda-glossario .chiudi {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--testo-lieve);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.scheda-glossario .chiudi:hover { color: var(--testo); }

/* ---------- pagina del glossario ---------- */

.voci-glossario { display: flex; flex-direction: column; gap: 1px; margin-bottom: 26px; }
.voce-glossario {
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linea);
  padding: 12px 15px 13px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
}
.voce-glossario > h3 {
  font-family: var(--f-titolo);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo);
  margin: 0;
  line-height: 1.15;
  scroll-margin-top: calc(var(--barra) + 16px);
}
.voce-glossario > div { min-width: 0; }
.voce-glossario p { margin: 0 0 6px; color: var(--testo-medio); max-width: 66ch; }
.voce-glossario .varianti {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--testo-lieve);
}

@media (max-width: 700px) {
  .voce-glossario { grid-template-columns: 1fr; }
}