/* SCRIPTUM FATI — il compendio: colonna dei filtri, griglia dei risultati. */

.compendio {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}

/* --- la colonna dei filtri ---------------------------------------------- */
.filtri {
  position: sticky;
  top: 16px;
  background: var(--pannello);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 20px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.filtri h2 { font-size: 15px; letter-spacing: 1.2px; margin-bottom: 12px; }
.filtri h3 {
  font-family: var(--dati); font-size: 9px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--inchiostro-2);
  margin: 18px 0 8px;
}
.cerca {
  width: 100%; padding: 8px 10px;
  font-family: var(--dati); font-size: 12px;
  border: 1px solid var(--linea); border-radius: 5px; background: #FFF;
}
.cerca:focus { outline: 2px solid var(--inchiostro); outline-offset: -1px; }

.pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.pillola {
  font-family: var(--dati); font-size: 10px; letter-spacing: 0.6px;
  padding: 4px 11px; border-radius: 11px; cursor: pointer;
  background: #FFF; color: var(--inchiostro-2);
  border: 1px solid currentColor;
}
.pillola:hover { background: var(--carta); }
.pillola.accesa { background: currentColor; }
/* il testo di una pillola accesa deve stare sul suo colore, non sotto */
.pillola.accesa { color: #FFF; }
.pillola.accesa::before { content: ''; }

/* i colori delle pillole sono quelli della carta: si impara una volta sola */
.pillola.tipo-arma          { color: var(--arma-bordo); }
.pillola.tipo-armatura      { color: var(--armatura-bordo); }
.pillola.tipo-asso          { color: var(--asso-bordo); }
.pillola.rarita-comune      { color: var(--comune); }
.pillola.rarita-rara        { color: var(--rara); }
.pillola.rarita-epica       { color: var(--epica); }
.pillola.rarita-leggendaria { color: var(--leggendaria); }
.pillola.tipo-arma.accesa          { background: var(--arma-bordo);      border-color: var(--arma-bordo);      color: #FFF; }
.pillola.tipo-armatura.accesa      { background: var(--armatura-bordo);  border-color: var(--armatura-bordo);  color: #FFF; }
.pillola.tipo-asso.accesa          { background: var(--asso-bordo);      border-color: var(--asso-bordo);      color: #FFF; }
.pillola.rarita-comune.accesa      { background: var(--comune);          border-color: var(--comune);          color: #FFF; }
.pillola.rarita-rara.accesa        { background: var(--rara);            border-color: var(--rara);            color: #FFF; }
.pillola.rarita-epica.accesa       { background: var(--epica);           border-color: var(--epica);           color: #FFF; }
.pillola.rarita-leggendaria.accesa { background: var(--leggendaria);     border-color: var(--leggendaria);     color: #FFF; }
.pillola.accesa:not([class*="tipo-"]):not([class*="rarita-"]) {
  background: var(--inchiostro); border-color: var(--inchiostro);
}

.conteggio {
  font-family: var(--dati); font-size: 12px; font-weight: 700;
  margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--linea);
}


/* --- i risultati --------------------------------------------------------- */
.risultati { display: flex; flex-wrap: wrap; gap: 18px; align-content: start; }
.cella { margin: 0; display: flex; flex-direction: column; align-items: center; }
.cella .carta-posto { cursor: zoom-in; }
.cella .carta { transition: transform .12s ease, box-shadow .12s ease; }
.cella .carta-posto:hover .carta {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(20, 18, 15, 0.18);
}
.vuoto { font-family: var(--dati); font-size: 13px; color: var(--inchiostro-2); }

/* --- la carta a schermo intero ------------------------------------------- */
.velo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 18, 15, 0.62);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.velo-dentro { animation: entra .14s ease-out; }
@keyframes entra { from { transform: scale(.96); opacity: 0; } }