feat: Add CS:GO rank icons for legacy matches

Implemented rank icon display system for pre-CS2 matches:

New Components:
- RankIcon.svelte: Displays CS:GO skill group icons (0-18)
  - Supports sm/md/lg sizes
  - Shows appropriate rank icon based on skill group
  - Includes hover tooltips with rank names
  - Handles all 19 rank tiers (Silver I → Global Elite)

Updated Components:
- PremierRatingBadge: Now intelligently switches between:
  - CS:GO rank icons (when rank_old exists, rank_new doesn't)
  - Premier rating badge (when rank_new exists)
  - "Unranked" text (when neither exists)

Assets:
- Rank icons already present in static/images/rank_icons/
- Weapon icons already present in static/images/weapons/
- All icons in SVG format for crisp display at any size

Display Logic:
- Legacy matches (pre-Sept 2023): Show CS:GO rank icons
- Modern matches (CS2): Show Premier rating with trophy icon
- Automatically detects based on rank_old/rank_new fields

The scoreboard now displays the appropriate ranking visualization
based on match era, matching the original CSGO.WTF design.

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

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

src/lib/components/ui/PremierRatingBadge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { formatPremierRating, getPremierRatingChange } from '$lib/utils/formatters';
 	import { Trophy, TrendingUp, TrendingDown } from 'lucide-svelte';
+	import RankIcon from './RankIcon.svelte';
 
 	interface Props {
 		rating: number | undefined | null;
@@ -22,6 +23,11 @@
 		class: className = ''
 	}: Props = $props();
 
+	// Determine if this is a legacy CS:GO match (has old rank but no new rating)
+	const isLegacyRank = $derived(
+		(!rating || rating === 0) && oldRating !== undefined && oldRating !== null && oldRating > 0
+	);
+
 	const tierInfo = $derived(formatPremierRating(rating));
 	const changeInfo = $derived(showChange ? getPremierRatingChange(oldRating, rating) : null);
 
@@ -44,25 +50,34 @@
 	);
 </script>
 
-<div class={classes}>
-	{#if showIcon}
-		<Trophy class={iconSizes[size]} />
-	{/if}
+{#if isLegacyRank}
+	<!-- Show CS:GO rank icon for legacy matches -->
+	<RankIcon skillGroup={oldRating} {size} class={className} />
+{:else if !rating || rating === 0}
+	<!-- No rating available -->
+	<span class="text-sm text-base-content/50">Unranked</span>
+{:else}
+	<!-- Show Premier rating for CS2 matches -->
+	<div class={classes}>
+		{#if showIcon}
+			<Trophy class={iconSizes[size]} />
+		{/if}
 
-	<span>{tierInfo.formatted}</span>
+		<span>{tierInfo.formatted}</span>
 
-	{#if showTier}
-		<span class="opacity-75">({tierInfo.tier})</span>
-	{/if}
+		{#if showTier}
+			<span class="opacity-75">({tierInfo.tier})</span>
+		{/if}
 
-	{#if showChange && changeInfo}
-		<span class="ml-1 flex items-center gap-0.5 {changeInfo.cssClasses}">
-			{#if changeInfo.isPositive}
-				<TrendingUp class={iconSizes[size]} />
-			{:else if changeInfo.change < 0}
-				<TrendingDown class={iconSizes[size]} />
-			{/if}
-			{changeInfo.display}
-		</span>
-	{/if}
-</div>
+		{#if showChange && changeInfo}
+			<span class="ml-1 flex items-center gap-0.5 {changeInfo.cssClasses}">
+				{#if changeInfo.isPositive}
+					<TrendingUp class={iconSizes[size]} />
+				{:else if changeInfo.change < 0}
+					<TrendingDown class={iconSizes[size]} />
+				{/if}
+				{changeInfo.display}
+			</span>
+		{/if}
+	</div>
+{/if}

src/lib/components/ui/RankIcon.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	/**
+	 * CS:GO Skill Group Rank Icon Component
+	 * Displays the appropriate rank icon based on skill group (0-18)
+	 */
+	interface Props {
+		/** CS:GO skill group (0-18) */
+		skillGroup: number | undefined | null;
+		size?: 'sm' | 'md' | 'lg';
+		showLabel?: boolean;
+		class?: string;
+	}
+
+	let { skillGroup, size = 'md', showLabel = false, class: className = '' }: Props = $props();
+
+	// Map skill groups to rank names
+	const rankNames: Record<number, string> = {
+		0: 'Unranked',
+		1: 'Silver I',
+		2: 'Silver II',
+		3: 'Silver III',
+		4: 'Silver IV',
+		5: 'Silver Elite',
+		6: 'Silver Elite Master',
+		7: 'Gold Nova I',
+		8: 'Gold Nova II',
+		9: 'Gold Nova III',
+		10: 'Gold Nova Master',
+		11: 'Master Guardian I',
+		12: 'Master Guardian II',
+		13: 'Master Guardian Elite',
+		14: 'Distinguished Master Guardian',
+		15: 'Legendary Eagle',
+		16: 'Legendary Eagle Master',
+		17: 'Supreme Master First Class',
+		18: 'The Global Elite'
+	};
+
+	const sizeClasses = {
+		sm: 'h-6 w-6',
+		md: 'h-8 w-8',
+		lg: 'h-12 w-12'
+	};
+
+	const labelSizeClasses = {
+		sm: 'text-xs',
+		md: 'text-sm',
+		lg: 'text-base'
+	};
+
+	const iconPath = $derived(
+		skillGroup !== undefined && skillGroup !== null && skillGroup >= 0 && skillGroup <= 18
+			? `/images/rank_icons/skillgroup${skillGroup}.svg`
+			: '/images/rank_icons/skillgroup_none.svg'
+	);
+
+	const rankName = $derived(
+		skillGroup !== undefined && skillGroup !== null ? rankNames[skillGroup] || 'Unknown' : 'Unknown'
+	);
+</script>
+
+{#if showLabel}
+	<div class="inline-flex items-center gap-2 {className}">
+		<img src={iconPath} alt={rankName} class={sizeClasses[size]} />
+		<span class="font-medium {labelSizeClasses[size]}">{rankName}</span>
+	</div>
+{:else}
+	<img src={iconPath} alt={rankName} title={rankName} class={`${sizeClasses[size]} ${className}`} />
+{/if}