switched to NKJV, improved grading, improved styling

src/routes/+page.svelte

@@ -125,7 +125,7 @@
 
   $effect(() => {
     if (!browser) return;
-    isDev = window.location.host === "192.168.0.42:5174";
+    isDev = window.location.host === "localhost:5173";
   });
 
   // Load saved guesses
@@ -335,6 +335,21 @@
         }
       });
   }
+
+  function clearLocalStorage() {
+    if (!browser) return;
+    // Clear all bibdle-related localStorage items
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith("bibdle-")) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((key) => localStorage.removeItem(key));
+    // Reload the page to reset state
+    window.location.reload();
+  }
 </script>
 
 <svelte:head>
@@ -376,5 +391,13 @@
     {#if isWon}
       <Feedback />
     {/if}
+    {#if isDev}
+      <button
+        onclick={clearLocalStorage}
+        class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
+      >
+        Clear LocalStorage
+      </button>
+    {/if}
   </div>
 </div>

src/routes/layout.css

@@ -2,10 +2,18 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
-@theme {  
-	--font-triodion: "PT Serif", serif; 
+@theme {
+	--font-triodion: "PT Serif", serif;
 }
 
 html, body {
 	background: oklch(98.11% 0.02777 158.93);
+}
+
+.big-text {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.2em;
+	color: rgb(107 114 128);
+	font-weight: 700;
 }

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>