Fixed instructions, added color border based on closeness between guess

and target
fix: show most recent dates first in return rate and retention tables
2026-04-05 17:33:31 -04:00 · 2026-03-15 03:19:21 -04:00 · 2026-03-15 02:16:16 -04:00 · 2026-03-15 02:09:55 -04:00 · 2026-03-14 22:17:33 -04:00 · 2026-03-14 18:46:22 -04:00
10 changed files with 1116 additions and 308 deletions
--- a/src/lib/components/AuthModal.svelte
+++ b/src/lib/components/AuthModal.svelte
@@ -96,6 +96,7 @@
 				<button
 					type="submit"
 					class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-white text-black rounded-md hover:bg-gray-100 transition-colors font-medium"
+					data-umami-event="Sign in with Apple"
 				>
 					<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
 						<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
--- a/src/lib/components/GamePrompt.svelte
+++ b/src/lib/components/GamePrompt.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	let { guessCount }: { guessCount: number } = $props();
+
+	let promptText = $state("What book of the Bible is this verse from?");
+	let visible = $state(true);
+
+	$effect(() => {
+		let fadeOutId: ReturnType<typeof setTimeout>;
+		let fadeInId: ReturnType<typeof setTimeout>;
+		let changeId: ReturnType<typeof setTimeout>;
+
+		function animateTo(newText: string, delay = 0) {
+			fadeOutId = setTimeout(() => {
+				visible = false;
+				changeId = setTimeout(() => {
+					promptText = newText;
+					visible = true;
+				}, 300);
+			}, delay);
+		}
+
+		if (guessCount === 0) {
+			animateTo("What book of the Bible is this verse from?");
+		} else {
+			animateTo("Guess again", 2100);
+		}
+
+		return () => {
+			clearTimeout(fadeOutId);
+			clearTimeout(fadeInId);
+			clearTimeout(changeId);
+		};
+	});
+</script>
+
+<p
+	class="big-text text-center mb-6 px-4"
+	style="transition: opacity 0.3s ease; opacity: {visible ? 1 : 0};"
+>
+	{promptText}
+</p>
--- a/src/lib/components/GuessesTable.svelte
+++ b/src/lib/components/GuessesTable.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { bibleBooks } from "$lib/types/bible";
 	import { getFirstLetter, type Guess } from "$lib/utils/game";
-	import Container from "./Container.svelte";

 	let {
 		guesses,
@@ -16,6 +15,19 @@
 		return "bg-red-500 border-red-600";
 	}

+	function getBookBoxStyle(guess: Guess): string {
+		if (guess.book.id === correctBookId) {
+			return "background-color: #22c55e; border-color: #16a34a;";
+		}
+		const correctBook = bibleBooks.find((b) => b.id === correctBookId);
+		if (!correctBook)
+			return "background-color: #ef4444; border-color: #dc2626;";
+		const t = Math.abs(guess.book.order - correctBook.order) / 65;
+		const hue = 120 * Math.pow(1 - t, 3);
+		const lightness = 55 - (hue / 120) * 15;
+		return `background-color: #ef4444; border-color: hsl(${hue}, 80%, ${lightness}%);`;
+	}
+
 	function getBoxContent(
 		guess: Guess,
 		column: "book" | "firstLetter" | "testament" | "section",
@@ -64,17 +76,7 @@
 	}
 </script>

-{#if !hasGuesses}
-	<Container class="p-6 text-center">
-		<h2 class="font-triodion text-xl italic mb-3 text-gray-800 dark:text-gray-100">
-			Instructions
-		</h2>
-		<p class="text-gray-700 dark:text-gray-300 leading-relaxed italic">
-			Guess what book of the bible you think the verse is from. You will
-			get clues to help you after each guess.
-		</p>
-	</Container>
-{:else}
+{#if hasGuesses}
 	<div class="space-y-3">
 		<!-- Column Headers -->
 		<div
@@ -146,10 +148,9 @@

 				<!-- Book Column -->
 				<div
-					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 border-opacity-100 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 + 3 * 500}ms"
+					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
+					style="animation-delay: {rowIndex * 1000 +
+						3 * 500}ms; {getBookBoxStyle(guess)}"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-lg"
 						>{getBoxContent(guess, "book")}</span
--- a/src/lib/components/SearchInput.svelte
+++ b/src/lib/components/SearchInput.svelte
@@ -1,309 +1,355 @@
 <script lang="ts">
-  import { bibleBooks, type BibleBook, type BibleSection, type Testament } from "$lib/types/bible";
-  import { SvelteSet } from "svelte/reactivity";
+	import {
+		bibleBooks,
+		type BibleBook,
+		type BibleSection,
+		type Testament,
+	} from "$lib/types/bible";
+	import { SvelteSet } from "svelte/reactivity";

-  let {
-    searchQuery = $bindable(""),
-    guessedIds,
-    submitGuess,
-    guessCount = 0,
-  }: {
-    searchQuery: string;
-    guessedIds: SvelteSet<string>;
-    submitGuess: (id: string) => void;
-    guessCount: number;
-  } = $props();
+	let {
+		searchQuery = $bindable(""),
+		guessedIds,
+		submitGuess,
+		guessCount = 0,
+	}: {
+		searchQuery: string;
+		guessedIds: SvelteSet<string>;
+		submitGuess: (id: string) => void;
+		guessCount: number;
+	} = $props();

-  type DisplayMode = "simple" | "testament" | "sections";
+	type DisplayMode = "simple" | "testament" | "sections";

-  const displayMode = $derived<DisplayMode>(
-    guessCount >= 9 ? "sections" : guessCount >= 3 ? "testament" : "simple"
-  );
+	const displayMode = $derived<DisplayMode>(
+		guessCount >= 9 ? "sections" : guessCount >= 3 ? "testament" : "simple",
+	);

-  const filteredBooks = $derived(
-    bibleBooks.filter((book) =>
-      book.name.toLowerCase().includes(searchQuery.toLowerCase())
-    )
-  );
+	const filteredBooks = $derived(
+		bibleBooks.filter((book) =>
+			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
+		),
+	);

-  type SimpleGroup = { books: BibleBook[] };
+	type SimpleGroup = { books: BibleBook[] };

-  type TestamentGroup = {
-    testament: Testament;
-    label: string;
-    books: BibleBook[];
-  };
+	type TestamentGroup = {
+		testament: Testament;
+		label: string;
+		books: BibleBook[];
+	};

-  type SectionGroup = {
-    testament: Testament;
-    testamentLabel: string;
-    showTestamentHeader: boolean;
-    section: BibleSection;
-    books: BibleBook[];
-  };
+	type SectionGroup = {
+		testament: Testament;
+		testamentLabel: string;
+		showTestamentHeader: boolean;
+		section: BibleSection;
+		books: BibleBook[];
+	};

-  const simpleGroup = $derived.by<SimpleGroup>(() => {
-    const sorted = [...filteredBooks].sort((a, b) =>
-      a.name.localeCompare(b.name)
-    );
-    return { books: sorted };
-  });
+	const simpleGroup = $derived.by<SimpleGroup>(() => {
+		const sorted = [...filteredBooks].sort((a, b) =>
+			a.name.localeCompare(b.name),
+		);
+		return { books: sorted };
+	});

-  const testamentGroups = $derived.by<TestamentGroup[]>(() => {
-    const old = filteredBooks
-      .filter((b) => b.testament === "old")
-      .sort((a, b) => a.name.localeCompare(b.name));
-    const newT = filteredBooks
-      .filter((b) => b.testament === "new")
-      .sort((a, b) => a.name.localeCompare(b.name));
-    const groups: TestamentGroup[] = [];
-    if (old.length > 0) {
-      groups.push({ testament: "old", label: "Old Testament", books: old });
-    }
-    if (newT.length > 0) {
-      groups.push({ testament: "new", label: "New Testament", books: newT });
-    }
-    return groups;
-  });
+	const testamentGroups = $derived.by<TestamentGroup[]>(() => {
+		const old = filteredBooks
+			.filter((b) => b.testament === "old")
+			.sort((a, b) => a.name.localeCompare(b.name));
+		const newT = filteredBooks
+			.filter((b) => b.testament === "new")
+			.sort((a, b) => a.name.localeCompare(b.name));
+		const groups: TestamentGroup[] = [];
+		if (old.length > 0) {
+			groups.push({
+				testament: "old",
+				label: "Old Testament",
+				books: old,
+			});
+		}
+		if (newT.length > 0) {
+			groups.push({
+				testament: "new",
+				label: "New Testament",
+				books: newT,
+			});
+		}
+		return groups;
+	});

-  const sectionGroups = $derived.by<SectionGroup[]>(() => {
-    // Build an ordered list of (testament, section) pairs by iterating bibleBooks once
-    const seenKeys: Record<string, true> = {};
-    const orderedPairs: { testament: Testament; section: BibleSection }[] = [];
+	const sectionGroups = $derived.by<SectionGroup[]>(() => {
+		// Build an ordered list of (testament, section) pairs by iterating bibleBooks once
+		const seenKeys: Record<string, true> = {};
+		const orderedPairs: { testament: Testament; section: BibleSection }[] =
+			[];

-    for (const book of bibleBooks) {
-      const key = `${book.testament}:${book.section}`;
-      if (!seenKeys[key]) {
-        seenKeys[key] = true;
-        orderedPairs.push({ testament: book.testament, section: book.section });
-      }
-    }
+		for (const book of bibleBooks) {
+			const key = `${book.testament}:${book.section}`;
+			if (!seenKeys[key]) {
+				seenKeys[key] = true;
+				orderedPairs.push({
+					testament: book.testament,
+					section: book.section,
+				});
+			}
+		}

-    const groups: SectionGroup[] = [];
-    let lastTestament: Testament | null = null;
+		const groups: SectionGroup[] = [];
+		let lastTestament: Testament | null = null;

-    for (const pair of orderedPairs) {
-      const books = filteredBooks.filter(
-        (b) => b.testament === pair.testament && b.section === pair.section
-      );
-      if (books.length === 0) continue;
+		for (const pair of orderedPairs) {
+			const books = filteredBooks.filter(
+				(b) =>
+					b.testament === pair.testament &&
+					b.section === pair.section,
+			);
+			if (books.length === 0) continue;

-      const showTestamentHeader = pair.testament !== lastTestament;
-      lastTestament = pair.testament;
+			const showTestamentHeader = pair.testament !== lastTestament;
+			lastTestament = pair.testament;

-      groups.push({
-        testament: pair.testament,
-        testamentLabel:
-          pair.testament === "old" ? "Old Testament" : "New Testament",
-        showTestamentHeader,
-        section: pair.section,
-        books,
-      });
-    }
+			groups.push({
+				testament: pair.testament,
+				testamentLabel:
+					pair.testament === "old"
+						? "Old Testament"
+						: "New Testament",
+				showTestamentHeader,
+				section: pair.section,
+				books,
+			});
+		}

-    return groups;
-  });
+		return groups;
+	});

-  // First book in display order for Enter key submission
-  const firstBookId = $derived.by<string | null>(() => {
-    if (filteredBooks.length === 0) return null;
-    if (displayMode === "simple") {
-      return simpleGroup.books[0]?.id ?? null;
-    }
-    if (displayMode === "testament") {
-      return testamentGroups[0]?.books[0]?.id ?? null;
-    }
-    return sectionGroups[0]?.books[0]?.id ?? null;
-  });
+	// First book in display order for Enter key submission
+	const firstBookId = $derived.by<string | null>(() => {
+		if (filteredBooks.length === 0) return null;
+		if (displayMode === "simple") {
+			return simpleGroup.books[0]?.id ?? null;
+		}
+		if (displayMode === "testament") {
+			return testamentGroups[0]?.books[0]?.id ?? null;
+		}
+		return sectionGroups[0]?.books[0]?.id ?? null;
+	});

-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter" && firstBookId) {
-      submitGuess(firstBookId);
-    }
-  }
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" && firstBookId) {
+			submitGuess(firstBookId);
+		}
+	}

-  const showBanner = $derived(guessCount >= 3);
-  const bannerIsIndigo = $derived(guessCount >= 9);
+	// const showBanner = $derived(guessCount >= 3);
+	const showBanner = false;
+	const bannerIsIndigo = $derived(guessCount >= 9);
 </script>

 {#if showBanner}
-  <p
-    class="mb-3 text-xs font-medium text-gray-500 dark:text-gray-400"
-    role="status"
-    aria-live="polite"
-  >
-    {#if bannerIsIndigo}
-      Testament &amp; section groups now visible
-    {:else}
-      Old &amp; New Testament groups now visible
-    {/if}
-  </p>
+	<p
+		class="mb-3 text-xs font-medium text-gray-500 dark:text-gray-400"
+		role="status"
+		aria-live="polite"
+	>
+		{#if bannerIsIndigo}
+			Testament &amp; section groups now visible
+		{:else}
+			Old &amp; New Testament groups now visible
+		{/if}
+	</p>
 {/if}

 <div class="relative">
-  <div class="relative">
-    <svg
-      class="absolute left-4 sm:left-6 top-1/2 -translate-y-1/2 w-5 h-5 sm:w-6 sm:h-6 text-gray-400"
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-      />
-    </svg>
-    <input
-      bind:value={searchQuery}
-      placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
-      class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 dark:border-gray-600 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900/50 transition-all bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
-      onkeydown={handleKeydown}
-      autocomplete="off"
-    />
-    {#if searchQuery}
-      <button
-        class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
-        onclick={() => (searchQuery = "")}
-        aria-label="Clear search"
-      >
-        <svg
-          class="w-5 h-5 sm:w-6 sm:h-6"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-    {/if}
-  </div>
+	<div class="relative">
+		<svg
+			class="absolute left-4 sm:left-6 top-1/2 -translate-y-1/2 w-5 h-5 sm:w-6 sm:h-6 text-gray-400"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/>
+		</svg>
+		<input
+			bind:value={searchQuery}
+			placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
+			class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 dark:border-gray-600 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900/50 transition-all bg-white dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+			onkeydown={handleKeydown}
+			autocomplete="off"
+		/>
+		{#if searchQuery}
+			<button
+				class="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+				onclick={() => (searchQuery = "")}
+				aria-label="Clear search"
+			>
+				<svg
+					class="w-5 h-5 sm:w-6 sm:h-6"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</div>

-  {#if searchQuery && filteredBooks.length > 0}
-    <ul
-      class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl shadow-xl"
-      role="listbox"
-    >
-      {#if displayMode === "simple"}
-        {#each simpleGroup.books as book (book.id)}
-          <li role="option" aria-selected={guessedIds.has(book.id)}>
-            <button
-              class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all
+	{#if searchQuery && filteredBooks.length > 0}
+		<ul
+			class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl shadow-xl"
+			role="listbox"
+		>
+			{#if displayMode === "simple"}
+				{#each simpleGroup.books as book (book.id)}
+					<li role="option" aria-selected={guessedIds.has(book.id)}>
+						<button
+							class="w-full px-5 py-4 text-left border-b border-gray-100 last:border-b-0 flex items-center transition-all
                {guessedIds.has(book.id)
-                ? 'opacity-50 cursor-not-allowed pointer-events-none'
-                : 'hover:bg-blue-50 hover:text-blue-700'}"
-              onclick={() => submitGuess(book.id)}
-              tabindex={guessedIds.has(book.id) ? -1 : 0}
-            >
-              <span
-                class="font-semibold dark:text-gray-100 {guessedIds.has(book.id)
-                  ? 'line-through text-gray-400 dark:text-gray-500'
-                  : ''}"
-              >
-                {book.name}
-              </span>
-            </button>
-          </li>
-        {/each}
-      {:else if displayMode === "testament"}
-        {#each testamentGroups as group (group.testament)}
-          <li role="presentation">
-            <div
-              class="px-5 py-2 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
-            >
-              <span
-                class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-400"
-              >
-                {group.label}
-              </span>
-              <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
-            </div>
-            <ul>
-              {#each group.books as book (book.id)}
-                <li role="option" aria-selected={guessedIds.has(book.id)}>
-                  <button
-                    class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
+								? 'opacity-50 cursor-not-allowed pointer-events-none'
+								: 'hover:bg-blue-50 hover:text-blue-700'}"
+							onclick={() => submitGuess(book.id)}
+							tabindex={guessedIds.has(book.id) ? -1 : 0}
+						>
+							<span
+								class="font-semibold dark:text-gray-100 {guessedIds.has(
+									book.id,
+								)
+									? 'line-through text-gray-400 dark:text-gray-500'
+									: ''}"
+							>
+								{book.name}
+							</span>
+						</button>
+					</li>
+				{/each}
+			{:else if displayMode === "testament"}
+				{#each testamentGroups as group (group.testament)}
+					<li role="presentation">
+						<div
+							class="px-5 py-2 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
+						>
+							<span
+								class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-400"
+							>
+								{group.label}
+							</span>
+							<div
+								class="flex-1 h-px bg-gray-200 dark:bg-gray-600"
+							></div>
+						</div>
+						<ul>
+							{#each group.books as book (book.id)}
+								<li
+									role="option"
+									aria-selected={guessedIds.has(book.id)}
+								>
+									<button
+										class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
                      {guessedIds.has(book.id)
-                      ? 'opacity-50 cursor-not-allowed pointer-events-none'
-                      : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
-                    onclick={() => submitGuess(book.id)}
-                    tabindex={guessedIds.has(book.id) ? -1 : 0}
-                  >
-                    <span
-                      class="font-semibold {guessedIds.has(book.id)
-                        ? 'line-through text-gray-400 dark:text-gray-500'
-                        : ''}"
-                    >
-                      {book.name}
-                    </span>
-                  </button>
-                </li>
-              {/each}
-            </ul>
-          </li>
-        {/each}
-      {:else}
-        {#each sectionGroups as group (`${group.testament}:${group.section}`)}
-          <li role="presentation">
-            {#if group.showTestamentHeader}
-              <div
-                class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
-              >
-                <span
-                  class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
-                >
-                  {group.testamentLabel}
-                </span>
-                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
-              </div>
-            {/if}
-            <div
-              class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 dark:bg-gray-700/30 border-b border-gray-100 dark:border-gray-700"
-            >
-              <span
-                class="text-[11px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500"
-              >
-                {group.section}
-              </span>
-              <div class="flex-1 h-px bg-gray-100 dark:bg-gray-600"></div>
-            </div>
-            <ul>
-              {#each group.books as book (book.id)}
-                <li role="option" aria-selected={guessedIds.has(book.id)}>
-                  <button
-                    class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
+											? 'opacity-50 cursor-not-allowed pointer-events-none'
+											: 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
+										onclick={() => submitGuess(book.id)}
+										tabindex={guessedIds.has(book.id)
+											? -1
+											: 0}
+									>
+										<span
+											class="font-semibold {guessedIds.has(
+												book.id,
+											)
+												? 'line-through text-gray-400 dark:text-gray-500'
+												: ''}"
+										>
+											{book.name}
+										</span>
+									</button>
+								</li>
+							{/each}
+						</ul>
+					</li>
+				{/each}
+			{:else}
+				{#each sectionGroups as group (`${group.testament}:${group.section}`)}
+					<li role="presentation">
+						{#if group.showTestamentHeader}
+							<div
+								class="px-5 pt-3 pb-1 flex items-center gap-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700"
+							>
+								<span
+									class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
+								>
+									{group.testamentLabel}
+								</span>
+								<div
+									class="flex-1 h-px bg-gray-200 dark:bg-gray-600"
+								></div>
+							</div>
+						{/if}
+						<div
+							class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 dark:bg-gray-700/30 border-b border-gray-100 dark:border-gray-700"
+						>
+							<span
+								class="text-[11px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500"
+							>
+								{group.section}
+							</span>
+							<div
+								class="flex-1 h-px bg-gray-100 dark:bg-gray-600"
+							></div>
+						</div>
+						<ul>
+							{#each group.books as book (book.id)}
+								<li
+									role="option"
+									aria-selected={guessedIds.has(book.id)}
+								>
+									<button
+										class="w-full px-5 py-4 text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0 flex items-center transition-all dark:text-gray-200
                      {guessedIds.has(book.id)
-                      ? 'opacity-50 cursor-not-allowed pointer-events-none'
-                      : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
-                    onclick={() => submitGuess(book.id)}
-                    tabindex={guessedIds.has(book.id) ? -1 : 0}
-                  >
-                    <span
-                      class="font-semibold {guessedIds.has(book.id)
-                        ? 'line-through text-gray-400 dark:text-gray-500'
-                        : ''}"
-                    >
-                      {book.name}
-                    </span>
-                  </button>
-                </li>
-              {/each}
-            </ul>
-          </li>
-        {/each}
-      {/if}
-    </ul>
-  {:else if searchQuery}
-    <p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">No books found</p>
-  {/if}
+											? 'opacity-50 cursor-not-allowed pointer-events-none'
+											: 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}"
+										onclick={() => submitGuess(book.id)}
+										tabindex={guessedIds.has(book.id)
+											? -1
+											: 0}
+									>
+										<span
+											class="font-semibold {guessedIds.has(
+												book.id,
+											)
+												? 'line-through text-gray-400 dark:text-gray-500'
+												: ''}"
+										>
+											{book.name}
+										</span>
+									</button>
+								</li>
+							{/each}
+						</ul>
+					</li>
+				{/each}
+			{/if}
+		</ul>
+	{:else if searchQuery}
+		<p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">
+			No books found
+		</p>
+	{/if}
 </div>
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -40,7 +40,7 @@
 		streak = 0,
 		streakPercentile = null,
 		isLoggedIn = false,
-		anonymousId = '',
+		anonymousId = "",
 	}: {
 		statsData: StatsData | null;
 		correctBookId: string;
@@ -307,6 +307,11 @@
 				{/if}
 			</div>
 		</div>
+		{#if streak >= 7}
+			<div class="big-text tracking-widest! font-black! text-center mt-4">
+				Thank you for making Bibdle part of your daily routine! —George
+			</div>
+		{/if}
 	</div>

 	{#if showSnippetOption}
@@ -326,15 +331,24 @@

 	{#if !isLoggedIn}
 		<div class="signin-prompt">
-			<p class="signin-text">Sign in to save your streak &amp; see your stats</p>
+			<p class="signin-text">
+				Sign in to save your streak &amp; track your progress
+			</p>
 			<form method="POST" action="/auth/apple">
 				<input type="hidden" name="anonymousId" value={anonymousId} />
 				<button
 					type="submit"
 					class="apple-signin-btn"
+					data-umami-event="Sign in with Apple"
 				>
-					<svg class="apple-icon" viewBox="0 0 24 24" fill="currentColor">
-						<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+					<svg
+						class="apple-icon"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+					>
+						<path
+							d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+						/>
 					</svg>
 					Sign in with Apple
 				</button>
@@ -627,7 +641,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 0.75rem;
-		padding: 1rem 0 0.25rem;
+		/*padding: 1rem 0 0.25rem;*/
 	}

 	.signin-text {
@@ -648,7 +662,8 @@
 		align-items: center;
 		justify-content: center;
 		gap: 0.5rem;
-		padding: 0.6rem 1.5rem;
+		padding: 0.6rem 4rem;
+		margin-bottom: 0.6rem;
 		background: #000;
 		color: #fff;
 		border-radius: 0.5rem;
@@ -656,7 +671,9 @@
 		font-weight: 600;
 		border: none;
 		cursor: pointer;
-		transition: background 150ms ease, transform 80ms ease;
+		transition:
+			background 150ms ease,
+			transform 80ms ease;
 	}

 	.apple-signin-btn:hover {
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,7 @@
 	import "./layout.css";
 	import favicon from "$lib/assets/favicon.ico";
 	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
+	import ThemeToggle from "$lib/components/ThemeToggle.svelte";

 	onMount(() => {
 		// Inject analytics script
@@ -31,5 +32,6 @@
 		<TitleAnimation />
 		<div class="font-normal"></div>
 	</h1>
+	<div class="hidden"><ThemeToggle /></div>
 	{@render children()}
 </div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,8 @@
 	import GuessesTable from "$lib/components/GuessesTable.svelte";
 	import WinScreen from "$lib/components/WinScreen.svelte";
 	import Credits from "$lib/components/Credits.svelte";
-	import ThemeToggle from "$lib/components/ThemeToggle.svelte";
+
+	import GamePrompt from "$lib/components/GamePrompt.svelte";
 	import DevButtons from "$lib/components/DevButtons.svelte";
 	import AuthModal from "$lib/components/AuthModal.svelte";

@@ -297,6 +298,8 @@

 			{#if !isWon}
 				<div class="animate-fade-in-up animate-delay-400">
+					<GamePrompt guessCount={persistence.guesses.length} />
+
 					<SearchInput
 						bind:searchQuery
 						{guessedIds}
@@ -335,11 +338,6 @@
 					<Credits />
 				</div>
 			{/if}
-
-			<!-- We will just go with the user's system color theme for now. -->
-			<div class="flex justify-center hidden mt-4">
-				<ThemeToggle />
-			</div>
 		</div>
 		{#if isDev}
 			<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
@@ -376,7 +374,11 @@
 					<div>Daily Verse Date: {dailyVerse.date}</div>
 					<div>Streak: {streak}</div>
 				</div>
-				<DevButtons anonymousId={persistence.anonymousId} {user} onSignIn={() => (authModalOpen = true)} />
+				<DevButtons
+					anonymousId={persistence.anonymousId}
+					{user}
+					onSignIn={() => (authModalOpen = true)}
+				/>
 			</div>
 		{/if}

--- a/src/routes/global/+page.server.ts
+++ b/src/routes/global/+page.server.ts
@@ -0,0 +1,340 @@
+import { db } from '$lib/server/db';
+import { dailyCompletions, user } from '$lib/server/db/schema';
+import { eq, gte, count, countDistinct, avg, asc, min } from 'drizzle-orm';
+import type { PageServerLoad } from './$types';
+
+function estDateStr(daysAgo = 0): string {
+	const estNow = new Date(Date.now() - 5 * 60 * 60 * 1000); // UTC-5
+	estNow.setUTCDate(estNow.getUTCDate() - daysAgo);
+	return estNow.toISOString().slice(0, 10);
+}
+
+function prevDay(d: string): string {
+	const dt = new Date(d + 'T00:00:00Z');
+	dt.setUTCDate(dt.getUTCDate() - 1);
+	return dt.toISOString().slice(0, 10);
+}
+
+function addDays(d: string, n: number): string {
+	const dt = new Date(d + 'T00:00:00Z');
+	dt.setUTCDate(dt.getUTCDate() + n);
+	return dt.toISOString().slice(0, 10);
+}
+
+export const load: PageServerLoad = async () => {
+	const todayEst = estDateStr(0);
+	const yesterdayEst = estDateStr(1);
+	const sevenDaysAgo = estDateStr(7);
+
+	// Three weekly windows for first + second derivative calculations
+	// Week A: last 7 days (indices 0–6)
+	// Week B: 7–13 days ago (indices 7–13)
+	// Week C: 14–20 days ago (indices 14–20)
+	const weekAStart = estDateStr(6);
+	const weekBEnd = estDateStr(7);
+	const weekBStart = estDateStr(13);
+	const weekCEnd = estDateStr(14);
+	const weekCStart = estDateStr(20);
+
+	// ── Scalar stats ──────────────────────────────────────────────────────────
+
+	const [{ todayCount }] = await db
+		.select({ todayCount: count() })
+		.from(dailyCompletions)
+		.where(eq(dailyCompletions.date, todayEst));
+
+	const [{ totalCount }] = await db
+		.select({ totalCount: count() })
+		.from(dailyCompletions);
+
+	const [{ uniquePlayers }] = await db
+		.select({ uniquePlayers: countDistinct(dailyCompletions.anonymousId) })
+		.from(dailyCompletions);
+
+	const [{ weeklyPlayers }] = await db
+		.select({ weeklyPlayers: countDistinct(dailyCompletions.anonymousId) })
+		.from(dailyCompletions)
+		.where(gte(dailyCompletions.date, sevenDaysAgo));
+
+	const todayPlayers = await db
+		.selectDistinct({ id: dailyCompletions.anonymousId })
+		.from(dailyCompletions)
+		.where(eq(dailyCompletions.date, todayEst));
+
+	const yesterdayPlayers = await db
+		.selectDistinct({ id: dailyCompletions.anonymousId })
+		.from(dailyCompletions)
+		.where(eq(dailyCompletions.date, yesterdayEst));
+
+	const todaySet = new Set(todayPlayers.map((r) => r.id));
+	const activeStreaks = yesterdayPlayers.filter((r) => todaySet.has(r.id)).length;
+
+	const [{ avgGuessesRaw }] = await db
+		.select({ avgGuessesRaw: avg(dailyCompletions.guessCount) })
+		.from(dailyCompletions)
+		.where(eq(dailyCompletions.date, todayEst));
+
+	const avgGuessesToday = avgGuessesRaw != null ? parseFloat(avgGuessesRaw) : null;
+
+	const [{ registeredUsers }] = await db
+		.select({ registeredUsers: count() })
+		.from(user);
+
+	const avgCompletionsPerPlayer =
+		uniquePlayers > 0 ? Math.round((totalCount / uniquePlayers) * 100) / 100 : null;
+
+	// ── 21-day completions per day (covers all three weekly windows) ──────────
+
+	const rawPerDay21 = await db
+		.select({ date: dailyCompletions.date, dayCount: count() })
+		.from(dailyCompletions)
+		.where(gte(dailyCompletions.date, weekCStart))
+		.groupBy(dailyCompletions.date)
+		.orderBy(asc(dailyCompletions.date));
+
+	const counts21 = new Map(rawPerDay21.map((r) => [r.date, r.dayCount]));
+
+	// Build indexed array: index 0 = today, index 20 = 20 days ago
+	const completionsPerDay: number[] = [];
+	for (let i = 0; i <= 20; i++) {
+		completionsPerDay.push(counts21.get(estDateStr(i)) ?? 0);
+	}
+
+	// last14Days for the trend chart (most recent first)
+	const last14Days: { date: string; count: number }[] = [];
+	for (let i = 0; i <= 13; i++) {
+		last14Days.push({ date: estDateStr(i), count: completionsPerDay[i] });
+	}
+
+	// Weekly totals from the indexed array
+	const weekATotal = completionsPerDay.slice(0, 7).reduce((a, b) => a + b, 0);
+	const weekBTotal = completionsPerDay.slice(7, 14).reduce((a, b) => a + b, 0);
+	const weekCTotal = completionsPerDay.slice(14, 21).reduce((a, b) => a + b, 0);
+
+	// First derivative: avg daily completions change (week A vs week B)
+	const completionsVelocity = Math.round(((weekATotal - weekBTotal) / 7) * 10) / 10;
+	// Second derivative: is velocity itself increasing or decreasing?
+	const completionsAcceleration =
+		Math.round((((weekATotal - weekBTotal) - (weekBTotal - weekCTotal)) / 7) * 10) / 10;
+
+	// ── 90-day per-user data (reused for streaks + weekly user sets) ──────────
+
+	const ninetyDaysAgo = estDateStr(90);
+	const recentCompletions = await db
+		.select({ anonymousId: dailyCompletions.anonymousId, date: dailyCompletions.date })
+		.from(dailyCompletions)
+		.where(gte(dailyCompletions.date, ninetyDaysAgo))
+		.orderBy(asc(dailyCompletions.date));
+
+	// Group dates by user (ascending) and users by date
+	const userDatesMap = new Map<string, string[]>();
+	const dateUsersMap = new Map<string, Set<string>>();
+	for (const row of recentCompletions) {
+		const arr = userDatesMap.get(row.anonymousId);
+		if (arr) arr.push(row.date);
+		else userDatesMap.set(row.anonymousId, [row.date]);
+
+		let s = dateUsersMap.get(row.date);
+		if (!s) { s = new Set(); dateUsersMap.set(row.date, s); }
+		s.add(row.anonymousId);
+	}
+
+	// ── Streak distribution ───────────────────────────────────────────────────
+
+	const streakDistribution = new Map<number, number>();
+	for (const dates of userDatesMap.values()) {
+		const desc = dates.slice().reverse();
+		if (desc[0] !== todayEst && desc[0] !== yesterdayEst) continue;
+		let streak = 1;
+		let cur = desc[0];
+		for (let i = 1; i < desc.length; i++) {
+			if (desc[i] === prevDay(cur)) {
+				streak++;
+				cur = desc[i];
+			} else {
+				break;
+			}
+		}
+		if (streak >= 2) {
+			streakDistribution.set(streak, (streakDistribution.get(streak) ?? 0) + 1);
+		}
+	}
+
+	const streakChart = Array.from(streakDistribution.entries())
+		.sort((a, b) => a[0] - b[0])
+		.map(([days, userCount]) => ({ days, count: userCount }));
+
+	// ── Weekly user sets (for user-based velocity + churn) ───────────────────
+
+	const weekAUsers = new Set<string>();
+	const weekBUsers = new Set<string>();
+	const weekCUsers = new Set<string>();
+
+	for (const [userId, dates] of userDatesMap) {
+		if (dates.some((d) => d >= weekAStart)) weekAUsers.add(userId);
+		if (dates.some((d) => d >= weekBStart && d <= weekBEnd)) weekBUsers.add(userId);
+		if (dates.some((d) => d >= weekCStart && d <= weekCEnd)) weekCUsers.add(userId);
+	}
+
+	// First derivative: weekly unique users change
+	const userVelocity = weekAUsers.size - weekBUsers.size;
+	// Second derivative: is user growth speeding up or slowing down?
+	const userAcceleration =
+		weekAUsers.size - weekBUsers.size - (weekBUsers.size - weekCUsers.size);
+
+	// ── New players + churn ───────────────────────────────────────────────────
+	// New players: anonymousIds whose first-ever completion falls in the last 7 days.
+	// Checking against all-time data (not just the 90-day window) ensures accuracy.
+	const firstDates = await db
+		.select({
+			anonymousId: dailyCompletions.anonymousId,
+			firstDate: min(dailyCompletions.date),
+			totalCompletions: count()
+		})
+		.from(dailyCompletions)
+		.groupBy(dailyCompletions.anonymousId);
+
+	const newUsers7d = firstDates.filter((r) => r.firstDate != null && r.firstDate >= weekAStart).length;
+
+	// Churned: played in week B but not at all in week A
+	const churned7d = [...weekBUsers].filter((id) => !weekAUsers.has(id)).length;
+
+	// Net growth = truly new arrivals minus departures
+	const netGrowth7d = newUsers7d - churned7d;
+
+	// ── Return rate ───────────────────────────────────────────────────────────
+	// "Return rate": % of all-time unique players who have ever played more than once.
+	const playersWithReturn = firstDates.filter((r) => r.totalCompletions >= 2).length;
+	const overallReturnRate =
+		firstDates.length > 0
+			? Math.round((playersWithReturn / firstDates.length) * 1000) / 10
+			: null;
+
+	// Daily new-player return rate: for each day D, what % of first-time players
+	// on D ever came back (i.e. totalCompletions >= 2)?
+	const dailyNewPlayerReturn = new Map<string, { cohort: number; returned: number }>();
+	for (const r of firstDates) {
+		if (!r.firstDate) continue;
+		const existing = dailyNewPlayerReturn.get(r.firstDate) ?? { cohort: 0, returned: 0 };
+		existing.cohort++;
+		if (r.totalCompletions >= 2) existing.returned++;
+		dailyNewPlayerReturn.set(r.firstDate, existing);
+	}
+
+	// Build chronological array of daily rates (oldest first, days 60→1 ago)
+	// Days with fewer than 3 new players get rate=null to exclude from rolling avg
+	const dailyReturnRates: { date: string; cohort: number; rate: number | null }[] = [];
+	for (let i = 60; i >= 1; i--) {
+		const dateD = estDateStr(i);
+		const d = dailyNewPlayerReturn.get(dateD);
+		dailyReturnRates.push({
+			date: dateD,
+			cohort: d?.cohort ?? 0,
+			rate: d && d.cohort >= 3 ? Math.round((d.returned / d.cohort) * 1000) / 10 : null
+		});
+	}
+
+	// 7-day trailing rolling average of the daily rates
+	// Index 0 = 60 days ago, index 59 = yesterday
+	const newPlayerReturnSeries = dailyReturnRates.map((r, idx) => {
+		const window = dailyReturnRates
+			.slice(Math.max(0, idx - 6), idx + 1)
+			.filter((d) => d.rate !== null);
+		const avg =
+			window.length > 0
+				? Math.round((window.reduce((sum, d) => sum + (d.rate ?? 0), 0) / window.length) * 10) /
+					10
+				: null;
+		return { date: r.date, cohort: r.cohort, rate: r.rate, rollingAvg: avg };
+	});
+
+	// Velocity: avg of last 7 complete days (idx 53–59) vs prior 7 (idx 46–52)
+	const recentWindow = newPlayerReturnSeries.slice(53).filter((d) => d.rate !== null);
+	const priorWindow = newPlayerReturnSeries.slice(46, 53).filter((d) => d.rate !== null);
+	const current7dReturnAvg =
+		recentWindow.length > 0
+			? Math.round(
+					(recentWindow.reduce((a, d) => a + (d.rate ?? 0), 0) / recentWindow.length) * 10
+				) / 10
+			: null;
+	const prior7dReturnAvg =
+		priorWindow.length > 0
+			? Math.round(
+					(priorWindow.reduce((a, d) => a + (d.rate ?? 0), 0) / priorWindow.length) * 10
+				) / 10
+			: null;
+	const returnRateChange =
+		current7dReturnAvg !== null && prior7dReturnAvg !== null
+			? Math.round((current7dReturnAvg - prior7dReturnAvg) * 10) / 10
+			: null;
+
+	// ── Retention over time ───────────────────────────────────────────────────
+	// For each cohort day D, retention = % of that day's players who played
+	// again within the next N days. Only compute for days where D+N is in the past.
+
+	function retentionSeries(
+		windowDays: number,
+		seriesLength: number
+	): { date: string; rate: number; cohortSize: number }[] {
+		// Earliest computable cohort day: today - (windowDays + 1)
+		// We use index windowDays+1 through windowDays+seriesLength
+		const series: { date: string; rate: number; cohortSize: number }[] = [];
+		for (let i = windowDays + 1; i <= windowDays + seriesLength; i++) {
+			const dateD = estDateStr(i);
+			const cohort = dateUsersMap.get(dateD);
+			if (!cohort || cohort.size < 3) continue; // skip tiny cohorts
+			let retained = 0;
+			for (const userId of cohort) {
+				for (let j = 1; j <= windowDays; j++) {
+					if (dateUsersMap.get(addDays(dateD, j))?.has(userId)) {
+						retained++;
+						break;
+					}
+				}
+			}
+			series.push({
+				date: dateD,
+				rate: Math.round((retained / cohort.size) * 1000) / 10,
+				cohortSize: cohort.size
+			});
+		}
+		return series; // newest first (loop iterates i from smallest = most recent)
+	}
+
+	const retention7dSeries = retentionSeries(7, 30);
+	const retention30dSeries = retentionSeries(30, 30);
+
+	return {
+		todayEst,
+		stats: {
+			todayCount,
+			totalCount,
+			uniquePlayers,
+			weeklyPlayers,
+			activeStreaks,
+			avgGuessesToday,
+			registeredUsers,
+			avgCompletionsPerPlayer
+		},
+		growth: {
+			completionsVelocity,
+			completionsAcceleration,
+			userVelocity,
+			userAcceleration,
+			newUsers7d,
+			churned7d,
+			netGrowth7d
+		},
+		last14Days,
+		streakChart,
+		retention7dSeries,
+		retention30dSeries,
+		overallReturnRate,
+		newPlayerReturnSeries: newPlayerReturnSeries.slice(-30).reverse(),
+		newPlayerReturnVelocity: {
+			current7dAvg: current7dReturnAvg,
+			prior7dAvg: prior7dReturnAvg,
+			change: returnRateChange
+		}
+	};
+};
--- a/src/routes/global/+page.svelte
+++ b/src/routes/global/+page.svelte
@@ -0,0 +1,350 @@
+<script lang="ts">
+  import Container from '$lib/components/Container.svelte';
+
+  interface Stats {
+    todayCount: number;
+    totalCount: number;
+    uniquePlayers: number;
+    weeklyPlayers: number;
+    activeStreaks: number;
+    avgGuessesToday: number | null;
+    registeredUsers: number;
+    avgCompletionsPerPlayer: number | null;
+  }
+
+  interface PageData {
+    todayEst: string;
+    stats: Stats;
+    last14Days: { date: string; count: number }[];
+    streakChart: { days: number; count: number }[];
+    growth: {
+      completionsVelocity: number;
+      completionsAcceleration: number;
+      userVelocity: number;
+      userAcceleration: number;
+      newUsers7d: number;
+      churned7d: number;
+      netGrowth7d: number;
+    };
+    retention7dSeries: { date: string; rate: number; cohortSize: number }[];
+    retention30dSeries: { date: string; rate: number; cohortSize: number }[];
+    overallReturnRate: number | null;
+    newPlayerReturnSeries: { date: string; cohort: number; rate: number | null; rollingAvg: number | null }[];
+    newPlayerReturnVelocity: {
+      current7dAvg: number | null;
+      prior7dAvg: number | null;
+      change: number | null;
+    };
+  }
+
+  let { data }: { data: PageData } = $props();
+
+  const { stats, last14Days, todayEst, streakChart, growth, retention7dSeries, retention30dSeries, overallReturnRate, newPlayerReturnSeries, newPlayerReturnVelocity } = $derived(data);
+
+  function signed(n: number, unit = ''): string {
+    if (n > 0) return `+${n}${unit}`;
+    if (n < 0) return `${n}${unit}`;
+    return `0${unit}`;
+  }
+
+  function trendColor(n: number): string {
+    if (n > 0) return 'text-green-400';
+    if (n < 0) return 'text-red-400';
+    return 'text-gray-400';
+  }
+
+  const maxCount = $derived(Math.max(1, ...last14Days.map((d) => d.count)));
+
+  const maxStreakCount = $derived(Math.max(1, ...streakChart.map((r) => r.count)));
+
+  const statCards = $derived([
+    { label: 'Completions Today', value: String(stats.todayCount) },
+    { label: 'All-Time Completions', value: String(stats.totalCount) },
+    { label: 'Unique Players', value: String(stats.uniquePlayers) },
+    { label: 'Players This Week', value: String(stats.weeklyPlayers) },
+    { label: 'Active Streaks', value: String(stats.activeStreaks) },
+    {
+      label: 'Avg Guesses Today',
+      value: stats.avgGuessesToday != null ? stats.avgGuessesToday.toFixed(2) : 'N/A',
+    },
+    { label: 'Registered Users', value: String(stats.registeredUsers) },
+    {
+      label: 'Avg Completions/Player',
+      value: stats.avgCompletionsPerPlayer != null ? stats.avgCompletionsPerPlayer.toFixed(2) : 'N/A',
+    },
+    {
+      label: 'Overall Return Rate',
+      value: overallReturnRate != null ? `${overallReturnRate}%` : 'N/A',
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Global Stats | Bibdle</title>
+</svelte:head>
+
+<div class="min-h-screen bg-linear-to-br from-gray-900 via-slate-900 to-gray-900 text-gray-100">
+  <div class="max-w-6xl mx-auto px-4 py-8">
+
+    <a href="/" class="inline-flex items-center gap-1 text-gray-400 hover:text-gray-100 text-sm mb-6 transition-colors">
+      ← Back to Game
+    </a>
+
+    <header class="mb-8">
+      <h1 class="text-3xl font-bold text-gray-100">Global Stats</h1>
+      <p class="text-gray-400 text-sm mt-1">EST reference date: {todayEst}</p>
+    </header>
+
+    <section class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-10">
+      {#each statCards as card (card.label)}
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">{card.label}</span>
+          <span class="text-2xl md:text-3xl font-bold text-gray-100">{card.value}</span>
+        </Container>
+      {/each}
+    </section>
+
+    <section class="mb-10">
+      <h2 class="text-lg font-semibold text-gray-100 mb-4">Traffic &amp; Growth <span class="text-xs font-normal text-gray-400">(7-day windows)</span></h2>
+      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Completions Velocity</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(growth.completionsVelocity)}">{signed(growth.completionsVelocity, '/day')}</span>
+          <span class="text-xs text-gray-500 text-center">vs prior 7 days</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Completions Accel.</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(growth.completionsAcceleration)}">{signed(growth.completionsAcceleration, '/day')}</span>
+          <span class="text-xs text-gray-500 text-center">rate of change of velocity</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">User Velocity</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(growth.userVelocity)}">{signed(growth.userVelocity)}</span>
+          <span class="text-xs text-gray-500 text-center">unique players, wk/wk</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">User Acceleration</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(growth.userAcceleration)}">{signed(growth.userAcceleration)}</span>
+          <span class="text-xs text-gray-500 text-center">rate of change of user velocity</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">New Players (7d)</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(growth.newUsers7d)}">{String(growth.newUsers7d)}</span>
+          <span class="text-xs text-gray-500 text-center">first-time players</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Churned (7d)</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(0)}">{String(growth.churned7d)}</span>
+          <span class="text-xs text-gray-500 text-center">played wk prior, not this wk</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Net Growth (7d)</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {trendColor(growth.netGrowth7d)}">{signed(growth.netGrowth7d)}</span>
+          <span class="text-xs text-gray-500 text-center">new minus churned</span>
+        </Container>
+      </div>
+    </section>
+
+    <section class="mb-10">
+      <h2 class="text-lg font-semibold text-gray-100 mb-4">New Player Return Rate <span class="text-xs font-normal text-gray-400">(7-day rolling avg)</span></h2>
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6">
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Return Rate (7d avg)</span>
+          <span class="text-2xl md:text-3xl font-bold text-center text-gray-100">
+            {newPlayerReturnVelocity.current7dAvg != null ? `${newPlayerReturnVelocity.current7dAvg}%` : 'N/A'}
+          </span>
+          <span class="text-xs text-gray-500 text-center">new players who came back</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Return Rate Change</span>
+          <span class="text-2xl md:text-3xl font-bold text-center {newPlayerReturnVelocity.change != null ? trendColor(newPlayerReturnVelocity.change) : 'text-gray-400'}">
+            {newPlayerReturnVelocity.change != null ? signed(newPlayerReturnVelocity.change, 'pp') : 'N/A'}
+          </span>
+          <span class="text-xs text-gray-500 text-center">vs prior 7 days</span>
+        </Container>
+        <Container class="w-full p-5 gap-2">
+          <span class="text-gray-400 text-xs uppercase tracking-wide text-center">Prior 7d Avg</span>
+          <span class="text-2xl md:text-3xl font-bold text-center text-gray-100">
+            {newPlayerReturnVelocity.prior7dAvg != null ? `${newPlayerReturnVelocity.prior7dAvg}%` : 'N/A'}
+          </span>
+          <span class="text-xs text-gray-500 text-center">days 8–14 ago</span>
+        </Container>
+      </div>
+
+      {#if newPlayerReturnSeries.length > 0}
+        <div class="overflow-x-auto rounded-xl border border-white/10">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
+                <th class="text-left px-4 py-3">Date</th>
+                <th class="text-right px-4 py-3">New Players</th>
+                <th class="text-right px-4 py-3">Return Rate</th>
+                <th class="text-right px-4 py-3">7d Avg</th>
+                <th class="px-4 py-3 w-32"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each newPlayerReturnSeries as row (row.date)}
+                <tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+                  <td class="px-4 py-3 text-gray-300">{row.date}</td>
+                  <td class="px-4 py-3 text-right text-gray-400 text-xs">{row.cohort}</td>
+                  <td class="px-4 py-3 text-right text-gray-400">{row.rate != null ? `${row.rate}%` : '—'}</td>
+                  <td class="px-4 py-3 text-right text-gray-100 font-medium">{row.rollingAvg != null ? `${row.rollingAvg}%` : '—'}</td>
+                  <td class="px-4 py-3">
+                    <div class="w-full min-w-20">
+                      {#if row.rollingAvg != null}
+                        <div class="bg-sky-500 h-4 rounded" style="width: {row.rollingAvg}%"></div>
+                      {/if}
+                    </div>
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else}
+        <p class="text-gray-400 text-sm px-4 py-6">Not enough data yet.</p>
+      {/if}
+    </section>
+
+    <section class="mt-8">
+      <h2 class="text-lg font-semibold text-gray-100 mb-4">Last 14 Days — Completions</h2>
+      <div class="overflow-x-auto rounded-xl border border-white/10">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
+              <th class="text-left px-4 py-3">Date</th>
+              <th class="text-right px-4 py-3">Completions</th>
+              <th class="px-4 py-3 w-48"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each last14Days as row (row.date)}
+              {@const barPct = Math.round((row.count / maxCount) * 100)}
+              <tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+                <td class="px-4 py-3 text-gray-300">{row.date}</td>
+                <td class="px-4 py-3 text-right text-gray-100 font-medium">{row.count}</td>
+                <td class="px-4 py-3">
+                  <div class="w-full min-w-24">
+                    <div class="bg-amber-500 h-4 rounded" style="width: {barPct}%"></div>
+                  </div>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="mt-8">
+      <h2 class="text-lg font-semibold text-gray-100 mb-4">Active Streak Distribution</h2>
+      {#if streakChart.length === 0}
+        <p class="text-gray-400 text-sm px-4 py-6">No active streaks yet.</p>
+      {:else}
+        <div class="overflow-x-auto rounded-xl border border-white/10">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
+                <th class="text-left px-4 py-3">Days</th>
+                <th class="text-right px-4 py-3">Players</th>
+                <th class="px-4 py-3 w-48"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each streakChart as row (row.days)}
+                {@const barPct = Math.round((row.count / maxStreakCount) * 100)}
+                <tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+                  <td class="px-4 py-3 text-gray-300">{row.days}</td>
+                  <td class="px-4 py-3 text-right text-gray-100 font-medium">{row.count}</td>
+                  <td class="px-4 py-3">
+                    <div class="w-full min-w-24">
+                      <div class="bg-blue-500 h-4 rounded" style="width: {barPct}%"></div>
+                    </div>
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </section>
+
+    <section class="mt-8">
+      <h2 class="text-lg font-semibold text-gray-100 mb-1">Retention Over Time</h2>
+      <p class="text-gray-400 text-sm mb-6">% of each day's players who returned within the window. Cohorts with fewer than 3 players are excluded.</p>
+
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- 7-day retention -->
+        <div>
+          <h3 class="text-base font-semibold text-gray-200 mb-3">7-Day Retention</h3>
+          {#if retention7dSeries.length === 0}
+            <p class="text-gray-400 text-sm px-4 py-6">Not enough data yet.</p>
+          {:else}
+            <div class="overflow-x-auto rounded-xl border border-white/10">
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
+                    <th class="text-left px-4 py-3">Cohort Date</th>
+                    <th class="text-right px-4 py-3">n</th>
+                    <th class="text-right px-4 py-3">Ret. %</th>
+                    <th class="px-4 py-3 w-32"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each retention7dSeries as row (row.date)}
+                    <tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+                      <td class="px-4 py-3 text-gray-300">{row.date}</td>
+                      <td class="px-4 py-3 text-right text-gray-400 text-xs">{row.cohortSize}</td>
+                      <td class="px-4 py-3 text-right text-gray-100 font-medium">{row.rate}%</td>
+                      <td class="px-4 py-3">
+                        <div class="w-full min-w-20">
+                          <div class="bg-emerald-500 h-4 rounded" style="width: {row.rate}%"></div>
+                        </div>
+                      </td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {/if}
+        </div>
+
+        <!-- 30-day retention -->
+        <div>
+          <h3 class="text-base font-semibold text-gray-200 mb-3">30-Day Retention</h3>
+          {#if retention30dSeries.length === 0}
+            <p class="text-gray-400 text-sm px-4 py-6">Not enough data yet.</p>
+          {:else}
+            <div class="overflow-x-auto rounded-xl border border-white/10">
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
+                    <th class="text-left px-4 py-3">Cohort Date</th>
+                    <th class="text-right px-4 py-3">n</th>
+                    <th class="text-right px-4 py-3">Ret. %</th>
+                    <th class="px-4 py-3 w-32"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each retention30dSeries as row (row.date)}
+                    <tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+                      <td class="px-4 py-3 text-gray-300">{row.date}</td>
+                      <td class="px-4 py-3 text-right text-gray-400 text-xs">{row.cohortSize}</td>
+                      <td class="px-4 py-3 text-right text-gray-100 font-medium">{row.rate}%</td>
+                      <td class="px-4 py-3">
+                        <div class="w-full min-w-20">
+                          <div class="bg-violet-500 h-4 rounded" style="width: {row.rate}%"></div>
+                        </div>
+                      </td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </section>
+
+  </div>
+</div>
--- a/todo.md
+++ b/todo.md
@@ -59,6 +59,14 @@ I created Bibdle from a combination of two things. The first is my lifelong desi

 # done

+## march 14th
+
+- Added /global public dashboard with 8 stat cards: completions today, all-time, unique players, players this week, active streaks, avg guesses today, registered users, avg completions per player
+- Added traffic & growth analytics section: completions velocity + acceleration, user velocity + acceleration, new players (7d), churned players (7d), net growth (7d)
+- Added active streak distribution chart (bar chart by streak length)
+- Added 14-day completions trend table with inline bar chart
+- Fixed BIBDLE header color in dark mode
+
 ## march 12th

 - Added about page with social buttons and XML sitemap for SEO
Author	SHA1	Message	Date
George Powell	e878dea235	Fixed instructions, added color border based on closeness between guess and target	2026-03-15 03:19:21 -04:00
George Powell	252edc3a6d	fix: show most recent dates first in return rate and retention tables - Reverse new player return rate table (most recent day at top) - Reverse 7- and 30-day retention tables (most recent cohort at top) - Rename "Day Rate" column to "Return Rate" - Clarify "Last 14 Days" heading to "Last 14 Days — Completions" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-15 02:16:16 -04:00
George Powell	75b13280ef	feat: add return rate and retention metrics to global stats - Overall return rate: % of all-time players who played more than once - New player return rate: 7-day rolling avg of daily first-timer return rates, with velocity vs prior 7 days - 7-day and 30-day retention over time: per-cohort-day retention series Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-03-15 02:09:55 -04:00
George Powell	7007df2966	added global route for stat tracking	2026-03-14 22:17:33 -04:00
George Powell	61673a646d	Added thank you message	2026-03-14 18:46:22 -04:00
George Powell	1eb8eb2f04	Added umami event to Apple signin and fixed spacing	2026-03-14 18:40:57 -04:00