v2.01 style change

src/routes/+page.svelte

@@ -99,6 +99,16 @@
 		return "🔴 C-";
 	}
 
+	function toOrdinal(n: number): string {
+		if (n >= 11 && n <= 13) {
+			return `${n}th`;
+		}
+		const mod = n % 10;
+		const suffix =
+			mod === 1 ? "st" : mod === 2 ? "nd" : mod === 3 ? "rd" : "th";
+		return `${n}${suffix}`;
+	}
+
 	function generateUUID(): string {
 		// Try native randomUUID if available
 		if (typeof window.crypto.randomUUID === "function") {
@@ -391,13 +401,13 @@
 				<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
 					🎉 Congratulations! 🎉
 				</h2>
-				<p class="text-lg sm:text-xl md:text-2xl mb-4">
+				<p class="text-lg sm:text-xl md:text-2xl">
 					The verse is from <span
 						class="font-black text-xl sm:text-2xl md:text-3xl"
 						>{getBookById(correctBookId)?.name}</span
 					>
 				</p>
-				<p class="text-xl opacity-90">{dailyVerse.reference}</p>
+				<!-- <p class="text-xl opacity-90">{dailyVerse.reference}</p> -->
 				<p
 					class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
 				>
@@ -424,22 +434,24 @@
 					>
 						<p class="font-semibold">
 							You were the <span class="text-2xl font-black"
-								>#{statsData.solveRank}</span
-							> person to solve today!
+								>{toOrdinal(statsData.solveRank)}</span
+							> person to solve today.
 						</p>
 						<p class="font-semibold">
-							You ranked <span class="text-2xl font-black"
-								>#{statsData.guessRank}</span
-							> by number of guesses
+							You are <span class="text-2xl font-black"
+								>{toOrdinal(statsData.guessRank)}</span
+							> in guesses.
 						</p>
-						<p class="opacity-90">
+						<!-- <p class="opacity-90">
 							{statsData.totalSolves}
 							{statsData.totalSolves === 1
 								? "person has"
 								: "people have"} solved today
-						</p>
+						</p> -->
 						<p class="opacity-90">
-							Average guesses: {statsData.averageGuesses}
+							Average: <span class="font-semibold"
+								>{statsData.averageGuesses.toFixed(1)}</span
+							> guesses
 						</p>
 					</div>
 				{:else if !statsSubmitted}