Versione 0.1.73

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

docs/STATO.md

@@ -349,6 +349,14 @@ versione nuova.
   `REGOLO_GPU=0/1` forza. Con 6 o 8 prove insieme il giro dura uguale: il limite è la partita intera (243 s, il tempo
   del gioco, non della grafica). La pipeline dà la GPU ai job (`--gpus all`, runtime NVIDIA di Docker); runner a 6 job.
 
+- **Schermo intero e flipper (1 novembre sera, Andrea):** pulsante ⛶ accanto ai volumi e tasto F; il gioco non si ferma
+  più a 1280 px (fino a 2560: a 1920×1080 la scena è 1553 px e prende tutta l'altezza). Nei minigiochi la scena lascia
+  sotto lo spazio vero dei comandi (`fitControls` in main.js, `--below`; cresce subito, cala solo oltre 24 px, «Come si
+  gioca» aperto non conta: una frase che va a capo faceva saltare il piano). Al flipper «Solo tavola» nasconde la
+  pulsantiera (ricordato nel browser); sul telefono in orizzontale è nascosta sempre e «Lascia stare» sta in alto. La
+  molla si carica toccando al centro (fascia 256-384), ai lati le palette anche prima del lancio; a pallina ferma la
+  tavola dice «TIENI PREMUTO QUI». Ponti rifatti da Codex (parapetti, portali, luci che seguono la pallina).
+
 - **La prova del peso (1 novembre, Andrea: «senza GPU scoprivamo anche gli effetti troppo pesanti»):** con la scheda
   video le prove non vedono più un effetto pesante. `tests/peso.browser.mjs` usa sempre swiftshader e, nel gioco vero,
   in ogni scena nelle tre fasi e in ogni primo piano (il flipper anche in gioco e nel Regolo del futuro) misura

index.html

@@ -23,12 +23,14 @@
       <button id="notebook-button" hidden title="Taccuino (N)">Taccuino</button>
       <button id="spots-button" hidden title="Mostra cosa si può toccare (H)">?</button>
       <button id="back-button" hidden></button>
+      <button id="table-only" hidden title="Nasconde la pulsantiera: il flipper a tutta altezza (si gioca con mouse e tastiera)">Solo tavola</button>
     </div>
     <div id="sound">
       <button id="mute" aria-label="Togli l'audio" title="Audio (M)">♪</button>
       <input id="volume" type="range" min="0" max="100" step="5" aria-label="Volume della musica" title="Volume della musica">
       <label for="voice-volume" class="sound-label" title="Volume delle voci">bla</label>
       <input id="voice-volume" type="range" min="0" max="100" step="5" aria-label="Volume delle voci" title="Volume delle voci">
+      <button id="fullscreen-hud" aria-label="Schermo intero" title="Schermo intero (F)">⛶</button>
     </div>
     <section id="splash" class="overlay" aria-label="Manzolo (Poca) Art Presents">
       <p class="splash-name">Manzolo</p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "leggenda-del-regolo",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "private": true,
   "type": "module",
   "scripts": {

src/engine/flipper-art.js

@@ -0,0 +1,185 @@
+// Illustrazioni vettoriali del backglass, riusate come inserti in lacca sul campo.
+import { activeBalls } from './flipper.js';
+
+export const SCENES = {
+    regolo: { color: '#91f5b1', title: 'IL REGOLO SI RISVEGLIA', note: 'IL CUSTODE DELLA SIEVE', at: [320, 193] },
+    fortezza: { color: '#65ddec', title: 'LA FORTEZZA SI ACCENDE', note: 'SOPRA I BASTIONI', at: [320, 119] },
+    trebbio: { color: '#ffc16c', title: 'LA TORRE DEL TREBBIO', note: 'UN PASSAGGIO NELLA STORIA', at: [365, 164] },
+    pieve: { color: '#ffaccc', title: 'LE LUCI DELLA PIEVE', note: 'NEL CUORE DEL PAESE', at: [240, 174] },
+    rioni: { color: '#ffe6a0', title: 'I COLORI DEI RIONI', note: 'QUATTRO COLORI, UN PAESE', at: [320, 88] },
+    sieve: { color: '#6fcfff', title: 'SULLE ONDE DELLA SIEVE', note: 'IL VIAGGIO CONTINUA', at: [320, 280] },
+    cosmo: { color: '#dba5ff', title: 'IL REGOLO DEL FUTURO', note: 'OLTRE IL TEMPO', at: [320, 193] },
+    spira: { color: '#ff729e', title: 'NELLA SPIRA AL NEON', note: 'ENERGIA IN MOVIMENTO', at: [376, 170] },
+};
+const RAMP_SCENE = { sinistra: 'fortezza', destra: 'trebbio', super: 'cosmo', orbita: 'cosmo', ponte: 'fortezza', spira: 'spira' };
+
+// Solo lettura: nessun evento, punteggio o numero casuale della simulazione viene consumato dal disegno.
+export function flipperScene(c) {
+    const balls = activeBalls(c).filter(b => !b.waiting && b.releaseAt <= c.sim);
+    if (c.regolo.hit > 0 || balls.some(b => !b.ramp && Math.hypot(b.x - c.regolo.x, b.y - c.regolo.y) < 33)) return 'regolo';
+    const ramp = Object.keys(RAMP_SCENE).find(id => balls.some(b => b.ramp?.id === id));
+    if (ramp) return RAMP_SCENE[ramp];
+    if (!balls.length) return c.table === 'future' ? 'cosmo' : 'regolo';
+    if (c.bumpers.some(b => b.hit > 0)) return 'fortezza';
+    // Priorità stabile anche in multiball, indipendente dall'ordine delle palline.
+    if (balls.some(b => b.y < 106)) return c.table === 'future' ? 'cosmo' : 'rioni';
+    if (balls.some(b => b.x < 242 && b.y < 218)) return 'pieve';
+    if (balls.some(b => b.x > 398 && b.x < 432 && b.y < 218)) return 'trebbio';
+    if (balls.some(b => b.y < 180)) return 'fortezza';
+    if (balls.some(b => b.y < 244)) return c.table === 'future' ? 'cosmo' : 'regolo';
+    return 'sieve';
+}
+const TAU = Math.PI * 2;
+function stroke(g, pts, color, width = 1) {
+    g.beginPath(); pts.forEach(([x, y], i) => i ? g.lineTo(x, y) : g.moveTo(x, y));
+    g.strokeStyle = color; g.lineWidth = width; g.stroke();
+}
+function fill(g, pts, color) {
+    g.beginPath(); pts.forEach(([x, y], i) => i ? g.lineTo(x, y) : g.moveTo(x, y));
+    g.closePath(); g.fillStyle = color; g.fill();
+}
+function circle(g, x, y, r, color) { g.beginPath(); g.arc(x, y, r, 0, TAU); g.fillStyle = color; g.fill(); }
+
+export function paintRegolo(g, x, y, size, color = '#91f5b1') {
+    g.save(); g.translate(x, y); g.scale(size / 30, size / 30); g.lineCap = 'round'; g.lineJoin = 'round';
+    // Un serpente a spire, con ventre dorato, cresta, occhio e corona: leggibile anche come piccolo emblema.
+    const body = () => {
+        g.beginPath(); g.moveTo(-29, 22);
+        g.bezierCurveTo(-8, 28, 29, 23, 23, 7);
+        g.bezierCurveTo(17, -9, -24, 0, -18, 13);
+        g.bezierCurveTo(-13, 24, 13, 12, 9, 0);
+        g.bezierCurveTo(5, -11, -9, -9, -4, -23);
+    };
+    body(); g.strokeStyle = '#061d26'; g.lineWidth = 12; g.stroke();
+    body(); g.strokeStyle = color; g.lineWidth = 8; g.stroke();
+    body(); g.strokeStyle = '#153f43'; g.lineWidth = 4.6; g.stroke();
+    g.save(); g.translate(0, 2); body(); g.strokeStyle = '#ffe5a6'; g.lineWidth = 1.1; g.stroke(); g.restore();
+    for (let i = 0; i < 7; i++) {
+        const a = i * 0.36;
+        stroke(g, [[-16 + i * 5, 20 - Math.sin(a) * 3], [-15 + i * 5, 17 - Math.sin(a) * 3]], color, 1);
+    }
+    fill(g, [[-9, -26], [-4, -31], [5, -29], [12, -23], [9, -18], [0, -18], [-5, -14]], color);
+    stroke(g, [[3, -18], [11, -19], [15, -17], [18, -19]], '#ff92a7', 1);
+    circle(g, 4, -25, 2.1, '#071821'); circle(g, 4.5, -25.6, 0.8, '#ffffff');
+    fill(g, [[-8, -33], [-11, -43], [-4, -38], [0, -47], [5, -38], [12, -43], [8, -33]], '#ffdc88');
+    stroke(g, [[-8, -32], [8, -32]], '#fff5d5', 1.6); circle(g, 0, -38, 1.4, '#ff729e');
+    g.restore();
+}
+
+export function paintZoneSymbol(g, id) {
+    const { color, at: [x, y] } = SCENES[id];
+    g.save(); g.translate(x, y); g.lineJoin = 'round';
+    if (id === 'fortezza' || id === 'trebbio' || id === 'pieve') {
+        const roof = id === 'pieve' ? [[-12, -2], [0, -13], [12, -2]]
+            : id === 'trebbio' ? [[-7, 8], [-7, -14], [-3, -14], [-3, -10], [3, -10], [3, -14], [7, -14], [7, 8]]
+                : [[-14, 7], [-14, -7], [-9, -7], [-9, -3], [-4, -3], [-4, -10], [4, -10], [4, -3], [9, -3], [9, -7], [14, -7], [14, 7]];
+        stroke(g, roof, color, 1.3);
+        stroke(g, [[-10, 0], [-10, 9], [10, 9], [10, 0]], color, 0.8);
+        stroke(g, [[-3, 8], [-3, 2], [0, -1], [3, 2], [3, 8]], '#fff1c1', 0.8);
+    } else if (id === 'rioni') {
+        for (let i = 0; i < 4; i++) {
+            const px = -15 + i * 10;
+            fill(g, [[px, -10], [px + 7, -10], [px + 7, 3], [px + 3.5, 7], [px, 3]], ['#f97980', '#f7eac9', '#78e2ad', '#7bb6ff'][i]);
+        }
+    } else if (id === 'sieve') {
+        for (let i = 0; i < 3; i++) {
+            g.beginPath(); g.moveTo(-19, -6 + i * 6); g.bezierCurveTo(-8, -14 + i * 6, 8, 2 + i * 6, 19, -6 + i * 6);
+            g.strokeStyle = color; g.lineWidth = 1.2; g.stroke();
+        }
+    } else if (id === 'spira') {
+        for (let i = 0; i < 3; i++) {
+            g.beginPath(); g.ellipse(0, 0, 6 + i * 5, 4 + i * 4, -0.5, 0, TAU);
+            g.strokeStyle = color; g.lineWidth = 0.9; g.stroke();
+        }
+    }
+    g.restore();
+}
+
+function fortress(g, tower, color) {
+    fill(g, [[18, 69], [18, 43], [28, 39], [28, 32], [35, 32], [35, 41], [51, 40], [51, 29], [61, 29], [61, 39], [87, 37], [87, 26], [97, 26], [97, 36], [119, 34], [119, 29], [129, 29], [129, 65]], '#163648');
+    stroke(g, [[18, 43], [35, 41], [51, 40], [61, 39], [87, 37], [97, 36], [129, 34]], color, 1.5);
+    if (tower) {
+        fill(g, [[61, 63], [61, 14], [66, 14], [66, 19], [73, 19], [73, 12], [79, 12], [79, 19], [86, 19], [86, 14], [91, 14], [91, 63]], '#365062');
+        stroke(g, [[61, 63], [61, 14], [66, 14]], color, 1.3);
+        for (const y of [27, 40, 53]) { g.fillStyle = '#ffd590'; g.fillRect(73, y, 5, 7); }
+    }
+    for (let y = 46; y < 67; y += 7) stroke(g, [[22, y], [126, y - 6]], '#426076', 0.5);
+    for (const x of [33, 49, 101, 117]) { g.fillStyle = color; g.fillRect(x, 47, 2, 6); }
+    fill(g, [[67, 70], [67, 55], [73, 50], [80, 55], [80, 70]], '#071927');
+    stroke(g, [[14, 72], [74, 65], [135, 70]], color, 1);
+}
+
+// Una scena di 150 × 88, interamente in cache nel renderer.
+export function paintFlipperScene(g, id) {
+    const color = SCENES[id].color;
+    const sky = g.createLinearGradient(0, 0, 150, 88);
+    sky.addColorStop(0, '#071125'); sky.addColorStop(0.6, id === 'trebbio' ? '#38273b' : '#15364a'); sky.addColorStop(1, '#071925');
+    g.fillStyle = sky; g.fillRect(0, 0, 150, 88);
+    circle(g, 120, 19, 13, color + '18'); circle(g, 120, 19, 8, '#fff0be'); circle(g, 117, 16, 7, '#153044');
+    for (let i = 0; i < 20; i++) circle(g, (i * 47 + 13) % 150, (i * 23 + 9) % 57, i % 3 ? 0.5 : 0.9, color + 'aa');
+    fill(g, [[0, 59], [21, 37], [44, 53], [77, 27], [108, 51], [139, 33], [150, 40], [150, 88], [0, 88]], '#142b3c');
+    fill(g, [[0, 74], [39, 53], [67, 64], [99, 44], [150, 62], [150, 88], [0, 88]], '#1f4350');
+    for (let i = 0; i < 5; i++) {
+        g.beginPath(); g.moveTo(0, 74 + i * 3); g.bezierCurveTo(52, 58 + i * 3, 78, 91 + i * 2, 150, 67 + i * 4);
+        g.strokeStyle = i % 2 ? '#69b6ce66' : '#102837'; g.lineWidth = 1; g.stroke();
+    }
+    if (id === 'fortezza' || id === 'trebbio') fortress(g, id === 'trebbio', color);
+    else if (id === 'pieve') {
+        fill(g, [[30, 69], [30, 43], [59, 25], [87, 43], [87, 69]], '#406077');
+        fill(g, [[87, 68], [87, 23], [94, 13], [101, 23], [101, 68]], '#29495e');
+        stroke(g, [[26, 44], [59, 22], [90, 44]], color, 2);
+        circle(g, 59, 43, 7, '#142a3e'); circle(g, 59, 43, 4, '#ffc8de');
+        fill(g, [[52, 69], [52, 58], [59, 53], [66, 58], [66, 69]], '#102334');
+        g.fillStyle = '#ffdfa2'; g.fillRect(91, 28, 6, 9);
+    } else if (id === 'rioni') {
+        ['#f97980', '#f7eac9', '#78e2ad', '#7bb6ff'].forEach((c, i) => {
+            const x = 24 + i * 29, y = 23 + (i % 2) * 5;
+            stroke(g, [[x, y - 4], [x, 69]], '#d5c7a1', 1.2);
+            fill(g, [[x + 2, y], [x + 23, y + 3], [x + 23, y + 30], [x + 12, y + 38], [x + 2, y + 30]], c);
+            stroke(g, [[x + 12, y + 7], [x + 12, y + 27]], '#213347', 2);
+            stroke(g, [[x + 6, y + 17], [x + 18, y + 17]], '#213347', 2);
+        });
+    } else if (id === 'sieve') {
+        g.beginPath(); g.moveTo(10, 65); g.quadraticCurveTo(74, 9, 140, 65);
+        g.strokeStyle = '#0a1b2c'; g.lineWidth = 10; g.stroke(); g.strokeStyle = color; g.lineWidth = 2; g.stroke();
+        for (const x of [28, 49, 74, 99, 122]) stroke(g, [[x, 49 - Math.sin(x / 150 * Math.PI) * 10], [x, 73]], '#5f8b9f', 3);
+        paintRegolo(g, 77, 70, 12, '#91f5b1');
+    } else {
+        for (let i = 0; i < 3; i++) {
+            g.beginPath(); g.ellipse(75, 44, 28 + i * 12, 23 + i * 8, -0.4 + i * 0.3, 0, TAU);
+            g.strokeStyle = color + (i ? '55' : 'aa'); g.lineWidth = 0.8; g.stroke();
+        }
+        paintRegolo(g, 75, 51, id === 'spira' ? 26 : 30, color);
+    }
+    // Riflessi e retino del vetro inciso.
+    for (let y = 2; y < 88; y += 3) stroke(g, [[0, y], [150, y]], '#050f1c22', 0.5);
+}
+
+export function paintPlayfieldArt(g, future = false) {
+    const color = future ? '#ad8cff' : '#74c5bd';
+    g.save();
+    // Rosone centrale, smalti e serpente coronato sotto il piano di gioco.
+    for (const r of [30, 33, 43]) {
+        g.beginPath(); g.ellipse(320, 194, r, r * 0.83, 0, 0, TAU);
+        g.strokeStyle = color + '55'; g.lineWidth = r === 33 ? 1.4 : 0.6; g.stroke();
+    }
+    for (let i = 0; i < 16; i++) {
+        const a = i / 16 * TAU;
+        stroke(g, [[320 + Math.cos(a) * 37, 194 + Math.sin(a) * 31], [320 + Math.cos(a) * 41, 194 + Math.sin(a) * 34]], '#d6be7855', 0.8);
+    }
+    g.globalAlpha = 0.46; paintRegolo(g, 320, 202, 25, color); g.globalAlpha = 1;
+    for (const [x, side, tint] of [[239, -1, '#65ddec'], [402, 1, '#ffc16c']]) {
+        stroke(g, [[x, 217], [x - side * 10, 230], [x - side * 10, 242]], tint + '66', 1);
+        for (let i = 0; i < 3; i++) fill(g, [[x, 209 + i * 8], [x + 2, 212 + i * 8], [x, 215 + i * 8], [x - 2, 212 + i * 8]], tint + '88');
+    }
+    // Filetti dorati delle sponde e frecce smaltate verso le palette.
+    for (const side of [-1, 1]) {
+        const x = 320 + side * 67;
+        stroke(g, [[x, 263], [x - side * 14, 279], [x - side * 22, 300]], '#e7c88955', 0.8);
+        for (let i = 0; i < 3; i++) {
+            const cx = x - side * i * 7, y = 274 + i * 10;
+            stroke(g, [[cx - 3, y - 2], [cx, y + 1], [cx + 3, y - 2]], color + '77', 1);
+        }
+    }
+    g.restore();
+}

src/engine/flipper-render.js

@@ -1,7 +1,8 @@
 // Il Regolo / River: tavolo in lacca scura, metallo e inserti luminosi.
 // Le coordinate sono quelle della fisica. Le superfici statiche e i bagliori sono in cache a risoluzione doppia.
-import { R, SCORE, RAMP, FUTURE, layout, flipperSeg, alongRamp, rampHeight, waiting, canThrow, saveLeft, activeBalls, multiball, rampOpen } from './flipper.js';
+import { R, SCORE, RAMP, FUTURE, PLUNGER_ZONE, layout, flipperSeg, alongRamp, rampHeight, waiting, canThrow, saveLeft, activeBalls, multiball, rampOpen } from './flipper.js';
 import { ambientHash as hash } from './ambient.js';
+import { SCENES, flipperScene, paintRegolo, paintZoneSymbol, paintFlipperScene, paintPlayfieldArt } from './flipper-art.js';
 
 const INK = '#071018', WHITE = '#eff9ff', MUTED = '#7b99aa';
 const TINT = { sinistra: '#65ddec', destra: '#ffc16c', super: '#dba5ff', orbita: '#58f4e2', ponte: '#c1a0ff', spira: '#ff729e' };
@@ -56,6 +57,74 @@ function cached(g, key, paint, bounds = [0, 0, 640, 360]) {
     if (typeof document === 'undefined') { paint(g); return; }
     g.drawImage(layerOf(key, paint, bounds), ...bounds);
 }
+// Il display cambia con il percorso. Una breve permanenza e la dissolvenza evitano il tremolio sui confini.
+const apparitions = new WeakMap();
+function apparition(c, time) {
+    const next = flipperScene(c);
+    let d = apparitions.get(c);
+    if (!d || time < d.at || d.table !== c.table) {
+        d = { id: next, previous: next, at: time, pending: next, since: time, table: c.table }; apparitions.set(c, d);
+    }
+    if (next !== d.pending) { d.pending = next; d.since = time; }
+    if (next !== d.id && ((c.regolo.hit > 0) || (time - d.at > 0.65 && time - d.since > 0.12))) {
+        d.previous = d.id; d.id = next; d.at = time;
+    }
+    return d;
+}
+function livingBackglass(g, c, time) {
+    const d = apparition(c, time), scene = SCENES[d.id], fade = clamp((time - d.at) / 0.32, 0, 1);
+    box(g, 22, 236, 154, 91, '#061422', scene.color, 5);
+    g.save(); g.beginPath(); g.roundRect(24, 238, 150, 87, 4); g.clip();
+    const paint = id => cached(g, `vision:${id}`, l => { l.save(); l.translate(24, 238); paintFlipperScene(l, id); l.restore(); }, [24, 238, 150, 88]);
+    paint(d.previous);
+    g.save(); g.globalAlpha = fade; paint(d.id); g.restore();
+    // Poche luci nel cielo, animate separatamente dall'illustrazione in cache.
+    for (let i = 0; i < 5; i++) {
+        const x = 36 + i * 29, y = 254 + Math.sin(time * 0.8 + i * 2) * 6;
+        glow(g, x, y, 5, scene.color, 0.35 + Math.sin(time * 2 + i) * 0.2);
+    }
+    g.fillStyle = '#030b18c9'; g.fillRect(24, 238, 150, 12); g.fillRect(24, 309, 150, 16);
+    text(g, scene.title, 99, 244, 5.7, scene.color, 'center');
+    text(g, scene.note, 99, 317, 5, '#e5e9d8', 'center');
+    g.restore();
+    for (const x of [19, 179]) {
+        glow(g, x, 280, 15, scene.color, 0.4);
+        line(g, [[x, 256], [x, 304]], scene.color, 1.2);
+    }
+}
+function livingPlayfield(g, c, time) {
+    const d = apparition(c, time), scene = SCENES[d.id], balls = activeBalls(c).filter(b => !b.waiting && b.releaseAt <= c.sim);
+    const pulse = 0.5 + Math.sin(time * 2.5) * 0.12;
+    // Il rosone si risveglia sotto gli oggetti: palline, palette e bersagli si disegnano dopo.
+    glow(g, ...scene.at, 49, scene.color, balls.length ? 0.48 : 0.2);
+    g.save(); g.globalAlpha = (d.id === 'regolo' || d.id === 'cosmo' ? 0.65 : 0.16) * pulse;
+    cached(g, `regolo-insert:${scene.color}`, l => paintRegolo(l, 320, 202, 25, scene.color), [290, 160, 60, 70]);
+    g.restore();
+    if (balls.length && d.id !== 'regolo' && d.id !== 'cosmo') {
+        g.save(); g.globalAlpha = clamp((time - d.at) / 0.3, 0, 0.7);
+        cached(g, `zone-insert:${d.id}`, l => paintZoneSymbol(l, d.id), [scene.at[0] - 22, scene.at[1] - 18, 44, 36]);
+        g.restore();
+    }
+    for (const side of [-1, 1]) for (let i = 0; i < 18; i++) {
+        const x = side < 0 ? 196 : 452, y = 43 + i * 16;
+        const near = balls.some(b => Math.abs(b.y - y) < 25 && (side < 0 ? b.x < 325 : b.x > 315));
+        const chase = (i + Math.floor(time * (balls.length ? 9 : 3))) % 7 === 0;
+        const color = near ? scene.color : i % 3 === 0 ? '#c9a5ff' : side < 0 ? TINT.sinistra : TINT.destra;
+        box(g, x - 1, y - 2, 2, 4, near || chase ? color : '#2b4351', null, 0.6);
+        if (near || chase) glow(g, x, y, near ? 10 : 6, color, near ? 0.6 : 0.3);
+    }
+    for (const b of balls) {
+        if (b.ramp) continue;
+        glow(g, b.x, b.y, 21, scene.color, 0.25);
+        // Piccoli inserti a rombo, accesi dalla vicinanza della pallina.
+        for (const [x, y] of [[272, 175], [367, 175], [292, 274], [348, 274], [320, 297]]) {
+            const near = Math.hypot(b.x - x, b.y - y) < 48;
+            if (!near) continue;
+            glow(g, x, y, 12, scene.color, 0.6);
+            poly(g, [[x, y - 3], [x + 2, y], [x, y + 3], [x - 2, y]], scene.color);
+        }
+    }
+}
 // Il mobile, che non cambia mai, sta sullo sfondo CSS della tela in pagina invece di essere copiato a ogni fotogramma:
 // una copia a tutto schermo fra gli altri tratti costava da sola mezzo secondo ogni 150 fotogrammi (swiftshader). La
 // tela si pulisce e il mobile resta sotto; si ridisegna sulla tela solo durante la scossa, che lo sposta.
@@ -111,6 +180,11 @@ function cabinet(g, c, bg, glass) {
     // I bastioni stilizzati al fondo del piano.
     poly(g, [[278, 83], [278, 60], [286, 60], [286, 50], [296, 50], [296, 59], [307, 59], [307, 45], [318, 45], [318, 59], [329, 59], [329, 50], [340, 50], [340, 60], [352, 60], [352, 83]], '#1e3e43', '#365358');
     text(g, 'LA FORTEZZA', 315, 77, 5.5, '#5c7d7d', 'center');
+    paintPlayfieldArt(g);
+    for (const [i, x] of [257, 297, 340, 381].entries()) {
+        poly(g, [[x - 5, 83], [x + 5, 83], [x + 5, 92], [x, 96], [x - 5, 92]], RIONI[i] + '88', '#d8d7ab66');
+        line(g, [[x, 85], [x, 91]], '#0b263b', 1.2);
+    }
     // La corsia della molla è una scanalatura separata, con il fondo metallico.
     g.fillStyle = gradient(g, 432, 0, 16, 0, [[0, '#01070b'], [0.3, '#213442'], [0.65, '#0c1922'], [1, '#304754']]); g.fillRect(432, 72, 16, 264);
     line(g, [[440, 86], [440, 306]], '#45606c', 0.5);
@@ -151,7 +225,8 @@ function paintTrack(g, r) {
         line(g, [[p.x + 5, p.y], [p.x + 7, p.y + 10]], '#050c13', 3);
         screw(g, p.x + 7, p.y + 10);
     }
-    const track = (color, width) => {
+    const track = (color, width, points = pts) => {
+        const pts = points;
         g.beginPath(); g.moveTo(...pts[0]);
         for (let i = 1; i < pts.length - 1; i++) {
             const [x, y] = pts[i], a = pts[i - 1], b = pts[i + 1];
@@ -165,7 +240,24 @@ function paintTrack(g, r) {
     track(color + '18', 20); track('#02080e', 16); track(color, 14);
     track(metal(g, 240, 45, 156, 205), 12); track('#07141e', 10);
     track(gradient(g, 240, 40, 165, 220, [[0, '#386274'], [0.35, '#152a3b'], [0.7, '#385266'], [1, '#142c3b']]), 8);
-    track(color + '24', 4);
+    track(color + '38', 4);
+    // Parapetti rialzati: montanti e tiranti triangolari fanno leggere il ponte anche da fermo.
+    for (const side of [-1, 1]) {
+        let previous;
+        for (let s = 34; s < r.len - 10; s += 18) {
+            const p = rampPoint(r, s), foot = [p.x + p.dy * 6.5 * side, p.y - p.dx * 6.5 * side];
+            const top = [foot[0], foot[1] - 5];
+            line(g, [foot, top], '#a6c6d2', 0.8);
+            if (previous) line(g, [previous, foot], color + '88', 0.65);
+            disc(g, ...top, 0.9, color); previous = top;
+        }
+        const rail = pts.map(([x, y], i) => {
+            const a = pts[Math.max(0, i - 1)], b = pts[Math.min(pts.length - 1, i + 1)];
+            const len = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+            return [x + (b[1] - a[1]) / len * 6.5 * side, y - (b[0] - a[0]) / len * 6.5 * side - 5];
+        });
+        track('#06121d', 2.6, rail); track(color, 1.3, rail); track('#ffffff99', 0.45, rail);
+    }
     for (let s = 12; s < r.len - 4; s += 22) {
         const p = rampPoint(r, s);
         line(g, [[p.x - p.dy * 4, p.y + p.dx * 4], [p.x + p.dy * 4, p.y - p.dx * 4]], '#7595a344', 0.7);
@@ -178,18 +270,50 @@ function paintTrack(g, r) {
         const pts = [[cx + side * 6, y - 30], [cx + side * (x1 - x0) / 2, y]];
         line(g, pts, '#07121c', 3); line(g, pts, color, 1); screw(g, cx + side * (x1 - x0) / 2, y);
     }
-    text(g, r.points ? number(r.points) : r.id === 'super' ? 'SUPER' : '15.000', cx, y - 12, 5, '#c5e0e7', 'center');
+    // Portale d'ingresso in metallo: l'arco e le torrette incorniciano la bocca fisica della rampa.
+    const arch = [[x0 + 2, y - 2], [x0 + 2, y - 17], [cx - 8, y - 27], [cx + 8, y - 27], [x1 - 2, y - 17], [x1 - 2, y - 2]];
+    line(g, arch, '#020910', 5); line(g, arch, metal(g, x0, y - 27, x1 - x0, 27), 3.2); line(g, arch, color, 1);
+    for (const x of [x0 + 2, x1 - 2]) {
+        box(g, x - 2.5, y - 16, 5, 16, '#112735', '#8aaab7', 1);
+        box(g, x - 0.8, y - 13, 1.6, 9, color, null, 0.5);
+    }
+    box(g, cx - 10, y - 31, 20, 8, '#0a1b28', color, 2);
+    crown(g, cx, y - 27, 2.3, color);
+    for (let i = 0; i < 2; i++) line(g, [[cx - 3, y - 5 - i * 5], [cx, y - 8 - i * 5], [cx + 3, y - 5 - i * 5]], color + 'aa', 0.8);
+    text(g, r.points ? number(r.points) : r.id === 'super' ? 'SUPER' : '15.000', cx, y - 18, 4.5, WHITE, 'center');
 }
-function rampLights(g, c, r, time) {
+function trackEnergy(g, c, r, time, hot, balls) {
+    const color = TINT[r.id], riders = balls.filter(b => b.ramp?.id === r.id);
+    const charged = hot || riders.length > 0;
+    // Luci sui bordi: il centro rimane libero per seguire la pallina.
+    for (let k = 0; k < (charged ? 7 : 3); k++) {
+        const p = rampPoint(r, (time * (charged ? 155 : 48) + k * r.len / (charged ? 7 : 3)) % r.len);
+        for (const side of [-1, 1]) {
+            const x = p.x + p.dy * 6.5 * side, y = p.y - p.dx * 6.5 * side - 5;
+            if (charged) glow(g, x, y, 7, color, 0.5);
+            disc(g, x, y, charged ? 1.1 : 0.8, charged ? WHITE : color);
+        }
+    }
+    for (const b of riders) {
+        // La scia segue la distanza percorsa, anche quando un tiro debole ricade indietro.
+        for (let i = 7; i > 0; i--) {
+            const s = b.ramp.s - Math.sign(b.ramp.v) * i * 4;
+            if (s < 0 || s > r.len) continue;
+            const p = rampPoint(r, s);
+            g.save(); g.globalAlpha *= (1 - i / 8) * 0.65;
+            line(g, [[p.x - p.dy * 3, p.y + p.dx * 3], [p.x + p.dy * 3, p.y - p.dx * 3]], color, 2);
+            g.restore();
+        }
+        const p = rampPoint(r, b.ramp.s); glow(g, b.x, p.y, 14, color, 0.8);
+    }
+    const [[x0, y], [x1]] = r.mouth, pulse = 0.45 + Math.sin(time * (charged ? 7 : 2)) * 0.15;
+    for (const x of [x0 + 2, x1 - 2]) glow(g, x, y - 10, 11, color, charged ? 0.85 : pulse);
+}
+function rampLights(g, c, r, time, balls) {
     const color = TINT[r.id], locked = c.locks.some(l => l.rampId === r.id);
     const combo = !c.locks.length && c.lastRamp && c.lastRamp.id !== r.id && r.id !== 'super';
     const invited = c.special === r.id || multiball(c), hot = invited || combo || r.lit > 0;
-    if (hot) {
-        for (let k = 0; k < 7; k++) {
-            const p = rampPoint(r, (time * 140 + k * r.len / 7) % r.len);
-            glow(g, p.x, p.y, 10, color, 0.7); disc(g, p.x, p.y, 1.1, WHITE);
-        }
-    }
+    trackEnergy(g, c, r, time, hot, balls);
     const [[x0, y], [x1]] = r.mouth, x = (x0 + x1) / 2;
     for (let i = 0; i < 3; i++) {
         const lit = locked || (c.rampRun.id === r.id && c.rampRun.count > i);
@@ -203,7 +327,7 @@ function rampLights(g, c, r, time) {
     text(g, locked ? 'LOCKED' : r.id === 'super' ? 'SUPER SPECIAL' : invited ? 'JACKPOT' : combo ? 'COMBO +50K' : r.id === 'sinistra' ? 'FORTEZZA' : 'TREBBIO', x, y + 29, r.id === 'super' ? 5.1 : 5.8, invited ? WHITE : color, 'center');
 }
 function bumper(g, b, time) {
-    const hot = b.hit > 0, color = hot ? '#ffce84' : '#76e4ec';
+    const hot = b.hit > 0, color = hot ? '#ffce84' : b.x < 310 ? '#76e4ec' : b.x > 330 ? '#ffbf81' : '#91f5b1';
     glow(g, b.x, b.y, hot ? 29 : 18, color, hot ? 1 : 0.24);
     g.beginPath(); g.ellipse(b.x + 1, b.y + 5, b.r + 2, b.r, 0, 0, TAU); g.fillStyle = '#01080d'; g.fill();
     disc(g, b.x, b.y + 1, b.r, metal(g, b.x - 10, b.y - 10, 20, 20), '#07111b');
@@ -212,6 +336,10 @@ function bumper(g, b, time) {
     v.addColorStop(0, hot ? '#fff8d4' : '#427382'); v.addColorStop(1, hot ? '#d9813d' : '#10232e');
     disc(g, b.x, b.y - 1, b.r - 4, v, '#759ca7');
     crown(g, b.x, b.y - 1, 3, hot ? '#fffaf0' : '#d6e9d9');
+    for (let i = 0; i < 8; i++) {
+        const a = i * TAU / 8;
+        disc(g, b.x + Math.cos(a) * (b.r + 2.5), b.y + Math.sin(a) * (b.r + 2.5), 0.65, hot || (i + Math.floor(time * 5)) % 8 < 2 ? color : '#315260');
+    }
     for (const dx of [-8, 8]) screw(g, b.x + dx, b.y);
     if (hot) { g.strokeStyle = color; g.lineWidth = 1; g.beginPath(); g.arc(b.x, b.y, b.r + 4 + Math.sin(time * 24) * 2, 0, TAU); g.stroke(); }
 }
@@ -269,6 +397,7 @@ function plunger(g, c) {
 const shown = new WeakMap();
 export function shownScore(d, time) { const k = Math.min(1, (time - d.t0) / 0.5); return k >= 1 ? d.to : d.from + Math.floor((d.to - d.from) * k / 10) * 10; }
 function board(g, c, time) {
+    glow(g, 99, 43, 25, SCENES[apparition(c, time).id].color, 0.4);
     crown(g, 99, 43, 10, '#e7c889');
     text(g, 'IL REGOLO', 99, 77, 24, '#eee8d7', 'center', 'Georgia, serif', 500);
     text(g, 'R I V E R   /   P I N B A L L', 99, 96, 5.8, '#7f9d9e', 'center');
@@ -290,6 +419,7 @@ function board(g, c, time) {
     text(g, 'PALLINE', 28, 225, 6, MUTED);
     for (let i = 0; i < Math.min(8, c.balls); i++) disc(g, 88 + i * 9, 225, 2.4, i === 0 ? '#d4f6fc' : '#4f7786', '#8aacb5');
     if (c.balls > 8) text(g, `+${c.balls - 8}`, 162, 225, 5, WHITE, 'right');
+    livingBackglass(g, c, time);
     if (c.step === 'result') {
         box(g, 24, 246, 150, 62, '#06131deb', '#c8b579', 5);
         text(g, c.result.winner === 'player' ? 'TRAGUARDO FATTO!' : 'FINE PARTITA', 99, 264, 9, '#efdfa8', 'center');
@@ -388,6 +518,7 @@ function futureCabinet(g, c, bg, glass) {
     text(g, 'FORTEZZA / NUCLEO', 320, 91, 5, '#d1c7ff', 'center');
     const serpent = [[304, 277], [288, 265], [295, 252], [326, 252], [343, 270], [332, 284], [313, 284], [313, 271], [323, 267]];
     line(g, serpent, '#143d50', 8); line(g, serpent, '#398c9c', 1); crown(g, 323, 264, 5, '#58f4e2');
+    paintPlayfieldArt(g, true);
     for (const w of c.walls) if (!w.gate) { line(g, [w.a, w.b], '#2e526a', 3); line(g, [w.a, w.b], '#69b7c7', 0.7); }
     g.restore();
     // Il mobile stesso cambia: pannelli a circuito, la finestra sul River resta il legame col 2007.
@@ -420,8 +551,10 @@ function futureBoard(g, c) {
     text(g, '+500.000', 548, 294, 22, WHITE, 'center', 'monospace');
     text(g, 'FINALE O ULTIMA PALLINA PERSA:', 548, 318, 5.5, MUTED, 'center');
     text(g, 'SI TORNA AL RIVER', 548, 332, 7, TINT.orbita, 'center');
+    livingBackglass(g, c, c.visual.time);
 }
 function futureField(g, c, time) {
+    livingPlayfield(g, c, time);
     for (const b of c.bumpers) bumper(g, b, time);
     target(g, c);
     const ready = Object.values(c.future.hits).every(n => n === 2);
@@ -429,9 +562,9 @@ function futureField(g, c, time) {
     const balls = activeBalls(c);
     for (const b of balls) if (!b.ramp && b.releaseAt <= c.sim) ball(g, b);
     for (const r of c.ramps) {
-        cached(g, `track:future:${r.id}`, layer => paintTrack(layer, r), [207, 5, 221, 250]);
+        cached(g, `track:future:${r.id}`, layer => paintTrack(layer, r), [202, 0, 232, 258]);
         const color = TINT[r.id], x = r.path[0][0], y = r.mouth[0][1];
-        for (let k = 0; k < 4; k++) { const p = rampPoint(r, (time * 120 + k * r.len / 4) % r.len); disc(g, p.x, p.y, 1.3, color); }
+        trackEnergy(g, c, r, time, r.lit > 0 || c.future.hits[r.id] === 2, balls);
         poly(g, [[x, y + 7], [x - 4, y + 14], [x + 4, y + 14]], color);
         text(g, r.id.toUpperCase(), x, y + 21, 5.5, color, 'center');
         for (const b of balls) if (b.ramp?.id === r.id) ball(g, b, color);
@@ -505,11 +638,12 @@ export function drawFlipper(g, c, def, bg, glass) {
     }
     if (future) {
         if (cabinetBehind(g, key, paint)) g.clearRect(0, 0, 640, 360); else cached(g, key, paint);
-        futureField(g, c, time); g.restore(); return;
+        futureField(g, c, time); plungerHint(g, c, time); g.restore(); return;
     }
     if (shake > 0) { g.fillStyle = INK; g.fillRect(0, 0, 640, 360); g.translate(Math.sin(time * 75) * shake * 1.3, Math.cos(time * 63) * shake); cached(g, key, paint); }
     else if (cabinetBehind(g, key, paint)) g.clearRect(0, 0, 640, 360);
     else cached(g, key, paint);
+    livingPlayfield(g, c, time);
     for (const [i, l] of c.lanes.entries()) {
         if (l.lit) glow(g, l.x, l.y, 17, RIONI[i], 0.55);
         disc(g, l.x, l.y, 5, '#06151d', l.lit ? RIONI[i] : '#47616b');
@@ -532,7 +666,7 @@ export function drawFlipper(g, c, def, bg, glass) {
         if (!rampOpen(c, r)) continue;
         g.save();
         if (r.id === 'super') { const rise = clamp((time - c.superOpenedAt) / 0.65, 0, 1); g.globalAlpha = rise; g.translate(0, (1 - rise) * 18); }
-        cached(g, `track:${r.id}`, layer => paintTrack(layer, r), r.id === 'super' ? [213, 50, 138, 202] : [213, 10, 215, 228]); rampLights(g, c, r, time);
+        cached(g, `track:${r.id}`, layer => paintTrack(layer, r), r.id === 'super' ? [208, 45, 148, 207] : [208, 0, 225, 238]); rampLights(g, c, r, time, balls);
         for (const b of balls) if (b.ramp?.id === r.id) ball(g, b, TINT[r.id]);
         g.restore();
     }
@@ -542,6 +676,19 @@ export function drawFlipper(g, c, def, bg, glass) {
     plunger(g, c); effects(g, c, time);
     // Il riflesso bianco rende visibili le palline vicino alle palette anche durante la festa.
     for (const b of balls) if (!b.ramp && b.y > 265 && b.releaseAt <= c.sim) ball(g, b);
-    board(g, c, time); mission(g, c, time);
+    board(g, c, time); mission(g, c, time); plungerHint(g, c, time);
+    g.restore();
+}
+// A pallina ferma, dove toccare per la molla (Andrea, 1 novembre: «sul telefono non è intuitivo premere al centro»): la
+// fascia centrale di flipper.js (press), tratteggiata, e la scritta che pulsa; sparisce appena si comincia a caricare.
+// Solo col dito (`c.touch`, da main.js): sul computer no, Andrea non la vuole.
+function plungerHint(g, c, time) {
+    if (!c.touch || !waiting(c) || c.holding) return;
+    const x0 = 320 - PLUNGER_ZONE + 4, x1 = 320 + PLUNGER_ZONE - 4, y0 = 196, y1 = 300, pulse = 0.8 + Math.sin(time * 4) * 0.2;
+    g.save(); g.globalAlpha = pulse; g.setLineDash([4, 3]);
+    g.strokeStyle = '#ffe08a'; g.lineWidth = 1.2; g.strokeRect(x0, y0, x1 - x0, y1 - y0); g.setLineDash([]);
+    box(g, 320 - 58, 262, 116, 32, '#07121c', '#ffe08a', 2);
+    text(g, 'TIENI PREMUTO QUI', 320, 272, 8.5, '#ffe08a', 'center', 'sans-serif', 800);
+    text(g, 'e lascia: MOLLA', 320, 285, 7, WHITE, 'center', 'sans-serif', 700);
     g.restore();
 }

src/engine/flipper.js

@@ -534,10 +534,17 @@ function collideFlipper(c, ball, side) {
 // --- Comandi: col mouse o col dito, prima del lancio tenere premuto carica la molla e lasciare lancia; in gioco
 // la metà sinistra della scena alza il flipper sinistro, la destra il destro, finché si tiene premuto (anche due dita).
 export function aimScreen(c, [x, y]) { if (!Number.isFinite(x) || !Number.isFinite(y)) return false; c.cursor = [x, y]; return true; }
+// Un tocco (Andrea, 1 novembre: «il pollice destro sulla metà destra, il sinistro sulla sinistra, al centro per lanciare»):
+// al centro della scena, a pallina ferma, carica la molla; ai lati alza la paletta di quel lato, anche prima del lancio.
+// La tastiera ('key': Spazio, freccia giù) carica sempre.
+export const PLUNGER_ZONE = 64; // mezza larghezza della fascia centrale, in pixel di scena (256-384 su 640)
 export function press(c, pointerId = 'ptr') {
     if (c.step !== 'play') return false;
-    if (waiting(c)) { if (c.holding) return false; c.holding = true; c.holdTime = 0; c.pointerId = pointerId; c.power = 0; return true; }
-    return hold(c, pointerId === 'mouse-right' || (c.cursor?.[0] ?? 320) >= 320 ? 'right' : 'left', pointerId, true);
+    const x = c.cursor?.[0] ?? 320;
+    if (waiting(c) && pointerId !== 'mouse-right' && (pointerId === 'key' || Math.abs(x - 320) < PLUNGER_ZONE)) {
+        if (c.holding) return false; c.holding = true; c.holdTime = 0; c.pointerId = pointerId; c.power = 0; return true;
+    }
+    return hold(c, pointerId === 'mouse-right' || x >= 320 ? 'right' : 'left', pointerId, true);
 }
 export function release(c, pointerId = 'ptr') {
     if (c.holding && c.pointerId === pointerId) return launch(c, powerAt(c.holdTime));

src/main.js

@@ -59,6 +59,7 @@ function showSound() {
     $('effects-volume').value = Math.round(ambience.volume * 100);
 }
 for (const ev of ['pointerdown', 'keydown']) addEventListener(ev, () => { music.unlock(); ambience.unlock(); }, { capture: true });
+addEventListener('pointerdown', e => { if (game?.closeup && 'touch' in game.closeup) game.closeup.touch = e.pointerType !== 'mouse'; }, { capture: true });
 // Il muto zittisce subito anche la voce che sta parlando.
 const toggleMute = () => { if (music.toggle()) voices.stop(); ambience.configure({ muted: music.muted }); saveAudio(); showSound(); };
 $('mute').addEventListener('click', toggleMute);
@@ -399,16 +400,52 @@ addEventListener('pagehide', () => leave(true));
 addEventListener('pageshow', () => leave(document.hidden));
 $('resume').addEventListener('click', closePause);
 $('pause-map').addEventListener('click', () => { closePause(); openMap(); });
-// Schermo intero dalla Pausa, dove il browser lo permette (su iPhone no: il pulsante sparisce); Esc o il pulsante per uscire.
+// I comandi di un minigioco (molla, pulsanti, carte, «Come si gioca») sono più alti del pannello dei verbi: con quelli
+// aperti la scena lascia intorno lo spazio che occupano davvero, fasce comprese (--below, misurato), così su uno schermo grande o a schermo
+// intero non finiscono sotto il bordo. Senza comandi vale la riserva del pannello in unità (style.css, #app).
+// La misura cambia la scena solo per differenze grandi: una frase di stato che va a capo (PONTE SX al flipper) non deve
+// ridimensionarla a ogni colpo, che a schermo sembra un piano che salta di qualche pixel (Andrea, 1 novembre). E «Come si
+// gioca» aperto non conta: se lo si apre, la pagina scorre invece di stringere la scena (e poi non torna larga).
+function fitControls() {
+    const app = $('app'), open = !!document.querySelector('#side > section[id$="-controls"]:not([hidden])');
+    if (!app.classList.toggle('controls', open)) { app.style.removeProperty('--below'); return; }
+    // Tutto quello che non è la scena 16:9: le fasce di audio, pausa e uscita e la pulsantiera (dalla larghezza, non
+    // dalla tela, che mentre cambia risoluzione può avere per un attimo un'altezza qualunque).
+    const box = app.getBoundingClientRect(), help = document.querySelector('#side details[id$="-help"][open]');
+    const extra = help ? help.getBoundingClientRect().height - help.querySelector('summary').getBoundingClientRect().height : 0;
+    const below = Math.ceil(box.height - box.width * 9 / 16 - extra), was = parseFloat(app.style.getPropertyValue('--below'));
+    // Cresce subito (niente deve finire sotto il bordo), cala solo per differenze grandi (niente salti a ogni frase).
+    if (!(below <= was + 1 && below >= was - 24)) app.style.setProperty('--below', `${below}px`);
+}
+// «Solo tavola» al flipper (Andrea, 1 novembre): nasconde la pulsantiera, la tavola prende tutta l'altezza; il browser
+// se lo ricorda (sul telefono in orizzontale la pulsantiera del flipper è già nascosta, style.css).
+let tableOnly = (() => { try { return storage?.getItem('regolo-solo-tavola') === '1'; } catch { return false; } })();
+$('table-only').addEventListener('click', e => {
+    tableOnly = !tableOnly;
+    try { storage?.setItem('regolo-solo-tavola', tableOnly ? '1' : '0'); } catch { /* niente memoria: vale per questa volta */ }
+    e.currentTarget.blur();
+});
+// Schermo intero, dove il browser lo permette (su iPhone no: i pulsanti spariscono): dalla Pausa, dal pulsante accanto ai
+// volumi (anche sul titolo) o col tasto F; Esc, il pulsante o F per uscire.
+function toggleFullscreen() {
+    if (!document.fullscreenEnabled) return false;
+    if (document.fullscreenElement) document.exitFullscreen();
+    else document.documentElement.requestFullscreen({ navigationUI: 'hide' }).catch(() => {});
+    return true;
+}
 {
-    const full = $('fullscreen');
-    if (!document.fullscreenEnabled) full.hidden = true;
+    const full = $('fullscreen'), hud = $('fullscreen-hud');
+    if (!document.fullscreenEnabled) full.hidden = hud.hidden = true;
     else {
-        full.addEventListener('click', () => {
-            if (document.fullscreenElement) document.exitFullscreen();
-            else document.documentElement.requestFullscreen({ navigationUI: 'hide' }).catch(() => {});
+        full.addEventListener('click', toggleFullscreen);
+        hud.addEventListener('click', e => { toggleFullscreen(); e.currentTarget.blur(); });
+        document.addEventListener('fullscreenchange', () => {
+            const on = !!document.fullscreenElement;
+            full.textContent = on ? 'Esci da schermo intero' : 'Schermo intero';
+            hud.setAttribute('aria-label', on ? 'Esci da schermo intero' : 'Schermo intero');
+            hud.title = on ? 'Esci da schermo intero (F o Esc)' : 'Schermo intero (F)';
+            hud.setAttribute('aria-pressed', on);
         });
-        document.addEventListener('fullscreenchange', () => { full.textContent = document.fullscreenElement ? 'Esci da schermo intero' : 'Schermo intero'; });
     }
 }
 $('to-title').addEventListener('click', () => {
@@ -838,6 +875,8 @@ window.addEventListener('keydown', e => {
         return;
     }
     if (debugKey(e)) return;
+    // F: schermo intero ovunque (nessun gioco usa la F; nella ricerca della mappa si scrive, sopra).
+    if ((e.key === 'f' || e.key === 'F') && !e.ctrlKey && !e.metaKey && !e.altKey && !e.repeat && toggleFullscreen()) { e.preventDefault(); return; }
     if (!$('tutorial').hidden) { if (e.key === 'Escape') closeTutorial(); return; }
     if (!$('credits').hidden) {
         if (e.key === 'Escape') { if (!$('face').hidden) $('face').hidden = true; else $('credits').hidden = true; }
@@ -1170,6 +1209,14 @@ function updateUi() {
     // Biliardo e GP di Fortezza: audio, pausa e uscita fuori dal quadro (al GP la pista passa negli angoli).
     $('stage').classList.toggle('biliardo', !!c && ['biliardo', 'rinquarto', 'gara', 'micro', 'cerbottana', 'condor', 'campana', 'flipper'].includes(story.closeups[c.id].type));
     $('stage').classList.toggle('briscola', !!cards);
+    const pinball = story.closeups[c?.id]?.type === 'flipper';
+    // Si gioca col dito? Dallo schermo all'apertura, poi da ogni tocco (pointerdown): la scritta della molla è per il dito.
+    if (pinball && c.touch === undefined) c.touch = matchMedia('(hover: none)').matches;
+    $('app').classList.toggle('flipper', pinball);
+    $('app').classList.toggle('table-only', pinball && tableOnly);
+    setProp($('table-only'), 'hidden', !pinball);
+    setText($('table-only'), tableOnly ? 'Pulsantiera' : 'Solo tavola');
+    fitControls();
     setAttr(canvas, 'aria-label', torch ? 'Fessura: sposta la luce con mouse, dito o frecce. Invio cerca il prossimo dettaglio; Esc esce.' : mg ? mg.label : "La scena dell'avventura");
     // La pagina che comincia a girare fa il suo fruscio.
     const step = game.closeup?.step ?? null;

src/version.js

@@ -1,5 +1,5 @@
 // La versione del gioco: la cambia scripts/bump.sh, insieme a package.json.
-export const VERSION = '0.1.71';
+export const VERSION = '0.1.73';
 
 // Immagini, musiche e voci con ?v=<versione>: a ogni versione l'indirizzo cambia e il browser le riscarica,
 // mentre fra una versione e l'altra le tiene in cache a lungo (nginx.conf).

style.css

@@ -20,15 +20,25 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 button, input { font-family: var(--font); }
 body { line-height: 1.5; }
 body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
-/* Il gioco è largo quanto può: tutta la finestra fino a 1280px, oppure quanto ci sta in altezza con il pannello sotto la
+/* Il gioco è largo quanto può: tutta la finestra (fino a 2560px: a schermo intero su un monitor grande), oppure quanto ci sta in altezza con il pannello sotto la
    scena 16:9. Il pannello (frase, poi verbi e inventario o le risposte di un dialogo) è alto --side-h unità --u, dove --u
-   è un centesimo della larghezza del gioco (1cqw) fra 8,75px e 12,8px: tutto il pannello cresce e cala col gioco, non con
+   è un centesimo della larghezza del gioco (1cqw) fra 8,75px e 25,6px: tutto il pannello cresce e cala col gioco, non con
    la finestra, e la riserva in altezza è esatta (prima erano 250px fissi, un centinaio di troppo, che in una finestra
    1040×590 costavano un terzo della scena). I due calc sono i due regimi di --u: proporzionale, e al minimo. */
-#app { --u: clamp(8.75px, 1cqw, 12.8px); --side-h: 13.3; container-type: inline-size;
-  width: min(100vw, 1280px, calc(100dvh / (9 / 16 + var(--side-h) / 100)), calc((100dvh - var(--side-h) * 8.75px) * 16 / 9));
+#app { --u: clamp(8.75px, 1cqw, 25.6px); --side-h: 13.3; container-type: inline-size;
+  width: min(100vw, 2560px, calc(100dvh / (9 / 16 + var(--side-h) / 100)), calc((100dvh - var(--side-h) * 8.75px) * 16 / 9));
   min-width: min(100vw, 320px); margin-block: auto; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
 
+/* Coi comandi di un minigioco aperti (main.js, fitControls) la scena lascia intorno il loro spazio vero, --below; ma non
+   scende sotto i 700px (nelle finestre basse si scorre un poco per arrivare ai comandi, come prima). */
+@media (min-width: 601px) and (min-height: 521px) {
+  #app.controls { width: min(100vw, 2560px, calc(100dvh / (9 / 16 + var(--side-h) / 100)), calc((100dvh - var(--side-h) * 8.75px) * 16 / 9),
+    max(calc((100dvh - var(--below, 0px)) * 16 / 9), 700px)); }
+  /* «Solo tavola» (Andrea): la pulsantiera del flipper nascosta, la tavola a tutta altezza. */
+  #app.controls.table-only { width: min(100vw, 2560px, calc((100dvh - var(--below, 88px)) * 16 / 9)); }
+  #app.table-only #side { display: none; }
+}
+
 #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; }
 #scene.pinball-hd { image-rendering: auto; }
@@ -54,7 +64,7 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
 #poker-controls summary, #briscola-controls summary { cursor: pointer; padding: 10px 0; }
 #poker-controls p, #briscola-controls p { max-width: 76em; }
 #bocce-controls { background: #242b28; padding: 10px 14px; border-top: 2px solid #897b57; font-size: 11px; }
-#bocce-status { color: #f3dcac; margin: 0 0 10px; line-height: 1.5; min-height: 1.5em; }
+#bocce-status { color: #f3dcac; margin: 0 0 10px; line-height: 1.5; min-height: 3em; } /* due righe: la scena non salta quando va a capo */
 .bocce-adjust { display: flex; align-items: center; justify-content: center; gap: 12px; }
 .bocce-adjust label { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; min-width: 120px; max-width: 280px; flex: 1; }
 #bocce-power { width: 100%; accent-color: #b9d392; min-height: 32px; margin: 0; }
@@ -113,6 +123,8 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
 #mute[aria-pressed="true"] { color: var(--dim); text-decoration: line-through; }
 #volume, #voice-volume { width: calc(7.8 * var(--u)); accent-color: var(--accent); cursor: pointer; }
 .sound-label { margin-left: 4px; font-size: 9px; color: var(--accent); }
+#fullscreen-hud { width: 30px; height: 30px; padding: 0; font: bold 17px system-ui, sans-serif; line-height: 1; color: var(--accent); background: none; border: 0; cursor: pointer; }
+#fullscreen-hud[aria-pressed="true"] { color: var(--blue); }
 
 /* La frase: una riga sola, alta sempre uguale (2,5 --u); una frase lunghissima finisce coi puntini invece di spostare la scena. */
 #sentence { height: calc(2.5 * var(--u)); line-height: 1.5; padding: .25em .6em; text-align: center; color: var(--blue); font-size: calc(1.2375 * var(--u)); font-weight: bold; background: var(--panel);
@@ -239,7 +251,7 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
 /* Mappa: la pianta del paese a gradini, i posti visti come cartellini, le strade come linee. */
 /* In alto a sinistra: Pausa e Mappa. */
 #corner { position: absolute; top: 6px; left: 6px; z-index: 2; display: flex; gap: 6px; }
-#map-button, #pause-button, #notebook-button, #spots-button, #back-button { font: bold calc(.9 * var(--u)) var(--font); padding: .35em .8em;
+#map-button, #pause-button, #notebook-button, #spots-button, #back-button, #table-only { font: bold calc(.9 * var(--u)) var(--font); padding: .35em .8em;
   color: var(--accent); background: rgba(27, 20, 32, .62); border: 0; border-radius: 18px; cursor: pointer; }
 #back-button { color: #1b1420; background: #9fd0ff; }
 /* Con molti pulsanti la Pausa può essere più alta della scena: «safe» la fa partire dall'alto e scorrere, invece di tagliare il titolo. */
@@ -355,6 +367,12 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
   #stage.biliardo { width: min(calc((100dvh - 90px) * 16 / 9), 68vw); }
   #app.presenta { justify-content: center; }
   #app.presenta #stage.biliardo { width: min(calc((100dvh - 44px) * 16 / 9), 100vw); }
+  /* Il flipper sul telefono (Andrea, 1 novembre): pollice sinistro sulla metà sinistra della scena, destro sulla destra,
+     al centro la molla. La scena prende tutta la larghezza e la pulsantiera sparisce: punti e palline sono sulla tavola. */
+  #app.flipper { justify-content: center; }
+  #app.flipper #side, #app.flipper #table-only { display: none; }
+  #app.flipper #stage.biliardo { width: min(calc((100dvh - 44px) * 16 / 9), 100vw); }
+  #app.flipper #stage.biliardo #closeup-close { position: absolute; top: 6px; bottom: auto; left: 86px; right: auto; margin: 0; min-height: 0; height: 30px; padding: 0 .9em; font-size: 10px; }
   #stage.briscola { width: min(calc((100dvh - 90px) * 16 / 9), 68vw); }
   #briscola-controls, #tressette-controls, #scopa-controls, #poker-controls { overflow-y: auto; min-height: 0; padding: 8px; font-size: 9px; }
   /* Nella colonna stretta accanto al tavolo: carte e segni su due colonne, parole che vanno a capo. */

tests/browser.mjs

@@ -508,6 +508,22 @@ try {
     assert.ok(stage0.width >= 1200, `a 1280×860 la scena è larga ${stage0.width} px`);
     assert.ok(await page.evaluate(() => document.documentElement.scrollHeight <= innerHeight), 'la pagina scorre in verticale a 1280×860');
     assert.ok(await page.evaluate(() => [...document.querySelectorAll('#verbs button')].every(b => b.scrollWidth <= b.clientWidth + 1 && b.scrollHeight <= b.clientHeight + 1)), 'verbi tagliati a 1280×860');
+    // Su uno schermo grande (1920×1080, a schermo intero) il gioco non si ferma più a 1280 px: prende tutta l'altezza.
+    await page.setViewportSize({ width: 1920, height: 1080 });
+    await page.waitForFunction(() => document.getElementById('stage').getBoundingClientRect().width > 1500);
+    assert.ok(await page.evaluate(() => document.documentElement.scrollHeight <= innerHeight && document.getElementById('app').getBoundingClientRect().height >= innerHeight - 2), 'a 1920×1080 il gioco prende tutta l\'altezza, senza scorrere');
+    await page.setViewportSize({ width: 1280, height: 860 });
+    // Schermo intero: il pulsante accanto ai volumi e il tasto F, per entrare e per uscire.
+    if (await page.evaluate(() => document.fullscreenEnabled)) {
+        await page.click('#fullscreen-hud');
+        await page.waitForFunction(() => !!document.fullscreenElement && document.getElementById('fullscreen-hud').getAttribute('aria-pressed') === 'true');
+        await page.keyboard.press('f');
+        await page.waitForFunction(() => !document.fullscreenElement);
+        await page.keyboard.press('F');
+        await page.waitForFunction(() => !!document.fullscreenElement);
+        await page.click('#fullscreen-hud');
+        await page.waitForFunction(() => !document.fullscreenElement && document.getElementById('fullscreen-hud').getAttribute('aria-pressed') === 'false');
+    } else assert.ok(await page.evaluate(() => document.getElementById('fullscreen-hud').hidden), 'senza schermo intero il pulsante sparisce');
     // Pausa: Esc o il pulsante fermano il gioco; Riprendi torna dov'eri; il titolo offre «Continua».
     await page.keyboard.press('Escape');
     await page.waitForSelector('#pause:not([hidden])');

tests/flipper-art.test.mjs

@@ -0,0 +1,36 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { newFlipper, futureLayout } from '../src/engine/flipper.js';
+import { flipperScene } from '../src/engine/flipper-art.js';
+
+test('il backglass segue i luoghi attraversati, senza modificare la partita', () => {
+    const c = newFlipper(91);
+    assert.equal(flipperScene(c), 'regolo');
+    for (const [x, y, scene] of [[403, 70, 'regolo'], [297, 90, 'rioni'], [220, 168, 'pieve'], [416, 180, 'trebbio'], [290, 135, 'fortezza'], [320, 202, 'regolo'], [320, 290, 'sieve']]) {
+        Object.assign(c.ball, { waiting: false, x, y });
+        const before = structuredClone(c);
+        assert.equal(flipperScene(c), scene, `zona ${x}, ${y}`);
+        assert.deepEqual(c, before);
+    }
+    for (const [id, scene] of [['sinistra', 'fortezza'], ['destra', 'trebbio'], ['super', 'cosmo'], ['orbita', 'cosmo'], ['ponte', 'fortezza'], ['spira', 'spira']]) {
+        c.ball.ramp = { id };
+        assert.equal(flipperScene(c), scene);
+    }
+    c.regolo.hit = 0.2;
+    assert.equal(flipperScene(c), 'regolo', 'il colpo al Regolo ha precedenza sulle rampe');
+});
+
+test('palline in attesa o trattenute non attivano immagini, il multiball ha una priorità stabile', () => {
+    const c = newFlipper(92);
+    c.extraBalls = [{ ...structuredClone(c.ball), x: 210, y: 170, waiting: false, releaseAt: c.sim + 2 }];
+    assert.equal(flipperScene(c), 'regolo');
+    Object.assign(c.ball, { waiting: false, ramp: { id: 'destra' } });
+    Object.assign(c.extraBalls[0], { releaseAt: 0, ramp: { id: 'sinistra' } });
+    const first = flipperScene(c);
+    [c.ball, c.extraBalls[0]] = [c.extraBalls[0], c.ball];
+    assert.equal(flipperScene(c), first);
+    c.ball = null; c.extraBalls = []; c.step = 'result';
+    assert.equal(flipperScene(c), 'regolo');
+    Object.assign(c, futureLayout(), { table: 'future' });
+    assert.equal(flipperScene(c), 'cosmo');
+});

tests/flipper.browser.mjs

@@ -25,24 +25,69 @@ try {
             game.act('use', 'river'); settle(game);
             game.choose(game.options().findIndex(o => o.text.startsWith('Una partita alla bona'))); settle(game);
         });
-        await page.waitForSelector('#bocce-controls:not([hidden])');
+        await page.waitForSelector('#bocce-controls:not([hidden])', { state: 'attached' });
         await page.waitForFunction(async () => (await import('/src/engine/render.js')).hasBackground('assets/closeups/river-flipper.png'));
         // Aspetta che finisca la dissolvenza d'ingresso: le immagini devono mostrare i colori della tavola.
         const readyAt = await page.evaluate(() => game.closeup.visual.time);
         await page.waitForFunction(t => game.closeup.visual.time > t + 1, readyAt);
         assert.equal(await page.locator('#scene').getAttribute('width'), '1280', 'il flipper usa la risoluzione doppia');
         assert.equal(await page.locator('#bocce-throw').textContent(), 'Lancia');
-        assert.ok(await page.locator('#flipper-help').isVisible());
-        assert.equal(await page.locator('#bocce-left').textContent(), '← Flipper');
-        assert.ok(!(await page.locator('#bocce-left').isDisabled()), 'i pulsanti dei flipper sono attivi anche prima del lancio');
+        if (!mobile) {
+            // «Solo tavola»: la pulsantiera sparisce e la tavola si allarga; ripremuto, torna tutto com'era.
+            const before = (await page.locator('#scene').boundingBox()).width;
+            await page.click('#table-only');
+            await page.waitForFunction(() => getComputedStyle(document.getElementById('side')).display === 'none');
+            await page.waitForFunction(w => document.getElementById('scene').getBoundingClientRect().width > w + 50, before);
+            assert.equal(await page.locator('#table-only').textContent(), 'Pulsantiera');
+            await page.click('#table-only');
+            await page.waitForFunction(() => getComputedStyle(document.getElementById('side')).display !== 'none');
+            assert.ok(await page.locator('#flipper-help').isVisible());
+            assert.equal(await page.locator('#bocce-left').textContent(), '← Flipper');
+            assert.ok(!(await page.locator('#bocce-left').isDisabled()), 'i pulsanti dei flipper sono attivi anche prima del lancio');
+        } else {
+            // Sul telefono in orizzontale (Andrea): niente pulsantiera, la scena larga sotto i due pollici.
+            assert.ok(!(await page.locator('#side').isVisible()), 'sul telefono la pulsantiera del flipper sparisce');
+            const w = (await page.locator('#scene').boundingBox()).width;
+            assert.ok(w > viewport.width * 0.6, `sul telefono la scena del flipper è larga ${w} px`);
+        }
         await page.screenshot({ path: `${out}/${name}-tavola.png` });
+        // «TIENI PREMUTO QUI» per la molla solo col dito (Andrea): sul computer la tavola non la dice.
+        assert.equal(await page.evaluate(() => !!game.closeup.touch), mobile, 'la scritta della molla solo sul telefono');
         const box = await page.locator('#scene').boundingBox(), P = (x, y) => [box.x + x / 640 * box.width, box.y + y / 360 * box.height];
         if (!mobile) await page.screenshot({ path: `${out}/desktop-dettaglio.png`, clip: { x: P(200, 0)[0], y: box.y, width: 248 / 640 * box.width, height: box.height } });
+        // Le apparizioni seguono zone vere del campo e cambiano effettivamente i pixel del backglass.
+        if (!mobile) {
+            await page.evaluate(() => {
+                window.artState = structuredClone(game.closeup); window.artUpdate = game.update;
+                game.update = () => {};
+            });
+            const pictures = new Set();
+            for (const [x, y, scene] of [[403, 70, 'regolo'], [290, 135, 'fortezza'], [416, 180, 'trebbio'], [220, 168, 'pieve'], [297, 90, 'rioni'], [320, 290, 'sieve']]) {
+                const result = await page.evaluate(async ({ x, y }) => {
+                    const { render } = await import('/src/engine/render.js');
+                    const { flipperScene } = await import('/src/engine/flipper-art.js');
+                    const c = game.closeup, ctx = document.querySelector('#scene').getContext('2d');
+                    Object.assign(c.ball, { x, y, waiting: false, releaseAt: 0, ramp: null });
+                    for (let i = 0; i < 4; i++) { c.visual.time += 0.4; render(ctx, game, { time: performance.now() }); }
+                    const pixels = ctx.getImageData(48, 476, 300, 176).data;
+                    let signature = 0;
+                    for (let i = 0; i < pixels.length; i++) signature = (Math.imul(signature, 31) + pixels[i]) | 0;
+                    return { scene: flipperScene(c), signature };
+                }, { x, y });
+                assert.equal(result.scene, scene); pictures.add(result.signature);
+                await page.screenshot({ path: `${out}/desktop-visione-${scene}.png` });
+            }
+            assert.equal(pictures.size, 6, 'sei illustrazioni diverse nel display');
+            await page.evaluate(() => {
+                Object.assign(game.closeup, window.artState); game.update = window.artUpdate;
+                delete window.artState; delete window.artUpdate;
+            });
+        }
         const cdp = mobile ? await page.context().newCDPSession(page) : null;
         const touch = (type, points) => cdp.send('Input.dispatchTouchEvent', { type, touchPoints: points.map(([x, y]) => ({ x, y })) });
         // La molla: tenendo premuto sulla scena, col mouse e col dito.
         if (mobile) {
-            await touch('touchStart', [P(440, 320)]);
+            await touch('touchStart', [P(320, 320)]); // al centro: la molla
             await page.waitForFunction(() => game.closeup.holding && game.closeup.power > 0.3, null, { polling: 'raf' });
             await touch('touchEnd', []);
         } else {
@@ -63,12 +108,6 @@ try {
             await page.waitForFunction(() => game.closeup.flippers.left.held.length === 0 && game.closeup.flippers.right.held.length > 0, null, { timeout: 3000 });
             await touch('touchEnd', []);
             await page.waitForFunction(() => game.closeup.flippers.right.held.length === 0);
-            // I pulsanti tenuti premuti.
-            const b = await page.locator('#bocce-left').boundingBox();
-            await touch('touchStart', [[b.x + b.width / 2, b.y + b.height / 2]]);
-            await page.waitForFunction(() => game.closeup.flippers.left.held.length > 0);
-            await touch('touchEnd', []);
-            await page.waitForFunction(() => game.closeup.flippers.left.held.length === 0);
         } else {
             await page.mouse.move(...P(400, 200)); await page.mouse.down();
             await page.waitForFunction(() => game.closeup.flippers.right.held.length > 0);

tests/flipper.test.mjs

@@ -130,13 +130,17 @@ test('funghi, bersagli, Regolo e corsie fanno punti solo a un urto nuovo; le qua
     assert.ok(!c.lanes[1].lit);
 });
 
-test('comandi: la molla si carica e si lancia lasciando; annullare non lancia; due dita, pulsanti e tasti', () => {
+test('comandi: la molla si carica al centro e si lancia lasciando, ai lati le palette anche prima del lancio; annullare non lancia; due dita, pulsanti e tasti', () => {
     const c = m.newFlipper(8, { level: 'bona' });
-    m.aimScreen(c, [440, 320]); assert.ok(m.press(c, 1)); run(c, 0.6);
+    // A pallina ferma i lati alzano le palette, il centro carica la molla.
+    m.aimScreen(c, [120, 300]); assert.ok(m.press(c, 5)); assert.ok(c.flippers.left.held.includes(5) && !c.holding, 'a sinistra, la paletta');
+    m.aimScreen(c, [520, 300]); assert.ok(m.press(c, 6)); assert.ok(c.flippers.right.held.includes(6) && !c.holding, 'a destra, la paletta');
+    m.release(c, 5); m.release(c, 6); assert.ok(m.waiting(c));
+    m.aimScreen(c, [320, 320]); assert.ok(m.press(c, 1)); run(c, 0.6);
     assert.ok(c.holding && c.power > 0.4 && c.power < 0.6, `molla a ${c.power.toFixed(2)}`);
     assert.ok(!m.release(c, 2), 'un altro dito non lancia');
     m.cancel(c, 1); assert.ok(m.waiting(c) && !c.holding, 'annullata la carica: niente lancio');
-    m.aimScreen(c, [440, 320]); m.press(c, 1); run(c, 0.6); assert.ok(m.release(c, 1)); assert.ok(!m.waiting(c));
+    m.aimScreen(c, [300, 320]); m.press(c, 1); run(c, 0.6); assert.ok(m.release(c, 1)); assert.ok(!m.waiting(c));
     m.aimScreen(c, [250, 200]); assert.ok(m.press(c, 3)); assert.ok(c.flippers.left.held.includes(3));
     m.aimScreen(c, [400, 200]); assert.ok(m.press(c, 4)); assert.ok(c.flippers.right.held.includes(4));
     assert.ok(m.release(c, 3)); assert.ok(!c.flippers.left.held.length && c.flippers.right.held.includes(4));

tests/tressette.browser.mjs

@@ -13,18 +13,32 @@ async function tap(page, mode, selector) {
     if (mode === 'touch') { const r = await page.locator(selector).boundingBox(); await page.touchscreen.tap(r.x + r.width / 2, r.y + r.height / 2); }
     else await page.click(selector);
 }
+// Una battuta che compare proprio in quell'istante (le battute del giocatore partono dal ciclo del gioco) si prende il
+// tasto e la salta, come nel gioco: allora, come un giocatore, si ripreme. Al più tre volte.
+async function pressUntil(page, key, done, arg) {
+    for (let i = 0; i < 3; i++) {
+        await page.keyboard.press(key);
+        if (await page.evaluate(done, arg)) return;
+        await page.waitForFunction(() => !game.speech);
+    }
+}
 async function playCard(page, mode, index, signal) {
-    // Un tasto premuto mentre qualcuno parla salta la battuta e basta (come nel gioco): si aspetta che abbia finito.
-    if (mode === 'keyboard') await page.waitForFunction(() => !game.speech);
+    // Un tasto premuto mentre qualcuno parla salta la battuta e basta, e il segnale si sceglie solo quando tocca a noi
+    // (come nel gioco): si aspetta che la battuta sia finita e che si possa giocare.
+    if (mode === 'keyboard') {
+        await page.evaluate(async () => { window.tressetteRules ??= await import('/src/engine/tressette.js'); });
+        await page.waitForFunction(() => !game.speech && tressetteRules.canPlay(game.closeup));
+    }
     if (signal) {
-        if (mode === 'keyboard') await page.keyboard.press(signal[0]);
+        if (mode === 'keyboard') await pressUntil(page, signal[0], s => game.closeup.signal === s, signal);
         else await tap(page, mode, `#tressette-${signal}`);
         assert.equal(await page.evaluate(() => game.closeup.signal), signal);
     }
     if (mode === 'keyboard') {
-        await page.keyboard.press(String((index + 1) % 10));
+        await pressUntil(page, String((index + 1) % 10), i => game.closeup.selected === i, index);
         assert.equal(await page.evaluate(() => game.closeup.selected), index);
-        await page.keyboard.press('Enter');
+        const held = await page.evaluate(() => game.closeup.hands[0].length);
+        await pressUntil(page, 'Enter', n => game.closeup.hands[0].length < n || !!game.closeup.refused, held);
         return;
     }
     const at = await page.evaluate(async i => {