Add player timing and profile links to server scoreboard

src/lib/ui/components/PlayerScoreboard.svelte

@@ -3,11 +3,14 @@
     import { uiNow } from '$ui/stores/servers.js';
     import { elapsedSince } from '$ui/duration.js';
     import { mapTitle } from '$ui/server-labels.js';
+    import { playerProfileHref } from '$lib/leaderboard.js';
     import CopyValue from './CopyValue.svelte';
     import Badge from './primitives/Badge.svelte';
     import EmptyState from './primitives/EmptyState.svelte';
 
-    let { report, mapLabel }: { report: GameTelemetry | undefined; mapLabel?: string } = $props();
+    let { report, mapLabel, game }: { report: GameTelemetry | undefined; mapLabel?: string; game: string } = $props();
+    const timingNow = $derived(report && (report.event === 'game_end' || $uiNow - Date.parse(report.receivedAt) > 120_000)
+        ? Date.parse(report.receivedAt) : $uiNow);
     const columns = [
         { key: 'score', label: 'Score' },
         { key: 'kills', label: 'Kills' },
@@ -64,6 +67,9 @@
                 <thead>
                     <tr>
                         <th scope="col" class="player">Player</th>
+                        <th scope="col" class="stat">Time on server</th>
+                        <th scope="col" class="stat">Time in match</th>
+                        <th scope="col" class="stat">Round started</th>
                         {#each columns as column (column.key)}
                             <th scope="col" class="stat" aria-sort={sortBy === column.key ? descending ? 'descending' : 'ascending' : 'none'}>
                                 <button type="button" onclick={() => sort(column.key)}
@@ -76,11 +82,15 @@
                 </thead>
                 <tbody>
                     {#each sorted as player}
+                        {@const timing = report.timing?.players[player.guid]}
                         <tr>
                             <th scope="row" class="player">
-                                <span class="player-name">{player.name}</span>
+                                <a class="player-name" href={playerProfileHref(game.toLowerCase(), player.guid)}>{player.name}</a>
                                 <div class="guid"><span>GUID</span><CopyValue value={player.guid} label={`GUID for ${player.name}`} /></div>
                             </th>
+                            <td class="stat">{timing ? elapsedSince(timing.serverJoinedAt, timingNow) : '—'}</td>
+                            <td class="stat">{timing ? elapsedSince(timing.matchJoinedAt, timingNow) : '—'}</td>
+                            <td class="stat">{timing?.roundStarted ?? '—'}</td>
                             {#each columns as column (column.key)}
                                 <td class="stat" class:score={column.key === 'score'}>
                                     {#if player[column.key] === null}<span class="unreported" aria-label="Not yet reported">—</span>
@@ -97,6 +107,7 @@
         <p class="note">{report.event === 'game_start' ? 'Player stats arrive with the next round report or heartbeat.' : report.event === 'game_end' ? 'Final stats from this game. The scoreboard resets when the next game starts.' : 'Stats update at each round change, heartbeat, and game end.'}</p>
         <a href="/leaderboard">View lifetime leaderboard →</a>
     </div>
+    <p class="timing-note">Times and joining rounds are estimated from player reports. Server time carries across consecutive matches; ended or stale reports show time at the last update.</p>
 {/if}
 
 <style>
@@ -109,13 +120,17 @@
     time { font-size: var(--text-xs); color: var(--text-tertiary); }
     .table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
     .table-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-    table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
+    table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; }
     th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
     thead th { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-semibold); background: var(--surface-sunken); }
     .player { text-align: left; position: sticky; left: 0; z-index: 1; }
     thead .player { min-width: 230px; }
     tbody .player { background: var(--surface); font-weight: var(--weight-medium); }
     .player-name { display: block; max-width: 320px; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--text-primary); }
+    .player-name { text-decoration: none; }
+    .player-name:hover { color: var(--accent-primary-hover); text-decoration: underline; }
+    .player-name:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
+    .timing-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }
     .guid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: var(--text-tertiary); font-size: var(--text-xs); }
     .stat { text-align: right; white-space: nowrap; }
     td.stat { font: var(--text-sm) var(--font-mono); font-variant-numeric: tabular-nums; }