Il quadro del palio, ridisegnato in stile gioco dalla foto vera: incorniciato alla fine e nei Ringraziamenti

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

docs/IDEE.md

@@ -23,6 +23,11 @@ si segna qui con la data e il punto di `src/story/story.js` dove sta; le persone
   - il passamano dei mattoni.
   Va d'accordo con `docs/PROGETTO.md` (le sfide del Palietto: passamano, carretta, vaglio della rena): da decidere
   se le sfide restano dentro la storia, diventano giochi a parte dopo il finale, o tutte e due le cose.
+  **Deciso da Andrea (2026-10-24)**: il primo capitolo è l'avventura e finisce col palio ritrovato nella fessura. Il
+  **secondo** è fatto di giochi: le lavanderine (o bandierine? da chiedere), la caccia al tesoro, le carrette, il
+  passamano dei mattoni. Lì si sceglie il rione, e si gareggia come in una specie di olimpiade da sala giochi
+  anni '80 (pulsanti premuti a raffica, record da battere). Quindi la scelta del rione all'inizio dell'avventura
+  potrebbe spostarsi al secondo capitolo: da decidere insieme (vedi «Scelta del rione» in `docs/STATO.md`).
 - **Il Maestro Bacci** (Francesco Bacci, 2026-10-23): il nonno di Francesco. Se e come farlo comparire (un
   personaggio, una citazione, un luogo) lo decidono Andrea e Francesco.
 

index.html

@@ -47,9 +47,14 @@
       <button id="skip-intro">Salta</button>
     </section>
     <section id="ending" class="overlay" hidden>
-      <h2>Fine del primo capitolo</h2>
-      <p>Il palio è laggiù, nel buio della Fortezza. E il Regolo pure. Il resto della storia è ancora da scrivere.</p>
-      <p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
+      <div class="ending-row">
+        <figure class="palio"><img src="assets/credits/palio.png" alt="Il palio del 2007: la strada bianca che sale alla Fortezza, i ragazzi in fila, l'omino con la maglia rossa e le braccia alzate"><figcaption>Il palio del 2007, dipinto dai ragazzi delle medie</figcaption></figure>
+        <div>
+          <h2>Fine del primo capitolo</h2>
+          <p>Il palio è laggiù, nel buio della Fortezza. E il Regolo pure. Il resto della storia è ancora da scrivere.</p>
+          <p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
+        </div>
+      </div>
       <div class="buttons"><button id="restart">Ricomincia</button><button class="open-credits secondary">Ringraziamenti</button></div>
     </section>
     <section id="notebook" class="overlay" hidden aria-label="Taccuino">

src/main.js

@@ -130,7 +130,7 @@ function fillReel() {
     const all = pictures.flatMap((p, i) => i % 4 === 3 && faces.length ? [p, faces[(i >> 2) % faces.length]] : [p]);
     for (const src of [...all, ...all]) {
         const img = Object.assign(document.createElement('img'), { src, alt: '', loading: 'lazy', decoding: 'async' });
-        if (src.includes('/credits/')) img.className = 'face';
+        if (src.includes('/credits/')) img.className = src.endsWith('palio.png') ? 'palio' : 'face';
         track.append(img);
     }
 }
@@ -157,6 +157,7 @@ function rollCredits() {
 }
 function showFace({ name, face }) {
     $('face').querySelector('img').src = face;
+    $('face').querySelector('img').classList.toggle('palio', face.endsWith('palio.png'));
     $('face').querySelector('figcaption').textContent = name;
     $('face').hidden = false;
 }

src/story/story.js

@@ -90,7 +90,7 @@ export const story = {
         { role: 'Sfondi', names: ['dalle fotografie di San Piero di Andrea'] },
         // Chi ci ha mandato foto, ricordi o idee: una riga per contributo, si allunga man mano.
         { role: 'Fotografie', names: [{ name: 'Mariano Mirannalti (l\'interno della Pieve)', face: 'assets/credits/mariano.png' }] },
-        { role: 'Opere d\'arte nel gioco', names: ['Simone Rocchi (l\'omino di ferro del tennis della chiesa)'] },
+        { role: 'Opere d\'arte nel gioco', names: [{ name: 'il palio del 2007, dipinto dai ragazzi delle medie', face: 'assets/credits/palio.png' }, 'Simone Rocchi (l\'omino di ferro del tennis della chiesa)'] },
         { role: 'Voci', names: ['XTTS-v2 di Coqui'] },
         { role: 'Carattere', names: ['Press Start 2P di CodeMan38 (licenza OFL)'] },
         { role: 'Programmazione', names: ['Manzolo, con Claude e Codex'] },

style.css

@@ -193,6 +193,19 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
 #credits-reel .track { display: flex; gap: 10px; height: 100%; width: max-content; animation: reel 240s linear infinite; }
 #credits-reel img { flex: none; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; border-radius: 6px; border: 2px solid #3a2d42; }
 #credits-reel img.face { aspect-ratio: 1; border-color: var(--accent); }
+#credits-reel img.palio { aspect-ratio: 2 / 3; border-color: var(--accent); }
+/* La fine: il quadro del palio accanto alle parole (sotto, sugli schermi stretti). */
+#ending .ending-row { display: flex; align-items: center; justify-content: center; gap: 1.2em; max-width: 92%; min-height: 0; }
+#ending figure.palio { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3em; flex: none; }
+#ending figure.palio img, #face img.palio { height: min(52vh, 300px); max-height: 46vmin; aspect-ratio: 2 / 3; image-rendering: pixelated;
+  /* La cornice: legno dorato a gradini, con il passe-partout chiaro fra la cornice e la tela. */
+  box-sizing: content-box; padding: 5px; background: #efe3c0; border: 12px solid transparent;
+  border-image: linear-gradient(135deg, #fbe39a, #c08a3a 22%, #f3cf75 40%, #8a5420 58%, #e0ad55 78%, #6b3f18) 12;
+  outline: 3px solid #3a230e; box-shadow: inset 0 0 0 1px #c9b48a, 0 0 0 5px #2a1f30, 0 10px 24px rgba(0,0,0,.6); }
+#face img.palio { height: min(56vmin, 380px); border-radius: 0; }
+#ending figure.palio figcaption { font-size: clamp(6.5px, .85vw, 9px); color: var(--dim); max-width: 22em; }
+#ending .ending-row > div { max-width: 26em; text-align: center; }
+@media (max-aspect-ratio: 1/1) { #ending .ending-row { flex-direction: column; } #ending figure.palio img { height: 30vh; } }
 @keyframes reel { to { transform: translateX(-50%); } }
 @media (prefers-reduced-motion: reduce) { #credits-reel .track { animation: none; } }
 #credits .credit-face { all: unset; display: block; cursor: pointer; color: var(--accent); text-decoration: underline dotted; text-underline-offset: .25em; }
@@ -200,7 +213,7 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins
 #face { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
   background: rgba(15, 10, 20, .92); cursor: pointer; z-index: 1; }
 #face[hidden] { display: none; }
-#face img { width: min(60vmin, 384px); aspect-ratio: 1; image-rendering: pixelated; border: 3px solid var(--accent); border-radius: 8px; }
+#face img { height: min(60vmin, 384px); width: auto; max-width: 90%; image-rendering: pixelated; border: 3px solid var(--accent); border-radius: 8px; }
 #face figcaption { color: var(--ink); font-size: clamp(9px, 1.4vw, 14px); text-align: center; padding: 0 1em; }
 #credits dd { margin: 0; text-align: left; color: var(--ink); font-size: clamp(8px, 1.15vw, 12px); line-height: 1.6; font-weight: bold; }
 #credits .legal { color: var(--dim); font-size: clamp(7.2px, 0.86vw, 9.36px); opacity: .8; }