Move UI controls to bottom and require authentication for stats

- Moved stats button, auth buttons, and debug info to bottom of main page
- Added authentication requirement for /stats route
- Show login prompt for unauthenticated users accessing stats
- Include AuthModal for sign in/sign up from stats page

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

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

src/routes/stats/+page.svelte

@@ -2,6 +2,8 @@
 	import { browser } from "$app/environment";
 	import { goto } from "$app/navigation";
 	import { onMount } from "svelte";
+	import { enhance } from '$app/forms';
+	import AuthModal from "$lib/components/AuthModal.svelte";
 	import { 
 		getGradeColor, 
 		formatDate, 
@@ -15,9 +17,11 @@
 		error?: string;
 		user?: any;
 		session?: any;
+		requiresAuth?: boolean;
 	}
 
 	let { data }: { data: PageData } = $props();
+	let authModalOpen = $state(false);
 
 	let loading = $state(true);
 
@@ -33,28 +37,6 @@
 	}
 
 	onMount(async () => {
-		const url = new URL(window.location.href);
-		const hasUserId = url.searchParams.get('userId');
-		
-		// If user is authenticated, no need to check for anonymousId
-		if (data.user || hasUserId) {
-			loading = false;
-			return;
-		}
-		
-		// For anonymous users, ensure anonymousId is in URL
-		const anonymousId = getOrCreateAnonymousId();
-		if (!anonymousId) {
-			goto("/");
-			return;
-		}
-
-		if (!url.searchParams.get('anonymousId')) {
-			url.searchParams.set('anonymousId', anonymousId);
-			goto(url.pathname + url.search);
-			return;
-		}
-
 		loading = false;
 	});
 
@@ -91,6 +73,27 @@
 				<div class="inline-block w-8 h-8 border-4 border-amber-600 border-t-transparent rounded-full animate-spin"></div>
 				<p class="mt-4 text-gray-600">Loading your stats...</p>
 			</div>
+		{:else if data.requiresAuth}
+			<div class="text-center py-12">
+				<div class="bg-blue-100 border border-blue-300 rounded-lg p-8 max-w-md mx-auto">
+					<h2 class="text-2xl font-bold text-blue-800 mb-4">Authentication Required</h2>
+					<p class="text-blue-700 mb-6">You must be logged in to see your stats.</p>
+					<div class="flex flex-col gap-3">
+						<button
+							onclick={() => authModalOpen = true}
+							class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+						>
+							🔐 Sign In / Sign Up
+						</button>
+						<a 
+							href="/" 
+							class="inline-flex items-center justify-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium"
+						>
+							← Back to Game
+						</a>
+					</div>
+				</div>
+			</div>
 		{:else if data.error}
 			<div class="text-center py-12">
 				<div class="bg-red-100 border border-red-300 rounded-lg p-6 max-w-md mx-auto">
@@ -213,4 +216,6 @@
 			{/if}
 		{/if}
 	</div>
-</div>
+</div>
+
+<AuthModal bind:isOpen={authModalOpen} anonymousId={""} />