/* ============================================================
   LA PAGINA — la veste (docs/interfaccia.md §§2,4,5,6,9)
   Colori decisi in §5.2 e verificati sul contrasto; i caratteri sono
   quelli definitivi dal 2026-08-15 (§4), serviti dal nostro server:
   la pagina non chiede niente a nessuno mentre giochi.
   ============================================================ */

/* ---------- i caratteri (§4) ----------
   SPECTRAL per tutto ciò che si legge. È un carattere disegnato per lo schermo: il
   contrasto fra aste e filetti è basso, e su fondo scuro i filetti sottili di un
   Bodoni o di un Garamond si assottigliano fino a tremare. Ha l'aria del libro senza
   fare il verso all'Ottocento — il travestimento d'epoca è compito delle illustrazioni.
   CUTIVE MONO per il taccuino, e non è un vezzo: è una macchina da scrivere, e nel 1889
   le macchine da scrivere esistevano da quindici anni. Le note di Holmes hanno una loro
   voce anche nella forma delle lettere.
   Entrambi con licenza aperta (SIL OFL 1.1, testo integrale in web/font/), copiati nel
   repository: nessuna chiamata a domini altrui mentre si gioca, e la pagina si apre
   uguale anche senza rete.
   `font-display: swap`: prima si legge col carattere di sistema, poi la pagina si veste.
   Mai una schermata bianca in attesa di un file. */

@font-face {
  font-family: 'Spectral';
  src: url('/font/spectral-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('/font/spectral-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Il neretto NON è dichiarato, e non è una dimenticanza: questa pagina non va mai in
   grassetto. L'enfasi la fanno l'ambra e lo spazio (§5.1), e i titoli e gli <strong> che il
   browser vorrebbe in neretto sono riportati a 400 uno per uno, più sotto. La faccia da 600
   stava qui e nessuna riga la chiedeva: un carattere dichiarato e mai scelto non si scarica
   nemmeno, ma dice il falso a chi legge il CSS per sapere come è vestita la pagina.
   Il file `spectral-600.woff2` resta in web/font/ con la sua licenza: chi un giorno vorrà il
   neretto rimette sei righe, invece di lasciare che il browser se lo inventi ingrassando il
   400 (2026-08-29). */

@font-face {
  font-family: 'Cutive Mono';
  src: url('/font/cutive-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* La riserva non è decorativa: è ciò che si legge nei primi 200ms e ciò che resta se un
     file non arriva. Si sceglie il più simile a Spectral fra i caratteri di sistema. */
  --prosa: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --macchina: 'Cutive Mono', 'Courier New', Courier, monospace;

  --carta: #1A1613;        /* fondo: carta invecchiata scura */
  --inchiostro: #E8E0D0;   /* testo: avorio, mai bianco acceso — 13.8:1 */
  --ambra: #D9A05B;        /* novità, guarda qui — 7.8:1 (MAI "toccabile") */
  --attenuato: #9A9086;    /* didascalie ed etichette — 5.8:1, sopra la soglia */
  --bordo: rgba(232, 224, 208, 0.12);
  --foglio: #1F1A16;       /* il fondo dei pannelli: un gradino sopra la carta */

  /* Il rettangolo che aspetta un'immagine: il fondo e la trama a 45°. Stavano scritti a mano
     in quattro punti — la classe `.tratteggio`, la tavola, il ritratto, la miniatura — e
     quattro copie della stessa riga si ritoccano una alla volta, poi smettono di essere la
     stessa cosa senza che nessuno se ne accorga. */
  --segnaposto-fondo: #221D19;
  --segnaposto-trama: repeating-linear-gradient(45deg,
      rgba(232, 224, 208, 0.045) 0 6px, rgba(232, 224, 208, 0) 6px 12px);

  /* Misurati sul carattere vero, non a occhio (2026-08-15). Con Spectral a 18px la riga
     portava 80 caratteri — sopra il tetto che questo stesso documento si era dato — e la
     x di Spectral è più bassa di quella dei caratteri di sistema (0,45 contro 0,48 del
     corpo), quindi 18 si leggevano come 17. Corpo a 19px e colonna a 40rem: la riga torna
     a ~68 caratteri, che è il centro della lettura comoda, non il suo limite. */
  /* La montatura di carta (§2c): l'avorio e quanto foglio resta attorno alla stampa.
     Sono le due sole manopole — la grana e il bordo sono asset. */
  --montatura: #E4DCC6;
  /* Bordo sottile (18/08): 1,5% di carta attorno alla stampa più l'1% di rientro dello
     strappo nella maschera — in tutto ~16px su una tavola da 640. Sotto gli 8px il bordo
     strappato tocca il taglio del foglio, viene tosato e torna a leggersi come un
     rettangolo: è il pavimento, e non è estetico ma fisico. */
  --margine-montatura: 1.5%;

  --colonna: 40rem;        /* ~68 caratteri per riga con Spectral a 19px */
  --barra-larga: 60rem;    /* la casella è interfaccia, non prosa: più larga della colonna */
  /* Il corpo segue la larghezza: 19px dove la riga porta 68 caratteri, ~17 sul telefono,
     dove a 19 ne restavano 36 — una riga così corta si legge a scatti, e il contesto d'uso
     dichiarato è proprio quello (sera, a letto, telefono). */
  --corpo: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
}

body {
  /* dvh e non vh: la barra del browser mobile mangerebbe la riga di input */
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* testata · pagina · barra */
  font-family: var(--prosa);
  font-size: var(--corpo);
  line-height: 1.7;                 /* Spectral ha discendenti lunghe: 1,65 le faceva toccare */
  -webkit-text-size-adjust: 100%;
}

/* Il messaggio di chi arriva senza JavaScript (index.html). Copre tutto: la testata e la
   barra stanno nell'HTML e restano in piedi anche senza copione, ed è proprio quel mezzo
   guscio con le icone mute che non si deve leggere come «gioco rotto». */
.senza-copione {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  padding: 2rem clamp(1.5rem, 8vw, 4rem);
  background: var(--carta);
  color: var(--inchiostro);
  text-align: center;
}
.senza-copione p { max-width: var(--colonna); margin: 0; }

/* ---------- la pagina che scorre ---------- */

.pagina {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 5vw, 2rem) 1rem;
  padding-top: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-top));
}

.pagina > * { max-width: var(--colonna); margin-inline: auto; }

/* ---------- la tavola (rettangolo grigio finché non ci sono le illustrazioni) ---------- */

/* Il tratteggio dei segnaposto: dice "qui va un'immagine" senza far finta di esserlo.
   Sparisce quando arriveranno le tavole vere. La trama vive in `:root`: qui c'era la prima
   di quattro copie a mano. */
.tratteggio {
  background-color: var(--segnaposto-fondo);
  background-image: var(--segnaposto-trama);
}

.tavola {
  position: relative;                  /* il velo dell'arrivo si posa qui sopra */
  margin: 0.4rem auto 2.1rem;
  width: 100%;
  /* Le proporzioni dichiarate servono a riservare lo spazio PRIMA che l'immagine arrivi:
     se sono sbagliate, la pagina salta quando arriva. Erano 3:2, che è il foglio di ieri;
     le tavole vere stanno a 1,6, e il salto si vedeva come una cornice che «si sistema da
     sola» (segnalato dal telefono, 22/08). */
  aspect-ratio: 8 / 5;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: var(--segnaposto-fondo);
  background-image: var(--segnaposto-trama);
  border: 1px solid var(--bordo);
  color: var(--attenuato);
  transition: filter 400ms ease, opacity 400ms ease;
}

/* La tavola tiene le proporzioni vere delle illustrazioni (8:5): entra nel racconto quando
   si arriva in un luogo, quindi non ruba spazio permanente e non va ritagliata. Il «3:2» che
   stava scritto qui era il foglio di ieri, ed è la riga da cui la miniatura si era presa il
   ritaglio sbagliato: un numero vecchio in un commento si ricopia più in fretta di uno in
   una regola. */

/* Le immagini entrano in dissolvenza: il volto "si muove" da quieto a teso (§5.6 della
   direzione artistica), e una tavola che appare di colpo stona con la nebbia. */
.tavola img, .ritratto img, .miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- l'arrivo di una tavola: l'inchiostro che asciuga (§4, tappa 5) ----------
   Un luogo nuovo non "compare": si forma. L'immagine entra fuori fuoco e un filo più
   grande, e in un secondo si fa nitida — come un'incisione che prende, o come gli occhi
   che si abituano a una stanza in cui si è appena entrati. È l'unico movimento vistoso di
   tutto il gioco, e sta esattamente dove serve: nel momento in cui si cambia posto.
   Un ritratto invece è solo una dissolvenza: chi parla non è un luogo dove si arriva. */
.entra { opacity: 0; transition: opacity 420ms ease; }
.entra.visibile { opacity: 1; }

.tavola.appena .entra {
  filter: blur(8px) brightness(0.72);
  transform: scale(1.03);
  transition: opacity 700ms ease, filter 900ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 1100ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tavola.appena .entra.visibile { filter: none; transform: none; }

/* Il velo che si ritira: l'immagine sale da sotto il colore del fondo, invece di
   accendersi sopra. Dura meno dell'immagine e non intercetta mai il dito.
   DAL 22/08 IL VELO È NEBBIA, e si ritira SCORRENDO invece di spegnersi sul posto: due
   banchi di fondo carta, uno più denso, che attraversano la tavola mentre il disegno
   prende. È la «nebbia fra un luogo e l'altro» della veste (§6) — ma dentro i 900ms che
   c'erano già, non un secondo in più: una nebbia che si guarda passare è bella la prima
   volta e diventa un ritardo alla ventesima. */
.tavola.appena.illustrato::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0%, var(--carta) 22%, var(--carta) 58%, transparent 84%),
    linear-gradient(80deg, transparent 0%, var(--carta) 30%, transparent 70%);
  background-size: 190% 100%, 150% 100%;
  background-repeat: no-repeat;
  animation: nebbia-che-passa 900ms cubic-bezier(0.3, 0.6, 0.2, 1) 1 forwards;
}

@keyframes nebbia-che-passa {
  from { opacity: 0.92; background-position: -30% 0, 120% 0; }
  60%  { opacity: 0.55; }
  to   { opacity: 0; background-position: 130% 0, -40% 0; }
}

/* ---------- LA MONTATURA DI CARTA (docs/interfaccia.md §2c) ----------
   Le tavole sono stampe: fin qui ognuna portava la propria carta dipinta dentro il file —
   trentatré tavole, trentatré carte diverse. La carta è VESTE, e la veste è del client:
   una sola sotto tutte, come un portfolio di stampe invece di un mucchio di ritagli.
   Si accende da sé sulle tavole ritagliate al disegno (`daMontare`), quindi le vecchie
   restano com'erano finché non vengono rifatte. */

.tavola.montata,
.miniatura.montata {
  background-color: var(--montatura);
  background-image: url('/veste/carta.webp');
  background-size: cover;
  background-blend-mode: overlay;      /* la grana è grigia: il colore lo mette il CSS */
  padding: var(--margine-montatura);
}

/* La miniatura porta la stessa carta ma NON la stessa misura: un'imbottitura in
   percentuale si misura sul CONTENITORE, non su di sé, e nella testata il contenitore è
   largo quanto lo schermo — la miniatura diventava un riquadro di cento pixel quasi tutto
   vuoto, col luogo ridotto a un francobollo (visto giocando, 2026-08-18). Qui la carta si
   misura in pixel, come si conviene a una cosa grande come un'unghia. */
.miniatura.montata { padding: 3px; }

/* Il riquadro dell'immagine DEVE combaciare col disegno: con `object-fit` la stampa sta
   dentro il riquadro con le bande vuote ai lati, e la maschera strapperebbe il vuoto
   lasciando il disegno squadrato. Qui è l'immagine a dettare la sua misura, e la griglia
   che c'è già la centra. */
.tavola.montata img,
.miniatura.montata img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: initial;
  -webkit-mask-image: url('/veste/montatura.webp');
  mask-image: url('/veste/montatura.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* l'ombra segue il bordo strappato, perché `drop-shadow` lavora sull'alfa: è ciò che
     fa leggere la stampa come appoggiata sulla carta invece che incollata */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}

/* Sul telefono la carta si assottiglia: un margine da salotto su uno schermo stretto
   mangia il disegno, che è la cosa che si è pagata. */
/* Sul telefono la carta resta un filo più generosa in percentuale, perché il foglio è
   piccolo: il 2% di 350px sono 7 pixel, già al pavimento. */
@media (max-width: 40rem) {
  .tavola.montata { padding: 2%; }
}

/* dove c'è l'illustrazione, il tratteggio del segnaposto sparisce */
.illustrato { background-image: none; }
.tavola.illustrato .segnaposto { display: none; }

/* un'illustrazione si può guardare da vicino */
.ritratto.illustrato, .tavola.illustrato, .miniatura.illustrato { cursor: zoom-in; }
.miniatura:not(.illustrato) { cursor: default; }
.ingrandita { display: block; width: 100%; height: auto; }

.segnaposto {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------- la testata: ora e luogo SEMPRE in vista, e i tre pannelli ---------- */

.testata {
  display: flex;
  /* La testata è una casella della griglia della pagina: senza questo la casella si
     allarga fino a contenere tutto e la fila sborda dallo schermo invece di stringersi
     (a cedere dev'essere la riga viva, coi puntini). */
  min-width: 0;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem clamp(0.75rem, 5vw, 2rem);
  padding-top: max(0.55rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--bordo);
  background: #16120F;
}

.riga-viva {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--attenuato);
  line-height: 1.7;
}

/* Su schermo stretto ogni informazione ha la sua riga (andare a capo a metà di
   «221B BAKER / STREET» è sciatto) e i bottoni salgono su una riga propria, o alla
   riga viva resterebbero centosessanta pixel. Su schermo largo torna tutto in fila. */
/* Ogni informazione sta su UNA riga: se non ci sta, si accorcia con i puntini. Andare a
   capo raddoppiava l'altezza della testata per un nome di luogo lungo. */
.riga-viva .gruppo {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.riga-viva .separatore { display: none; }

/* Il portafoglio dei turni quando ne restano pochi (29/08 sera). NON in ambra: l'ambra
   significa «novità, guarda qui» e nient'altro (CLAUDE.md), e i turni che finiscono non
   sono una novità da guardare — sono una cosa da sapere. Si toglie l'attenuazione e si
   dà peso: basta a farlo notare senza rubare il colore a chi lo possiede. */
.riga-viva .gruppo.pochi {
  color: var(--inchiostro);
  font-weight: 600;
}

/* La difficoltà: un quadrante in tre gradi, col nome del livello sopra. Non è un pannello
   e non ha il contorno a pillola degli altri: forma diversa perché ruolo diverso — non
   apre una stanza del gioco, dice a che passo si sta giocando (e porta dove si cambia).
   Il tocco resta di 44px anche se il disegno è piccolo. */
.livello {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  min-height: 44px;
  padding: 0 0.4rem;
  margin-left: 0.35rem;
  background: transparent;
  border: 0;
  color: var(--attenuato);
  cursor: pointer;
  font: inherit;
  justify-content: center;
  transition: color 180ms ease;
}

.livello:hover, .livello:focus-visible { color: var(--ambra); }
.livello:active { transform: scale(0.96); }

.nome-livello {
  display: none;                     /* come i nomi dei pannelli: solo dove c'è spazio vero */
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

@media (min-width: 60rem) {
  .nome-livello { display: block; }
}

/* Il tocco è più largo del disegno: il quadrante è minuto, il dito no. */
.livello { position: relative; }
.livello::after { content: ''; position: absolute; inset: 0 -8px; }
/* Lo stesso per la miniatura: 54×34 di disegno da quando segue le proporzioni della tavola
   (8:5), e 44 di dito. Sei pixel per parte e non più cinque: con cinque si finiva esattamente
   sul pavimento dei 44, e un pavimento su cui si sta in equilibrio si perde al primo
   arrotondamento (2026-08-22, rimisurato il 29/08). */
.miniatura { position: relative; }
.miniatura::after { content: ''; position: absolute; inset: -6px 0; }

/* I gradi accesi si riempiono di INCHIOSTRO, non d'ambra: l'ambra vuol dire solo
   «novità, guarda qui» (§5.1), e un quadrante è sempre acceso. */
.gradi { display: block; width: 34px; height: 16px; }

/* Su telefono il quadrante rimpicciolisce quanto basta a restare sulla PRIMA riga
   della testata: una riga in più solo per lui costava 44 pixel di racconto. */
@media (max-width: 60rem) {
  .livello { padding: 0 0.15rem; margin-left: 0.1rem; }
  .gradi { width: 26px; height: 12px; }
}
.gradi g rect { fill: currentColor; opacity: 0.16; transition: opacity 200ms ease; }
.gradi g rect.acceso { opacity: 1; }

@media (max-width: 52rem) {
  .testata { flex-wrap: wrap; row-gap: 0.2rem; }
  .riga-viva { flex-basis: 100%; order: 2; padding-top: 0.1rem; }
  .pannelli { order: 1; margin-left: auto; }
  .testata > .pannello, .testata > .livello { order: 1; }
}

/* La partita non è un pannello del racconto: sta con gli altri, ma staccata. */
.a-parte { margin-left: 0.6rem; }

@media (min-width: 52rem) {
  /* In fila i gruppi non vanno più a capo: se lo spazio finisce, a cedere è la riga viva
     coi puntini — non i bottoni, che finivano spinti fuori dallo schermo. */
  .riga-viva { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .riga-viva .gruppo { display: inline; }
  .riga-viva .separatore { display: inline; opacity: 0.45; padding: 0 0.45em; }
}

/* pulsa UNA volta quando la scena cambia: ambra = novità (§5.1) */
@keyframes pulsazione {
  from { color: var(--ambra); }
  to   { color: var(--attenuato); }
}
.riga-viva.cambiata { animation: pulsazione 2.2s ease-out 1; }
.pannello.pulsa { animation: pulsazione 2.2s ease-out 1; }   /* voce nuova nel taccuino (§8.3) */

/* ---------- l'attesa: la nebbia, non una rotella (§6) ---------- */

.nebbia {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(217, 160, 91, 0.5), transparent);
  background-size: 220% 100%;
  transition: opacity 500ms ease;
}

.nebbia.attesa {
  opacity: 1;
  animation: deriva 3.4s ease-in-out infinite;
}

@keyframes deriva {
  0%   { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}

/* ---------- il racconto ---------- */

.racconto { padding-bottom: 1rem; }
/* L'altezza vera la calcola la pagina a ogni aggiunta (aggiornaSpaziatore): quanto basta
   all'ultimo blocco per salire in cima, mai tanto da farlo uscire. Questo è solo il valore
   di partenza, prima che ci sia qualcosa da misurare. */
.spaziatore { height: 40vh; }

/* La regione che parla ai lettori di schermo sta piu sotto, insieme all'etichetta della
   casella e alla riga del completamento: la ricetta del «invisibile agli occhi, leggibile a
   voce» è una sola per tutte e tre. Qui resta la ragione del posto: `position: absolute` la
   toglie dalla griglia del body, che ha tre righe contate — testata, pagina, barra — e una
   quarta la romperebbe. Mai `display: none` né `visibility: hidden`: la toglierebbero anche
   a chi ascolta, ed è l'unica cosa che ha da fare. */

/* Aria fra un blocco e l'altro: la pagina deve respirare, non riempirsi. */
.battuta { margin: 0 0 2.1rem; }

/* DOVE FINISCE LA BATTUTA E COMINCIA IL MONDO (22/08, segnalato giocando). Quando Holmes
   chiede due cose, risponde un personaggio e poi parte la coda del Narratore — l'esame, il
   congedo, chi entra — i due pezzi si leggevano come uno solo: stessa voce, stesso corpo,
   nessuno stacco. Il contratto li separa già (registro `dialogo` col suo parlante contro
   `narrazione`, e la coda arriva con `parte: 'coda'`): mancava solo il segno.
   Il segno è tipografico e muto — un filetto corto e un respiro — perché il colore in
   questa interfaccia vuol dire una cosa sola («guarda qui», §5.1) e non può prestarsi a
   dire anche «cambia voce». */
.battuta[data-parte="coda"] {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  position: relative;
}
.battuta[data-parte="coda"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  border-top: 1px solid var(--bordo);
}
/* La prosa del mondo, dopo una voce, si legge un filo più piccola e più chiara: è la
   stessa distinzione che c'è fra il parlato e la didascalia, ma senza il corsivo, che qui
   vuol dire già un'altra cosa. */
.battuta[data-parte="coda"] .testo { color: #D8D0C2; }
/* …ma NON alle didascalie che ci stanno dentro: un colore messo su `.testo` batte quello
   di `.didascalia`, che è meno specifico, e il gesto fra parentesi usciva col colore del
   parlato — «una didascalia di Ned è uscita con lo stesso carattere della battuta» (test
   mobile, 23/08). Le regole di colore sul contenitore vanno sempre rese esplicite per
   quello che contengono. */
.battuta[data-parte="coda"] .testo .didascalia { color: var(--attenuato); }

/* L'ULTIMA mossa si può riprendere: toccarla la rimette nella casella e annulla il turno. */
.battuta.giocatore.riprendibile { cursor: pointer; }
.battuta.giocatore.riprendibile .testo {
  border-bottom: 1px dotted rgba(217, 160, 91, 0.35);
  display: inline;
}
.battuta.giocatore.riprendibile:hover .testo { border-bottom-color: var(--ambra); }
/* LA MOSSA PRESA (01/10): fra il tocco e il sì del server — un attimo — e, nell'ultimo mezzo
   secondo di un turno che sta atterrando, finché il turno non finisce e il ritiro si fa. Si
   vede attenuata: un tocco che non cambia niente a schermo si legge come un guasto. Al sì
   sparisce, risposta compresa. */
.battuta.giocatore.in-ritiro {
  opacity: 0.45;
  transition: opacity 200ms ease;
}
/* LE DUE PAROLE CHE VIVEVANO QUI (09/09). Erano scritte in italiano dentro il foglio di
   stile, e da lì non le vedeva nessuno: lo specchio guarda web/testi.js, e chi legge
   app.js non arriva fin qui. Una pagina in inglese stampava «HOLMES · tocca per
   riprenderla» sotto ogni riga del giocatore, a ogni turno, da sempre. Adesso le parole
   le posa app.js dal dizionario in due variabili, e questo foglio si limita a stamparle;
   la riserva vuota copre l'istante prima che il dizionario sia stato scelto. */

.battuta.giocatore.riprendibile .parlante::after {
  content: var(--mossa-riprendila, '');
  color: var(--attenuato);
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0.04em;
}
/* ARMATA: il primo tocco non annulla niente, dice che cosa farà il secondo (20/09). La
   riga cambia parola e si accende — è una novità, «guarda qui», ed è l'unico momento in
   cui questa riga ha qualcosa da dire. Si disarma da sé dopo cinque secondi. */
.battuta.giocatore.riprendibile.armata .parlante::after {
  content: var(--mossa-conferma, '');
  color: var(--ambra);
  opacity: 1;
}
.battuta.giocatore.riprendibile.armata .testo { border-bottom-color: var(--ambra); }

/* Chi parla ha il suo ritratto a fianco (3 espressioni, direzione_artistica.md §3).
   Holmes no, mai: il giocatore È Holmes e non si vede in scena. */
.battuta.con-ritratto {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 0.9rem;
}


.battuta.con-ritratto .testo { grid-column: 2; }

/* Volto e nome viaggiano insieme e restano a schermo finché dura la battuta: un volto
   che resta mentre il nome scorre via diventa una faccia anonima. */
.chi-parla {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0.5rem;
  align-self: start;
}

/* MA NON COPRE MAI LE PAROLE. Il volto sta nella sua colonna, il testo nell'altra: non si
   sovrappongono per costruzione. Sul telefono però la colonna del volto è larga quanto un
   terzo dello schermo, e quel terzo è tolto alla riga di prosa proprio quando di spazio ce
   n'è meno (posta del motore, 22/08): lì il volto scorre con la battuta, piccolo e in
   alto, e la prosa prende tutta la larghezza. */
@media (max-width: 30rem) {
  .battuta.con-ritratto { display: block; }
  .battuta.con-ritratto .testo { grid-column: auto; }
  .chi-parla {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
  }
  /* QUI NON SI MISURA IL VOLTO (revisione del 28/08, R118). Due misure esplicite
     spegnevano l'`aspect-ratio: 4/5` del ritratto, e la larghezza la vinceva comunque il
     blocco dei 34rem qui sotto — che nel file viene dopo e vale anche quaggiù: restava
     l'altezza di questo, e il risultato era 2,4 × 2rem, un viso verticale schiacciato in un
     quadrato su ogni telefono in verticale. La misura sta in un posto solo, là sotto. */
  .chi-parla .parlante { margin: 0; }
}

.chi-parla .parlante {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  line-height: 1.35;
}

.ritratto {
  display: block;
  width: 3.5rem;
  aspect-ratio: 4 / 5;                 /* le tavole dei ritratti sono verticali */
  overflow: hidden;
  border: 1px solid var(--bordo);
  background-color: var(--segnaposto-fondo);
  background-image: var(--segnaposto-trama);
}

/* Su schermo largo il volto va guardato, non intuito: le tavole sono illustrazioni fitte
   e a 56 pixel diventavano una macchia (segnalato giocando, 2026-08-13).
   NB: queste regole stanno DOPO `.ritratto`, o la larghezza generica le annullerebbe. */
@media (min-width: 52rem) {
  .battuta.con-ritratto { grid-template-columns: 6rem 1fr; column-gap: 1.1rem; }
  .ritratto { width: 6rem; }
}

/* Sul telefono il volto passa SOPRA la battuta invece che accanto (misurato il 2026-08-15
   sulla battuta più lunga del lotto: di fianco restavano 267px di colonna, cioè trenta
   caratteri per riga — un discorso lungo diventava una filastrocca verticale).
   Fra i 30 e i 34rem resta appiccicato in alto mentre la battuta scorre, quindi il volto
   continua a viaggiare col suo nome: cambia il posto, non la regola. Sotto ha una velatura
   del fondo, o il testo gli passerebbe attraverso.
   SOTTO i 30rem no: lì il blocco qui sopra lo stacca APPOSTA (`position: static`, 22/08),
   perché appiccicato copriva la prima riga di prosa. Il `top` e la velatura di questo
   blocco arrivano fin laggiù e non fanno niente su un elemento statico: chi li trovasse
   inerti non rimetta lo `sticky`, riaprirebbe quel difetto. */
@media (max-width: 34rem) {
  .battuta.con-ritratto { display: block; }
  .battuta.con-ritratto .testo { grid-column: auto; }

  .chi-parla {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    top: 0;
    padding: 0.25rem 0 0.4rem;
    margin-bottom: 0.3rem;
    background: linear-gradient(var(--carta) 72%, transparent);
  }

  .chi-parla .ritratto { width: 2.4rem; flex: none; }
  .chi-parla .parlante { margin: 0; }
}

/* La miniatura del luogo nella testata: il promemoria di dove sei, quando la tavola
   grande è scorsa via col racconto. */
.miniatura {
  flex: none;
  width: 3.4rem;
  /* 8:5 come la tavola grande, e per la ragione più semplice: è LA STESSA immagine. A 3:2 —
     il foglio di ieri, rimasto qui quando la tavola passò a 1,6 il 22/08 — `object-fit: cover`
     tosava una fetta di disegno a destra e a sinistra, e la stampa montata ci ballava dentro
     con due bande vuote sopra e sotto. */
  aspect-ratio: 8 / 5;
  overflow: visible;               /* il ::after del dito deve sporgere (2026-08-22) */
  padding: 0;
  border: 1px solid var(--bordo);
  background-color: var(--segnaposto-fondo);
  background-image: var(--segnaposto-trama);
}

.parlante {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--attenuato);
  margin-bottom: 0.35rem;
}

.testo { white-space: pre-wrap; }        /* i capoversi arrivano dentro il testo dei blocchi */

/* La voce del Narratore si distingue senza diventare un personaggio: il rientro della
   prima riga è la convenzione del romanzo stampato — dice «sto raccontando» e non
   «sto parlando». I dialoghi non rientrano (hanno già la colonna del ritratto) e stanno
   un filo più stretti: la differenza si sente leggendo, non si nota guardando. */
.battuta:not(.con-ritratto):not(.giocatore) .testo {
  text-indent: 1.4em;
}

.battuta.con-ritratto .testo {
  font-size: 0.97em;
}

/* la didascalia si attenua con corsivo e un gradino di corpo, non con altro grigio (§5.2) */
.didascalia {
  color: var(--attenuato);
  font-style: italic;
  font-size: 0.94em;
}

/* L'evidenziazione non è MAI solo colore (§5.3) — ma il secondo canale NON è più la
   sottolineatura: sottolineato, un passaggio sembra un collegamento, e chi lo tocca non
   ottiene niente (segnalato giocando, 20/08). Una promessa che la pagina non mantiene è
   peggio di un canale in meno. Al suo posto il PESO: 600 è un carattere vero, che c'è già
   caricato, e in mezzo alla prosa si legge come enfasi — non come qualcosa da cliccare. */
.indizio {
  color: var(--ambra);
  /* IL SECONDO CANALE NON PUÒ DIPENDERE DA UN FILE (23/08). Era il peso 600 — una faccia
     vera, già dichiarata — ma sul telefono quel file si scarica solo QUANDO SERVE: fino a
     quel momento il browser ripiega su un carattere di sistema, e in mezzo alla prosa si
     vede cambiare famiglia («cambio di carattere a metà prosa», dal test mobile). Poi il
     file arriva e «si sistema da sé», che è il modo in cui questo difetto si nasconde.
     La velatura ambra non chiede niente a nessuno: si accende con la riga di testo, e per
     chi distingue male i colori resta uno stacco di LUMINANZA, che è il canale vero. */
  background-color: rgba(217, 160, 91, 0.13);
  padding: 0.05em 0.16em;
  margin: 0 -0.02em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* L'ambra che arriva a frase già letta (§5.3): si accende in due secondi invece di
   comparire di scatto. Uno scatto su un testo fermo sembra un errore di disegno; una luce
   che sale sembra un pensiero che si mette a fuoco — ed è esattamente quello che è. */
.indizio.dopo { animation: accensione 1.6s ease-out 1; }

@keyframes accensione {
  from { color: inherit; background-color: transparent; }
  to   { color: var(--ambra); background-color: rgba(217, 160, 91, 0.13); }
}

/* I suggerimenti stanno nel racconto, dove si legge: sono VOCE, non testo da scrivere
   (correzione del 2026-08-12, §7.3). In scena sono pensieri di Holmes — corsivo, senza
   firma; a scena chiusa è Watson che parla, e lo dice. */
/* Il suggerimento NON è prosa: è un foglietto a parte, e lo dice. */
/* Il chip è VOCE dentro il racconto, non un bottone. Era un riquadro tratteggiato con
   un'etichetta in ambra sopra: la forma di una scheda, e chi giocava ci ha cliccato sopra
   aspettandosi qualcosa (posta motore→ui, 19/08). L'ambra dice «guarda qui», mai
   «toccabile» (§5.1), e ciò che si tocca si riconosce dalla forma — quindi la forma
   cambia: un filetto a lato, come una citazione a margine, e niente scatola. */
.chip {
  margin: 0.2rem 0 2.1rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--bordo);
  cursor: default;
}

.chip.istinto { font-style: italic; color: var(--attenuato); }
.chip.parlata { color: var(--inchiostro); }   /* non «.voce»: è la classe delle righe dei pannelli */

/* LA RIGA «HAI SAPUTO» (§8.17): il fatto che il turno ti ha dato, scritto come sta a
   taccuino. Stessa impaginazione del suggerimento — il filetto a sinistra, che vuol dire
   «questo non e' la scena» — ma l'etichetta e' GRIGIA e non ambra: l'ambra la porta gia' il
   bottone del taccuino, e a Mrs Hudson anche la prosa. Tre gridi per un fatto solo sono un
   grido che nessuno sente piu'. */
.hai-saputo {
  margin: 0.2rem 0 2.1rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--bordo);
  cursor: default;
}
.hai-saputo .nome {
  display: block;
  margin-bottom: 0.35rem;
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--attenuato);
}
.hai-saputo p { margin: 0 0 0.3rem; }
.hai-saputo p:last-child { margin-bottom: 0; }

/* IL SEGUITO (§8.19): la battuta si è fermata a una schermata, e questa riga dice che c'è
   dell'altro — e di chi. Stessa famiglia di «Hai saputo» e del suggerimento (il filetto a
   sinistra: «questo non è la scena»), con l'etichetta grigia. Sta più vicina al testo di
   quanto stiano loro, perché è la sua continuazione e non un commento: il margine negativo
   si mangia metà dell'aria che la battuta lascia sotto di sé. */
.seguito {
  margin: -1rem 0 2.1rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--bordo);
}
.seguito[hidden] { display: none; }
/* `balance`: con un'etichetta lunga («la donna in lutto») sul telefono la riga va a capo, e
   senza lasciava il punto mediano appeso in fondo alla prima. Chi non lo conosce va a capo
   come prima. */
.seguito .nome {
  display: block;
  text-wrap: balance;
  margin-bottom: 0.45rem;
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--attenuato);
}
/* La frase che il tocco scrive nella casella ha la FORMA delle cose che si toccano — cornice
   piena e chevron, come la pista della giornata e le porte minute — e non il colore: l'ambra
   in questa pagina vuol dire «novità, guarda qui» e nient'altro (§5.1). Alta 44px, come
   tutto ciò che si preme (§9). */
.seguito-mossa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--bordo);
  background: transparent;
  color: var(--inchiostro);
  font: inherit;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.seguito-mossa::before { content: '›'; margin-right: 0.45rem; color: var(--attenuato); }
.seguito-mossa:hover,
.seguito-mossa:focus-visible { border-color: var(--inchiostro); }

.chip .nome {
  display: block;
  margin-bottom: 0.35rem;
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambra);
  opacity: 0.85;
}

.chip.istinto .nome { color: var(--attenuato); }
.chip p { margin: 0 0 0.35rem; }
.chip p:last-child { margin-bottom: 0; }

/* ---------- la fine della partita (§12) ----------
   L'epilogo del Cronista non è l'ennesimo turno: è la pagina che si legge dopo. Cambia
   misura (più stretta della colonna del racconto: una pagina dentro la pagina), respira di
   più fra le righe, e si apre con un capolettera. Il segnale non è scritto da nessuna
   parte — lo dice la forma: qui non si gioca più, si legge. */
.epilogo {
  max-width: 32rem;
  margin: 3.5rem auto 2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--bordo);
  white-space: pre-wrap;
  line-height: 1.85;
  animation: apparizione 1200ms ease-out 1;
}

/* Il titolo fra due filetti, come le testate delle riviste dell'epoca. */
/* Il conteggio di fine partita: arredo, non voce. Sta sotto il diario, staccato, e in
   maiuscoletto da didascalia — deve leggersi come la nota a pie' di pagina di un'edizione,
   non come una riga che Watson ha scritto. */
.statistiche-epilogo {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
  font-family: var(--macchina);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--attenuato);
  text-align: center;
}

.epilogo .titolo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--attenuato);
  margin-bottom: 1.6rem;
}

.epilogo .titolo::before, .epilogo .titolo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bordo);
}

.epilogo .corpo::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--ambra);
}

/* Il fregio di chiusura: tre punti spaziati, come il finalino di un capitolo. */
.epilogo::after {
  content: '· · ·';
  display: block;
  margin-top: 2.4rem;
  text-align: center;
  letter-spacing: 0.5em;
  color: var(--attenuato);
}

@keyframes apparizione {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* «Fine del caso»: composta come il colophon di un libro, non come un avviso di sistema. */
.fine-caso {
  margin: 2.5rem 0 1rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--attenuato);
}

/* LA VOCE DEL GIOCO: le righe d'apertura e gli avvisi — e, dal 02/10, le risposte «fuori dal
   racconto», quando il giocatore parla al gioco invece che al mondo (registro `fuori`, leva
   BOCCA del motore). È lo stesso parlante, e si riconosce da come ti ha parlato la prima
   volta: corsivo, grigio, senza nome né volto (decisione dell'utente). */
.avviso,
.battuta.fuori { color: var(--attenuato); font-style: italic; }
/* …e quando il motore la manda come CODA, la coda non le presta né il filetto né il suo
   grigio più chiaro (che sul `.testo` batterebbe quello qui sopra): il filetto stacca una
   voce dal mondo dentro lo stesso turno, e qui non c'è nessuna voce da cui staccarsi. */
.battuta.fuori[data-parte="coda"] { margin-top: 0; padding-top: 0; }
.battuta.fuori[data-parte="coda"]::before { content: none; }
.battuta.fuori[data-parte="coda"] .testo { color: var(--attenuato); }

/* IL SIPARIO CHE ASPETTA (utente, 30/08). Fra la chiusura del caso e il diario di Watson
   passa mezzo minuto — il Cronista scrive milleottocento token — e finora quel silenzio
   era un'attesa muta come tutte le altre: il momento piu importante della partita non si
   distingueva da «Londra emette fumo dai comignoli». Due righe, e fanno due cose diverse:
   la prima DICE il fatto e sta ferma, in maiuscoletto spaziato come il colophon di fine
   caso — e' un annuncio, non un avviso di sistema; la seconda respira, perche' e' quella
   che aspetta. Piu grande del battito, come chiesto, ma non piu grande della prosa: il
   racconto resta il racconto. */
.sipario {
  margin: 2.4rem 0 1.4rem;
  text-align: center;
  animation: entra-battito 1200ms ease-out;
}
.sipario.esce { opacity: 0; animation: esce-battito 900ms ease-in; }
/* Il maiuscoletto spaziato legge SEMPRE piu fioco del corpo di testo, a parita di colore:
   a 0.92rem questa riga spariva dentro la prosa invece di annunciare la fine (provato nel
   browser, 30/08). Percio e piu grande della prosa, non piu piccola — e il filo sopra e
   sotto la stacca dal racconto come il colophon stacca l'ultima pagina. */
.sipario-fatto {
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--attenuato);
  border-bottom: 1px solid var(--attenuato);
  font-size: 1.05rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--inchiostro);
}
.sipario-attesa {
  margin: 0.7rem 0 0;
  font-family: var(--prosa);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--attenuato);
  animation: respiro-attesa 2.6s ease-in-out infinite;
}
/* Il freno vale anche qui (direzione_artistica.md §5.7): a movimento ridotto la riga resta,
   leggibile e ferma — l'informazione non e' nel lampeggio. */
@media (prefers-reduced-motion: reduce) {
  .sipario, .sipario-attesa { animation: none; }
  .sipario.esce { animation: none; }
}


/* ---------- il micro-movimento: lo schermo non è mai morto (direzione_artistica.md §5)
   Quattro movimenti, tutti in CSS, tutti sotto la soglia di ciò che si guarda. Il principio
   è quello del documento: una tavola ferma è un'illustrazione, una tavola che respira è una
   scena. E il freno vale per tutti (§5.7): a movimento ridotto restano immagini immobili,
   non una versione mutilata del gioco.
   Si muove SOLO la tavola del luogo dove sei (.respira): le altre sono l'album dei luoghi
   attraversati, e un album sta fermo — venti animazioni che girano mentre si legge sono un
   disturbo, non atmosfera. ---------- */

/* §5.1 — LA CARRELLATA NON SI FA, ED È L'OPERA A DIRLO (2026-08-16).
   Le tavole non sono fotogrammi: sono stampe MONTATE su carta, con la loro cornice avorio
   e il filetto stampato dentro l'immagine. Una carrellata, per quanto lenta, è uno zoom:
   si mangia la cornice da un lato e la lascia dall'altro — a schermo sembrava una tavola
   ritagliata male, e il ritaglio si muoveva. Su una stampa montata non si fa la carrellata
   per la stessa ragione per cui non si fa su un quadro appeso: l'oggetto ha i suoi bordi.
   Resta il respiro della LUCE (§5.3 qui sotto), che non tocca i bordi di niente.
   Se un giorno si vorrà il movimento, servono tavole senza cornice — o con un margine di
   sicurezza dichiarato: è una decisione della conversazione immagini, non del client. */

/* §5.3 — il gas che vive. Il tremolio sta sulla LUCE della tavola, non sul testo: tre punti
   percentuali di luminosità, sotto la soglia di ciò che si nota e sopra quella di ciò che si
   sente. Sul testo sarebbe una lampadina che sta per fulminarsi.
   Nel set piece il respiro si ferma, ed è QUI che si ferma — nel `body:not(.setpiece)` del
   selettore: l'immobilità improvvisa è l'allarme, e non costa una parola. Più sotto c'era
   una seconda riga che lo spegneva sull'`img`, dove animazione non ce n'è mai stata. */
body:not(.setpiece) .tavola.respira.illustrato {
  animation: gas 7.5s ease-in-out infinite alternate;
}

@keyframes gas {
  from { filter: brightness(0.985); }
  to   { filter: brightness(1.03); }
}

/* §5.2 — la nebbia, solo dove ha senso: fuori, di notte. Due banchi che derivano in
   direzioni diverse e non tornano mai nello stesso punto. Non è un asset: sono due
   sfumature, e costano quanto niente. */
.tavola.notturna::before {
  content: '';
  position: absolute;
  inset: 0;   /* la nebbia sta DENTRO la stampa: sopra la cornice di carta non ci va */
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 22% 72%, rgba(232, 224, 208, 0.11), transparent 70%),
    radial-gradient(48% 34% at 74% 58%, rgba(232, 224, 208, 0.075), transparent 72%);
  animation: deriva-nebbia 41s ease-in-out infinite alternate;
}

@keyframes deriva-nebbia {
  from { transform: translate3d(-3.5%, 0.5%, 0); }
  to   { transform: translate3d(3.5%, -1%, 0); }
}

/* ---------- il set piece: lo schermo si spoglia (direzione_artistica.md §5.5) ---------- */

body.setpiece .riga-viva { visibility: hidden; }
/* 0,45 era troppo: guardato il 19/08 sulla tavola vera del set piece — il salone al buio,
   che è la più notturna del gioco — la lanterna si spegneva e i manichini perdevano la
   forma. Buio addosso a un disegno già scuro fa poltiglia, non tensione: il buio lo fa
   l'iride, e la tavola deve restare leggibile. */
body.setpiece .tavola { filter: brightness(0.72) contrast(1.06); }

/* «Nei set piece lo schermo si SPOGLIA» (direzione_artistica.md §5.5): gli arnesi — i tre
   pannelli, la partita, il quadrante della difficoltà, la miniatura del luogo — si
   ATTENUANO, e restano toccabili. Prima sparivano davvero, e chi giocava lo ha detto due
   volte: «senza il menù non riesco a giocarci bene» (19/08). La direzione artistica chiede
   che lo schermo si spogli, ma il gioco ha per principio la MORBIDEZZA — accoglie, non
   mette alla prova — e togliere gli arnesi di mano proprio nel momento più teso è la sola
   cosa che quel principio non consente. All'occhio lo spoglio resta (il grosso del lavoro
   lo fanno l'iride e la tavola ferma); alla mano non viene tolto niente, e passandoci
   sopra tornano pieni. La casella e Watson non si toccano nemmeno da attenuati: la prima è
   l'unico modo per far accadere le cose (§1), il secondo è la rete di sicurezza. */
.pannelli, #bottonePartita, #bottoneDifficolta, #miniatura {
  transition: opacity 900ms ease;
}
body.setpiece .pannelli,
body.setpiece #bottonePartita,
body.setpiece #bottoneDifficolta,
body.setpiece #miniatura {
  opacity: 0.22;
}
/* Tornano pieni appena li si cerca — col mouse, col dito o col Tab. Sul telefono l'hover
   non esiste: lì restano sbiaditi, ma toccabili come sempre, che è ciò che conta. */
body.setpiece .pannelli:hover,
body.setpiece .pannelli:focus-within,
body.setpiece #bottonePartita:hover,
body.setpiece #bottonePartita:focus-visible,
body.setpiece #bottoneDifficolta:hover,
body.setpiece #bottoneDifficolta:focus-visible,
body.setpiece #miniatura:hover,
body.setpiece #miniatura:focus-visible {
  opacity: 1;
  transition: opacity 200ms ease;    /* sbiadire è lento, tornare è immediato */
}
@media (prefers-reduced-motion: reduce) {
  .pannelli, #bottonePartita, #bottoneDifficolta, #miniatura { transition: none; }
}

/* L'iride: il buio non c'è già, si chiude. Un secondo e mezzo, una volta sola, e resta. */
body.setpiece .pagina::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 45%;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.72) 100%);
  animation: iride 1500ms ease-out 1 both;
}

@keyframes iride {
  from { opacity: 0; transform: scale(1.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- la barra: sempre in fondo, sempre attiva ---------- */

.barra {
  position: relative;
  padding: 0.5rem clamp(0.75rem, 5vw, 2rem);
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordo);
  background: #16120F;
}

.barra-interna {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--barra-larga);
  margin-inline: auto;
}

.riga-input {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;                     /* senza questo la casella non si restringe e il testo scorre via */
}

/* Il fantasma sta ESATTAMENTE sotto al testo vero: stessi caratteri, stessi margini,
   stesso andare a capo. Se i due si scostano, il suggerimento sembra un errore. */
/* `display: block` NON basta: senza width:100% sulla casella, il textarea torna alla sua
   larghezza di fabbrica (~20 colonne) e la riga di Holmes diventa un francobollo. */
.casella { position: relative; flex: 1; min-width: 0; }
.casella > #input { width: 100%; display: block; }

.fantasma {
  position: absolute;
  inset: 0;
  padding: 0.55rem 0;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--attenuato);
  pointer-events: none;             /* il fantasma non intercetta il tocco... */
  user-select: none;
}

.fantasma .gia-scritto { visibility: hidden; }   /* il testo vero lo disegna la casella */

.fantasma .proposta {
  pointer-events: auto;             /* ...tranne la proposta, che su telefono si accetta toccandola */
  cursor: pointer;
  padding: 0.55rem 0.3rem;          /* area di tocco più alta del testo, senza spostarlo */
  margin: -0.55rem -0.3rem;
  border-radius: 4px;
}

.fantasma .proposta:hover { color: var(--ambra); }

/* Il bersaglio dell'accettazione, dove il Tab non c'è: la proposta è lunga due lettere e
   due lettere non sono 44 pixel (§9). Il segno del Tab accanto alla riga è un bersaglio
   vero, e insegna il gesto a chi gioca col pollice. Sul computer resta, minuto: chi ha la
   tastiera usa il Tab e non lo guarda nemmeno. */
.fantasma .accetta-proposta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -0.55rem 0 -0.55rem 0.35rem;
  padding: 0;
  vertical-align: middle;
  background: none;
  border: 0;
  color: var(--attenuato);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
}
.fantasma .accetta-proposta:hover { color: var(--ambra); opacity: 1; }
@media (hover: hover) {
  .fantasma .accetta-proposta { min-width: 1.6rem; opacity: 0.4; }
}
.fantasma.pensiero .proposta { font-style: italic; }

/* L'attesa respira: il colore va e viene piano, come la nebbia sopra la casella. */
@keyframes respiro-attesa {
  0%, 100% { color: var(--attenuato); }
  50%      { color: var(--ambra); }
}

.attesa-testo {
  font-style: italic;
  animation: respiro-attesa 2.6s ease-in-out infinite;
}

/* IL BATTITO D'ATTESA sta nella colonna del racconto, dove sta per apparire la prosa. Si
   legge come una didascalia — corsivo, attenuato, nessun registro di parlante — perché non
   è nessuno che parla: è il luogo che continua a esistere mentre aspetti. Entra LENTO e
   poi sta fermo: la prima versione lo ridisegnava venti volte al minuto insieme ai puntini
   e la dissolvenza ripartiva da capo ogni volta — non respirava, sbatteva le palpebre
   (giocando, 20/08). */
.battito-attesa {
  margin: 0.9rem 0 0;
  font-family: var(--prosa);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--attenuato);
  /* Niente `both`: con la dissolvenza «riempita» l'elemento resta a opacità ZERO finché
     l'animazione non parte, e in una scheda in secondo piano i fotogrammi non arrivano
     affatto — il battito sarebbe invisibile. Senza `both` lo stato normale è già visibile,
     e la dissolvenza è un di più che, se non gira, non toglie niente. */
  opacity: 1;
  animation: entra-battito 1200ms ease-out;
}
/* E la rete sotto, la stessa che c'è per le illustrazioni: in una scheda in secondo piano
   l'animazione PARTE ma non avanza, e la riga resterebbe ferma al suo primo fotogramma,
   cioè invisibile. Un timer, scaduta la dissolvenza, la posa comunque. */
.battito-attesa.posato { opacity: 1; animation: none; }
.battito-attesa.esce { opacity: 0; animation: esce-battito 900ms ease-in; }
@keyframes entra-battito {
  from { opacity: 0; transform: translateY(0.35rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes esce-battito {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .battito-attesa, .battito-attesa.esce { animation: none; }
}

.pannelli { display: flex; gap: 0.35rem; flex: none; }

/* Il segno di novità sul taccuino: RESTA finché non lo apri. Un lampo che passa
   non è una notifica — se guardavi altrove, non è mai esistito.
   E DICE QUANTE (utente, 30/08): il puntino muto lasciava indovinare perché fosse acceso —
   «c'era il taccuino acceso ma non ho capito perché» — e il giocatore lo attribuiva al
   turno sbagliato, due dopo quello che l'aveva acceso davvero. Il numero non dice che cosa
   è arrivato (quello sta dentro, dove le voci nuove sono già segnate): dice che c'è
   qualcosa da leggere, e quanto. Resta ambra perché è esattamente il suo significato —
   novità, guarda qui — e non diventa mai un bottone: si tocca il pannello, non il segno. */
.pannello { position: relative; }
.pannello.novita::after {
  content: attr(data-novita);
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--ambra);
  color: var(--carta);
  font-family: var(--interfaccia, inherit);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

/* I tre pannelli. Su schermo largo portano il nome: un'icona sola si impara, ma prima
   bisogna trovarla — e queste sono ancora segnaposto (tappa 3). Su telefono, solo icona. */
.pannello {
  flex: none;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  background: transparent;
  border: 1px solid var(--bordo);
  border-radius: 22px;
  color: var(--attenuato);
  cursor: pointer;
  font: inherit;
  transition: color 180ms ease, border-color 180ms ease;
}

.pannello:hover, .pannello:focus-visible { color: var(--ambra); border-color: rgba(217, 160, 91, 0.45); }
.pannello:active { transform: scale(0.96); }

/* Senza il nome il bottone deve essere un cerchio con l'icona AL CENTRO: l'imbottitura
   laterale, pensata per il testo, la spingeva di lato (visto sul telefono). */
@media (max-width: 60rem) {
  .pannello { padding: 0; justify-content: center; }
}

.nome-pannello {
  display: none;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-right: 0.15rem;
}

/* I nomi compaiono solo quando c'è spazio vero: sotto, toglierebbero larghezza alla casella */
@media (min-width: 60rem) {
  .nome-pannello { display: inline; }
}


/* «HOLMES ›» accanto alla casella non si vede più da nessuna parte (2026-08-15): era
   sparito dal telefono e in fondo non serviva neanche sul computer — di chi è il turno lo
   dicono già il testo-guida nella casella e la nebbia sopra, e una parola in meno accanto
   al punto dove si scrive è una parola in meno fra il giocatore e la sua frase.
   L'elemento resta, invisibile agli occhi e leggibile a chi usa un lettore di schermo:
   è l'etichetta della casella, e toglierla lascerebbe un campo senza nome. */
/* La stessa ricetta serve alla riga che dice la proposta del completamento a chi non la
   vede sfumata nella casella (29/08). Un posto solo: due ricette per «invisibile agli
   occhi, leggibile a voce» divergono al primo ritocco, e a divergere è quella che nessuno
   guarda mai. `white-space: nowrap` è quello che impedisce alla riga clippata di
   riportare a capo e allargare la casella di un pixel. */
.etichetta,
.solo-ascolto,
.annuncio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.in-attesa #input::placeholder { font-style: italic; }

#input {
  flex: 1;
  min-width: 0;
  min-height: 44px;                 /* area di tocco (§9) */
  max-height: 32vh;                 /* oltre, scorre: la pagina non viene mangiata dalla casella */
  padding: 0.55rem 0;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  overflow-y: auto;
  color: var(--inchiostro);
  caret-color: var(--ambra);
  font: inherit;
  font-size: 1.0625rem;             /* ≥16px: iOS non zooma al fuoco */
  line-height: 1.5;
}

/* Il segnaposto è la riga che insegna cosa scrivere, e la si leggeva al 60%: su #16120F
   componeva #655E56, 2,9:1, poco più di metà del pavimento del progetto (R119). L'opacità
   dichiarata non è pignoleria — senza, Firefox rimette la sua sul segnaposto e si scende a
   2,6. Col grigio pieno siamo a 5,9:1, e resta ben più smorto dell'inchiostro che ci si
   scrive sopra (14:1): a cedere dev'essere il tono, non la leggibilità. */
#input::placeholder { color: var(--attenuato); opacity: 1; }

/* la porta sempre aperta (§7.2) e i tre pannelli (§8): stessa famiglia, stessa area di tocco */
.tonda {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  color: var(--attenuato);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.tonda:hover, .tonda:focus-visible { color: var(--ambra); border-color: rgba(217, 160, 91, 0.45); opacity: 1; }
.tonda:active { transform: scale(0.96); }

:focus-visible { outline: 2px solid var(--ambra); outline-offset: 3px; }

/* ---------- la freccia: c'è dell'altro sotto ---------- */

/* Al CENTRO, non in un angolo: è un invito a scendere, e un invito si mette davanti a chi
   legge — nell'angolo si confondeva con un bottone di servizio (chiesto giocando, 18/08). */
.giu {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 50;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(217, 160, 91, 0.4);
  background: #221D19;
  color: var(--ambra);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.giu:active { transform: translateX(-50%) scale(0.94); }

/* ---------- i tre pannelli: si aprono sopra la pagina, uno alla volta (§8) ---------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  /* buio abbastanza da isolare il foglio: sotto, la pagina non compete più */
  background: rgba(9, 7, 6, 0.66);
}

.foglio {
  width: 100%;
  max-width: 36rem;
  max-height: min(80dvh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--foglio);
  border: 1px solid var(--bordo);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--bordo);
}

.intestazione h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--attenuato);
}

.chiudi {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.6rem -0.5rem 0;
  background: transparent;
  border: 0;
  color: var(--attenuato);
  font: inherit;
  display: inline-flex;              /* la croce è un SVG come le altre icone, non un glifo (2026-08-22) */
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
}

.chiudi:hover, .chiudi:focus-visible { color: var(--ambra); }

.contenuto {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem 1.3rem;
}

/* ---------- la carta di Londra (§8.1) ---------- */

/* La carta vuole tutto lo spazio che c'è: è l'unico pannello che si GUARDA invece di
   leggersi, e su un telefono un margine di cortesia le toglie il 12% di superficie
   (2026-08-16). Più larga, più alta, e con meno imbottitura attorno. */
.foglio.largo {
  max-width: min(98vw, 68rem);
  max-height: min(92dvh, 52rem);
}

.foglio.largo .contenuto { padding: 0.7rem 0.7rem 0.9rem; }

@media (max-width: 40rem) {
  .velo:has(.foglio.largo) { padding: 0.35rem; }
  .foglio.largo .contenuto { padding: 0.5rem 0.4rem 0.7rem; }
}

.carta {
  position: relative;
  margin-bottom: 1.2rem;
  border: 1px solid var(--bordo);
  line-height: 0;
}

.carta img { width: 100%; height: auto; }

/* Il pannello della carta NON è una lista che scorre come gli altri tre: è una vista a
   due parti — la carta prende lo spazio che c'è, e il cartellino del luogo toccato sta
   sotto, sempre a schermo. Prima la carta imponeva la sua altezza e sul computer il
   cartellino nasceva fuori dalla vista: toccavi un punto e sembrava non succedesse niente
   (visto giocando, 2026-08-16).
   La carta conserva le sue proporzioni (aspect-ratio) e si centra: i punti sono in
   percentuale sul suo riquadro, quindi il riquadro deve restare incollato all'immagine —
   se si allargasse oltre, gli spilli scivolerebbero via dai luoghi.
   `overflow: auto` resta come ultima rete per le finestre bassissime. */
.foglio.largo .contenuto,
.foglio.largo .mappa {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;            /* a scorrere è l'elenco, non la carta */
}

.foglio.largo .mappa { flex: 1 1 auto; }

/* L'elenco dei luoghi scorre per conto suo, sotto la carta che resta ferma. */
.foglio.largo .elenchi-mappa {
  flex: 1 1 auto;
  min-height: 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.foglio.largo .carta {
  flex: 0 1 auto;
  min-height: 6rem;
  align-self: center;
  width: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
}

.foglio.largo .carta img { width: 100%; height: 100%; }

.foglio.largo .cartellino { flex: none; margin-bottom: 0; }

/* I luoghi scoperti si accendono in ambra; quelli dove sei già stato sono pieni. */
.segno {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;          /* il punto sta al centro della coordinata */
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--ambra);
  background: rgba(26, 22, 19, 0.55);
  cursor: pointer;
  transition: transform 160ms ease;
}

.segno::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: transparent;
}

.segno.visitato::after { background: var(--ambra); }
.segno:hover, .segno:focus-visible { transform: scale(1.25); }
.segno.scelto { box-shadow: 0 0 0 4px rgba(217, 160, 91, 0.25); }

/* Dove sei adesso BATTE: su una carta fitta un punto fermo si perde, anche se è di un
   altro colore. Il segno si allarga e si stringe, e l'alone si apre con lui. */
@keyframes battito-mappa {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 3px rgba(232, 224, 208, 0.30); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 12px rgba(232, 224, 208, 0); }
}

.segno.qui {
  border-color: var(--inchiostro);
  border-width: 3px;
  animation: battito-mappa 1.9s ease-in-out infinite;
}
.segno.qui::after { background: var(--inchiostro); }
.segno.qui:hover, .segno.qui:focus-visible { transform: none; }   /* il battito continua */

/* Il nome accanto al punto. Sta a destra del segno e non lo copre; su schermo stretto
   sparisce, perché a 315 pixel di carta i nomi si accavallerebbero. */
.nome-segno {
  position: absolute;
  display: none;
  transform: translate(18px, -50%);
  padding: 1px 6px;
  max-width: 11rem;
  background: rgba(22, 18, 15, 0.82);
  color: var(--ambra);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.nome-segno.qui { color: var(--inchiostro); }
.nome-segno.a-sinistra { transform: translate(calc(-100% - 18px), -50%); }
/* Le vie di fuga quando il posto naturale è occupato (§8.4): sopra e sotto il
   segno, centrate — così il nome resta legato al suo punto e non va a spasso. */
.nome-segno.sopra { transform: translate(-50%, calc(-100% - 14px)); }
.nome-segno.sotto { transform: translate(-50%, 14px); }
/* E le due diagonali dalla parte opposta: il nome parte dal segno e va a destra, sopra o
   sotto. Servono quando il posto naturale, i fianchi e le due centrate sono tutti presi —
   e senza, l'etichetta della Fabbrica spariva, che è il luogo del caso (misurato §8.4). */
.nome-segno.sopra-destra { transform: translate(-8px, calc(-100% - 14px)); }
.nome-segno.sotto-destra { transform: translate(-8px, 14px); }
.nome-segno.sopra.a-sinistra { transform: translate(calc(-100% + 8px), calc(-100% - 14px)); }
.nome-segno.sotto.a-sinistra { transform: translate(calc(-100% + 8px), 14px); }

@media (min-width: 52rem) {
  .nome-segno { display: block; }
}

/* Il cartellino sta SOTTO la carta: sopra, con tre stanze, ne copriva metà. */
.cartellino {
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.2rem;
  background: rgba(232, 224, 208, 0.04);
  border: 1px solid var(--bordo);
  border-left: 2px solid var(--ambra);
  line-height: 1.5;
}

.cartellino strong { font-weight: 400; }
.cartellino .distanza { display: block; }
.cartellino .voce.azione { display: inline-block; width: auto; margin-top: 0.4rem; padding: 0.4rem 1.2rem; }

/* Un edificio con più stanze: una riga per stanza, ciascuna col suo "Vai". */
.riga-cartellino + .riga-cartellino {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bordo);
}

.lettura-taratura {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0.3rem 0.6rem;
  background: rgba(22, 18, 15, 0.9);
  color: var(--ambra);
  font-size: 0.8rem;
  line-height: 1.4;
}

.sezione-pannello {
  margin: 0 0 1.4rem;
}

.sezione-pannello > h3 {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Niente opacità: il 75% portava questo maiuscoletto a #7B736A sul foglio, 3,7:1, e su
     undici pixel spaziati il pavimento pesa il doppio (R120). Che sia un'etichetta e non un
     titolo lo dicono già il corpo e il posto — l'h2 un dito più su, sullo stesso foglio, il
     grigio lo porta pieno da sempre. Ora 5,5:1, come lui. */
  color: var(--attenuato);
}
/* IL PALLINO SUL TITOLO DEL GRUPPO (12/09): qua sotto c'è qualcosa che non hai ancora
   letto. Il pannello è più alto di uno schermo e si apre dal suo principio (01/09), quindi
   una voce accesa in fondo non la vede nessuno: il numero sul bottone prometteva una cosa
   che, a schermo, non si trovava (utente, 10/09). Stesso ambra e stessa promessa delle
   voci — «guarda qui», mai «toccami». */
.sezione-pannello.ha-nuovo > h3::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.45rem;
  vertical-align: 0.1em;
  border-radius: 50%;
  background: var(--ambra);
}

/* Ogni riga SCRIVE nella casella: è un pulsante, e si vede che lo è dalla forma. */
.voce {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--inchiostro);
  font: inherit;
  cursor: pointer;
}

.voce:hover, .voce:focus-visible { border-left-color: var(--ambra); background: rgba(232, 224, 208, 0.04); }
/* Le voci che si LEGGONO e basta non sono più bottoni spenti ma `div` (app.js): stessa
   riga, stesso spazio, nessuna promessa di tocco. La griglia non è un vezzo — un `button`
   centra da sé il proprio contenuto nell'altezza, un `div` no, e senza questa riga le voci
   di una riga sola (il «sei qui» della mappa) risalivano di un paio di pixel. Dove la voce
   è già una fila — le indagini, con la copertina accanto al titolo — comanda il `display`
   dichiarato più sotto, e `align-content` su una fila sola non ha effetto. */
.voce[disabled], .voce.si-legge { cursor: default; color: var(--inchiostro); }
.voce[disabled]:hover, .voce.si-legge:hover { border-left-color: transparent; background: transparent; }
.voce.si-legge { display: grid; align-content: center; }

.voce .quando,
.voce .distanza {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenuato);
  margin-top: 0.15rem;
}

.voce.qui { color: var(--ambra); }
.voce.nuova { border-left-color: var(--ambra); }   /* entrata in questo turno */

.vuoto { color: var(--attenuato); font-style: italic; margin: 0.2rem 0 0; }

/* il pannello della partita: un campo per il nome e le voci da riprendere */
.campo-nome {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: 1px solid var(--bordo);
  color: var(--inchiostro);
  font: inherit;
  font-size: 1rem;
}

.campo-nome::placeholder { color: var(--attenuato); opacity: 0.7; }
.voce.azione { border: 1px solid var(--bordo); border-left-width: 2px; color: var(--ambra); }

/* «Riprova» dentro l'avviso di errore */
.riprova {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ambra);
  color: var(--ambra);
  font: inherit;
  font-style: normal;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
}

/* la macchina da scrivere della redazione: il taccuino è battuto a macchina */
.contenuto .taccuino { font-family: var(--macchina); font-size: 0.95rem; }

/* ---------- movimento ridotto: la stessa partita, ferma (§6) ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .nebbia.attesa { opacity: 1; }
  /* «Movimento ridotto» non vuol dire «niente dissolvenze»: quello che fa male è il
     MOVIMENTO — la nebbia che scorre, lo sfocato che si mette a fuoco, le cose che si
     spostano. Una comparsa netta al posto di una dissolvenza è più brusca, non più
     gentile, e il documento (§9) prometteva «una dissolvenza breve». Eccola. */
  .entra { transition: opacity 220ms ease !important; }
  .tavola.appena .entra { filter: none !important; transform: none !important; }
}


/* ---- La schermata d'ingresso (proposta §A7): sobria, non è il gioco ---- */
/* Flex e non griglia perché il foglio dell'ingresso può essere più alto dello schermo e
   deve poter scorrere (con `place-items: center` la parte fuori misura resta irraggiungibile).
   Il foglio NON si centra: dal 19/08 sera la copertina è a tutto schermo (§8.7, «LA
   COPERTINA» più sotto) e si prende il velo intero, senza margini. Le righe che centravano
   stavano qui e una seconda `.velo.ingresso`, trecento righe più giù, le disfaceva a parità
   di forza: il file dichiarava una cosa e ne faceva un'altra, e chi leggeva questa regola
   credeva di sapere come si apriva la soglia. Una dichiarazione sola, con i valori veri.
   Anche il `.velo.ingresso[hidden]` che chiudeva questo blocco è caduto: `[hidden]` è
   `!important` per tutto il client e vince da qualunque punto del file. */
.velo.ingresso {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow-y: auto;
}
.ingresso-sotto { font-family: var(--macchina); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--attenuato); margin: 1.1rem 0 0.5rem; }
.ingresso-sotto.fascicolo { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--bordo); }
/* Non cercare qui il contenitore dei casi: le schede stanno in un `.cassetto`, e la loro
   spaziatura è `.cassetto .ingresso-caso` più sotto. Le due classi al plurale che stavano
   qui non le portava nessun elemento (29/08). */
.ingresso-caso {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 0.9rem; font-family: var(--prosa); font-size: 1.05rem; text-align: left;
  color: var(--inchiostro); background: none; border: 1px solid var(--bordo); cursor: pointer;
}
.ingresso-caso.scelto { border-color: var(--inchiostro); }
.ingresso-lingua { font-family: var(--macchina); font-size: 0.75rem; color: var(--attenuato); }
/* Sul telefono i tre livelli non stanno in fila: «The game is afoot» da solo se ne prende
   due terzi, e andavano a capo a caso, uno sopra e due sotto. Una riga per livello: la
   colonna è ordinata, e il dito ha una striscia larga quanto il foglio (2026-08-16).
   ATTENZIONE (29/08): quella colonna oggi NON si fa più, e non se n'era accorto nessuno.
   I gradi sono passati dentro `.fila-chip`, che manda a capo, mentre la regola era rimasta
   su `.ingresso-gradi` — un contenitore che il client non ha mai costruito.
   E non si rimette. Non solo perché `.fila-chip` serve anche le Impostazioni: la colonna
   costerebbe 88 pixel in più sulla porta, dove il blocco dei livelli ne occupa già 207 e il
   bottone dell'indagine finisce a 642 su uno schermo da 667 (misurato il 23/08, §8.7). Una
   porta non si scrolla, e i quattro nomi a due a due si leggono bene. Se un giorno un nome
   più lungo li mandasse a capo male, la colonna si aggiunge a `.scelta-livello .fila-chip`
   soltanto — non a tutte le file di chip del client. */
@media (max-width: 30rem) {
  .ingresso-grado { justify-content: center; }
  /* Anche il titolo e la sua riga di servizio si mettono in colonna: affiancati, un titolo
     lungo spingeva «english» a capo da solo e la voce diventava alta il doppio delle altre.
     In colonna si legge come una voce di catalogo — il titolo, e sotto, minuta, la lingua. */
  .ingresso-caso { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}
/* 44 pixel di altezza: la regola del dito (§9) vale anche sulla soglia, che è la prima
   cosa che si tocca. Erano 31 (misurati a 375px, 2026-08-15) — e la soglia è proprio dove
   uno sconosciuto non ha ancora nessuna voglia di riprovare un tocco andato a vuoto. */
.ingresso-grado {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0.45rem 0.8rem; font-family: var(--macchina); font-size: 0.8rem;
  color: var(--attenuato); background: none; border: 1px solid var(--bordo); border-radius: 999px; cursor: pointer;
}
.ingresso-grado.scelto { color: var(--inchiostro); border-color: var(--inchiostro); }
.ingresso-comincia {
  display: block; width: 100%; margin-top: 1.3rem; padding: 0.8rem 1rem;
  font-family: var(--prosa); font-size: 1.05rem; color: var(--carta);
  background: var(--inchiostro); border: none; cursor: pointer;
}
.ingresso-comincia:disabled { opacity: 0.6; cursor: default; }
.ingresso-fascicolo { display: flex; gap: 0.5rem; }
/* Il corpo del campo è 1rem tondo per una ragione precisa: sotto i 16 pixel, l'iPhone
   ingrandisce la pagina da solo quando ci si scrive dentro, e la soglia salta. */
.ingresso-fascicolo input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0.55rem 0.8rem; font-family: var(--macchina); font-size: 1rem;
  color: var(--inchiostro); background: none; border: 1px solid var(--bordo);
}
.ingresso-fascicolo button {
  min-height: 44px; padding: 0.55rem 0.9rem; font-family: var(--macchina); font-size: 0.85rem;
  color: var(--inchiostro); background: none; border: 1px solid var(--bordo); cursor: pointer;
}
.ingresso-errore { color: var(--attenuato); font-size: 0.9rem; min-height: 1.2em; margin: 0.4rem 0 0; }


/* ---- Le righe dei salvataggi: la voce che carica + l'elimina a due tocchi ---- */
/* ---------- il pannello Partita: tre blocchi, ben divisi (18/08) ----------
   «I riquadri devono essere ben divisi»: erano cinque sezioni identiche una sotto l'altra
   e sembravano un elenco unico. Adesso ogni blocco è staccato da un filetto e da aria
   vera, e dentro ha i suoi sotto-titoli minuti. */
#contenutoPannello .sezione-pannello + .sezione-pannello {
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
}

/* Quale partita stai gestendo: la prima riga lo dice, o si amministra al buio. */
.quale-partita {
  margin: 0 0 0.9rem;
  font-family: var(--macchina);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--attenuato);
}

/* Sotto-titoli dentro un blocco: minuti, per non competere col titolo del blocco. */
.sotto-titolo {
  margin: 1.1rem 0 0.4rem;
  font-family: var(--macchina);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--attenuato);
  opacity: 0.85;
}
.sotto-titolo:first-of-type { margin-top: 0.2rem; }

/* «Tutti i salvataggi (12)» e «Gioca su un altro dispositivo» APRONO, non eseguono:
   scritte sottolineate, non bottoni pieni. */
/* La regola del dito vale anche per le righe che aprono qualcosa: erano 39 pixel alti,
   misurati a 375 (§9). Sono testo piccolo e sobrio apposta — ma toccarli deve riuscire
   al primo colpo come tutto il resto. */
.altri-salvataggi {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  color: var(--attenuato);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.altri-salvataggi:hover { color: var(--ambra); }

.codice-fascicolo {
  margin-top: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bordo);
  border-left: 2px solid var(--ambra);
}
.codice-fascicolo strong {
  font-family: var(--macchina);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--inchiostro);
}
.copia-codice {
  margin-left: 0.8rem;
  padding: 0.2rem 0.6rem;
  background: none;
  border: 1px solid var(--bordo);
  color: var(--attenuato);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.copia-codice:hover { color: var(--ambra); border-color: rgba(217, 160, 91, 0.45); }
.codice-fascicolo .vuoto { margin: 0.6rem 0 0; }
.codice-fascicolo .vuoto + .vuoto { margin-top: 0.3rem; }

.riga-salvataggio { display: flex; gap: 0.5rem; align-items: stretch; }
.riga-salvataggio .voce { flex: 1; min-width: 0; padding-top: 0.35rem; padding-bottom: 0.35rem; }   /* righe più fitte: erano 67px l'una sul telefono (2026-08-22) */
.elimina-salvataggio {
  font-family: var(--macchina); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--attenuato); background: none; border: 1px solid var(--bordo);
  padding: 0 0.7rem; cursor: pointer; white-space: nowrap;
}
.elimina-salvataggio[data-armato="1"] { color: var(--inchiostro); border-color: var(--inchiostro); }


/* Il commutatore della lingua di sistema, sulla soglia: piccolo, in testata */

/* la guida: si LEGGE, non si tocca (§8.6). Prosa in colonna stretta come il racconto, e
   gli esempi staccati — sono frasi da copiare con gli occhi, non bottoni: se fossero
   toccabili scriverebbero una mossa che nessuno ha chiesto. */
.guida .sezione-pannello + .sezione-pannello { margin-top: 1.4rem; }
.guida-testo { margin: 0.3rem 0 0; line-height: 1.65; max-width: 62ch; }
.guida-esempi {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0.6rem 0 0.6rem 0.9rem;
  border-left: 2px solid var(--bordo);
  color: var(--attenuato);
  font-style: italic;
}
.guida-esempi li { margin: 0.15rem 0; }

/* Salva col nome che vuoi: la casella e la conferma su una riga sola, e sul telefono in
   colonna — un campo di testo stretto accanto a un bottone non si scrive. */
/* `display: flex` batte l'attributo `hidden`, che è solo un `display: none` dell'agente
   utente: senza questa riga la casella del nome restava a schermo sempre, aperta o no
   (visto giocando, 19/08). La regola generale sotto vale per tutto il client. */
.salva-con-nome { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.5rem; }
.salva-con-nome .campo-nome { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
/* `.voce` è largo 100% perché nasce voce di elenco: dentro una riga a fianchi affiancati
   quel 100% diventa la base del flex, il bottone si prende tutta la scheda e schiaccia la
   casella a venti pixel — con la riga che esce dal riquadro e la barra di scorrimento
   orizzontale al seguito (visto giocando, 19/08). Qui il bottone vale quanto la sua
   parola. */
.salva-con-nome .voce { flex: 0 0 auto; width: auto; margin: 0; }
@media (max-width: 520px) {
  .salva-con-nome { flex-direction: column; }
}

/* ---------- il pannello Partita a schede (§8.5) ---------- */
/* Tre schede in cima, e la guida a destra: «Come si gioca» non appartiene a nessuna delle
   tre e si cerca da qualunque punto, quindi resta visibile da tutte. */
.schede-pannello {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: -0.2rem 0 1.2rem;
  border-bottom: 1px solid var(--bordo);
}
.scheda {
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--attenuato);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.scheda:hover { color: var(--inchiostro); }
.scheda.attiva { color: var(--inchiostro); border-bottom-color: var(--ambra); }

/* Il foglio non si gonfia e non si sgonfia cambiando scheda: il riquadro che cresce e
   cala a ogni tocco è la cosa che si nota per prima, e nel modo peggiore (19/08). Il corpo
   ha un'altezza sua, uguale per tutte e quattro, e ciò che eccede scorre dentro — la
   guida, che è la più lunga, si legge scorrendo senza spostare le schede di un pixel. */
.pannello-partita .corpo-scheda {
  height: min(56vh, 26rem);          /* ALTEZZA, non minimo: la guida è più lunga e faceva
                                        crescere il foglio lo stesso */
  overflow-y: auto;
  overflow-x: hidden;                /* niente scorrimento laterale: §9, mai in nessun pannello */
  padding-right: 0.45rem;            /* un dito d'aria fra il contenuto e la barra che scorre */
  overscroll-behavior: contain;      /* arrivati in fondo alla guida non parte la pagina sotto */
}
@media (max-width: 520px) {
  .pannello-partita .corpo-scheda { height: min(56vh, 22rem); }
}

/* La lingua: un menù a tendina, che dice «scegline una» meglio di due bottoni in fila e
   regge le lingue che verranno. La freccia la disegna il sistema; il resto è nostro. */
.scelta-lingua {
  min-height: 44px;
  margin-top: 0.3rem;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 1px solid var(--bordo);
  color: var(--inchiostro);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.scelta-lingua:focus-visible { outline: 2px solid var(--ambra); outline-offset: 2px; }
.scelta-lingua option { background: #221D19; color: var(--inchiostro); }

/* I chip delle impostazioni: difficoltà e lingua in fila, non impilate. Vanno a capo da
   sole sul telefono, dove tre nomi lunghi non stanno su una riga. */
.fila-chip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.5rem; }
.fila-chip .ingresso-grado { flex: 0 1 auto; }

/* LA SCELTA DEL LIVELLO (§8.7): sulla soglia sta sopra il bottone dell'indagine, in
   chiaro — allo stesso rango, non sotto una porta minuta. Nelle Indagini è lo stesso
   blocco, rientrato sotto la riga che stai per aprire.
   La riga che spiega ha un'altezza minima di due righe: le descrizioni dei quattro
   livelli non sono lunghe uguali, e senza il posto riservato il bottone qui sotto
   ballerebbe a ogni tocco — un bersaglio che si sposta mentre lo guardi. */
.scelta-livello { margin-top: 1.3rem; }
.scelta-livello-titolo {
  margin: 0 0 0.4rem; font-family: var(--macchina); font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--attenuato);
}
.scelta-livello .fila-chip { margin: 0; }
.scelta-livello-detto {
  margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.45;
  color: var(--attenuato); min-height: 2.5em;
}

/* Il caso che stai giocando non si tocca: è segnato, non offerto. */
/* Il caso in corso è segnato, ma da oggi si tocca: ricominciarlo da capo è un'azione
   legittima, ed era l'unica riga della lista che non ne aveva nessuna (20/08). */
#contenutoPannello .voce.ingresso-caso.qui { color: var(--ambra); cursor: pointer; }

@media (max-width: 520px) {
  .schede-pannello { flex-wrap: wrap; }
  .scheda { padding: 0.5rem 0.6rem; font-size: 0.9rem; }
}

/* Ciò che è nascosto è nascosto, qualunque display gli abbiamo dato: `display: flex` batte
   l'attributo `hidden`, che è solo un `display: none` dell'agente utente, e la casella del
   nome del salvataggio restava a schermo sempre, aperta o no (19/08 — l'incidente sta scritto
   per esteso accanto a `.salva-con-nome`). L'`!important` è quella riparazione: non si toglie.
   E siccome vince su tutto e da ogni punto del file, le vecchie righe per classe —
   `.giu[hidden]`, `.velo[hidden]`, `.cartellino[hidden]`, `.velo.ingresso[hidden]`,
   `.mosse[hidden]`, `.domanda-corpo[hidden]` — non facevano più niente e sono state tolte
   (29/08). Chi nasconde qualcosa di nuovo non deve aggiungere la sua riga qui: basta
   l'attributo. */
[hidden] { display: none !important; }

/* ---------- il lucchetto: i casi che non sono ancora aperti ---------- */
/* Il caso chiuso RESTA nell'elenco: sparire sarebbe peggio che essere chiuso — chi non sa
   che esiste non può desiderarlo. Si vede che c'è, si legge il titolo, e non si apre. */
.lucchetto {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.45em;
  vertical-align: -0.08em;
  opacity: 0.75;
}
.ingresso-caso.chiuso { opacity: 0.55; }
.ingresso-caso.chiuso:hover { opacity: 0.7; }
#contenutoPannello .voce.ingresso-caso.chiuso { cursor: default; }
.ingresso-comincia.chiuso {
  opacity: 0.5;
  cursor: default;
  border-style: dashed;              /* la porta si vede, e si vede che non si apre */
}
#contenutoPannello .voce.ingresso-caso .lucchetto { margin: 0 0.5em 0 0; }

/* ---------- LA COPERTINA: la porta d'ingresso (§8.7) ---------- */
/* Era un modulo — quattro domande prima di dire cos'è il gioco — e l'unica schermata
   senza illustrazione: il fondo scuro funziona DIETRO una stampa illuminata, da solo è un
   muro nero (visto in rete il 19/08). Qui c'è una promessa e un bottone; il resto sta
   sotto, minuto, e si apre a chi lo cerca.
   A TUTTO SCHERMO dal 19/08 sera: una porta d'ingresso non è una finestra di dialogo, è
   una schermata — e l'illustrazione, quando arriverà, deve poter riempire l'occhio. Il
   rischio dichiarato è che finché l'arte manca «tutto schermo» significhi più nero: per
   questo la composizione è fatta per reggere anche vuota, col titolo grande e l'aria
   attorno che fa il lavoro che farà l'immagine. */
/* Il velo che la ospita si apre a tutto schermo più su, dove `.velo.ingresso` è dichiarata
   una volta sola: due dichiarazioni della stessa classe a trecento righe di distanza
   facevano dire al file il contrario di quello che faceva. */
.foglio.copertina {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  box-shadow: none;
  background: var(--carta);
  overflow-y: auto;
}
/* L'arte è una FASCIA da un bordo all'altro dello schermo, non un fondo dietro il testo.
   È stata disegnata 16:7 col terzo inferiore tenuto calmo apposta perché il titolo ci si
   posi sopra (posta di style, 19/08): stirarla a fondo schermo butterebbe via proprio quel
   lavoro, e su un telefano verticale ne mostrerebbe una fetta. Così invece resta
   nell'inquadratura per cui è nata, e riempie l'occhio quanto lo schermo consente.
   Il taglio a `cover` mangia anche il filo di carta cotto nel file, che a tutta larghezza
   si leggeva come due strisce chiare in cima e in fondo. */
.copertina-fascia {
  display: none;                      /* finché l'arte non c'è, la porta non ha un buco */
  position: relative;
  width: 100%;
  /* La fascia prende TUTTO lo spazio che avanza: il testo si misura da sé e l'immagine si
     prende il resto. Con un'altezza fissa, su uno schermo basso il bottone finiva sotto il
     bordo e la porta si scrolla — e una porta non si scrolla. */
  flex: 1 1 auto;
  min-height: 170px;
  overflow: hidden;
}
/* La velatura attraversa TUTTA la larghezza: appoggiata solo alla colonna del titolo,
   fuori da quella l'illustrazione finiva con un taglio netto. */
.copertina-fascia::after {
  content: '';
  position: absolute;
  inset: 0;
  /* La velatura arriva al fondo carta PRIMA di finire, o dove la fascia si chiude resta
     una cucitura orizzontale visibile ai lati della colonna del testo. */
  background: linear-gradient(to top, var(--carta) 8%, rgba(26, 22, 19, 0.5) 30%, rgba(26, 22, 19, 0) 74%);
}
.copertina-arte {
  /* L'inquadratura si sposta sul SOGGETTO, e per questo l'immagine si allarga oltre lo
     schermo. Il peso del disegno — il lampione e le due figure — sta a un terzo da
     sinistra, mentre il testo ha il suo asse al centro: due assi diversi, e l'occhio
     legge «storto» anche se storto non è («non è ancora allineato», 20/08). Allargandola
     di un quinto, la figura in primo piano viene a cadere sull'asse del titolo e il buio
     di destra esce di scena. Misura, non gusto: Holmes sta al 42% del file, e 0,42 × 1,2
     fa 0,5. (Al 152% ci era finito OLTRE il centro: allargare non è centrare.) Il taglio
     mangia anche il filo di carta cotto nel file. */
  /* La copertina è NUDA dal 21/08 (style l'ha rifatta senza il filo di carta cotto
     dentro, 1574×688, 16:7 esatto): il taglio del 2% per lato non serve più e mangiava
     disegno vero. Resta solo l'allargamento che porta la figura sull'asse del titolo —
     Holmes sta al 41,6% del file, e 0,416 × 1,2 fa 0,50. Nessuno scostamento: il bordo
     sinistro dell'immagine è il bordo dello schermo. */
  width: 120%;
  height: 100%;
  margin-left: 0;
  object-fit: cover;
  /* Il taglio parte in ALTO, non a metà: la fascia mostra una striscia dell'immagine, e
     centrandola si perdevano le teste — cioè il berretto, cioè l'unica cosa che dice a
     colpo d'occhio «Sherlock» (visto giocando dal PC, 20/08). */
  object-position: center 10%;
  filter: brightness(0.86) saturate(0.94);
}
.foglio.copertina.illustrata { justify-content: flex-start; }
.foglio.copertina.illustrata .copertina-fascia { display: block; }
/* Col titolo posato sul fondo dell'immagine, come su un libro. */
.foglio.copertina.illustrata .copertina-testata {
  margin-top: clamp(-5rem, -8vh, -3rem);
  padding-top: 0;
}

.copertina-testata,
.copertina-corpo {
  position: relative;                 /* sopra l'arte e la sua velatura */
  width: 100%;
  /* 34rem erano la larghezza di una SCHEDA, e la scheda non c'è più: su uno schermo intero
     lasciavano il testo in una colonnina stretta in mezzo al buio (20/08). */
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 5vw, 2rem);
}
/* Tutto AL CENTRO (20/08). L'illustrazione ha il suo peso a sinistra — il lampione, le
   due figure — e il testo allineato a sinistra sotto una massa spostata faceva sembrare
   storta un'immagine che storta non è: «non lo è ma sembra». La simmetria toglie la
   domanda: una copertina è simmetrica, e il titolo sta in mezzo come su un libro. */
.copertina-testata,
.copertina-corpo { text-align: center; }
.copertina-testata { padding-top: clamp(1.5rem, 6vh, 3rem); }
.copertina-nome {
  margin: 0;
  font-family: var(--prosa);
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--inchiostro);
}
.copertina-luogo {
  margin: 0.6rem 0 0;
  font-family: var(--macchina);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ambra);
}
/* La lingua torna sulla soglia (19/08): il pannello dov'è la scelta sta DENTRO la partita,
   e chi non è ancora entrato non ce l'ha. Sta in un angolo dello SCHERMO, minuta: è una
   regolazione, non una domanda. */
.lingue-soglia {
  position: fixed;
  /* L'unica cosa fissa dello schermo senza la riserva del ritaglio: con `viewport-fit=cover`
     le due sigle finivano sotto l'orologio — e chi arriva in rete con un browser di
     un'altra lingua trova proprio lì la sua porta (R121). `max` come la testata e la
     pagina: dove il ritaglio non c'è, l'inset vale zero e restano i 0,6rem di prima. La
     riga nuda sopra è per i browser che `env()` non conoscono e butterebbero via tutta la
     dichiarazione. */
  top: 0.6rem;
  top: max(0.6rem, env(safe-area-inset-top));
  right: clamp(0.8rem, 4vw, 1.6rem);
  display: flex;
  gap: 0.15rem;
  z-index: 2;
}
.lingua-soglia {
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  background: none;
  border: 0;
  color: var(--attenuato);
  font-family: var(--macchina);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lingua-soglia:hover { color: var(--inchiostro); }
.lingua-soglia.scelto { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 0.3em; }

/* `.contenuto` è la classe dei pannelli, e porta con sé il proprio scorrimento: sulla
   copertina faceva scorrere le porte minute DENTRO una colonnina, con la sua barra in
   mezzo allo schermo. Qui a scorrere, se serve, è la porta intera. */
.copertina-corpo {
  padding-bottom: clamp(1.5rem, 6vh, 3rem);
  overflow: visible;
  max-height: none;
  flex: none;
}
.copertina-claim {
  white-space: pre-line;              /* l'a capo lo decide chi scrive, non la larghezza */
  /* `auto` a destra e a sinistra DEV'ESSERE qui: la riga in fondo al blocco lo rimetteva
     a zero, e il paragrafo — largo meno della colonna — restava attaccato a sinistra. Il
     titolo era in asse e questo no, di 69 pixel (misurato, 20/08). */
  margin: clamp(1rem, 4vh, 2rem) auto clamp(1.2rem, 4vh, 2rem);
  font-family: var(--prosa);
  font-size: clamp(1.12rem, 2.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--inchiostro);
  max-width: 64ch;                    /* la seconda riga sta intera: l'a capo è uno solo */
}

/* Un bottone solo, e si vede che è quello: l'unica cosa piena di questa schermata. */
.copertina-comincia {
  display: block;
  width: 100%;
  max-width: 34rem;                   /* abbastanza da tenere la riga in basso su UNA riga */
  margin-left: auto;
  margin-right: auto;                 /* al centro della colonna (chiesto guardandola, 20/08) */
  min-height: 44px;
  padding: 0.9rem 1rem;
  font-family: var(--prosa);
  color: var(--carta);
  background: var(--inchiostro);
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.copertina-comincia:hover { background: #F4EEE0; }
.copertina-comincia:disabled { opacity: 0.6; cursor: default; }
/* Il TITOLO è la cosa grande: è il nome di ciò che stai per aprire. Il verbo è la
   seconda, perché dice solo che cosa succede toccando (20/08). */
.copertina-comincia-caso {
  display: block;
  font-family: var(--prosa);
  font-size: 1.5rem;
  line-height: 1.15;
}
.copertina-comincia-verbo {
  display: block;
  margin: 0.15rem 0 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--macchina);
  opacity: 0.72;
}
.copertina-comincia-sotto {
  display: block;
  font-family: var(--macchina);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* Le porte minute: righe di testo, non bottoni. Chi le cerca le trova, chi non le cerca
   non le vede nemmeno — ed è giusto così, perché parlano di cose che il nuovo arrivato
   non ha ancora (un fascicolo, un altro caso). */
.porta-minuta {
  text-align: left;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: 0.15rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bordo);
  color: var(--attenuato);
  font-family: var(--prosa);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.porta-minuta::after {
  content: '›';
  margin-left: auto;
  font-size: 1.1rem;
  transition: transform 200ms ease;
}
.porta-minuta.aperta { color: var(--inchiostro); }
.porta-minuta.aperta::after { transform: rotate(90deg); }
.porta-minuta:hover { color: var(--inchiostro); }
/* L'indagine lasciata non è una scoperta da fare: è sua, e si vede subito. */
.porta-minuta.torna { color: var(--ambra); margin-top: 1.1rem; }
.porta-minuta.torna::after { content: '↩'; }

/* Sul telefono la fascia è quasi quadrata, quindi il taglio è ORIZZONTALE: l'immagine si
   vede da una finestra stretta, e centrandola la figura finiva a sinistra col lato buio
   del disegno a destra (segnalato dal telefono, 20/08). La finestra si sposta a sinistra
   e la figura torna in mezzo. */
@media (max-width: 40rem) {
  .copertina-arte { object-position: 42% 10%; }
}

/* IL PIEDE DELLA SOGLIA (indurimento beta, 12/09). Righe di servizio in fondo alla porta:
   che cosa c'è dietro — un'intelligenza artificiale dentro un caso d'autore (02/10) —, il
   cookie tecnico — che è cortesia e verità insieme — e, solo quando il server manda
   l'indirizzo, dove si dice che qualcosa non va. Allineate a sinistra come le porte
   minute (il centro è del titolo e della promessa, non delle note a piè di pagina), corpo
   minore, il grigio delle cose di servizio, e staccate da «Comincia» abbastanza da non
   sembrare un secondo invito. */
.copertina-piede {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
  text-align: left;
  color: var(--attenuato);
  font-size: 0.78rem;
  line-height: 1.55;
}
/* `pretty`: la riga dell'intelligenza artificiale è lunga, e andando a capo lasciava una
   parola sola sotto («fatti.»). Chi non lo conosce lo ignora, e va a capo come prima. */
.copertina-piede p { margin: 0; text-wrap: pretty; }
.copertina-piede p + p { margin-top: 0.6rem; }
/* Un collegamento si riconosce dalla FORMA, non dal colore: l'ambra qui direbbe «novità,
   guarda qui», che è l'unica cosa che l'ambra dice in questa interfaccia (§5.1). La riga
   sotto lo dichiara toccabile, e il grigio sale a inchiostro pieno perché è l'unica cosa
   di queste due righe su cui si può davvero premere. */
/* E sta su una RIGA SUA. Di seguito alla nota, il nome del collegamento ne ripeteva le
   ultime parole — «…nel thread della beta, citando il numero del fascicolo. Il thread della
   beta» — che letto ad alta voce è un inciampo. A capo, e con il segno delle porte minute,
   smette di essere il seguito della frase e diventa quello che è: dove si va. */
.piede-link {
  /* 44px di altezza anche qui: è l'unica cosa toccabile di queste due righe, ed è l'ultima
     della pagina — il posto dove il pollice arriva peggio (§9). L'aria la prende sopra e
     sotto il testo, che in fondo alla soglia non dà fastidio a nessuno. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
/* Lo spazio va messo col margine, non dentro il `content`: in una riga flex lo spazio in
   testa alla stringa si perde, e il segno finiva attaccato all'ultima lettera. */
.piede-link::after { content: '›'; margin-left: 0.35rem; text-decoration: none; }
.piede-link:hover { color: var(--ambra); }

/* LA STRADA PER SEGNALARE fuori dalla soglia (24/10): in fondo alla guida e al pannello
   Partita, e sotto il colophon del caso chiuso. La stessa riga del piede, con la voce grigia
   delle cose di servizio; il collegamento porta la sua forma (§5.1). */
.segnalazione {
  margin: 0;
  color: var(--attenuato);
  font-size: 0.9rem;
  line-height: 1.55;
}
/* Nel piede della soglia è una riga come le altre del piede: stesso corpo, stesso grigio. */
.copertina-piede .segnalazione { font-size: inherit; color: inherit; }
/* Sotto «Fine del caso» sta centrata e minuta, come una nota in calce al colophon. */
.segnalazione.dopo-la-fine {
  margin: -1rem 0 2rem;
  text-align: center;
  font-size: 0.78rem;
}

/* IL TETTO DEL GIORNO SULLA PORTA (24/10): al posto del bottone, la riga in voce di gioco.
   Non è un bottone e non ne ha la forma: cornice sottile, corsivo, al centro dove sarebbe
   stato «Comincia». */
.copertina-piena {
  max-width: 28rem;
  margin: 1rem auto 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bordo);
  text-align: center;
  font-family: var(--prosa);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--inchiostro);
}

.cassetto { padding: 0.2rem 0 0.9rem; }
.cassetto .ingresso-caso { width: 100%; margin-bottom: 0.4rem; }
.cassetto .guida .sezione-pannello + .sezione-pannello { margin-top: 1.1rem; }
.cassetto .ingresso-sotto { margin-top: 0.3rem; }

/* Dietro la copertina non si vede il gioco. Gli arnesi del racconto — la testata coi tre
   pannelli, il quadrante, la casella — comparivano dietro il velo a chi non era ancora
   entrato: mostrano una partita che non esiste, e tolgono alla porta il suo silenzio
   (visto in rete, 19/08). Tornano quando il caso si apre. */
body.soglia .testata,
body.soglia .barra { opacity: 0; pointer-events: none; visibility: hidden; }  /* visibility: via anche dal giro del Tab e dal lettore di schermo (2026-08-22) */

/* ---------- A TASTIERA APERTA: le parole prima degli arnesi (§9) ---------- */
/* Su un telefono con la tastiera fuori restano ~550px per leggere, e la testata se ne
   prendeva 300: miniatura, quattro icone tonde, quadrante e TRE righe di stato. Chi
   scrive in quel momento vuole le PAROLE — gli arnesi tornano appena chiude la tastiera,
   e i dati che spariscono stanno tutti nei pannelli (posta del motore, 22/08). */
body.tastiera .miniatura,
body.tastiera .pannelli,
body.tastiera #bottonePartita,
body.tastiera #bottoneDifficolta { display: none; }
body.tastiera .testata {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
/* Lo stato resta, ma in UNA riga: dove sei e chi c'è sono l'orientamento minimo, e
   perderli del tutto vorrebbe dire scrivere al buio. */
body.tastiera .riga-viva {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding-top: 0;
  font-size: 0.68rem;
  line-height: 1.5;
  white-space: nowrap;
  /* Si SCORRE, non si tronca: troncando, «con te: Watson, Edith Pe…» nasconde proprio la
     cosa che si voleva sapere, e non c'è modo di vederla (test mobile, 23/08). Lo
     scorrimento è dentro la riga: la pagina non si muove di lato (§9). */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
body.tastiera .riga-viva::-webkit-scrollbar { display: none; }
body.tastiera .riga-viva .gruppo {
  display: inline;
  flex: 0 0 auto;      /* non si stringono: si scorre per vederli tutti */
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}
/* La tavola nel racconto non si prende mezzo schermo mentre si scrive.
   IL FOGLIO SI STRINGE CON LA STAMPA: mettere un tetto all'altezza e lasciare il riquadro
   largo quanto lo schermo rimpicciolisce il disegno e NON la carta — e la montatura viene
   fuori larghissima ai fianchi e sottile sopra e sotto, cioè la cornice distorta vista dal
   telefono (22/08). `fit-content` fa sì che la carta segua la stampa, e i quattro margini
   restino quelli di sempre. */
body.tastiera .tavola {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.tastiera .tavola img { max-height: 22vh; width: auto; }

/* ---------- la copertina del caso, nella scheda «Le indagini» ---------- */
/* Una stampa in un catalogo, non una figurina: la carta e il bordo strappato sono gli
   stessi delle tavole (§2c), in piccolo. Il file è nudo — se un domani arrivasse con la
   sua cornice cotta dentro, si vedrebbe subito, ed è giusto così. */
.copertina-caso {
  flex: none;
  display: block;
  width: 96px;
  margin-right: 0.9rem;
  align-self: center;
}
.copertina-caso.montata {
  background-color: var(--montatura);
  background-image: url('/veste/carta.webp');
  background-size: cover;
  background-blend-mode: overlay;
  padding: 3px;
}
.copertina-caso img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: url('/veste/montatura.webp');
  mask-image: url('/veste/montatura.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
/* La riga del caso diventa una fila: stampa a sinistra, titolo e servizio a destra. */
#contenutoPannello .voce.ingresso-caso {
  display: flex;
  align-items: center;
  text-align: left;
}
@media (max-width: 30rem) {
  .copertina-caso { width: 72px; margin-right: 0.7rem; }
}

/* ---------- MODALITÀ POP: i tre bottoni (§8.9) ---------- */
/* Dicono cosa si può fare, e stanno DENTRO la barra: così si ritirano da soli quando la
   tastiera è aperta, come tutto il resto (§9). Non sono chip di suggerimento — quelli
   sono di Watson e parlano in corsivo: questi sono bottoni, e si vedono. */
.mosse {
  display: flex;
  flex-wrap: wrap;       /* la cornice del metodo va su una riga sua; i tre bottoni, a base zero, non vanno mai a capo */
  gap: 0.5rem;
  padding: 0.55rem clamp(0.75rem, 5vw, 2rem) 0;
  max-width: var(--colonna);
  margin: 0 auto;
  width: 100%;
}
.mossa {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  background: none;
  border: 1px solid var(--bordo);
  color: var(--inchiostro);
  font-family: var(--macchina);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.mossa:hover { border-color: var(--inchiostro); color: var(--ambra); }
/* ---------- LA GIORNATA (§8.15) ---------- */
/* La riga sopra la casella: CHE COSA TI ASPETTA, in una riga sola che non va mai a capo.
   Su 360 pixel ci stanno poco più di quaranta caratteri, quindi il nome della cosa tiene
   il suo spazio e la coda — quando, dove — si accorcia coi puntini: il resto sta nel
   foglio, a un tocco. Non è un bottone da premere per far succedere qualcosa: apre un
   foglio, come le icone dei pannelli, e si veste come la riga viva della testata. */
.giornata-riga {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;                  /* area di tocco (§9) */
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  color: var(--attenuato);
  font-family: var(--prosa);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.giornata-riga .giornata-che {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--inchiostro);
}
.giornata-riga .giornata-coda {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
.giornata-riga:hover .giornata-che { color: var(--ambra); }
/* …E DICE CHE SI APRE (23/09, utente: «bisognerebbe far vedere bene che si può cliccare»).
   Il segno è quello delle porte minute della copertina — «di là c'è altro» — a destra, e
   centrato sull'altezza della riga, che sul telefono va a capo e ne occupa due. */
.giornata-riga {
  position: relative;
  padding-right: 1.4rem;
}
.giornata-riga::after {
  content: '›';
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--attenuato);
}
.giornata-riga:hover::after { color: var(--inchiostro); }
/* SUL TELEFONO LA RIGA VA A CAPO, e non è una resa: in una riga sola da 360 pixel ci
   stanno quarantacinque caratteri, e «Il rapporto del dottore della divisione» più «a
   Scotland Yard» non ci stanno — si accorciavano coi puntini TUTT'E DUE, e due metà
   troncate non dicono niente. A capo stanno intere, e l'altezza non cambia: due righe
   corte fanno i 44 pixel che il bersaglio aveva già. */
@media (max-width: 30rem) {
  .giornata-riga {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
  }
  .giornata-riga .giornata-che,
  .giornata-riga .giornata-coda { flex: 0 0 auto; }
}
/* L'ora è venuta e non l'hai ancora guardata: ambra, che qui vuol dire quello che vuol
   dire sempre — «novità, guarda qui» (§5.1). Si spegne aprendo il foglio, come il segno
   sul taccuino: un'ambra che resta accesa per dieci turni non dice più «adesso». */
.giornata-riga.adesso .giornata-che,
.giornata-riga.adesso .giornata-coda { color: var(--ambra); }

/* Il foglio. In alto il tempo della vittima, in basso chi ti aspetta, in fondo il conto. */
.giornata-ora {
  margin: 0 0 1.2rem;
  font-family: var(--macchina);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--attenuato);
}
/* La linea del tempo: un filo verticale con una perla per casella. PIENA = un fatto, e la
   perla è piena; VUOTA = una domanda, e la perla è cava. I buchi si devono vedere buchi —
   sono il «che cosa mi manca», ed è la ragione per cui questo foglio esiste. */
.linea-tempo {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
  border-left: 1px solid var(--bordo);
}
.casella {
  position: relative;
  padding: 0 0 1rem;
}
.casella:last-child { padding-bottom: 0; }
.casella::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: 0.42rem;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  border-radius: 50%;
  border: 1px solid var(--attenuato);
  background: var(--foglio);   /* copre il filo: la perla cava è un anello, non un buco */
}
.casella.piena::before { background: var(--attenuato); }
.casella-quando {
  display: block;
  font-family: var(--macchina);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenuato);
}
.casella-testo {
  display: block;
  margin-top: 0.15rem;
  color: var(--inchiostro);
}
/* Una casella vuota non è un fatto a metà: è una domanda. Si legge come si leggono le
   cose che ancora non si sanno — in corsivo e attenuata — e la perla resta cava. */
.casella.vuota .casella-testo {
  font-style: italic;
  color: var(--attenuato);
}

/* ---------- LA STRISCIA DELLA SERATA (roadmap grafica §3) ---------- */
/* Le stesse caselle della linea verticale, ma ORIZZONTALI e nell'ordine del tempo: e' la
   forma del caso, non del taccuino. Il filo si disegna SOLO fra due piene consecutive, ed
   e' tutto il punto — la ricostruzione si vede farsi da sinistra a destra, e dove manca un
   pezzo il filo non c'e'. Senza pittogrammi: vengono dopo, se la striscia convince. */
.striscia {
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 0.3rem 0 0.9rem;
  list-style: none;
  /* LA STRISCIA NON SPINGE IL FOGLIO. Cinque riquadri da 144px sono 800px di contenuto, e
     senza questa riga quella larghezza risaliva fino al foglio: su un telefono da 375 il
     foglio si apriva largo 576 (il suo massimo), usciva dallo schermo e si portava fuori la
     × per chiudere. `contain: inline-size` dice che la larghezza della striscia la decide
     chi la contiene, non quello che c'è dentro: prende la colonna che ha, e scorre. */
  contain: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.striscia .riquadro {
  position: relative;
  flex: 0 0 9rem;             /* ~144px: sei caselle sono due schermate di telefono */
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.striscia .casella-quando {
  display: block;
  font-family: var(--macchina);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenuato);
  min-height: 2.2em;          /* due righe: i riquadri restano allineati anche con ore lunghe */
}
.striscia .casella-testo {
  display: block;
  flex: 1;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--bordo);
  color: var(--inchiostro);
  font-size: 0.88rem;
  line-height: 1.35;
}
/* Una casella vuota non e' un fatto a meta': e' una domanda. Tratteggio e corsivo
   attenuato, come le cose che ancora non si sanno. */
.striscia .vuota .casella-testo {
  border-style: dashed;
  font-style: italic;
  color: var(--attenuato);
}
/* SU SCHERMO LARGO LA STRISCIA STA INTERA (proposta §3). Il foglio dei pannelli e' largo
   36rem, e cinque riquadri da 9rem piu' i fili sono 50: si allarga solo quando mostra la
   striscia, e i riquadri si dividono lo spazio invece di tenere la misura del telefono. Fino
   a sei caselle stanno tutte; oltre, si scorre, che e' quello che succede sul telefono. */
@media (min-width: 40rem) {
  .foglio.con-striscia { max-width: min(96vw, 58rem); }
  .foglio.con-striscia .striscia .riquadro { flex: 1 1 8rem; }
}

/* LA CASELLA VUOTA CHE SI TOCCA (22/09, solo a Mrs Hudson): e' un bottone, ma resta una
   casella — stesso tratteggio, stesso corsivo per la domanda — e si riconosce dalla FORMA:
   sotto la domanda la frase che il tocco scrivera', col segno delle porte minute. Niente
   colore: l'ambra qui vuol gia' dire «si e' riempita» (§5.1). */
button.casella-testo {
  width: 100%;
  min-height: 44px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.casella-testo:hover,
button.casella-testo:focus-visible { border-color: var(--inchiostro); }
.casella-domanda { display: block; }
.casella-pista {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
}
/* Il nome della cosa, come le ore sopra i riquadri: piccolo, maiuscoletto, di servizio. */
.pista-nome {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--macchina);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenuato);
}
/* E la frase nella forma di una cosa che si tocca: una cornice piena e il chevron, cioè la
   forma dei tre bottoni di Mrs Hudson e delle porte minute. Non il colore: l'ambra, qui,
   vuol già dire «si è riempita» (§5.1). */
.pista-frase {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bordo);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--inchiostro);
}
.pista-frase::before { content: '› '; color: var(--attenuato); }
button.casella-testo:hover .pista-frase,
button.casella-testo:focus-visible .pista-frase { border-color: var(--inchiostro); }
/* Nella linea verticale (i casi senza striscia) la stessa cosa, senza riquadro intorno. */
.linea-tempo button.casella-testo {
  padding: 0;
  border: 0;
  color: inherit;
}

/* IL FILO, e solo fra due PIENE consecutive. Sta nel `gap`, alla stessa altezza dei
   riquadri — non sotto le ore, che sono alte due righe. */
.striscia .piena:has(+ .piena)::after {
  content: '';
  position: absolute;
  top: calc(2.2em + 0.35rem + 1.5rem);
  left: 100%;
  width: 1.4rem;
  border-top: 1px solid var(--bordo);
}
/* LA CASELLA CHE SI E' RIEMPITA da quando non guardi: ambra, che qui vuol dire quello che
   vuol dire sempre — «novita', guarda qui» (§5.1) — e si spegne appena l'hai guardata,
   come il segno sul taccuino. E' la ricompensa del pezzo: il caso che si vede crescere. */
.striscia .riquadro.nuovo .casella-testo { border-color: var(--ambra); }
.striscia .riquadro.nuovo .casella-quando { color: var(--ambra); }



/* L'ora è venuta: la riga si accende, ma solo nella CODA — «è adesso · a Scotland Yard».
   Il nome della cosa resta inchiostro: l'ambra sta sulla notizia, non sull'etichetta.
   (Le voci d'agenda sono `.voce` come quelle della mappa e delle tasche: quando il motore
   manda la mossa sono bottoni e si vedono tali, quando non la manda sono testo.) */
.giornata .voce.adesso .quando { color: var(--ambra); }

.giornata-conto {
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordo);
  font-family: var(--macchina);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attenuato);
}

/* Il puntino: qualcosa di nuovo da guardare è comparso in questo turno. Stesso segno del
   taccuino — un punto d'ambra in alto a destra — perché vuol dire la stessa cosa. */
.mossa { position: relative; }
.mossa.novita::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ambra);
}
/* La cornice sotto i tre bottoni: che cosa sono, in due righe minute. Non è un avviso e non
   chiede niente — il grigio delle cose di servizio, e la larghezza intera della barra. */
.mosse-cornice {
  flex: 1 0 100%;
  margin: 0;             /* lo stacco lo dà il `gap` della fila: un margine in più lo raddoppiava */
  font-family: var(--prosa);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--attenuato);
}
/* …e la stessa cosa in cima al caso in domande, dove c'è più aria. */
.domande-cornice {
  margin: 0 0 1.4rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--attenuato);
}

/* Le cose già guardate restano, ma non gridano. */
.scelte-mosse .voce.gia-guardato { opacity: 0.6; }
.scelte-mosse .voce.gia-guardato:hover { opacity: 0.85; }
body.tastiera .mosse { display: none; }

/* MENTRE IL TURNO È IN VOLO i bottoni che MANDANO si spengono (§8.9): la casella no — chi
   scrive avanti si accoda — ma un bottone toccato due volte fa partire due mosse, e a un
   utente sono partite due accuse. Spento si vede: un bersaglio che non risponde e non lo
   dice è peggio di un bersaglio assente. */
body.turno .mossa,
body.turno .scelte-mosse .voce.carica,
body.turno .caso-domande .voce.carica {
  opacity: 0.45;
  pointer-events: none;
}

/* Il foglio delle scelte: sul telefono sale dal basso, dove arriva il pollice; sul
   computer resta dov'era, che lì il centro va benissimo. */
@media (max-width: 40rem) {
  .foglio.dal-basso {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 70vh;
    max-width: none;
    margin: 0;
    border-radius: 0;
    animation: sale-dal-basso 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  /* Il foglio arriva al bordo dello schermo, e sotto il bordo c'è la barretta di casa:
     l'ULTIMA voce — 44px come le altre — cadeva lì sotto, dove lo scorrimento se lo prende
     il telefono e non il gioco (R122). La riserva la porta il contenuto che SCORRE, non il
     foglio: così sotto l'ultima voce c'è aria e non un bersaglio dimezzato, e lo sfondo
     copre l'inset lo stesso perché il foglio sta a `bottom: 0`. Somma e non `max`, come la
     barra dell'input: qui la riserva si aggiunge all'imbottitura, non la sostituisce. */
  .foglio.dal-basso .contenuto {
    padding-bottom: 1.3rem;
    padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
  }
}
@keyframes sale-dal-basso {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .foglio.dal-basso { animation: none; }
}
.scelte-mosse .voce { width: 100%; }

/* I SOSPETTI (§8.13): un nome barrato resta in lista, e sotto — non barrata — la riga che
   dice cosa l'ha escluso. Barrare e togliere non sono la stessa cosa: il primo è un pezzo
   d'indagine, il secondo è una perdita di memoria. */
/* L'ELENCO PUNTATO delle voci nei pannelli (§8.10, 26/08): voci impilate, tutte in
   corsivo e senza segno davanti, si leggevano come un testo unico. Il puntino dice dove
   comincia una voce e dove finisce l'altra, e lo spazio fra l'una e l'altra fa il resto.
   Il puntino è attenuato: serve a dividere, non a chiamare — chi chiama è l'ambra. */
.lista-voci {
  list-style: disc;
  margin: 0.15rem 0 0;
  padding-left: 1.05rem;
}
.lista-voci > li { margin: 0.45rem 0 0; }
.lista-voci > li::marker { color: var(--bordo); font-size: 0.8em; }
.lista-voci > li > .vuoto { margin: 0; }

/* I gruppi in coda alle domande si staccano con un FILETTO, non con l'aria: attaccati
   all'ultima domanda si leggevano come una sua risposta, e l'aria da sola non bastava a
   dire «qui comincia un'altra cosa». È lo stesso filetto che divide le domande fra loro
   (`.domanda-testa`, `border-top`) e lo stesso che divide i gruppi del taccuino: nel
   pannello esiste una riga di divisione sola, e chi la vede sa già che cosa vuol dire.
   Le misure sono quelle dei gruppi fratelli, copiate apposta: due divisioni identiche a
   occhio ma diverse di tre pixel sono peggio di due divisioni diverse. */
.caso-domande .sezione-pannello {
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
}
.sospetto + .sospetto { margin-top: 0.5rem; }
.sospetto-testo { font-style: normal; }
.sospetto-testo.barrato { text-decoration: line-through; opacity: 0.75; }
.sospetto-perche { margin-left: 1rem; }

/* Il pallino delle voci comparse dall'ultima apertura: lo stesso ambra del taccuino, e la
   stessa promessa — «guarda qui», mai «toccami» (§5.1). */
.caso-domande .nuovo::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.45rem;
  vertical-align: 0.1em;
  border-radius: 50%;
  background: var(--ambra);
}

/* ---------- MODALITÀ POP: il caso in domande (§8.10) ---------- */
/* Il taccuino è un archivio; questo si guarda in tre secondi. Le domande stanno in fila,
   con la spunta a sinistra; toccandone una si apre quel che si è trovato e — se è ancora
   aperta — dove si può cercare. */
.caso-domande .domanda + .domanda { margin-top: 0.2rem; }
.domanda-testa {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bordo);
  color: var(--inchiostro);
  font-family: var(--prosa);
  font-size: 1.02rem;
  text-align: left;
  cursor: pointer;
}
.spunta { flex: none; width: 1em; height: 1em; align-self: center; opacity: 0.75; }
.domanda.chiusa .spunta { color: var(--ambra); opacity: 1; }
.domanda.chiusa .domanda-testo { color: var(--attenuato); }
.domanda-testo { flex: 1; min-width: 0; }
.domanda-stato {
  flex: none;
  font-family: var(--macchina);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--attenuato);
}
.domanda.chiusa .domanda-stato { color: var(--ambra); }
.domanda-corpo { padding: 0 0 0.7rem 1.6rem; }
.domanda-corpo .sotto-titolo { margin-top: 0.6rem; }
.domanda-corpo .vuoto { font-style: normal; }

/* L'ultima casella: «Chi è stato?». Non è una domanda che si spunta — è quella che chiude
   il caso — e si vede: il filetto sopra è d'ambra, e i nomi stanno in fila come scelte. */
.domanda.accusa { margin-top: 1.2rem; }
.accusa-testa {
  margin: 0;
  padding: 0.9rem 0 0.5rem;
  border-top: 1px solid var(--ambra);
  color: var(--ambra);
  font-family: var(--prosa);
  font-size: 1.06rem;
}
.domanda.accusa .voce { width: 100%; }

/* ---------- il punto della situazione (§8.11) ---------- */
/* «Dove eravamo rimasti»: si legge riaprendo una partita, una volta sola, in coda al
   racconto. Non è prosa e non è un avviso di sistema: è una nota di servizio in voce
   piana, e si veste come tale — attenuata, con un filetto sopra che la stacca dal
   racconto vero. */
.riassunto {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bordo);
  color: var(--attenuato);
  font-family: var(--prosa);
  font-size: 0.96rem;
  line-height: 1.6;
}
.riassunto-titolo {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--macchina);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* La risposta d'autore, sopra le prove: è la deduzione detta in una riga, e si legge
   come tale — inchiostro pieno, non attenuata come le voci che la provano. */
.domanda-risposta {
  margin: 0.5rem 0 0;
  color: var(--inchiostro);
  font-family: var(--prosa);
  font-size: 1rem;
  line-height: 1.55;
}

/* ---------- LA PRESENTAZIONE: tre schermate, la prima volta (§8.12) ---------- */
/* Stessa veste della copertina — è la stessa porta, un passo prima — con il titolo più
   piccolo (qui il nome del gioco l'ha già detto la pagina) e il testo che è la cosa da
   leggere, non lo sfondo di un bottone. */
.foglio.presentazione .copertina-testata { padding-top: clamp(1.2rem, 5vh, 2.4rem); }
.presentazione-titolo {
  margin: 0;
  font-family: var(--prosa);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--inchiostro);
}
.presentazione-corpo { text-align: left; }
.presentazione-testo {
  margin: clamp(0.8rem, 3vh, 1.4rem) 0 clamp(1.2rem, 4vh, 2rem);
  font-family: var(--prosa);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.65;
  color: var(--inchiostro);
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;      /* il BLOCCO sta in mezzo, il testo resta allineato a sinistra:
                              un paragrafo lungo centrato riga per riga non si legge */
}
/* I tre punti dicono quanto manca: è la differenza fra tre schermate e un testo che non
   finisce mai. */
.presentazione-passi {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}
.presentazione-passi .passo {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bordo);
}
.presentazione-passi .passo.qui { background: var(--ambra); }
/* LA SCALA nella seconda schermata: i quattro livelli come li incontrerai un momento
   dopo sulla porta — stesso segno, una riga per livello. Il nome è un `span` vestito da
   chip: qui non si sceglie, si guarda. */
.presentazione-scala {
  max-width: 54ch;
  margin: 0 auto clamp(0.6rem, 2vh, 1.2rem);
}
.presentazione-livello {
  margin: 0 0 0.55rem;
  font-family: var(--prosa);
  font-size: clamp(0.95rem, 2.2vw, 1.02rem);
  line-height: 1.55;
  color: var(--attenuato);
}
.presentazione-livello .ingresso-grado {
  margin-right: 0.45rem;
  min-height: 32px;              /* non è un bersaglio: la regola del dito qui non vale */
  padding: 0.2rem 0.65rem;
  color: var(--inchiostro);
  border-color: var(--inchiostro);
  cursor: default;
}
/* Il piede: indietro · i punti · salta. I punti restano al centro della riga, e per
   restarci hanno bisogno che i due lati pesino uguale — per questo «Indietro» sulla prima
   schermata diventa invisibile, non sparisce. */
.presentazione-piede {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
/* I due lati pesano uguale (`flex: 1 1 0`) e i punti prendono lo spazio che serve: così
   restano al CENTRO vero della riga, e non si spostano di otto pixel perché «Indietro» è
   più lungo di «Salta» — o perché una traduzione li scambia di lunghezza. */
.presentazione-piede .presentazione-passi { flex: 0 0 auto; margin-top: 0; }
/* LE MOSSE D'ESEMPIO (§8.12). Portano il segno della casella — l'etichetta di chi scrive e
   il chevron — perche' devono insegnare la FORMA di cio' che si scrive. Non sono bottoni e
   non lo sembrano: niente cornice, niente bersaglio, nessuna manina. Allineate a SINISTRA
   dentro una schermata centrata: una colonna di cose scritte si legge come una colonna. */
.presentazione-mosse {
  margin: 1.4rem auto 0;
  max-width: 26rem;
  text-align: left;
}
/* L'etichetta e la frase stanno in due colonne, non in fila: su 360 pixel la seconda mossa
   («signora, chi ha trovato suo marito?») va a capo, e a capo tornava sotto l'etichetta,
   rompendo la colonna. Una griglia a due colonne fa quello che fa un rientro sporgente,
   senza doverne misurare la larghezza a mano. */
.presentazione-mossa {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  margin: 0 0 0.45rem;
  color: var(--inchiostro);
}
.presentazione-chi {
  font-family: var(--macchina);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--attenuato);
  margin-right: 0.45rem;
  white-space: nowrap;
}
/* La regola sotto gli esempi, e la chiusa sotto il dialogo: e' la frase che spiega perche'
   gli esempi sono fatti cosi'. Attenuata e staccata: si legge dopo, non insieme. */
.presentazione-regola {
  margin: 1.1rem auto 0;
  max-width: 26rem;
  color: var(--attenuato);
  font-style: italic;
}
.presentazione-regola.citta { margin-top: 0.7rem; }

/* IL DIALOGO: due scambi, con l'etichetta di chi parla sopra la battuta. Stessa grammatica
   del racconto — chi parla in maiuscoletto attenuato, le parole fra virgolette — cosi' chi
   lo vede qui lo riconosce dieci secondi dopo, nella partita. */
.presentazione-dialogo {
  margin: 1.2rem auto 0;
  max-width: 26rem;
  text-align: left;
}
.presentazione-battuta { margin: 0 0 0.9rem; }
.presentazione-battuta .presentazione-chi { display: block; margin: 0 0 0.15rem; }
.presentazione-dice { color: var(--inchiostro); }
/* La seconda coppia e' quella che APRE: le parole di chi risponde bene stanno in piena luce,
   la prima risposta — cortese e vuota — resta un gradino indietro. La differenza si vede
   prima di leggerla, ed e' tutta la lezione della schermata. */
.presentazione-battuta:nth-child(2) .presentazione-dice { color: var(--attenuato); }

.presentazione-piede .porta-minuta {
  flex: 1 1 0;
  width: auto;
  border-top: 0;
  padding: 0.5rem 0.2rem;
  margin-top: 0;
  font-size: 0.88rem;
}
.presentazione-piede .porta-minuta::after { content: none; }
/* Una porta che torna INDIETRO non porta il chevron delle altre: quel «›» vuol dire
   «di là c'è altro», e su un ritorno indica la direzione sbagliata. Il segno sta davanti
   e guarda dall'altra parte. */
.porta-minuta.indietro::after { content: none; }
.porta-minuta.indietro::before { content: '‹'; margin-right: 0.45rem; opacity: 0.7; }
.presentazione-piede .indietro { justify-content: flex-start; text-align: left; }
.presentazione-piede .indietro::before { content: none; }
.presentazione-piede .salta { justify-content: flex-end; text-align: right; }
/* «Salta» c'è ma non invita: chi ha fretta lo trova, chi legge non lo nota. */
.porta-minuta.salta {
  justify-content: center;
  border-top: 0;
  margin-top: 0.3rem;
  font-size: 0.88rem;
}
.porta-minuta.salta::after { content: none; }

/* L'ICONA DI WATSON dentro una frase: la stessa che sta in fondo alla pagina, in
   miniatura e col suo cerchio — se perdesse il cerchio diventerebbe un'altra cosa, e la
   frase manderebbe a cercare un disegno che non esiste. */
.icona-watson {
  width: 1.5em;
  height: 1.5em;
  padding: 0.12em;
  vertical-align: -0.45em;
  margin: 0 0.12em;
  color: var(--attenuato);
  border: 1px solid var(--bordo);
  border-radius: 50%;
}