diff --git a/Dockerfile b/Dockerfile
index 97c1b6d..dbe692f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,6 +13,8 @@ COPY assets/voices /usr/share/nginx/html/assets/voices
 COPY assets/credits /usr/share/nginx/html/assets/credits
 COPY assets/effects /usr/share/nginx/html/assets/effects
 COPY assets/closeups /usr/share/nginx/html/assets/closeups
+COPY assets/favicon /usr/share/nginx/html/assets/favicon
+COPY assets/video /usr/share/nginx/html/assets/video
 
 # Le immagini e i font citati da index.html e style.css prendono ?v=<versione>, come quelli caricati dal codice.
 RUN cd /usr/share/nginx/html \
diff --git a/assets/video/biliardo.jpg b/assets/video/biliardo.jpg
new file mode 100644
index 0000000..9b2b22f
Binary files /dev/null and b/assets/video/biliardo.jpg differ
diff --git a/assets/video/biliardo.mp4 b/assets/video/biliardo.mp4
new file mode 100644
index 0000000..aee163e
Binary files /dev/null and b/assets/video/biliardo.mp4 differ
diff --git a/assets/video/bocce.jpg b/assets/video/bocce.jpg
new file mode 100644
index 0000000..c827a4d
Binary files /dev/null and b/assets/video/bocce.jpg differ
diff --git a/assets/video/bocce.mp4 b/assets/video/bocce.mp4
new file mode 100644
index 0000000..d2f4b23
Binary files /dev/null and b/assets/video/bocce.mp4 differ
diff --git a/assets/video/briscola.jpg b/assets/video/briscola.jpg
new file mode 100644
index 0000000..63a6c00
Binary files /dev/null and b/assets/video/briscola.jpg differ
diff --git a/assets/video/briscola.mp4 b/assets/video/briscola.mp4
new file mode 100644
index 0000000..b1655ea
Binary files /dev/null and b/assets/video/briscola.mp4 differ
diff --git a/assets/video/scopa.jpg b/assets/video/scopa.jpg
new file mode 100644
index 0000000..9a4c982
Binary files /dev/null and b/assets/video/scopa.jpg differ
diff --git a/assets/video/scopa.mp4 b/assets/video/scopa.mp4
new file mode 100644
index 0000000..4f3b8c1
Binary files /dev/null and b/assets/video/scopa.mp4 differ
diff --git a/assets/video/tressette.jpg b/assets/video/tressette.jpg
new file mode 100644
index 0000000..6f6c9a8
Binary files /dev/null and b/assets/video/tressette.jpg differ
diff --git a/assets/video/tressette.mp4 b/assets/video/tressette.mp4
new file mode 100644
index 0000000..7372d77
Binary files /dev/null and b/assets/video/tressette.mp4 differ
diff --git a/index.html b/index.html
index db2b592..71d1d42 100644
--- a/index.html
+++ b/index.html
@@ -94,7 +94,7 @@
     <section id="tutorial" class="overlay" hidden aria-labelledby="tutorial-title">
       <h2 id="tutorial-title">Come si gioca</h2>
       <video id="tutorial-video" controls playsinline preload="metadata"></video>
-      <button id="tutorial-close">Torna al gioco</button>
+      <div class="buttons"><button id="tutorial-close">Torna al gioco</button></div>
     </section>
     <section id="credits" class="overlay" hidden aria-label="Ringraziamenti">
       <h2>Ringraziamenti</h2>
diff --git a/src/story/story.js b/src/story/story.js
index 1e2ecaf..aa3fb5f 100644
--- a/src/story/story.js
+++ b/src/story/story.js
@@ -203,6 +203,14 @@ export const story = {
             paper: '#fbe6bc',
         },
     },
+    // I video «Come si gioca» (video/SCALETTA-CARTE.md): il pulsante «Guarda il video» nell'aiuto di ogni gioco.
+    tutorials: {
+        briscola: { title: 'Come si gioca: la briscola', src: 'assets/video/briscola.mp4', poster: 'assets/video/briscola.jpg' },
+        tressette: { title: 'Come si gioca: il tressette ai 21', src: 'assets/video/tressette.mp4', poster: 'assets/video/tressette.jpg' },
+        scopa: { title: 'Come si gioca: la scopa', src: 'assets/video/scopa.mp4', poster: 'assets/video/scopa.jpg' },
+        bocce: { title: 'Come si gioca: le bocce', src: 'assets/video/bocce.mp4', poster: 'assets/video/bocce.jpg' },
+        biliardo: { title: 'Come si gioca: il biliardo', src: 'assets/video/biliardo.mp4', poster: 'assets/video/biliardo.jpg' },
+    },
     characters: {
         // [DA ANDREA: chi è] Figura inventata, nessuna persona reale.
         giocatore_carte: { name: 'Il giocatore di carte', color: '#edc476', sprite: 'assets/characters/giocatore-carte.json' },
diff --git a/style.css b/style.css
index c54696d..f7dd1a8 100644
--- a/style.css
+++ b/style.css
@@ -202,8 +202,8 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
   color: var(--accent); background: rgba(27, 20, 32, .62); border: 0; border-radius: 18px; cursor: pointer; }
 #pause { z-index: 3; background: rgba(15, 10, 20, .9); }
 /* Il player dei video «Come si gioca»: sopra a tutto, il video grande quanto può. */
-#tutorial { z-index: 4; background: rgba(10, 8, 14, .96); padding: 8px; }
-#tutorial video { max-width: 100%; max-height: calc(100% - 7em); background: #000; }
+#tutorial { position: fixed; inset: 0; z-index: 20; background: rgba(10, 8, 14, .97); padding: 8px; }
+#tutorial video { max-width: min(100%, 1100px); max-height: calc(100dvh - 9em); background: #000; }
 .tutorial-open { display: block; margin: 4px 0 8px; min-height: 36px; padding: 6px 12px; background: #4a3a1c; color: #ffe09b; border: 2px solid #c8a24a; font: inherit; cursor: pointer; }
 .pause-buttons { flex-direction: column; align-items: stretch; min-width: min(70%, 16em); }
 #pause .hint { color: var(--dim); max-width: 34em; text-align: center; }
@@ -284,7 +284,7 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
 @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) { #tutorial { position: fixed; inset: 0; z-index: 10; }
+@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) {
diff --git a/tests/briscola.browser.mjs b/tests/briscola.browser.mjs
index a20e1dc..50d57f0 100644
--- a/tests/briscola.browser.mjs
+++ b/tests/briscola.browser.mjs
@@ -91,6 +91,20 @@ try {
         await page.waitForSelector('#briscola-controls:not([hidden])');
         // Il tavolo ha la sua musica (il valzer delle carte), non quella dell'oratorio.
         await page.waitForFunction(() => music.want === 'assets/audio/carte.mp3');
+        if (name === 'desktop-mouse') {
+            // Il video «Come si gioca»: dall'aiuto del tavolo si apre il player, il gioco si ferma, Esc torna al tavolo.
+            await page.click('#briscola-controls summary');
+            await page.click('#briscola-controls .tutorial-open');
+            await page.waitForSelector('#tutorial:not([hidden])');
+            assert.match(await page.locator('#tutorial-video').getAttribute('src'), /assets\/video\/briscola\.mp4\?v=/);
+            assert.equal(await page.locator('#tutorial-title').textContent(), 'Come si gioca: la briscola');
+            assert.equal(await page.evaluate(() => music.hold), true, 'la musica del gioco tace');
+            await page.screenshot({ path: `${out}/briscola-video.png` });
+            await page.keyboard.press('Escape');
+            assert.ok(await page.isHidden('#tutorial'));
+            assert.equal(await page.evaluate(() => !music.hold && game.closeup?.id), 'briscola', 'si torna al tavolo');
+            await page.click('#briscola-controls summary');
+        }
         assert.ok(await page.isHidden('#bocce-controls'));
         const scene = await page.locator('#scene').boundingBox(), exit = await page.locator('#closeup-close').boundingBox();
         assert.ok(exit.y >= scene.y + scene.height, 'uscita fuori dal tavolo');
diff --git a/tests/story.test.mjs b/tests/story.test.mjs
index d865e44..e1a2914 100644
--- a/tests/story.test.mjs
+++ b/tests/story.test.mjs
@@ -606,6 +606,19 @@ test('al Trebbio Andrea ci sale a piedi: la torre lo sa, e lui ha trovato la sua
     assert.ok(settle(g).some(s => s.who === 'castello' && s.text === 'Il castello.'));
 });
 
+// Il favicon c'era in pagina ma non nell'immagine Docker (404 online, 26 ottobre): ogni cartella di assets che il gioco
+// usa deve essere fra quelle copiate, e ogni video «Come si gioca» deve esistere.
+test('ogni cartella di assets usata dal gioco finisce nell\'immagine Docker', async () => {
+    const { readdirSync } = await import('node:fs');
+    const root = new URL('../', import.meta.url);
+    const copied = new Set(readFileSync(new URL('Dockerfile', root), 'utf8').match(/^COPY assets\/(\S+)\s/gm).map(l => l.split(' ')[1].slice(7)));
+    const files = ['index.html', 'style.css', ...readdirSync(new URL('src/', root), { recursive: true }).filter(f => f.endsWith('.js')).map(f => 'src/' + f)];
+    const used = new Set(files.flatMap(f => [...readFileSync(new URL(f, root), 'utf8').matchAll(/assets\/([a-z0-9_-]+)\//g)].map(m => m[1])));
+    // raw e generated sono cartelle di lavoro, citate solo nei commenti.
+    assert.deepEqual([...used].filter(d => !copied.has(d) && !['raw', 'generated'].includes(d)).sort(), []);
+    for (const t of Object.values(story.tutorials)) for (const f of [t.src, t.poster]) assert.ok(existsSync(new URL(f, root)), f);
+});
+
 test('i file che il Docker copia sono leggibili da tutti (nginx gira con un altro utente)', async () => {
     const { readdirSync, statSync } = await import('node:fs');
     const root = new URL('../', import.meta.url);
diff --git a/video/pubblica.py b/video/pubblica.py
new file mode 100644
index 0000000..a649f8e
--- /dev/null
+++ b/video/pubblica.py
@@ -0,0 +1,41 @@
+#!/usr/bin/env python3
+"""Porta i video «Come si gioca» nel gioco (assets/video/, story.tutorials): da quando si arriva nel posto del gioco
+(la prima battuta del narratore), più piccoli e compressi per il web, con una copertina.
+
+    python3 video/pubblica.py briscola tressette scopa bocce biliardo
+
+Prima la ripresa e il montaggio (video/SCALETTA-CARTE.md): legge video/out/tutorial-<gioco>.mp4 e il cues.json della
+ripresa. Il titolo del gioco all'inizio della ripresa non serve, e col ritaglio dei tavoli verrebbe tagliato ai lati.
+"""
+import json
+import subprocess
+import sys
+from pathlib import Path
+
+VIDEO = Path(__file__).resolve().parent
+GIOCO = VIDEO.parent
+RIPRESE = Path.home() / "Workspaces/qemu/qemu-iso-lab/artifacts/tour/out"
+
+
+def durata(f: Path) -> float:
+    return float(subprocess.run(["ffprobe", "-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", str(f)],
+                                capture_output=True, text=True, check=True).stdout)
+
+
+for gioco in sys.argv[1:]:
+    ripresa = RIPRESE / f"tutorial-{gioco}"
+    cues = json.loads((ripresa / "cues.json").read_text())["cues"]
+    # Lo stesso scarto di monta.py: la ripresa parte un po' prima del copione.
+    scarto = max(0.0, durata(ripresa / "raw.mkv") - (cues[-1]["end"] + 1.2))
+    inizio = max(0.0, cues[0]["start"] + scarto - 0.4)
+    dentro, fuori = VIDEO / "out" / f"tutorial-{gioco}.mp4", GIOCO / "assets" / "video" / f"{gioco}.mp4"
+    fuori.parent.mkdir(exist_ok=True)
+    subprocess.run(["ffmpeg", "-loglevel", "error", "-y", "-ss", f"{inizio:.2f}", "-i", str(dentro),
+                    "-vf", "scale=trunc(iw*0.75/2)*2:-2", "-c:v", "libx264", "-preset", "slow", "-crf", "27", "-pix_fmt", "yuv420p",
+                    "-af", "afade=t=in:d=0.4", "-c:a", "aac", "-b:a", "96k", "-movflags", "+faststart", str(fuori)], check=True)
+    # La copertina: un momento al tavolo, a un terzo del video.
+    subprocess.run(["ffmpeg", "-loglevel", "error", "-y", "-ss", f"{durata(fuori) / 3:.1f}", "-i", str(fuori), "-frames:v", "1",
+                    "-q:v", "4", str(fuori.with_suffix(".jpg"))], check=True)
+    for f in (fuori, fuori.with_suffix(".jpg")):
+        f.chmod(0o644)
+    print(f"-> {fuori} ({durata(fuori):.0f} s, {fuori.stat().st_size / 1e6:.1f} MB), da {inizio:.1f} s")