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}