Collaudo in tre modalità (desktop, metà schermo, smartphone) e fumetti che non finiscono più a colonna

- video/collaudo.mjs: tutta la soluzione in tre misure di schermo, una schermata a ogni passo e a ogni battuta,
  e i difetti trovati da soli (bersagli piccoli o coperti, fumetti fuori scena o sotto i pulsanti, testi tagliati)
- video/COLLAUDO.md: le tre scalette e i difetti trovati
- fumetto a larghezza naturale (vicino al bordo destro si stringeva a colonna), posizionato in pixel sotto i
  pulsanti in alto; sul telefono più largo e più piccolo
- la fessura più grande, con Andrea alla sua sinistra

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ApqNBvNbNCwXqR2RLo8QJh

video/COLLAUDO.md

@@ -0,0 +1,75 @@
+# Collaudo dell'interfaccia: tre scalette, tre modalità
+
+Lo scopo è trovare i difetti che si vedono solo giocando: clic che non arrivano, testi sovrapposti o tagliati, fumetti
+fuori posto. Le tre scalette percorrono la stessa partita, cioè la soluzione completa del primo capitolo
+(`src/story/solution.js`), ognuna con la sua misura di schermo e i suoi punti da guardare.
+
+Il giro automatico si lancia con `node video/collaudo.mjs` (oppure `node video/collaudo.mjs telefono` per una modalità
+sola). Fa una schermata a ogni passo e a ogni battuta in `video/out/collaudo/<modo>/` e scrive l'elenco dei difetti
+trovati da solo in `video/out/collaudo/DIFETTI.md`. Cartella esclusa da git. Le stesse scalette servono per i video
+sulla VM delle riprese (`video/SCALETTA.md`, «Come si rigira»).
+
+Controlli automatici, a ogni schermata:
+
+- la pagina scorre di lato;
+- il fumetto esce dalla scena, finisce sotto i pulsanti in alto (Pausa, Mappa, «?», volume) o diventa una colonna
+  (più alto che largo);
+- testo tagliato in verbi, inventario, scelte dei dialoghi e riga della frase; scelte fuori dallo schermo;
+- prima di ogni clic sulla scena: il bersaglio è abbastanza grande (12 px col mouse; 28 px col dito, contando la
+  tolleranza di 22 px) e il suo centro non è coperto da un pulsante;
+- dopo ogni clic: il gioco ha fatto qualcosa;
+- errori JavaScript.
+
+## 1. Desktop pieno (1600×900, mouse)
+
+È lo schermo della VM delle riprese: il gioco come lo vede chi lo apre sul computer.
+
+| # | Momento | Cosa guardare |
+| --- | --- | --- |
+| 1 | Titolo e introduzione | Titolo, pulsanti (Nuova partita, Carica, Crediti) e volume senza sovrapposizioni; le righe dell'introduzione leggibili |
+| 2 | Piazza: colonna, vecchietti, squama | Fumetti sopra chi parla; scelte del dialogo leggibili; la squama si prende al primo clic |
+| 3 | Salita fino alla Fortezza | Uscite al primo clic; la riga della frase non resta vecchia |
+| 4 | Impronte e fessura | Fumetti lunghi interi e dentro la scena; la fessura si vede e non la copre Andrea |
+| 5 | Pieve: statua, indovinello, oratorio | Fumetto della statua sopra di lei; cinque risposte tutte visibili |
+| 6 | Tennis: la Tosca, cedrata e ghiacciolo | Inventario con più oggetti; «usa… con» fra due oggetti dell'inventario |
+| 7 | Ponticino, area feste, casetta | Uscite lunghe in fondo allo schermo; la torcia compare nell'inventario |
+| 8 | Fortezza: la torcia nella fessura | Luce, angolo del palio e occhi visibili; i fumetti non coprono la fessura |
+| 9 | Fine del capitolo | Testo, dedica e pulsanti interi; Crediti sopra a tutto |
+
+## 2. Metà schermo (800×900, mouse)
+
+È la finestra del browser affiancata a un'altra: la scena è stretta e in alto resta spazio vuoto.
+
+| # | Momento | Cosa guardare |
+| --- | --- | --- |
+| 1 | Titolo | Titolo su più righe senza sovrapporsi ai pulsanti |
+| 2 | Piazza | Verbi e inventario sotto la scena: niente parole tagliate («Parla con») |
+| 3 | Dialoghi (vecchietti, statua, Tosca) | Le scelte sostituiscono verbi e inventario: tutte visibili, numerate, senza scorrere |
+| 4 | Fumetti lunghi (manifesto, fessura) | Su più righe ma larghi, dentro la scena, mai sotto il volume |
+| 5 | Inventario con 3-4 oggetti | Nomi lunghi («chiave dell'oratorio», «stecco e gomma») su due righe senza uscire dal pulsante |
+| 6 | Fine e crediti | Tutto dentro la finestra; i crediti scorrono se non ci stanno |
+
+## 3. Smartphone in orizzontale (844×390, dito)
+
+Un telefono vero girato in orizzontale: scena a sinistra, verbi e inventario a destra, si tocca invece di cliccare.
+
+| # | Momento | Cosa guardare |
+| --- | --- | --- |
+| 1 | Titolo e introduzione | Tutto a schermo intero; «Salta» raggiungibile; il volume non copre il titolo |
+| 2 | Piazza: la squama | La squama si prende col dito anche toccando la panchina intorno |
+| 3 | Fumetti lunghi | Mai sotto Pausa/Mappa/volume, mai fuori dalla scena, mai a colonna |
+| 4 | Verbi in due colonne | Leggibili e grandi abbastanza per il dito |
+| 5 | Dialoghi | Le scelte si toccano una per una; nessuna fuori dallo schermo |
+| 6 | Uscite in fondo alla scena | Basse ma larghe: il tocco arriva anche un po' sopra |
+| 7 | Inventario pieno | Si scorre; l'ultimo oggetto preso si vede |
+| 8 | Pausa, Salva su file, mappa | Pulsanti dentro la scena; la mappa scorre e parte dal posto dove si è |
+| 9 | Fine | Testo e pulsanti interi; Ricomincia e Crediti toccabili |
+
+## Difetti trovati e corretti (24 ottobre 2026)
+
+- Smartphone: le battute lunghe («Laggiù, appoggiato al muro…», «Ai piedi c'è una strana scia…») diventavano una
+  colonna alta quanto la scena, che saliva sotto i cursori del volume e usciva dalla scena. Ora il fumetto è più largo e
+  ha il carattere più piccolo; la posizione si calcola in pixel, sotto i pulsanti in alto e dentro i lati.
+- In tutte le modalità: vicino al bordo destro il fumetto si stringeva a colonna (per esempio «La colonna, il centro
+  del paese…»). Corretto con `width: max-content`.
+- La fessura nel bastione stava dietro Andrea: ora è più grande e lui si ferma alla sua sinistra.