/* SCRIPTUM FATI — il campo: griglia 5×2, mano e mazzo fuori, tendina a destra. */

.tavolo { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }

.griglia-campo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.griglia-campo .etichetta {
  font-family: var(--dati); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  margin-bottom: 5px;
}
.zona {
  position: relative; height: 268px; border-radius: var(--raggio);
  background: var(--pannello); border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: pointer;
}
.zona.vuota { border-style: dashed; background: transparent; }
.zona.spenta { background: #E7E3DB; opacity: .6; cursor: default; }
.zona.presa { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
.zona .invito {
  font-family: var(--dati); font-size: 10px; letter-spacing: 1.1px;
  color: var(--inchiostro-2); text-align: center; padding: 0 10px;
}
.zona.take { border-color: var(--leggendaria); border-width: 2px; }
.zona.arma { border-color: var(--arma-bordo); }
.zona.armatura { border-color: var(--armatura-bordo); }
.zona.grado { border-color: var(--asso-bordo); }
.riga-2 { margin-top: 22px; }

/* --- la carta Personaggio dentro la sua zona ---------------------------- */
.zona.personaggio { display: block; padding: 14px 16px; cursor: default; overflow-y: auto; }
.zona.personaggio h3 { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: .04em; }
.zona.personaggio h3 { margin-bottom: 10px; }
.zona.personaggio .apri-scheda {
  position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center;
  font-family: var(--dati); font-size: 8.5px; letter-spacing: 1px;
  color: var(--inchiostro-2); margin: 0;
}
.zona.personaggio { cursor: pointer; }
.zona.personaggio .car { display: flex; justify-content: space-between; font-family: var(--dati); font-size: 10px; padding: 2px 0; }
.zona.personaggio .car b { font-family: var(--display); font-size: 14px; font-weight: 600; }
.vita { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; }
.vita b { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--arma-bordo); }
.vita .vt { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--armatura-bordo); }
.vita small { font-family: var(--dati); font-size: 9.5px; color: var(--inchiostro-2); }
.contatore { display: inline-flex; gap: 3px; align-items: center; }
.contatore button {
  width: 22px; height: 22px; line-height: 1; cursor: pointer;
  font-family: var(--dati); font-size: 12px;
  border: 1px solid var(--linea); border-radius: 4px; background: #FFF;
}
.marcatore {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 3px 0 0;
  font-family: var(--dati); font-size: 9px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid currentColor; cursor: pointer;
}
.marcatore.negativa { color: var(--arma-bordo); }
.marcatore.positiva { color: var(--ok); }

/* --- consumate: una pila ------------------------------------------------- */
.pila { position: relative; width: 100%; height: 100%; }
.pila .foglio-pila {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 70%; height: 62%; border: 1px solid var(--linea); border-radius: 6px; background: #FFF;
}
.pila .in-cima { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); }
.pila .conto {
  position: absolute; bottom: 12px; width: 100%; text-align: center;
  font-family: var(--dati); font-size: 9.5px; color: var(--inchiostro-2);
}

/* --- sotto la griglia: mano, mazzo, cedute ------------------------------- */
.fuori-griglia { display: grid; grid-template-columns: 1fr auto auto; gap: 22px; margin-top: 26px; align-items: start; }
.mano-carte { display: flex; gap: 10px; flex-wrap: wrap; min-height: 152px; }
.mazzo-blocco {
  width: 150px; height: 152px; border-radius: var(--raggio);
  background: var(--inchiostro); color: #F5F2EC; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.mazzo-blocco b { font-family: var(--display); font-size: 32px; font-weight: 600; }
.mazzo-blocco span { font-family: var(--dati); font-size: 9px; letter-spacing: 1.4px; }
.mazzo-blocco small { font-family: var(--dati); font-size: 8.5px; color: #9C958A; }
.gesti { display: flex; flex-direction: column; gap: 7px; width: 180px; }
.cedute-ripiano {
  border: 1px dashed var(--linea); border-radius: var(--raggio); padding: 10px;
  display: flex; gap: 10px; align-items: center; min-width: 230px;
}

/* --- la tendina di destra ------------------------------------------------ */
.tendina { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.tendina .riga-carta {
  border: 1px solid var(--linea); border-left-width: 5px; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 7px; background: #FFF;
}
.tendina .riga-carta.arma { border-left-color: var(--arma-bordo); }
.tendina .riga-carta.armatura { border-left-color: var(--armatura-bordo); }
.tendina .riga-carta.asso { border-left-color: var(--asso-bordo); }
.tendina .riga-carta b { font-family: var(--display); font-size: 12.5px; font-weight: 500; letter-spacing: .03em; }
.tendina .riga-carta p { font-family: var(--testo); font-size: 10.5px; margin: 3px 0 0; color: var(--inchiostro); }
.tendina .dove { font-family: var(--dati); font-size: 8.5px; color: var(--inchiostro-2); float: right; }

/* --- modali --------------------------------------------------------------- */
.modale-velo {
  position: fixed; inset: 0; z-index: 60; background: rgba(20,18,15,.62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modale {
  background: #F7F5F1; border: 2px solid var(--inchiostro); border-radius: 12px;
  padding: 24px 28px; max-width: 1000px; max-height: 90vh; overflow-y: auto; width: 100%;
}
.modale.stretta { max-width: 620px; }
.modale .capo-modale { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.modale h2 { font-size: 21px; letter-spacing: .8px; }
.modale .sotto { font-family: var(--dati); font-size: 10.5px; color: var(--inchiostro-2); margin: 4px 0 0; }
.modale .chiudi { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--inchiostro-2); }
.modale hr { border: 0; border-top: 1px solid var(--linea); margin: 16px 0; }
.due-colonne { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; }
.gruppo-azioni h3 {
  font-family: var(--dati); font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--inchiostro-2); margin: 18px 0 8px;
}
.destinazioni { display: flex; flex-wrap: wrap; gap: 7px; }
.dest {
  font-family: var(--dati); font-size: 10px; letter-spacing: .6px;
  padding: 5px 12px; border-radius: 11px; cursor: pointer;
  background: #FFF; color: var(--asso-bordo); border: 1px solid currentColor;
}
.dest:disabled { color: var(--inchiostro-2); opacity: .45; cursor: default; }
.azione-riga { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.azione-riga .bottone { width: 250px; }
.azione-riga span { font-family: var(--testo); font-size: 11px; color: var(--inchiostro-2); }
.elenco-mazzo li {
  list-style: none; display: grid; grid-template-columns: 5px 1fr auto auto;
  gap: 12px; align-items: center; background: #FFF;
  border: 1px solid var(--linea); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px;
}
.elenco-mazzo { padding: 0; margin: 0; }
.elenco-mazzo .striscia { width: 5px; height: 26px; border-radius: 2.5px; }
.elenco-mazzo .arma .striscia { background: var(--arma-bordo); }
.elenco-mazzo .armatura .striscia { background: var(--armatura-bordo); }
.elenco-mazzo .asso .striscia { background: var(--asso-bordo); }
.elenco-mazzo b { font-family: var(--display); font-size: 13.5px; font-weight: 500; letter-spacing: .03em; }
.elenco-mazzo p { font-family: var(--testo); font-size: 10.5px; margin: 2px 0 0; color: var(--inchiostro-2); }
.avvertenza { font-family: var(--testo); font-style: italic; font-size: 11.5px; color: var(--inchiostro-2); }

/* --- la scheda intera, in modale ---------------------------------------- */
.scheda-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scheda-tre.piccoli { grid-template-columns: repeat(5, 1fr); }
.scheda-tre b { font-family: var(--display); font-size: 26px; font-weight: 600; }
.scheda-tre.piccoli b { font-size: 16px; }
.scheda-tre em { font-family: var(--dati); font-size: 12px; font-style: normal; font-weight: 700; color: var(--inchiostro-2); margin-left: 6px; }
.scheda-tre span { display: block; font-family: var(--dati); font-size: 8.5px; letter-spacing: 1px; color: var(--inchiostro-2); }
.titoletto { font-family: var(--dati); font-size: 9px; font-weight: 700; letter-spacing: 1.3px;
             color: var(--inchiostro-2); margin: 14px 0 4px; }
.testo-scheda { font-family: var(--testo); font-size: 12px; margin: 0; }