switched to NKJV, improved grading, improved styling

src/routes/random/+page.server.ts

@@ -0,0 +1,25 @@
+import type { PageServerLoad } from './$types';
+import { fetchRandomVerse } from '$lib/server/bible-api';
+import { getBookById } from '$lib/server/bible';
+
+export const load: PageServerLoad = async () => {
+	const apiVerse = await fetchRandomVerse();
+
+	// Create a dailyVerse-like object for VerseDisplay
+	const dailyVerse = {
+		id: 'debug-' + Date.now(),
+		date: new Date().toLocaleDateString('en-CA', { timeZone: 'America/New_York' }),
+		bookId: apiVerse.bookId,
+		reference: apiVerse.reference,
+		verseText: apiVerse.verseText,
+		createdAt: new Date()
+	};
+
+	const correctBook = getBookById(dailyVerse.bookId) ?? null;
+
+	return {
+		dailyVerse,
+		correctBookId: dailyVerse.bookId,
+		correctBook
+	};
+};

src/routes/random/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { PageProps } from "./$types";
+
+  import VerseDisplay from "$lib/components/VerseDisplay.svelte";
+
+  let { data }: PageProps = $props();
+
+  let dailyVerse = $derived(data.dailyVerse);
+</script>
+
+<svelte:head>
+  <title>Random Verse - Bibdle</title>
+</svelte:head>
+
+<div class="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100 py-12 px-4">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">
+      Random Verse Debug
+    </h1>
+
+    <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
+      <h2 class="text-xl font-semibold text-gray-700 mb-4">Verse Details</h2>
+      <div class="space-y-2 text-gray-600">
+        <p><strong>Book ID:</strong> {dailyVerse.bookId}</p>
+        <p><strong>Reference:</strong> {dailyVerse.reference}</p>
+        <p><strong>Verse Text:</strong> {dailyVerse.verseText}</p>
+      </div>
+    </div>
+
+    <VerseDisplay {data} isWon={true} />
+  </div>
+</div>