Rich data table on home page, interactive bigger minimap, tactical-reveal player swap

- Replace home-page card grid with a TanStack data table (Rounds default / Maps / Matches via Tabs); global search, map filter, sort, pagination, column-visibility, deep-link to specific round
- Minimap: bigger badges + wider/fainter vision cones, halo on the active POV, click-to-switch with hover/focus ring (works in single + grid)
- Player swap tactical reveal: diagonal beam sweep, corner reticle brackets, edge vignette, HUD chip slide-in (bottom-left), and a clip-path wipe on the freeze-frame so the old POV transitions out instead of snapping
- Don't echo currentTime=0 from the freshly-mounted <video> back to the parent — kept the minimap and timeline from flashing to round-start during a swap; also don't drop bufferedRanges

src/lib/components/map-preview.svelte

@@ -30,12 +30,24 @@
 	type Props = {
 		mapName: string;
 		players: Player[];
+		activePlayer?: number | null;
+		availablePlayers?: Set<number> | null;
+		onSelect?: (player: number) => void;
 		size?: number;
 		floor?: 'upper' | 'lower' | 'auto';
 		class?: string;
 	};
 
-	let { mapName, players, size, floor = 'auto', class: className = '' }: Props = $props();
+	let {
+		mapName,
+		players,
+		activePlayer = null,
+		availablePlayers = null,
+		onSelect,
+		size,
+		floor = 'auto',
+		class: className = ''
+	}: Props = $props();
 
 	let allMaps = $state<Record<string, MapData> | null>(null);
 	let userFloor = $state<Floor | null>(null);
@@ -84,7 +96,7 @@
 		<img
 			src={radarUrl(mapName, displayedFloor)}
 			alt="{mapName} radar"
-			class="absolute inset-0 h-full w-full select-none rounded-md"
+			class="absolute inset-0 h-full w-full select-none rounded-md opacity-70"
 			draggable="false"
 		/>
 		<svg
@@ -96,27 +108,96 @@
 				{@const { px, py } = worldToImage(map, p.X, p.Y)}
 				{@const playerFloor = floorForZ(map, p.Z)}
 				{@const onDisplayed = !lowerAvailable || playerFloor === displayedFloor}
-				{@const baseOpacity = onDisplayed ? 1 : 0.3}
-				<g opacity={baseOpacity}>
+				{@const baseOpacity = onDisplayed ? 1 : 0.35}
+				{@const isActive = activePlayer !== null && p.slot === activePlayer}
+				{@const r = isActive ? 42 : 32}
+				{@const fontSize = isActive ? 38 : 30}
+				{@const coneLen = isActive ? 110 : 90}
+				{@const coneHalf = isActive ? 38 : 32}
+				{@const slotKnown = p.slot !== undefined}
+				{@const available =
+					!availablePlayers || (slotKnown && availablePlayers.has(p.slot as number))}
+				{@const clickable = !!onSelect && slotKnown && available}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+				<g
+					class="mp-marker"
+					class:mp-marker--clickable={clickable}
+					class:mp-marker--unavailable={!!onSelect && slotKnown && !available}
+					class:mp-marker--active={isActive}
+					opacity={baseOpacity}
+					role={clickable ? 'button' : undefined}
+					tabindex={clickable ? 0 : undefined}
+					aria-label={slotKnown ? `Switch to player ${p.slot}` : undefined}
+					onclick={clickable ? () => onSelect?.(p.slot as number) : undefined}
+					onkeydown={clickable
+						? (e: KeyboardEvent) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									onSelect?.(p.slot as number);
+								}
+							}
+						: undefined}
+				>
 					<title>{p.name}{p.slot !== undefined ? ` (#${p.slot})` : ''}</title>
+					{#if clickable || isActive}
+						<!-- Hit-target + hover ring. Transparent stroke by default; the
+						     :hover style flips it on. Larger than the badge so the
+						     click area is generous. -->
+						<circle
+							class="mp-marker__hit"
+							cx={px}
+							cy={py}
+							r={r + 14}
+							fill="transparent"
+							stroke={p.color}
+							stroke-opacity="0"
+							stroke-width="3"
+						/>
+					{/if}
 					{#if p.is_alive}
 						{#if p.yaw !== undefined}
+							<!-- Vision cone: wide + faint fill, soft edge. Reads at a
+							     glance without overpowering the badge. -->
 							<polygon
-								points="0,-7 26,0 0,7"
+								points="0,-{coneHalf} {coneLen},0 0,{coneHalf}"
 								fill={p.color}
-								fill-opacity="0.45"
+								fill-opacity="0.18"
 								stroke={p.color}
-								stroke-width="1.5"
+								stroke-opacity="0.55"
+								stroke-width="2"
 								transform="translate({px} {py}) rotate({yawToScreenDeg(p.yaw)})"
 							/>
 						{/if}
+						{#if isActive}
+							<!-- Active player halo: a white inner ring + colored outer ring. -->
+							<circle
+								cx={px}
+								cy={py}
+								r={r + 7}
+								fill="none"
+								stroke="#fff"
+								stroke-width="2.5"
+								stroke-opacity="0.9"
+							/>
+							<circle
+								cx={px}
+								cy={py}
+								r={r + 12}
+								fill="none"
+								stroke={p.color}
+								stroke-width="2.5"
+								stroke-opacity="0.75"
+							/>
+						{/if}
 						<circle
 							cx={px}
 							cy={py}
-							r="14"
+							{r}
 							fill={p.color}
 							stroke="#0b0f14"
-							stroke-width="2.5"
+							stroke-width={isActive ? 4 : 3}
 						/>
 						{#if p.slot !== undefined}
 							<text
@@ -124,11 +205,11 @@
 								y={py}
 								text-anchor="middle"
 								dominant-baseline="central"
-								font-size="16"
-								font-weight="700"
+								font-size={fontSize}
+								font-weight="800"
 								fill="#fff"
 								stroke="#0b0f14"
-								stroke-width="0.5"
+								stroke-width="0.9"
 								paint-order="stroke"
 								style="pointer-events: none; user-select: none;"
 							>
@@ -140,12 +221,12 @@
 							opacity={baseOpacity * 0.55}
 							transform="translate({px} {py})"
 							stroke={p.color}
-							stroke-width="2.5"
+							stroke-width="3.5"
 							fill="none"
 						>
-							<circle r="11" />
-							<line x1="-6" y1="-6" x2="6" y2="6" />
-							<line x1="-6" y1="6" x2="6" y2="-6" />
+							<circle r="18" />
+							<line x1="-10" y1="-10" x2="10" y2="10" />
+							<line x1="-10" y1="10" x2="10" y2="-10" />
 						</g>
 					{/if}
 				</g>
@@ -177,3 +258,36 @@
 		{/if}
 	{/if}
 </div>
+
+<style>
+	.mp-marker--clickable {
+		cursor: pointer;
+	}
+	.mp-marker--unavailable {
+		cursor: not-allowed;
+	}
+	/* Hover & focus on a clickable marker: light up the hit-ring and lift the
+	   group with a subtle drop-shadow so it feels selectable. */
+	.mp-marker--clickable:hover .mp-marker__hit,
+	.mp-marker--clickable:focus-visible .mp-marker__hit {
+		stroke-opacity: 0.9;
+	}
+	.mp-marker--clickable {
+		transition: filter 120ms ease-out;
+	}
+	.mp-marker--clickable:hover,
+	.mp-marker--clickable:focus-visible {
+		filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
+	}
+	.mp-marker:focus {
+		outline: none;
+	}
+	.mp-marker:focus-visible {
+		outline: none;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.mp-marker--clickable {
+			transition: none;
+		}
+	}
+</style>

src/lib/components/match-map.svelte

@@ -11,9 +11,21 @@
 		round: number;
 		chunks: PreviewChunk[];
 		virtualTime: number;
+		activePlayer?: number | null;
+		availablePlayers?: Set<number> | null;
+		onSelect?: (player: number) => void;
 	};
 
-	let { matchId, mapName, round, chunks, virtualTime }: Props = $props();
+	let {
+		matchId,
+		mapName,
+		round,
+		chunks,
+		virtualTime,
+		activePlayer = null,
+		availablePlayers = null,
+		onSelect
+	}: Props = $props();
 
 	let world = $state<RoundWorld | null>(null);
 	let error = $state<string | null>(null);
@@ -70,5 +82,5 @@
 {:else if !world}
 	<Skeleton class="aspect-square w-full rounded-md" />
 {:else}
-	<MapPreview {mapName} {players} />
+	<MapPreview {mapName} {players} {activePlayer} {availablePlayers} {onSelect} />
 {/if}

src/lib/components/match-table/cells/date-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { formatDate } from '$lib/utils/format';
+
+	interface Props {
+		iso: string;
+	}
+	let { iso }: Props = $props();
+</script>
+
+<span class="text-muted-foreground text-xs whitespace-nowrap">{formatDate(iso)}</span>

src/lib/components/match-table/cells/duration-cell.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { formatLongDuration } from '$lib/utils/format';
+
+	interface Props {
+		seconds: number;
+	}
+	let { seconds }: Props = $props();
+</script>
+
+<span class="font-mono tabular-nums text-xs text-muted-foreground">{formatLongDuration(seconds)}</span>

src/lib/components/match-table/cells/event-cell.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		event: string;
+		format?: string;
+	}
+	let { event, format }: Props = $props();
+</script>
+
+<div class="flex min-w-0 flex-col">
+	<span class="truncate text-sm font-medium" title={event}>{event}</span>
+	{#if format}
+		<span class="text-muted-foreground/70 text-[0.65rem] uppercase tracking-wide">{format}</span>
+	{/if}
+</div>

src/lib/components/match-table/cells/map-cell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge';
+	import MapPin from 'phosphor-svelte/lib/MapPin';
+	import { mapColorClasses } from '$lib/utils/map-colors';
+	import { prettyMap } from '$lib/utils/format';
+
+	interface Props {
+		map: string;
+	}
+	let { map }: Props = $props();
+</script>
+
+<Badge class="gap-1 border capitalize {mapColorClasses(map)}">
+	<MapPin size={11} weight="duotone" />{prettyMap(map)}
+</Badge>

src/lib/components/match-table/cells/maps-list-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge';
+	import MapPin from 'phosphor-svelte/lib/MapPin';
+	import { mapColorClasses } from '$lib/utils/map-colors';
+	import { prettyMap } from '$lib/utils/format';
+
+	interface Props {
+		maps: string[];
+	}
+	let { maps }: Props = $props();
+</script>
+
+<div class="flex flex-wrap items-center gap-1">
+	{#each maps as map (map)}
+		<Badge class="gap-1 border capitalize text-[0.65rem] {mapColorClasses(map)}">
+			<MapPin size={10} weight="duotone" />{prettyMap(map)}
+		</Badge>
+	{/each}
+</div>

src/lib/components/match-table/cells/round-cell.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		round: number;
+		total: number;
+	}
+	let { round, total }: Props = $props();
+</script>
+
+<div class="font-mono text-xs tabular-nums">
+	<span class="text-foreground">{round}</span>
+	<span class="text-muted-foreground/60">/{total}</span>
+</div>

src/lib/components/match-table/cells/rounds-played-cell.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import FilmSlate from 'phosphor-svelte/lib/FilmSlate';
+
+	interface Props {
+		rounds: number;
+	}
+	let { rounds }: Props = $props();
+</script>
+
+<span class="text-muted-foreground inline-flex items-center gap-1 font-mono text-xs tabular-nums">
+	<FilmSlate size={11} weight="duotone" />
+	{rounds}
+</span>

src/lib/components/match-table/cells/score-cell.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		score1: number;
+		score2: number;
+		winner: string;
+	}
+	let { score1, score2, winner }: Props = $props();
+
+	const team1Wins = $derived(winner === 'team1');
+	const team2Wins = $derived(winner === 'team2');
+</script>
+
+<div class="flex items-center justify-center gap-1 font-mono text-sm tabular-nums">
+	<span class={team1Wins ? 'text-primary font-semibold' : 'text-muted-foreground'}>{score1}</span>
+	<span class="text-muted-foreground/40 text-xs">:</span>
+	<span class={team2Wins ? 'text-primary font-semibold' : 'text-muted-foreground'}>{score2}</span>
+</div>

src/lib/components/match-table/cells/teams-cell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface Props {
+		team1: string;
+		team2: string;
+		winner: string;
+	}
+	let { team1, team2, winner }: Props = $props();
+
+	const team1Wins = $derived(winner === 'team1');
+	const team2Wins = $derived(winner === 'team2');
+</script>
+
+<div class="flex min-w-0 items-center gap-1.5 text-xs">
+	<span
+		class="truncate font-medium {team1Wins
+			? 'text-foreground'
+			: 'text-muted-foreground'}"
+		title={team1}
+	>
+		{team1}
+	</span>
+	<span class="text-muted-foreground/40 shrink-0">vs</span>
+	<span
+		class="truncate font-medium {team2Wins
+			? 'text-foreground'
+			: 'text-muted-foreground'}"
+		title={team2}
+	>
+		{team2}
+	</span>
+</div>

src/lib/components/match-table/cells/winner-side-cell.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Badge } from '$lib/components/ui/badge';
+	import Shield from 'phosphor-svelte/lib/Shield';
+	import Sword from 'phosphor-svelte/lib/Sword';
+
+	interface Props {
+		side: string | null | undefined;
+	}
+	let { side }: Props = $props();
+
+	const norm = $derived((side ?? '').toLowerCase());
+</script>
+
+{#if norm === 'ct'}
+	<Badge class="gap-1 border border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300">
+		<Shield size={11} weight="duotone" /> CT
+	</Badge>
+{:else if norm === 't'}
+	<Badge
+		class="gap-1 border border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300"
+	>
+		<Sword size={11} weight="duotone" /> T
+	</Badge>
+{:else}
+	<span class="text-muted-foreground/60 text-xs">—</span>
+{/if}

src/lib/components/match-table/columns.ts

@@ -0,0 +1,259 @@
+import type { ColumnDef, RowData } from '@tanstack/table-core';
+import { renderComponent } from '$lib/components/ui/data-table';
+import SortHeader from './data-table-sort-header.svelte';
+import PlainHeader from './data-table-plain-header.svelte';
+import EventCell from './cells/event-cell.svelte';
+import TeamsCell from './cells/teams-cell.svelte';
+import ScoreCell from './cells/score-cell.svelte';
+import MapCell from './cells/map-cell.svelte';
+import MapsListCell from './cells/maps-list-cell.svelte';
+import WinnerSideCell from './cells/winner-side-cell.svelte';
+import DurationCell from './cells/duration-cell.svelte';
+import DateCell from './cells/date-cell.svelte';
+import RoundCell from './cells/round-cell.svelte';
+import RoundsPlayedCell from './cells/rounds-played-cell.svelte';
+import type { MapRow, MatchRow, RoundRow } from './rows';
+import type { Match } from '$lib/types';
+
+declare module '@tanstack/table-core' {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface ColumnMeta<TData extends RowData, TValue> {
+		label?: string;
+	}
+}
+
+const dateSort = (a: { match_date: string }, b: { match_date: string }) =>
+	new Date(a.match_date).getTime() - new Date(b.match_date).getTime();
+
+// Cells use `accessorFn` returning the underlying value so global filtering and
+// sorting see the right thing; visual rendering happens in `cell` via components.
+
+export const roundColumns: ColumnDef<RoundRow>[] = [
+	{
+		id: 'event',
+		accessorKey: 'event',
+		header: ({ column }) => renderComponent(SortHeader, { column, label: 'Event' }),
+		cell: ({ row }) =>
+			renderComponent(EventCell, { event: row.original.event, format: row.original.format }),
+		meta: { label: 'Event' }
+	},
+	{
+		id: 'map_name',
+		accessorKey: 'map_name',
+		header: () => renderComponent(PlainHeader, { label: 'Map' }),
+		cell: ({ row }) => renderComponent(MapCell, { map: row.original.map_name }),
+		enableSorting: false,
+		filterFn: (row, id, value) => {
+			if (!value) return true;
+			return row.getValue<string>(id) === value;
+		},
+		meta: { label: 'Map' }
+	},
+	{
+		id: 'teams',
+		accessorFn: (r) => `${r.team1} ${r.team2}`,
+		header: () => renderComponent(PlainHeader, { label: 'Teams' }),
+		cell: ({ row }) =>
+			renderComponent(TeamsCell, {
+				team1: row.original.team1,
+				team2: row.original.team2,
+				winner: row.original.winner
+			}),
+		enableSorting: false,
+		meta: { label: 'Teams' }
+	},
+	{
+		id: 'round',
+		accessorKey: 'round',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Round' }),
+		cell: ({ row }) =>
+			renderComponent(RoundCell, { round: row.original.round, total: row.original.rounds_played }),
+		enableGlobalFilter: false,
+		meta: { label: 'Round' }
+	},
+	{
+		id: 'duration_s',
+		accessorKey: 'duration_s',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Duration' }),
+		cell: ({ row }) => renderComponent(DurationCell, { seconds: row.original.duration_s }),
+		enableGlobalFilter: false,
+		meta: { label: 'Duration' }
+	},
+	{
+		id: 'match_date',
+		accessorFn: (r) => new Date(r.match_date).getTime(),
+		sortingFn: (a, b) => dateSort(a.original, b.original),
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Date' }),
+		cell: ({ row }) => renderComponent(DateCell, { iso: row.original.match_date }),
+		enableGlobalFilter: false,
+		meta: { label: 'Date' }
+	}
+];
+
+export const mapColumns: ColumnDef<MapRow>[] = [
+	{
+		id: 'event',
+		accessorKey: 'event',
+		header: ({ column }) => renderComponent(SortHeader, { column, label: 'Event' }),
+		cell: ({ row }) =>
+			renderComponent(EventCell, { event: row.original.event, format: row.original.format }),
+		meta: { label: 'Event' }
+	},
+	{
+		id: 'map_name',
+		accessorKey: 'map_name',
+		header: () => renderComponent(PlainHeader, { label: 'Map' }),
+		cell: ({ row }) => renderComponent(MapCell, { map: row.original.map_name }),
+		enableSorting: false,
+		filterFn: (row, id, value) => {
+			if (!value) return true;
+			return row.getValue<string>(id) === value;
+		},
+		meta: { label: 'Map' }
+	},
+	{
+		id: 'teams',
+		accessorFn: (r) => `${r.team1} ${r.team2}`,
+		header: () => renderComponent(PlainHeader, { label: 'Teams' }),
+		cell: ({ row }) =>
+			renderComponent(TeamsCell, {
+				team1: row.original.team1,
+				team2: row.original.team2,
+				winner: row.original.winner
+			}),
+		enableSorting: false,
+		meta: { label: 'Teams' }
+	},
+	{
+		id: 'score',
+		accessorFn: (r) => r.score1 + r.score2,
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Score', align: 'start' }),
+		cell: ({ row }) =>
+			renderComponent(ScoreCell, {
+				score1: row.original.score1,
+				score2: row.original.score2,
+				winner: row.original.winner
+			}),
+		enableGlobalFilter: false,
+		meta: { label: 'Score' }
+	},
+	{
+		id: 'winner_side',
+		accessorKey: 'winner_side',
+		header: () => renderComponent(PlainHeader, { label: 'Won by' }),
+		cell: ({ row }) =>
+			renderComponent(WinnerSideCell, { side: (row.original as Match).winner_side }),
+		enableSorting: false,
+		filterFn: (row, id, value) => {
+			if (!value) return true;
+			return ((row.getValue<string>(id) ?? '') + '').toLowerCase() === value;
+		},
+		meta: { label: 'Won by' }
+	},
+	{
+		id: 'rounds_played',
+		accessorKey: 'rounds_played',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Rounds' }),
+		cell: ({ row }) => renderComponent(RoundsPlayedCell, { rounds: row.original.rounds_played }),
+		enableGlobalFilter: false,
+		meta: { label: 'Rounds' }
+	},
+	{
+		id: 'duration_s',
+		accessorKey: 'duration_s',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Duration' }),
+		cell: ({ row }) => renderComponent(DurationCell, { seconds: row.original.duration_s }),
+		enableGlobalFilter: false,
+		meta: { label: 'Duration' }
+	},
+	{
+		id: 'match_date',
+		accessorFn: (r) => new Date(r.match_date).getTime(),
+		sortingFn: (a, b) => dateSort(a.original, b.original),
+		header: ({ column }) => renderComponent(SortHeader, { column, label: 'Date' }),
+		cell: ({ row }) => renderComponent(DateCell, { iso: row.original.match_date }),
+		enableGlobalFilter: false,
+		meta: { label: 'Date' }
+	}
+];
+
+export const matchColumns: ColumnDef<MatchRow>[] = [
+	{
+		id: 'event',
+		accessorKey: 'event',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Event' }),
+		cell: ({ row }) =>
+			renderComponent(EventCell, { event: row.original.event, format: row.original.format }),
+		meta: { label: 'Event' }
+	},
+	{
+		id: 'teams',
+		accessorFn: (r) => `${r.team1} ${r.team2}`,
+		header: () => renderComponent(PlainHeader, { label: 'Teams' }),
+		cell: ({ row }) =>
+			renderComponent(TeamsCell, {
+				team1: row.original.team1,
+				team2: row.original.team2,
+				winner: row.original.winner
+			}),
+		enableSorting: false,
+		meta: { label: 'Teams' }
+	},
+	{
+		id: 'score',
+		accessorFn: (r) => r.score1 + r.score2,
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Maps' }),
+		cell: ({ row }) =>
+			renderComponent(ScoreCell, {
+				score1: row.original.score1,
+				score2: row.original.score2,
+				winner: row.original.winner
+			}),
+		enableGlobalFilter: false,
+		meta: { label: 'Maps won' }
+	},
+	{
+		id: 'maps',
+		accessorFn: (r) => r.maps.join(' '),
+		header: () => renderComponent(PlainHeader, { label: 'Map pool' }),
+		cell: ({ row }) => renderComponent(MapsListCell, { maps: row.original.maps }),
+		enableSorting: false,
+		meta: { label: 'Map pool' }
+	},
+	{
+		id: 'rounds_played',
+		accessorKey: 'rounds_played',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Rounds' }),
+		cell: ({ row }) => renderComponent(RoundsPlayedCell, { rounds: row.original.rounds_played }),
+		enableGlobalFilter: false,
+		meta: { label: 'Rounds' }
+	},
+	{
+		id: 'duration_s',
+		accessorKey: 'duration_s',
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Duration' }),
+		cell: ({ row }) => renderComponent(DurationCell, { seconds: row.original.duration_s }),
+		enableGlobalFilter: false,
+		meta: { label: 'Duration' }
+	},
+	{
+		id: 'match_date',
+		accessorFn: (r) => new Date(r.match_date).getTime(),
+		sortingFn: (a, b) => dateSort(a.original, b.original),
+		header: ({ column }) =>
+			renderComponent(SortHeader, { column, label: 'Date' }),
+		cell: ({ row }) => renderComponent(DateCell, { iso: row.original.match_date }),
+		enableGlobalFilter: false,
+		meta: { label: 'Date' }
+	}
+];

src/lib/components/match-table/data-table-pagination.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" generics="TData">
+	import type { Table } from '@tanstack/table-core';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
+	import CaretRight from 'phosphor-svelte/lib/CaretRight';
+	import CaretDoubleLeft from 'phosphor-svelte/lib/CaretDoubleLeft';
+	import CaretDoubleRight from 'phosphor-svelte/lib/CaretDoubleRight';
+
+	interface Props {
+		table: Table<TData>;
+		pageSizes?: number[];
+	}
+	let { table, pageSizes = [10, 25, 50, 100] }: Props = $props();
+
+	const pageIndex = $derived(table.getState().pagination.pageIndex);
+	const pageSize = $derived(table.getState().pagination.pageSize);
+	const pageCount = $derived(table.getPageCount());
+	const totalRows = $derived(table.getFilteredRowModel().rows.length);
+</script>
+
+<div class="flex flex-wrap items-center justify-between gap-3 pt-3 text-xs">
+	<div class="text-muted-foreground">
+		{totalRows.toLocaleString()} row{totalRows === 1 ? '' : 's'}
+	</div>
+
+	<div class="flex flex-wrap items-center gap-4">
+		<div class="flex items-center gap-2">
+			<span class="text-muted-foreground">Rows per page</span>
+			<Select.Root
+				type="single"
+				value={String(pageSize)}
+				onValueChange={(v) => table.setPageSize(Number(v))}
+			>
+				<Select.Trigger size="sm" class="h-7 w-[70px]">
+					{pageSize}
+				</Select.Trigger>
+				<Select.Content>
+					{#each pageSizes as n (n)}
+						<Select.Item value={String(n)}>{n}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+
+		<div class="text-muted-foreground tabular-nums">
+			Page {pageIndex + 1} of {Math.max(1, pageCount)}
+		</div>
+
+		<div class="flex items-center gap-1">
+			<Button
+				variant="outline"
+				size="icon-sm"
+				class="size-7"
+				onclick={() => table.setPageIndex(0)}
+				disabled={!table.getCanPreviousPage()}
+				aria-label="First page"
+			>
+				<CaretDoubleLeft size={12} weight="bold" />
+			</Button>
+			<Button
+				variant="outline"
+				size="icon-sm"
+				class="size-7"
+				onclick={() => table.previousPage()}
+				disabled={!table.getCanPreviousPage()}
+				aria-label="Previous page"
+			>
+				<CaretLeft size={12} weight="bold" />
+			</Button>
+			<Button
+				variant="outline"
+				size="icon-sm"
+				class="size-7"
+				onclick={() => table.nextPage()}
+				disabled={!table.getCanNextPage()}
+				aria-label="Next page"
+			>
+				<CaretRight size={12} weight="bold" />
+			</Button>
+			<Button
+				variant="outline"
+				size="icon-sm"
+				class="size-7"
+				onclick={() => table.setPageIndex(pageCount - 1)}
+				disabled={!table.getCanNextPage()}
+				aria-label="Last page"
+			>
+				<CaretDoubleRight size={12} weight="bold" />
+			</Button>
+		</div>
+	</div>
+</div>

src/lib/components/match-table/data-table-plain-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	interface Props {
+		label: string;
+		align?: 'start' | 'end';
+		class?: string;
+	}
+
+	let { label, align = 'start', class: className }: Props = $props();
+</script>
+
+<span
+	class={cn(
+		'text-muted-foreground inline-block px-2 text-[0.7rem] font-medium uppercase tracking-wide',
+		align === 'end' && 'w-full text-right',
+		className
+	)}
+>
+	{label}
+</span>

src/lib/components/match-table/data-table-sort-header.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
+	import { CaretUp, CaretDown, CaretUpDown } from 'phosphor-svelte';
+
+	// `column` comes from the TanStack header context. Its `TData/TValue` generics
+	// vary across columns, so we type it permissively here and only touch the
+	// methods we actually use.
+	interface SortableColumn {
+		getIsSorted(): false | 'asc' | 'desc';
+		toggleSorting(desc?: boolean): void;
+	}
+
+	interface Props {
+		column: SortableColumn;
+		label: string;
+		align?: 'start' | 'end';
+		class?: string;
+	}
+
+	let { column, label, align = 'start', class: className }: Props = $props();
+	const sort = $derived(column.getIsSorted());
+</script>
+
+<Button
+	variant="ghost"
+	size="sm"
+	onclick={() => column.toggleSorting(sort === 'asc')}
+	class={cn(
+		'-ml-2 h-7 px-2 font-medium tracking-wide uppercase text-[0.7rem] text-muted-foreground hover:text-foreground',
+		align === 'end' && 'ml-0 -mr-2 w-full justify-end',
+		className
+	)}
+>
+	{label}
+	{#if sort === 'asc'}
+		<CaretUp size={12} weight="bold" class="ml-1" />
+	{:else if sort === 'desc'}
+		<CaretDown size={12} weight="bold" class="ml-1" />
+	{:else}
+		<CaretUpDown size={12} weight="bold" class="ml-1 opacity-60" />
+	{/if}
+</Button>

src/lib/components/match-table/data-table-toolbar.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" generics="TData">
+	import type { Table } from '@tanstack/table-core';
+	import { Input } from '$lib/components/ui/input';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Select from '$lib/components/ui/select';
+	import { MagnifyingGlass, SlidersHorizontal, X } from 'phosphor-svelte';
+	import { prettyMap } from '$lib/utils/format';
+
+	interface Props {
+		table: Table<TData>;
+		searchPlaceholder?: string;
+		mapOptions?: string[];
+	}
+
+	let { table, searchPlaceholder = 'Search…', mapOptions = [] }: Props = $props();
+
+	const globalFilter = $derived((table.getState().globalFilter as string) ?? '');
+	const mapFilter = $derived((table.getColumn('map_name')?.getFilterValue() as string) ?? '__all');
+	const isFiltered = $derived(
+		(table.getState().globalFilter as string)?.length > 0 ||
+			table.getState().columnFilters.length > 0
+	);
+</script>
+
+<div class="flex flex-wrap items-center gap-2 py-3">
+	<div class="relative">
+		<MagnifyingGlass
+			size={14}
+			weight="bold"
+			class="text-muted-foreground absolute left-2.5 top-1/2 -translate-y-1/2"
+		/>
+		<Input
+			placeholder={searchPlaceholder}
+			value={globalFilter}
+			oninput={(e) => table.setGlobalFilter(e.currentTarget.value)}
+			class="h-8 w-[200px] pl-8 lg:w-[260px]"
+		/>
+	</div>
+
+	{#if mapOptions.length > 0 && table.getColumn('map_name')}
+		<Select.Root
+			type="single"
+			value={mapFilter}
+			onValueChange={(v) => {
+				table.getColumn('map_name')?.setFilterValue(v === '__all' ? undefined : v);
+			}}
+		>
+			<Select.Trigger size="sm" class="h-8 min-w-[130px] capitalize">
+				{mapFilter === '__all' ? 'All maps' : prettyMap(mapFilter)}
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Item value="__all">All maps</Select.Item>
+				{#each mapOptions as map (map)}
+					<Select.Item value={map} class="capitalize">{prettyMap(map)}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	{/if}
+
+	{#if isFiltered}
+		<Button
+			variant="ghost"
+			size="sm"
+			class="h-8 px-2"
+			onclick={() => {
+				table.setGlobalFilter('');
+				table.resetColumnFilters();
+			}}
+		>
+			Reset
+			<X size={12} weight="bold" class="ml-1" />
+		</Button>
+	{/if}
+
+	<div class="ml-auto flex items-center gap-2">
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Button {...props} variant="outline" size="sm" class="h-8">
+						<SlidersHorizontal size={12} weight="bold" />
+						View
+					</Button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="end" class="w-[180px]">
+				<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
+				<DropdownMenu.Separator />
+				{#each table.getAllColumns().filter((c) => c.getCanHide()) as column (column.id)}
+					<DropdownMenu.CheckboxItem
+						class="capitalize"
+						checked={column.getIsVisible()}
+						onCheckedChange={(v) => column.toggleVisibility(!!v)}
+					>
+						{(column.columnDef.meta as { label?: string } | undefined)?.label ?? column.id.replace(/_/g, ' ')}
+					</DropdownMenu.CheckboxItem>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+</div>

src/lib/components/match-table/match-table.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" generics="TData">
+	import {
+		type ColumnDef,
+		type ColumnFiltersState,
+		type PaginationState,
+		type SortingState,
+		type VisibilityState,
+		getCoreRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		getSortedRowModel
+	} from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table';
+	import * as Table from '$lib/components/ui/table';
+	import DataTableToolbar from './data-table-toolbar.svelte';
+	import DataTablePagination from './data-table-pagination.svelte';
+	import { goto } from '$app/navigation';
+	import { cn } from '$lib/utils';
+	import { untrack } from 'svelte';
+
+	interface Props {
+		data: TData[];
+		columns: ColumnDef<TData>[];
+		searchPlaceholder?: string;
+		mapOptions?: string[];
+		initialSorting?: SortingState;
+		initialPageSize?: number;
+		getRowHref?: (row: TData) => string;
+		emptyMessage?: string;
+	}
+
+	let {
+		data,
+		columns,
+		searchPlaceholder,
+		mapOptions = [],
+		initialSorting = [],
+		initialPageSize = 25,
+		getRowHref,
+		emptyMessage = 'No results.'
+	}: Props = $props();
+
+	// svelte-ignore state_referenced_locally
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: initialPageSize });
+	// svelte-ignore state_referenced_locally
+	let sorting = $state<SortingState>(initialSorting);
+	let columnFilters = $state<ColumnFiltersState>([]);
+	let columnVisibility = $state<VisibilityState>({});
+	let globalFilter = $state('');
+
+	// Reset to first page whenever filters change so users don't end up on an
+	// empty page after narrowing the result set.
+	$effect(() => {
+		void globalFilter;
+		void columnFilters;
+		untrack(() => {
+			if (pagination.pageIndex !== 0) {
+				pagination = { ...pagination, pageIndex: 0 };
+			}
+		});
+	});
+
+	const table = createSvelteTable<TData>({
+		get data() {
+			return data;
+		},
+		get columns() {
+			return columns;
+		},
+		state: {
+			get pagination() {
+				return pagination;
+			},
+			get sorting() {
+				return sorting;
+			},
+			get columnFilters() {
+				return columnFilters;
+			},
+			get columnVisibility() {
+				return columnVisibility;
+			},
+			get globalFilter() {
+				return globalFilter;
+			}
+		},
+		globalFilterFn: 'includesString',
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onPaginationChange: (u) => {
+			pagination = typeof u === 'function' ? u(pagination) : u;
+		},
+		onSortingChange: (u) => {
+			sorting = typeof u === 'function' ? u(sorting) : u;
+		},
+		onColumnFiltersChange: (u) => {
+			columnFilters = typeof u === 'function' ? u(columnFilters) : u;
+		},
+		onColumnVisibilityChange: (u) => {
+			columnVisibility = typeof u === 'function' ? u(columnVisibility) : u;
+		},
+		onGlobalFilterChange: (u) => {
+			globalFilter = typeof u === 'function' ? u(globalFilter) : u;
+		}
+	});
+
+	function handleRowClick(row: TData, e: MouseEvent | KeyboardEvent) {
+		if (!getRowHref) return;
+		const href = getRowHref(row);
+		if (e instanceof MouseEvent && (e.metaKey || e.ctrlKey || e.button === 1)) {
+			window.open(href, '_blank', 'noopener,noreferrer');
+			return;
+		}
+		goto(href);
+	}
+</script>
+
+<div>
+	<DataTableToolbar {table} {searchPlaceholder} {mapOptions} />
+
+	<div class="rounded-md border">
+		<Table.Root>
+			<Table.Header>
+				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+					<Table.Row class="bg-muted/40 hover:bg-muted/40">
+						{#each headerGroup.headers as header (header.id)}
+							<Table.Head class="h-9 text-xs">
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Header>
+			<Table.Body>
+				{#each table.getRowModel().rows as row (row.id)}
+					<Table.Row
+						class={cn(getRowHref && 'cursor-pointer')}
+						onclick={(e: MouseEvent) => handleRowClick(row.original, e)}
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								handleRowClick(row.original, e);
+							}
+						}}
+						tabindex={getRowHref ? 0 : undefined}
+						role={getRowHref ? 'link' : undefined}
+					>
+						{#each row.getVisibleCells() as cell (cell.id)}
+							<Table.Cell class="py-2 align-middle">
+								<FlexRender
+									content={cell.column.columnDef.cell}
+									context={cell.getContext()}
+								/>
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{:else}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="text-muted-foreground h-24 text-center text-sm">
+							{emptyMessage}
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
+	</div>
+
+	<DataTablePagination {table} />
+</div>

src/lib/components/match-table/rows.ts

@@ -0,0 +1,129 @@
+import type { Match, Round } from '$lib/types';
+
+const TICK_RATE = 64;
+
+export type MapRow = Match & {
+	duration_s: number;
+};
+
+export type RoundRow = {
+	match_id: number;
+	map_name: string;
+	round: number;
+	demo_round: number;
+	duration_s: number;
+	event: string;
+	team1: string;
+	team2: string;
+	score1: number;
+	score2: number;
+	winner: string;
+	format: string;
+	match_date: string;
+	rounds_played: number;
+};
+
+export type MatchRow = {
+	match_id: number;
+	event: string;
+	team1: string;
+	team2: string;
+	score1: number;
+	score2: number;
+	winner: string;
+	format: string;
+	match_date: string;
+	maps: string[];
+	maps_played: number;
+	first_map: string;
+	rounds_played: number;
+	duration_s: number;
+};
+
+export function buildMapRows(matches: Match[], rounds: Round[]): MapRow[] {
+	const durationByMap = new Map<string, number>();
+	for (const r of rounds) {
+		const k = `${r.match_id}|${r.map_name}`;
+		durationByMap.set(k, (durationByMap.get(k) ?? 0) + (r.round_duration_ticks || 0) / TICK_RATE);
+	}
+	return matches.map((m) => ({
+		...m,
+		duration_s: durationByMap.get(`${m.match_id}|${m.map_name}`) ?? 0
+	}));
+}
+
+export function buildRoundRows(matches: Match[], rounds: Round[]): RoundRow[] {
+	const matchByMap = new Map<string, Match>();
+	for (const m of matches) matchByMap.set(`${m.match_id}|${m.map_name}`, m);
+
+	const out: RoundRow[] = [];
+	for (const r of rounds) {
+		const m = matchByMap.get(`${r.match_id}|${r.map_name}`);
+		if (!m) continue;
+		out.push({
+			match_id: r.match_id,
+			map_name: r.map_name,
+			round: r.round,
+			demo_round: r.demo_round,
+			duration_s: (r.round_duration_ticks || 0) / TICK_RATE,
+			event: m.event,
+			team1: m.team1,
+			team2: m.team2,
+			score1: m.score1,
+			score2: m.score2,
+			winner: m.winner,
+			format: m.format,
+			match_date: m.match_date,
+			rounds_played: m.rounds_played
+		});
+	}
+	return out;
+}
+
+export function buildMatchRows(matches: Match[], rounds: Round[]): MatchRow[] {
+	const durationByMap = new Map<string, number>();
+	for (const r of rounds) {
+		const k = `${r.match_id}|${r.map_name}`;
+		durationByMap.set(k, (durationByMap.get(k) ?? 0) + (r.round_duration_ticks || 0) / TICK_RATE);
+	}
+
+	const grouped = new Map<number, Match[]>();
+	for (const m of matches) {
+		const arr = grouped.get(m.match_id);
+		if (arr) arr.push(m);
+		else grouped.set(m.match_id, [m]);
+	}
+
+	const rows: MatchRow[] = [];
+	for (const [matchId, mapsForMatch] of grouped) {
+		const sorted = [...mapsForMatch].sort((a, b) => (a.map_index ?? 0) - (b.map_index ?? 0));
+		const head = sorted[0];
+		const team1MapWins = sorted.filter((m) => m.winner === 'team1').length;
+		const team2MapWins = sorted.filter((m) => m.winner === 'team2').length;
+		const totalRounds = sorted.reduce((acc, m) => acc + m.rounds_played, 0);
+		const totalDuration = sorted.reduce(
+			(acc, m) => acc + (durationByMap.get(`${m.match_id}|${m.map_name}`) ?? 0),
+			0
+		);
+		rows.push({
+			match_id: matchId,
+			event: head.event,
+			team1: head.team1,
+			team2: head.team2,
+			score1: team1MapWins,
+			score2: team2MapWins,
+			winner: team1MapWins > team2MapWins ? 'team1' : team2MapWins > team1MapWins ? 'team2' : '',
+			format: head.format,
+			match_date: head.match_date,
+			maps: sorted.map((m) => m.map_name),
+			maps_played: sorted.length,
+			first_map: head.map_name,
+			rounds_played: totalRounds,
+			duration_s: totalDuration
+		});
+	}
+	rows.sort(
+		(a, b) => new Date(b.match_date).getTime() - new Date(a.match_date).getTime() || b.match_id - a.match_id
+	);
+	return rows;
+}

src/lib/components/video-player/video-player.svelte

@@ -55,7 +55,13 @@
 	let pendingSeek: number | null = null;
 	let prevSig: string | null = null;
 	let showFreezeFrame = $state(false);
+	// `dissolveFreeze` triggers a CSS clip-path wipe on the freeze canvas so
+	// the old frame visibly transitions out instead of snapping. The wipe is
+	// L→R diagonal to feel cohesive with the VideoStage beam sweep.
+	let dissolveFreeze = $state(false);
 	let freezeTimer: ReturnType<typeof setTimeout> | null = null;
+	let dissolveTimer: ReturnType<typeof setTimeout> | null = null;
+	const FREEZE_WIPE_MS = 480;
 
 	function locateChunkAt(t: number): number {
 		if (!chunks.length) return 0;
@@ -76,6 +82,12 @@
 	let lastEmitted = -1;
 	$effect(() => {
 		const t = currentTime;
+		// During a chunk swap the new <video> element transiently reports
+		// currentTime=0 before its loadedmetadata seek; echoing that to the
+		// parent would snap virtualTime (and therefore the minimap + timeline)
+		// back to round-start for ~1 frame. Hold off until the new clip's
+		// data has actually loaded.
+		if (!isVideoData) return;
 		if (Math.abs(t - lastEmitted) >= 0.2) {
 			lastEmitted = t;
 			onTimeUpdate?.(t);
@@ -97,6 +109,12 @@
 		try {
 			ctx.drawImage(videoEl, 0, 0, canvasEl.width, canvasEl.height);
 			showFreezeFrame = true;
+			// New capture aborts any in-flight wipe so the next swap starts clean.
+			dissolveFreeze = false;
+			if (dissolveTimer) {
+				clearTimeout(dissolveTimer);
+				dissolveTimer = null;
+			}
 			if (freezeTimer) clearTimeout(freezeTimer);
 			freezeTimer = setTimeout(() => {
 				showFreezeFrame = false;
@@ -108,11 +126,20 @@
 	}
 
 	function clearFreezeFrame() {
-		showFreezeFrame = false;
+		if (!showFreezeFrame || dissolveFreeze) return;
+		// Trigger the wipe; the canvas stays mounted so the keyframes can run,
+		// then we drop it once the animation is done.
+		dissolveFreeze = true;
 		if (freezeTimer) {
 			clearTimeout(freezeTimer);
 			freezeTimer = null;
 		}
+		if (dissolveTimer) clearTimeout(dissolveTimer);
+		dissolveTimer = setTimeout(() => {
+			showFreezeFrame = false;
+			dissolveFreeze = false;
+			dissolveTimer = null;
+		}, FREEZE_WIPE_MS);
 	}
 
 	$effect(() => {
@@ -248,6 +275,7 @@
 			mse?.destroy();
 			if (videoSrc) URL.revokeObjectURL(videoSrc);
 			if (freezeTimer) clearTimeout(freezeTimer);
+			if (dissolveTimer) clearTimeout(dissolveTimer);
 		};
 	});
 
@@ -291,8 +319,9 @@
 
 	<canvas
 		bind:this={canvasEl}
-		class="pointer-events-none absolute inset-0 z-10 h-full w-full object-contain"
+		class="vp-freeze pointer-events-none absolute inset-0 z-10 h-full w-full object-contain"
 		class:hidden={!showFreezeFrame}
+		class:vp-freeze--wipe={dissolveFreeze}
 		aria-hidden="true"
 	></canvas>
 
@@ -315,3 +344,31 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	/* Diagonal wipe of the freeze-frame on player swap. The clip-path
+	   parallelogram travels L→R, eating the canvas from the left side first
+	   so the new <video> underneath is progressively revealed. The slight
+	   brightness/saturation boost mid-wipe gives a subtle "energize" feel. */
+	.vp-freeze--wipe {
+		animation: vp-freeze-wipe 480ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
+	}
+	@keyframes vp-freeze-wipe {
+		0% {
+			clip-path: polygon(-20% 0, 110% 0, 110% 100%, -45% 100%);
+			filter: none;
+		}
+		55% {
+			filter: brightness(1.18) saturate(1.2) contrast(1.05);
+		}
+		100% {
+			clip-path: polygon(125% 0, 110% 0, 110% 100%, 100% 100%);
+			filter: brightness(1.5) saturate(1.3) contrast(1.05);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.vp-freeze--wipe {
+			animation-duration: 1ms;
+		}
+	}
+</style>

src/lib/components/video-stage.svelte

@@ -42,22 +42,32 @@
 
 	const sideMeta = $derived(chunks[0] ?? null);
 
-	// Brief identity overlay on player swap so the freeze-frame + reload feels
-	// like an intentional cut, not a hiccup. We track the previous slot and
-	// show the new slot's chip for ~700ms whenever it changes.
+	// Tactical reveal overlay on player swap: freezes the previous frame in the
+	// underlying VideoPlayer, plus we paint a player-colored beam sweep + corner
+	// brackets + edge vignette on top to make the ~0.5–1s clip swap feel like an
+	// intentional cut rather than a buffering hiccup. The `key` field bumps on
+	// every swap so the CSS animations re-trigger even on rapid back-and-forth.
 	let prevPlayer = $state<number | null>(null);
-	let switchPing = $state<{ player: number; side: string } | null>(null);
+	let switchPing = $state<{ player: number; side: string; color: string; key: number } | null>(
+		null
+	);
 	let switchTimer: ReturnType<typeof setTimeout> | null = null;
+	let switchSeq = 0;
 	$effect(() => {
 		const cur = sideMeta?.player;
 		if (cur === undefined || cur === null) return;
-		if (prevPlayer !== null && cur !== prevPlayer) {
-			switchPing = { player: cur, side: sideMeta?.player_side ?? '' };
+		if (prevPlayer !== null && cur !== prevPlayer && !loading) {
+			switchPing = {
+				player: cur,
+				side: sideMeta?.player_side ?? '',
+				color: playerColor(cur),
+				key: ++switchSeq
+			};
 			if (switchTimer) clearTimeout(switchTimer);
 			switchTimer = setTimeout(() => {
 				switchPing = null;
 				switchTimer = null;
-			}, 700);
+			}, 600);
 		}
 		prevPlayer = cur;
 	});
@@ -117,25 +127,199 @@
 		{/if}
 
 		{#if switchPing}
-			<div
-				class="pointer-events-none absolute left-1/2 top-4 z-40 -translate-x-1/2 select-none"
-				transition:fade={{ duration: 180 }}
-			>
+			{#key switchPing.key}
+				<!-- Tactical reveal: edge vignette + diagonal beam + corner brackets.
+				     All overlays are pointer-events:none so they don't steal clicks. -->
 				<div
-					class="flex items-center gap-2 rounded-md bg-black/70 px-3 py-1.5 shadow-lg ring-1 ring-white/10 backdrop-blur-sm"
+					class="vs-vignette pointer-events-none absolute inset-0 z-30"
+					style="--ping-color: {switchPing.color};"
+				></div>
+				<div
+					class="vs-beam-wrap pointer-events-none absolute inset-0 z-30 overflow-hidden"
+					style="--ping-color: {switchPing.color};"
 				>
-					<span
-						class="inline-flex h-5 w-5 items-center justify-center rounded-sm font-mono text-[11px] font-bold text-white"
-						style="background-color: {playerColor(switchPing.player)};"
+					<div class="vs-beam"></div>
+				</div>
+				<div
+					class="vs-brackets pointer-events-none absolute inset-3 z-30"
+					style="--ping-color: {switchPing.color};"
+				>
+					<span class="vs-bracket vs-bracket--tl"></span>
+					<span class="vs-bracket vs-bracket--tr"></span>
+					<span class="vs-bracket vs-bracket--bl"></span>
+					<span class="vs-bracket vs-bracket--br"></span>
+				</div>
+				<div class="vs-chip pointer-events-none absolute bottom-4 left-4 z-40 select-none">
+					<div
+						class="flex items-center gap-2 rounded-md bg-black/75 px-2.5 py-1.5 shadow-lg ring-1 ring-white/10 backdrop-blur-sm"
+						style="box-shadow: 0 0 24px {switchPing.color}55;"
 					>
-						{switchPing.player}
-					</span>
-					<span class="text-xs font-medium text-white/95">
-						Switched to <span class="font-mono">{switchPing.side}</span>
-					</span>
+						<span
+							class="inline-flex h-5 w-5 items-center justify-center rounded-sm font-mono text-[11px] font-bold text-white"
+							style="background-color: {switchPing.color};"
+						>
+							{switchPing.player}
+						</span>
+						<span
+							class="border-l border-white/15 pl-2 text-[10px] font-semibold uppercase tracking-wide text-white/70"
+						>
+							{switchPing.side || 'POV'}
+						</span>
+					</div>
 				</div>
-			</div>
+			{/key}
 		{/if}
 	</AspectRatio>
 
 </div>
+
+<style>
+	/* Diagonal player-colored beam swept across the stage. The bright white
+	   edges + colored core + screen blend produce the "neon scan" look. */
+	.vs-beam {
+		position: absolute;
+		top: -25%;
+		bottom: -25%;
+		left: -40%;
+		width: 50%;
+		background: linear-gradient(
+			110deg,
+			transparent 0%,
+			transparent 35%,
+			rgba(255, 255, 255, 0.55) 47%,
+			var(--ping-color) 50%,
+			rgba(255, 255, 255, 0.55) 53%,
+			transparent 65%,
+			transparent 100%
+		);
+		filter: blur(0.5px);
+		mix-blend-mode: screen;
+		opacity: 0;
+		transform: translateX(-30%) skewX(-18deg);
+		animation: vs-beam-sweep 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
+	}
+	@keyframes vs-beam-sweep {
+		0% {
+			opacity: 0;
+			transform: translateX(-30%) skewX(-18deg);
+		}
+		18% {
+			opacity: 1;
+		}
+		82% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			transform: translateX(380%) skewX(-18deg);
+		}
+	}
+
+	/* Soft player-colored vignette around the edges, like a HUD glow. */
+	.vs-vignette {
+		background: radial-gradient(
+			ellipse at center,
+			transparent 55%,
+			color-mix(in srgb, var(--ping-color) 40%, transparent) 100%
+		);
+		opacity: 0;
+		animation: vs-vignette-pulse 520ms ease-out forwards;
+	}
+	@keyframes vs-vignette-pulse {
+		0% {
+			opacity: 0;
+		}
+		25% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+
+	/* Four reticle-style corner brackets in the player color. */
+	.vs-bracket {
+		position: absolute;
+		width: 26px;
+		height: 26px;
+		border: 2px solid var(--ping-color);
+		opacity: 0;
+		filter: drop-shadow(0 0 4px var(--ping-color));
+		animation: vs-bracket-pulse 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+	}
+	.vs-bracket--tl {
+		top: 0;
+		left: 0;
+		border-right: 0;
+		border-bottom: 0;
+	}
+	.vs-bracket--tr {
+		top: 0;
+		right: 0;
+		border-left: 0;
+		border-bottom: 0;
+	}
+	.vs-bracket--bl {
+		bottom: 0;
+		left: 0;
+		border-right: 0;
+		border-top: 0;
+	}
+	.vs-bracket--br {
+		bottom: 0;
+		right: 0;
+		border-left: 0;
+		border-top: 0;
+	}
+	@keyframes vs-bracket-pulse {
+		0% {
+			opacity: 0;
+			transform: scale(1.45);
+		}
+		25% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		70% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			transform: scale(1);
+		}
+	}
+
+	/* HUD chip: slides up from below the stage edge. */
+	.vs-chip {
+		animation: vs-chip-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+	}
+	@keyframes vs-chip-in {
+		0% {
+			opacity: 0;
+			transform: translateY(14px);
+		}
+		22% {
+			opacity: 1;
+			transform: translateY(-2px);
+		}
+		38% {
+			transform: translateY(0);
+		}
+		78% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.vs-beam,
+		.vs-vignette,
+		.vs-bracket,
+		.vs-chip {
+			animation-duration: 1ms;
+		}
+	}
+</style>

src/lib/utils/format.ts

@@ -24,6 +24,16 @@ export function formatDuration(seconds: number): string {
 	return `${m}:${s.toString().padStart(2, '0')}`;
 }
 
+export function formatLongDuration(seconds: number): string {
+	if (!Number.isFinite(seconds) || seconds <= 0) return '—';
+	const total = Math.round(seconds);
+	const h = Math.floor(total / 3600);
+	const m = Math.floor((total % 3600) / 60);
+	const s = total % 60;
+	if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+	return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
 export function ticksToSeconds(ticks: number, tickRate = 64): number {
 	return ticks / tickRate;
 }

src/routes/+page.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
 	import Header from '$lib/components/header.svelte';
-	import MatchCard from '$lib/components/match-card.svelte';
 	import { Skeleton } from '$lib/components/ui/skeleton';
+	import * as Tabs from '$lib/components/ui/tabs';
+	import MatchTable from '$lib/components/match-table/match-table.svelte';
+	import {
+		buildMapRows,
+		buildMatchRows,
+		buildRoundRows
+	} from '$lib/components/match-table/rows';
+	import {
+		mapColumns,
+		matchColumns,
+		roundColumns
+	} from '$lib/components/match-table/columns';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
@@ -24,6 +35,25 @@
 			PERSPECTIVES_PER_ROUND
 	);
 	const totalHours = $derived(totalSeconds / 3600);
+
+	const roundRows = $derived(buildRoundRows(data.matches, data.rounds));
+	const mapRows = $derived(buildMapRows(data.matches, data.rounds));
+	const matchRows = $derived(buildMatchRows(data.matches, data.rounds));
+
+	const mapOptions = $derived(
+		Array.from(new Set(data.matches.map((m) => m.map_name))).sort()
+	);
+
+	const linkToMap = (m: { match_id: number; map_name: string }) =>
+		`/match/${encodeURIComponent(m.match_id)}/${encodeURIComponent(m.map_name)}`;
+
+	const linkToRound = (r: { match_id: number; map_name: string; round: number }) =>
+		`${linkToMap(r)}?round=${r.round}`;
+
+	const linkToFirstMap = (m: { match_id: number; first_map: string }) =>
+		`/match/${encodeURIComponent(m.match_id)}/${encodeURIComponent(m.first_map)}`;
+
+	let view = $state<'rounds' | 'maps' | 'matches'>('rounds');
 </script>
 
 <Header />
@@ -66,20 +96,56 @@
 	</section>
 
 	<section>
-		<h2 class="font-heading mb-4 text-lg font-semibold tracking-tight">All maps</h2>
-
-		{#if data.matches.length === 0}
-			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-				{#each Array(8) as _, i (i)}
-					<Skeleton class="h-40 w-full" />
-				{/each}
-			</div>
-		{:else}
-			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-				{#each data.matches as match (match.match_id + '-' + match.map_name)}
-					<MatchCard {match} />
-				{/each}
+		<Tabs.Root bind:value={view} class="w-full">
+			<div class="mb-2 flex items-center justify-between gap-2">
+				<h2 class="font-heading text-lg font-semibold tracking-tight">Browse the archive</h2>
+				<Tabs.List>
+					<Tabs.Trigger value="rounds">Rounds</Tabs.Trigger>
+					<Tabs.Trigger value="maps">Maps</Tabs.Trigger>
+					<Tabs.Trigger value="matches">Matches</Tabs.Trigger>
+				</Tabs.List>
 			</div>
-		{/if}
+
+			{#if data.matches.length === 0}
+				<div class="space-y-2">
+					{#each Array(8) as _, i (i)}
+						<Skeleton class="h-10 w-full" />
+					{/each}
+				</div>
+			{:else}
+				<Tabs.Content value="rounds">
+					<MatchTable
+						data={roundRows}
+						columns={roundColumns}
+						mapOptions={mapOptions}
+						searchPlaceholder="Search event, team, map…"
+						initialSorting={[{ id: 'match_date', desc: true }]}
+						getRowHref={linkToRound}
+						emptyMessage="No rounds yet. Round indexes load from the rounds parquet shards."
+					/>
+				</Tabs.Content>
+
+				<Tabs.Content value="maps">
+					<MatchTable
+						data={mapRows}
+						columns={mapColumns}
+						mapOptions={mapOptions}
+						searchPlaceholder="Search event, team, map…"
+						initialSorting={[{ id: 'match_date', desc: true }]}
+						getRowHref={linkToMap}
+					/>
+				</Tabs.Content>
+
+				<Tabs.Content value="matches">
+					<MatchTable
+						data={matchRows}
+						columns={matchColumns}
+						searchPlaceholder="Search event or team…"
+						initialSorting={[{ id: 'match_date', desc: true }]}
+						getRowHref={linkToFirstMap}
+					/>
+				</Tabs.Content>
+			{/if}
+		</Tabs.Root>
 	</section>
 </main>

src/routes/match/[matchId]/[mapName]/+page.svelte

@@ -199,7 +199,9 @@
 		// New active video; let it drive the clock again unless we're
 		// already past its own duration (rare — guarded by availablePlayers).
 		activeVideoEnded = virtualTime >= (playerDurations.get(player) ?? 0) - 0.05;
-		bufferedRanges = [];
+		// Keep `bufferedRanges` as-is; the new video's onProgress will
+		// overwrite them within a frame or two. Clearing first makes the
+		// timeline buffered indicator flash off mid-swap.
 		markPlayerReady(player);
 		syncUrl();
 	}
@@ -521,6 +523,9 @@
 						round={currentRoundNum}
 						chunks={previews}
 						{virtualTime}
+						activePlayer={currentPlayer}
+						{availablePlayers}
+						onSelect={selectPlayer}
 					/>
 				</Card.Content>
 			</Card.Root>