/* ============================================================
   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;
}

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

@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);

  /* 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%;
}

/* ---------- 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. */
.tratteggio {
  background-color: #221D19;
  background-image: repeating-linear-gradient(45deg,
      rgba(232, 224, 208, 0.045) 0 6px, rgba(232, 224, 208, 0) 6px 12px);
}

.tavola {
  position: relative;                  /* il velo dell'arrivo si posa qui sopra */
  margin: 0.4rem auto 2.1rem;
  width: 100%;
  aspect-ratio: 3 / 2;                 /* proporzioni dichiarate: la pagina non salta dopo */
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: #221D19;
  background-image: repeating-linear-gradient(45deg,
      rgba(232, 224, 208, 0.045) 0 6px, rgba(232, 224, 208, 0) 6px 12px);
  border: 1px solid var(--bordo);
  color: var(--attenuato);
  transition: filter 400ms ease, opacity 400ms ease;
}

/* La tavola tiene le proporzioni vere delle illustrazioni (3:2): entra nel racconto quando
   si arriva in un luogo, quindi non ruba spazio permanente e non va ritagliata. */

/* 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 di carta 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. */
.tavola.appena.illustrato::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--carta);
  animation: inchiostro 900ms ease-out 1 forwards;
}

@keyframes inchiostro {
  from { opacity: 0.85; }
  to   { opacity: 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; }

/* 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; }

/* 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; }

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

/* 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); }
.battuta.giocatore.riprendibile .parlante::after {
  content: ' · tocca per riprenderla';
  color: var(--attenuato);
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* 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;
}

.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: #221D19;
  background-image: repeating-linear-gradient(45deg,
      rgba(232, 224, 208, 0.045) 0 6px, rgba(232, 224, 208, 0) 6px 12px);
}

/* 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).
   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. */
@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;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--bordo);
  background-color: #221D19;
  background-image: repeating-linear-gradient(45deg,
      rgba(232, 224, 208, 0.045) 0 6px, rgba(232, 224, 208, 0) 6px 12px);
}

.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: sotto c'è la sottolineatura a puntini (§5.3) */
.indizio {
  color: var(--ambra);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}

/* 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; text-decoration-color: transparent; }
  to   { color: var(--ambra); text-decoration-color: currentColor; }
}

/* 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 */

.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);
}

.avviso { color: var(--attenuato); font-style: italic; }

/* ---------- 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. */
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); }
/* «Il Ken Burns si ferma»: l'immobilità improvvisa è l'allarme, e non costa una parola. */
body.setpiece .tavola.respira.illustrato img { animation: none; }

/* «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); }
.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;
}

.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. */
.pannello { position: relative; }
.pannello.novita::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambra);
}

/* 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. */
.etichetta {
  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;
}

#input::placeholder { color: var(--attenuato); opacity: 0.6; }

/* 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[hidden] { display: none; }
.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);
}

.velo[hidden] { display: none; }

.foglio {
  width: 100%;
  max-width: 36rem;
  max-height: min(80dvh, 44rem);
  display: flex;
  flex-direction: column;
  background: #1F1A16;
  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;
  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[hidden] { display: none; }
.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;
  color: var(--attenuato);
  opacity: 0.75;
}

/* 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); }
.voce[disabled] { cursor: default; color: var(--inchiostro); }
.voce[disabled]:hover { border-left-color: transparent; background: transparent; }

.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; }
}


/* ---- 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).
   Ma flex senza allineamento incolla il foglio a sinistra: si apriva di lato. */
.velo.ingresso {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
/* `.velo[hidden]` sta più in su e ha la stessa forza: senza questa riga, la regola qui
   sopra vincerebbe per posizione e la schermata resterebbe a schermo anche da chiusa. */
.velo.ingresso[hidden] { display: none; }
.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); }
.ingresso-aiuto { color: var(--attenuato); font-size: 0.9rem; margin: 0 0 0.5rem; }
.ingresso-casi { display: flex; flex-direction: column; gap: 0.5rem; }
.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); }
.ingresso-gradi { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* 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). */
@media (max-width: 30rem) {
  .ingresso-gradi { flex-direction: column; align-items: stretch; }
  .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; }

.riga-salvataggio { display: flex; gap: 0.5rem; align-items: stretch; }
.riga-salvataggio .voce { flex: 1; min-width: 0; }
.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; }

/* Il caso che stai giocando non si tocca: è segnato, non offerto. */
#contenutoPannello .voce.ingresso-caso.qui { color: var(--ambra); cursor: default; }

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

/* Ciò che è nascosto è nascosto, qualunque display gli abbiamo dato. */
[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; }