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

style.css

@@ -25,7 +25,8 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
 #stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; user-select: none; touch-action: manipulation; }
 #scene { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: crosshair; }
 
-#speech { position: absolute; left: 0; top: 0; max-width: 46%; transform: translate(-50%, -100%); pointer-events: none;
+/* max-content: vicino al bordo destro il fumetto non si stringe a colonna (lo spazio dopo `left` non conta). */
+#speech { position: absolute; left: 0; top: 0; width: max-content; max-width: 46%; transform: translate(-50%, -100%); pointer-events: none;
   font-size: clamp(10.08px, 1.66vw, 18.72px); font-weight: bold; line-height: 1.2; text-align: center;
   text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 2px 2px #000, -2px -2px #000; }
 #speech:empty { display: none; }
@@ -181,6 +182,8 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
   #stage { flex: none; width: min(calc(100dvh * 16 / 9), 68vw); align-self: flex-start; }
   #side { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--panel); }
   #sentence { font-size: 10.08px; }
+  /* Il fumetto: più largo e più piccolo, sennò una battuta lunga diventa una colonna alta quanto la scena. */
+  #speech { max-width: 72%; font-size: 11px; }
   #panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); flex: 1; min-height: 0; gap: 6px; padding: 6px; }
   #inventory { grid-template-columns: repeat(2, 1fr); min-height: 0; height: auto; }
   #verbs button, #inventory button, #choices li { font-size: 10.08px; }