feat(worldcup): flags in the fixture selector chips

Each chip shows both nations' flags around the team names, so the Round-of-32
picker is scannable at a glance.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: valvesss

site/src/pages/worldcup.astro

@@ -68,7 +68,11 @@ const pct = (x) => (x * 100).toFixed(0) + '%';
     {wcl.next ? <div class="nm reveal">
       <div class="nm-chips" id="nm-chips">
         {wcl.upcoming.map((f, i) => <button class="nm-chip" data-i={i}>
-          <span class="nm-chip-d">{f.date.slice(5)}</span>{f.home} × {f.away}</button>)}
+          <span class="nm-chip-d">{f.date.slice(5)}</span>
+          {f.home_flag && <img class="nm-chip-flag" src={`https://flagcdn.com/w20/${f.home_flag}.png`} alt="" width="18" height="13" />}
+          {f.home}<span class="nm-chip-x">×</span>{f.away}
+          {f.away_flag && <img class="nm-chip-flag" src={`https://flagcdn.com/w20/${f.away_flag}.png`} alt="" width="18" height="13" />}
+        </button>)}
       </div>
 
       <div class="nm-card">
@@ -431,6 +435,9 @@ python analysis/export_worldcup_data.py   # regenerate this page's data</code></
   .nm-chip:hover { border-color: var(--accent-soft); color: var(--ink); }
   .nm-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
   .nm-chip-d { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); margin-right: 7px; }
+  .nm-chip { display: inline-flex; align-items: center; gap: 6px; }
+  .nm-chip-flag { border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.15); flex: 0 0 auto; }
+  .nm-chip-x { color: var(--ink-faint); margin: 0 1px; }
   .nm-card { border: 1px solid var(--accent-soft); border-radius: 16px; padding: 28px; background: var(--surface-2);
     box-shadow: 0 0 0 3px var(--accent-soft); }
   .nm-fixture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 14px; }