/* Reveal 2.0 · la lavagna che si riempie — stili condivisi da telefono,
   browser grande (.r2-desk) e palco TV (.r2-palco): una coreografia, tre
   taglie. Caricato sia dalla pagina guest sia dal palco. */

.r2 { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.r2-kick { text-align: center; font: 700 18px var(--f-mano); color: var(--tenue); }
.r2-domanda { text-align: center; font: 700 20px/1.25 var(--f-display); letter-spacing: -.3px; padding: 0 8px; }
.r2-list {
  flex: 1; min-height: 0;
  /* `clip` e non `hidden` sull'orizzontale: `hidden` nasconde ma lascia la
     scatola SCORRIBILE da codice — chiunque chieda di portare in vista un
     figlio che sporge (e con la riga girata di 88° in prospettiva sporge) può
     farla scorrere di lato. `clip` toglie proprio la possibilità. È la
     seconda serratura sullo scatto laterale del 13 Pro Max; la prima è
     avvicina() in reveal-mobile.js, che scrive solo scrollTop. */
  overflow-y: auto; overflow-x: clip;
  display: flex; flex-direction: column; gap: 12px;
  /* in alto ci vuole strada: il timbro VERA! sporge 13px sopra la prima
     riga e l'overflow lo decapitava */
  padding: 17px 3px 14px;
}

/* la riga-carta: autore · frase · esito */
.r2-row {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 2.5px solid var(--inchiostro);
  border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(38, 33, 27, .18);
  padding: 10px 12px;
}
.r2-row .txt { flex: 1; min-width: 0; font: 600 15px/1.3 var(--f-display); overflow-wrap: break-word; }
.r2-who { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; max-width: 64px; }
.r2-who .nick { font: 700 11px var(--f-display); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r2-esiti { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; max-width: 96px; }
/* Le facce di chi c'è cascato. VANNO A CAPO, e non è arredamento: a tavolo
   pieno un falso può prendere nove voti, e nove dischi da 22 sovrapposti di 7
   fanno 141px dentro una colonna da 96. Sbordavano — verso SINISTRA, perché
   la colonna allinea a destra — e finivano stampati sopra le ultime parole
   della risposta: alla misura, «quella volta della febbre finta al…» aveva la
   fila di facce esattamente sopra «febbre». Andando a capo la riga si alza di
   qualche pixel e non si perde né una faccia né una parola. */
.r2-vittime {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  max-width: 100%; padding-left: 6px; row-gap: 3px;
}
.r2-vittime > * { margin-left: -7px; }
.r2-chip {
  font: 700 13px var(--f-display);
  background: var(--sole);
  border: 2px solid var(--inchiostro); border-radius: 10px;
  padding: 2px 8px;
  box-shadow: 2px 2px 0 var(--inchiostro);
  white-space: nowrap;
}
.r2-chip.zero { background: var(--carta-scura); box-shadow: none; }
/* il bottino del BERSAGLIO, sotto la sua faccia sulla riga della vera: non è
   quello dei segugi (che sta in fondo alla riga), è quello che gli vale
   essersi fatto riconoscere. Sta nella colonna dell'autore, larga 64px. */
.r2-chip.ricon { font-size: 11px; padding: 1px 6px; box-shadow: 1.5px 1.5px 0 var(--inchiostro); }
.r2-desk .r2-chip.ricon { font-size: 13px; padding: 2px 8px; }
.r2-palco .r2-chip.ricon { font-size: 22px; padding: 3px 12px; }
/* EN PLEIN: hai fregato tutto il tavolo — la chip si veste da colpo grosso */
.r2-chip.enplein { background: var(--pomodoro); color: #fff; transform: rotate(-2deg); }
/* Ha scritto la verità senza saperlo: la sua riga non è mai stata in scheda,
   e i punti sono quelli di chi l'ha trovata. Va vestita da colpo, non da
   falso che non ha preso voti. */
.r2-chip.ugualina { background: var(--menta); color: #fff; font-size: 11px; padding: 2px 7px; white-space: normal; text-align: right; }
.r2-row.uguale { border-color: var(--menta); border-width: 3px; }
.r2-desk .r2-chip.ugualina, .r2-palco .r2-chip.ugualina { font-size: 13px; }
.r2-palco .r2-chip.ugualina { font-size: 22px; padding: 3px 12px; }
/* Le gemelle: due che hanno avuto la stessa idea. Non muove un punto, è la
   risata — il cartellino sbuca dal bordo e fa un cenno quando la riga si gira. */
.r2-row.gemella { border-color: var(--uva); overflow: visible; }
.r2-gemelle-tag {
  position: absolute; top: -12px; right: 12px;
  font: 700 12px var(--f-mano); color: #fff;
  background: var(--uva);
  border: 2px solid var(--inchiostro); border-radius: 999px;
  padding: 1px 9px;
  transform: rotate(3deg);
  white-space: nowrap;
}
.r2-row.gemella.r2-flip .r2-gemelle-tag { animation: gemelleCenno .7s ease .45s both; }
@keyframes gemelleCenno {
  0% { transform: rotate(3deg) scale(0); opacity: 0; }
  55% { transform: rotate(-6deg) scale(1.18); opacity: 1; }
  78% { transform: rotate(5deg) scale(.98); }
  100% { transform: rotate(3deg) scale(1); opacity: 1; }
}
.r2-desk .r2-gemelle-tag { font-size: 14px; }
.r2-palco .r2-gemelle-tag { font-size: 24px; padding: 3px 14px; top: -20px; }
.r2-nessuno { font: 700 13px var(--f-mano); color: var(--tenue); text-align: right; }
.r2-row.vera .r2-nessuno { color: #f2ffe9; }

/* la vera: riga menta piena, timbro VERA! */
.r2-row.vera { background: var(--menta); color: #fff; }
.r2-row.vera .txt { font-weight: 700; }
.r2-row.vera .r2-who .nick { color: #fff; }
.r2-vera-stamp {
  position: absolute; top: -13px; left: 12px;
  font: 700 13px var(--f-mano); color: var(--inchiostro);
  background: var(--sole);
  border: 2px solid var(--inchiostro); border-radius: 9px;
  padding: 1px 9px;
  transform: rotate(-4deg);
}

/* il colpo grosso */
.r2-row.clou { border-color: var(--pomodoro); border-width: 3px; }
.r2-whodis {
  flex: none; align-self: center;
  font: 900 44px/1 var(--f-display); letter-spacing: -2px;
  color: var(--pomodoro); text-shadow: 2.5px 3px 0 var(--inchiostro);
  transform: rotate(-3deg);
  margin: -2px 0;
}

/* la coccarda della giuria */
.r2-row.giuria { overflow: visible; }
.r2-coccarda {
  position: absolute; top: -14px; right: 10px;
  font: 700 12px var(--f-mano); color: var(--inchiostro);
  background: var(--sole);
  border: 2px solid var(--inchiostro); border-radius: 999px;
  padding: 2px 9px;
  transform: rotate(3deg);
  white-space: nowrap;
}

/* il segnalino del mazzo sotto la domanda (chip e tinte in design.css) */
.r2-mazzo { align-self: center; transform: rotate(-2deg); }
.r2-desk .r2-mazzo { font-size: 15px; }
.r2-palco .r2-mazzo { font-size: 28px; border-width: 3px; padding: 4px 20px; }

/* note e esito personale */
.r2-nota { text-align: center; font: 700 17px var(--f-mano); color: var(--tenue); padding: 4px 0; }
.r2-esito-badge {
  flex: none; align-self: center;
  font: 700 15px var(--f-display); color: #fff;
  background: var(--menta);
  border: 2.5px solid var(--inchiostro); border-radius: 12px;
  padding: 5px 14px;
  box-shadow: 3px 3px 0 var(--inchiostro);
}
.r2-esito-badge.bad { background: var(--carta-scura); color: var(--inchiostro); }

/* le carte nascono coperte: la lavagna è già tutta impaginata e scoprirle
   non muove NIENTE (su iPhone il reflow a ogni carta faceva scattare lo
   schermo). visibility: fuori anche da screen reader e tap. */
.r2-copri { visibility: hidden; }

/* la carta si scopre: flip dall'alto, con un filo di rimbalzo.
   backface + will-change: il rotateX a 88° su WKWebView flickera senza */
.r2-flip {
  animation: r2flip .5s var(--pop) both;
  transform-origin: 50% 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}
@keyframes r2flip {
  from { transform: perspective(700px) rotateX(88deg); opacity: 0; }
  60%  { transform: perspective(700px) rotateX(-7deg); opacity: 1; }
  to   { transform: none; opacity: 1; }
}
.r2-tremo { animation: r2tremo .45s ease-in-out .5s infinite; }
@keyframes r2tremo {
  0%, 100% { rotate: 0deg; }
  25% { rotate: .7deg; }
  75% { rotate: -.7deg; }
}
@media (prefers-reduced-motion: reduce) {
  .r2-flip { animation: none; }
  .r2-tremo { animation: none; }
}

/* browser grande: la lavagna deve STARCI TUTTA.
   È il riepilogo del round, e a tavolo pieno sono dieci righe: se ne entrano
   due e le altre otto stanno sotto la piega, il riepilogo non c'è — c'è un
   rotolo. Il conto di prima, misurato a 1280×720 con dieci giocatori: 1400px
   di righe dentro 264 di lista.
   Da dove sono usciti i pixel, in ordine di resa:
   1. la riga stava in TRE PIANI (faccia sopra il nome, faccia sopra il
      bottino) e la colonna dell'autore faceva 73px da sola, per una frase che
      ne occupa 29. Adesso è una fila sola — faccia · nome · frase · vittime ·
      bottino — e a decidere l'altezza è il testo, che è la cosa che si legge.
   2. il foglio era largo 880 in una finestra da 1280: 400px di scrivania
      vuota mentre le frasi andavano a capo (vedi guest.css, .mr-desk).
   3. testata e vuoti erano tarati su una lavagna che scorreva.
   Il tetto di larghezza non serve più: a incorniciare ci pensa il foglio. */
/* Sul browser grande la lavagna NON scorre dentro sé stessa: è alta quanto le
   sue righe, e se proprio non ci sta a scorrere è il foglio (vedi .mr-desk in
   guest.css). `flex: 1` qui voleva dire «prenditi la fetta che avanza», ma il
   foglio è a sua volta alto quanto il contenuto: le due misure si rincorrono
   e si fermano dove capita — a tre righe la lista restava corta di DUE pixel
   e compariva una barra di scorrimento su una lavagna mezza vuota. */
.r2-desk { width: 100%; margin: 0 auto; gap: 9px; flex: none; }
.r2-desk .r2-kick { font-size: 19px; }
.r2-desk .r2-domanda { font-size: 25px; line-height: 1.2; }
/* timbro a -15px: strada anche qui */
.r2-desk .r2-list { flex: none; overflow: visible; gap: 8px; padding: 16px 3px 8px; }
.r2-desk .r2-row { padding: 8px 16px; gap: 14px; border-radius: 15px; }
.r2-desk .r2-row .txt { font-size: 19px; line-height: 1.32; }
/* faccia e nome in fila, come sul telefono stretto: è il taglio che fa stare
   la lavagna in una schermata. `flex: none` sull'autore e sull'esito, tutto
   lo spazio che avanza alla frase. */
.r2-desk .r2-who { flex-direction: row; align-items: center; gap: 8px; max-width: none; }
.r2-desk .r2-who .nick { font-size: 15px; max-width: 104px; }
.r2-desk .r2-esiti { flex-direction: row; align-items: center; gap: 9px; max-width: 260px; }
.r2-desk .r2-vittime { padding-left: 4px; }
.r2-desk .r2-chip { font-size: 16px; padding: 2px 10px; }
.r2-desk .r2-vera-stamp { font-size: 16px; top: -15px; }
.r2-desk .r2-coccarda { font-size: 14px; top: -15px; }
.r2-desk .r2-whodis { font-size: 46px; text-shadow: 3px 4px 0 var(--inchiostro); }
.r2-desk .r2-esito-badge { font-size: 18px; }
.r2-desk .r2-nessuno { font-size: 15px; }
.r2-desk .r2-nota { font-size: 19px; }

/* Il desk stretto (1024–1199) è una taglia sua. Il foglio lì è largo quanto
   la finestra meno i margini — a 1024 fa 940 — e diviso in due colonne alla
   frase restano 277px: a 19px sono ventinove caratteri, e una risposta come
   se ne scrivono a una festa ci va a capo TRE volte. Dieci righe così non
   stanno in nessuna finestra (misurato: 649px di lista dentro 570).
   Non si torna a una colonna sola — sarebbe peggio, dieci righe intere in
   fila — e non si allarga il foglio, che è già tutta la finestra: scende di
   una taglia la riga. A 16px la stessa risposta sta in due righe, e la
   lavagna torna a starci tutta. Il confine sta a 1280 e non a 1200 perché
   fin lì il foglio non ha ancora la sua larghezza piena (il tetto è 1240, e
   ci arriva solo da 1324 in su): a 1200×720 le dieci righe ci stavano per
   zero pixel, che vuol dire che al primo nome lungo non ci stanno. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .r2-desk .r2-domanda { font-size: 22px; }
  .r2-desk .r2-row { padding: 7px 12px; gap: 10px; }
  .r2-desk .r2-row .txt { font-size: 16px; }
  .r2-desk .r2-who .nick { font-size: 13px; max-width: 76px; }
  .r2-desk .r2-esiti { gap: 7px; max-width: 200px; }
  .r2-desk .r2-chip { font-size: 14px; padding: 2px 8px; }
  .r2-desk .r2-whodis { font-size: 38px; }
  .r2-desk .r2-esito-badge { font-size: 16px; }
  .r2-desk .r2-nota { font-size: 17px; }
}

/* E la finestra BASSA è l'altra taglia. Un portatile aperto dà 700–780px di
   pagina, e lì il budget non è la larghezza ma i pixel in verticale: a
   1280×720 dieci righe da due capoversi ci stavano per zero pixel, cioè non
   ci stavano — bastava un nick lungo. Qui si stringe quello che non è la
   frase: i respiri della testata, il fianco delle righe, il WHO DIS. La
   frase no, che è la cosa che si legge. */
@media (min-width: 1024px) and (max-height: 820px) {
  .r2-desk { gap: 7px; }
  .r2-desk .r2-kick { font-size: 17px; }
  .r2-desk .r2-domanda { font-size: 23px; }
  .r2-desk .r2-row { padding-block: 6px; }
  .r2-desk .r2-whodis { font-size: 40px; }
}

/* …e sotto i 700 si stringe di nuovo, perché una finestra da 600 esiste
   davvero: un browser su un portatile da 13" con barra dei preferiti e dock
   lascia sei-seicentoventi pixel di pagina, non settecento. Lì la taglia
   di sopra non bastava — dieci righe da due capoversi sbordavano di 51px, e
   a 560 una riga restava proprio fuori.
   Si toglie ancora dai respiri e dal WHO DIS, mai dalla frase: 19px restano
   19px, o il riepilogo non si legge più da un metro. Sotto i 560 la lavagna
   perde: il foglio scorre, ed è la scelta giusta — meglio un foglio che
   scorre di una riga schiacciata a illeggibile. */
@media (min-width: 1024px) and (max-height: 700px) {
  .r2-desk { gap: 5px; }
  .r2-desk .r2-kick { font-size: 15px; }
  .r2-desk .r2-domanda { font-size: 21px; }
  .r2-desk .r2-mazzo { font-size: 13px; }
  /* 15 in cima è il minimo: il timbro VERA! sporge di 15 e l'overflow lo
     decapiterebbe (vedi .r2-list) */
  .r2-desk .r2-list { padding: 15px 3px 2px; }
  .r2-desk .r2-row { padding-block: 4px; }
  .r2-desk .r2-row .txt { line-height: 1.25; }
  .r2-desk .r2-whodis { font-size: 30px; text-shadow: 2px 3px 0 var(--inchiostro); }
  .r2-desk .r2-esito-badge { font-size: 16px; }
  .r2-due .r2-list > * { margin-bottom: 6px; }
}

/* Due colonne, da quattro risposte in su (la classe la mette
   reveal-mobile.js: il conto delle righe lo sa lui). Con dieci giocatori è
   l'unico modo di avere la lavagna intera in una schermata da portatile.
   `columns` e non una griglia: il riempimento è per COLONNA — si legge giù a
   sinistra e poi giù a destra, che è l'ordine in cui le carte si scoprono.
   Sul desk la lista non scorre (vedi `.r2-desk` più su) e qui è obbligatorio:
   una lista alta a forza dentro un `columns` non trabocca in basso — si apre
   una TERZA colonna di lato, che `overflow-x: clip` nasconde, cioè righe
   sparite in silenzio. Nel caso storto (dieci risposte tutte al massimo dei
   caratteri) a scorrere è il foglio: meglio un foglio che scorre di una riga
   che non c'è. */
.r2-due .r2-list {
  display: block;
  columns: 2; column-gap: 20px;
  padding-bottom: 4px;
}
.r2-due .r2-list > * { break-inside: avoid; margin-bottom: 8px; }
.r2-due .r2-list > *:last-child { margin-bottom: 0; }
/* nel flusso a blocchi questi due erano figli flex centrati: qui si centrano
   da sé, dentro la loro colonna */
.r2-due .r2-esito-badge { display: block; width: fit-content; margin-inline: auto; }
.r2-due .r2-whodis, .r2-due .r2-nota { text-align: center; }

/* palco TV (1920 di progetto): si legge dal divano */
.r2-palco { max-width: 1560px; width: 100%; height: 100%; box-sizing: border-box; margin: 0 auto; gap: 22px; padding: 56px 0 36px; }
.r2-palco .r2-kick { font-size: 40px; }
.r2-palco .r2-domanda { font-size: 56px; letter-spacing: -1px; }
.r2-palco .r2-list { gap: 24px; padding: 32px 6px 24px; } /* timbro a -26px: niente decapitazioni da divano */
.r2-palco .r2-row { padding: 24px 32px; gap: 26px; border-radius: 26px; border-width: 4px; box-shadow: 6px 6px 0 rgba(38, 33, 27, .18); }
.r2-palco .r2-row .txt { font-size: 38px; }
.r2-palco .r2-who { max-width: 150px; }
.r2-palco .r2-who .nick { font-size: 24px; max-width: 140px; }
.r2-palco .r2-esiti { max-width: 260px; gap: 8px; }
.r2-palco .r2-vittime > * { margin-left: -12px; }
.r2-palco .r2-chip { font-size: 28px; border-width: 3px; border-radius: 16px; padding: 4px 16px; box-shadow: 3px 3px 0 var(--inchiostro); }
.r2-palco .r2-vera-stamp { font-size: 30px; top: -26px; left: 26px; border-width: 3px; padding: 2px 18px; }
.r2-palco .r2-coccarda { font-size: 26px; top: -26px; right: 24px; border-width: 3px; padding: 4px 18px; }
.r2-palco .r2-whodis { font-size: 150px; letter-spacing: -5px; text-shadow: 7px 8px 0 var(--inchiostro); }
.r2-palco .r2-nessuno { font-size: 28px; }
.r2-palco .r2-nota { font-size: 42px; }


/* ---- il telefono stretto (≤430): la riga si impila ----------------------
   La riga nasce a tre colonne — autore | frase | esito — e sul telefono le
   due colonne laterali non cedono: 64 di autore, 96 di esito, più i vuoti e
   il padding fanno 204px su 331 disponibili. Alla FRASE, che è la cosa che si
   legge, ne restavano CENTOQUINDICI: andava a capo tre volte, la riga si
   allungava, e a dieci giocatori la lavagna diventava un rotolo in cui non si
   capiva più chi avesse scritto cosa. Era il «troppo strizzato».
   Impilando, l'ordine del DOM è già quello giusto — autore, frase, esito — e
   la frase si prende tutta la larghezza. Le righe si accorciano perché
   smettono di andare a capo, quindi se ne vedono di più insieme: è lo stesso
   contenuto, solo leggibile.
   Sopra i 430 (telefoni grandi in orizzontale, tablet) la riga resta a tre
   colonne: lì la larghezza c'è. */
@media (max-width: 430px) {
  /* DUE righe, non tre. Impilare tutto in colonna dava sì la frase larga, ma
     aggiungeva una riga per l'esito e la lavagna passava da 1064 a 1659px di
     rotolo — misurato: più leggibile e meno visibile insieme, cioè metà del
     problema risolto e metà peggiorato.
     Così invece l'autore e l'esito si dividono la PRIMA riga (nome a
     sinistra, punti e facce a destra: chi ha scritto e chi c'è cascato, uno
     accanto all'altro) e la frase si prende tutta la SECONDA. */
  .r2-row { flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; }
  /* l'autore torna una riga: faccia e nome accanto, non uno sopra l'altro */
  .r2-who { order: 1; flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 9px; max-width: none; }
  .r2-who .nick { font-size: 13px; max-width: none; }
  .r2-esiti { order: 2; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; max-width: 62%; }
  .r2-vittime { padding-left: 0; }
  .r2-row .txt { order: 3; flex: 1 0 100%; font-size: 16px; line-height: 1.3; }
  /* la chip «l'ha scritta uguale» non contende più la larghezza alla frase */
  .r2-chip.ugualina { text-align: right; }
}

/* ---- la fascia di mezzo (721–1023) --------------------------------------
   Come per le carte girate: qui la schermata non scorre più (guest.css) ma
   il vestito desk il client non lo mette ancora, e restavano le misure del
   telefono — righe larghe 765px col testo da 15. Taglia intermedia: né il
   pollice né il monitor. */
@media (min-width: 721px) and (max-width: 1023px) {
  .r2 { max-width: 760px; width: 100%; margin: 0 auto; gap: 12px; }
  .r2-kick { font-size: 20px; }
  .r2-domanda { font-size: 24px; line-height: 1.24; }
  .r2-list { gap: 13px; padding-top: 19px; }
  .r2-row { padding: 12px 16px; gap: 14px; border-radius: 16px; }
  .r2-row .txt { font-size: 18px; }
  .r2-who { max-width: 84px; }
  .r2-who .nick { font-size: 13px; max-width: 80px; }
  .r2-esiti { max-width: 112px; }
  .r2-chip { font-size: 16px; padding: 3px 10px; }
  .r2-vera-stamp { font-size: 16px; top: -15px; }
  .r2-coccarda { font-size: 14px; }
  .r2-esito-badge { font-size: 19px; }
  .r2-nessuno { font-size: 15px; }
  .r2-nota { font-size: 20px; }
  .r2-whodis { font-size: 62px; text-shadow: 3.5px 4px 0 var(--inchiostro); }
}