/* La pagina degli avversari. Riusa quasi tutto da `tavolo.css` — .scheda,
   .colonne, .pillola, .gruppo, .piede-comandi — e aggiunge le tre sole cose
   che li' non esistono: i ritratti, la riga del gradino scelto, e il riquadro
   del prompt.

   Il prompt e' il pezzo delicato. E' testo generato, lungo e a righe non
   spezzabili: senza un contenitore che scorre porterebbe la pagina intera a
   scorrere in orizzontale sul telefono, che e' la cosa che il resto del sito
   non fa mai. Da qui `overflow: auto` e `white-space: pre-wrap` insieme: si va
   a capo dove si puo', e dove non si puo' scorre solo il riquadro. */

.ritratti {
  display: grid; gap: .6rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ritratto {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .8rem .95rem; border-radius: var(--raggio);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--bordo-tenue);
  text-decoration: none; color: inherit;
  transition: background .18s ease, border-color .18s ease;
}
a.ritratto:hover { background: rgba(255, 255, 255, .12); border-color: var(--accento-velo); }
.ritratto .titolo { font-size: 1.08rem; }
.ritratto .spiega { font-size: .82rem; color: var(--fioco); line-height: 1.35; }
.ritratto.accesa { background: var(--accento-velo); border-color: rgba(230, 192, 92, .55); }
.ritratto.accesa .titolo { color: var(--accento-chiaro); }
/* Jimi non e' un collegamento: non c'e' una sua pagina da aprire perche' non
   c'e' niente da regolare. Resta in fila con gli altri perche' e' un
   avversario come loro, ed e' anche quello che gioca quando gli altri non
   ce la fanno: nasconderlo racconterebbe male come funziona il tavolo. */
.ritratto-jimi { opacity: .72; }
.ritratto-jimi .nota { margin: .3rem 0 0; font-size: .78rem; }

.gradino { margin: .5rem 0 0; font-size: .86rem; color: var(--accento-chiaro); }

.prompt {
  margin: 0; max-height: min(62vh, 640px); overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5; color: var(--fioco);
  background: rgba(0, 0, 0, .25); border-radius: var(--raggio);
  border: 1px solid var(--bordo-tenue); padding: .9rem 1rem;
}

/* Le pillole qui sono etichette con dentro un radio vero: il radio si nasconde
   e resta raggiungibile da tastiera, che e' cio' che serve perche' la pagina
   funzioni anche senza JavaScript (senza, si salva col bottone del noscript). */
.pillola input { position: absolute; opacity: 0; width: 0; height: 0; }
.pillola:focus-within { outline: 2px solid var(--accento); outline-offset: 2px; }

.gioca-contro { margin-top: .4rem; }

@media (min-width: 900px) {
  /* Il prompt resta fermo mentre si scorre l'elenco delle manopole: e' la cosa
     che si sta guardando, ed e' lo stesso motivo per cui in `/impostazioni/`
     l'anteprima della scena e' `sticky`. */
  .pagina-bot .anteprima { position: sticky; top: 1.4rem; }
}