/* SCRIPTUM FATI — la carta.
 *
 * Un layout solo, tre colori. Le fasce stanno sempre nello stesso posto e nello
 * stesso ordine: testata, pellicola, riga dati, riquadro effetto, ricarica, scala.
 * Il riferimento è specifiche/Scriptum_Fati_LAYOUT_CARTA.md.
 *
 * Le misure sono in em e la carta ha un font-size proprio: cambiando `--scala`
 * si ottiene la carta ridotta senza un secondo foglio di stile e senza un
 * secondo pezzo di HTML. Il layout è uno, le dimensioni due.
 */

.carta {
  --scala: 1;
  --larghezza: calc(300px * var(--scala));
  --altezza:   calc(420px * var(--scala));
  --margine:   calc(14px * var(--scala));

  position: relative;
  width: var(--larghezza);
  height: var(--altezza);
  padding: var(--margine);
  border: calc(3px * var(--scala)) solid var(--bordo);
  border-radius: calc(12px * var(--scala));
  background: var(--fondo);
  font-size: calc(1rem * var(--scala));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.carta.arma     { --bordo: var(--arma-bordo);     --fondo: var(--arma-fondo);     --inchiostro-carta: var(--arma-inchiostro); }
.carta.armatura { --bordo: var(--armatura-bordo); --fondo: var(--armatura-fondo); --inchiostro-carta: var(--armatura-inchiostro); }
.carta.asso     { --bordo: var(--asso-bordo);     --fondo: var(--asso-fondo);     --inchiostro-carta: var(--asso-inchiostro); }

/* --- tappata: ruota di 90°, come al tavolo ------------------------------- */
.carta-posto { display: inline-block; }
.carta-posto.tappata { transform: rotate(90deg); transition: transform .18s ease; }

/* --- 1 · testata -------------------------------------------------------- */
.carta .riga-nome { display: flex; align-items: flex-start; gap: 0.5em; }
.carta .nome {
  font-family: var(--display);
  /* 500 e non 600: un condensato a peso pieno, sulle maiuscole, si legge peggio
     di quanto sembri — le lettere si toccano e il nome diventa una macchia. */
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.12;
  color: var(--inchiostro-carta);
  flex: 1;
  /* la misura la mette il JS, che rimpicciolisce finché il nome non entra */
  font-size: 1.5rem;
}
.carta .grado {
  font-family: var(--dati);
  font-weight: 700;
  font-size: 0.94rem;
  color: #FFF;
  background: var(--bordo);
  border-radius: 0.25em;
  padding: 0.18em 0.5em;
  flex: none;
}

/* --- 2 · pellicola della rarità ----------------------------------------- */
.carta .pellicola {
  display: flex;
  gap: calc(2px * var(--scala));
  margin-top: 0.55em;
  padding: calc(3px * var(--scala));
  border: calc(1.5px * var(--scala)) solid currentColor;
  border-radius: calc(2px * var(--scala));
  background: rgba(255, 255, 255, 0.55);
}
.carta .pellicola i {
  flex: 1;
  height: calc(10px * var(--scala));
  border: calc(1px * var(--scala)) solid currentColor;
  border-radius: calc(1.5px * var(--scala));
  opacity: 0.45;
}
.carta .pellicola i.acceso { background: currentColor; opacity: 1; border-color: transparent; }

/* --- 3 · riga dati ------------------------------------------------------ */
.carta .riga-dati {
  font-family: var(--dati);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--inchiostro-carta);
  opacity: 0.85;
  margin-top: 0.9em;
  min-height: 1.2em;   /* l'assenza è informazione: lo spazio resta, vuoto */
  line-height: 1.35;
}

/* --- 4 · riquadro effetto ----------------------------------------------- */
.carta .riquadro {
  flex: 1;
  /* Senza questo un elemento flex non scende sotto la sua altezza di contenuto:
     il riquadro crescerebbe e spingerebbe RICARICA e SCALA fuori dalla carta,
     invece di tenere il testo dentro di sé. */
  min-height: 0;
  margin-top: 0.5em;
  padding: 0.6em 0.6em 0.5em;
  background: rgba(255, 255, 255, 0.72);
  border: calc(1px * var(--scala)) solid var(--bordo);
  border-color: color-mix(in srgb, var(--bordo) 35%, transparent);
  border-radius: calc(6px * var(--scala));
  overflow: hidden;
}
.carta .opzione + .opzione { margin-top: 0.5em; }
.carta .capo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--bordo);
}
.carta .effetto {
  font-family: var(--testo);
  font-size: 0.72rem;
  line-height: 1.28;
  color: #14120F;
  margin-top: 0.15em;
}
.carta .promemoria {
  font-family: var(--testo);
  font-style: italic;
  font-size: 0.63rem;
  line-height: 1.25;
  color: rgba(20, 18, 15, 0.72);
  margin-top: 0.6em;
}

/* --- 5 · ricarica e scala ------------------------------------------------ */
.carta .ricarica {
  font-family: var(--dati);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--bordo);
  margin-top: 0.6em;
}
.carta .scala {
  font-family: var(--dati);
  font-size: 0.53rem;
  line-height: 1.3;
  color: var(--inchiostro-carta);
  opacity: 0.7;
  margin-top: 0.3em;
}

/* --- la carta intera, dentro una modale --------------------------------- */
.carta.intera { --scala: 1.35; }