feat(modal): display match stats when available

.agents/project-memory.md

@@ -180,6 +180,11 @@ Static web app showing the FIFA World Cup 2026 (Mexico/USA/Canada, 48 teams) —
 
 ## Patterns for future changes
 
+### Match stats no modal (2026-06-14)
+- **Campo opcional `stats` em `results.json`** por jogo: `{ possession: {home,away}, shots: {home,away}, cards: {home,away} }` (`home`/`away` seguem `homeTeam`/`awayTeam` de `matches.json`; valores = posse em %, finalizações totais, cartões amarelos). Primeiro preenchido no jogo 6 (BRA 1–1 MAR) como teste do deploy: posse 51/49, finalizações 12/14, cartões 2/0 (fontes ESPN/Opta/Sofascore).
+- **`modal.js` renderiza stats reais quando `result.stats` existe**; senão mantém o placeholder com `—` + nota `modal.statsSoon` (backward-compatível, verificado nos jogos 6 com stats e 4 sem). `statRow(home, label, away)` agora recebe valores; antes só o label.
+- Reusa as chaves i18n já existentes: `modal.possession` / `modal.shots` / `modal.cards`. Adicionar stats a mais jogos = só editar `results.json`, nenhum código muda.
+
 ### How to update real-world data (scores, schedule)
 Follow `how-refresh-data.md` (project root). In short:
 1. Edit `data/results.json` (scores/status) or `data/matches.json` (schedule, rare).

assets/js/modal.js

@@ -49,6 +49,7 @@ function renderContent(matchId) {
   if (!match) return;
   const result = resultByMatchId.get(matchId);
   const status = result?.status ?? 'scheduled';
+  const s = result?.stats;
   const stadium = stadiumByName.get(match.stadium);
   const slots = resolveBracketTeams(match);
   const numberFmt = new Intl.NumberFormat(getLocale());
@@ -87,10 +88,10 @@ function renderContent(matchId) {
       </dl>
       <section class="modal-stats" aria-label="${t('modal.stats')}">
         <h3>${t('modal.stats')}</h3>
-        ${statRow(t('modal.possession'))}
-        ${statRow(t('modal.shots'))}
-        ${statRow(t('modal.cards'))}
-        <p class="modal-stats-note">${t('modal.statsSoon')}</p>
+        ${statRow(s ? `${s.possession.home}%` : '—', t('modal.possession'), s ? `${s.possession.away}%` : '—')}
+        ${statRow(s ? s.shots.home : '—', t('modal.shots'), s ? s.shots.away : '—')}
+        ${statRow(s ? s.cards.home : '—', t('modal.cards'), s ? s.cards.away : '—')}
+        ${s ? '' : `<p class="modal-stats-note">${t('modal.statsSoon')}</p>`}
       </section>
       <div class="modal-actions">
         <button class="btn-primary" id="modal-ics">${t('modal.addCalendar')}</button>
@@ -115,12 +116,12 @@ function teamHTML(slot) {
     </div>`;
 }
 
-// placeholder row — real values will replace the dashes when stats data exists
-function statRow(label) {
+// stat row — shows real home/away values, or "—" when no stats data exists
+function statRow(home, label, away) {
   return `
     <div class="modal-stat-row">
-      <span>—</span>
+      <span>${home}</span>
       <span class="modal-stat-label">${label}</span>
-      <span>—</span>
+      <span>${away}</span>
     </div>`;
 }

data/results.json

@@ -33,7 +33,12 @@
     "matchId": 6,
     "homeScore": 1,
     "awayScore": 1,
-    "status": "finished"
+    "status": "finished",
+    "stats": {
+      "possession": { "home": 51, "away": 49 },
+      "shots": { "home": 12, "away": 14 },
+      "cards": { "home": 2, "away": 0 }
+    }
   },
   {
     "matchId": 7,