feat: Implement Phase 5 match detail tabs with charts and data visualization

This commit implements significant portions of Phase 5 (Feature Delivery) including:

Chart Components (src/lib/components/charts/):
- LineChart.svelte: Line charts with Chart.js integration
- BarChart.svelte: Vertical/horizontal bar charts with stacking
- PieChart.svelte: Pie/Doughnut charts with legend
- All charts use Svelte 5 runes ($effect) for reactivity
- Responsive design with customizable options

Data Display Components (src/lib/components/data-display/):
- DataTable.svelte: Generic sortable, filterable table component
- TypeScript generics support for type safety
- Custom formatters and renderers
- Sort indicators and column alignment options

Match Detail Pages:
- Match layout with header, tabs, and score display
- Economy tab: Equipment value charts, buy type classification, round-by-round table
- Details tab: Multi-kill distribution charts, team performance, top performers
- Chat tab: Chronological messages with filtering, search, and round grouping

Additional Components:
- SearchBar, ThemeToggle (layout components)
- MatchCard, PlayerCard (domain components)
- Modal, Skeleton, Tabs, Tooltip (UI components)
- Player profile page with stats and recent matches

Dependencies:
- Installed chart.js for data visualization
- Created Svelte 5 compatible chart wrappers

Phase 4 marked as complete, Phase 5 at 50% completion.
Flashes and Damage tabs deferred for future implementation.

Note: Minor linting warnings to be addressed in follow-up commit.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

src/lib/components/match/MatchCard.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import Badge from '$lib/components/ui/Badge.svelte';
+	import type { MatchListItem } from '$lib/types';
+
+	interface Props {
+		match: MatchListItem;
+	}
+
+	let { match }: Props = $props();
+
+	const formattedDate = new Date(match.date).toLocaleString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+
+	const mapName = match.map.replace('de_', '').toUpperCase();
+</script>
+
+<a href={`/match/${match.match_id}`} class="block transition-transform hover:scale-[1.02]">
+	<div
+		class="overflow-hidden rounded-lg border border-base-300 bg-base-100 shadow-md transition-shadow hover:shadow-xl"
+	>
+		<!-- Map Header -->
+		<div class="relative h-32 bg-gradient-to-br from-base-300 to-base-200">
+			<div class="absolute inset-0 flex items-center justify-center">
+				<span class="text-5xl font-bold text-base-content/10">{mapName}</span>
+			</div>
+			<div class="absolute bottom-3 left-3">
+				<Badge variant="default">{match.map}</Badge>
+			</div>
+			{#if match.demo_parsed}
+				<div class="absolute right-3 top-3">
+					<Badge variant="success" size="sm">Parsed</Badge>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Match Info -->
+		<div class="p-4">
+			<!-- Score -->
+			<div class="mb-3 flex items-center justify-center gap-3">
+				<span class="font-mono text-2xl font-bold text-terrorist">{match.score_team_a}</span>
+				<span class="text-base-content/40">-</span>
+				<span class="font-mono text-2xl font-bold text-ct">{match.score_team_b}</span>
+			</div>
+
+			<!-- Meta -->
+			<div class="flex items-center justify-between text-sm text-base-content/60">
+				<span>{formattedDate}</span>
+				{#if match.duration}
+					<span>{Math.floor(match.duration / 60)}m</span>
+				{/if}
+			</div>
+
+			<!-- Result Badge -->
+			<div class="mt-3 flex justify-center">
+				{#if match.match_result === 0}
+					<Badge variant="warning" size="sm">Tie</Badge>
+				{:else if match.match_result === 1}
+					<Badge variant="success" size="sm">Team A Win</Badge>
+				{:else if match.match_result === 2}
+					<Badge variant="error" size="sm">Team B Win</Badge>
+				{/if}
+			</div>
+		</div>
+	</div>
+</a>