Added instructions

src/lib/components/GuessesTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { bibleBooks } from "$lib/types/bible";
+	import Container from "./Container.svelte";
 
 	interface Guess {
 		book: {
@@ -14,8 +15,10 @@
 		firstLetterMatch: boolean;
 	}
 
-  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
+	let {
-    $props();
+		guesses,
+		correctBookId,
+	}: { guesses: Guess[]; correctBookId: string } = $props();
 
 	let hasGuesses = $derived(guesses.length > 0);
 
@@ -34,7 +37,9 @@
 				return guess.book.name;
 			case "firstLetter":
 				// Check if this is the special Epistles + "1" case
-        const correctBook = bibleBooks.find((b) => b.id === correctBookId);
+				const correctBook = bibleBooks.find(
+					(b) => b.id === correctBookId,
+				);
 				const correctIsEpistlesWithNumber =
 					(correctBook?.section === "Pauline Epistles" ||
 						correctBook?.section === "General Epistles") &&
@@ -60,10 +65,23 @@
 	}
 </script>
 
-{#if hasGuesses}
+{#if !hasGuesses}
+	<Container class="p-6 text-center">
+		<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
+			Instructions
+		</h2>
+		<p class="text-gray-700 leading-relaxed italic">
+			Guess what book of the bible you think the verse is from. You will
+			get clues to tell you if your guess is close or not. Green means the
+			category is correct; red means wrong.
+		</p>
+	</Container>
+{:else}
 	<div class="space-y-3">
 		<!-- Column Headers -->
-    <div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400">
+		<div
+			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
+		>
 			<div
 				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
 			>
@@ -90,14 +108,12 @@
 			<div class="flex gap-2 justify-center">
 				<!-- Book Column -->
 				<div
-          class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in {getBoxColor(
 						guess.book.id === correctBookId,
 					)}"
 					style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
 				>
-          <span
+					<span class="text-center leading-tight px-1 text-shadow-lg"
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
 						>{getBoxContent(guess, "book")}</span
 					>
 				</div>
@@ -109,9 +125,7 @@
 					)}"
 					style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
 				>
-          <span
+					<span class="text-center leading-tight px-1 text-shadow-sm"
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
 						>{getBoxContent(guess, "testament")}</span
 					>
 				</div>
@@ -124,9 +138,7 @@
 					)}"
 					style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
 				>
-          <span
+					<span class="text-center leading-tight px-1 text-shadow-sm"
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
 						>{getBoxContent(guess, "section")}
 						{#if guess.adjacent}
 							‼️
@@ -141,9 +153,7 @@
 					)}"
 					style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
 				>
-          <span
+					<span class="text-center leading-tight px-1 text-shadow-sm"
-            class="text-center leading-tight px-1"
-            style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
 						>{getBoxContent(guess, "firstLetter")}</span
 					>
 				</div>