style: Redesign error page and remove API docs from footer

Convert error page to neon esports aesthetic with gold theme for
warning states, animated flash icon, and proper button semantics.
Remove API Docs link from footer navigation.

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

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

src/lib/components/layout/Footer.svelte

@@ -7,8 +7,7 @@
 		main: [
 			{ name: 'Home', href: '/' },
 			{ name: 'Matches', href: '/matches' },
-			{ name: 'Players', href: '/players' },
+			{ name: 'Players', href: '/players' }
-			{ name: 'API Docs', href: '/docs/api' }
 		],
 		about: [
 			{ name: 'About', href: '/about' },

src/routes/+error.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Card from '$lib/components/ui/Card.svelte';
 	import { Home, ArrowLeft, Zap } from 'lucide-svelte';
 
 	// Get error information
@@ -9,8 +7,8 @@
 	const status = $page.status;
 
 	// Flash-themed error messages
-	const getErrorMessage = (status: number): string => {
+	const getErrorMessage = (statusCode: number): string => {
-		switch (status) {
+		switch (statusCode) {
 			case 404:
 				return "This page got pop-flashed out of existence. Even we can't see it.";
 			case 500:
@@ -28,8 +26,8 @@
 		}
 	};
 
-	const getErrorTitle = (status: number): string => {
+	const getErrorTitle = (statusCode: number): string => {
-		switch (status) {
+		switch (statusCode) {
 			case 404:
 				return "You've Been Full-Blind";
 			case 500:
@@ -66,69 +64,117 @@
 	<title>{status} - {getErrorTitle(status)} | teamflash.rip</title>
 </svelte:head>
 
-<div class="container mx-auto flex min-h-[60vh] items-center justify-center px-4 py-16">
+<div class="relative min-h-screen bg-void">
-	<Card padding="lg" class="w-full max-w-2xl">
+	<!-- Decorative Background -->
-		<div class="text-center">
+	<div class="pointer-events-none absolute inset-0 overflow-hidden">
-			<!-- Flash Icon -->
+		<!-- Blur orbs -->
-			<div class="mb-4 flex justify-center">
+		<div class="absolute -left-40 top-20 h-80 w-80 rounded-full bg-neon-gold/15 blur-[100px]"></div>
-				<Zap class="h-16 w-16 animate-pulse text-warning" />
+		<div
-			</div>
+			class="absolute -right-40 bottom-20 h-80 w-80 rounded-full bg-neon-red/10 blur-[100px]"
+		></div>
+		<div
+			class="absolute left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-neon-gold/5 blur-[120px]"
+		></div>
+		<!-- Grid pattern -->
+		<div
+			class="absolute inset-0 opacity-20"
+			style="background-image: linear-gradient(rgba(255, 170, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 170, 0, 0.03) 1px, transparent 1px); background-size: 60px 60px;"
+		></div>
+	</div>
 
-			<!-- Error Code -->
+	<!-- Content -->
-			<div class="mb-4 text-8xl font-bold text-primary">
+	<div
-				{status}
+		class="container relative z-10 mx-auto flex min-h-[80vh] items-center justify-center px-4 py-16"
-			</div>
+	>
-
+		<div class="w-full max-w-2xl rounded-xl border border-white/10 bg-void-light p-8 md:p-12">
-			<!-- Error Title -->
+			<div class="text-center">
-			<h1 class="mb-4 text-3xl font-bold text-base-content">
+				<!-- Flash Icon -->
-				{getErrorTitle(status)}
+				<div class="mb-6 flex justify-center">
-			</h1>
+					<div class="relative">
-
+						<Zap
-			<!-- Error Message -->
+							class="h-20 w-20 animate-pulse text-neon-gold"
-			<p class="mb-4 text-lg text-base-content/70">
+							style="filter: drop-shadow(0 0 20px rgba(255, 170, 0, 0.6));"
-				{getErrorMessage(status)}
+						/>
-			</p>
+						<div
-
+							class="absolute inset-0 animate-ping rounded-full bg-neon-gold/20"
-			<!-- Random Flash Pun -->
+							style="animation-duration: 2s;"
-			<p class="mb-8 text-sm italic text-base-content/50">
+						></div>
-				"{randomPun}"
+					</div>
-			</p>
-
-			<!-- Debug Info (only in development) -->
-			{#if import.meta.env?.DEV && error}
-				<div class="mb-8 rounded-lg bg-base-300 p-4 text-left">
-					<p class="mb-2 font-mono text-sm text-error">
-						<strong>Flash Report (Debug):</strong>
-					</p>
-					<pre class="overflow-x-auto text-xs text-base-content/80">{JSON.stringify(
-							error,
-							null,
-							2
-						)}</pre>
 				</div>
-			{/if}
 
-			<!-- Action Buttons -->
+				<!-- Error Code -->
-			<div class="flex flex-col justify-center gap-4 sm:flex-row">
+				<div
-				<Button variant="secondary" href="javascript:history.back()">
+					class="mb-4 font-mono text-8xl font-bold text-neon-gold md:text-9xl"
-					<ArrowLeft class="mr-2 h-5 w-5" />
+					style="text-shadow: 0 0 40px rgba(255, 170, 0, 0.5), 0 0 80px rgba(255, 170, 0, 0.3);"
-					Peek Again
+				>
-				</Button>
+					{status}
+				</div>
 
-				<Button variant="primary" href="/">
+				<!-- Error Title -->
-					<Home class="mr-2 h-5 w-5" />
+				<h1
-					Return to Spawn
+					class="mb-4 text-3xl font-bold text-white"
-				</Button>
+					style="text-shadow: 0 0 20px rgba(255, 170, 0, 0.3);"
+				>
+					{getErrorTitle(status)}
+				</h1>
+
+				<!-- Error Message -->
+				<p class="mb-4 text-lg text-white/70">
+					{getErrorMessage(status)}
+				</p>
+
+				<!-- Random Flash Pun -->
+				<p class="mb-8 text-sm italic text-white/40">
+					"{randomPun}"
+				</p>
+
+				<!-- Debug Info (only in development) -->
+				{#if import.meta.env?.DEV && error}
+					<div class="mb-8 rounded-lg border border-neon-red/30 bg-neon-red/5 p-4 text-left">
+						<p class="mb-2 font-mono text-sm text-neon-red">
+							<strong>Flash Report (Debug):</strong>
+						</p>
+						<pre class="overflow-x-auto text-xs text-white/70">{JSON.stringify(
+								error,
+								null,
+								2
+							)}</pre>
+					</div>
+				{/if}
+
+				<!-- Action Buttons -->
+				<div class="flex flex-col justify-center gap-4 sm:flex-row">
+					<button
+						onclick={() => history.back()}
+						class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/20 px-6 py-3 font-medium text-white/80 transition-all duration-300 hover:bg-white/10 hover:text-white"
+					>
+						<ArrowLeft class="h-5 w-5" />
+						Peek Again
+					</button>
+
+					<a
+						href="/"
+						class="inline-flex items-center justify-center gap-2 rounded-lg bg-neon-gold px-6 py-3 font-medium text-void transition-all duration-300 hover:shadow-[0_0_25px_rgba(255,170,0,0.4)]"
+					>
+						<Home class="h-5 w-5" />
+						Return to Spawn
+					</a>
+				</div>
+
+				<!-- Help Text -->
+				<p class="mt-8 text-sm text-white/40">
+					If this flash keeps happening, please
+					<a
+						href="https://somegit.dev/CSGOWTF/csgowtf/issues"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-neon-blue underline decoration-neon-blue/30 transition-colors hover:text-neon-blue hover:decoration-neon-blue"
+					>
+						report it on GitHub
+					</a>
+					(we won't flash you, we promise)
+				</p>
 			</div>
-
-			<!-- Help Text -->
-			<p class="mt-8 text-sm text-base-content/50">
-				If this flash keeps happening, please
-				<a href="https://somegit.dev/CSGOWTF/csgowtf/issues" class="link-hover link text-primary">
-					report it on GitHub
-				</a>
-				(we won't flash you, we promise)
-			</p>
 		</div>
-	</Card>
+	</div>
 </div>