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/layout/ThemeToggle.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Sun, Moon, Monitor } from 'lucide-svelte';
+	import { preferences } from '$lib/stores';
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	const themes = [
+		{ value: 'cs2light', label: 'Light', icon: Sun },
+		{ value: 'cs2dark', label: 'Dark', icon: Moon },
+		{ value: 'auto', label: 'Auto', icon: Monitor }
+	] as const;
+
+	const currentIcon = $derived(
+		themes.find((t) => t.value === $preferences.theme)?.icon || Monitor
+	);
+
+	const applyTheme = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
+		if (!browser) return;
+
+		let actualTheme = theme;
+
+		if (theme === 'auto') {
+			const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+			actualTheme = isDark ? 'cs2dark' : 'cs2light';
+		}
+
+		document.documentElement.setAttribute('data-theme', actualTheme);
+	};
+
+	const handleThemeChange = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
+		preferences.setTheme(theme);
+		applyTheme(theme);
+	};
+
+	// Apply theme on mount and when system preference changes
+	onMount(() => {
+		applyTheme($preferences.theme);
+
+		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		const handler = () => {
+			if ($preferences.theme === 'auto') {
+				applyTheme('auto');
+			}
+		};
+
+		mediaQuery.addEventListener('change', handler);
+		return () => mediaQuery.removeEventListener('change', handler);
+	});
+</script>
+
+<!-- Theme Toggle Dropdown -->
+<div class="dropdown dropdown-end">
+	<button tabindex="0" class="btn btn-ghost btn-circle" aria-label="Theme">
+		{@const IconComponent = currentIcon}
+		<IconComponent class="h-5 w-5" />
+	</button>
+	<ul class="menu dropdown-content z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow-lg">
+		{#each themes as { value, label, icon }}
+			{@const IconComponent = icon}
+			<li>
+				<button
+					class:active={$preferences.theme === value}
+					onclick={() => handleThemeChange(value)}
+				>
+					<IconComponent class="h-4 w-4" />
+					{label}
+					{#if value === 'auto'}
+						<span class="text-xs text-base-content/60">(System)</span>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+</div>