feat: migrate frontend React 18 → Svelte 5 + SvelteKit

Core logic portable (economy, balance, cosmetics, migrateSave) — zero rewrite.
136 tests green, identiques. Backend inchangé.

- Svelte 5 runes stores (game, auth, toast) remplacent Zustand
- SvelteKit adapter-static SPA (dist/ output, fallback index.html)
- Tailwind v4 conservé, design system .gp-* porté
- Transitions natives : slide, fly, scale, fade sur toute l'UI
- Sidebar tabbée (Production/Evolution/Collection) + CollapsiblePanel
- Mobile bottom sheet avec FAB toggle + backdrop blur
- Click particles réactifs Svelte (plus de DOM impératif)
- TadpoleSprite bounce + glow ring au clic
- Guide refait en accordéon, Achievements avec filtres
- a11y : focus-visible, Escape modals, aria-current, aria-labels
- CI/CD adapté (tests + build + rsync)
- Build 504K (vs ~1.2MB React)

Frontend/src/lib/components/PrestigeScreen.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { fly, scale, fade } from 'svelte/transition';
+	import { quintOut, backOut } from 'svelte/easing';
+	import { gameStore } from '$lib/stores/game.svelte';
+	import { computePrestigeDna, getPrestigeDnaBonus, getPrestigeThreshold } from '$lib/core/economy';
+	import { formatNumber } from '$lib/utils/formatNumber';
+
+	function formatDuration(ms: number): string {
+		const totalSeconds = Math.floor(ms / 1000);
+		const hours = Math.floor(totalSeconds / 3600);
+		const minutes = Math.floor((totalSeconds % 3600) / 60);
+		const seconds = totalSeconds % 60;
+		if (hours > 0) return `${hours}h ${minutes}m`;
+		if (minutes > 0) return `${minutes}m ${seconds}s`;
+		return `${seconds}s`;
+	}
+
+	let baseDna = $derived(computePrestigeDna(gameStore.state.lifetimeTadpoles, gameStore.state.prestigeCount));
+	let dnaBonus = $derived(getPrestigeDnaBonus(gameStore.state.evolutionTree));
+	let dnaPreview = $derived(Math.floor(baseDna * (1 + dnaBonus)));
+	let threshold = $derived(getPrestigeThreshold(gameStore.state));
+	let canPrestige = $derived(gameStore.state.lifetimeTadpoles >= threshold);
+	let runDuration = $derived(Date.now() - gameStore.state.runStats.startedAt);
+	let bestRun = $derived(gameStore.state.runStats.bestRun);
+	let isBestAdn = $derived(!bestRun || dnaPreview > bestRun.adn);
+	let isBestTadpoles = $derived(!bestRun || gameStore.state.lifetimeTadpoles > bestRun.tadpoles);
+
+	function handlePrestige() {
+		if (canPrestige) gameStore.prestige();
+	}
+</script>
+
+<svelte:window onkeydown={(e) => { if (e.key === 'Escape' && gameStore.showPrestigeScreen) gameStore.closePrestige(); }} />
+
+{#if gameStore.showPrestigeScreen}
+	<!-- Backdrop -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center"
+		style="background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);"
+		transition:fade={{ duration: 300 }}
+	>
+		<!-- Modal card -->
+		<div
+			class="gp max-w-md w-full mx-4"
+			in:scale={{ duration: 400, start: 0.85, easing: backOut }}
+			out:scale={{ duration: 200, start: 0.95 }}
+		>
+			<!-- Header with generation number -->
+			<div class="text-center" in:fly={{ y: -20, delay: 100, duration: 400, easing: quintOut }}>
+				<span class="gp-title text-lg!">Nouvelle Generation</span>
+				<p class="gp-label mt-1">Generation #{gameStore.state.prestigeCount + 1}</p>
+			</div>
+
+			<div class="gp-sep"></div>
+
+			<!-- ADN Preview — the hero number -->
+			<div
+				class="flex flex-col items-center gap-1 py-3"
+				in:scale={{ delay: 200, duration: 500, start: 0.5, easing: backOut }}
+			>
+				<span class="gp-label">ADN Ancestral</span>
+				<span
+					class="text-4xl font-extrabold"
+					style="color: #a78bfa; font-family: var(--font); text-shadow: 0 0 20px rgba(167,139,250,0.4);"
+				>
+					+{formatNumber(dnaPreview)}
+				</span>
+				{#if dnaBonus > 0}
+					<span class="gp-label">(base {formatNumber(baseDna)} + {Math.round(dnaBonus * 100)}% arbre)</span>
+				{/if}
+				<span class="gp-label mt-1">Total apres : {formatNumber(gameStore.state.ancestralDna + dnaPreview)} ADN</span>
+			</div>
+
+			<div class="gp-sep"></div>
+
+			<!-- Run Stats -->
+			<div class="flex flex-col gap-2" in:fly={{ y: 20, delay: 300, duration: 400, easing: quintOut }}>
+				<span class="gp-zone-label">Stats de la run</span>
+
+				<div class="flex justify-between">
+					<span class="gp-label">Duree</span>
+					<span class="gp-value">{formatDuration(runDuration)}</span>
+				</div>
+
+				<div class="flex justify-between">
+					<span class="gp-label">Tetards produits</span>
+					<span class="gp-value {isBestTadpoles ? 'gp-accent-green' : ''}">
+						{formatNumber(gameStore.state.lifetimeTadpoles)}
+						{#if isBestTadpoles && bestRun} ★{/if}
+					</span>
+				</div>
+
+				<div class="flex justify-between">
+					<span class="gp-label">ADN cette run</span>
+					<span class="gp-value {isBestAdn ? 'gp-accent-green' : ''}">
+						{formatNumber(dnaPreview)}
+						{#if isBestAdn && bestRun} ★{/if}
+					</span>
+				</div>
+
+				{#if bestRun}
+					<div class="flex justify-between">
+						<span class="gp-label">Vitesse vs meilleure</span>
+						<span class="gp-value {runDuration < bestRun.duration ? 'gp-accent-green' : 'gp-accent-amber'}">
+							{#if runDuration < bestRun.duration}
+								{Math.round((1 - runDuration / bestRun.duration) * 100)}% plus rapide
+							{:else if runDuration > bestRun.duration}
+								{Math.round((runDuration / bestRun.duration - 1) * 100)}% plus lent
+							{:else}
+								identique
+							{/if}
+						</span>
+					</div>
+				{/if}
+			</div>
+
+			{#if bestRun}
+				<div class="gp-sep"></div>
+				<div class="flex flex-col gap-1" in:fly={{ y: 15, delay: 400, duration: 300, easing: quintOut }}>
+					<span class="gp-zone-label">Meilleure run</span>
+					<div class="flex justify-between">
+						<span class="gp-label">Duree</span>
+						<span class="gp-value">{formatDuration(bestRun.duration)}</span>
+					</div>
+					<div class="flex justify-between">
+						<span class="gp-label">ADN</span>
+						<span class="gp-value gp-accent-purple">{formatNumber(bestRun.adn)}</span>
+					</div>
+				</div>
+			{/if}
+
+			<div class="gp-sep"></div>
+
+			<!-- Reset info -->
+			<div class="text-center" in:fade={{ delay: 350, duration: 300 }}>
+				<p class="gp-label">Tetards et generateurs remis a zero.</p>
+				<p class="gp-label">Arbre d'Evolution et cosmetiques conserves.</p>
+				<p class="gp-label mt-1 gp-accent-green">+1 reset d'arbre gratuit offert.</p>
+			</div>
+
+			<!-- Actions -->
+			<div class="flex gap-2 mt-1" in:fly={{ y: 20, delay: 450, duration: 300, easing: quintOut }}>
+				<button
+					onclick={() => gameStore.closePrestige()}
+					class="gp-btn flex-1 py-2.5! text-[0.8rem]!"
+					style="background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);"
+				>
+					Annuler
+				</button>
+				{#if canPrestige}
+					<button onclick={handlePrestige} class="gp-btn gp-btn--prestige flex-1 py-2.5! text-[0.8rem]!">
+						Nouvelle Generation
+					</button>
+				{:else}
+					<button class="gp-btn gp-btn--disabled flex-1 py-2.5!" disabled>
+						{formatNumber(threshold - gameStore.state.lifetimeTadpoles)} manquants
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}