/* =========================================================================
   LETTORE — impaginazione della scena e delle tre modalità di lettura.

   REGOLA UNICA DEL PROGETTO
   Nessun elemento decide da solo quanto è grande una tavola. Il modulo
   misura.js scrive quattro variabili su .app e tutto il resto le legge:

     --pag-w / --pag-h      misura di UNA tavola (rapporto 1:√2 garantito)
     --blocco-w / --blocco-h misura del blocco visibile (1 o 2 tavole)

   Da qui l'assenza di deformazioni: la scatola ha già il rapporto giusto,
   e l'immagine ci sta dentro senza dover essere stirata.

   La cornice (barre, comandi, indice) resta volutamente silenziosa: le
   uniche cose colorate in scena devono essere le tavole e lo sfondo animato.
   ========================================================================= */

.sfondo-webgl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.app {
  height: 100dvh;
  position: relative;
  display: grid;
  grid-template-rows: var(--alta) 1fr var(--bassa);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: transparent;   /* lo sfondo vero è il canvas WebGL sotto */
  z-index: 1;
}

/* ───────────────────────── cornice ───────────────────────── */

.cornice {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  padding-inline: clamp(12px, 3vw, 28px);
  position: relative;
  z-index: 4;
  /* velo semitrasparente in vetro liquido: lascia respirare lo sfondo WebGL */
  background: rgba(10, 10, 12, 0.25);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.cornice--alta  { justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cornice--bassa { justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.testata { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.testata__marchio {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em;
  color: var(--carta); white-space: nowrap;
}
.testata__meta {
  font-size: 10px; letter-spacing: 0.16em; color: var(--testo-lieve);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cornice__comandi { display: flex; align-items: center; gap: 10px; }

/* ─── Glass Buttons (stile liquid frosted glass con riflessi speculari) ─── */

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--carta);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.015) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.4),
    0 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pill svg { font-size: 14px; opacity: 0.9; }

.selettore {
  display: flex; gap: 4px;
  padding: 3px;
  background: rgba(8, 8, 12, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.selettore__voce {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--testo-lieve);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.selettore__voce svg { font-size: 14px; }

.selettore__voce:hover {
  color: var(--carta);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.selettore__voce.is-attiva {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 42, 61, 0.85) 0%, rgba(175, 20, 36, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 6px 20px rgba(185, 30, 45, 0.5),
    0 0 14px rgba(255, 42, 61, 0.3),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
  transform: none;
}

.pill:hover {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 12px 30px -4px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(255, 42, 61, 0.2),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
}
.pill:active, .selettore__voce:active { transform: translateY(0.5px) scale(0.96); }

.scena {
  position: relative;
  min-height: 0;
  overflow: hidden;
  /* con .scena__palco scalato durante lo zoom, "overflow: hidden" da solo
     non basta: il figlio trasformato può finire promosso a un proprio layer
     GPU e il ritaglio dell'antenato non viene rispettato in composizione —
     la pagina ingrandita si vede allora sotto l'header/footer in vetro.
     "contain: paint" impone il ritaglio ai bordi di questo box in ogni caso. */
  contain: paint;
  touch-action: none;
}

.scena__palco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

.scena.is-zoomata {
  touch-action: none;
  cursor: grab;
}
.scena.is-zoomata:active {
  cursor: grabbing;
}
.scena.is-zoomata .stf__wrapper {
  pointer-events: none;
}

/* ───────────────────────── titolo fluttuante (Apple Glass Bubble HUD) ───────────────────────── */

.titolo-fluttuante {
  position: absolute;
  /* ancorato a .app, non a .scena: vedi la nota sull'HTML sul perché */
  top: calc(var(--alta) + clamp(6px, 1.2vh, 12px));
  left: 50%;
  transform: translate(-50%, -8px) scale(0.95);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16, 16, 22, 0.45) 0%, rgba(8, 8, 12, 0.35) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(255, 42, 61, 0.14),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
  max-width: min(96vw, 680px);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

.titolo-fluttuante.is-visibile {
  opacity: 1;
  filter: blur(0px);
  transform: translate(-50%, 0) scale(1);
}

/* a pagina singola (Foglio, o Verticale quando eredita l'impianto singolo)
   il titolo galleggia sotto la testata come nell'impianto doppio, solo un
   filo più vicino alla barra — qui la tavola sotto è più stretta e il
   badge può stare più in alto senza mai toccare i pulsanti sopra di sé:
   la testata resta un elemento separato con la sua altezza (--alta), il
   titolo comincia sempre dopo, mai dentro. */
/* a metà strada nello spazio vuoto fra la barra e il bordo della tavola,
   non appena sotto la barra: la tavola è centrata in verticale dentro la
   scena (place-items:center, sia in Foglio che in Verticale), quindi lo
   spazio vuoto sopra di lei vale (scena - blocco)/2 — il titolo va alla
   metà di QUELLO spazio, cioè un altro /2, calcolato da --alta in giù. */
.app[data-colonne="1"] .titolo-fluttuante {
  /* "top" ancora il bordo superiore del badge, ma il punto che vogliamo
     centrare è il SUO centro — per questo qui la trasformazione centra
     anche in verticale (-50%, non solo -50% orizzontale come nell'impianto
     doppio), invece di lasciare che "top" faccia da bordo. */
  top: calc(
    var(--alta) +
    (100dvh - var(--alta) - var(--bassa) - var(--blocco-h, 0px)) / 4
  );
  transform: translate(-50%, calc(-50% - 8px)) scale(0.95);
  padding: 6px 16px;
  gap: 9px;
}
.app[data-colonne="1"] .titolo-fluttuante.is-visibile {
  transform: translate(-50%, -50%) scale(1);
}
.app[data-colonne="1"] .titolo-fluttuante__num,
.app[data-colonne="1"] .titolo-fluttuante__divisore,
.app[data-colonne="1"] .titolo-fluttuante__testo {
  font-size: 10px;
}

/* durante lo zoom il titolo deve dissolversi, non restare fermo sopra
   l'immagine ingrandita. Aggancio su .app (non .scena): il titolo vive fuori
   da .scena, vedi la nota sull'HTML — lente.js aggiunge "is-zoomata" a
   entrambi. Quattro classi di specificità, e viene per ultimo nel file:
   vince sia sulla regola base sia su quella a pagina singola, in ogni caso. */
.app.is-zoomata .titolo-fluttuante.is-visibile {
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, -8px) scale(0.95);
}

.titolo-fluttuante__num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--rosso, #ff2a3d);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.titolo-fluttuante__divisore {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  flex: none;
  line-height: 1;
}

.titolo-fluttuante__testo {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carta, #ffffff);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* campione del respiro: nessun pixel visibile, solo una misura leggibile da JS */
.metro {
  position: absolute; top: 0; left: 0;
  width: var(--respiro-x); height: var(--respiro-y);
  visibility: hidden; pointer-events: none;
}

.vista {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--morbida), visibility 0s linear 420ms;
}
.app[data-modalita="sfoglia"] .vista--sfoglia,
.app[data-modalita="scorri"]  .vista--scorri {
  opacity: 1; visibility: visible;
  transition: opacity 420ms var(--morbida);
}

/* ─────────── vista A · sfoglio fisico ─────────── */

/* niente position qui: eredita "absolute; inset:0" da .vista, altrimenti
   il box collassa al contenuto e vetrina/libro perdono il centraggio. */
.vista--sfoglia { display: grid; place-items: center; }

/* vetrina: copia sempre centrata di copertina/quarta — vedi lettore.js.
   Il motore ancora la pagina singola al bordo destro del blocco doppio
   (è così che StPageFlip tratta una "cover"); questa vetrina nasconde
   quell'asimmetria mostrando la stessa immagine sempre centrata, e si
   dissolve durante il cambio pagina invece di saltare di scatto. */
.vetrina { display: none !important; }

.libro {
  position: relative;
  touch-action: none;
  width: var(--blocco-w, 0px);
  height: var(--blocco-h, 0px);
  filter: drop-shadow(0 26px 54px rgba(0, 0, 0, 0.6));
  transform: translateX(0);
  transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.app[data-colonne="2"] .libro.is-copertina-prima {
  transform: translateX(-25%);
}

.app[data-colonne="2"] .libro.is-copertina-quarta {
  transform: translateX(25%);
}

.libro .stf__wrapper,
.libro .stf__block { width: 100%; height: 100%; }

/* una tavola dentro al motore di sfoglio */
.tavola {
  background: var(--scena-fondo);
  overflow: hidden;
  backface-visibility: hidden;
}
.tavola__img {
  width: 100%; height: 100%;
  object-fit: cover;          /* la scatola ha già il rapporto A4: nessun taglio reale */
  object-position: center;
  opacity: 0;
  transition: opacity 480ms var(--morbida);
}
.tavola__img.is-pronta { opacity: 1; }

/* piega centrale: solo in doppia pagina. Sta su ::before perché ::after
   è già occupato dall'indicatore di caricamento qui sotto. */
.app[data-colonne="2"] .tavola--sinistra::before,
.app[data-colonne="2"] .tavola--destra::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.app[data-colonne="2"] .tavola--sinistra::before {
  background: linear-gradient(to left, rgba(0,0,0,0.16), transparent 7%);
}
.app[data-colonne="2"] .tavola--destra::before {
  background: linear-gradient(to right, rgba(0,0,0,0.16), transparent 7%);
}

/* indicatore di caricamento: una linea sottile che pulsa sul bordo inferiore
   finché il file non è arrivato. Sta sul contenitore (::after), non sull'img,
   perché un elemento sostituito non può avere pseudo-elementi propri. */
.tavola:not(.is-caricata)::after,
.foglio:not(.is-caricata)::after {
  content: '';
  position: absolute; left: 14%; right: 14%; bottom: 0;
  height: 2px;
  background: var(--rosso);
  transform-origin: center;
  animation: caricamento 1.15s ease-in-out infinite;
  z-index: 2;
}
@keyframes caricamento {
  0%   { transform: scaleX(0.08); opacity: 0.35; }
  50%  { transform: scaleX(1);    opacity: 0.9;  }
  100% { transform: scaleX(0.08); opacity: 0.35; }
}

/* ─────────── vista B · scorrimento continuo ─────────── */

.vista--scorri {
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vista--scorri::-webkit-scrollbar { width: 0; }

/* altezza ESATTA della vista: se l'apertura fosse più alta dello schermo,
   lo scroll-snap non troverebbe mai un punto di riposo e bloccherebbe lo scorrimento. */
.apertura {
  height: 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  padding: var(--respiro-y) var(--respiro-x);
}
.apertura__coppia { display: flex; }

.foglio {
  position: relative;
  width: var(--pag-w, 0px);
  height: var(--pag-h, 0px);
  background: var(--scena-fondo);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(22px) scale(0.986);
  transition: opacity 760ms var(--morbida), transform 900ms var(--editoriale);
  will-change: opacity, transform;
}
.apertura.is-dentro .foglio { opacity: 1; transform: none; }
.apertura.is-dentro .foglio:nth-child(2) { transition-delay: 70ms; }

.foglio__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* piega centrale, come sopra: su ::before per lasciare ::after al caricamento */
.apertura__coppia .foglio:first-child:not(:only-child)::before,
.apertura__coppia .foglio:last-child:not(:only-child)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.apertura__coppia .foglio:first-child:not(:only-child)::before {
  background: linear-gradient(to left, rgba(0,0,0,0.18), transparent 6%);
}
.apertura__coppia .foglio:last-child:not(:only-child)::before {
  background: linear-gradient(to right, rgba(0,0,0,0.18), transparent 6%);
}

/* ───────────────────────── comandi in basso ───────────────────────── */

.avanzamento {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--linea);
}
.avanzamento__barra {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--rosso);
  transition: transform 420ms var(--morbida);
  will-change: transform;
}

.tondo {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.015) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.4),
    0 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
  color: var(--carta);
  font-size: 17px;
  cursor: pointer;
  user-select: none;
  transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tondo:hover {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px) scale(1.06);
  box-shadow:
    0 12px 30px -4px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(255, 42, 61, 0.2),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
}
.tondo:active { transform: translateY(0.5px) scale(0.94); }
.tondo[disabled] { opacity: 0.22; pointer-events: none; }
.tondo--piccolo { width: 32px; height: 32px; font-size: 14px; }
.tondo.is-attivo {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 42, 61, 0.85) 0%, rgba(175, 20, 36, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 6px 20px rgba(185, 30, 45, 0.5),
    0 0 14px rgba(255, 42, 61, 0.3),
    inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
}

.contatore {
  display: flex; align-items: baseline; gap: 12px;
  min-width: clamp(150px, 30vw, 300px);
  justify-content: center;
}
.contatore__num {
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: var(--carta);
  font-variant-numeric: tabular-nums;
}
.contatore__cap {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--testo-lieve);
  white-space: nowrap;
}

.suggerimento {
  position: absolute; left: 50%; bottom: calc(var(--bassa) + 14px);
  transform: translateX(-50%);
  margin: 0; z-index: 3;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--testo-lieve);
  background: rgba(10, 10, 14, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 6px 14px; border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 600ms var(--morbida);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggerimento.is-nascosto { opacity: 0; }

/* ───────────────────────── indice ───────────────────────── */

.velo {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(4, 4, 6, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 320ms var(--morbida);
}
.velo.is-visibile { opacity: 1; }

.indice {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 9;
  width: min(360px, 86vw);
  display: flex; flex-direction: column;
  background: rgba(12, 12, 16, 0.62);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), inset 1px 0 1px rgba(255, 255, 255, 0.18);
  transform: translateX(-100%);
  transition: transform 420ms var(--editoriale);
}
.indice.is-aperto { transform: none; }

.indice__testa {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--alta); flex: none;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--carta);
}
.indice__lista {
  overflow-y: auto;
  padding: 10px 0 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.voce {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px 20px;
  text-align: left;
  color: var(--testo-lieve);
  transition: color 200ms var(--morbida), background-color 200ms var(--morbida);
}
.voce:hover { color: var(--carta); background: rgba(239,238,231,0.05); }

/* miniatura: sempre visibile (funziona anche col dito), cresce al passaggio
   del mouse — l'anteprima al hover richiesta, senza dipendere solo da esso */
.voce__miniatura {
  flex: none;
  width: 34px; aspect-ratio: 1 / 1.4142;
  overflow: hidden;
  border-radius: 2px;
}
.voce__miniatura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--morbida);
}
.voce:hover .voce__miniatura img { transform: scale(1.18); }

.voce__testo { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.voce__n { font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.6; width: 22px; flex: none; }
.voce__nome { font-size: 12px; letter-spacing: 0.06em; }
.voce--principale .voce__nome { color: var(--carta); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
.voce.is-corrente { color: var(--rosso); }
.voce.is-corrente .voce__nome { color: var(--rosso); }

/* ───────────────────────── sipario di apertura ───────────────────────── */

/* il sipario lascia intravedere lo shader animato e un'eco sfocata della
   copertina fin dal primo istante, invece di un nero piatto */
.sipario {
  position: fixed; inset: 0; z-index: 20;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--scena-fondo);
  transition: opacity 650ms var(--editoriale), visibility 0s linear 650ms;
}
.sipario::before {
  content: '';
  position: absolute; inset: -60px;
  background: url('../pages/w700/p01.webp') center/cover no-repeat;
  filter: blur(50px) brightness(0.4) saturate(1.2);
  transform: scale(1.08);
  opacity: 0.6;
  animation: sipario-deriva 10s ease-in-out infinite alternate;
}
.sipario::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(9, 9, 11, 0.62);
}
@keyframes sipario-deriva {
  from { transform: scale(1.08) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, 1%); }
}
.sipario.is-alzato { opacity: 0; visibility: hidden; }
.sipario__testo {
  position: relative; z-index: 1;
  font-size: 11px; letter-spacing: 0.42em; color: var(--testo-lieve);
  animation: respiro 1.6s ease-in-out infinite;
}
@keyframes respiro { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }

/* ───────────────────────── schermi stretti ───────────────────────── */

@media (max-width: 720px) {
  :root {
    --respiro-x: clamp(6px, 1.8vw, 12px);
    --alta: 48px;
    --bassa: 66px;
  }

  .cornice {
    padding-inline: clamp(10px, 2.5vw, 16px);
    gap: 8px;
  }

  .testata__meta { display: none; }
  .testata__marchio { font-size: 11px; letter-spacing: 0.16em; }

  .cornice__comandi { gap: 6px; }

  .pill span, .selettore__voce span { display: none; }
  .pill { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .pill svg { font-size: 16px; }

  .selettore { padding: 2px; gap: 2px; }
  .selettore__voce { width: 30px; height: 30px; padding: 0; justify-content: center; }
  .selettore__voce svg { font-size: 15px; }

  .tondo--piccolo { width: 34px; height: 34px; font-size: 15px; }

  /* 44px: la misura sotto la quale un pollice comincia a sbagliare mira */
  .tondo { width: 44px; height: 44px; font-size: 18px; }
  .cornice--bassa { gap: 16px; }
  .contatore { min-width: 70px; }
  .contatore__num { font-size: 14px; }
  .contatore__cap { display: none; }

  .suggerimento { bottom: calc(var(--bassa) + 10px); font-size: 9px; }

  .titolo-fluttuante {
    /* esattamente a metà dello spazio vuoto tra la barra superiore e la rivista */
    top: max(14px, calc((100% - var(--blocco-h, 0px)) / 4));
    padding: 6px 14px;
    gap: 7px;
    max-width: calc(100vw - 24px);
  }
  .titolo-fluttuante__num { font-size: 10px; }
  .titolo-fluttuante__testo { font-size: 10px; letter-spacing: 0.10em; }
}

/* niente zoom accidentale sul doppio tocco dei comandi */
@media (pointer: coarse) {
  .pill, .selettore__voce, .tondo, .voce { touch-action: manipulation; }
}