/* Pre-reveal · le carte girate una alla volta (carte-girate.js).
   Vive qui, e non in guest.css, per la stessa ragione di reveal2.css: la
   coreografia è UNA e la recitano due schermi — il telefono e il palco. Il
   palco non carica guest.css, e finché queste regole stavano lì la TV non
   aveva le carte: partiva dritta con la lavagna mentre il tavolo era ancora
   alla prima. Tre taglie, una scena: telefono, browser grande (.cg-desk),
   palco TV (.cg-tv). */

/* ---- pre-reveal · le carte girate una alla volta (carte-girate.js) -------
   Una carta sola in mezzo, coperta; si gira, si legge, esce, arriva la
   prossima. Le misure vengono dal mockup «carte · una alla volta»: il
   riquadro è 280×170 e non si tocca — è la geometria su cui sono tarati il
   volo d'entrata, l'ombra a terra e il mazzo storto dietro. */
.cg { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cg-testa { flex: none; }
.cg-kick { text-align: center; font: 700 16px var(--f-mano); color: var(--tenue); }
.cg-domanda {
  margin-top: 10px; position: relative;
  background: #fff; border: 3px solid var(--inchiostro);
  border-radius: 16px 16px 16px 5px; padding: 13px 15px;
  font: 600 19px/1.3 var(--f-display); overflow-wrap: anywhere;
  box-shadow: var(--ombra-carta);
}

/* Il livello sopra la scena che NON taglia. Serve al solo WHO DIS: lui va
   stampato sopra la carta e fuori dal palco, ma il palco vive dentro
   .cg-scena, che taglia apposta. Qui la scena resta identica — clippa ancora
   le carte in volo — e il whodis le sta sopra, libero di sbordare. */
.cg-scena-wrap { flex: 1; min-height: 0; position: relative; display: flex; }
/* il palcoscenico: overflow hidden apposta, le carte entrano ed escono da qui */
.cg-scena {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-top: 8px;
}
.cg-bagliore {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 45%, rgba(255, 255, 255, .62), rgba(246, 239, 221, 0));
  animation: cgBagliore 3.6s ease-in-out infinite;
}
.cg-palco { position: relative; width: 280px; height: 170px; }

/* le carte che restano, impilate storte dietro a quella in scena */
.cg-dietro {
  position: absolute; inset: 0; border-radius: 16px; z-index: 0;
  background-color: var(--carta);
  background-image: radial-gradient(rgba(38, 33, 27, .08) 1.3px, transparent 1.3px);
  background-size: 15px 15px;
  border: 3px dashed var(--sabbia);
  box-shadow: 2px 2px 0 rgba(38, 33, 27, .14);
  transform: translate(calc(var(--k) * 9px), calc(var(--k) * -9px)) rotate(calc(var(--k) * 2.6deg));
  opacity: calc(.69 - var(--k) * .14);
}
/* l'ombra a terra: si accende quando la carta si posa */
.cg-terra {
  position: absolute; left: 50%; bottom: -24px; z-index: 1;
  width: 212px; height: 22px; margin-left: -106px;
  border-radius: 50%; background: rgba(38, 33, 27, .22);
  filter: blur(7px); opacity: 0;
  transition: opacity .5s ease .06s;
}
.cg-terra.posata { opacity: .68; }
.cg-float { position: relative; z-index: 2; }
.cg-float.respira { animation: cgRespiro 3.6s ease-in-out infinite; }
.cg-float.scossa { animation: cgScossa .55s ease both; }

/* l'entrata e l'uscita: solo transform e opacità, mai layout */
/* ⚠️ La posa d'ingresso la dice `--cg-volo`, NON un `transform` che i vestiti
   riscrivono. Prima ogni taglia si riscriveva il suo `.cg-XXX .cg-outer {
   transform: … }`, e quella riga vale 0-2-0 esattamente come `.cg-outer.dentro`
   — ma sta più in basso nel file, quindi VINCEVA: sul desk e sulla TV la carta
   non si posava mai. Restava nella posa d'ingresso (alzata di 13px, inclinata
   di +2,6° invece che −1,5°) e il pallino della lettera finiva sotto la
   forbice della scena per tutto il tempo in cui la carta si legge. Era il
   «pallino con la A tagliato». Adesso i vestiti danno solo la MISURA del volo
   e le regole di stato tornano a vincere per specificità. */
.cg-outer {
  --cg-volo: 9px;
  position: relative; width: 280px; height: 170px;
  transition: transform .6s cubic-bezier(.34, 1.45, .5, 1), opacity .2s ease;
  transform: translate(var(--cg-volo), calc(var(--cg-volo) * -1)) rotate(2.6deg); opacity: 0;
}
.cg-outer.dentro { transform: translateY(0) scale(1) rotate(-1.5deg); opacity: 1; }
.cg-outer.dentro.giu { transform: translateY(26px) scale(.94) rotate(-1.5deg); }
.cg-outer.via { transform: translate(46px, 62px) rotate(9deg) scale(.84); opacity: 0; }

/* Il giro è in rotateY: qui il 3D serve davvero (due facce), e il progetto ce
   l'ha già collaudato in .r2-flip — backface-visibility è la CURA dello
   sfarfallio su WKWebView, non la causa. */
.cg-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
}
.cg-inner.girata { transition: transform .78s cubic-bezier(.45, .05, .2, 1); transform: rotateY(0); }
.cg-faccia {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.cg-dorso {
  flex-direction: column; gap: 8px; transform: rotateY(180deg);
  background-color: var(--carta);
  background-image: radial-gradient(rgba(38, 33, 27, .09) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  border: 3px dashed var(--sabbia); border-radius: 18px;
  box-shadow: 4px 4px 0 rgba(38, 33, 27, .18);
}
.cg-dorso-seme { font: 700 54px var(--f-display); color: var(--pomodoro); transform: rotate(-4deg); text-shadow: 2px 2px 0 var(--inchiostro); }
.cg-dorso-nota { font: 700 14px var(--f-mano); color: var(--tenue); }
.cg-fronte { padding: 16px 22px; font: 600 20px/1.3 var(--f-display); overflow-wrap: anywhere; }
/* le quattro pelli del mockup, scelte dai dati (vedi carte-girate.js) */
.cg-vera { background: var(--menta); color: #fff; border: 3px solid var(--inchiostro); border-radius: 18px; box-shadow: 5px 5px 0 var(--inchiostro); }
.cg-intruso { background: #fff; color: var(--tenue); border: 3px dashed var(--sabbia); border-radius: 16px; }
.cg-fake { background: #fff; border: 3px solid var(--inchiostro); border-radius: 16px 16px 16px 5px; box-shadow: var(--ombra-carta); }
.cg-clou { background: #fff; border: 3px solid var(--pomodoro); border-radius: 16px 16px 16px 5px; box-shadow: 5px 5px 0 var(--pomodoro); }
.cg-lettera {
  position: absolute; top: -15px; left: -11px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sole); border: 2.5px solid var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 18px var(--f-display); color: var(--inchiostro);
}
.cg-frase { display: block; }
.cg-vera-tag {
  position: absolute; top: -16px; right: -10px;
  font: 700 16px var(--f-mano); color: var(--inchiostro);
  background: var(--sole); border: 2.5px solid var(--inchiostro);
  border-radius: 20px; padding: 2px 14px; transform: rotate(9deg);
}

/* Il WHO DIS?! sull'ultima carta, col lampo bianco e i coriandoli.
   Prima era appeso al palco (`bottom: calc(100% + 14px)`) e finiva sotto la
   forbice di .cg-scena: sul browser largo se ne vedeva l'ultimo quarto, in un
   riquadro. Adesso è appeso alla scena, che non taglia, e si alza da sé fino
   riquadro. Adesso è appeso alla scena, che non taglia.
   E atterra SULLA carta, non sopra: in una finestra da 758 sopra la carta ci
   sono quaranta pixel, e il WHO DIS ne è alto settantasette — messo lassù
   finiva a cavallo della domanda, che è la riga che serve leggere. Così invece
   timbra il bordo alto della carta appena scoperta, che è anche il senso della
   parola. `--cg-whodis-su` è la salita dal centro della scena: mezza carta,
   meno i 14px di morso, più mezza riga di testo — e cambia con la taglia
   perché cambiano tutte e tre. Il transform sta QUI e non sul testo: lì ci
   vive già `cgSlam`, e due transform sullo stesso nodo litigano. */
.cg-whodis {
  position: absolute; left: -34px; right: -34px; top: 50%;
  --cg-whodis-su: 96px;
  transform: translateY(calc(-50% - var(--cg-whodis-su)));
  text-align: center; pointer-events: none; z-index: 7;
}
.cg-whodis-testo {
  display: inline-block;
  font: 700 54px/.9 var(--f-display); color: var(--pomodoro);
  letter-spacing: -2px; text-shadow: 4px 5px 0 var(--inchiostro);
  animation: cgSlam .62s cubic-bezier(.3, 1.5, .5, 1) both;
}
/* IL LAMPO — e qui c'era «il rettangolo grigio che esce col WHO DIS?!».
   Era `background: #fff` su `inset: 0`, cioè una lastra bianca all'80% grande
   quanto TUTTO il foglio (misurata: 331×771 su un telefono da 375). Per mezzo
   secondo spegneva la trama della carta e sbiadiva domanda, carta, scheda e
   bottone in altrettante forme grigie, con quattro bordi netti a filo del
   padding dell'app. Non era un artefatto: era disegnato così.
   Adesso è un BAGLIORE, non una lastra: nasce dove atterra il WHO DIS?! (50%
   30%) e si spegne prima di arrivare ai bordi, che è poi quello che fa un
   flash vero. Senza bordi non c'è nessun rettangolo da vedere.
   `will-change` + `backface-visibility`: il livello dev'essere già composto
   quando l'animazione parte. Su WKWebView una promozione a metà animazione
   vale un fotogramma grigio — stessa medicina di `.r2-flip` in reveal2.css,
   e il motivo per cui il nodo nasce spento in `monta()` invece che qui. */
.cg-lampo {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(70% 38% at 50% 30%,
    rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 52%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cg-lampo.acceso { animation: cgLampo .5s ease both; }
.cg-coriandoli { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }

/* la scheda sotto: chi l'ha scritta, chi c'è cascato, quanto ha fruttato.
   min-height fissa: senza, la comparsa faceva saltare su la carta */
.cg-scheda { flex: none; min-height: 150px; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; }
.cg-card {
  position: relative; width: 296px; max-width: 100%;
  background: #fff; border: 3px solid var(--inchiostro); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--inchiostro);
  padding: 12px 16px 13px; transform: rotate(-.8deg);
  animation: cgSale .45s ease both;
}
.cg-autore { display: flex; align-items: center; gap: 11px; }
.cg-autore-faccia { display: inline-flex; flex: none; animation: cgPop .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .12s; }
.cg-autore-testi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cg-lab { font: 700 15px/1 var(--f-mano); color: var(--tenue); }
.cg-nick { font: 700 21px/1.1 var(--f-display); letter-spacing: -.4px; overflow-wrap: anywhere; }
.cg-sep { height: 0; border-top: 2.5px dashed var(--sabbia); margin: 11px -4px 10px; }
.cg-esito { display: flex; align-items: center; gap: 9px; min-height: 36px; }
.cg-esito-testo { font: 700 16px/1.15 var(--f-mano); color: var(--tenue); flex: 1; min-width: 0; }
.cg-votanti { display: flex; align-items: center; flex: none; cursor: pointer; }
.cg-votante { display: inline-flex; }
.cg-votante + .cg-votante { margin-left: -9px; }
.cg-extra {
  margin-left: -9px; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--inchiostro); color: var(--carta);
  border: 2.5px solid var(--carta); box-shadow: 0 0 0 2px var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--f-display);
}
.cg-chip {
  position: absolute; top: -15px; right: -11px;
  font: 700 19px/1 var(--f-display); border-radius: 30px; padding: 6px 15px;
  transform: rotate(7deg);
  color: var(--inchiostro); background: var(--sole);
  border: 3px solid var(--inchiostro); box-shadow: 3px 3px 0 var(--inchiostro);
  animation: cgPop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .3s;
}
.cg-chip.zero { color: var(--tenue); background: #fff; border: 2.5px dashed var(--sabbia); box-shadow: none; }

.cg-riga { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.cg-conta { font: 700 13px var(--f-mano); color: var(--tenue); }
.cg-pallini { display: flex; gap: 7px; }
.cg-pallino { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--inchiostro); background: #fff; transition: background .3s ease; }
.cg-pallino.fatto { background: var(--inchiostro); }
.cg-pallino.ora { background: var(--sole); }
.cg-bottom { flex: none; padding-top: 12px; display: flex; gap: 10px; align-items: stretch; }
.cg-bottom .btn-cta { flex: 1; min-width: 0; }

/* l'elenco di chi c'è cascato, quando sono più di quattro */
.cg-velo {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(38, 33, 27, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 34px 30px; cursor: pointer;
}
.cg-velo-card {
  background-color: var(--carta);
  background-image: radial-gradient(rgba(38, 33, 27, .09) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  border: 3px solid var(--inchiostro); border-radius: 18px;
  box-shadow: 6px 6px 0 rgba(38, 33, 27, .3);
  padding: 18px 22px 14px; width: 270px; max-height: 100%; overflow: auto;
  transform: rotate(-.6deg); animation: cgSale .3s ease both; cursor: default;
}
.cg-velo-titolo { font: 700 17px var(--f-mano); color: var(--tenue); text-align: center; }
.cg-velo-lista { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.cg-velo-riga { display: flex; align-items: center; gap: 11px; }
.cg-velo-nick { font: 700 18px var(--f-display); }
.cg-velo-piede { text-align: center; margin-top: 12px; border-top: 2px dashed var(--sabbia); padding-top: 9px; font: 600 14px var(--f-mano); color: var(--tenue); }

@keyframes cgBagliore { 0%, 100% { opacity: .4; } 50% { opacity: .72; } }
@keyframes cgRespiro { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-5px) rotate(.4deg); } }
@keyframes cgScossa {
  0% { transform: translateX(0) rotate(0); }
  18% { transform: translateX(-8px) rotate(-2deg); }
  38% { transform: translateX(7px) rotate(1.6deg); }
  58% { transform: translateX(-5px) rotate(-1deg); }
  78% { transform: translateX(3px) rotate(.6deg); }
  100% { transform: translateX(0) rotate(0); }
}
/* Lo slancio parte da 1.6 e non da 2.7. Il 2.7 poteva permetterselo finché
   .cg-scena tagliava tutto quello che sbordava: su un telefono da 390 il
   primo fotogramma è largo 714px e alto 263, cioè copre la domanda e esce da
   tutt'e due i lati. Adesso che il WHO DIS non è più in gabbia (serviva, o a
   riposo se ne vedeva un quarto) quello sbordo si vedrebbe per davvero.
   A 1.6 il rimbalzo c'è ancora tutto — 1.6 → .84 → 1.09 → 1 — e la parola
   resta dentro il foglio anche nel fotogramma peggiore. */
@keyframes cgSlam {
  0% { transform: scale(1.6) rotate(11deg); opacity: 0; }
  48% { transform: scale(.84) rotate(-6deg); opacity: 1; }
  72% { transform: scale(1.09) rotate(-1deg); }
  100% { transform: scale(1) rotate(-4deg); }
}
@keyframes cgLampo { 0% { opacity: .8; } 100% { opacity: 0; } }
@keyframes cgSale { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes cgPop {
  0% { transform: scale(0) rotate(-14deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(7deg); opacity: 1; }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}
/* chi ha chiesto meno movimento vede le carte, non il teatro */
.no-anim .cg-float, .no-anim .cg-bagliore, .no-anim .cg-whodis-testo,
.no-anim .cg-card, .no-anim .cg-chip, .no-anim .cg-autore-faccia { animation: none !important; }

/* ---- taglia palco · tela 1920×1080, leggibile dal divano più lontano -----
   Stesse battute, stessi millisecondi: cambiano solo le misure. Il riquadro
   della carta cresce da 280×170 a 700×425 — la stessa proporzione, o il volo
   d'entrata e l'ombra a terra non tornano più. */
/* Il mount del palco (#rv-mount) è un blocco assoluto, non una colonna flex:
   `flex: 1` su .cg non ha appiglio e la scena si accartoccia in alto, con
   mezzo televisore vuoto sotto. Qui l'altezza si prende esplicitamente —
   come fa .r2-palco per la lavagna. */
.cg-tv {
  height: 100%; box-sizing: border-box;
  max-width: 1560px; margin: 0 auto; padding: 48px 0 36px;
}
.cg-tv .cg-kick { font-size: 40px; }
.cg-tv .cg-domanda {
  margin-top: 26px; border-width: 5px; border-radius: 30px 30px 30px 10px;
  padding: 26px 34px; font-size: 52px; line-height: 1.22;
  box-shadow: 8px 8px 0 rgba(38, 33, 27, .18);
}
.cg-tv .cg-scena { margin-top: 22px; }
.cg-tv .cg-palco, .cg-tv .cg-outer { width: 700px; height: 425px; }
.cg-tv .cg-dietro {
  border-radius: 34px; border-width: 5px; background-size: 34px 34px;
  transform: translate(calc(var(--k) * 22px), calc(var(--k) * -22px)) rotate(calc(var(--k) * 2.6deg));
  box-shadow: 5px 5px 0 rgba(38, 33, 27, .14);
}
.cg-tv .cg-terra { width: 530px; height: 52px; margin-left: -265px; bottom: -58px; filter: blur(16px); }
.cg-tv .cg-outer { --cg-volo: 22px; }
.cg-tv .cg-outer.dentro.giu { transform: translateY(60px) scale(.94) rotate(-1.5deg); }
.cg-tv .cg-outer.via { transform: translate(112px, 150px) rotate(9deg) scale(.84); }
.cg-tv .cg-dorso {
  gap: 18px; border-width: 5px; border-radius: 38px; background-size: 36px 36px;
  box-shadow: 9px 9px 0 rgba(38, 33, 27, .18);
}
.cg-tv .cg-dorso-seme { font-size: 132px; text-shadow: 5px 5px 0 var(--inchiostro); }
.cg-tv .cg-dorso-nota { font-size: 34px; }
.cg-tv .cg-fronte { padding: 38px 54px; font-size: 50px; }
.cg-tv .cg-vera, .cg-tv .cg-intruso, .cg-tv .cg-fake, .cg-tv .cg-clou { border-width: 5px; }
.cg-tv .cg-vera { border-radius: 38px; box-shadow: 12px 12px 0 var(--inchiostro); }
.cg-tv .cg-intruso { border-radius: 34px; }
.cg-tv .cg-fake { border-radius: 34px 34px 34px 10px; box-shadow: 10px 10px 0 rgba(38, 33, 27, .18); }
.cg-tv .cg-clou { border-radius: 34px 34px 34px 10px; box-shadow: 12px 12px 0 var(--pomodoro); }
.cg-tv .cg-lettera {
  top: -32px; left: -24px; width: 84px; height: 84px;
  border-width: 5px; font-size: 42px;
}
.cg-tv .cg-vera-tag { top: -34px; right: -22px; font-size: 34px; border-width: 4px; padding: 4px 22px; }
/* palco: carta 425 (mezza 212), stacco 34, mezza riga 172px/.9 → 77 */
.cg-tv .cg-whodis { --cg-whodis-su: 276px; }
.cg-tv .cg-whodis-testo { font-size: 172px; letter-spacing: -6px; text-shadow: 9px 11px 0 var(--inchiostro); }

.cg-tv .cg-scheda { min-height: 320px; padding-top: 26px; }
.cg-tv .cg-card {
  width: 760px; border-width: 5px; border-radius: 32px;
  box-shadow: 9px 9px 0 var(--inchiostro); padding: 26px 36px 28px;
}
.cg-tv .cg-autore { gap: 24px; }
.cg-tv .cg-lab { font-size: 30px; }
.cg-tv .cg-nick { font-size: 46px; }
.cg-tv .cg-sep { border-top-width: 4px; margin: 22px -8px 20px; }
.cg-tv .cg-esito { gap: 20px; min-height: 82px; }
.cg-tv .cg-esito-testo { font-size: 34px; }
.cg-tv .cg-votanti { cursor: default; } /* la TV non si tocca */
.cg-tv .cg-votante + .cg-votante { margin-left: -20px; }
.cg-tv .cg-extra {
  margin-left: -20px; width: 72px; height: 72px;
  border-width: 5px; box-shadow: 0 0 0 4px var(--inchiostro); font-size: 28px;
}
.cg-tv .cg-chip {
  top: -30px; right: -22px; font-size: 40px; padding: 10px 30px;
  border-width: 5px; box-shadow: 6px 6px 0 var(--inchiostro);
}
.cg-tv .cg-riga { gap: 28px; margin-top: 28px; }
.cg-tv .cg-conta { font-size: 28px; }
.cg-tv .cg-pallini { gap: 14px; }
.cg-tv .cg-pallino { width: 18px; height: 18px; border-width: 3px; }
/* il bottone è roba da pollice: sul divano non lo preme nessuno */
.cg-tv .cg-bottom { display: none; }

/* ---- chi ha chiesto meno movimento --------------------------------------
   Le carte si vedono lo stesso, e agli stessi istanti: quello che sparisce è
   il MOTO, non il contenuto. Saltare l'intera scena lasciava quei telefoni
   davanti alla schermata del bottino per quindici secondi, mentre il resto
   del tavolo guardava il teatro — che è esattamente il problema che il
   pre-reveal doveva risolvere. */
@media (prefers-reduced-motion: reduce) {
  .cg-bagliore, .cg-float.respira, .cg-float.scossa,
  .cg-card, .cg-chip, .cg-autore-faccia, .cg-whodis-testo, .cg-lampo,
  .cg-velo-card { animation: none !important; }
  .cg-outer { transition: opacity .2s ease !important; transform: none !important; }
  .cg-outer.dentro { transform: none !important; opacity: 1; }
  .cg-outer.via { transform: none !important; opacity: 0; }
  .cg-outer.dentro.giu { transform: none !important; }
  /* il giro resta — è il gesto che RACCONTA («chi l'ha scritta?» → la frase),
     e senza non si capisce più che quella carta si è girata. Solo, netto. */
  .cg-inner.girata { transition: transform .2s linear; }
  .cg-terra { transition: none; }
}

/* ---- taglia browser grande (>=1024) -------------------------------------
   La classe .cg-desk la emetteva già carte-girate.js, ma non aveva UNA riga:
   su un monitor la scena restava quella del pollice, 280x170 in mezzo a
   millequattrocento pixel di foglio. Stessa scaletta della taglia palco, a
   metà strada: geometria x1.5, testo x1.3, bordi fermi, raggi x1.15, ombre
   x1.4. La proporzione della carta (1.647) NON si tocca: ci sono tarati
   sopra il volo d'entrata, l'ombra a terra e il mazzo storto dietro. */
/* Il reveal sul desk è a tutto schermo apposta — è il «teatro»: gli avatar del
   tavolo in alto e la lavagna che si riempie sotto. Il pre-reveal però è UNA
   carta sola in mezzo allo schermo, e senza cornice galleggiava sul fondo a
   pois come se fosse fuori centro. Qui si prende il suo foglio, lo stesso di
   ogni altra schermata (.screen.foglio) — meno la pendenza, che con una carta
   che gira dentro darebbe il mal di mare. */
.cg-desk {
  max-width: 780px; margin: 0 auto; width: 100%;
  padding: 20px 34px 14px; box-sizing: border-box;
  background-color: var(--carta);
  background-image: radial-gradient(rgba(38, 33, 27, .08) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
  border: 3px solid var(--inchiostro);
  border-radius: 26px;
  box-shadow: 9px 11px 0 rgba(38, 33, 27, .16);
}
/* Su una finestra bassa non basta rimpicciolire la carta: il foglio è fatto
   di parti che non cedono (domanda, scheda dell'autore, bottone) e sommate
   sfondano. Qui cedono tutte un po', legate all'altezza della finestra —
   sotto i 700px si stringono, sopra restano quelle del mockup. */
.cg-desk .cg-kick { font-size: clamp(16px, 2.2vh, 20px); }
.cg-desk .cg-domanda {
  margin-top: clamp(6px, 1.4vh, 12px); padding: clamp(10px, 1.7vh, 15px) 20px;
  font-size: clamp(18px, 2.6vh, 23px);
  border-radius: 20px 20px 20px 6px;
}
/* La scena DEVE poter contenere la carta: ha overflow:hidden, e se il flex la
   schiaccia sotto l'altezza della carta questa esce tagliata dal bordo alto —
   il volo d'entrata parte da sopra, quindi è sempre la testa a sparire.
   Il min-height è la carta (255) più il respiro dell'ombra a terra e della
   pendenza: sotto questa soglia la scena non scende mai. */
/* La scena DEVE poter contenere la carta: ha overflow:hidden, e se il flex la
   schiaccia sotto l'altezza della carta questa esce tagliata dal bordo alto —
   il volo d'entrata parte da sopra, quindi è sempre la testa a sparire.
   La carta si lega all'altezza della finestra (stessa idea del `22vh` della
   mano sul telefono): su un portatile basso rimpicciolisce invece di farsi
   tagliare, e il foglio non sfonda mai sotto la piega. Il rapporto 1.647 è
   scritto nella formula, quindi non può divergere. */
/* 21vh e non 25: il resto del foglio (testa, scheda, riga, bottone) è alto
   più di quattrocento pixel e non si stringe, quindi in una finestra bassa
   la carta è l'unica cosa che può cedere. A 25 il foglio usciva dal fondo. */
/* ⚠️ Il pavimento va messo anche al WRAP, non solo alla scena. La scena ha il
   suo `min-height` e non scende; il wrap invece è `flex: 1; min-height: 0` e
   si lasciava schiacciare a 35px — a quel punto la scena gli traboccava fuori
   SENZA essere tagliata (il wrap non taglia, è nato apposta per non tagliare
   il WHO DIS) e la carta finiva dipinta SOPRA la scheda dell'autore. Da fuori
   sembrava una carta tranciata dal bordo di un'altra: era questo.
   E `--cg-h` non guarda più solo il 21% dell'altezza ma quello che avanza
   davvero: sotto i 470px di finestra tutto il resto del foglio non ci sta
   comunque, e almeno la carta cede prima di sfondare. */
/* ⚠️ Il ripiego, per i browser senza container query. Un numero solo che
   insegue `100vh` NON può funzionare, ed è per questo che la CTA finiva sul
   bordo: fra 760 e 944px di finestra il respiro del teatro in testa
   (`--mr-respiro`, guest.css) si mangia METÀ di ogni pixel guadagnato, e
   intanto la scheda (23vh), la testa e la barra crescono per conto loro. La
   carta cresceva di 1 dove poteva crescere di 0,18. Qui il numero è tarato
   per non sfondare MAI, cioè per il caso peggiore: su una finestra alta la
   carta resta più piccola del necessario. */
.cg-desk { --cg-h: clamp(96px, calc(100vh - 680px), 200px); }
/* La misura giusta la sa solo il flex: `.cg-scena-wrap` è l'unico `flex: 1`
   della colonna, quindi la sua altezza È lo spazio che avanza dopo testa,
   scheda, riga e barra — qualunque cosa facciano i loro clamp. Letta da
   dentro col container query, la carta si dimensiona su QUELLO e non su una
   costante da tarare a mano. I 90 tolti sono i 10 di margine della scena più
   i 32+48 di riserva anti-forbice.
   `.cg-scena` e `.cg-whodis` sono fratelli dentro il wrap: la variabile va
   scritta su tutti e due, perché dal contenitore non si può leggere sé
   stessi (sarebbe circolare) e la parola del finale ha bisogno della stessa
   misura per sapere dove timbrare. */
@supports (height: 1cqh) {
  .cg-desk .cg-scena-wrap { container-type: size; }
  .cg-desk .cg-scena,
  .cg-desk .cg-whodis { --cg-h: clamp(96px, calc(100cqh - 90px), 200px); }
}
/* pavimento in cifra tonda e non in `var(--cg-h)`: da quando la carta si
   misura sul wrap, un min-height che dipende dalla carta sarebbe un cerchio */
.cg-desk .cg-scena-wrap { min-height: 196px; }
/* La riserva contro la forbice è ASIMMETRICA, come la coreografia. Prima era
   un numero solo (+66) diviso a metà dal centraggio: 28px sopra e 28 sotto,
   dei quali 10 se li mangiava già il margin-top. Ma sopra la carta sporgono il
   pallino della lettera (−20) o il cartellino VERA! (−21) più i 5 del respiro;
   sotto, nel finale, la carta scende di 39 (`giu`) e si scuote di altri 5, con
   7 d'ombra al seguito. Il padding è spazio A PROVA DI FORBICE — `overflow:
   hidden` ritaglia sul bordo del padding box — e con `align-items: center` la
   carta resta comunque centrata nella content box. */
/* Il `× 1.1` è la carta STORTA. La riserva era calcolata sull'altezza dritta,
   ma la carta sta di sghembo di 2,6°: larga com'è (1,647 volte l'altezza) la
   sua scatola vera cresce di 1,647·sin(2,6°) ≈ il 7,5% dell'altezza, metà
   sopra e metà sotto. Quei quattro pixel uscivano dalla content box e li
   pagava il cartellino VERA!, che su una finestra da 720 con la domanda a tre
   righe arrivava a DUE pixel dalla forbice — e in partita ci passava sotto di
   otto. Adesso la riserva comprende lo sghembo. */
.cg-desk .cg-scena { margin-top: 10px; padding: 32px 0 48px; min-height: calc(var(--cg-h) * 1.1 + 80px); }
.cg-desk .cg-palco, .cg-desk .cg-outer { width: calc(var(--cg-h) * 1.647); height: var(--cg-h); }
.cg-desk .cg-dietro {
  border-radius: 20px; background-size: 20px 20px;
  transform: translate(calc(var(--k) * 13px), calc(var(--k) * -13px)) rotate(calc(var(--k) * 2.6deg));
}
.cg-desk .cg-terra { left: 12%; right: 12%; width: auto; margin-left: 0; height: 30px; bottom: -28px; filter: blur(9px); }
.cg-desk .cg-outer { --cg-volo: 13px; }
.cg-desk .cg-outer.dentro.giu { transform: translateY(39px) scale(.94) rotate(-1.5deg); }
.cg-desk .cg-outer.via { transform: translate(69px, 93px) rotate(9deg) scale(.84); }
.cg-desk .cg-dorso {
  gap: 12px; border-radius: 23px; background-size: 21px 21px;
  box-shadow: 6px 6px 0 rgba(38, 33, 27, .18);
}
.cg-desk .cg-dorso-seme { font-size: 70px; text-shadow: 3px 3px 0 var(--inchiostro); }
.cg-desk .cg-dorso-nota { font-size: 18px; }
.cg-desk .cg-fronte { padding: 22px 30px; font-size: 26px; }
.cg-desk .cg-vera { border-radius: 23px; box-shadow: 7px 7px 0 var(--inchiostro); }
.cg-desk .cg-intruso { border-radius: 20px; }
.cg-desk .cg-fake { border-radius: 20px 20px 20px 6px; box-shadow: 6px 6px 0 rgba(38, 33, 27, .18); }
.cg-desk .cg-clou { border-radius: 20px 20px 20px 6px; box-shadow: 7px 7px 0 var(--pomodoro); }
.cg-desk .cg-lettera { top: -20px; left: -15px; width: 48px; height: 48px; border-width: 3px; font-size: 24px; }
/* Appeso quattordici e non ventuno: il cartellino è ruotato di 9°, e su una
   pastiglia da novanta pixel la rotazione da sola lo alza di altri sette. */
.cg-desk .cg-vera-tag { top: -14px; right: -14px; font-size: 21px; border-width: 3px; border-radius: 26px; padding: 3px 18px; }
/* mezza carta (--cg-h/2) + 20 di stacco + mezza riga di testo (86px/.9 → 39) */
/* La parola andava a finire SULLA card della domanda: con `+ 25px` di salita
   e l'interlinea di default la sua scatola partiva 39px sopra il fondo della
   domanda, e sul desk la domanda è alta (due o tre righe da 23px). Adesso
   sale un filo meno e ha l'interlinea stretta, così resta dentro la scena e
   timbra la carta invece della domanda — che è il colpo che deve dare. */
/* Il WHO DIS deve timbrare LA CARTA, e la carta in quell'istante non è dove
   sta a riposo: `chiudi()` l'ha appena messa in `giu`, cioè 39px più in basso
   e scalata a .94. La salita era calcolata sul centro della carta a riposo, e
   la parola cadeva nella fascia vuota fra la domanda e la carta — «si vede
   che sta stretta». Il conto nuovo: mezza carta scalata (.47) meno i 39 di
   `giu`, meno i 22 di morso perché il timbro deve MANGIARE il bordo alto. */
.cg-desk .cg-whodis { left: -50px; right: -50px; --cg-whodis-su: calc(var(--cg-h) * .47 - 61px); }
/* e la parola scala con la carta: a 86px fissi, su una finestra bassa dove
   la carta scende a 140, tornava a cavallo della domanda */
.cg-desk .cg-whodis-testo {
  font-size: clamp(48px, calc(var(--cg-h) * .37), 86px);
  line-height: .85; letter-spacing: -3px; text-shadow: 6px 7px 0 var(--inchiostro);
  /* Lo slancio cresce verso il BASSO, non verso la domanda. Con l'origine al
     centro, il primo fotogramma dello slam (×1,3) allarga anche in alto: sul
     desk la parola è alta il doppio che sul telefono e sopra la carta ci sono
     trenta pixel, così arrivava a cavallo della card della domanda. */
  transform-origin: 50% 0;
  animation-name: cgSlamDesk;
}
/* Lo slancio del desk parte da 1.3 e non da 1.6: la parola qui è alta 58-74px
   contro i 34-54 del telefono, e sopra di lei non c'è la stessa aria. Il
   rimbalzo resta tutto — 1.3 → .88 → 1.07 → 1 — ma i due spigoli non
   scavalcano più la domanda. */
@keyframes cgSlamDesk {
  0% { transform: scale(1.3) rotate(7deg); opacity: 0; }
  48% { transform: scale(.88) rotate(-5deg); opacity: 1; }
  72% { transform: scale(1.07) rotate(-1deg); }
  100% { transform: scale(1) rotate(-4deg); }
}

/* La riserva della scheda deve stare SOPRA l'altezza vera della card, o non
   tiene il posto di niente: era `clamp(104px, 15vh, 132px)` contro una card
   che misura 160px a 680 di finestra e 185 a 900. I 14px di differenza li
   pagava la CTA in fondo, che si spostava a ogni carta e con la scheda piena
   finiva appoggiata al bordo del foglio. È il «bottone che si muove e delle
   volte si attacca al bordo inferiore». */
.cg-desk .cg-scheda { min-height: clamp(164px, 23vh, 192px); padding-top: clamp(4px, 1.2vh, 10px); }
.cg-desk .cg-card { width: 440px; border-radius: 20px; box-shadow: 6px 6px 0 var(--inchiostro); padding: clamp(11px, 1.9vh, 17px) 24px clamp(12px, 2.1vh, 19px); }
.cg-desk .cg-autore { gap: 16px; }
.cg-desk .cg-lab { font-size: clamp(16px, 2.1vh, 19px); }
.cg-desk .cg-nick { font-size: clamp(21px, 3vh, 27px); }
.cg-desk .cg-sep { margin: clamp(9px, 1.8vh, 16px) -6px clamp(8px, 1.7vh, 15px); }
.cg-desk .cg-esito { gap: 13px; min-height: clamp(38px, 5.4vh, 48px); }
.cg-desk .cg-esito-testo { font-size: clamp(17px, 2.3vh, 20px); }
.cg-desk .cg-votante + .cg-votante { margin-left: -12px; }
.cg-desk .cg-extra { margin-left: -12px; width: 42px; height: 42px; border-width: 3px; font-size: 17px; }
.cg-desk .cg-chip { top: -20px; right: -15px; font-size: 25px; padding: 8px 20px; box-shadow: 4px 4px 0 var(--inchiostro); }
.cg-desk .cg-riga { gap: 20px; margin-top: clamp(6px, 1.6vh, 14px); }
.cg-desk .cg-conta { font-size: 17px; }
.cg-desk .cg-pallini { gap: 10px; }
.cg-desk .cg-pallino { width: 13px; height: 13px; border-width: 2.5px; }
.cg-desk .cg-bottom { padding-top: clamp(2px, 1vh, 8px); }

/* ── il teatro su una finestra bassa ────────────────────────────────────────
   A 1280×620 (un portatile da 13") la colonna non entrava nel foglio e la CTA
   restava fuori. Le riserve del palco sono tarate sul caso peggiore di una
   finestra ALTA: quaggiù si stringono tutte di un dito — la carta scende a 88,
   la riserva anti-forbice da 80 a 66, il pavimento della scheda dell'autore
   segue la card vera (147 a questa altezza) invece di stare a 164. Insieme al
   respiro della pagina (guest.css) fanno una quarantina di pixel: la CTA torna
   dentro con margine, e il cartellino VERA! ha ancora i suoi ventotto sopra. */
@media (max-height: 700px) {
  .cg-desk { --cg-h: clamp(88px, calc(100vh - 680px), 200px); }
  @supports (height: 1cqh) {
    .cg-desk .cg-scena,
    .cg-desk .cg-whodis { --cg-h: clamp(88px, calc(100cqh - 76px), 200px); }
  }
  .cg-desk .cg-scena-wrap { min-height: 174px; }
  .cg-desk .cg-scena { padding: 26px 0 42px; min-height: calc(var(--cg-h) * 1.1 + 68px); }
  .cg-desk .cg-scheda { min-height: 156px; }
  /* e la domanda cede un punto: a tre righe è lei la voce più grossa del conto */
  .cg-desk .cg-domanda { font-size: clamp(17px, 2.6vh, 23px); padding: clamp(8px, 1.7vh, 15px) 20px; }
}
.cg-desk .cg-bottom .btn-cta { font-size: clamp(19px, 2.5vh, 22px); padding: clamp(13px, 2.2vh, 20px) 16px; }
/* l'elenco di chi c'è cascato: sul desktop si clicca ancora, quindi resta */
.cg-desk .cg-velo-card { width: 380px; padding: 24px 30px 19px; border-radius: 23px; }
.cg-desk .cg-velo-titolo { font-size: 21px; }
.cg-desk .cg-velo-lista { gap: 12px; margin-top: 17px; }
.cg-desk .cg-velo-nick { font-size: 23px; }
.cg-desk .cg-velo-piede { font-size: 18px; margin-top: 16px; padding-top: 12px; }

/* ---- la fascia di mezzo (721–1023) --------------------------------------
   Terra di nessuno: sopra i 721 guest.css toglie lo scorrimento alla
   schermata, ma il vestito desk il client lo mette solo dai 1024. In mezzo
   restavano le misure del telefono in una finestra che NON scorre, e su una
   finestra bassa succedeva il guaio grosso: `.cg-scena-wrap` è
   `flex: 1; min-height: 0`, si faceva schiacciare, il palco le traboccava
   fuori (il wrap non taglia, è nato per non tagliare il WHO DIS) e la carta
   finiva dipinta SOPRA la scheda dell'autore. Misurato a 1000×560: 18px di
   sovrapposizione, e la parola addosso alla domanda per 54.
   Qui non si porta il vestito grande — a 800px di larghezza sarebbe fuori
   scala — si mettono solo i due pavimenti che mancavano. */
@media (min-width: 721px) and (max-width: 1023px) {
  /* la carta cede con la finestra, come sul desk: il rapporto 1.647 sta
     nella formula, quindi le due misure non possono divergere */
  .cg { --cg-h: clamp(119px, 20.6vh, 170px); }
  .cg-palco, .cg-outer { width: calc(var(--cg-h) * 1.647); height: var(--cg-h); }
  /* la stessa riserva asimmetrica del desk, in taglia telefono: 26 sopra
     (16 del cartellino + 5 del respiro + margine), 40 sotto (26 di `giu` +
     5 di scossa + 5 d'ombra + margine). Qui oggi non si vedeva perché il
     pavimento del wrap è basso e il flex ha ancora gioco — ma sotto i 520px
     di finestra il gioco finisce e il pallino della lettera si taglia. */
  /* il `× 1.1` è lo sghembo della carta, come sul desk: 1,647·sin(2,6°) */
  .cg-scena-wrap { min-height: calc(var(--cg-h) * 1.1 + 74px); }
  .cg-scena { padding: 26px 0 40px; min-height: calc(var(--cg-h) * 1.1 + 66px); }
  /* la parola scala con l'altezza, come sul desk, e sale di meno: in una
     finestra bassa sopra la carta non ci sono 96px, ce ne sono venti */
  .cg-whodis { --cg-whodis-su: clamp(30px, 9.4vh, 96px); }
  .cg-whodis-testo { font-size: clamp(34px, 7.4vh, 54px); }
  /* e il resto del foglio cede con la finestra invece di spingere la CTA
     sotto la piega */
  .cg-domanda { font-size: clamp(16px, 2.4vh, 19px); padding: clamp(9px, 1.6vh, 13px) 15px; }
  /* sopra i 144,5px della card vera, o non tiene il posto di niente e la CTA
     salta a ogni carta come faceva sul desk */
  .cg-scheda { min-height: clamp(146px, 21.3vh, 150px); }
  .cg-riga { margin-top: clamp(4px, 1.4vh, 12px); }
}