Fixed instructions, added color border based on closeness between guess

and target

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"/>

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>

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}
+{#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}
 	<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(
+					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"
-						guess.book.id === correctBookId,
+					style="animation-delay: {rowIndex * 1000 +
-					)}"
+						3 * 500}ms; {getBookBoxStyle(guess)}"
-					style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-lg"
 						>{getBoxContent(guess, "book")}</span

src/lib/components/SearchInput.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { bibleBooks, type BibleBook, type BibleSection, type Testament } from "$lib/types/bible";
+	import {
+		bibleBooks,
+		type BibleBook,
+		type BibleSection,
+		type Testament,
+	} from "$lib/types/bible";
 	import { SvelteSet } from "svelte/reactivity";
 
 	let {
@@ -17,13 +22,13 @@
 	type DisplayMode = "simple" | "testament" | "sections";
 
 	const displayMode = $derived<DisplayMode>(
-    guessCount >= 9 ? "sections" : guessCount >= 3 ? "testament" : "simple"
+		guessCount >= 9 ? "sections" : guessCount >= 3 ? "testament" : "simple",
 	);
 
 	const filteredBooks = $derived(
 		bibleBooks.filter((book) =>
-      book.name.toLowerCase().includes(searchQuery.toLowerCase())
+			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
-    )
+		),
 	);
 
 	type SimpleGroup = { books: BibleBook[] };
@@ -44,7 +49,7 @@
 
 	const simpleGroup = $derived.by<SimpleGroup>(() => {
 		const sorted = [...filteredBooks].sort((a, b) =>
-      a.name.localeCompare(b.name)
+			a.name.localeCompare(b.name),
 		);
 		return { books: sorted };
 	});
@@ -58,10 +63,18 @@
 			.sort((a, b) => a.name.localeCompare(b.name));
 		const groups: TestamentGroup[] = [];
 		if (old.length > 0) {
-      groups.push({ testament: "old", label: "Old Testament", books: old });
+			groups.push({
+				testament: "old",
+				label: "Old Testament",
+				books: old,
+			});
 		}
 		if (newT.length > 0) {
-      groups.push({ testament: "new", label: "New Testament", books: newT });
+			groups.push({
+				testament: "new",
+				label: "New Testament",
+				books: newT,
+			});
 		}
 		return groups;
 	});
@@ -69,13 +82,17 @@
 	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 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 });
+				orderedPairs.push({
+					testament: book.testament,
+					section: book.section,
+				});
 			}
 		}
 
@@ -84,7 +101,9 @@
 
 		for (const pair of orderedPairs) {
 			const books = filteredBooks.filter(
-        (b) => b.testament === pair.testament && b.section === pair.section
+				(b) =>
+					b.testament === pair.testament &&
+					b.section === pair.section,
 			);
 			if (books.length === 0) continue;
 
@@ -94,7 +113,9 @@
 			groups.push({
 				testament: pair.testament,
 				testamentLabel:
-          pair.testament === "old" ? "Old Testament" : "New Testament",
+					pair.testament === "old"
+						? "Old Testament"
+						: "New Testament",
 				showTestamentHeader,
 				section: pair.section,
 				books,
@@ -122,7 +143,8 @@
 		}
 	}
 
-  const showBanner = $derived(guessCount >= 3);
+	// const showBanner = $derived(guessCount >= 3);
+	const showBanner = false;
 	const bannerIsIndigo = $derived(guessCount >= 9);
 </script>
 
@@ -206,7 +228,9 @@
 							tabindex={guessedIds.has(book.id) ? -1 : 0}
 						>
 							<span
-                class="font-semibold dark:text-gray-100 {guessedIds.has(book.id)
+								class="font-semibold dark:text-gray-100 {guessedIds.has(
+									book.id,
+								)
 									? 'line-through text-gray-400 dark:text-gray-500'
 									: ''}"
 							>
@@ -226,21 +250,30 @@
 							>
 								{group.label}
 							</span>
-              <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
+							<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)}>
+								<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}
+										tabindex={guessedIds.has(book.id)
+											? -1
+											: 0}
 									>
 										<span
-                      class="font-semibold {guessedIds.has(book.id)
+											class="font-semibold {guessedIds.has(
+												book.id,
+											)
 												? 'line-through text-gray-400 dark:text-gray-500'
 												: ''}"
 										>
@@ -264,7 +297,9 @@
 								>
 									{group.testamentLabel}
 								</span>
-                <div class="flex-1 h-px bg-gray-200 dark:bg-gray-600"></div>
+								<div
+									class="flex-1 h-px bg-gray-200 dark:bg-gray-600"
+								></div>
 							</div>
 						{/if}
 						<div
@@ -275,21 +310,30 @@
 							>
 								{group.section}
 							</span>
-              <div class="flex-1 h-px bg-gray-100 dark:bg-gray-600"></div>
+							<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)}>
+								<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}
+										tabindex={guessedIds.has(book.id)
+											? -1
+											: 0}
 									>
 										<span
-                      class="font-semibold {guessedIds.has(book.id)
+											class="font-semibold {guessedIds.has(
+												book.id,
+											)
 												? 'line-through text-gray-400 dark:text-gray-500'
 												: ''}"
 										>
@@ -304,6 +348,8 @@
 			{/if}
 		</ul>
 	{:else if searchQuery}
-    <p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">No books found</p>
+		<p class="mt-4 text-center text-gray-500 dark:text-gray-400 p-8">
+			No books found
+		</p>
 	{/if}
 </div>

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">
+					<svg
-						<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"/>
+						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 {

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>

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}
 

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
+		}
+	};
+};

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>

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