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

src/main.js

@@ -342,10 +342,16 @@ function updateSpeech() {
     }
     if (!sp) { if (box.textContent) box.textContent = ''; return; }
     const [x, y] = game.speakerPoint(sp.who);
-    box.textContent = sp.text;
+    if (box.textContent !== sp.text) box.textContent = sp.text;
     box.style.color = story.characters[sp.who]?.color ?? '#fff';
-    box.style.left = Math.min(77, Math.max(23, x / WIDTH * 100)) + '%';
-    box.style.top = Math.max(18, y / HEIGHT * 100) + '%';
+    // Sopra chi parla, ma sempre dentro la scena e mai sotto i pulsanti in alto (Pausa, volume): sul telefono un
+    // fumetto lungo è alto quasi quanto la scena, e si misura in pixel.
+    const stage = $('stage').getBoundingClientRect(), w = box.offsetWidth, h = box.offsetHeight;
+    const roof = Math.max(...['sound', 'corner'].map(id => $(id).getBoundingClientRect().bottom - stage.top)) + 4;
+    const px = Math.min(stage.width - w / 2 - 4, Math.max(w / 2 + 4, x / WIDTH * stage.width));
+    const py = Math.min(stage.height - 4, Math.max(roof + h, y / HEIGHT * stage.height));
+    box.style.left = px + 'px';
+    box.style.top = py + 'px';
 }
 
 function updateUi() {