From 0f6870344f050a9bf52ba8edd5f415826183cd7e Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Sun, 4 Jan 2026 01:25:49 -0500
Subject: [PATCH] major styling and spacing

---
 src/lib/components/Container.svelte      |  16 +++
 src/lib/components/CountdownTimer.svelte | 134 +++++++++++-----------
 src/lib/components/Feedback.svelte       |  20 ++--
 src/lib/components/SearchInput.svelte    |  94 ++++++++-------
 src/lib/components/VerseDisplay.svelte   |   9 +-
 src/lib/components/WinScreen.svelte      | 138 ++++++++++++-----------
 src/routes/+page.svelte                  |  43 +++----
 todo.md                                  |   9 +-
 8 files changed, 249 insertions(+), 214 deletions(-)
 create mode 100644 src/lib/components/Container.svelte

diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
new file mode 100644
index 0000000..b4d9674
--- /dev/null
+++ b/src/lib/components/Container.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    class?: string;
+  }
+
+  let { children, class: className = "" }: Props = $props();
+</script>
+
+<div
+  class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm rounded-2xl border border-white/50 shadow-sm {className}"
+>
+  {@render children()}
+</div>
diff --git a/src/lib/components/CountdownTimer.svelte b/src/lib/components/CountdownTimer.svelte
index e873ff7..8390bc0 100644
--- a/src/lib/components/CountdownTimer.svelte
+++ b/src/lib/components/CountdownTimer.svelte
@@ -1,90 +1,88 @@
 <script lang="ts">
-	import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy } from "svelte";
 
-	let timeUntilNext = $state("");
-	let intervalId: number | null = null;
+  let timeUntilNext = $state("");
+  let intervalId: number | null = null;
 
-	function calculateTimeUntilFivePM(): string {
-		const now = new Date();
-		const target = new Date(now);
+  function calculateTimeUntilFivePM(): string {
+    const now = new Date();
+    const target = new Date(now);
 
-		// Set target to 5:00 PM today
-		target.setHours(17, 0, 0, 0);
+    // Set target to 5:00 PM today
+    target.setHours(17, 0, 0, 0);
 
-		// If it's already past 5:00 PM, set target to tomorrow 5:00 PM
-		if (now.getTime() >= target.getTime()) {
-			target.setDate(target.getDate() + 1);
-		}
+    // If it's already past 5:00 PM, set target to tomorrow 5:00 PM
+    if (now.getTime() >= target.getTime()) {
+      target.setDate(target.getDate() + 1);
+    }
 
-		const diff = target.getTime() - now.getTime();
+    const diff = target.getTime() - now.getTime();
 
-		if (diff <= 0) {
-			return "00:00:00";
-		}
+    if (diff <= 0) {
+      return "00:00:00";
+    }
 
-		const hours = Math.floor(diff / (1000 * 60 * 60));
-		const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-		const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-		return `${hours.toString().padStart(2, "0")}h ${minutes
-			.toString()
-			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
-	}
+    return `${hours.toString().padStart(2, "0")}h ${minutes
+      .toString()
+      .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+  }
 
-	function calculateTimeUntilMidnight(): string {
-		const now = new Date();
-		const target = new Date(now);
+  function calculateTimeUntilMidnight(): string {
+    const now = new Date();
+    const target = new Date(now);
 
-		// Set target to midnight today
-		target.setHours(0, 0, 0, 0);
+    // Set target to midnight today
+    target.setHours(0, 0, 0, 0);
 
-		// If it's already past midnight, set target to tomorrow midnight
-		if (now.getTime() >= target.getTime()) {
-			target.setDate(target.getDate() + 1);
-		}
+    // If it's already past midnight, set target to tomorrow midnight
+    if (now.getTime() >= target.getTime()) {
+      target.setDate(target.getDate() + 1);
+    }
 
-		const diff = target.getTime() - now.getTime();
+    const diff = target.getTime() - now.getTime();
 
-		if (diff <= 0) {
-			return "00:00:00";
-		}
+    if (diff <= 0) {
+      return "00:00:00";
+    }
 
-		const hours = Math.floor(diff / (1000 * 60 * 60));
-		const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-		const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-		return `${hours.toString().padStart(2, "0")}h ${minutes
-			.toString()
-			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
-	}
+    return `${hours.toString().padStart(2, "0")}h ${minutes
+      .toString()
+      .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+  }
 
-	function updateTimer() {
-		timeUntilNext = calculateTimeUntilMidnight();
-	}
+  function updateTimer() {
+    timeUntilNext = calculateTimeUntilMidnight();
+  }
 
-	onMount(() => {
-		updateTimer();
-		intervalId = window.setInterval(updateTimer, 1000);
-	});
+  onMount(() => {
+    updateTimer();
+    intervalId = window.setInterval(updateTimer, 1000);
+  });
 
-	onDestroy(() => {
-		if (intervalId) {
-			clearInterval(intervalId);
-		}
-	});
+  onDestroy(() => {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+  });
 </script>
 
-<div class="text-center py-12">
-	<div
-		class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
-	>
-		<p
-			class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
-		>
-			Next Verse In
-		</p>
-		<p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
-			{timeUntilNext}
-		</p>
-	</div>
+<div class="w-full">
+  <div
+    class="flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full"
+  >
+    <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2">
+      Next Verse In
+    </p>
+    <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
+      {timeUntilNext}
+    </p>
+  </div>
 </div>
diff --git a/src/lib/components/Feedback.svelte b/src/lib/components/Feedback.svelte
index 81530c9..35b59c5 100644
--- a/src/lib/components/Feedback.svelte
+++ b/src/lib/components/Feedback.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade } from "svelte/transition";
+  import { fade } from "svelte/transition";
 </script>
 
 <!-- <div
@@ -14,15 +14,15 @@
 	>
 </div> -->
 
-<div class="text-center py-12">
-	<div
-		class="inline-flex w-full flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
-	>
-		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
-			A project by George Powell & Silent Summit Co.
-		</p>
-		<!-- <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
+<div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
+  <div
+    class="inline-flex w-full flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
+  >
+    <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+      A project by George Powell & Silent Summit Co.
+    </p>
+    <!-- <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
 			
 		</p> -->
-	</div>
+  </div>
 </div>
diff --git a/src/lib/components/SearchInput.svelte b/src/lib/components/SearchInput.svelte
index efc3f32..2eb9cad 100644
--- a/src/lib/components/SearchInput.svelte
+++ b/src/lib/components/SearchInput.svelte
@@ -1,55 +1,53 @@
 <script lang="ts">
-	import { bibleBooks, type BibleBook } from "$lib/types/bible";
+  import { bibleBooks, type BibleBook } from "$lib/types/bible";
 
-	let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();
+  let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();
 
-	let filteredBooks = $derived(
-		bibleBooks.filter((book) =>
-			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
-		),
-	);
+  let filteredBooks = $derived(
+    bibleBooks.filter((book) =>
+      book.name.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  );
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Enter" && filteredBooks.length > 0) {
-			submitGuess(filteredBooks[0].id);
-		}
-	}
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" && filteredBooks.length > 0) {
+      submitGuess(filteredBooks[0].id);
+    }
+  }
 </script>
 
-<div class="mb-12">
-	<input
-		bind:value={searchQuery}
-		placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
-		class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
-		onkeydown={handleKeydown}
-	/>
-	{#if searchQuery && filteredBooks.length > 0}
-		<ul
-			class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
-		>
-			{#each filteredBooks as book (book.id)}
-				<li>
-					<button
-						class="w-full p-4 sm:p-5 text-left {guessedIds.has(
-							book.id,
-						)
-							? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
-							: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
-						onclick={() => submitGuess(book.id)}
-					>
-						<span
-							class="font-semibold {guessedIds.has(book.id)
-								? 'line-through text-gray-500'
-								: ''}">{book.name}</span
-						>
-						<span class="ml-auto text-sm opacity-75"
-							>({book.testament.toUpperCase()})</span
-						>
-					</button>
-				</li>
-			{/each}
-		</ul>
-	{:else if searchQuery}
-		<p class="mt-4 text-center text-gray-500 p-8">No books found</p>
-	{/if}
+<div>
+  <input
+    bind:value={searchQuery}
+    placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
+    class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
+    onkeydown={handleKeydown}
+  />
+  {#if searchQuery && filteredBooks.length > 0}
+    <ul
+      class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
+    >
+      {#each filteredBooks as book (book.id)}
+        <li>
+          <button
+            class="w-full p-4 sm:p-5 text-left {guessedIds.has(book.id)
+              ? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
+              : 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
+            onclick={() => submitGuess(book.id)}
+          >
+            <span
+              class="font-semibold {guessedIds.has(book.id)
+                ? 'line-through text-gray-500'
+                : ''}">{book.name}</span
+            >
+            <span class="ml-auto text-sm opacity-75"
+              >({book.testament.toUpperCase()})</span
+            >
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {:else if searchQuery}
+    <p class="mt-4 text-center text-gray-500 p-8">No books found</p>
+  {/if}
 </div>
diff --git a/src/lib/components/VerseDisplay.svelte b/src/lib/components/VerseDisplay.svelte
index e045399..54a27b8 100644
--- a/src/lib/components/VerseDisplay.svelte
+++ b/src/lib/components/VerseDisplay.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+  import Container from "./Container.svelte";
 
   let { data, isWon }: { data: PageData; isWon: boolean } = $props();
   let dailyVerse = $derived(data.dailyVerse);
@@ -11,15 +12,17 @@
   );
 </script>
 
-<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
+<Container class="w-full p-8 sm:p-12">
   <blockquote
     class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
   >
     {displayVerseText}
   </blockquote>
   {#if isWon}
-    <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
+    <p
+      class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+    >
       {displayReference}
     </p>
   {/if}
-</div>
+</Container>
diff --git a/src/lib/components/WinScreen.svelte b/src/lib/components/WinScreen.svelte
index 487a634..79e8eb8 100644
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -2,6 +2,8 @@
   import { fade } from "svelte/transition";
   import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
   import { onMount } from "svelte";
+  import Container from "./Container.svelte";
+  import CountdownTimer from "./CountdownTimer.svelte";
 
   interface StatsData {
     solveRank: number;
@@ -36,7 +38,7 @@
   const congratulationsMessages: WeightedMessage[] = [
     { text: "Congratulations!", weight: 10 },
     { text: "You got it!", weight: 1000 },
-    { text: "Yup,", weight: 100 },
+    { text: "Yup.", weight: 100 },
     { text: "Very nice!", weight: 1 },
   ];
 
@@ -73,75 +75,81 @@
   let congratulationsMessage = $derived(getRandomCongratulationsMessage());
 </script>
 
-<div
-  class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center fade-in"
->
-  <!-- <h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-    {congratulationsMessage}
-  </h2> -->
-  <p class="text-xl sm:text-3xl md:text-4xl">
-    {congratulationsMessage} The verse is from
-    <span class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span>.
-  </p>
-  <p
-    class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
+<div class="flex flex-col gap-6">
+  <Container
+    class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
   >
-    Your grade: {grade}
-  </p>
+    <p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
+      {congratulationsMessage} The verse is from
+      <span class="font-black text-3xl md:text-4xl">{bookName}</span>.
+    </p>
+    <p class="text-lg sm:text-xl md:text-2xl mt-4">
+      You guessed correctly after {guessCount}
+      {guessCount === 1 ? "guess" : "guesses"}.
+      <span class="font-bold bg-white/40 rounded px-1.5 py-0.75">{grade}</span>
+    </p>
 
-  {#if hasWebShare}
-    <button
-      onclick={handleShare}
-      data-umami-event="Share"
-      class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
-    >
-      📤 Share
-    </button>
-    <button
-      onclick={() => {
-        copyToClipboard();
-        copySuccess = true;
-        setTimeout(() => {
-          copySuccess = false;
-        }, 3000);
-      }}
-      data-umami-event="Copy to Clipboard"
-      class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
-        copySuccess
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
-      }`}
-    >
-      {copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
-    </button>
-  {:else}
-    <button
-      onclick={handleShare}
-      data-umami-event="Share"
-      class={`mt-4 text-2xl font-bold p-2 ${
-        copied
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
-      } rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
-    >
-      {copied ? "Copied to clipboard!" : "📤 Share"}
-    </button>
-  {/if}
+    <div class="flex justify-center mt-6">
+      {#if hasWebShare}
+        <!-- mobile and arc in production -->
+        <button
+          onclick={handleShare}
+          data-umami-event="Share"
+          class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+        >
+          📤 Share
+        </button>
+        <button
+          onclick={() => {
+            copyToClipboard();
+            copySuccess = true;
+            setTimeout(() => {
+              copySuccess = false;
+            }, 3000);
+          }}
+          data-umami-event="Copy to Clipboard"
+          class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
+            copySuccess ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
+          }`}
+        >
+          {copySuccess ? "✅ Copied!" : "📋 Copy"}
+        </button>
+      {:else}
+        <!-- dev mode and desktop browsers -->
+        <button
+          onclick={handleShare}
+          data-umami-event="Copy to Clipboard"
+          class={`text-2xl font-bold p-4 ${
+            copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
+          } rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
+        >
+          {copied ? "✅ Copied!" : "📋 Share"}
+        </button>
+      {/if}
+    </div>
 
-  <p class="pt-6 big-text text-gray-100!">
-    {getNextGradeMessage(guessCount)}
-  </p>
+    <p class="pt-6 big-text text-gray-700!">
+      {getNextGradeMessage(guessCount)}
+    </p>
+  </Container>
+
+  <CountdownTimer />
 
   <!-- Statistics Display -->
   {#if statsData}
-    <div class="mt-6" in:fade={{ delay: 800 }}>
-      <div class="grid grid-cols-3 gap-4 gap-x-8 text-center">
+    <Container
+      class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+    >
+      <div
+        class="grid grid-cols-3 gap-4 gap-x-8 text-center"
+        in:fade={{ delay: 800 }}
+      >
         <!-- Solve Rank Column -->
         <div class="flex flex-col">
           <div class="text-3xl sm:text-4xl font-black">
             #{statsData.solveRank}
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             You were the {toOrdinal(statsData.solveRank)} person to solve today
           </div>
         </div>
@@ -155,7 +163,7 @@
                 100
             )}%
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
             total solves
           </div>
@@ -166,15 +174,19 @@
           <div class="text-3xl sm:text-4xl font-black">
             {statsData.averageGuesses}
           </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
+          <div class="text-sm sm:text-sm opacity-90 mt-1">
             People guessed correctly after {statsData.averageGuesses}
             {statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
           </div>
         </div>
       </div>
-    </div>
+    </Container>
   {:else if !statsSubmitted}
-    <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
+    <Container
+      class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+    >
+      <div class="text-sm opacity-80">Submitting stats...</div>
+    </Container>
   {/if}
 </div>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5e09c86..1305e5b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,7 +7,6 @@
   import VerseDisplay from "$lib/components/VerseDisplay.svelte";
   import SearchInput from "$lib/components/SearchInput.svelte";
   import GuessesTable from "$lib/components/GuessesTable.svelte";
-  import CountdownTimer from "$lib/components/CountdownTimer.svelte";
   import WinScreen from "$lib/components/WinScreen.svelte";
   import Feedback from "$lib/components/Feedback.svelte";
   import TitleAnimation from "$lib/components/TitleAnimation.svelte";
@@ -408,28 +407,30 @@
       >
     </div>
 
-    <VerseDisplay {data} {isWon} />
+    <div class="flex flex-col gap-6">
+      <VerseDisplay {data} {isWon} />
 
-    {#if !isWon}
-      <SearchInput bind:searchQuery {guessedIds} {submitGuess} />
-    {:else}
-      <WinScreen
-        {grade}
-        {statsData}
-        {correctBookId}
-        {handleShare}
-        {copyToClipboard}
-        bind:copied
-        {statsSubmitted}
-        guessCount={guesses.length}
-      />
-      <CountdownTimer />
-    {/if}
+      {#if !isWon}
+        <SearchInput bind:searchQuery {guessedIds} {submitGuess} />
+      {:else}
+        <WinScreen
+          {grade}
+          {statsData}
+          {correctBookId}
+          {handleShare}
+          {copyToClipboard}
+          bind:copied
+          {statsSubmitted}
+          guessCount={guesses.length}
+        />
+      {/if}
 
-    <GuessesTable {guesses} {correctBookId} />
-    {#if isWon}
-      <Feedback />
-    {/if}
+      <GuessesTable {guesses} {correctBookId} />
+
+      {#if isWon}
+        <Feedback />
+      {/if}
+    </div>
     {#if isDev}
       <button
         onclick={clearLocalStorage}
diff --git a/todo.md b/todo.md
index a02acba..a7d29ac 100644
--- a/todo.md
+++ b/todo.md
@@ -1,6 +1,9 @@
 # in progress
 
-- root menu: classic / imposter mode / impossible mode (complete today's classic and imposter modes to unlock)
+- Show new/old testament after 3 guesses and section after 7 guesses
+- Verses ending in semicolons, commas, etc. will be replaced with "..."
+- For bonus points: guess the verse/psalm number
+- How do you balance rewarding knowledge vs incentivising learning?
 
 # todo
 
@@ -14,8 +17,12 @@
 
   - classic mode: identify what book the verse is from (e.g. Genesis, John, Revelations...) in as few guesses as possible.
   - imposter mode: out of four options, identify the verse that is not in the Bible
+  - OR out of four options, identify the verse that is not in the same book as the other three options
+  - OR, out of four options, drag them into the
   - impossible mode: identify which book of the bible the verse is from in less than three guesses.
 
+- The gambling aspect of hoping you get a verse you already know is VERY strong
+
 - add login + saved stats + streak etc.
 
 - add deuterocanonical books