Telefono in verticale: la Pausa prende tutto lo schermo, la versione e la spiegazione non finiscono più sopra i verbi

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

style.css

@@ -251,6 +251,9 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
 
 #rotate { display: none; padding: 1em; text-align: center; color: var(--dim); }
 @media (orientation: portrait) and (max-width: 700px) { #rotate { display: block; } }
+/* Telefono in verticale: la scena è bassa e la Pausa non ci sta. Prende tutto lo schermo, così il cursore, i pulsanti,
+   la spiegazione e la versione non finiscono sopra i verbi. */
+@media (orientation: portrait) and (max-width: 700px) { #pause { position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: rgba(15, 10, 20, .97); } }
 /* Schermi stretti: il carattere a pixel è largo, i verbi vanno sopra l'inventario e su due righe da quattro. */
 @media (max-width: 600px) {
   #panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; }

tests/browser.mjs

@@ -416,6 +416,23 @@ try {
     await small.click('#pause-button');
     assert.ok(await small.evaluate(() => document.getElementById('to-title').getBoundingClientRect().bottom <= document.getElementById('stage').getBoundingClientRect().bottom), 'la pausa esce dalla scena');
     await small.screenshot({ path: `${OUT}/08b-telefono-stretto-pausa.png` });
+    // Telefono in verticale: la Pausa prende tutto lo schermo, e versione e spiegazione non finiscono sopra i verbi.
+    {
+        const tall = await browser.newPage({ viewport: { width: 412, height: 915 }, deviceScaleFactor: 2, hasTouch: true, isMobile: true });
+        await tall.goto(`http://127.0.0.1:${PORT}/`);
+        await tall.waitForSelector('#splash', { state: 'hidden', timeout: 15000 });
+        await tall.click('#new-game');
+        await tall.click('#rione [data-rione="campomigliaio"]');
+        await tall.click('#skip-intro');
+        await settle(tall);
+        await tall.click('#pause-button');
+        const fit = await tall.evaluate(() => {
+            const p = document.getElementById('pause'), v = p.querySelector('.version').getBoundingClientRect();
+            return { inside: p.scrollHeight <= p.clientHeight + 1, top: document.elementFromPoint(v.x + v.width / 2, v.y + v.height / 2)?.closest('#pause') !== null };
+        });
+        assert.deepEqual(fit, { inside: true, top: true }, 'in verticale la pausa esce dallo schermo o finisce sotto i verbi');
+        await tall.close();
+    }
     const landscape = await open({ width: 844, height: 390 });
     await landscape.click('#new-game');
     await landscape.click('#rione [data-rione="campomigliaio"]');