Add completed match detail pages

src/lib/ui/components/MatchHistory.svelte

@@ -41,7 +41,7 @@
 
 <Card padding="lg">
     <h2>Match history</h2>
-    <p>Newest matches first. Unique players are counted across all match reports. — means the start or end wasn’t recorded, or the match is still in progress.</p>
+    <p>Newest matches first. Open a completed match to see its player results. Unique players are counted across all match reports. — means the start or end wasn’t recorded, or the match is still in progress.</p>
     {#if error}
         <div role="alert">{error} <Button onclick={() => refresh(server, limit)}>Retry</Button></div>
     {/if}
@@ -57,11 +57,17 @@
                 <thead><tr><th>Started</th><th>Ended</th>{#if server === undefined}<th>Server</th>{/if}<th>Map</th><th>Status</th><th>Players at start</th><th>Unique players</th><th>Players at end</th><th>Game time</th><th>Final round</th></tr></thead>
                 <tbody>
                     {#each matches as match (match.id)}
-                        <tr>
+                        <tr class:completed={match.status === 'completed'}>
                             <td><time datetime={match.startedAt}>{$timeFormat.dateTime(match.startedAt)}</time></td>
                             <td>{#if match.endedAt}<time datetime={match.endedAt}>{$timeFormat.dateTime(match.endedAt)}</time>{:else}—{/if}</td>
                             {#if server === undefined}<td><HistoricalServerIdentity name={match.server} deletedAt={match.server_deleted_at} href={`/servers/${encodeURIComponent(match.server)}?tab=matches`} /></td>{/if}
-                            <td>{match.map}</td>
+                            <td>
+                                {#if match.status === 'completed'}
+                                    <a class="match-link" href={`/matches/${match.id}`} aria-label={`View ${match.map} match from ${$timeFormat.dateTime(match.startedAt)}`}>
+                                        {match.map}<small>View match →</small>
+                                    </a>
+                                {:else}{match.map}{/if}
+                            </td>
                             <td>{match.status === 'active' ? 'In progress' : match.status === 'completed' ? 'Completed' : 'Interrupted'}</td>
                             <td>{match.startPlayers ?? '—'}</td><td>{match.uniquePlayers}</td><td>{match.endPlayers ?? '—'}</td>
                             <td>{match.durationMs === null ? '—' : formatDuration(match.durationMs)}</td><td>{match.finalRound ?? '—'}</td>
@@ -84,4 +90,9 @@
     th, td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
     th { color: var(--text-secondary); font-size: var(--text-xs); }
     td { font-variant-numeric: tabular-nums; }
+    .completed:hover, .completed:focus-within { background: var(--surface-raised); }
+    .match-link { display: block; color: var(--accent-primary-hover); text-decoration: none; }
+    .match-link:hover { text-decoration: underline; }
+    .match-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
+    .match-link small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }
 </style>