feat(striscia): registra cambi e time out per set (#18)

La striscia salva ora storico cambi formazione e time out per ogni
set, con riferimento al punteggio al momento dell'evento anziché a
un timestamp: startTimeout accumula in set.timeouts, confermaCambi
in set.cambi. Il referto elenca entrambi ordinati per punteggio.

src/referto.js

@@ -44,6 +44,31 @@ export function buildRefertoHtml(state, now = new Date()) {
           </div>`
     }
 
+    const nomeTeam = (team) => team === 'home' ? nomi.home : nomi.guest
+
+    const eventiHtml = (s) => {
+        const eventi = [
+            ...(s.timeouts ?? []).map(t => ({ tipo: 'timeout', ...t })),
+            ...(s.cambi ?? []).map(c => ({ tipo: 'cambio', ...c })),
+        ].sort((a, b) => (a.punteggio.home + a.punteggio.guest) - (b.punteggio.home + b.punteggio.guest))
+
+        if (eventi.length === 0) return ''
+
+        const righe = eventi.map(e => {
+            const sul = `sul ${e.punteggio.home}-${e.punteggio.guest}`
+            const testo = e.tipo === 'timeout'
+                ? `Time out <strong>${nomeTeam(e.team)}</strong> ${sul}`
+                : `Cambio <strong>${nomeTeam(e.team)}</strong>: entra ${e.in} per ${e.out} ${sul}`
+            return `<li class="evento evento-${e.tipo}">${testo}</li>`
+        }).join('')
+
+        return `
+          <div class="eventi-set">
+            <div class="eventi-label">Cambi e time out</div>
+            <ul class="eventi-lista">${righe}</ul>
+          </div>`
+    }
+
     const setsHtml = setReali.map((s, i) => {
         let h = 0, g = 0
         const punti = []
@@ -68,7 +93,7 @@ export function buildRefertoHtml(state, now = new Date()) {
           <div class="form-inizio">
             <div class="form-inizio-label">Formazione di partenza</div>
             ${formazioneHtml(s.formInizio)}
-          </div>
+          </div>${eventiHtml(s)}
           <div class="punti-grid">${puntiHtml || '<em style="color:#999;font-size:11px">Nessun punto registrato</em>'}</div>
         </div>`
     }).join('')
@@ -100,6 +125,11 @@ export function buildRefertoHtml(state, now = new Date()) {
     .punto-h { background: #d0e8ff; color: #003a6e; }
     .punto-g { background: #ffddc0; color: #6e2700; }
 
+    .eventi-set { padding: 8px 10px; border-bottom: 1px solid #eee; }
+    .eventi-label { font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 5px; }
+    .eventi-lista { list-style: none; }
+    .evento { font-size: 12px; padding: 2px 0; }
+
     .form-inizio { padding: 8px 10px; border-bottom: 1px solid #eee; background: #fafafa; }
     .form-inizio-label { font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 7px; }
     .form-row { display: flex; gap: 40px; }