/* La pagina degli agenti AI. Riusa da `tavolo.css` i colori, `.btn`,
   `.filetto`, `.sotto` e il fondo della home; qui ci sono le schede.

   Telefono prima: una colonna, 16 px di margine, e nessuna riga piu' larga
   dello schermo. Il pezzo delicato e' la tabella di «Come gioca»: i nomi
   delle carte («Cavallo di bastoni») e i numeri stanno su due colonne, e la
   prima deve poter andare a capo, o sul telefono la pagina intera
   scorrerebbe in orizzontale, che e' la cosa che il resto del sito non fa
   mai. */

.agenti {
  max-width: 1000px; margin: 0 auto;
  padding: clamp(1.4rem, 5vh, 3rem) calc(1rem + var(--dx)) calc(3rem + var(--giu)) calc(1rem + var(--sx));
}
.ritorno { margin: 0 0 1.2rem; }

/* ------------------------------------------------------------ in cima */

.agenti-testa { text-align: center; margin-bottom: 2rem; }
.agenti-testa h1 {
  margin: .6rem 0 0; font-weight: normal; line-height: 1.12;
  font-size: clamp(1.9rem, 7vw, 3rem); letter-spacing: -.01em;
}
.agenti-testa .sotto { max-width: 36rem; margin: .5rem auto 0; line-height: 1.5; }
/* I quattro volti in fila, un po' accavallati come attorno a un tavolo. */
.agenti-volti { display: flex; justify-content: center; }
.agenti-volti .ritratto {
  width: 52px; height: 52px; margin: 0 -5px;
  border-radius: 50%; box-shadow: 0 0 0 3px var(--fondo);
}

/* ------------------------------------------------------------ le schede */

.agenti-schede { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.agente, .agente-jimi {
  background: var(--scheda); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.1rem 1rem 1rem; box-shadow: var(--ombra);
  display: grid; gap: .9rem 1.2rem; min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "volto testo"
    "fattori fattori"
    "come come";
}
.agente-volto { grid-area: volto; }
.agente-volto .ritratto { display: block; width: clamp(84px, 26vw, 160px); height: auto; }
.agente-testo { grid-area: testo; min-width: 0; align-self: center; }
.agente h2, .agente-jimi h2 { margin: 0 0 .3rem; font-weight: normal; font-size: clamp(1.4rem, 5vw, 1.8rem); }
.agente-presenta { margin: 0 0 .5rem; color: var(--inchiostro); line-height: 1.45; }
.agente-numeri { margin: 0 0 .8rem; color: var(--fioco); font-size: .9rem; line-height: 1.4; }
.agente-gioca { margin: 0; }
.agente-gioca .btn { white-space: normal; text-align: center; }

.agente-fattori { grid-area: fattori; margin: 0; text-align: center; }
.agente-fattori .poligono { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.agente-fattori figcaption { font-size: .78rem; color: var(--fioco); margin-top: .2rem; }

/* Sul telefono il volto sta in alto a sinistra e il testo gli scorre
   accanto; il bottone prende tutta la colonna, che e' il bersaglio del
   pollice. */
@media (max-width: 479px) {
  .agente-volto { align-self: start; }
  .agente-testo { align-self: start; }
  .agente-gioca .btn { width: 100%; }
}

.agente-come { grid-area: come; min-width: 0; border-top: 1px solid var(--bordo-tenue); padding-top: .7rem; }
.agente-come summary {
  cursor: pointer; color: var(--accento-chiaro); padding: .25rem 0;
  list-style-position: inside;
}
.agente-come summary:focus-visible { outline: 2px solid var(--accento-chiaro); outline-offset: 2px; }
.agente-come .nota { margin: .6rem 0 .4rem; font-size: .86rem; color: var(--fioco); line-height: 1.45; }
.agente-carattere { margin: .6rem 0 .8rem; padding: 0; list-style: none; font-size: .9rem; line-height: 1.45; }
.agente-carattere li { margin: .25rem 0; }
.agente-carattere strong { font-weight: normal; color: var(--accento-chiaro); white-space: nowrap; }

/* La mano d'esempio: una riga per carta, il valore con una barra relativa
   alla mano (la carta migliore piena). La barra dice «quale e di quanto»
   senza chiedere di leggere una scala; il numero resta per chi lo vuole. */
.agente-valori { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .3rem 0 .5rem; }
.agente-valori caption { caption-side: top; text-align: left; font-size: .8rem; color: var(--fioco); padding-bottom: .35rem; line-height: 1.4; }
.agente-valori th, .agente-valori td { padding: .35rem .3rem; border-top: 1px solid var(--bordo-tenue); text-align: left; vertical-align: middle; }
.agente-valori thead th { border-top: 0; font-weight: normal; font-size: .76rem; color: var(--fioco); }
.agente-valori tbody th { font-weight: normal; overflow-wrap: anywhere; }
.agente-valori td { width: 45%; white-space: nowrap; }
.agente-valori .barra {
  display: inline-block; vertical-align: middle; height: .55rem; max-width: calc(100% - 3.2rem);
  border-radius: 3px; background: var(--fioco); opacity: .45; margin-right: .4rem;
}
.agente-valori .numero { font-variant-numeric: tabular-nums; color: var(--fioco); }
.agente-valori tr.scelta .barra { background: var(--accento-chiaro); opacity: 1; }
.agente-valori tr.scelta .numero, .agente-valori tr.scelta th { color: var(--inchiostro); }
.gioca-questa { font-size: .74rem; color: var(--accento-chiaro); white-space: nowrap; }
.agente-scelta { margin: .4rem 0 0; font-size: .92rem; }

/* Jimi: la stessa forma, piu' piccola e piu' spenta. Non e' un agente, ed e'
   anche quello che gioca quando un agente non risponde in tempo: nasconderlo
   racconterebbe male come funziona il tavolo. */
.agente-jimi {
  margin-top: 1.4rem; background: rgba(10, 20, 14, .6); box-shadow: none;
  grid-template-areas: "volto testo";
}
.agente-jimi .agente-volto .ritratto { width: clamp(64px, 18vw, 88px); }
.agente-jimi h2 small { display: block; font-size: .9rem; color: var(--fioco); margin-top: .15rem; }
.agente-jimi .agente-presenta { color: var(--fioco); font-size: .95rem; }

.agenti-nota { margin: 1.6rem auto 0; max-width: 40rem; text-align: center; font-size: .84rem; color: var(--fioco); line-height: 1.5; }

/* ------------------------------------------------------------ da largo */

@media (min-width: 760px) {
  .agente {
    padding: 1.4rem 1.5rem 1.1rem;
    grid-template-columns: 160px minmax(0, 1fr) 300px;
    grid-template-areas:
      "volto testo fattori"
      "come come come";
  }
  .agente-fattori { align-self: center; }
}
@media (min-width: 1000px) {
  /* Due agenti per riga: la pagina e' larga, e quattro schede una sotto
     l'altra erano due schermate di scorrimento per quattro volti. */
  .agenti-schede { grid-template-columns: 1fr 1fr; }
  .agente {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas:
      "volto testo"
      "fattori fattori"
      "come come";
  }
  .agente-volto .ritratto { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .agente-come summary { transition: none; }
}