/* I tre caratteri, caricati davvero.
   Senza questa riga il browser ripiega su quello che ha, e quello che ha per un
   condensato è spesso Impact: il nome diventa un blocco nero illeggibile e le
   misure del layout non tornano più. La specifica lo diceva — «i fallback vanno
   provati, non dati per buoni» — ed è successo alla prima resa su un browser vero. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;700&display=swap');

/* SCRIPTUM FATI — token di base.
   I colori vengono da Scriptum_Fati_LAYOUT_CARTA.md, sezione «Gli schemi colore»,
   e sono già misurati: non si cambiano senza rimisurare il contrasto. */

:root {
  /* --- tipo di carta: bordo, fondo, inchiostro --- */
  --arma-bordo:      #9B2C1B;
  --arma-fondo:      #FBEEEA;
  --arma-inchiostro: #5C1A10;

  --armatura-bordo:      #14556E;
  --armatura-fondo:      #E8F1F6;
  --armatura-inchiostro: #0C3242;

  --asso-bordo:      #4A2E7A;
  --asso-fondo:      #EDE7F6;
  --asso-inchiostro: #2C1B4A;

  /* --- rarità: colore della pellicola sotto al nome --- */
  --comune:      #8A9299;
  --rara:        #2472B8;
  --epica:       #7B2D9E;
  --leggendaria: #B07A12;

  /* --- interfaccia --- */
  --inchiostro:   #14120F;
  --inchiostro-2: #6B6459;
  --carta:        #EFECE6;
  --pannello:     #FFFFFF;
  --linea:        #D8D3C9;
  --ok:           #3F7D5A;
  --allarme:      #9B2C1B;

  /* --- caratteri ---
     display: stretto, per i nomi. testo: serif, per gli effetti.
     dati: monospaziato, per le righe che si leggono a colpo. */
  /* Niente Impact né Haettenschweiler nel ripiego: sono pesantissimi e
     trasformano il nome in una macchia. Meglio un sans normale, se Oswald manca. */
  --display: Oswald, "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --testo:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --dati:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --raggio: 8px;
  --passo:  8px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}

code, .dati { font-family: var(--dati); }

/* --- barra in alto: solo quella di pagina, non un nome buono per chiunque --- */
body > .testata {
  background: var(--inchiostro);
  color: #F5F2EC;
  padding: calc(var(--passo) * 2) calc(var(--passo) * 3.5);
  display: flex;
  align-items: baseline;
  gap: calc(var(--passo) * 4);
}
body > .testata h1 { font-size: 22px; letter-spacing: 2.5px; }
body > .testata nav { font-family: var(--dati); font-size: 11px; letter-spacing: 1.4px; color: #9C958A; }

.foglio { max-width: 960px; margin: 0 auto; padding: calc(var(--passo) * 4) calc(var(--passo) * 3.5); }

.pannello {
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: calc(var(--passo) * 3);
  margin-bottom: calc(var(--passo) * 3);
}

table { border-collapse: collapse; width: 100%; font-family: var(--dati); font-size: 13px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--linea); }
th { color: var(--inchiostro-2); font-weight: 700; font-size: 11px; letter-spacing: 1px; }
td.n { text-align: right; font-weight: 700; }

.esito { font-weight: 700; }
.esito.ok    { color: var(--ok); }
.esito.rotto { color: var(--allarme); }

.pellicola { display: inline-flex; gap: 2px; vertical-align: middle; }
.pellicola i {
  width: 10px; height: 7px; border-radius: 1px;
  border: 1px solid currentColor; display: block;
}
.pellicola i.acceso { background: currentColor; }
.comune      { color: var(--comune); }
.rara        { color: var(--rara); }
.epica       { color: var(--epica); }
.leggendaria { color: var(--leggendaria); }