Added streak percentage

src/lib/components/WinScreen.svelte

@@ -32,6 +32,7 @@
 		onChapterGuessCompleted,
 		shareText,
 		streak = 0,
+		streakPercentile = null,
 	}: {
 		statsData: StatsData | null;
 		correctBookId: string;
@@ -44,6 +45,7 @@
 		onChapterGuessCompleted: () => void;
 		shareText: string;
 		streak?: number;
+		streakPercentile?: number | null;
 	} = $props();
 
 	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
@@ -66,9 +68,9 @@
 		if (guessCount === 1) {
 			const n = Math.random();
 			if (n < 0.99) {
-				return "🌟 First try! 🌟";
+				return "First try!";
 			} else {
-				return "🗣️ Axios! 🗣️";
+				return "Axios!";
 			}
 		}
 
@@ -107,9 +109,20 @@
 		</p>
 
 		{#if streak > 1}
-			<p class="big-text text-orange-500! text-sm! mt-4">
-				🔥 {streak} day streak!
+			<p class="big-text text-orange-500! text-lg! my-4">
+				🔥 {streak} days in a row!
 			</p>
+			{#if streak >= 7}
+				<p class="font-black text-lg font-triodion">
+					Thank you for making Bibdle part of your daily routine!
+				</p>
+			{/if}
+			{#if streakPercentile !== null}
+				<p class="text-sm mt-4 text-gray-700 font-triodion">
+					Only {streakPercentile}% of players have a streak of {streak}
+					or greater.
+				</p>
+			{/if}
 		{/if}
 	</Container>