updated todo and fixed themetoggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -1,5 +1,11 @@
 DATABASE_URL=example.db
 
+# Cron job secret for protected endpoints (e.g. send-daily-verse)
+CRON_SECRET=your-cron-secret-here
+
+# Discord webhook URL for posting the daily verse
+DISCORD_DAILY_WEBHOOK=https://discord.com/api/webhooks/your-webhook-url
+
 PUBLIC_SITE_URL=https://bibdle.com
 
 # nodemailer

.gitignore

@@ -32,3 +32,4 @@ embeddings*
 engwebu_usfx.xml
 
 deploy.log
+bibdle.socket

CLAUDE.md

@@ -27,19 +27,14 @@ After calling the list-sections tool, you MUST analyze the returned documentatio
 Analyzes Svelte code and returns issues and suggestions.
 You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
 
-### 4. playground-link
-
-Generates a Svelte Playground link with the provided code.
-After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
-
 ## Tech Stack
 
 - **Framework**: SvelteKit 5 with Svelte 5 (uses runes: `$state`, `$derived`, `$effect`, `$props`)
 - **Styling**: Tailwind CSS 4
 - **Database**: SQLite with Drizzle ORM
-- **Auth**: Session-based authentication using @oslojs/crypto (SHA-256 hashed tokens)
+- **Auth**: Session-based authentication using Bun's built-in cryptographically secure functions
 - **Deployment**: Node.js adapter for production builds
-- **External API**: bible-api.com for fetching random verses
+- **ML**: `@xenova/transformers` for verse embeddings (initialized in server hook) (currently disabled, was a test for a cancelled project)
 
 ## Development Commands
 
@@ -51,6 +46,11 @@ bun run dev
 bun run check
 bun run check:watch
 
+# Run tests
+bun test
+bun test --watch
+bun test tests/timezone-handling.test.ts  # Run a single test file
+
 # Build for production
 bun run build
 
@@ -58,92 +58,108 @@ bun run build
 bun run preview
 
 # Database operations
-bun run db:push      # Push schema changes to database
-bun run db:generate  # Generate migrations (DO NOT RUN)
-bun run db:migrate   # Run migrations (DO NOT RUN)
+bun run db:push      # Push schema changes directly (avoid in prod)
+bun run db:generate  # Generate migrations
+bun run db:migrate   # Run migrations
 bun run db:studio    # Open Drizzle Studio GUI
 ```
 
+## Critical: Date/Time Handling
+
+**Bibdle is played by users across many timezones worldwide. The verse shown to a player must always be the verse for the calendar date at *their* location — not the server's timezone, not UTC. A user in Tokyo on Wednesday must see Wednesday's verse, even if the server (or a user in New York) is still on Tuesday.**
+
+**NEVER use server time or UTC time for user-facing date calculations.**
+
+- Get today's date client-side: `new Date().toLocaleDateString("en-CA")` → `YYYY-MM-DD`
+- Pass the date to the server as a query param or POST body (`localDate`)
+- Server-side date arithmetic must use UTC methods on the client-provided date string: `new Date(dateStr + 'T00:00:00Z')` + `setUTCDate`/`getUTCDate`
+- `src/routes/+page.ts` has `ssr = false` so the load runs client-side with the true local date
+- Never set the user-facing URL to include their date as a parameter. It should always be passed to an API route behind the scenes if needed.
+
+### Streak Calculation
+
+A streak counts consecutive calendar days (in the user's local timezone) on which the user completed the puzzle. The rules:
+
+- The client passes its local date (`localDate`) to the streak API. The server never uses its own clock.
+- A streak is **active** if the user has completed today's puzzle *or* yesterday's puzzle (they still have time to play today).
+- Walk backwards from `localDate` through the `dailyCompletions` records, counting each day that has a completion. Stop as soon as a day is missing.
+- A streak of 1 (completed only today or only yesterday, with no prior consecutive days) is **not displayed** — the minimum shown streak is 2.
+- "Yesterday" and all date arithmetic on the server must use UTC methods on the client-provided date string to avoid timezone drift: `new Date(localDate + 'T00:00:00Z')`, then `setUTCDate`/`getUTCDate`.
+
 ## Architecture
 
 ### Database Schema (`src/lib/server/db/schema.ts`)
 
-- **user**: User accounts with id and age
-- **session**: Auth sessions linked to users with expiration timestamps
+- **user**: `id`, `firstName`, `lastName`, `email` (unique), `passwordHash`, `appleId` (unique), `isPrivate`
+- **session**: `id` (SHA-256 hash of token), `userId` (FK), `expiresAt`
 - **daily_verses**: Cached daily verses with book ID, verse text, reference, and date
+- **dailyCompletions**: Game results per user/date with guess count, grade, book; unique on `(userId, date)`
 
-Sessions expire after 30 days and are automatically renewed when less than 15 days remain.
+Sessions expire after 30 days and auto-renew when < 15 days remain.
 
 ### Bible Data (`src/lib/types/bible.ts`)
 
 The `bibleBooks` array contains all 66 Bible books with metadata:
-- Testament (old/new)
-- Section (Law, History, Wisdom, Prophets, Gospels, Epistles, Apocalyptic)
+- Testament (old/new), Section (Law, History, Wisdom, Prophets, Gospels, Epistles, Apocalyptic)
 - Order (1-66, used for adjacency detection)
-- Popularity (2-10, affects grading - higher is more popular)
 
 ### Daily Verse System (`src/routes/+page.server.ts`)
 
-The `getTodayVerse()` function:
-1. Checks database for existing verse for today's date
-2. If none exists, fetches from bible-api.com (random verse + 2 consecutive verses)
-3. Caches in database with UTC date key
-4. Returns verse with book metadata for the game
+`getTodayVerse()` checks the database for today's date, fetches a verse if missing, caches permanently, and returns verse with book metadata.
 
 ### Game Logic (`src/routes/+page.svelte`)
 
 **State Management:**
-- `guesses` array stores game state in localStorage keyed by date
+- `guesses` array stored in localStorage keyed by date: `bibdle-guesses-${date}`
 - Each guess tracks: book, testamentMatch, sectionMatch, adjacent
-- `isWon` is derived from whether any guess matches the correct book
+- `isWon` derived from whether any guess matches the correct book
 
-**Grading System:**
-```javascript
-// Grade formula combines performance + difficulty
-performanceScore = max(0, 10 - numGuesses)
-difficulty = 14 - popularity
-totalScore = performanceScore + difficulty * 0.8
-
-// S: 14+, A: 11+, B: 8+, C: 5+, C-: <5
-```
-
-**Hint System:**
-- ✅ Green checkmark: Exact match
-- 🟩 Green square: Section matches
-- 🟧 Orange square: Testament matches (shared results)
-- ‼️ Double exclamation: Adjacent book in Bible order
-- 🟥 Red square: No match
+**Hint System, for share grid:**
+- ✅ Exact match | 🟩 Section match | 🟧 Testament match | ‼️ Adjacent book | 🟥 No match
 
 ### Authentication System (`src/lib/server/auth.ts`)
 
-- Token-based sessions with SHA-256 hashing
-- Cookies store session tokens, validated on each request
-- Hook in `src/hooks.server.ts` populates `event.locals.user` and `event.locals.session`
-- Note: Currently the schema includes user table but auth UI is not yet implemented
+- Token generation: base64-encoded random bytes; stored as SHA-256 hash in DB
+- Cookie name: `auth-session`
+- Anonymous users: identified by a client-generated ID; stats migrate on sign-up via `migrateAnonymousStats()`
+- Apple Sign-In supported via `appleId` field
+
+### Stats & Streak (`src/routes/stats/`)
+
+- Stats page requires auth; returns `requiresAuth: true` if unauthenticated
+- Streak calculated client-side by calling `GET /api/streak?userId=X&localDate=Y`
+- Streak walk-back: counts consecutive days backwards from `localDate` through completed dates
+- Minimum displayed streak is 2 (single-day streaks suppressed)
+
+## API Endpoints
+
+- `POST /api/daily-verse` — Fetch verse for a specific date
+- `POST /api/submit-completion` — Submit game result with stats
+- `GET /api/streak?userId=X&localDate=Y` — Current streak for user
+- `GET /api/streak-percentile` — Streak percentile ranking
 
 ## Key Files
 
-- `src/routes/+page.svelte` - Main game UI and client-side logic
-- `src/routes/+page.server.ts` - Server load function, fetches/caches daily verse
-- `src/lib/server/bible-api.ts` - External API integration for verse fetching
-- `src/lib/server/bible.ts` - Bible book utility functions
-- `src/lib/types/bible.ts` - Bible books data and TypeScript types
-- `src/lib/server/db/schema.ts` - Drizzle ORM schema definitions
-- `src/hooks.server.ts` - SvelteKit server hook for session validation
+- `src/routes/+page.svelte` — Main game UI and client-side logic
+- `src/routes/+page.server.ts` / `+page.ts` — Server load (verse) + client load (`ssr: false`)
+- `src/routes/stats/+page.svelte` / `+page.server.ts` — Stats UI and server calculations
+- `src/lib/server/auth.ts` — Session management, password hashing, anonymous migration
+- `src/lib/server/bible-api.ts` — Random verse fetching from local XML Bible
+- `src/lib/server/bible.ts` — Bible book utility functions
+- `src/lib/types/bible.ts` — Bible books data and TypeScript types
+- `src/lib/server/db/schema.ts` — Drizzle ORM schema
+- `src/hooks.server.ts` — Session validation hook; initializes ML embeddings
+- `tests/` — Bun test suites (timezone, game, bible, stats, share, auth migration)
 
 ## Environment Variables
 
 Required in `.env`:
-- `DATABASE_URL` - Path to SQLite database file (e.g., `./local.db`)
+- `DATABASE_URL` — Path to SQLite database file (e.g., `./local.db`)
 
 ## Deployment
 
-The project uses `@sveltejs/adapter-node` for deployment. The build output is a Node.js server that can be run with systemd or similar process managers. See `bibdle.service` and `bibdle.socket` for systemd configuration.
+Uses `@sveltejs/adapter-node`. See `bibdle.service` systemd configuration.
 
-## Important Notes
+## A Note
 
-- Uses Svelte 5 runes syntax (`$state`, `$derived`, `$effect`, `$props`) - not stores or reactive declarations
-- The schema includes authentication tables but the login/signup UI is not yet implemented
-- Daily verses are cached permanently in the database to ensure consistency
-- LocalStorage persists guesses per day using the key pattern `bibdle-guesses-${date}`
-- The game validates book IDs from the API against the hardcoded `bibleBooks` array
+The main developer of this project is still learning a lot about developing full-stack applications. If they ask you to do something, make sure they understand how it will be implemented before proceeding.

bibdle.service

@@ -1,18 +1,19 @@
 [Unit]
 Description=Bibdle SvelteKit App
 Documentation=https://github.com/sveltejs/kit/tree/main/packages/adapter-node
-Requires=bibdle.socket
-After=network-online.target bibdle.socket
+After=network-online.target
 
 [Service]
 Environment=NODE_ENV=production
 Environment=ORIGIN=https://bibdle.com
-Environment=DATABASE_URL=local.db
-Environment=IDLE_TIMEOUT=60
-WorkingDirectory=/home/george/projects/bibdle
-ExecStart=/home/george/.nvm/versions/node/v24.12.0/bin/node build/index.js
+Environment=DATABASE_URL=prod.db
+Environment=IDLE_TIMEOUT=300
+Environment=PORT=5173
+WorkingDirectory=/home/xenia/projects/bibdle
+#ExecStart=/home/xenia/.nvm/versions/node/v24.13.0/bin/node build/index.js
+ExecStart=/home/xenia/.bun/bin/bun --bun build/index.js
 Restart=on-failure
 RestartSec=3
 
 [Install]
-WantedBy=multi-user.target
+WantedBy=multi-user.target

bibdle.socket

@@ -1,5 +0,0 @@
-[Socket]
-ListenStream=5173
-
-[Install]
-WantedBy=sockets.target

bibdle_logo.svg

@@ -0,0 +1,385 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="680"
+   viewBox="0 0 680 520"
+   version="1.1"
+   id="svg41"
+   sodipodi:docname="bibdle_logo.svg"
+   inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview41"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="true"
+     inkscape:zoom="0.91550428"
+     inkscape:cx="321.68064"
+     inkscape:cy="144.18283"
+     inkscape:window-width="1512"
+     inkscape:window-height="921"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg41">
+    <inkscape:grid
+       id="grid41"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs32">
+    <linearGradient
+       id="bgSq"
+       x1="0"
+       y1="0"
+       x2="0"
+       y2="1">
+      <stop
+         offset="0%"
+         stop-color="rgb(110,154,202)"
+         id="stop1" />
+      <stop
+         offset="3.23%"
+         stop-color="rgb(111,155,203)"
+         id="stop2" />
+      <stop
+         offset="6.45%"
+         stop-color="rgb(112,156,203)"
+         id="stop3" />
+      <stop
+         offset="9.68%"
+         stop-color="rgb(114,158,204)"
+         id="stop4" />
+      <stop
+         offset="12.9%"
+         stop-color="rgb(115,159,205)"
+         id="stop5" />
+      <stop
+         offset="16.13%"
+         stop-color="rgb(116,160,205)"
+         id="stop6" />
+      <stop
+         offset="19.35%"
+         stop-color="rgb(118,162,206)"
+         id="stop7" />
+      <stop
+         offset="22.58%"
+         stop-color="rgb(119,163,207)"
+         id="stop8" />
+      <stop
+         offset="25.81%"
+         stop-color="rgb(121,165,208)"
+         id="stop9" />
+      <stop
+         offset="29.03%"
+         stop-color="rgb(123,167,209)"
+         id="stop10" />
+      <stop
+         offset="32.26%"
+         stop-color="rgb(125,168,210)"
+         id="stop11" />
+      <stop
+         offset="35.48%"
+         stop-color="rgb(127,170,211)"
+         id="stop12" />
+      <stop
+         offset="38.71%"
+         stop-color="rgb(130,172,212)"
+         id="stop13" />
+      <stop
+         offset="41.94%"
+         stop-color="rgb(132,175,213)"
+         id="stop14" />
+      <stop
+         offset="45.16%"
+         stop-color="rgb(135,177,214)"
+         id="stop15" />
+      <stop
+         offset="48.39%"
+         stop-color="rgb(138,180,215)"
+         id="stop16" />
+      <stop
+         offset="51.61%"
+         stop-color="rgb(141,182,216)"
+         id="stop17" />
+      <stop
+         offset="54.84%"
+         stop-color="rgb(145,185,218)"
+         id="stop18" />
+      <stop
+         offset="58.06%"
+         stop-color="rgb(149,188,219)"
+         id="stop19" />
+      <stop
+         offset="61.29%"
+         stop-color="rgb(153,191,220)"
+         id="stop20" />
+      <stop
+         offset="64.52%"
+         stop-color="rgb(158,195,222)"
+         id="stop21" />
+      <stop
+         offset="67.74%"
+         stop-color="rgb(163,198,223)"
+         id="stop22" />
+      <stop
+         offset="70.97%"
+         stop-color="rgb(169,202,224)"
+         id="stop23" />
+      <stop
+         offset="74.19%"
+         stop-color="rgb(174,206,226)"
+         id="stop24" />
+      <stop
+         offset="77.42%"
+         stop-color="rgb(181,209,227)"
+         id="stop25" />
+      <stop
+         offset="80.65%"
+         stop-color="rgb(188,213,228)"
+         id="stop26" />
+      <stop
+         offset="83.87%"
+         stop-color="rgb(195,217,229)"
+         id="stop27" />
+      <stop
+         offset="87.1%"
+         stop-color="rgb(203,221,230)"
+         id="stop28" />
+      <stop
+         offset="90.32%"
+         stop-color="rgb(210,225,230)"
+         id="stop29" />
+      <stop
+         offset="93.55%"
+         stop-color="rgb(218,228,229)"
+         id="stop30" />
+      <stop
+         offset="96.77%"
+         stop-color="rgb(224,230,227)"
+         id="stop31" />
+      <stop
+         offset="100%"
+         stop-color="rgb(227,228,223)"
+         id="stop32" />
+    </linearGradient>
+    <clipPath
+       id="sqClip">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect32" />
+    </clipPath>
+    <clipPath
+       id="ciClip">
+      <circle
+         cx="510"
+         cy="170"
+         r="130"
+         id="circle32" />
+    </clipPath>
+    <clipPath
+       id="sqClip-9">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect32-8" />
+    </clipPath>
+    <clipPath
+       id="clipPath1">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect1" />
+    </clipPath>
+    <clipPath
+       id="clipPath2">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect2" />
+    </clipPath>
+    <clipPath
+       id="clipPath3">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect3" />
+    </clipPath>
+    <clipPath
+       id="sqClip-9-1">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect32-8-7" />
+    </clipPath>
+    <clipPath
+       id="clipPath1-1">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect1-8" />
+    </clipPath>
+    <clipPath
+       id="clipPath2-7">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect2-8" />
+    </clipPath>
+    <clipPath
+       id="clipPath3-7">
+      <rect
+         x="40"
+         y="40"
+         width="260"
+         height="260"
+         rx="44"
+         id="rect3-7" />
+    </clipPath>
+  </defs>
+  <!-- Rounded square (favicon / app icon) -->
+  <rect
+     x="40"
+     y="40"
+     width="260"
+     height="260"
+     rx="44"
+     fill="url(#bgSq)"
+     id="rect33"
+     inkscape:export-filename="../Coding/bibdle/static/favicon.png"
+     inkscape:export-xdpi="23.63077"
+     inkscape:export-ydpi="23.63077" />
+  <!-- Circle (Discord server icon) -->
+  <circle
+     cx="510"
+     cy="170"
+     r="130"
+     fill="url(#bgSq)"
+     id="circle37"
+     inkscape:export-filename="../Coding/bibdle/static/bibdle-logo-circle.png"
+     inkscape:export-xdpi="378.09232"
+     inkscape:export-ydpi="378.09232" />
+  <rect
+     x="152"
+     y="78"
+     width="36"
+     height="184"
+     rx="5"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9)"
+     id="rect34-6"
+     transform="matrix(0.89748134,0,0,1,357.18847,2.5366858)" />
+  <rect
+     x="128"
+     y="88"
+     width="84"
+     height="26"
+     rx="5"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9)"
+     id="rect35-5"
+     transform="matrix(1,0,0,0.80796134,339.90604,30.104693)" />
+  <rect
+     x="96"
+     y="140"
+     width="148"
+     height="30"
+     rx="5"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9)"
+     id="rect36-7"
+     transform="matrix(1,0,0,0.82878095,339.90604,26.507353)" />
+  <rect
+     x="128"
+     y="210"
+     width="84"
+     height="20"
+     rx="4"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9)"
+     transform="rotate(15,330.33996,1512.3487)"
+     id="rect37-6" />
+  <rect
+     x="152"
+     y="78"
+     width="36"
+     height="184"
+     rx="5"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9-1)"
+     id="rect34-6-4"
+     transform="matrix(0.89748134,0,0,1,17.264653,0.15299483)" />
+  <rect
+     x="128"
+     y="88"
+     width="84"
+     height="26"
+     rx="5"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9-1)"
+     id="rect35-5-4"
+     transform="matrix(1,0,0,0.80796134,0.28036275,27.721002)" />
+  <rect
+     x="96"
+     y="140"
+     width="148"
+     height="30"
+     rx="5"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9-1)"
+     id="rect36-7-9"
+     transform="matrix(1,0,0,0.82878095,-0.01777671,24.123662)" />
+  <rect
+     x="128"
+     y="210"
+     width="84"
+     height="20"
+     rx="4"
+     fill="#ffffff"
+     clip-path="url(#sqClip-9-1)"
+     transform="rotate(15,169.4311,220.168)"
+     id="rect37-6-1" />
+</svg>

drizzle/0003_overjoyed_mindworm.sql

@@ -0,0 +1,3 @@
+ALTER TABLE `daily_completions` ADD `guesses` text;--> statement-breakpoint
+ALTER TABLE `user` ADD `google_id` text;--> statement-breakpoint
+CREATE UNIQUE INDEX `user_google_id_unique` ON `user` (`google_id`);

drizzle/meta/0003_snapshot.json

@@ -0,0 +1,296 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "80883fb9-70cd-4fa5-b228-36358ffc4c40",
+  "prevId": "f3a47f60-540b-4d95-8c23-b1f68506b3ed",
+  "tables": {
+    "daily_completions": {
+      "name": "daily_completions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "anonymous_id": {
+          "name": "anonymous_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "date": {
+          "name": "date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "guess_count": {
+          "name": "guess_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "guesses": {
+          "name": "guesses",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "anonymous_id_date_idx": {
+          "name": "anonymous_id_date_idx",
+          "columns": [
+            "anonymous_id",
+            "date"
+          ],
+          "isUnique": false
+        },
+        "date_idx": {
+          "name": "date_idx",
+          "columns": [
+            "date"
+          ],
+          "isUnique": false
+        },
+        "date_guess_idx": {
+          "name": "date_guess_idx",
+          "columns": [
+            "date",
+            "guess_count"
+          ],
+          "isUnique": false
+        },
+        "daily_completions_anonymous_id_date_unique": {
+          "name": "daily_completions_anonymous_id_date_unique",
+          "columns": [
+            "anonymous_id",
+            "date"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "daily_verses": {
+      "name": "daily_verses",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "date": {
+          "name": "date",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "book_id": {
+          "name": "book_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "verse_text": {
+          "name": "verse_text",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "reference": {
+          "name": "reference",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "daily_verses_date_unique": {
+          "name": "daily_verses_date_unique",
+          "columns": [
+            "date"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "first_name": {
+          "name": "first_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_name": {
+          "name": "last_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "apple_id": {
+          "name": "apple_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "google_id": {
+          "name": "google_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "is_private": {
+          "name": "is_private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false,
+          "default": false
+        }
+      },
+      "indexes": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "user_apple_id_unique": {
+          "name": "user_apple_id_unique",
+          "columns": [
+            "apple_id"
+          ],
+          "isUnique": true
+        },
+        "user_google_id_unique": {
+          "name": "user_google_id_unique",
+          "columns": [
+            "google_id"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -22,6 +22,13 @@
       "when": 1770961427714,
       "tag": "0002_outstanding_hiroim",
       "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
+      "when": 1774416309647,
+      "tag": "0003_overjoyed_mindworm",
+      "breakpoints": true
     }
   ]
 }

export-verses.sh

@@ -0,0 +1,87 @@
+#!/bin/bash
+# Export all daily verses to JSON
+# Usage: ./export-verses.sh [path/to/database.db] [output.json]
+
+DB="${1:-./local.db}"
+OUT="${2:-verses.json}"
+
+sqlite3 "$DB" <<'SQL' > "$OUT"
+.mode json
+SELECT
+  CASE book_id
+    WHEN 'GEN' THEN 'Genesis'
+    WHEN 'EXO' THEN 'Exodus'
+    WHEN 'LEV' THEN 'Leviticus'
+    WHEN 'NUM' THEN 'Numbers'
+    WHEN 'DEU' THEN 'Deuteronomy'
+    WHEN 'JOS' THEN 'Joshua'
+    WHEN 'JDG' THEN 'Judges'
+    WHEN 'RUT' THEN 'Ruth'
+    WHEN '1SA' THEN '1 Samuel'
+    WHEN '2SA' THEN '2 Samuel'
+    WHEN '1KI' THEN '1 Kings'
+    WHEN '2KI' THEN '2 Kings'
+    WHEN '1CH' THEN '1 Chronicles'
+    WHEN '2CH' THEN '2 Chronicles'
+    WHEN 'EZR' THEN 'Ezra'
+    WHEN 'NEH' THEN 'Nehemiah'
+    WHEN 'EST' THEN 'Esther'
+    WHEN 'JOB' THEN 'Job'
+    WHEN 'PSA' THEN 'Psalms'
+    WHEN 'PRO' THEN 'Proverbs'
+    WHEN 'ECC' THEN 'Ecclesiastes'
+    WHEN 'SNG' THEN 'Song of Solomon'
+    WHEN 'ISA' THEN 'Isaiah'
+    WHEN 'JER' THEN 'Jeremiah'
+    WHEN 'LAM' THEN 'Lamentations'
+    WHEN 'EZK' THEN 'Ezekiel'
+    WHEN 'DAN' THEN 'Daniel'
+    WHEN 'HOS' THEN 'Hosea'
+    WHEN 'JOL' THEN 'Joel'
+    WHEN 'AMO' THEN 'Amos'
+    WHEN 'OBA' THEN 'Obadiah'
+    WHEN 'JON' THEN 'Jonah'
+    WHEN 'MIC' THEN 'Micah'
+    WHEN 'NAM' THEN 'Nahum'
+    WHEN 'HAB' THEN 'Habakkuk'
+    WHEN 'ZEP' THEN 'Zephaniah'
+    WHEN 'HAG' THEN 'Haggai'
+    WHEN 'ZEC' THEN 'Zechariah'
+    WHEN 'MAL' THEN 'Malachi'
+    WHEN 'MAT' THEN 'Matthew'
+    WHEN 'MRK' THEN 'Mark'
+    WHEN 'LUK' THEN 'Luke'
+    WHEN 'JHN' THEN 'John'
+    WHEN 'ACT' THEN 'Acts'
+    WHEN 'ROM' THEN 'Romans'
+    WHEN '1CO' THEN '1 Corinthians'
+    WHEN '2CO' THEN '2 Corinthians'
+    WHEN 'GAL' THEN 'Galatians'
+    WHEN 'EPH' THEN 'Ephesians'
+    WHEN 'PHP' THEN 'Philippians'
+    WHEN 'COL' THEN 'Colossians'
+    WHEN '1TH' THEN '1 Thessalonians'
+    WHEN '2TH' THEN '2 Thessalonians'
+    WHEN '1TI' THEN '1 Timothy'
+    WHEN '2TI' THEN '2 Timothy'
+    WHEN 'TIT' THEN 'Titus'
+    WHEN 'PHM' THEN 'Philemon'
+    WHEN 'HEB' THEN 'Hebrews'
+    WHEN 'JAS' THEN 'James'
+    WHEN '1PE' THEN '1 Peter'
+    WHEN '2PE' THEN '2 Peter'
+    WHEN '1JN' THEN '1 John'
+    WHEN '2JN' THEN '2 John'
+    WHEN '3JN' THEN '3 John'
+    WHEN 'JUD' THEN 'Jude'
+    WHEN 'REV' THEN 'Revelation'
+    ELSE book_id
+  END AS book,
+  verse_text AS verse,
+  reference  AS citation,
+  date
+FROM daily_verses
+ORDER BY date;
+SQL
+
+echo "Exported to $OUT"

package.json

@@ -18,8 +18,6 @@
 		"db:studio": "drizzle-kit studio"
 	},
 	"devDependencies": {
-		"@oslojs/crypto": "^1.0.1",
-		"@oslojs/encoding": "^1.1.0",
 		"@sveltejs/adapter-node": "^5.5.2",
 		"@sveltejs/kit": "^2.50.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
@@ -37,7 +35,9 @@
 	},
 	"dependencies": {
 		"@xenova/transformers": "^2.17.2",
+		"drizzle": "^1.4.0",
 		"fast-xml-parser": "^5.3.3",
+		"marked": "^17.0.4",
 		"xml2js": "^0.6.2"
 	}
 }

scripts/test-share-text.ts

@@ -0,0 +1,41 @@
+import { fetchRandomVerse } from '../src/lib/server/bible-api';
+import { generateShareText } from '../src/lib/utils/share';
+import { bibleBooks } from '../src/lib/types/bible';
+
+const NUM_VERSES = 10;
+
+for (let i = 0; i < NUM_VERSES; i++) {
+	const verse = await fetchRandomVerse();
+
+	// Build a fake "solved in N guesses" scenario with some wrong guesses first
+	const correctBook = bibleBooks.find((b) => b.id === verse.bookId)!;
+	const wrongBook = bibleBooks.find((b) => b.id !== verse.bookId)!;
+	const guessCount = Math.floor(Math.random() * 5) + 1;
+	const guesses = [
+		...Array(guessCount - 1).fill(null).map(() => ({
+			book: wrongBook,
+			testamentMatch: wrongBook.testament === correctBook.testament,
+			sectionMatch: wrongBook.section === correctBook.section,
+			adjacent: Math.abs(wrongBook.order - correctBook.order) === 1,
+		})),
+		{ book: correctBook, testamentMatch: true, sectionMatch: true, adjacent: false },
+	];
+
+	const fakeStreak = Math.random() > 0.5 ? Math.floor(Math.random() * 14) + 2 : 0;
+
+	const shareText = generateShareText({
+		guesses,
+		correctBookId: verse.bookId,
+		dailyVerseDate: new Date().toISOString().slice(0, 10),
+		chapterCorrect: guessCount === 1 && Math.random() > 0.5,
+		isLoggedIn: Math.random() > 0.5,
+		streak: fakeStreak > 0 ? fakeStreak : undefined,
+		origin: 'https://bibdle.com',
+		verseText: verse.verseText,
+	});
+
+	console.log(`\n── Verse ${i + 1}: ${verse.reference} ──`);
+	console.log(`RAW: ${verse.verseText}`);
+	console.log('─'.repeat(40));
+	console.log(shareText);
+}

scripts/test-verse-snippets.ts

@@ -0,0 +1,10 @@
+import { fetchRandomVerse } from '../src/lib/server/bible-api';
+import { getVerseSnippet } from '../src/lib/utils/share';
+
+const NUM_VERSES = 10;
+
+for (let i = 0; i < NUM_VERSES; i++) {
+	const verse = await fetchRandomVerse();
+
+	console.log(getVerseSnippet(verse.verseText));
+}

src/app.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 		<script src="https://rybbit.snail.city/api/script.js" data-site-id="9abf0e81d024" defer></script>
+		<link rel="icon" href="/favicon.png" type="image/png" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/hooks.server.ts

@@ -32,4 +32,4 @@ export const handle: Handle = handleAuth;
 
 // Initialize embeddings on server start (runs once on module load)
 const verses = getAllNKJVVerses();
-await initializeEmbeddings(verses);
+// await initializeEmbeddings(verses);

src/lib/components/ActivityCalendar.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import Container from "$lib/components/Container.svelte";
+
+	interface Props {
+		completions: Array<{ date: string; guessCount: number }>;
+	}
+
+	let { completions }: Props = $props();
+
+	type CalendarCell = {
+		date: string;
+		dayNum: number;
+		played: boolean;
+		guessCount: number | null;
+	} | null;
+
+	type CalendarRow = {
+		cells: CalendarCell[];
+		monthLabel: string | null;
+	};
+
+	const MONTH_NAMES = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December",
+	];
+
+	function buildCalendar(
+		completionList: Array<{ date: string; guessCount: number }>,
+		localDate: string,
+	): CalendarRow[] {
+		const completionMap = new Map(
+			completionList.map((c) => [c.date, c.guessCount]),
+		);
+		const today = new Date(localDate + "T00:00:00Z");
+
+		const days: Array<{
+			date: string;
+			dayNum: number;
+			month: string;
+			dayOfWeek: number;
+			guessCount: number | null;
+		}> = [];
+		for (let i = 29; i >= 0; i--) {
+			const d = new Date(today);
+			d.setUTCDate(d.getUTCDate() - i);
+			const dateStr = d.toISOString().slice(0, 10);
+			days.push({
+				date: dateStr,
+				dayNum: d.getUTCDate(),
+				month: dateStr.slice(0, 7),
+				dayOfWeek: d.getUTCDay(),
+				guessCount: completionMap.get(dateStr) ?? null,
+			});
+		}
+
+		const rows: CalendarRow[] = [];
+		let currentRow: CalendarCell[] = [];
+		let currentMonth = "";
+		let firstRowOfMonth = true;
+
+		for (const day of days) {
+			if (day.month !== currentMonth) {
+				if (currentRow.length > 0) {
+					while (currentRow.length < 7) currentRow.push(null);
+					rows.push({ cells: currentRow, monthLabel: null });
+					currentRow = [];
+				}
+				for (let j = 0; j < day.dayOfWeek; j++) currentRow.push(null);
+				currentMonth = day.month;
+				firstRowOfMonth = true;
+			}
+
+			currentRow.push({
+				date: day.date,
+				dayNum: day.dayNum,
+				played: day.guessCount !== null,
+				guessCount: day.guessCount ?? null,
+			});
+
+			if (currentRow.length === 7) {
+				const [year, monthIdx] = currentMonth.split("-").map(Number);
+				const label = firstRowOfMonth
+					? `${MONTH_NAMES[monthIdx - 1]} ${year}`
+					: null;
+				rows.push({ cells: currentRow, monthLabel: label });
+				currentRow = [];
+				firstRowOfMonth = false;
+			}
+		}
+
+		if (currentRow.length > 0) {
+			while (currentRow.length < 7) currentRow.push(null);
+			const [year, monthIdx] = currentMonth.split("-").map(Number);
+			rows.push({
+				cells: currentRow,
+				monthLabel: firstRowOfMonth
+					? `${MONTH_NAMES[monthIdx - 1]} ${year}`
+					: null,
+			});
+		}
+
+		return rows;
+	}
+
+	function calendarColor(day: {
+		played: boolean;
+		guessCount: number | null;
+	}): string {
+		if (!day.played) return "bg-gray-800/60 text-gray-400";
+		const g = day.guessCount!;
+		if (g === 1) return "bg-emerald-300";
+		if (g <= 3) return "bg-emerald-500";
+		if (g <= 5) return "bg-amber-400";
+		if (g <= 7) return "bg-orange-500";
+		return "bg-red-600";
+	}
+
+	let calendarRows = $state<CalendarRow[]>([]);
+
+	onMount(() => {
+		const localDate = new Date().toLocaleDateString("en-CA");
+		calendarRows = buildCalendar(completions, localDate);
+	});
+</script>
+
+<Container class="p-4 md:p-6 w-full">
+	<h2 class="text-xl font-bold text-gray-100 mb-3 w-full text-left">
+		Activity
+	</h2>
+	<!-- Day-of-week headers -->
+	<div class="flex gap-1 mb-1">
+		{#each ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as d (d)}
+			<div
+				class="w-10 h-5 text-center text-[10px] text-gray-500 font-medium shrink-0"
+			>
+				{d}
+			</div>
+		{/each}
+	</div>
+	<!-- Calendar rows -->
+	{#each calendarRows as row, rowIdx (rowIdx)}
+		{#if row.monthLabel}
+			<div class="text-xs text-gray-400 font-semibold mt-3 mb-1">
+				{row.monthLabel}
+			</div>
+		{/if}
+		<div class="flex gap-1 mb-1">
+			{#each row.cells as cell, cellIdx (cellIdx)}
+				{#if cell}
+					<div
+						class="w-10 h-10 rounded flex items-center justify-center text-sm font-semibold shrink-0 {calendarColor(
+							cell,
+						)}"
+						title={cell.played
+							? `${cell.date}: ${cell.guessCount} guess${cell.guessCount === 1 ? "" : "es"}`
+							: cell.date}
+					>
+						{cell.dayNum}
+					</div>
+				{:else}
+					<div class="w-10 h-10 shrink-0"></div>
+				{/if}
+			{/each}
+		</div>
+	{/each}
+	<!-- Legend -->
+	<div class="flex flex-wrap gap-3 mt-3 text-xs text-gray-400">
+		<span class="flex items-center gap-1">
+			<span class="inline-block w-3 h-3 rounded-sm bg-emerald-300"></span>
+			1 guess
+		</span>
+		<span class="flex items-center gap-1">
+			<span class="inline-block w-3 h-3 rounded-sm bg-emerald-500"></span>
+			2–3 guesses
+		</span>
+		<span class="flex items-center gap-1">
+			<span class="inline-block w-3 h-3 rounded-sm bg-amber-400"></span>
+			4–5 guesses
+		</span>
+		<span class="flex items-center gap-1">
+			<span class="inline-block w-3 h-3 rounded-sm bg-orange-500"></span>
+			6–7 guesses
+		</span>
+		<span class="flex items-center gap-1">
+			<span class="inline-block w-3 h-3 rounded-sm bg-red-600"></span>
+			8+ guesses
+		</span>
+	</div>
+</Container>

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"/>
@@ -104,6 +105,23 @@
 				</button>
 			</form>
 
+			<form method="POST" action="/auth/google">
+				<input type="hidden" name="anonymousId" value={anonymousId} />
+				<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 mt-3"
+					data-umami-event="Sign in with Google"
+				>
+					<svg class="w-5 h-5" viewBox="0 0 24 24">
+						<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+						<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+						<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
+						<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+					</svg>
+					Sign in with Google
+				</button>
+			</form>
+
 			<div class="flex items-center my-4">
 				<div class="flex-1 border-t border-white/20"></div>
 				<span class="px-3 text-sm text-white/60">or</span>

src/lib/components/ChapterGuess.svelte

@@ -167,7 +167,7 @@
 </script>
 
 <Container
-	class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 text-gray-800 shadow-md"
+	class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 dark:from-amber-900/40 dark:to-yellow-900/30 text-gray-800 dark:text-gray-100 shadow-md"
 >
 	<div class="text-center">
 		<p class="font-bold mb-3 text-lg sm:text-xl">
@@ -193,8 +193,8 @@
 							? isCorrect
 								? "bg-green-500 text-white border-green-600 shadow-lg"
 								: "bg-red-400 text-white border-red-500"
-							: "bg-white/30 text-gray-400 border-gray-300 opacity-40"
-					: "bg-white/80 hover:bg-white text-gray-800 border-gray-300 hover:border-amber-400 hover:shadow-md cursor-pointer"
+							: "bg-white/30 dark:bg-white/10 text-gray-400 border-gray-300 dark:border-gray-600 opacity-40"
+					: "bg-white/80 dark:bg-white/10 hover:bg-white dark:hover:bg-white/20 text-gray-800 dark:text-gray-100 border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500 hover:shadow-md cursor-pointer"
 			}
           `}
 				>

src/lib/components/CollapsibleTable.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	interface Header {
+		label: string;
+		align?: 'left' | 'right';
+		width?: string;
+	}
+
+	interface Mode {
+		value: string;
+		label: string;
+	}
+
+	interface Props {
+		rows: T[];
+		headers: Header[];
+		row: Snippet<[item: T]>;
+		empty?: Snippet;
+		initialRows?: number;
+		modes?: Mode[];
+		mode?: string;
+	}
+
+	let {
+		rows,
+		headers,
+		row: rowSnippet,
+		empty,
+		initialRows = 3,
+		modes,
+		mode = $bindable(modes && modes.length > 0 ? modes[0].value : undefined),
+	}: Props = $props();
+
+	let expanded = $state(false);
+
+	// Reset expanded when mode changes (e.g. switching Rolling 30d ↔ Calendar)
+	$effect(() => {
+		mode;
+		expanded = false;
+	});
+
+	function toggleExpanded() {
+		expanded = !expanded;
+	}
+
+	const displayedRows = $derived(expanded ? rows : rows.slice(0, initialRows));
+</script>
+
+{#if modes && modes.length > 1}
+	<div class="flex gap-1 bg-white/5 rounded-lg p-1 w-fit ml-auto mb-3">
+		{#each modes as m (m.value)}
+			{@const active = mode === m.value}
+			<button
+				onclick={() => (mode = m.value)}
+				class="px-3 py-1 text-xs rounded-md transition-colors {active ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
+			>
+				{m.label}
+			</button>
+		{/each}
+	</div>
+{/if}
+
+{#if rows.length === 0}
+	{#if empty}
+		{@render empty()}
+	{:else}
+		<p class="text-gray-400 text-sm px-4 py-6">Not enough data yet.</p>
+	{/if}
+{: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">
+					{#each headers as header (header.label)}
+						<th
+							class="{header.align === 'right' ? 'text-right' : 'text-left'} px-4 py-3{header.width ? ' ' + header.width : ''}"
+						>
+							{header.label}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each displayedRows as item, i (i)}
+					<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+						{@render rowSnippet(item)}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+
+	{#if rows.length > initialRows}
+		<button
+			onclick={toggleExpanded}
+			class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
+		>
+			<span>{expanded ? '▲ Show less' : '▼ Show more'}</span>
+		</button>
+	{/if}
+{/if}

src/lib/components/Container.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <div
-  class="inline-flex flex-col items-center bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 shadow-sm {className}"
+  class="inline-flex flex-col items-center bg-white/10 dark:bg-white/5 backdrop-blur-sm rounded-2xl border border-white/20 dark:border-white/10 shadow-sm {className}"
 >
   {@render children()}
 </div>

src/lib/components/CountdownTimer.svelte

@@ -3,6 +3,7 @@
 
 	let timeUntilNext = $state("");
 	let newVerseReady = $state(false);
+	let showEncouragement = $state(false);
 	let intervalId: number | null = null;
 	let targetTime = 0;
 
@@ -41,6 +42,13 @@
 		initTarget();
 		updateTimer();
 		intervalId = window.setInterval(updateTimer, 1000);
+
+		const winCount = Object.keys(localStorage).filter(
+			(k) =>
+				k.startsWith("bibdle-win-tracked-") &&
+				localStorage.getItem(k) === "true",
+		).length;
+		showEncouragement = winCount < 3;
 	});
 
 	onDestroy(() => {
@@ -50,33 +58,40 @@
 	});
 </script>
 
-<div class="w-full">
+<div class="w-full flex flex-col flex-1">
 	<div
-		class="flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full"
+		class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm w-full flex-1"
 	>
 		{#if newVerseReady}
 			<p
-				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
 			>
 				Next Verse In
 			</p>
 			<p class="text-4xl font-triodion font-black text-gray-800">Now</p>
 			<p
-				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-2"
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mt-2"
 			>
 				(refresh page to see the new verse)
 			</p>
 		{:else}
 			<p
-				class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
+				class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
 			>
 				Next Verse In
 			</p>
 			<p
-				class="text-4xl font-triodion font-black text-gray-800 tabular-nums"
+				class="text-4xl font-triodion font-black text-gray-800 dark:text-gray-100 tabular-nums whitespace-nowrap"
 			>
 				{timeUntilNext}
 			</p>
+			{#if showEncouragement}
+				<p
+					class="text-xs text-center uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold px-4 mt-3"
+				>
+					Come back tomorrow for a new verse!
+				</p>
+			{/if}
 		{/if}
 	</div>
 </div>

src/lib/components/Credits.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
-	import BlueskyLogo from "$lib/assets/Bluesky_Logo.svg";
-	import TwitterLogo from "$lib/assets/Twitter_Logo.svg";
+	import SocialLinks from "$lib/components/SocialLinks.svelte";
 </script>
 
 <div class="text-center" in:fade={{ delay: 1500, duration: 1000 }}>
 	<div
-		class="flex flex-col items-center gap-2 bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
+		class="flex flex-col items-center gap-2 bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm"
 	>
-		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+		<p
+			class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-300 font-bold"
+		>
 			A project by George Powell & Silent Summit Co.
 		</p>
 		<!-- <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
@@ -26,56 +27,8 @@
 		<!-- Bluesky Social Media Button -->
 	</div>
 
-	<div class="mt-8 flex items-center justify-center gap-6">
-		<a
-			href="https://bsky.app/profile/snail.city"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="inline-flex hover:opacity-80 transition-opacity"
-			aria-label="Follow on Bluesky"
-			data-umami-event="Bluesky clicked"
-			onclick={() => (window as any).rybbit?.event("Bluesky clicked")}
-		>
-			<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
-		</a>
-
-		<div class="w-0.5 h-8 bg-gray-400"></div>
-
-		<a
-			href="https://x.com/pupperpowell"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="inline-flex hover:opacity-80 transition-opacity"
-			aria-label="Follow on Twitter"
-			data-umami-event="Twitter clicked"
-			onclick={() => (window as any).rybbit?.event("Twitter clicked")}
-		>
-			<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
-		</a>
-
-		<div class="w-0.5 h-8 bg-gray-400"></div>
-
-		<a
-			href="mailto:george+bibdle@silentsummit.co"
-			class="inline-flex hover:opacity-80 transition-opacity"
-			aria-label="Send email"
-			data-umami-event="Email clicked"
-			onclick={() => (window as any).rybbit?.event("Email clicked")}
-		>
-			<svg
-				class="w-8 h-8 text-gray-700"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-				></path>
-			</svg>
-		</a>
+	<div class="mt-8">
+		<SocialLinks />
 	</div>
+
 </div>

src/lib/components/DevButtons.svelte

@@ -1,19 +1,32 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
+	import { enhance } from "$app/forms";
 	import Button from "$lib/components/Button.svelte";
 
-	let { anonymousId }: { anonymousId: string | null } = $props();
+	type User = {
+		id: string;
+		email?: string | null;
+		firstName?: string | null;
+		lastName?: string | null;
+		appleId?: string | null;
+	} | null;
+
+	let {
+		anonymousId,
+		user,
+		onSignIn,
+	}: { anonymousId: string | null; user: User; onSignIn: () => void } = $props();
 
 	let seeding = $state(false);
 
-	async function seedHistory() {
+	async function seedHistory(days: number = 10) {
 		if (!browser || !anonymousId || seeding) return;
 		seeding = true;
 		try {
 			const response = await fetch("/api/dev/seed-history", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ anonymousId })
+				body: JSON.stringify({ anonymousId, days })
 			});
 			const result = await response.json();
 			alert(
@@ -46,6 +59,41 @@
 	<div class="border-t-2 border-gray-400"></div>
 </div>
 <div class="flex flex-col gap-3">
+	<a
+		href="/stats?{user
+			? `userId=${user.id}`
+			: `anonymousId=${anonymousId}`}&tz={encodeURIComponent(
+			Intl.DateTimeFormat().resolvedOptions().timeZone,
+		)}"
+		class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
+	>
+		📊 View Stats
+	</a>
+	<a
+		href="/progress"
+		class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors text-sm font-medium shadow-md"
+	>
+		📈 View Progress
+	</a>
+
+	{#if user}
+		<form method="POST" action="/auth/logout" use:enhance class="w-full">
+			<button
+				type="submit"
+				class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
+			>
+				🚪 Sign Out
+			</button>
+		</form>
+	{:else}
+		<button
+			onclick={onSignIn}
+			class="inline-flex items-center justify-center w-full px-4 py-4 md:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
+		>
+			🔐 Sign In
+		</button>
+	{/if}
+
 	<div class="flex flex-col md:flex-row gap-3 md:gap-2">
 		<Button
 			variant="secondary"
@@ -113,7 +161,15 @@
 
 	<Button
 		variant="secondary"
-		onclick={seedHistory}
+		onclick={() => seedHistory(1)}
+		disabled={seeding}
+		class="w-full py-4 md:py-2"
+	>
+		{seeding ? "Seeding..." : "Add 1 Day of History"}
+	</Button>
+	<Button
+		variant="secondary"
+		onclick={() => seedHistory(10)}
 		disabled={seeding}
 		class="w-full py-4 md:py-2"
 	>

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 text-gray-800 dark:text-gray-100 mb-6 px-4"
+	style="transition: opacity 0.3s ease; opacity: {visible ? 1 : 0};"
+>
+	{promptText}
+</p>

src/lib/components/GuessesTable.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { bibleBooks } from "$lib/types/bible";
 	import { getFirstLetter, type Guess } from "$lib/utils/game";
-	import Container from "./Container.svelte";
 
 	let {
 		guesses,
 		correctBookId,
-	}: { guesses: Guess[]; correctBookId: string } = $props();
+		minimized = false,
+	}: { guesses: Guess[]; correctBookId: string; minimized?: boolean } = $props();
 
 	let hasGuesses = $derived(guesses.length > 0);
+	let showMinimized = $derived(minimized);
+	let expanded = $state(false);
+
+	$effect(() => {
+		if (!minimized) expanded = false;
+	});
 
 	function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
 		if (isCorrect) return "bg-green-500 border-green-600";
@@ -16,6 +22,13 @@
 		return "bg-red-500 border-red-600";
 	}
 
+	function getBookBoxStyle(guess: Guess): string {
+		if (guess.book.id === correctBookId) {
+			return "background-color: #22c55e; border-color: #16a34a;";
+		}
+		return "background-color: #ef4444; border-color: #dc2626;";
+	}
+
 	function getBoxContent(
 		guess: Guess,
 		column: "book" | "firstLetter" | "testament" | "section",
@@ -64,69 +77,63 @@
 	}
 </script>
 
-{#if !hasGuesses}
-	<Container class="p-6 text-center">
-		<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
-			Instructions
-		</h2>
-		<p class="text-gray-700 leading-relaxed italic">
-			Guess what book of the bible you think the verse is from. You will
-			get clues to help you after each guess.
-		</p>
-	</Container>
-{:else}
+{#if hasGuesses}
 	<div class="space-y-3">
 		<!-- Column Headers -->
 		<div
-			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
+			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400 dark:border-gray-600"
 		>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				Testament
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				Section
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				First Letter
 			</div>
 			<div
-				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
+				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
 			>
 				Book
 			</div>
 		</div>
 
-		{#each guesses as guess, rowIndex (guess.book.id)}
+		{#if showMinimized && !expanded}
+			<!-- Minimized view: first guess, divider, last two guesses -->
+
+			<!-- First guess (no animation since post-win) -->
+			{@const firstGuess = guesses[0]}
 			<div class="flex gap-2 justify-center">
 				<!-- Testament Column -->
 				<div
 					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
-						guess.testamentMatch,
+						firstGuess.testamentMatch,
 					)}"
-					style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
+					style="animation: none; opacity: 1; transform: none;"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-sm"
-						>{getBoxContent(guess, "testament")}</span
+						>{getBoxContent(firstGuess, "testament")}</span
 					>
 				</div>
 
 				<!-- Section Column -->
 				<div
 					class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
-						guess.sectionMatch,
-						guess.adjacent,
+						firstGuess.sectionMatch,
+						firstGuess.adjacent,
 					)}"
-					style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
+					style="animation: none; opacity: 1; transform: none;"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-sm"
-						>{getBoxContent(guess, "section")}
-						{#if guess.adjacent}
+						>{getBoxContent(firstGuess, "section")}
+						{#if firstGuess.adjacent}
 							‼️
 						{/if}
 					</span>
@@ -135,30 +142,173 @@
 				<!-- First Letter Column -->
 				<div
 					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
-						guess.firstLetterMatch,
+						firstGuess.firstLetterMatch,
 					)}"
-					style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
+					style="animation: none; opacity: 1; transform: none;"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-sm"
-						>{getBoxContent(guess, "firstLetter")}</span
+						>{getBoxContent(firstGuess, "firstLetter")}</span
 					>
 				</div>
 
 				<!-- 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: none; opacity: 1; transform: none; {getBookBoxStyle(firstGuess)}"
 				>
 					<span class="text-center leading-tight px-1 text-shadow-lg"
-						>{getBoxContent(guess, "book")}</span
+						>{getBoxContent(firstGuess, "book")}</span
 					>
 				</div>
 			</div>
-		{/each}
+
+			<!-- Expand/collapse divider -->
+			<button
+				type="button"
+				class="w-full flex items-center gap-3 py-1 cursor-pointer group"
+				onclick={() => (expanded = true)}
+			>
+				<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
+				<span class="text-xs font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors whitespace-nowrap select-none">
+					expand guesses ▼
+				</span>
+				<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
+			</button>
+
+			<!-- Last two guesses (no animation since post-win) -->
+			{#each guesses.slice(-2) as guess (guess.book.id)}
+				<div class="flex gap-2 justify-center">
+					<!-- Testament Column -->
+					<div
+						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+							guess.testamentMatch,
+						)}"
+						style="animation: none; opacity: 1; transform: none;"
+					>
+						<span class="text-center leading-tight px-1 text-shadow-sm"
+							>{getBoxContent(guess, "testament")}</span
+						>
+					</div>
+
+					<!-- Section Column -->
+					<div
+						class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+							guess.sectionMatch,
+							guess.adjacent,
+						)}"
+						style="animation: none; opacity: 1; transform: none;"
+					>
+						<span class="text-center leading-tight px-1 text-shadow-sm"
+							>{getBoxContent(guess, "section")}
+							{#if guess.adjacent}
+								‼️
+							{/if}
+						</span>
+					</div>
+
+					<!-- First Letter Column -->
+					<div
+						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+							guess.firstLetterMatch,
+						)}"
+						style="animation: none; opacity: 1; transform: none;"
+					>
+						<span class="text-center leading-tight px-1 text-shadow-sm"
+							>{getBoxContent(guess, "firstLetter")}</span
+						>
+					</div>
+
+					<!-- Book Column -->
+					<div
+						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: none; opacity: 1; transform: none; {getBookBoxStyle(guess)}"
+					>
+						<span class="text-center leading-tight px-1 text-shadow-lg"
+							>{getBoxContent(guess, "book")}</span
+						>
+					</div>
+				</div>
+			{/each}
+		{:else}
+			<!-- Full view: all guesses -->
+
+			{#each guesses as guess, rowIndex (guess.book.id)}
+				<div class="flex gap-2 justify-center">
+					<!-- Testament Column -->
+					<div
+						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+							guess.testamentMatch,
+						)}"
+						style={showMinimized
+							? "animation: none; opacity: 1; transform: none;"
+							: `animation-delay: ${rowIndex * 1000 + 0 * 500}ms`}
+					>
+						<span class="text-center leading-tight px-1 text-shadow-sm"
+							>{getBoxContent(guess, "testament")}</span
+						>
+					</div>
+
+					<!-- Section Column -->
+					<div
+						class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+							guess.sectionMatch,
+							guess.adjacent,
+						)}"
+						style={showMinimized
+							? "animation: none; opacity: 1; transform: none;"
+							: `animation-delay: ${rowIndex * 1000 + 1 * 500}ms`}
+					>
+						<span class="text-center leading-tight px-1 text-shadow-sm"
+							>{getBoxContent(guess, "section")}
+							{#if guess.adjacent}
+								‼️
+							{/if}
+						</span>
+					</div>
+
+					<!-- First Letter Column -->
+					<div
+						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
+							guess.firstLetterMatch,
+						)}"
+						style={showMinimized
+							? "animation: none; opacity: 1; transform: none;"
+							: `animation-delay: ${rowIndex * 1000 + 2 * 500}ms`}
+					>
+						<span class="text-center leading-tight px-1 text-shadow-sm"
+							>{getBoxContent(guess, "firstLetter")}</span
+						>
+					</div>
+
+					<!-- Book Column -->
+					<div
+						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={showMinimized
+							? `animation: none; opacity: 1; transform: none; ${getBookBoxStyle(guess)}`
+							: `animation-delay: ${rowIndex * 1000 + 3 * 500}ms; ${getBookBoxStyle(guess)}`}
+					>
+						<span class="text-center leading-tight px-1 text-shadow-lg"
+							>{getBoxContent(guess, "book")}</span
+						>
+					</div>
+				</div>
+				{#if showMinimized && expanded && rowIndex === 0}
+					<!-- Collapse divider shown right below the final (correct) guess -->
+					<button
+						type="button"
+						class="w-full flex items-center gap-3 py-1 cursor-pointer group"
+						onclick={() => (expanded = false)}
+					>
+						<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
+						<span class="text-xs font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors whitespace-nowrap select-none">
+							collapse guesses ▲
+						</span>
+						<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
+					</button>
+				{/if}
+			{/each}
+		{/if}
 	</div>
-	<!-- </div> -->
 {/if}
 
 <style>

src/lib/components/ProgressStatCard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Container from "$lib/components/Container.svelte";
+
+	interface Props {
+		emoji: string;
+		value: string;
+		label: string;
+		colorClass: string;
+		suffix?: string;
+	}
+
+	let { emoji, value, label, colorClass, suffix }: Props = $props();
+</script>
+
+<Container class="p-4 md:p-6 w-full">
+	<div class="text-center w-full">
+		<div class="text-2xl md:text-3xl mb-1">{emoji}</div>
+		<div class="text-2xl md:text-3xl font-bold {colorClass} mb-1">
+			{value}{#if suffix}<span class="text-base font-normal text-gray-400"
+				>&nbsp;{suffix}</span
+			>{/if}
+		</div>
+		<div class="text-xs md:text-sm text-gray-300 font-medium">{label}</div>
+	</div>
+</Container>

src/lib/components/SearchInput.svelte

@@ -1,313 +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}
-  <div
-    class="mb-3 flex items-center gap-2 px-4 py-2 rounded-full text-xs font-medium border w-fit transition-all duration-300
-      {bannerIsIndigo
-      ? 'bg-indigo-50 border-indigo-200 text-indigo-700'
-      : 'bg-amber-50 border-amber-200 text-amber-700'}"
-    role="status"
-    aria-live="polite"
-  >
-    <span aria-hidden="true" class="text-[10px] leading-none">✦</span>
-    {#if bannerIsIndigo}
-      Testament &amp; section groups now visible
-    {:else}
-      Old &amp; New Testament groups now visible
-    {/if}
-  </div>
+	<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 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-200 transition-all bg-white"
-      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 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 border border-gray-300 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 {guessedIds.has(book.id)
-                  ? 'line-through text-gray-400'
-                  : ''}"
-              >
-                {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 border-b border-gray-100"
-            >
-              <span
-                class="text-xs font-semibold uppercase tracking-wider text-gray-400"
-              >
-                {group.label}
-              </span>
-              <div class="flex-1 h-px bg-gray-200"></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 last:border-b-0 flex items-center transition-all
+								? '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 hover:text-blue-700'}"
-                    onclick={() => submitGuess(book.id)}
-                    tabindex={guessedIds.has(book.id) ? -1 : 0}
-                  >
-                    <span
-                      class="font-semibold {guessedIds.has(book.id)
-                        ? 'line-through text-gray-400'
-                        : ''}"
-                    >
-                      {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 border-b border-gray-100"
-              >
-                <span
-                  class="text-xs font-bold uppercase tracking-wider text-gray-500"
-                >
-                  {group.testamentLabel}
-                </span>
-                <div class="flex-1 h-px bg-gray-200"></div>
-              </div>
-            {/if}
-            <div
-              class="px-7 py-1.5 flex items-center gap-3 bg-gray-50/50 border-b border-gray-100"
-            >
-              <span
-                class="text-[11px] font-medium uppercase tracking-wider text-gray-400"
-              >
-                {group.section}
-              </span>
-              <div class="flex-1 h-px bg-gray-100"></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 last:border-b-0 flex items-center transition-all
+											? '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 hover:text-blue-700'}"
-                    onclick={() => submitGuess(book.id)}
-                    tabindex={guessedIds.has(book.id) ? -1 : 0}
-                  >
-                    <span
-                      class="font-semibold {guessedIds.has(book.id)
-                        ? 'line-through text-gray-400'
-                        : ''}"
-                    >
-                      {book.name}
-                    </span>
-                  </button>
-                </li>
-              {/each}
-            </ul>
-          </li>
-        {/each}
-      {/if}
-    </ul>
-  {:else if searchQuery}
-    <p class="mt-4 text-center text-gray-500 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>

src/lib/components/SocialLinks.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import BlueskyLogo from "$lib/assets/Bluesky_Logo.svg";
+	import TwitterLogo from "$lib/assets/Twitter_Logo.svg";
+</script>
+
+<div class="flex items-center justify-center gap-6">
+	<a
+		href="https://bsky.app/profile/snail.city"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="inline-flex hover:opacity-80 transition-opacity"
+		aria-label="Follow on Bluesky"
+		data-umami-event="Bluesky clicked"
+		onclick={() => (window as any).rybbit?.event("Bluesky clicked")}
+	>
+		<img src={BlueskyLogo} alt="Bluesky" class="w-8 h-8" />
+	</a>
+
+	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div>
+
+	<!-- <a
+		href="https://x.com/pupperpowell"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="inline-flex hover:opacity-80 transition-opacity"
+		aria-label="Follow on Twitter"
+		data-umami-event="Twitter clicked"
+		onclick={() => (window as any).rybbit?.event("Twitter clicked")}
+	>
+		<img src={TwitterLogo} alt="Twitter" class="w-8 h-8" />
+	</a>
+
+	<div class="w-0.5 h-8 bg-gray-400 dark:bg-gray-600"></div> -->
+
+	<a
+		href="mailto:george+bibdle@silentsummit.co"
+		class="inline-flex hover:opacity-80 transition-opacity"
+		aria-label="Send email"
+		data-umami-event="Email clicked"
+		onclick={() => (window as any).rybbit?.event("Email clicked")}
+	>
+		<svg
+			class="w-8 h-8 text-gray-700 dark:text-gray-300"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+			></path>
+		</svg>
+	</a>
+</div>

src/lib/components/StreakCounter.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	let {
+		streak,
+		streakPercentile = null,
+	}: {
+		streak: number;
+		streakPercentile?: number | null;
+	} = $props();
+</script>
+
+<div
+	class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm flex-1 text-center"
+>
+	<p
+		class="text-5xl font-triodion font-black text-orange-500 leading-none tabular-nums"
+	>
+		{streak}
+	</p>
+	<p
+		class="text-xs uppercase justify-center tracking-widest text-gray-500 dark:text-gray-200 font-triodion font-bold py-2 leading-tight"
+	>
+		day{streak === 1 ? "" : "s"} in a row
+	</p>
+	{#if streakPercentile !== null && streakPercentile <= 50}
+		<p
+			class="text-xs text-black dark:text-gray-200 w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 dark:border-t-stone-600 pt-2"
+		>
+			Top {streakPercentile}%
+		</p>
+	{/if}
+</div>

src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	let isDarkMode = $state(false);
+
+	onMount(() => {
+		const stored = localStorage.getItem('bibdle-theme');
+		if (stored === 'dark') {
+			isDarkMode = true;
+		} else if (stored === 'light') {
+			isDarkMode = false;
+		} else {
+			isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		}
+	});
+
+	$effect(() => {
+		if (isDarkMode) {
+			document.documentElement.classList.add('dark');
+			document.documentElement.classList.remove('light');
+			localStorage.setItem('bibdle-theme', 'dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+			document.documentElement.classList.add('light');
+			localStorage.setItem('bibdle-theme', 'light');
+		}
+	});
+
+	function toggleTheme() {
+		isDarkMode = !isDarkMode;
+	}
+</script>
+
+{#if browser}
+	<button
+		onclick={toggleTheme}
+		aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+		class="flex items-center gap-2 p-1 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer"
+	>
+		{#if isDarkMode}
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<circle cx="12" cy="12" r="4"/>
+				<path d="M12 2v2"/>
+				<path d="M12 20v2"/>
+				<path d="m4.93 4.93 1.41 1.41"/>
+				<path d="m17.66 17.66 1.41 1.41"/>
+				<path d="M2 12h2"/>
+				<path d="M20 12h2"/>
+				<path d="m6.34 17.66-1.41 1.41"/>
+				<path d="m19.07 4.93-1.41 1.41"/>
+			</svg>
+		{:else}
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
+			</svg>
+		{/if}
+		<span class="text-xs uppercase tracking-widest">
+			{isDarkMode ? 'Light mode' : 'Dark mode'}
+		</span>
+	</button>
+{/if}

src/lib/components/VerseDisplay.svelte

@@ -63,9 +63,11 @@
 	}
 </script>
 
-<Container class="w-full p-8 sm:p-12 bg-white/70 overflow-hidden">
+<Container
+	class="w-full p-8 sm:p-12 bg-white/70 dark:bg-black/30 overflow-hidden"
+>
 	<blockquote
-		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
+		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 dark:text-gray-200 text-center"
 	>
 		{displayVerseText}
 	</blockquote>
@@ -76,23 +78,10 @@
 		{#if showReference}
 			<p
 				transition:fade={{ duration: 400 }}
-				class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+				class="text-center text-lg! big-text text-green-600! dark:text-green-400! font-bold mt-8 bg-white/70 dark:bg-black/50 rounded-xl px-4 py-2"
 			>
 				{displayReference}
 			</p>
-			<div
-				transition:fade={{ duration: 300 }}
-				class="flex justify-center mt-3"
-			>
-				<button
-					onclick={copyVerse}
-					data-umami-event="Copy Verse"
-					class="flex items-center gap-1.5 px-3 py-1.5 text-xs big-text text-gray-600 bg-white/50 hover:bg-white/70 border border-gray-300 rounded-lg transition-colors cursor-pointer"
-				>
-					{copied ? "✅" : "📋"}
-					{copied ? "Copied!" : "Copy verse to clipboard"}
-				</button>
-			</div>
 		{/if}
 	</div>
 </Container>

src/lib/components/WinScreen.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import { fade, fly } from "svelte/transition";
 	import { getBookById, toOrdinal } from "$lib/utils/game";
+	import {
+		getVerseSnippet,
+		shareResult,
+		copyToClipboard as clipboardCopy,
+	} from "$lib/utils/share";
 	import Container from "./Container.svelte";
 	import CountdownTimer from "./CountdownTimer.svelte";
+	import StreakCounter from "./StreakCounter.svelte";
 	import ChapterGuess from "./ChapterGuess.svelte";
 
 	interface StatsData {
@@ -30,8 +36,11 @@
 		reference,
 		onChapterGuessCompleted,
 		shareText,
+		verseText,
 		streak = 0,
 		streakPercentile = null,
+		isLoggedIn = false,
+		anonymousId = "",
 	}: {
 		statsData: StatsData | null;
 		correctBookId: string;
@@ -43,8 +52,11 @@
 		reference: string;
 		onChapterGuessCompleted: () => void;
 		shareText: string;
+		verseText: string;
 		streak?: number;
 		streakPercentile?: number | null;
+		isLoggedIn?: boolean;
+		anonymousId?: string;
 	} = $props();
 
 	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
@@ -53,6 +65,23 @@
 	);
 	let copySuccess = $state(false);
 	let bubbleCopied = $state(false);
+	let copyTracked = $state(false);
+	let showSnippetOption = $state(false);
+	let includeSnippet = $state(false);
+
+	let effectiveShareText = $derived(
+		includeSnippet
+			? (() => {
+					const snippet = getVerseSnippet(verseText);
+					const lines = shareText.split("\n");
+					return [
+						...lines.slice(0, -1),
+						snippet,
+						lines[lines.length - 1],
+					].join("\n");
+				})()
+			: shareText,
+	);
 
 	// List of congratulations messages with weights
 	const congratulationsMessages: WeightedMessage[] = [
@@ -97,37 +126,27 @@
 
 <div class="flex flex-col gap-6">
 	<Container
-		class="w-full px-2 sm:px-4 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
+		class="w-full px-4 sm:px-6 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 dark:text-gray-100 shadow-2xl text-center fade-in"
 	>
-		<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
-			{congratulationsMessage} The verse is from<br />
-			<span class="font-black text-3xl md:text-4xl">{bookName}</span>.
-		</p>
-		<p class="text-lg sm:text-xl md:text-2xl mt-2">
-			You guessed correctly after {guessCount}
-			{guessCount === 1 ? "guess" : "guesses"}.
-		</p>
-
-		{#if streak > 1}
-			<div class="flex flex-col gap-4 my-4">
-				<p class="big-text text-orange-500! text-lg!">
-					🔥 {streak} days in a row!
+		<div class="flex flex-col gap-3">
+			<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
+				{congratulationsMessage} The verse is from
+				<span class="font-black font-triodion text-3xl md:text-4xl"
+					>{bookName}</span
+				>.
+			</p>
+			<p class="text-lg sm:text-xl md:text-2xl">
+				You guessed correctly after {guessCount}
+				{guessCount === 1 ? "guess" : "guesses"}.
+			</p>
+			<!-- {#if streak >= 7}
+				<p
+					class="italic tracking-wider px-8 font-semibold text-gray-500"
+				>
+					Thank you for making BIBDLE part of your daily routine!
 				</p>
-				{#if streak >= 7}
-					<p class="font-black text-lg font-triodion">
-						Thank you for making Bibdle part of your daily routine!
-					</p>
-				{/if}
-				{#if streakPercentile !== null}
-					<p class="text-sm text-gray-700 font-triodion">
-						{streakPercentile <= 50
-							? "Only "
-							: ""}{streakPercentile}% of players have a streak of {streak}
-						or greater.
-					</p>
-				{/if}
-			</div>
-		{/if}
+			{/if} -->
+		</div>
 	</Container>
 
 	<!-- S++ Bonus Challenge for first try -->
@@ -139,12 +158,21 @@
 		/>
 	{/if}
 
-	<CountdownTimer />
+	<div class="flex flex-row gap-3 items-stretch w-full">
+		<div class="flex-2 min-w-0 flex flex-col">
+			<CountdownTimer />
+		</div>
+		{#if streak > 0}
+			<div class="flex-1 min-w-0 flex flex-col">
+				<StreakCounter {streak} {streakPercentile} />
+			</div>
+		{/if}
+	</div>
 
 	<!-- Statistics Display -->
 	{#if statsData}
 		<Container
-			class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+			class="w-full p-4 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
 		>
 			<div
 				class="grid grid-cols-3 gap-4 gap-x-8 text-center"
@@ -153,7 +181,7 @@
 				<!-- Solve Rank Column -->
 				<div class="flex flex-col">
 					<div
-						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
 					>
 						#{statsData.solveRank}
 					</div>
@@ -166,7 +194,7 @@
 				<!-- Guess Rank Column -->
 				<div class="flex flex-col">
 					<div
-						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
 					>
 						{toOrdinal(statsData.guessRank)}
 					</div>
@@ -188,7 +216,7 @@
 				<!-- Average Column -->
 				<div class="flex flex-col">
 					<div
-						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 dark:border-gray-600 pb-2"
 					>
 						{statsData.averageGuesses}
 					</div>
@@ -202,14 +230,16 @@
 		</Container>
 	{:else if !statsSubmitted}
 		<Container
-			class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+			class="w-full p-6 bg-white/50 dark:bg-black/30 backdrop-blur-sm text-gray-800 dark:text-gray-100 shadow-lg text-center"
 		>
 			<div class="text-sm opacity-80">Submitting stats...</div>
 		</Container>
 	{/if}
 
 	<div class="share-card" in:fly={{ y: 40, duration: 400, delay: 600 }}>
-		<div class="big-text font-black! text-center">Share your result</div>
+		<div class="big-text font-black! text-center text-gray-300!">
+			Share your result
+		</div>
 		<div class="chat-window">
 			<!-- Received bubble: primary action (share / copy) -->
 			<div class="bubble-wrapper received-wrapper">
@@ -223,10 +253,15 @@
 					onclick={() => {
 						if (hasWebShare) {
 							(window as any).rybbit?.event("Share");
-							handleShare();
+							shareResult(effectiveShareText);
 						} else {
-							(window as any).rybbit?.event("Copy to Clipboard");
-							copyToClipboard();
+							if (!copyTracked) {
+								(window as any).rybbit?.event(
+									"Copy to Clipboard",
+								);
+								copyTracked = true;
+							}
+							clipboardCopy(effectiveShareText);
 							copySuccess = true;
 							setTimeout(() => {
 								copySuccess = false;
@@ -251,13 +286,17 @@
 					aria-label="Copy to clipboard"
 					data-umami-event="Copy to Clipboard"
 					onclick={() => {
-						(window as any).rybbit?.event("Copy to Clipboard");
-						copyToClipboard();
+						if (!copyTracked) {
+							(window as any).rybbit?.event("Copy to Clipboard");
+							copyTracked = true;
+						}
+						clipboardCopy(effectiveShareText);
+						showSnippetOption = true;
 						bubbleCopied = true;
 						setTimeout(() => {
 							bubbleCopied = false;
 						}, 2000);
-					}}>{shareText}</button
+					}}>{effectiveShareText}</button
 				>
 				{#if hasWebShare}
 					<span class="copy-hint"
@@ -270,7 +309,97 @@
 				{/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}
+		<div class="snippet-toggle-row mr-4" in:fly={{ y: -8, duration: 220 }}>
+			<span class="snippet-label">Show verse snippet in share?</span>
+			<button
+				class="snippet-toggle"
+				class:on={includeSnippet}
+				onclick={() => (includeSnippet = !includeSnippet)}
+				aria-pressed={includeSnippet}
+				aria-label="Show snippet in share"
+			>
+				<span class="toggle-thumb"></span>
+			</button>
+		</div>
+	{/if}
+
+	{#if isLoggedIn}
+		<div class="signin-prompt">
+			<div class="rainbow-glow w-full">
+				<a
+					href="/progress"
+					class="flex flex-col items-center justify-center gap-1 w-full p-4 mb-2 bg-white dark:bg-gray-900 border-2 border-black/40 dark:border-white/40 rounded-2xl shadow-sm text-gray-800 dark:text-gray-100 text-base font-semibold no-underline transition-transform duration-100 hover:-translate-y-px active:scale-[0.98]"
+				>
+					📈 See your progress
+				</a>
+			</div>
+		</div>
+	{:else}
+		<div class="signin-prompt">
+			<p class="signin-text text-gray-800 dark:text-gray-300">
+				Create an account (or sign in) to track your progress
+			</p>
+			<form method="POST" action="/auth/apple" class="w-full">
+				<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>
+					Sign in with Apple
+				</button>
+			</form>
+			<form method="POST" action="/auth/google" class="w-full">
+				<input type="hidden" name="anonymousId" value={anonymousId} />
+				<button
+					type="submit"
+					class="google-signin-btn"
+					data-umami-event="Sign in with Google"
+				>
+					<svg
+						class="google-icon"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							fill="#4285F4"
+							d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+						/>
+						<path
+							fill="#34A853"
+							d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+						/>
+						<path
+							fill="#FBBC05"
+							d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
+						/>
+						<path
+							fill="#EA4335"
+							d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+						/>
+					</svg>
+					Sign in with Google
+				</button>
+			</form>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -304,6 +433,13 @@
 		overflow: hidden;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.share-card {
+			background: oklch(22% 0.025 298.626);
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+
 	.share-card::before {
 		content: "";
 		position: absolute;
@@ -324,6 +460,12 @@
 		gap: 0.6rem;
 	}
 
+	@media (prefers-color-scheme: dark) {
+		.chat-window {
+			--bg: oklch(22% 0.025 298.626);
+		}
+	}
+
 	/* ── Bubble wrappers ── */
 	.bubble-wrapper {
 		display: flex;
@@ -476,4 +618,218 @@
 		transform-origin: right center;
 		margin-top: -6px;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		.copy-hint {
+			color: #aaa;
+		}
+	}
+
+	/* ── Snippet toggle row ── */
+	.snippet-toggle-row {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		padding: 0 0.25rem;
+	}
+
+	.snippet-label {
+		font-size: 0.72rem;
+		color: #666;
+		letter-spacing: 0.01em;
+		user-select: none;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.snippet-label {
+			color: #999;
+		}
+	}
+
+	.snippet-toggle {
+		position: relative;
+		width: 36px;
+		height: 20px;
+		border-radius: 10px;
+		background: #ccc;
+		border: none;
+		cursor: pointer;
+		transition: background 200ms ease;
+		flex-shrink: 0;
+		padding: 0;
+	}
+
+	.snippet-toggle.on {
+		background: #34c759;
+	}
+
+	.toggle-thumb {
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: white;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+		transition: transform 200ms ease;
+	}
+
+	.snippet-toggle.on .toggle-thumb {
+		transform: translateX(16px);
+	}
+
+	/* ── Apple Sign In prompt ── */
+	.rainbow-glow {
+		position: relative;
+		border-radius: 1rem;
+	}
+
+	.rainbow-glow::before {
+		content: "";
+		position: absolute;
+		inset: 0px;
+		border-radius: 1.25rem;
+		background: conic-gradient(
+			from var(--angle, 0deg),
+			#ff0080,
+			#ff8c00,
+			#ffd700,
+			#00ff88,
+			#00cfff,
+			#a855f7,
+			#ff0080
+		);
+		animation: rainbow-rotate 6s linear infinite;
+		filter: blur(8px);
+		opacity: 0.75;
+		z-index: -1;
+	}
+
+	@property --angle {
+		syntax: "<angle>";
+		initial-value: 0deg;
+		inherits: false;
+	}
+
+	@keyframes rainbow-rotate {
+		0% {
+			--angle: 0deg;
+		}
+		100% {
+			--angle: 360deg;
+		}
+	}
+
+	.signin-prompt {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+		/*padding: 1rem 0 0.25rem;*/
+	}
+
+	.signin-text {
+		font-size: 0.85rem;
+		text-align: center;
+		font-weight: 500;
+	}
+
+	.apple-signin-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.6rem 1rem;
+		width: 100%;
+		margin-bottom: 0.6rem;
+		background: #000;
+		color: #fff;
+		border-radius: 0.5rem;
+		font-size: 0.95rem;
+		font-weight: 600;
+		border: none;
+		cursor: pointer;
+		transition:
+			background 150ms ease,
+			transform 80ms ease;
+	}
+
+	.apple-signin-btn:hover {
+		background: #222;
+		transform: translateY(-1px);
+	}
+
+	.apple-signin-btn:active {
+		background: #111;
+		transform: scale(0.98);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.apple-signin-btn {
+			background: #fff;
+			color: #000;
+		}
+		.apple-signin-btn:hover {
+			background: #e5e5e5;
+		}
+		.apple-signin-btn:active {
+			background: #ccc;
+		}
+	}
+
+	.apple-icon {
+		width: 1.1rem;
+		height: 1.1rem;
+		flex-shrink: 0;
+	}
+
+	.google-signin-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.6rem 1rem;
+		width: 100%;
+		background: #000;
+		color: #fff;
+		border-radius: 0.5rem;
+		font-size: 0.95rem;
+		font-weight: 600;
+		border: none;
+		cursor: pointer;
+		transition:
+			background 150ms ease,
+			transform 80ms ease;
+	}
+
+	.google-signin-btn:hover {
+		background: #222;
+		transform: translateY(-1px);
+	}
+
+	.google-signin-btn:active {
+		background: #111;
+		transform: scale(0.98);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.google-signin-btn {
+			background: #fff;
+			color: #000;
+		}
+		.google-signin-btn:hover {
+			background: #e5e5e5;
+		}
+		.google-signin-btn:active {
+			background: #ccc;
+		}
+	}
+
+	.google-icon {
+		width: 1.1rem;
+		height: 1.1rem;
+		flex-shrink: 0;
+	}
 </style>

src/lib/server/apple-auth.ts

@@ -1,5 +1,3 @@
-import { encodeBase64url } from '@oslojs/encoding';
-
 const APPLE_AUTH_URL = 'https://appleid.apple.com/auth/authorize';
 const APPLE_TOKEN_URL = 'https://appleid.apple.com/auth/token';
 
@@ -26,8 +24,8 @@ export async function generateAppleClientSecret(): Promise<string> {
 		sub: Bun.env.APPLE_ID!
 	};
 
-	const encodedHeader = encodeBase64url(new TextEncoder().encode(JSON.stringify(header)));
-	const encodedPayload = encodeBase64url(new TextEncoder().encode(JSON.stringify(payload)));
+	const encodedHeader = Buffer.from(JSON.stringify(header)).toString('base64url');
+	const encodedPayload = Buffer.from(JSON.stringify(payload)).toString('base64url');
 	const signingInput = `${encodedHeader}.${encodedPayload}`;
 
 	// Import PEM private key
@@ -55,7 +53,7 @@ export async function generateAppleClientSecret(): Promise<string> {
 	// crypto.subtle may return DER or raw (IEEE P1363) format depending on runtime
 	// Raw format is exactly 64 bytes (32-byte r + 32-byte s)
 	const rawSignature = signature.length === 64 ? signature : derToRaw(signature);
-	const encodedSignature = encodeBase64url(rawSignature);
+	const encodedSignature = Buffer.from(rawSignature).toString('base64url');
 
 	return `${signingInput}.${encodedSignature}`;
 }

src/lib/server/auth.test.ts

@@ -1,7 +1,5 @@
 import type { RequestEvent } from '@sveltejs/kit';
 import { eq } from 'drizzle-orm';
-import { sha256 } from '@oslojs/crypto/sha2';
-import { encodeBase64url, encodeHexLowerCase } from '@oslojs/encoding';
 import { testDb as db } from '$lib/server/db/test';
 import * as table from '$lib/server/db/schema';
 
@@ -11,12 +9,11 @@ export const sessionCookieName = 'auth-session';
 
 export function generateSessionToken() {
 	const bytes = crypto.getRandomValues(new Uint8Array(18));
-	const token = encodeBase64url(bytes);
-	return token;
+	return Buffer.from(bytes).toString('base64url');
 }
 
 export async function createSession(token: string, userId: string) {
-	const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
+	const sessionId = new Bun.CryptoHasher('sha256').update(token).digest('hex');
 	const session: table.Session = {
 		id: sessionId,
 		userId,
@@ -27,7 +24,7 @@ export async function createSession(token: string, userId: string) {
 }
 
 export async function validateSessionToken(token: string) {
-	const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
+	const sessionId = new Bun.CryptoHasher('sha256').update(token).digest('hex');
 	const [result] = await db
 		.select({
 			// Adjust user table here to tweak returned data
@@ -102,6 +99,7 @@ export async function createUser(anonymousId: string, email: string, passwordHas
 		email,
 		passwordHash,
 		appleId: null,
+		googleId: null,
 		firstName: firstName || null,
 		lastName: lastName || null,
 		isPrivate: false

src/lib/server/auth.ts

@@ -1,7 +1,5 @@
 import type { RequestEvent } from '@sveltejs/kit';
 import { eq } from 'drizzle-orm';
-import { sha256 } from '@oslojs/crypto/sha2';
-import { encodeBase64url, encodeHexLowerCase } from '@oslojs/encoding';
 import { db } from '$lib/server/db';
 import * as table from '$lib/server/db/schema';
 
@@ -11,12 +9,11 @@ export const sessionCookieName = 'auth-session';
 
 export function generateSessionToken() {
 	const bytes = crypto.getRandomValues(new Uint8Array(18));
-	const token = encodeBase64url(bytes);
-	return token;
+	return Buffer.from(bytes).toString('base64url');
 }
 
 export async function createSession(token: string, userId: string) {
-	const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
+	const sessionId = new Bun.CryptoHasher('sha256').update(token).digest('hex');
 	const session: table.Session = {
 		id: sessionId,
 		userId,
@@ -27,11 +24,11 @@ export async function createSession(token: string, userId: string) {
 }
 
 export async function validateSessionToken(token: string) {
-	const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
+	const sessionId = new Bun.CryptoHasher('sha256').update(token).digest('hex');
 	const [result] = await db
 		.select({
 			// Adjust user table here to tweak returned data
-			user: { id: table.user.id, email: table.user.email, firstName: table.user.firstName, lastName: table.user.lastName, appleId: table.user.appleId },
+			user: { id: table.user.id, email: table.user.email, firstName: table.user.firstName, lastName: table.user.lastName, appleId: table.user.appleId, googleId: table.user.googleId },
 			session: table.session
 		})
 		.from(table.session)
@@ -102,6 +99,7 @@ export async function createUser(anonymousId: string, email: string, passwordHas
 		email,
 		passwordHash,
 		appleId: null,
+		googleId: null,
 		firstName: firstName || null,
 		lastName: lastName || null,
 		isPrivate: false
@@ -120,6 +118,11 @@ export async function getUserByAppleId(appleId: string) {
 	return user || null;
 }
 
+export async function getUserByGoogleId(googleId: string) {
+	const [user] = await db.select().from(table.user).where(eq(table.user.googleId, googleId));
+	return user || null;
+}
+
 export async function migrateAnonymousStats(anonymousId: string | undefined, userId: string) {
 	if (!anonymousId || anonymousId === userId) return;
 

src/lib/server/db/schema.ts

@@ -1,5 +1,4 @@
 import { integer, sqliteTable, text, index, unique } from 'drizzle-orm/sqlite-core';
-import { sql } from 'drizzle-orm';
 
 export const user = sqliteTable('user', {
 	id: text('id').primaryKey(),
@@ -8,6 +7,7 @@ export const user = sqliteTable('user', {
 	email: text('email').unique(),
 	passwordHash: text('password_hash'),
 	appleId: text('apple_id').unique(),
+	googleId: text('google_id').unique(),
 	isPrivate: integer('is_private', { mode: 'boolean' }).default(false)
 });
 

src/lib/server/google-auth.ts

@@ -0,0 +1,65 @@
+const GOOGLE_AUTH_URL = 'https://accounts.google.com/o/oauth2/v2/auth';
+const GOOGLE_TOKEN_URL = 'https://oauth2.googleapis.com/token';
+
+export function getGoogleAuthUrl(state: string): string {
+	const params = new URLSearchParams({
+		client_id: Bun.env.GOOGLE_CLIENT_ID!,
+		redirect_uri: `${Bun.env.PUBLIC_SITE_URL}/auth/google/callback`,
+		response_type: 'code',
+		scope: 'openid email profile',
+		state,
+		access_type: 'online',
+		prompt: 'select_account'
+	});
+	return `${GOOGLE_AUTH_URL}?${params.toString()}`;
+}
+
+export async function exchangeGoogleCode(
+	code: string,
+	redirectUri: string
+): Promise<{
+	access_token: string;
+	token_type: string;
+	expires_in: number;
+	id_token: string;
+	scope: string;
+}> {
+	const params = new URLSearchParams({
+		client_id: Bun.env.GOOGLE_CLIENT_ID!,
+		client_secret: Bun.env.GOOGLE_CLIENT_SECRET!,
+		code,
+		grant_type: 'authorization_code',
+		redirect_uri: redirectUri
+	});
+
+	const response = await fetch(GOOGLE_TOKEN_URL, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+		body: params.toString()
+	});
+
+	if (!response.ok) {
+		const errText = await response.text();
+		throw new Error(`Google token exchange failed: ${errText}`);
+	}
+
+	return await response.json();
+}
+
+/**
+ * Decode Google's id_token JWT payload without signature verification.
+ * Safe because the token is received directly from Google's token endpoint over TLS.
+ */
+export function decodeGoogleIdToken(idToken: string): {
+	sub: string;
+	email?: string;
+	email_verified?: boolean;
+	name?: string;
+	given_name?: string;
+	family_name?: string;
+} {
+	const [, payloadB64] = idToken.split('.');
+	const padded = payloadB64 + '='.repeat((4 - (payloadB64.length % 4)) % 4);
+	const payload = JSON.parse(atob(padded.replace(/-/g, '+').replace(/_/g, '/')));
+	return payload;
+}

src/lib/server/milestones.ts

@@ -0,0 +1,282 @@
+import { db } from '$lib/server/db';
+import { dailyCompletions } from '$lib/server/db/schema';
+import { bibleBooks } from '$lib/types/bible';
+import { inArray } from 'drizzle-orm';
+import type { DailyCompletion } from '$lib/server/db/schema';
+
+export type Milestone = {
+	id: string;
+	name: string;
+	emoji: string;
+	description: string;
+	achieved: boolean;
+	achievedDate: string | null; // YYYY-MM-DD of first achievement, or null
+};
+
+export type ClassicMilestoneInputs = {
+	bestSingleGame: { date: string; bookName: string } | null;
+	streakMilestones: { days7: string | null; days14: string | null; days30: string | null };
+};
+
+export async function calculateMilestones(
+	completions: DailyCompletion[],
+	dateToBookId: Map<string, string>,
+	classic: ClassicMilestoneInputs,
+): Promise<Milestone[]> {
+	const sorted = [...completions].sort((a, b) => a.date.localeCompare(b.date));
+
+	// Helper: returns the date when all books in targetIds were first solved
+	function findSetDate(targetIds: Set<string>): string | null {
+		const solved = new Set<string>();
+		for (const c of sorted) {
+			const bookId = dateToBookId.get(c.date);
+			if (bookId && targetIds.has(bookId)) {
+				solved.add(bookId);
+				if (solved.size === targetIds.size) return c.date;
+			}
+		}
+		return null;
+	}
+
+	// Book sets
+	const ntIds = new Set(bibleBooks.filter(b => b.testament === 'new').map(b => b.id));
+	const otIds = new Set(bibleBooks.filter(b => b.testament === 'old').map(b => b.id));
+	const allIds = new Set(bibleBooks.map(b => b.id));
+	const gospelIds = new Set(['MAT', 'MRK', 'LUK', 'JHN']);
+	const pentateuchIds = new Set(['GEN', 'EXO', 'LEV', 'NUM', 'DEU']);
+
+	// Set-completion milestones
+	const ntScholarDate = findSetDate(ntIds);
+	const otScholarDate = findSetDate(otIds);
+	const theologianDate = findSetDate(allIds);
+	const fantasticFourDate = findSetDate(gospelIds);
+	const pentatonixDate = findSetDate(pentateuchIds);
+
+	// With God, All Things Are Possible — solved in 1 guess for at least one puzzle from each of the 66 books
+	const booksInOne = new Set<string>();
+	let withGodDate: string | null = null;
+	for (const c of sorted) {
+		if (c.guessCount === 1) {
+			const bookId = dateToBookId.get(c.date);
+			if (bookId) {
+				booksInOne.add(bookId);
+				if (withGodDate === null && booksInOne.size === allIds.size) {
+					withGodDate = c.date;
+				}
+			}
+		}
+	}
+	const allInOne = booksInOne.size === allIds.size;
+
+	// Is This A Joke To You? — guessed all 65 other books first (66 guesses total)
+	const jokeCompletion = sorted.find(c => c.guessCount >= 66);
+
+	// Prodigal Son — returned after a 30+ day gap
+	let prodigalDate: string | null = null;
+	for (let i = 1; i < sorted.length; i++) {
+		const prev = new Date(sorted[i - 1].date + 'T00:00:00Z');
+		const curr = new Date(sorted[i].date + 'T00:00:00Z');
+		const diff = Math.round((curr.getTime() - prev.getTime()) / 86400000);
+		if (diff >= 30) {
+			prodigalDate = sorted[i].date;
+			break;
+		}
+	}
+
+	// Extra Credit — solved on a Sunday
+	const sundayCompletion = sorted.find(c => {
+		const d = new Date(c.date + 'T00:00:00Z');
+		return d.getUTCDay() === 0;
+	});
+
+	// Cross-user milestones: Overachiever, Procrastinator, Outlier
+	let overachieverDate: string | null = null;
+	let procrastinatorDate: string | null = null;
+	let outlierDate: string | null = null;
+
+	if (sorted.length > 0) {
+		const userDates = sorted.map(c => c.date);
+		const allOnDates = await db
+			.select({
+				date: dailyCompletions.date,
+				completedAt: dailyCompletions.completedAt,
+				guessCount: dailyCompletions.guessCount,
+				anonymousId: dailyCompletions.anonymousId,
+			})
+			.from(dailyCompletions)
+			.where(inArray(dailyCompletions.date, userDates));
+
+		// Group all completions by date
+		const byDate = new Map<string, typeof allOnDates>();
+		for (const c of allOnDates) {
+			const arr = byDate.get(c.date) ?? [];
+			arr.push(c);
+			byDate.set(c.date, arr);
+		}
+
+		const userByDate = new Map(sorted.map(c => [c.date, c]));
+
+		for (const userComp of sorted) {
+			const allForDate = byDate.get(userComp.date) ?? [];
+			if (allForDate.length < 2) continue; // need multiple players
+
+			const validTimes = allForDate
+				.filter(c => c.completedAt != null)
+				.map(c => c.completedAt!.getTime());
+
+			if (!overachieverDate && userComp.completedAt && validTimes.length > 0) {
+				const earliest = Math.min(...validTimes);
+				if (userComp.completedAt.getTime() === earliest) {
+					overachieverDate = userComp.date;
+				}
+			}
+
+			if (!procrastinatorDate && userComp.completedAt && validTimes.length > 0) {
+				const latest = Math.max(...validTimes);
+				if (userComp.completedAt.getTime() === latest) {
+					procrastinatorDate = userComp.date;
+				}
+			}
+
+			if (!outlierDate && allForDate.length >= 10) {
+				const sortedGuesses = allForDate.map(c => c.guessCount).sort((a, b) => a - b);
+				const cutoffIndex = Math.ceil(sortedGuesses.length * 0.1) - 1;
+				const cutoff = sortedGuesses[cutoffIndex];
+				if (userComp.guessCount <= cutoff) {
+					outlierDate = userComp.date;
+				}
+			}
+		}
+	}
+
+	return [
+		{
+			id: 'first-1-guess',
+			name: 'Lightning Strike',
+			emoji: '⚡',
+			description: `First 1-guess solve${classic.bestSingleGame ? ` — ${classic.bestSingleGame.bookName}` : ''}`,
+			achieved: classic.bestSingleGame !== null,
+			achievedDate: classic.bestSingleGame?.date ?? null,
+		},
+		{
+			id: 'streak-7',
+			name: '7-Day Streak',
+			emoji: '🔥',
+			description: 'Solve Bibdle 7 days in a row',
+			achieved: classic.streakMilestones.days7 !== null,
+			achievedDate: classic.streakMilestones.days7,
+		},
+		{
+			id: 'streak-14',
+			name: '14-Day Streak',
+			emoji: '💥',
+			description: 'Solve Bibdle 14 days in a row',
+			achieved: classic.streakMilestones.days14 !== null,
+			achievedDate: classic.streakMilestones.days14,
+		},
+		{
+			id: 'streak-30',
+			name: '30-Day Streak',
+			emoji: '🏅',
+			description: 'Solve Bibdle 30 days in a row',
+			achieved: classic.streakMilestones.days30 !== null,
+			achievedDate: classic.streakMilestones.days30,
+		},
+		{
+			id: 'nt-scholar',
+			name: 'NT Scholar',
+			emoji: '✝️',
+			description: 'Solve for every New Testament book',
+			achieved: ntScholarDate !== null,
+			achievedDate: ntScholarDate,
+		},
+		{
+			id: 'ot-scholar',
+			name: 'OT Scholar',
+			emoji: '📜',
+			description: 'Solve  for every Old Testament book',
+			achieved: otScholarDate !== null,
+			achievedDate: otScholarDate,
+		},
+		{
+			id: 'theologian',
+			name: 'Theologian',
+			emoji: '🎓',
+			description: 'Solve for all 66 books of the Bible',
+			achieved: theologianDate !== null,
+			achievedDate: theologianDate,
+		},
+		{
+			id: 'fantastic-four',
+			name: 'The Fantastic Four',
+			emoji: '4️⃣',
+			description: 'Solve a puzzle for all four Gospels',
+			achieved: fantasticFourDate !== null,
+			achievedDate: fantasticFourDate,
+		},
+		{
+			id: 'pentatonix',
+			name: 'Pentatonix',
+			emoji: '📃',
+			description: 'Solve a puzzle for all five books of the Pentateuch',
+			achieved: pentatonixDate !== null,
+			achievedDate: pentatonixDate,
+		},
+		{
+			id: 'with-god',
+			name: 'With God, All Things Are Possible',
+			emoji: '🙏',
+			description: 'Solve in 1 guess for each of the 66 books at least once',
+			achieved: allInOne,
+			achievedDate: withGodDate,
+		},
+		{
+			id: 'is-this-a-joke',
+			name: 'Is This A Joke To You?',
+			emoji: '😤',
+			description: 'Guess all 65 other books before getting the right one',
+			achieved: jokeCompletion !== undefined,
+			achievedDate: jokeCompletion?.date ?? null,
+		},
+		{
+			id: 'overachiever',
+			name: 'Overachiever',
+			emoji: '⚡',
+			description: 'Be the first person to solve Bibdle on a day',
+			achieved: overachieverDate !== null,
+			achievedDate: overachieverDate,
+		},
+		{
+			id: 'procrastinator',
+			name: 'Procrastinator',
+			emoji: '🐢',
+			description: 'Be the last person to solve Bibdle on a day',
+			achieved: procrastinatorDate !== null,
+			achievedDate: procrastinatorDate,
+		},
+		{
+			id: 'prodigal-son',
+			name: 'Prodigal Son',
+			emoji: '🏠',
+			description: 'Return to Bibdle after at least 30 days away',
+			achieved: prodigalDate !== null,
+			achievedDate: prodigalDate,
+		},
+		{
+			id: 'extra-credit',
+			name: 'Extra Credit',
+			emoji: '📅',
+			description: 'Solve Bibdle on a Sunday',
+			achieved: sundayCompletion !== undefined,
+			achievedDate: sundayCompletion?.date ?? null,
+		},
+		{
+			id: 'outlier',
+			name: 'Outlier',
+			emoji: '📊',
+			description: 'Finish in the top 10% of solves on a day (fewest guesses)',
+			achieved: outlierDate !== null,
+			achievedDate: outlierDate,
+		},
+	];
+}

src/lib/types/bible.ts

@@ -17,75 +17,73 @@ export interface BibleBook {
 	testament: Testament;
 	section: BibleSection;
 	order: number;
-	url: string;
-	popularity: number;
 }
 
 export const bibleBooks: BibleBook[] = [
-	{ id: 'GEN', name: 'Genesis', testament: 'old', section: 'Law', order: 1, url: 'https://bible-api.com/data/web/GEN', popularity: 8 },
-	{ id: 'EXO', name: 'Exodus', testament: 'old', section: 'Law', order: 2, url: 'https://bible-api.com/data/web/EXO', popularity: 3 },
-	{ id: 'LEV', name: 'Leviticus', testament: 'old', section: 'Law', order: 3, url: 'https://bible-api.com/data/web/LEV', popularity: 2 },
-	{ id: 'NUM', name: 'Numbers', testament: 'old', section: 'Law', order: 4, url: 'https://bible-api.com/data/web/NUM', popularity: 2 },
-	{ id: 'DEU', name: 'Deuteronomy', testament: 'old', section: 'Law', order: 5, url: 'https://bible-api.com/data/web/DEU', popularity: 2 },
-	{ id: 'JOS', name: 'Joshua', testament: 'old', section: 'History', order: 6, url: 'https://bible-api.com/data/web/JOS', popularity: 2 },
-	{ id: 'JDG', name: 'Judges', testament: 'old', section: 'History', order: 7, url: 'https://bible-api.com/data/web/JDG', popularity: 2 },
-	{ id: 'RUT', name: 'Ruth', testament: 'old', section: 'History', order: 8, url: 'https://bible-api.com/data/web/RUT', popularity: 2 },
-	{ id: '1SA', name: '1 Samuel', testament: 'old', section: 'History', order: 9, url: 'https://bible-api.com/data/web/1SA', popularity: 1 },
-	{ id: '2SA', name: '2 Samuel', testament: 'old', section: 'History', order: 10, url: 'https://bible-api.com/data/web/2SA', popularity: 0 },
-	{ id: '1KI', name: '1 Kings', testament: 'old', section: 'History', order: 11, url: 'https://bible-api.com/data/web/1KI', popularity: 1 },
-	{ id: '2KI', name: '2 Kings', testament: 'old', section: 'History', order: 12, url: 'https://bible-api.com/data/web/2KI', popularity: 0 },
-	{ id: '1CH', name: '1 Chronicles', testament: 'old', section: 'History', order: 13, url: 'https://bible-api.com/data/web/1CH', popularity: 1 },
-	{ id: '2CH', name: '2 Chronicles', testament: 'old', section: 'History', order: 14, url: 'https://bible-api.com/data/web/2CH', popularity: 0 },
-	{ id: 'EZR', name: 'Ezra', testament: 'old', section: 'History', order: 15, url: 'https://bible-api.com/data/web/EZR', popularity: 1 },
-	{ id: 'NEH', name: 'Nehemiah', testament: 'old', section: 'History', order: 16, url: 'https://bible-api.com/data/web/NEH', popularity: 1 },
-	{ id: 'EST', name: 'Esther', testament: 'old', section: 'History', order: 17, url: 'https://bible-api.com/data/web/EST', popularity: 1 },
-	{ id: 'JOB', name: 'Job', testament: 'old', section: 'Wisdom', order: 18, url: 'https://bible-api.com/data/web/JOB', popularity: 2 },
-	{ id: 'PSA', name: 'Psalms', testament: 'old', section: 'Wisdom', order: 19, url: 'https://bible-api.com/data/web/PSA', popularity: 7 },
-	{ id: 'PRO', name: 'Proverbs', testament: 'old', section: 'Wisdom', order: 20, url: 'https://bible-api.com/data/web/PRO', popularity: 7 },
-	{ id: 'ECC', name: 'Ecclesiastes', testament: 'old', section: 'Wisdom', order: 21, url: 'https://bible-api.com/data/web/ECC', popularity: 2 },
-	{ id: 'SNG', name: 'Song of Solomon', testament: 'old', section: 'Wisdom', order: 22, url: 'https://bible-api.com/data/web/SNG', popularity: 2 },
-	{ id: 'ISA', name: 'Isaiah', testament: 'old', section: 'Major Prophets', order: 23, url: 'https://bible-api.com/data/web/ISA', popularity: 2 },
-	{ id: 'JER', name: 'Jeremiah', testament: 'old', section: 'Major Prophets', order: 24, url: 'https://bible-api.com/data/web/JER', popularity: 2 },
-	{ id: 'LAM', name: 'Lamentations', testament: 'old', section: 'Major Prophets', order: 25, url: 'https://bible-api.com/data/web/LAM', popularity: 2 },
-	{ id: 'EZK', name: 'Ezekiel', testament: 'old', section: 'Major Prophets', order: 26, url: 'https://bible-api.com/data/web/EZK', popularity: 2 },
-	{ id: 'DAN', name: 'Daniel', testament: 'old', section: 'Major Prophets', order: 27, url: 'https://bible-api.com/data/web/DAN', popularity: 2 },
-	{ id: 'HOS', name: 'Hosea', testament: 'old', section: 'Minor Prophets', order: 28, url: 'https://bible-api.com/data/web/HOS', popularity: 2 },
-	{ id: 'JOL', name: 'Joel', testament: 'old', section: 'Minor Prophets', order: 29, url: 'https://bible-api.com/data/web/JOL', popularity: 2 },
-	{ id: 'AMO', name: 'Amos', testament: 'old', section: 'Minor Prophets', order: 30, url: 'https://bible-api.com/data/web/AMO', popularity: 2 },
-	{ id: 'OBA', name: 'Obadiah', testament: 'old', section: 'Minor Prophets', order: 31, url: 'https://bible-api.com/data/web/OBA', popularity: 2 },
-	{ id: 'JON', name: 'Jonah', testament: 'old', section: 'Minor Prophets', order: 32, url: 'https://bible-api.com/data/web/JON', popularity: 2 },
-	{ id: 'MIC', name: 'Micah', testament: 'old', section: 'Minor Prophets', order: 33, url: 'https://bible-api.com/data/web/MIC', popularity: 2 },
-	{ id: 'NAM', name: 'Nahum', testament: 'old', section: 'Minor Prophets', order: 34, url: 'https://bible-api.com/data/web/NAM', popularity: 2 },
-	{ id: 'HAB', name: 'Habakkuk', testament: 'old', section: 'Minor Prophets', order: 35, url: 'https://bible-api.com/data/web/HAB', popularity: 2 },
-	{ id: 'ZEP', name: 'Zephaniah', testament: 'old', section: 'Minor Prophets', order: 36, url: 'https://bible-api.com/data/web/ZEP', popularity: 2 },
-	{ id: 'HAG', name: 'Haggai', testament: 'old', section: 'Minor Prophets', order: 37, url: 'https://bible-api.com/data/web/HAG', popularity: 2 },
-	{ id: 'ZEC', name: 'Zechariah', testament: 'old', section: 'Minor Prophets', order: 38, url: 'https://bible-api.com/data/web/ZEC', popularity: 2 },
-	{ id: 'MAL', name: 'Malachi', testament: 'old', section: 'Minor Prophets', order: 39, url: 'https://bible-api.com/data/web/MAL', popularity: 2 },
-	{ id: 'MAT', name: 'Matthew', testament: 'new', section: 'Gospels', order: 40, url: 'https://bible-api.com/data/web/MAT', popularity: 8 },
-	{ id: 'MRK', name: 'Mark', testament: 'new', section: 'Gospels', order: 41, url: 'https://bible-api.com/data/web/MRK', popularity: 8 },
-	{ id: 'LUK', name: 'Luke', testament: 'new', section: 'Gospels', order: 42, url: 'https://bible-api.com/data/web/LUK', popularity: 8 },
-	{ id: 'JHN', name: 'John', testament: 'new', section: 'Gospels', order: 43, url: 'https://bible-api.com/data/web/JHN', popularity: 8 },
-	{ id: 'ACT', name: 'Acts', testament: 'new', section: 'History', order: 44, url: 'https://bible-api.com/data/web/ACT', popularity: 2 },
-	{ id: 'ROM', name: 'Romans', testament: 'new', section: 'Pauline Epistles', order: 45, url: 'https://bible-api.com/data/web/ROM', popularity: 6 },
-	{ id: '1CO', name: '1 Corinthians', testament: 'new', section: 'Pauline Epistles', order: 46, url: 'https://bible-api.com/data/web/1CO', popularity: 5 },
-	{ id: '2CO', name: '2 Corinthians', testament: 'new', section: 'Pauline Epistles', order: 47, url: 'https://bible-api.com/data/web/2CO', popularity: 5 },
-	{ id: 'GAL', name: 'Galatians', testament: 'new', section: 'Pauline Epistles', order: 48, url: 'https://bible-api.com/data/web/GAL', popularity: 5 },
-	{ id: 'EPH', name: 'Ephesians', testament: 'new', section: 'Pauline Epistles', order: 49, url: 'https://bible-api.com/data/web/EPH', popularity: 5 },
-	{ id: 'PHP', name: 'Philippians', testament: 'new', section: 'Pauline Epistles', order: 50, url: 'https://bible-api.com/data/web/PHP', popularity: 5 },
-	{ id: 'COL', name: 'Colossians', testament: 'new', section: 'Pauline Epistles', order: 51, url: 'https://bible-api.com/data/web/COL', popularity: 5 },
-	{ id: '1TH', name: '1 Thessalonians', testament: 'new', section: 'Pauline Epistles', order: 52, url: 'https://bible-api.com/data/web/1TH', popularity: 5 },
-	{ id: '2TH', name: '2 Thessalonians', testament: 'new', section: 'Pauline Epistles', order: 53, url: 'https://bible-api.com/data/web/2TH', popularity: 5 },
-	{ id: '1TI', name: '1 Timothy', testament: 'new', section: 'Pauline Epistles', order: 54, url: 'https://bible-api.com/data/web/1TI', popularity: 5 },
-	{ id: '2TI', name: '2 Timothy', testament: 'new', section: 'Pauline Epistles', order: 55, url: 'https://bible-api.com/data/web/2TI', popularity: 5 },
-	{ id: 'TIT', name: 'Titus', testament: 'new', section: 'Pauline Epistles', order: 56, url: 'https://bible-api.com/data/web/TIT', popularity: 5 },
-	{ id: 'PHM', name: 'Philemon', testament: 'new', section: 'Pauline Epistles', order: 57, url: 'https://bible-api.com/data/web/PHM', popularity: 5 },
-	{ id: 'HEB', name: 'Hebrews', testament: 'new', section: 'General Epistles', order: 58, url: 'https://bible-api.com/data/web/HEB', popularity: 4 },
-	{ id: 'JAS', name: 'James', testament: 'new', section: 'General Epistles', order: 59, url: 'https://bible-api.com/data/web/JAS', popularity: 4 },
-	{ id: '1PE', name: '1 Peter', testament: 'new', section: 'General Epistles', order: 60, url: 'https://bible-api.com/data/web/1PE', popularity: 4 },
-	{ id: '2PE', name: '2 Peter', testament: 'new', section: 'General Epistles', order: 61, url: 'https://bible-api.com/data/web/2PE', popularity: 4 },
-	{ id: '1JN', name: '1 John', testament: 'new', section: 'General Epistles', order: 62, url: 'https://bible-api.com/data/web/1JN', popularity: 4 },
-	{ id: '2JN', name: '2 John', testament: 'new', section: 'General Epistles', order: 63, url: 'https://bible-api.com/data/web/2JN', popularity: 4 },
-	{ id: '3JN', name: '3 John', testament: 'new', section: 'General Epistles', order: 64, url: 'https://bible-api.com/data/web/3JN', popularity: 4 },
-	{ id: 'JUD', name: 'Jude', testament: 'new', section: 'General Epistles', order: 65, url: 'https://bible-api.com/data/web/JUD', popularity: 4 },
-	{ id: 'REV', name: 'Revelation', testament: 'new', section: 'Apocalyptic', order: 66, url: 'https://bible-api.com/data/web/REV', popularity: 2 }
+	{ id: 'GEN', name: 'Genesis', testament: 'old', section: 'Law', order: 1 },
+	{ id: 'EXO', name: 'Exodus', testament: 'old', section: 'Law', order: 2 },
+	{ id: 'LEV', name: 'Leviticus', testament: 'old', section: 'Law', order: 3 },
+	{ id: 'NUM', name: 'Numbers', testament: 'old', section: 'Law', order: 4 },
+	{ id: 'DEU', name: 'Deuteronomy', testament: 'old', section: 'Law', order: 5 },
+	{ id: 'JOS', name: 'Joshua', testament: 'old', section: 'History', order: 6 },
+	{ id: 'JDG', name: 'Judges', testament: 'old', section: 'History', order: 7 },
+	{ id: 'RUT', name: 'Ruth', testament: 'old', section: 'History', order: 8 },
+	{ id: '1SA', name: '1 Samuel', testament: 'old', section: 'History', order: 9 },
+	{ id: '2SA', name: '2 Samuel', testament: 'old', section: 'History', order: 10 },
+	{ id: '1KI', name: '1 Kings', testament: 'old', section: 'History', order: 11 },
+	{ id: '2KI', name: '2 Kings', testament: 'old', section: 'History', order: 12 },
+	{ id: '1CH', name: '1 Chronicles', testament: 'old', section: 'History', order: 13 },
+	{ id: '2CH', name: '2 Chronicles', testament: 'old', section: 'History', order: 14 },
+	{ id: 'EZR', name: 'Ezra', testament: 'old', section: 'History', order: 15 },
+	{ id: 'NEH', name: 'Nehemiah', testament: 'old', section: 'History', order: 16 },
+	{ id: 'EST', name: 'Esther', testament: 'old', section: 'History', order: 17 },
+	{ id: 'JOB', name: 'Job', testament: 'old', section: 'Wisdom', order: 18 },
+	{ id: 'PSA', name: 'Psalms', testament: 'old', section: 'Wisdom', order: 19 },
+	{ id: 'PRO', name: 'Proverbs', testament: 'old', section: 'Wisdom', order: 20 },
+	{ id: 'ECC', name: 'Ecclesiastes', testament: 'old', section: 'Wisdom', order: 21 },
+	{ id: 'SNG', name: 'Song of Solomon', testament: 'old', section: 'Wisdom', order: 22 },
+	{ id: 'ISA', name: 'Isaiah', testament: 'old', section: 'Major Prophets', order: 23 },
+	{ id: 'JER', name: 'Jeremiah', testament: 'old', section: 'Major Prophets', order: 24 },
+	{ id: 'LAM', name: 'Lamentations', testament: 'old', section: 'Major Prophets', order: 25 },
+	{ id: 'EZK', name: 'Ezekiel', testament: 'old', section: 'Major Prophets', order: 26 },
+	{ id: 'DAN', name: 'Daniel', testament: 'old', section: 'Major Prophets', order: 27 },
+	{ id: 'HOS', name: 'Hosea', testament: 'old', section: 'Minor Prophets', order: 28 },
+	{ id: 'JOL', name: 'Joel', testament: 'old', section: 'Minor Prophets', order: 29 },
+	{ id: 'AMO', name: 'Amos', testament: 'old', section: 'Minor Prophets', order: 30 },
+	{ id: 'OBA', name: 'Obadiah', testament: 'old', section: 'Minor Prophets', order: 31 },
+	{ id: 'JON', name: 'Jonah', testament: 'old', section: 'Minor Prophets', order: 32 },
+	{ id: 'MIC', name: 'Micah', testament: 'old', section: 'Minor Prophets', order: 33 },
+	{ id: 'NAM', name: 'Nahum', testament: 'old', section: 'Minor Prophets', order: 34 },
+	{ id: 'HAB', name: 'Habakkuk', testament: 'old', section: 'Minor Prophets', order: 35 },
+	{ id: 'ZEP', name: 'Zephaniah', testament: 'old', section: 'Minor Prophets', order: 36 },
+	{ id: 'HAG', name: 'Haggai', testament: 'old', section: 'Minor Prophets', order: 37 },
+	{ id: 'ZEC', name: 'Zechariah', testament: 'old', section: 'Minor Prophets', order: 38 },
+	{ id: 'MAL', name: 'Malachi', testament: 'old', section: 'Minor Prophets', order: 39 },
+	{ id: 'MAT', name: 'Matthew', testament: 'new', section: 'Gospels', order: 40 },
+	{ id: 'MRK', name: 'Mark', testament: 'new', section: 'Gospels', order: 41 },
+	{ id: 'LUK', name: 'Luke', testament: 'new', section: 'Gospels', order: 42 },
+	{ id: 'JHN', name: 'John', testament: 'new', section: 'Gospels', order: 43 },
+	{ id: 'ACT', name: 'Acts', testament: 'new', section: 'History', order: 44 },
+	{ id: 'ROM', name: 'Romans', testament: 'new', section: 'Pauline Epistles', order: 45 },
+	{ id: '1CO', name: '1 Corinthians', testament: 'new', section: 'Pauline Epistles', order: 46 },
+	{ id: '2CO', name: '2 Corinthians', testament: 'new', section: 'Pauline Epistles', order: 47 },
+	{ id: 'GAL', name: 'Galatians', testament: 'new', section: 'Pauline Epistles', order: 48 },
+	{ id: 'EPH', name: 'Ephesians', testament: 'new', section: 'Pauline Epistles', order: 49 },
+	{ id: 'PHP', name: 'Philippians', testament: 'new', section: 'Pauline Epistles', order: 50 },
+	{ id: 'COL', name: 'Colossians', testament: 'new', section: 'Pauline Epistles', order: 51 },
+	{ id: '1TH', name: '1 Thessalonians', testament: 'new', section: 'Pauline Epistles', order: 52 },
+	{ id: '2TH', name: '2 Thessalonians', testament: 'new', section: 'Pauline Epistles', order: 53 },
+	{ id: '1TI', name: '1 Timothy', testament: 'new', section: 'Pauline Epistles', order: 54 },
+	{ id: '2TI', name: '2 Timothy', testament: 'new', section: 'Pauline Epistles', order: 55 },
+	{ id: 'TIT', name: 'Titus', testament: 'new', section: 'Pauline Epistles', order: 56 },
+	{ id: 'PHM', name: 'Philemon', testament: 'new', section: 'Pauline Epistles', order: 57 },
+	{ id: 'HEB', name: 'Hebrews', testament: 'new', section: 'General Epistles', order: 58 },
+	{ id: 'JAS', name: 'James', testament: 'new', section: 'General Epistles', order: 59 },
+	{ id: '1PE', name: '1 Peter', testament: 'new', section: 'General Epistles', order: 60 },
+	{ id: '2PE', name: '2 Peter', testament: 'new', section: 'General Epistles', order: 61 },
+	{ id: '1JN', name: '1 John', testament: 'new', section: 'General Epistles', order: 62 },
+	{ id: '2JN', name: '2 John', testament: 'new', section: 'General Epistles', order: 63 },
+	{ id: '3JN', name: '3 John', testament: 'new', section: 'General Epistles', order: 64 },
+	{ id: 'JUD', name: 'Jude', testament: 'new', section: 'General Epistles', order: 65 },
+	{ id: 'REV', name: 'Revelation', testament: 'new', section: 'Apocalyptic', order: 66 }
 ];

src/lib/utils/game.ts

@@ -79,7 +79,7 @@ export function getNextGradeMessage(numGuesses: number): string {
 }
 
 export function toOrdinal(n: number): string {
-	if (n >= 11 && n <= 13) {
+	if (n % 100 >= 11 && n % 100 <= 13) {
 		return `${n}th`;
 	}
 	const mod = n % 10;

src/lib/utils/share.ts

@@ -1,5 +1,42 @@
 import type { Guess } from './game';
 
+export function getVerseSnippet(verseText: string): string {
+	const words = verseText.trim().split(/\s+/);
+	const slice = words.slice(0, 25);
+	const text = slice.join(' ');
+
+	// Returns character index immediately after the Nth word (1-indexed)
+	function posAfterWord(n: number): number {
+		let pos = 0;
+		for (let w = 0; w < Math.min(n, slice.length); w++) {
+			if (w > 0) pos++; // space between words
+			pos += slice[w].length;
+		}
+		return pos;
+	}
+
+	const start = posAfterWord(9);
+	const end = posAfterWord(25);
+
+	// Find first punctuation mark between words 10 and 25
+	const range = text.substring(start, end);
+	const match = range.match(/[,;:.!?—–-]/);
+
+	function withClosedQuotes(snippet: string): string {
+		const opens = (snippet.match(/\u201C/g) ?? []).length;
+		const closes = (snippet.match(/\u201D/g) ?? []).length;
+		const closeQuote = opens > closes ? '\u201D' : '';
+		return `\u201C${snippet}...${closeQuote}\u201D`;
+	}
+
+	if (match && match.index !== undefined) {
+		const cutPos = start + match.index;
+		return withClosedQuotes(text.substring(0, cutPos).trimEnd());
+	}
+
+	return withClosedQuotes(text);
+}
+
 export function generateShareText(params: {
 	guesses: Guess[];
 	correctBookId: string;
@@ -8,8 +45,9 @@ export function generateShareText(params: {
 	isLoggedIn: boolean;
 	streak?: number;
 	origin: string;
+	verseText: string;
 }): string {
-	const { guesses, correctBookId, dailyVerseDate, chapterCorrect, isLoggedIn, streak, origin } = params;
+	const { guesses, correctBookId, dailyVerseDate, chapterCorrect, isLoggedIn, streak, origin, verseText } = params;
 
 	const emojis = guesses
 		.slice()
@@ -35,18 +73,15 @@ export function generateShareText(params: {
 	const bookEmoji = isLoggedIn ? "📜" : "📖";
 
 	const guessWord = guesses.length === 1 ? "guess" : "guesses";
-	const streakPart = streak !== undefined && streak > 1 ? `, ${streak} days 🔥` : "";
+	const streakPart = streak !== undefined && streak > 1 ? ` ${streak} days 🔥` : "";
+	const chapterStar = guesses.length === 1 && chapterCorrect ? " ⭐" : "";
 
 	const lines = [
 		`${bookEmoji} Bibdle | ${formattedDate} ${bookEmoji}`,
-		`${guesses.length} ${guessWord}${streakPart}`,
+		`${guesses.length} ${guessWord}${streakPart ? `,${streakPart}` : ""}`,
+		`${emojis}${chapterStar}`
 	];
 
-	lines.push(
-		`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
-		origin,
-	);
-
 	return lines.join("\n");
 }
 

src/routes/+layout.svelte

@@ -1,26 +1,58 @@
 <script lang="ts">
- import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
-  
-  import "./layout.css";
-  import favicon from "$lib/assets/favicon.ico";
+	import { onMount } from "svelte";
+	import { browser } from "$app/environment";
 
-  onMount(() => {
-    if (browser) {
-      const script = document.createElement('script');
-      script.defer = true;
-      script.src = 'https://umami.snail.city/script.js';
-      script.setAttribute('data-website-id', '5b8c31ad-71cd-4317-940b-6bccea732acc');
-      script.setAttribute('data-domains', 'bibdle.com,www.bibdle.com');
-      document.body.appendChild(script);
-    }
-  });
+	import "./layout.css";
+	import favicon from "$lib/assets/favicon.ico";
+	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
+	import ThemeToggle from "$lib/components/ThemeToggle.svelte";
 
-  let { children } = $props();
+	let isDev = $state(false);
+
+	onMount(() => {
+		isDev =
+			window.location.host === "localhost:5173" ||
+			window.location.host === "test.bibdle.com";
+
+		// Inject analytics script
+		const script = document.createElement("script");
+		script.defer = true;
+		script.src = "https://umami.snail.city/script.js";
+		script.setAttribute(
+			"data-website-id",
+			"5b8c31ad-71cd-4317-940b-6bccea732acc",
+		);
+		script.setAttribute("data-domains", "bibdle.com,www.bibdle.com");
+		document.body.appendChild(script);
+	});
+
+	let { children } = $props();
 </script>
 
 <svelte:head>
-  <link rel="icon" href={favicon} />
-  <link rel="alternate" type="application/rss+xml" title="Bibdle RSS Feed" href="/feed.xml" />
+	<link rel="icon" href={favicon} />
+	<link
+		rel="alternate"
+		type="application/rss+xml"
+		title="Bibdle RSS Feed"
+		href="/feed.xml"
+	/>
+	<meta name="description" content="A daily Bible game" />
 </svelte:head>
-{@render children()}
+
+<div
+	class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 dark:md:from-gray-900 dark:md:to-slate-950"
+>
+	<h1
+		class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 dark:text-gray-300 drop-shadow-2xl tracking-widest p-4 pt-12 animate-fade-in-up"
+	>
+		<TitleAnimation />
+		<div class="font-normal"></div>
+	</h1>
+	{#if isDev}
+		<div class="flex justify-center pb-2"><ThemeToggle /></div>
+	{:else}
+		<div class="justify-center hidden pb-2"><ThemeToggle /></div>
+	{/if}
+	{@render children()}
+</div>

src/routes/+page.svelte

@@ -2,17 +2,19 @@
 	import type { PageProps } from "./$types";
 	import { browser } from "$app/environment";
 	import { enhance } from "$app/forms";
+	import { onMount } from "svelte";
 
 	import VerseDisplay from "$lib/components/VerseDisplay.svelte";
 	import SearchInput from "$lib/components/SearchInput.svelte";
 	import GuessesTable from "$lib/components/GuessesTable.svelte";
 	import WinScreen from "$lib/components/WinScreen.svelte";
 	import Credits from "$lib/components/Credits.svelte";
-	import TitleAnimation from "$lib/components/TitleAnimation.svelte";
+
+	import GamePrompt from "$lib/components/GamePrompt.svelte";
 	import DevButtons from "$lib/components/DevButtons.svelte";
 	import AuthModal from "$lib/components/AuthModal.svelte";
 
-	import { evaluateGuess } from "$lib/utils/game";
+	import { evaluateGuess, getFirstLetter } from "$lib/utils/game";
 	import {
 		generateShareText,
 		shareResult,
@@ -35,6 +37,15 @@
 	let user = $derived(data.user);
 	let session = $derived(data.session);
 
+	const currentDate = $derived(
+		new Date().toLocaleDateString("en-US", {
+			weekday: "long",
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+		}),
+	);
+
 	let searchQuery = $state("");
 	let copied = $state(false);
 	let isDev = $state(false);
@@ -43,6 +54,7 @@
 	let statsData = $state<StatsData | null>(null);
 	let streak = $state(0);
 	let streakPercentile = $state<number | null>(null);
+	let guessesMinimized = $state(false);
 
 	const persistence = createGamePersistence(
 		() => dailyVerse.date,
@@ -55,15 +67,6 @@
 		new SvelteSet(persistence.guesses.map((g) => g.book.id)),
 	);
 
-	const currentDate = $derived(
-		new Date().toLocaleDateString("en-US", {
-			weekday: "long",
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-		}),
-	);
-
 	let isWon = $derived(
 		persistence.guesses.some((g) => g.book.id === correctBookId),
 	);
@@ -73,6 +76,62 @@
 			!persistence.chapterGuessCompleted,
 	);
 
+	let knownTestament = $derived(
+		persistence.guesses.some((g) => g.testamentMatch)
+			? correctBook?.testament
+			: null,
+	);
+	let knownSection = $derived(
+		persistence.guesses.some((g) => g.sectionMatch)
+			? correctBook?.section
+			: null,
+	);
+	let knownFirstLetter = $derived(
+		persistence.guesses.some((g) => g.firstLetterMatch)
+			? getFirstLetter(correctBook?.name ?? "").toUpperCase()
+			: null,
+	);
+
+	let testamentVisible = $state(false);
+	let sectionVisible = $state(false);
+	let firstLetterVisible = $state(false);
+	let showHints = $state(false);
+
+	// On page load, show hints that are already known without animation
+	onMount(() => {
+		if (knownTestament) testamentVisible = true;
+		if (knownSection) sectionVisible = true;
+		if (knownFirstLetter) firstLetterVisible = true;
+
+		const winCount = Object.keys(localStorage).filter(
+			(k) => k.startsWith("bibdle-win-tracked-") && localStorage.getItem(k) === "true"
+		).length;
+		showHints = winCount < 3;
+	});
+
+	// Fade in newly revealed hints after the guess animation completes
+	$effect(() => {
+		if (!knownTestament || testamentVisible) return;
+		const id = setTimeout(() => {
+			testamentVisible = true;
+		}, 2800);
+		return () => clearTimeout(id);
+	});
+	$effect(() => {
+		if (!knownSection || sectionVisible) return;
+		const id = setTimeout(() => {
+			sectionVisible = true;
+		}, 2800);
+		return () => clearTimeout(id);
+	});
+	$effect(() => {
+		if (!knownFirstLetter || firstLetterVisible) return;
+		const id = setTimeout(() => {
+			firstLetterVisible = true;
+		}, 2800);
+		return () => clearTimeout(id);
+	});
+
 	async function submitGuess(bookId: string) {
 		if (persistence.guesses.some((g) => g.book.id === bookId)) return;
 
@@ -203,6 +262,23 @@
 		}
 	});
 
+	// Delay collapsing the guesses grid until animations complete (mirrors showWinScreen delay)
+	$effect(() => {
+		if (!isWon || persistence.guesses.length <= 3) {
+			guessesMinimized = false;
+			return;
+		}
+		if (persistence.isWinAlreadyTracked()) {
+			guessesMinimized = true;
+		} else {
+			const animationDelay = 1800;
+			const timeoutId = setTimeout(() => {
+				guessesMinimized = true;
+			}, animationDelay);
+			return () => clearTimeout(timeoutId);
+		}
+	});
+
 	// Track win analytics
 	$effect(() => {
 		if (!browser || !isWon) return;
@@ -240,6 +316,7 @@
 			isLoggedIn: !!user,
 			streak,
 			origin: window.location.origin,
+			verseText: dailyVerse.verseText,
 		});
 	}
 
@@ -282,20 +359,13 @@
 	<title>A daily bible game{isDev ? " (dev)" : ""}</title>
 </svelte:head>
 
-<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
+<div class="pb-8">
 	<div class="w-full max-w-3xl mx-auto px-4">
-		<h1
-			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
-		>
-			<TitleAnimation />
-			<div class="font-normal"></div>
-		</h1>
 		<div class="text-center mb-8 animate-fade-in-up animate-delay-200">
 			<span class="big-text"
 				>{isDev ? "Dev Edition  |  " : ""}{currentDate}</span
 			>
 		</div>
-
 		<div class="flex flex-col gap-6">
 			<div class="animate-fade-in-up animate-delay-200">
 				<VerseDisplay {data} {isWon} {blurChapter} />
@@ -303,7 +373,50 @@
 
 			{#if !isWon}
 				<div class="animate-fade-in-up animate-delay-400">
-					<SearchInput bind:searchQuery {guessedIds} {submitGuess} guessCount={persistence.guesses.length} />
+					<GamePrompt guessCount={persistence.guesses.length} />
+
+					{#if showHints && (knownTestament || knownSection || knownFirstLetter)}
+						<div
+							class="text-xs uppercase tracking-widest font-bold text-center text-gray-500 dark:text-gray-400 flex flex-col gap-1 mb-4 -mt-2"
+						>
+							{#if knownTestament}
+								<p
+									style="transition: opacity 0.5s ease; opacity: {testamentVisible
+										? 1
+										: 0};"
+								>
+									It is in the {knownTestament === "old"
+										? "Old"
+										: "New"} Testament.
+								</p>
+							{/if}
+							{#if knownSection}
+								<p
+									style="transition: opacity 0.5s ease; opacity: {sectionVisible
+										? 1
+										: 0};"
+								>
+									It is in the {knownSection} section.
+								</p>
+							{/if}
+							{#if knownFirstLetter}
+								<p
+									style="transition: opacity 0.5s ease; opacity: {firstLetterVisible
+										? 1
+										: 0};"
+								>
+									The book's name starts with "{knownFirstLetter}".
+								</p>
+							{/if}
+						</div>
+					{/if}
+
+					<SearchInput
+						bind:searchQuery
+						{guessedIds}
+						{submitGuess}
+						guessCount={persistence.guesses.length}
+					/>
 				</div>
 			{:else if showWinScreen}
 				<div class="animate-fade-in-up animate-delay-400">
@@ -318,17 +431,47 @@
 						reference={dailyVerse.reference}
 						onChapterGuessCompleted={persistence.onChapterGuessCompleted}
 						shareText={getShareText()}
+						verseText={dailyVerse.verseText}
 						{streak}
 						{streakPercentile}
+						isLoggedIn={!!user}
+						anonymousId={persistence.anonymousId}
 					/>
 				</div>
 			{/if}
 
 			<div class="animate-fade-in-up animate-delay-600">
-				<GuessesTable guesses={persistence.guesses} {correctBookId} />
+				<GuessesTable
+					guesses={persistence.guesses}
+					{correctBookId}
+					minimized={guessesMinimized}
+				/>
 			</div>
 
 			{#if isWon}
+				<hr
+					class="animate-fade-in-up animate-delay-800 border-gray-300 dark:border-gray-600"
+				/>
+				<div class="animate-fade-in-up animate-delay-800">
+					<a
+						href="https://discord.gg/yWQXbGK8SD"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="flex items-center justify-center gap-2 w-full px-5 py-2.5 bg-[#5865F2] hover:bg-[#4752C4] text-white font-semibold rounded-lg shadow-md transition-colors duration-200"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 127.14 96.36"
+							class="w-5 h-5 fill-white"
+							aria-hidden="true"
+						>
+							<path
+								d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+							/>
+						</svg>
+						Join the BIBDLE Discord!
+					</a>
+				</div>
 				<div class="animate-fade-in-up animate-delay-800">
 					<Credits />
 				</div>
@@ -336,44 +479,8 @@
 		</div>
 		{#if isDev}
 			<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
-				<div class="flex flex-col md:flex-row gap-3">
-					<a
-						href="/stats?{user
-							? `userId=${user.id}`
-							: `anonymousId=${persistence.anonymousId}`}&tz={encodeURIComponent(
-							Intl.DateTimeFormat().resolvedOptions().timeZone,
-						)}"
-						class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
-					>
-						📊 View Stats
-					</a>
-
-					{#if user}
-						<form
-							method="POST"
-							action="/auth/logout"
-							use:enhance
-							class="w-full md:w-auto"
-						>
-							<button
-								type="submit"
-								class="inline-flex items-center justify-center w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
-							>
-								🚪 Sign Out
-							</button>
-						</form>
-					{:else}
-						<button
-							onclick={() => (authModalOpen = true)}
-							class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
-						>
-							🔐 Sign In
-						</button>
-					{/if}
-				</div>
-
 				<div
-					class="text-xs text-gray-600 bg-gray-100 px-3 py-2 rounded border"
+					class="text-xs text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded border dark:border-gray-700"
 				>
 					<div><strong>Debug Info:</strong></div>
 					<div>
@@ -405,19 +512,23 @@
 					<div>Daily Verse Date: {dailyVerse.date}</div>
 					<div>Streak: {streak}</div>
 				</div>
-				<DevButtons anonymousId={persistence.anonymousId} />
+				<DevButtons
+					anonymousId={persistence.anonymousId}
+					{user}
+					onSignIn={() => (authModalOpen = true)}
+				/>
 			</div>
 		{/if}
 
 		{#if user && session}
 			<div
-				class="mt-6 pt-4 border-t border-gray-200 text-center text-xs text-gray-400"
+				class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center text-xs text-gray-400 dark:text-gray-500"
 			>
 				Signed in as {[user.firstName, user.lastName]
 					.filter(Boolean)
 					.join(" ")}{user.email
 					? ` (${user.email})`
-					: ""}{user.appleId ? " using Apple" : ""} |
+					: ""}{user.appleId ? " using Apple" : user.googleId ? " using Google" : ""} |
 
 				<form
 					method="POST"

src/routes/about/+page.server.ts

@@ -0,0 +1,13 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { marked } from 'marked';
+
+export async function load() {
+	const about = readFileSync(resolve('static/about.md'), 'utf-8');
+	const howToPlay = readFileSync(resolve('static/how-to-play.md'), 'utf-8');
+
+	return {
+		about: await marked(about),
+		howToPlay: await marked(howToPlay)
+	};
+}

src/routes/about/+page.svelte

@@ -0,0 +1,48 @@
+<svelte:head>
+	<title>About — Bibdle</title>
+</svelte:head>
+
+<script lang="ts">
+	import SocialLinks from "$lib/components/SocialLinks.svelte";
+
+	let { data } = $props();
+
+	const SOCIAL_PLACEHOLDER = "<!-- social -->";
+
+	const aboutParts = $derived(
+		data.about.includes(SOCIAL_PLACEHOLDER)
+			? data.about.split(SOCIAL_PLACEHOLDER)
+			: null
+	);
+</script>
+
+<div class="min-h-dvh py-10 px-4">
+	<div class="w-full max-w-xl mx-auto">
+
+		<div class="mb-8">
+			<a
+				href="/"
+				class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100 transition-colors"
+			>
+				← Back to Game
+			</a>
+		</div>
+
+		<div class="prose dark:prose-invert text-justify max-w-none">
+			{#if aboutParts}
+				{@html aboutParts[0]}
+				<div class="my-8 not-prose">
+					<SocialLinks />
+				</div>
+				{@html aboutParts[1]}
+			{:else}
+				{@html data.about}
+			{/if}
+		</div>
+
+		<div class="prose dark:prose-invert text-justify max-w-none mt-10">
+			{@html data.howToPlay}
+		</div>
+
+	</div>
+</div>

src/routes/api/dev/seed-history/+server.ts

@@ -19,7 +19,7 @@ export const POST: RequestHandler = async ({ request }) => {
 	}
 
 	try {
-		const { anonymousId } = await request.json();
+		const { anonymousId, days = 10 } = await request.json();
 
 		if (!anonymousId || typeof anonymousId !== 'string') {
 			return json({ error: 'anonymousId required' }, { status: 400 });
@@ -29,7 +29,7 @@ export const POST: RequestHandler = async ({ request }) => {
 		const inserted: string[] = [];
 		const skipped: string[] = [];
 
-		for (let i = 1; i <= 10; i++) {
+		for (let i = 1; i <= days; i++) {
 			const d = new Date(today);
 			d.setDate(d.getDate() - i);
 			const date = d.toLocaleDateString('en-CA'); // YYYY-MM-DD

src/routes/api/send-daily-verse/+server.ts

@@ -0,0 +1,42 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getVerseForDate } from '$lib/server/daily-verse';
+
+export const POST: RequestHandler = async ({ request }) => {
+	const cronSecret = Bun.env.CRON_SECRET;
+	const discordWebhook = Bun.env.DISCORD_DAILY_WEBHOOK;
+
+	const authHeader = request.headers.get('Authorization');
+	if (!authHeader || !cronSecret || authHeader !== `Bearer ${cronSecret}`) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const dateStr = new Date().toLocaleDateString('en-CA', { timeZone: 'America/New_York' });
+
+	const verse = await getVerseForDate(dateStr);
+
+	const fullDate = new Date(dateStr + 'T00:00:00Z').toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		timeZone: 'UTC',
+	});
+
+	const message = `*${fullDate}*\n**"${verse.verseText}"**`;
+
+	if (!discordWebhook) {
+		return json({ error: 'Discord webhook not configured' }, { status: 500 });
+	}
+
+	const discordResponse = await fetch(discordWebhook, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ content: message }),
+	});
+
+	if (!discordResponse.ok) {
+		return json({ error: 'Failed to post to Discord' }, { status: 500 });
+	}
+
+	return json({ ok: true });
+};

src/routes/api/streak/+server.ts

@@ -12,7 +12,7 @@ export const GET: RequestHandler = async ({ url }) => {
 		error(400, 'Missing anonymousId or localDate');
 	}
 
-	// Fetch all completion dates for this user, newest first
+	// Fetch all completion dates for this user (stored as the user's local date)
 	const rows = await db
 		.select({ date: dailyCompletions.date })
 		.from(dailyCompletions)
@@ -21,16 +21,22 @@ export const GET: RequestHandler = async ({ url }) => {
 
 	const completedDates = new Set(rows.map((r) => r.date));
 
-	// Walk backwards from localDate, counting consecutive completed days
-	let streak = 0;
-	let cursor = new Date(`${localDate}T00:00:00`);
-
-	while (true) {
-		const dateStr = cursor.toLocaleDateString('en-CA'); // YYYY-MM-DD
-		if (!completedDates.has(dateStr)) break;
-		streak++;
-		cursor.setDate(cursor.getDate() - 1);
+	// Subtract one calendar day from a YYYY-MM-DD string using UTC arithmetic —
+	// this avoids any dependence on the server's local timezone or DST offsets.
+	function prevDay(dateStr: string): string {
+		const d = new Date(dateStr + 'T00:00:00Z');
+		d.setUTCDate(d.getUTCDate() - 1);
+		return d.toISOString().slice(0, 10);
 	}
 
-	return json({ streak });
+	// Walk backwards from the user's local date, counting consecutive completed days
+	let streak = 0;
+	let cursor = localDate;
+
+	while (completedDates.has(cursor)) {
+		streak++;
+		cursor = prevDay(cursor);
+	}
+
+	return json({ streak: streak < 2 ? 0 : streak });
 };

src/routes/auth/apple/+page.server.ts

@@ -1,7 +1,6 @@
 import { redirect } from '@sveltejs/kit';
 import type { Actions } from './$types';
 import { getAppleAuthUrl } from '$lib/server/apple-auth';
-import { encodeBase64url } from '@oslojs/encoding';
 
 export const actions: Actions = {
 	default: async ({ cookies, request }) => {
@@ -10,7 +9,7 @@ export const actions: Actions = {
 
 		// Generate CSRF state
 		const stateBytes = crypto.getRandomValues(new Uint8Array(16));
-		const state = encodeBase64url(stateBytes);
+		const state = Buffer.from(stateBytes).toString('base64url');
 
 		// Store state + anonymousId in a short-lived cookie
 		// sameSite 'none' + secure required because Apple POSTs cross-origin

src/routes/auth/google/+page.server.ts

@@ -0,0 +1,26 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { getGoogleAuthUrl } from '$lib/server/google-auth';
+
+export const actions: Actions = {
+	default: async ({ cookies, request }) => {
+		const data = await request.formData();
+		const anonymousId = data.get('anonymousId')?.toString() || '';
+
+		// Generate CSRF state
+		const stateBytes = crypto.getRandomValues(new Uint8Array(16));
+		const state = Buffer.from(stateBytes).toString('base64url');
+
+		// sameSite 'lax' is safe here because Google sends a GET redirect back
+		// (unlike Apple which POSTs cross-origin, requiring 'none')
+		cookies.set('google_oauth_state', JSON.stringify({ state, anonymousId }), {
+			path: '/',
+			httpOnly: true,
+			secure: true,
+			sameSite: 'lax',
+			maxAge: 600
+		});
+
+		redirect(302, getGoogleAuthUrl(state));
+	}
+};

src/routes/auth/google/callback/+server.ts

@@ -0,0 +1,131 @@
+import { redirect, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { exchangeGoogleCode, decodeGoogleIdToken } from '$lib/server/google-auth';
+import * as auth from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import { user as userTable } from '$lib/server/db/schema';
+import { eq } from 'drizzle-orm';
+
+export const GET: RequestHandler = async ({ url, cookies }) => {
+	const code = url.searchParams.get('code');
+	const state = url.searchParams.get('state');
+	const errorParam = url.searchParams.get('error');
+
+	// User denied access
+	if (errorParam) {
+		redirect(302, '/');
+	}
+
+	const storedRaw = cookies.get('google_oauth_state');
+	if (!storedRaw || !state || !code) {
+		throw error(400, 'Invalid OAuth callback');
+	}
+
+	const stored = JSON.parse(storedRaw) as { state: string; anonymousId: string };
+	if (stored.state !== state) {
+		throw error(400, 'State mismatch');
+	}
+	cookies.delete('google_oauth_state', { path: '/' });
+
+	const anonId = stored.anonymousId;
+	if (!anonId) {
+		console.error('[Google auth] Missing anonymousId in state cookie');
+		throw error(400, 'Missing anonymous ID — please return to the game and try again');
+	}
+
+	// Exchange authorization code for tokens
+	const tokens = await exchangeGoogleCode(
+		code,
+		`${Bun.env.PUBLIC_SITE_URL}/auth/google/callback`
+	);
+	const claims = decodeGoogleIdToken(tokens.id_token);
+	const googleId = claims.sub;
+
+	// --- User resolution ---
+	let userId: string;
+
+	// 1. Check if a user with this googleId already exists (returning user)
+	const existingGoogleUser = await auth.getUserByGoogleId(googleId);
+
+	if (existingGoogleUser) {
+		userId = existingGoogleUser.id;
+		console.log(`[Google auth] Returning Google user: userId=${userId}, anonId=${anonId}`);
+		await auth.migrateAnonymousStats(anonId, userId);
+	} else if (claims.email) {
+		// 2. Check if email matches an existing email/password or Apple user
+		const existingEmailUser = await auth.getUserByEmail(claims.email);
+		if (existingEmailUser) {
+			// Link Google account to existing user
+			await db.update(userTable).set({ googleId }).where(eq(userTable.id, existingEmailUser.id));
+			userId = existingEmailUser.id;
+			console.log(`[Google auth] Linked Google to existing email user: userId=${userId}, anonId=${anonId}`);
+			await auth.migrateAnonymousStats(anonId, userId);
+		} else {
+			// 3. Brand new user — use anonymousId as user ID to preserve local stats
+			userId = anonId;
+			console.log(`[Google auth] New user (has email): userId=${userId}`);
+			try {
+				await db.insert(userTable).values({
+					id: userId,
+					email: claims.email,
+					passwordHash: null,
+					appleId: null,
+					googleId,
+					firstName: claims.given_name || null,
+					lastName: claims.family_name || null,
+					isPrivate: false
+				});
+			} catch (e: any) {
+				// Handle race condition: if googleId was inserted between our check and insert
+				if (e?.message?.includes('UNIQUE constraint')) {
+					const retryUser = await auth.getUserByGoogleId(googleId);
+					if (retryUser) {
+						userId = retryUser.id;
+						console.log(`[Google auth] Race condition (has email): resolved to userId=${userId}, anonId=${anonId}`);
+						await auth.migrateAnonymousStats(anonId, userId);
+					} else {
+						throw error(500, 'Failed to create user');
+					}
+				} else {
+					throw e;
+				}
+			}
+		}
+	} else {
+		// No email from Google (edge case — Google almost always returns email)
+		userId = anonId;
+		console.log(`[Google auth] New user (no email): userId=${userId}`);
+		try {
+			await db.insert(userTable).values({
+				id: userId,
+				email: null,
+				passwordHash: null,
+				appleId: null,
+				googleId,
+				firstName: claims.given_name || null,
+				lastName: claims.family_name || null,
+				isPrivate: false
+			});
+		} catch (e: any) {
+			if (e?.message?.includes('UNIQUE constraint')) {
+				const retryUser = await auth.getUserByGoogleId(googleId);
+				if (retryUser) {
+					userId = retryUser.id;
+					console.log(`[Google auth] Race condition (no email): resolved to userId=${userId}, anonId=${anonId}`);
+					await auth.migrateAnonymousStats(anonId, userId);
+				} else {
+					throw error(500, 'Failed to create user');
+				}
+			} else {
+				throw e;
+			}
+		}
+	}
+
+	// Create session
+	const sessionToken = auth.generateSessionToken();
+	const session = await auth.createSession(sessionToken, userId);
+	auth.setSessionTokenCookie({ cookies } as any, sessionToken, session.expiresAt);
+
+	redirect(302, '/');
+};

src/routes/global/+page.server.ts

@@ -0,0 +1,484 @@
+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 thirtyDaysAgo = estDateStr(30);
+	const [{ monthlyPlayers }] = await db
+		.select({ monthlyPlayers: countDistinct(dailyCompletions.anonymousId) })
+		.from(dailyCompletions)
+		.where(gte(dailyCompletions.date, thirtyDaysAgo));
+
+	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;
+
+	// ── Session depth funnel ──────────────────────────────────────────────────
+	// For each depth d, count players with >= d completions.
+	// returnRate at depth d = (players with >= d+1) / (players with >= d).
+	const depthCounts = new Map<number, number>();
+	for (const r of firstDates) {
+		const n = r.totalCompletions;
+		for (let d = 1; d <= n; d++) {
+			depthCounts.set(d, (depthCounts.get(d) ?? 0) + 1);
+		}
+	}
+	const sessionDepthCards = [2, 3, 4, 5, 7].map((d) => {
+		const atD = depthCounts.get(d) ?? 0;
+		const atDplus1 = depthCounts.get(d + 1) ?? 0;
+		return {
+			depth: d,
+			players: atD,
+			returnRate: atD >= 3 ? Math.round((atDplus1 / atD) * 1000) / 10 : null
+		};
+	});
+
+	// ── 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) {
+				if (dateUsersMap.get(addDays(dateD, windowDays))?.has(userId)) {
+					retained++;
+				}
+			}
+			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);
+
+	// ── Weekly Active Users history (12 weeks) ────────────────────────────────
+
+	const wauWeeks: { weekStart: string; weekEnd: string; wau: number; changePct: number | null }[] = [];
+
+	for (let w = 0; w < 12; w++) {
+		const weekEnd = estDateStr(w * 7);
+		const weekStart = estDateStr(w * 7 + 6);
+		const users = new Set<string>();
+		for (const row of recentCompletions) {
+			if (row.date >= weekStart && row.date <= weekEnd) {
+				users.add(row.anonymousId);
+			}
+		}
+		wauWeeks.push({ weekEnd, weekStart, wau: users.size, changePct: null });
+	}
+
+	// Change % vs prior week (index i+1 is the older week)
+	for (let i = 0; i < wauWeeks.length - 1; i++) {
+		const prev = wauWeeks[i + 1].wau;
+		if (prev > 0) {
+			wauWeeks[i].changePct = Math.round(((wauWeeks[i].wau - prev) / prev) * 1000) / 10;
+		}
+	}
+
+	const avgWau = Math.round(wauWeeks.reduce((sum, w) => sum + w.wau, 0) / wauWeeks.length);
+
+	// ── Monthly Active Users history (6 months) ───────────────────────────────
+
+	const sixMonthsAgo = estDateStr(185);
+	const mauCompletions = await db
+		.select({ anonymousId: dailyCompletions.anonymousId, date: dailyCompletions.date })
+		.from(dailyCompletions)
+		.where(gte(dailyCompletions.date, sixMonthsAgo));
+
+	// Rolling 30-day windows
+	const mauMonths: { monthStart: string; monthEnd: string; mau: number; changePct: number | null }[] = [];
+	for (let m = 0; m < 6; m++) {
+		const monthEnd = estDateStr(m * 30);
+		const monthStart = estDateStr(m * 30 + 29);
+		const users = new Set<string>();
+		for (const row of mauCompletions) {
+			if (row.date >= monthStart && row.date <= monthEnd) {
+				users.add(row.anonymousId);
+			}
+		}
+		mauMonths.push({ monthStart, monthEnd, mau: users.size, changePct: null });
+	}
+	for (let i = 0; i < mauMonths.length - 1; i++) {
+		const prev = mauMonths[i + 1].mau;
+		if (prev > 0) {
+			mauMonths[i].changePct = Math.round(((mauMonths[i].mau - prev) / prev) * 1000) / 10;
+		}
+	}
+
+	// Calendar month windows
+	const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+	const [todayYear, todayMonth, todayDay] = todayEst.split('-').map(Number);
+
+	const calendarMauMonths: {
+		label: string;
+		monthStart: string;
+		monthEnd: string;
+		mau: number;
+		daysElapsed: number;
+		daysInMonth: number;
+		projectedMau: number | null;
+		changePct: number | null;
+		isCurrentMonth: boolean;
+	}[] = [];
+
+	for (let i = 0; i < 6; i++) {
+		let mo = todayMonth - i;
+		let yr = todayYear;
+		if (mo <= 0) { mo += 12; yr--; }
+
+		// new Date(yr, mo, 0) gives last day of month mo (1-indexed) in local time
+		const daysInMonth = new Date(yr, mo, 0).getDate();
+		const monthStart = `${yr}-${String(mo).padStart(2, '0')}-01`;
+		const monthEnd = `${yr}-${String(mo).padStart(2, '0')}-${String(daysInMonth).padStart(2, '0')}`;
+		const isCurrentMonth = i === 0;
+		const daysElapsed = isCurrentMonth ? todayDay : daysInMonth;
+		const queryEnd = isCurrentMonth ? todayEst : monthEnd;
+
+		const users = new Set<string>();
+		for (const row of mauCompletions) {
+			if (row.date >= monthStart && row.date <= queryEnd) {
+				users.add(row.anonymousId);
+			}
+		}
+
+		const projectedMau = isCurrentMonth && daysElapsed > 0
+			? Math.round(users.size * (daysInMonth / daysElapsed))
+			: null;
+
+		calendarMauMonths.push({
+			label: `${MONTH_NAMES[mo - 1]} ${yr}`,
+			monthStart,
+			monthEnd,
+			mau: users.size,
+			daysElapsed,
+			daysInMonth,
+			projectedMau,
+			changePct: null,
+			isCurrentMonth
+		});
+	}
+
+	for (let i = 0; i < calendarMauMonths.length - 1; i++) {
+		const curr = calendarMauMonths[i];
+		const prev = calendarMauMonths[i + 1];
+		if (prev.mau > 0) {
+			const compareVal = curr.projectedMau ?? curr.mau;
+			curr.changePct = Math.round(((compareVal - prev.mau) / prev.mau) * 1000) / 10;
+		}
+	}
+
+	return {
+		todayEst,
+		sessionDepthCards,
+		stats: {
+			todayCount,
+			totalCount,
+			uniquePlayers,
+			weeklyPlayers,
+			activeStreaks,
+			avgGuessesToday,
+			registeredUsers,
+			monthlyPlayers
+		},
+		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
+		},
+		wauWeeks,
+		avgWau,
+		mauMonths,
+		calendarMauMonths
+	};
+};

src/routes/global/+page.svelte

@@ -0,0 +1,627 @@
+<script lang="ts">
+	import Container from "$lib/components/Container.svelte";
+	import CollapsibleTable from "$lib/components/CollapsibleTable.svelte";
+
+	interface Stats {
+		todayCount: number;
+		totalCount: number;
+		uniquePlayers: number;
+		weeklyPlayers: number;
+		activeStreaks: number;
+		avgGuessesToday: number | null;
+		registeredUsers: number;
+		monthlyPlayers: number;
+	}
+
+	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;
+		};
+		wauWeeks: {
+			weekStart: string;
+			weekEnd: string;
+			wau: number;
+			changePct: number | null;
+		}[];
+		avgWau: number;
+		mauMonths: { monthStart: string; monthEnd: string; mau: number; changePct: number | null }[];
+		calendarMauMonths: {
+			label: string;
+			monthStart: string;
+			monthEnd: string;
+			mau: number;
+			daysElapsed: number;
+			daysInMonth: number;
+			projectedMau: number | null;
+			changePct: number | null;
+			isCurrentMonth: boolean;
+		}[];
+		sessionDepthCards: { depth: number; players: number; returnRate: number | null }[];
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	const {
+		stats,
+		last14Days,
+		todayEst,
+		streakChart,
+		growth,
+		retention7dSeries,
+		retention30dSeries,
+		overallReturnRate,
+		newPlayerReturnSeries,
+		newPlayerReturnVelocity,
+		wauWeeks,
+		avgWau,
+		mauMonths,
+		calendarMauMonths,
+		sessionDepthCards,
+	} = $derived(data);
+
+	let mauMode = $state<'rolling' | 'calendar'>('rolling');
+
+	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 maxWau = $derived(Math.max(1, ...wauWeeks.map((w) => w.wau)));
+	const maxStreakCount = $derived(Math.max(1, ...streakChart.map((r) => r.count)));
+	const maxMau = $derived(Math.max(1, ...mauMonths.map((m) => m.mau)));
+	const maxCalMau = $derived(Math.max(1, ...calendarMauMonths.map((m) => m.projectedMau ?? m.mau)));
+
+	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: "Registered Users", value: String(stats.registeredUsers) },
+		{ label: "Players This Month", value: String(stats.monthlyPlayers) },
+		{
+			label: "Overall Return Rate",
+			value: overallReturnRate != null ? `${overallReturnRate}%` : "N/A",
+		},
+	]);
+
+	const mauModes = [
+		{ value: 'rolling', label: 'Rolling 30d' },
+		{ value: 'calendar', label: 'Calendar' },
+	];
+</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-1">Survival Curve</h2>
+			<p class="text-gray-400 text-sm mb-4">
+				Of players who completed N sessions, what % came back for N+1?
+			</p>
+			<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+				{#each sessionDepthCards as card (card.depth)}
+					<Container class="w-full p-5 gap-2">
+						<span class="text-gray-400 text-xs uppercase tracking-wide text-center"
+							>After {card.depth} plays</span
+						>
+						<span class="text-2xl md:text-3xl font-bold text-gray-100">
+							{card.returnRate != null ? `${card.returnRate}%` : "N/A"}
+						</span>
+						<span class="text-xs text-gray-500 text-center"
+							>{card.players} players</span
+						>
+					</Container>
+				{/each}
+			</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>
+
+			<CollapsibleTable
+				rows={newPlayerReturnSeries}
+				headers={[
+					{ label: 'Date' },
+					{ label: 'New Players', align: 'right' },
+					{ label: 'Return Rate', align: 'right' },
+					{ label: '7d Avg', align: 'right' },
+					{ label: '', width: 'w-32' },
+				]}
+			>
+				{#snippet row(item)}
+					<td class="px-4 py-3 text-gray-300">{item.date}</td>
+					<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohort}</td>
+					<td class="px-4 py-3 text-right text-gray-400">
+						{item.rate != null ? `${item.rate}%` : '—'}
+					</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">
+						{item.rollingAvg != null ? `${item.rollingAvg}%` : '—'}
+					</td>
+					<td class="px-4 py-3">
+						<div class="w-full min-w-20">
+							{#if item.rollingAvg != null}
+								<div class="bg-sky-500 h-4 rounded" style="width: {item.rollingAvg}%"></div>
+							{/if}
+						</div>
+					</td>
+				{/snippet}
+			</CollapsibleTable>
+		</section>
+
+		<section class="mt-8">
+			<h2 class="text-lg font-semibold text-gray-100 mb-1">
+				Weekly Active Users
+			</h2>
+			<p class="text-gray-400 text-sm mb-4">
+				Unique players per 7-day window. Most recent week first. Avg
+				WAU: <span class="text-gray-100 font-medium">{avgWau}</span>
+			</p>
+			<CollapsibleTable
+				rows={wauWeeks}
+				headers={[
+					{ label: 'Week' },
+					{ label: 'Active Users', align: 'right' },
+					{ label: 'Wk/Wk Change', align: 'right' },
+					{ label: '', width: 'w-48' },
+				]}
+			>
+				{#snippet row(item)}
+					{@const barPct = Math.round((item.wau / maxWau) * 100)}
+					<td class="px-4 py-3 text-gray-300 text-xs">{item.weekStart} – {item.weekEnd}</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.wau}</td>
+					<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
+						? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
+						: 'text-gray-500'}">
+						{item.changePct != null ? signed(item.changePct, '%') : '—'}
+					</td>
+					<td class="px-4 py-3">
+						<div class="w-full min-w-24">
+							<div class="bg-indigo-500 h-4 rounded" style="width: {barPct}%"></div>
+						</div>
+					</td>
+				{/snippet}
+			</CollapsibleTable>
+		</section>
+
+		<section class="mt-8">
+			<h2 class="text-lg font-semibold text-gray-100 mb-1">Monthly Active Users</h2>
+			<p class="text-gray-400 text-sm mb-4">
+				{mauMode === 'rolling'
+					? 'Unique players per 30-day window. Most recent first.'
+					: 'Unique players per calendar month. Current month projected to end of month.'}
+			</p>
+
+			{#if mauMode === 'rolling'}
+				<CollapsibleTable
+					rows={mauMonths}
+					headers={[
+						{ label: 'Period' },
+						{ label: 'Active Users', align: 'right' },
+						{ label: 'Mo/Mo Change', align: 'right' },
+						{ label: '', width: 'w-48' },
+					]}
+					modes={mauModes}
+					bind:mode={mauMode}
+				>
+					{#snippet row(item)}
+						{@const barPct = Math.round((item.mau / maxMau) * 100)}
+						<td class="px-4 py-3 text-gray-300 text-xs">{item.monthStart} – {item.monthEnd}</td>
+						<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.mau}</td>
+						<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
+							? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
+							: 'text-gray-500'}">
+							{item.changePct != null ? signed(item.changePct, '%') : '—'}
+						</td>
+						<td class="px-4 py-3">
+							<div class="w-full min-w-24">
+								<div class="bg-teal-500 h-4 rounded" style="width: {barPct}%"></div>
+							</div>
+						</td>
+					{/snippet}
+				</CollapsibleTable>
+			{:else}
+				<CollapsibleTable
+					rows={calendarMauMonths}
+					headers={[
+						{ label: 'Month' },
+						{ label: 'Active Users', align: 'right' },
+						{ label: 'Mo/Mo Change', align: 'right' },
+						{ label: '', width: 'w-48' },
+					]}
+					modes={mauModes}
+					bind:mode={mauMode}
+				>
+					{#snippet row(item)}
+						{@const displayMau = item.projectedMau ?? item.mau}
+						{@const barPct = Math.round((displayMau / maxCalMau) * 100)}
+						<td class="px-4 py-3 text-gray-300">
+							{item.label}
+							{#if item.isCurrentMonth}
+								<span class="text-xs text-gray-500 ml-1">(projected)</span>
+							{/if}
+						</td>
+						<td class="px-4 py-3 text-right font-medium {item.isCurrentMonth ? 'text-gray-400' : 'text-gray-100'}">
+							{#if item.isCurrentMonth}
+								<span class="text-gray-500 text-xs">{item.mau} → </span>{item.projectedMau ?? item.mau}
+							{:else}
+								{item.mau}
+							{/if}
+						</td>
+						<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
+							? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
+							: 'text-gray-500'}">
+							{#if item.changePct != null}
+								{item.isCurrentMonth ? '~' : ''}{signed(item.changePct, '%')}
+							{:else}
+								—
+							{/if}
+						</td>
+						<td class="px-4 py-3">
+							<div class="w-full min-w-24">
+								<div class="bg-teal-500 h-4 rounded {item.isCurrentMonth ? 'opacity-50' : ''}" style="width: {barPct}%"></div>
+							</div>
+						</td>
+					{/snippet}
+				</CollapsibleTable>
+			{/if}
+		</section>
+
+		<section class="mt-8">
+			<h2 class="text-lg font-semibold text-gray-100 mb-4">
+				Last 14 Days — Completions
+			</h2>
+			<CollapsibleTable
+				rows={last14Days}
+				headers={[
+					{ label: 'Date' },
+					{ label: 'Completions', align: 'right' },
+					{ label: '', width: 'w-48' },
+				]}
+			>
+				{#snippet row(item)}
+					{@const barPct = Math.round((item.count / maxCount) * 100)}
+					<td class="px-4 py-3 text-gray-300">{item.date}</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.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>
+				{/snippet}
+			</CollapsibleTable>
+		</section>
+
+		<section class="mt-8">
+			<h2 class="text-lg font-semibold text-gray-100 mb-4">
+				Active Streak Distribution
+			</h2>
+			<CollapsibleTable
+				rows={streakChart}
+				headers={[
+					{ label: 'Days' },
+					{ label: 'Players', align: 'right' },
+					{ label: '', width: 'w-48' },
+				]}
+			>
+				{#snippet row(item)}
+					{@const barPct = Math.round((item.count / maxStreakCount) * 100)}
+					<td class="px-4 py-3 text-gray-300">{item.days}</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.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>
+				{/snippet}
+				{#snippet empty()}
+					<p class="text-gray-400 text-sm px-4 py-6">No active streaks yet.</p>
+				{/snippet}
+			</CollapsibleTable>
+		</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 played again exactly 7 or 30 days later (regardless of activity in between). 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>
+					<CollapsibleTable
+						rows={retention7dSeries}
+						headers={[
+							{ label: 'Cohort Date' },
+							{ label: 'n', align: 'right' },
+							{ label: 'Ret. %', align: 'right' },
+							{ label: '', width: 'w-32' },
+						]}
+					>
+						{#snippet row(item)}
+							<td class="px-4 py-3 text-gray-300">{item.date}</td>
+							<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohortSize}</td>
+							<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.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: {item.rate}%"></div>
+								</div>
+							</td>
+						{/snippet}
+					</CollapsibleTable>
+				</div>
+
+				<!-- 30-day retention -->
+				<div>
+					<h3 class="text-base font-semibold text-gray-200 mb-3">
+						30-Day Retention
+					</h3>
+					<CollapsibleTable
+						rows={retention30dSeries}
+						headers={[
+							{ label: 'Cohort Date' },
+							{ label: 'n', align: 'right' },
+							{ label: 'Ret. %', align: 'right' },
+							{ label: '', width: 'w-32' },
+						]}
+					>
+						{#snippet row(item)}
+							<td class="px-4 py-3 text-gray-300">{item.date}</td>
+							<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohortSize}</td>
+							<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.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: {item.rate}%"></div>
+								</div>
+							</td>
+						{/snippet}
+					</CollapsibleTable>
+				</div>
+			</div>
+		</section>
+	</div>
+</div>

src/routes/layout.css

@@ -2,12 +2,29 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
 	--font-triodion: "PT Serif", serif;
 }
 
 html, body {
 	background: oklch(89.126% 0.06134 298.626);
+	transition: background 0.3s ease;
+}
+
+@media (prefers-color-scheme: dark) {
+	html:not(.light), body:not(.light) {
+		background: oklch(18% 0.03 298.626);
+	}
+}
+
+html.dark, html.dark body {
+	background: oklch(18% 0.03 298.626);
+}
+
+html.light, html.light body {
+	background: oklch(89.126% 0.06134 298.626);
 }
 
 .big-text {
@@ -18,6 +35,20 @@ html, body {
 	font-weight: 700;
 }
 
+@media (prefers-color-scheme: dark) {
+	html:not(.light) .big-text {
+		color: rgb(156 163 175);
+	}
+}
+
+html.dark .big-text {
+	color: rgb(156 163 175);
+}
+
+html.light .big-text {
+	color: rgb(107 114 128);
+}
+
 /* Page load animations */
 @keyframes fadeInUp {
 	from {
@@ -48,4 +79,4 @@ html, body {
 
 .animate-delay-800 {
 	animation-delay: 0.8s;
-}
+}

src/routes/progress/+page.server.ts

@@ -0,0 +1,287 @@
+import { db } from '$lib/server/db';
+import { dailyCompletions, dailyVerses } from '$lib/server/db/schema';
+import { eq, desc } from 'drizzle-orm';
+import type { PageServerLoad } from './$types';
+import { bibleBooks } from '$lib/types/bible';
+import { calculateMilestones } from '$lib/server/milestones';
+import type { Milestone } from '$lib/server/milestones';
+
+export type BookTier = 'unseen' | 'explored' | 'mastered' | 'perfect';
+
+export type BookGridEntry = {
+	bookId: string;
+	tier: BookTier;
+	avgGuesses: number | null;
+	count: number;
+};
+
+export type ChartPoint = {
+	label: string;
+	avgGuesses: number;
+};
+
+export type SectionStat = {
+	section: string;
+	avgGuesses: number;
+	count: number;
+};
+
+export type TestamentStat = {
+	avgGuesses: number;
+	count: number;
+} | null;
+
+export type { Milestone };
+
+export type ProgressData = {
+	completions: Array<{ date: string; guessCount: number }>;
+	chartPoints: ChartPoint[];
+	bookGrid: BookGridEntry[];
+	sectionStats: SectionStat[];
+	testamentStats: { old: TestamentStat; new: TestamentStat };
+	totalSolves: number;
+	bestStreak: number;
+	currentStreak: number;
+	booksExplored: number;
+	booksMastered: number;
+	booksPerfect: number;
+	bestSingleGame: { date: string; bookName: string } | null;
+	totalWords: number;
+	streakMilestones: { days7: string | null; days14: string | null; days30: string | null };
+	milestones: Milestone[];
+};
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!locals.user) {
+		return {
+			progress: null,
+			requiresAuth: true,
+			user: null,
+			session: null,
+		};
+	}
+
+	const userId = locals.user.id;
+
+	try {
+		const completions = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, userId))
+			.orderBy(desc(dailyCompletions.date));
+
+		if (completions.length === 0) {
+			return {
+				progress: {
+					completions: [],
+					chartPoints: [],
+					bookGrid: bibleBooks.map(b => ({ bookId: b.id, tier: 'unseen' as BookTier, avgGuesses: null, count: 0 })),
+					sectionStats: [],
+					testamentStats: { old: null, new: null },
+					totalSolves: 0,
+					bestStreak: 0,
+					currentStreak: 0,
+					booksExplored: 0,
+					booksMastered: 0,
+					booksPerfect: 0,
+					bestSingleGame: null,
+					totalWords: 0,
+					streakMilestones: { days7: null, days14: null, days30: null },
+					milestones: [],
+				} satisfies ProgressData,
+				requiresAuth: false,
+				user: locals.user,
+				session: locals.session,
+			};
+		}
+
+		// Map dates to book IDs and verse text via cached daily_verses
+		const allVerses = await db.select().from(dailyVerses);
+		const dateToBookId = new Map(allVerses.map(v => [v.date, v.bookId]));
+		const dateToVerseText = new Map(allVerses.map(v => [v.date, v.verseText]));
+
+		// Total words across all played verses
+		let totalWords = 0;
+		for (const c of completions) {
+			const verseText = dateToVerseText.get(c.date);
+			if (verseText) {
+				totalWords += verseText.trim().split(/\s+/).length;
+			}
+		}
+
+		// Per-book stats
+		const bookStatsMap = new Map<string, { count: number; totalGuesses: number; everGuessedIn1: boolean }>();
+		for (const c of completions) {
+			const bookId = dateToBookId.get(c.date);
+			if (!bookId) continue;
+			const existing = bookStatsMap.get(bookId) ?? { count: 0, totalGuesses: 0, everGuessedIn1: false };
+			bookStatsMap.set(bookId, {
+				count: existing.count + 1,
+				totalGuesses: existing.totalGuesses + c.guessCount,
+				everGuessedIn1: existing.everGuessedIn1 || c.guessCount === 1,
+			});
+		}
+
+		// Book grid (all 66 in canonical order)
+		const bookGrid: BookGridEntry[] = bibleBooks.map(book => {
+			const stats = bookStatsMap.get(book.id);
+			if (!stats) return { bookId: book.id, tier: 'unseen', avgGuesses: null, count: 0 };
+			const avgGuesses = stats.totalGuesses / stats.count;
+			let tier: BookTier = 'explored';
+			if (stats.count >= 2 && avgGuesses <= 3) {
+				tier = stats.everGuessedIn1 ? 'perfect' : 'mastered';
+			}
+			return { bookId: book.id, tier, avgGuesses: Math.round(avgGuesses * 10) / 10, count: stats.count };
+		});
+
+		// Section stats
+		const sectionMap = new Map<string, { totalGuesses: number; count: number }>();
+		for (const c of completions) {
+			const bookId = dateToBookId.get(c.date);
+			if (!bookId) continue;
+			const book = bibleBooks.find(b => b.id === bookId);
+			if (!book) continue;
+			const existing = sectionMap.get(book.section) ?? { totalGuesses: 0, count: 0 };
+			sectionMap.set(book.section, { totalGuesses: existing.totalGuesses + c.guessCount, count: existing.count + 1 });
+		}
+		const sectionStats: SectionStat[] = Array.from(sectionMap.entries())
+			.filter(([, s]) => s.count >= 3)
+			.map(([section, s]) => ({ section, avgGuesses: Math.round((s.totalGuesses / s.count) * 10) / 10, count: s.count }))
+			.sort((a, b) => a.avgGuesses - b.avgGuesses);
+
+		// Testament stats (only show if ≥5 games per testament)
+		let otTotal = 0, otCount = 0, ntTotal = 0, ntCount = 0;
+		for (const c of completions) {
+			const bookId = dateToBookId.get(c.date);
+			if (!bookId) continue;
+			const book = bibleBooks.find(b => b.id === bookId);
+			if (!book) continue;
+			if (book.testament === 'old') { otTotal += c.guessCount; otCount++; }
+			else { ntTotal += c.guessCount; ntCount++; }
+		}
+		const testamentStats = {
+			old: otCount >= 5 ? { avgGuesses: Math.round((otTotal / otCount) * 10) / 10, count: otCount } : null,
+			new: ntCount >= 5 ? { avgGuesses: Math.round((ntTotal / ntCount) * 10) / 10, count: ntCount } : null,
+		};
+
+		// Chart points — monthly averages sorted ascending
+		const sortedCompletions = [...completions].sort((a, b) => a.date.localeCompare(b.date));
+		const monthMap = new Map<string, { totalGuesses: number; count: number }>();
+		for (const c of sortedCompletions) {
+			const month = c.date.slice(0, 7); // YYYY-MM
+			const existing = monthMap.get(month) ?? { totalGuesses: 0, count: 0 };
+			monthMap.set(month, { totalGuesses: existing.totalGuesses + c.guessCount, count: existing.count + 1 });
+		}
+		let chartPoints: ChartPoint[] = Array.from(monthMap.entries())
+			.map(([label, m]) => ({ label, avgGuesses: Math.round((m.totalGuesses / m.count) * 10) / 10 }));
+
+		// Fall back to weekly if fewer than 3 months of data
+		if (chartPoints.length < 3 && sortedCompletions.length >= 5) {
+			const weekMap = new Map<string, { totalGuesses: number; count: number }>();
+			for (const c of sortedCompletions) {
+				const d = new Date(c.date + 'T00:00:00Z');
+				const year = d.getUTCFullYear();
+				const week = getISOWeek(d);
+				const key = `${year}-W${String(week).padStart(2, '0')}`;
+				const existing = weekMap.get(key) ?? { totalGuesses: 0, count: 0 };
+				weekMap.set(key, { totalGuesses: existing.totalGuesses + c.guessCount, count: existing.count + 1 });
+			}
+			chartPoints = Array.from(weekMap.entries())
+				.map(([label, m]) => ({ label, avgGuesses: Math.round((m.totalGuesses / m.count) * 10) / 10 }));
+		}
+
+		// Best streak (all-time) + streak milestones
+		const sortedDates = completions.map(c => c.date).sort();
+		let bestStreak = sortedDates.length > 0 ? 1 : 0;
+		let tempStreak = 1;
+		const streakMilestones: { days7: string | null; days14: string | null; days30: string | null } = { days7: null, days14: null, days30: null };
+		for (let i = 1; i < sortedDates.length; i++) {
+			const curr = new Date(sortedDates[i] + 'T00:00:00Z');
+			const prev = new Date(sortedDates[i - 1] + 'T00:00:00Z');
+			const diff = Math.round((curr.getTime() - prev.getTime()) / 86400000);
+			if (diff === 1) { tempStreak++; }
+			else { bestStreak = Math.max(bestStreak, tempStreak); tempStreak = 1; }
+			if (tempStreak >= 7 && !streakMilestones.days7) streakMilestones.days7 = sortedDates[i];
+			if (tempStreak >= 14 && !streakMilestones.days14) streakMilestones.days14 = sortedDates[i];
+			if (tempStreak >= 30 && !streakMilestones.days30) streakMilestones.days30 = sortedDates[i];
+		}
+		bestStreak = Math.max(bestStreak, tempStreak);
+
+		// Server-side current streak estimate (client overrides via /api/streak)
+		const userToday = new Date().toISOString().slice(0, 10);
+		const yesterday = new Date(new Date(userToday + 'T00:00:00Z').getTime() - 86400000).toISOString().slice(0, 10);
+		const lastDate = sortedDates[sortedDates.length - 1] ?? '';
+		let currentStreak = 0;
+		if (lastDate === userToday || lastDate === yesterday) {
+			currentStreak = 1;
+			for (let i = sortedDates.length - 2; i >= 0; i--) {
+				const curr = new Date(sortedDates[i + 1] + 'T00:00:00Z');
+				const prev = new Date(sortedDates[i] + 'T00:00:00Z');
+				const diff = Math.round((curr.getTime() - prev.getTime()) / 86400000);
+				if (diff === 1) currentStreak++;
+				else break;
+			}
+		}
+
+		// Milestone counts
+		const booksExplored = bookStatsMap.size;
+		const booksMastered = bookGrid.filter(b => b.tier === 'mastered' || b.tier === 'perfect').length;
+		const booksPerfect = bookGrid.filter(b => b.tier === 'perfect').length;
+
+		// Best single game (earliest 1-guess solve)
+		let bestSingleGame: { date: string; bookName: string } | null = null;
+		for (const c of sortedCompletions) {
+			if (c.guessCount === 1) {
+				const bookId = dateToBookId.get(c.date);
+				const book = bookId ? bibleBooks.find(b => b.id === bookId) : null;
+				if (book) {
+					bestSingleGame = { date: c.date, bookName: book.name };
+					break;
+				}
+			}
+		}
+
+		const milestones = await calculateMilestones(completions, dateToBookId, { bestSingleGame, streakMilestones });
+
+		return {
+			progress: {
+				completions: completions.map(c => ({ date: c.date, guessCount: c.guessCount })),
+				chartPoints,
+				bookGrid,
+				sectionStats,
+				testamentStats,
+				totalSolves: completions.length,
+				bestStreak,
+				currentStreak,
+				booksExplored,
+				booksMastered,
+				booksPerfect,
+				bestSingleGame,
+				totalWords,
+				streakMilestones,
+				milestones,
+			} satisfies ProgressData,
+			requiresAuth: false,
+			user: locals.user,
+			session: locals.session,
+		};
+
+	} catch (error) {
+		console.error('Error fetching progress data:', error);
+		return {
+			progress: null,
+			error: 'Failed to load progress data',
+			requiresAuth: false,
+			user: locals.user,
+			session: locals.session,
+		};
+	}
+};
+
+function getISOWeek(d: Date): number {
+	const date = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()));
+	const dayNum = date.getUTCDay() || 7;
+	date.setUTCDate(date.getUTCDate() + 4 - dayNum);
+	const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+	return Math.ceil((((date.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+}

src/routes/progress/+page.svelte

@@ -0,0 +1,627 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { onMount } from "svelte";
+	import AuthModal from "$lib/components/AuthModal.svelte";
+	import Container from "$lib/components/Container.svelte";
+	import ProgressStatCard from "$lib/components/ProgressStatCard.svelte";
+	import ActivityCalendar from "$lib/components/ActivityCalendar.svelte";
+	import { bibleBooks } from "$lib/types/bible";
+
+	type BookTier = "unseen" | "explored" | "mastered" | "perfect";
+
+	type BookGridEntry = {
+		bookId: string;
+		tier: BookTier;
+		avgGuesses: number | null;
+		count: number;
+	};
+
+	type ChartPoint = {
+		label: string;
+		avgGuesses: number;
+	};
+
+	type SectionStat = {
+		section: string;
+		avgGuesses: number;
+		count: number;
+	};
+
+	type Milestone = {
+		id: string;
+		name: string;
+		emoji: string;
+		description: string;
+		achieved: boolean;
+		achievedDate: string | null;
+	};
+
+	type ProgressData = {
+		completions: Array<{ date: string; guessCount: number }>;
+		chartPoints: ChartPoint[];
+		bookGrid: BookGridEntry[];
+		sectionStats: SectionStat[];
+		testamentStats: {
+			old: { avgGuesses: number; count: number } | null;
+			new: { avgGuesses: number; count: number } | null;
+		};
+		totalSolves: number;
+		bestStreak: number;
+		currentStreak: number;
+		booksExplored: number;
+		booksMastered: number;
+		booksPerfect: number;
+		bestSingleGame: { date: string; bookName: string } | null;
+		totalWords: number;
+		streakMilestones: {
+			days7: string | null;
+			days14: string | null;
+			days30: string | null;
+		};
+		milestones: Milestone[];
+	};
+
+	interface PageData {
+		progress: ProgressData | null;
+		error?: string;
+		user?: any;
+		session?: any;
+		requiresAuth?: boolean;
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	let authModalOpen = $state(false);
+	let anonymousId = $state("");
+
+	function getOrCreateAnonymousId(): string {
+		if (!browser) return "";
+		const key = "bibdle-anonymous-id";
+		let id = localStorage.getItem(key);
+		if (!id) {
+			id = crypto.randomUUID();
+			localStorage.setItem(key, id);
+		}
+		return id;
+	}
+
+	function bookTileClass(tier: BookTier): string {
+		switch (tier) {
+			case "perfect":
+				return "bg-emerald-500 text-white";
+			case "mastered":
+				return "bg-purple-600 text-white";
+			case "explored":
+				return "bg-blue-700 text-blue-100";
+			default:
+				return "bg-gray-700/50 text-gray-500";
+		}
+	}
+
+	function formatDate(dateStr: string): string {
+		const d = new Date(dateStr + "T00:00:00Z");
+		return d.toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			timeZone: "UTC",
+		});
+	}
+
+	onMount(() => {
+		anonymousId = getOrCreateAnonymousId();
+	});
+
+	// Derived SVG chart values
+	const chartPoints = $derived(data.progress?.chartPoints ?? []);
+	const showChart = $derived(chartPoints.length >= 3);
+	const maxGuesses = $derived(
+		showChart ? Math.max(...chartPoints.map((p) => p.avgGuesses)) : 6,
+	);
+	const chartImproving = $derived(
+		showChart &&
+			chartPoints[chartPoints.length - 1].avgGuesses <
+				chartPoints[0].avgGuesses,
+	);
+
+	function svgX(index: number, total: number): number {
+		return (index / (total - 1)) * 360 + 20;
+	}
+
+	function svgY(avgGuesses: number, maxG: number): number {
+		return 100 - ((maxG - avgGuesses) / (maxG - 1)) * 90 + 10;
+	}
+
+	const polylinePoints = $derived(
+		showChart
+			? chartPoints
+					.map(
+						(p, i) =>
+							`${svgX(i, chartPoints.length)},${svgY(p.avgGuesses, maxGuesses)}`,
+					)
+					.join(" ")
+			: "",
+	);
+
+	// Insights helpers
+	const progress = $derived(data.progress);
+	const bestSection = $derived(
+		progress?.sectionStats.find((s) => s.count >= 3) ?? null,
+	);
+	const hardestSection = $derived.by(() => {
+		if (!progress) return null;
+		const eligible = progress.sectionStats.filter((s) => s.count >= 3);
+		if (eligible.length === 0) return null;
+		const last = eligible[eligible.length - 1];
+		if (bestSection && last.section === bestSection.section) return null;
+		return last;
+	});
+
+	const showInsights = $derived(
+		progress !== null &&
+			((progress.testamentStats.old !== null &&
+				progress.testamentStats.new !== null) ||
+				bestSection !== null),
+	);
+
+	function testamentComparison(
+		old_: { avgGuesses: number; count: number } | null,
+		new_: { avgGuesses: number; count: number } | null,
+	): string | null {
+		if (!old_ || !new_) return null;
+		const ratio = old_.avgGuesses / new_.avgGuesses;
+		if (ratio < 0.85) {
+			const x = (new_.avgGuesses / old_.avgGuesses).toFixed(1);
+			return `You're ${x}x faster at Old Testament books`;
+		}
+		if (ratio > 1.18) {
+			const x = (old_.avgGuesses / new_.avgGuesses).toFixed(1);
+			return `You're ${x}x faster at New Testament books`;
+		}
+		return "Your speed is similar for Old and New Testament books";
+	}
+</script>
+
+<svelte:head>
+	<title>Your Progress | Bibdle</title>
+	<meta
+		name="description"
+		content="Track your Bible knowledge journey with Bibdle"
+	/>
+</svelte:head>
+
+<div
+	class="min-h-screen bg-linear-to-br from-gray-900 via-slate-900 to-gray-900 p-4 md:p-8"
+>
+	<div class="max-w-3xl mx-auto">
+		<!-- Header -->
+		<div class="text-center mb-6 md:mb-8">
+			<h1 class="text-3xl md:text-4xl font-bold text-gray-100 mb-4">
+				Your Progress
+			</h1>
+
+			<a href="/" class="p-2 px-20 w-full items-center text-gray-300">
+				&larr; Back to Game
+			</a>
+		</div>
+
+		{#if data.requiresAuth}
+			<div class="text-center py-12">
+				<div
+					class="bg-blue-950/50 border border-blue-800/50 rounded-lg p-8 max-w-md mx-auto backdrop-blur-sm"
+				>
+					<h2 class="text-2xl font-bold text-blue-200 mb-4">
+						Authentication Required
+					</h2>
+					<p class="text-blue-300 mb-6">
+						You must be logged in to see your progress.
+					</p>
+					<div class="flex flex-col gap-3">
+						<button
+							onclick={() => (authModalOpen = true)}
+							class="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+						>
+							Sign In / Sign Up
+						</button>
+						<a
+							href="/"
+							class="inline-flex items-center justify-center px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium"
+						>
+							&larr; Back to Game
+						</a>
+					</div>
+				</div>
+			</div>
+		{:else if data.error}
+			<div class="text-center py-12">
+				<div
+					class="bg-red-950/50 border border-red-800/50 rounded-lg p-6 max-w-md mx-auto backdrop-blur-sm"
+				>
+					<p class="text-red-300">{data.error}</p>
+					<a
+						href="/"
+						class="mt-4 inline-block px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+					>
+						Return to Game
+					</a>
+				</div>
+			</div>
+		{:else if !data.progress}
+			<div class="text-center py-12">
+				<Container class="p-8 max-w-md mx-auto">
+					<div class="text-yellow-400 mb-4 text-lg">
+						No progress yet.
+					</div>
+					<p class="text-gray-300 mb-6">
+						Start playing to build your Bible knowledge journey!
+					</p>
+					<a
+						href="/"
+						class="inline-flex items-center px-6 py-2.5 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors font-medium shadow-md"
+					>
+						Start Playing
+					</a>
+				</Container>
+			</div>
+		{:else}
+			{@const prog = data.progress}
+
+			<!-- Key Stats Row -->
+			<div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 mb-6">
+				<ProgressStatCard
+					emoji="📅"
+					value={String(prog.totalSolves)}
+					label="Total Played"
+					colorClass="text-blue-400"
+				/>
+				<ProgressStatCard
+					emoji="📖"
+					value={String(prog.booksExplored)}
+					label="Books Explored"
+					colorClass="text-teal-400"
+					suffix="/ 66"
+				/>
+				<ProgressStatCard
+					emoji="✍️"
+					value={prog.totalWords.toLocaleString()}
+					label="Words Read"
+					colorClass="text-violet-400"
+				/>
+				<ProgressStatCard
+					emoji="✝️"
+					value={(((prog.totalSolves * 3) / 31102) * 100).toFixed(2) +
+						"%"}
+					label="Bible Read"
+					colorClass="text-amber-400"
+				/>
+				<ProgressStatCard
+					emoji="🏆"
+					value={String(prog.booksMastered)}
+					label="Books Mastered"
+					colorClass="text-purple-400"
+					suffix="/ 66"
+				/>
+				<ProgressStatCard
+					emoji="⭐"
+					value={String(prog.booksPerfect)}
+					label="Books Perfected"
+					colorClass="text-emerald-400"
+					suffix="/ 66"
+				/>
+			</div>
+
+			<!-- Bible Book Grid -->
+			<div class="mb-6">
+				<Container class="p-4 md:p-6 w-full">
+					<h2
+						class="text-xl font-bold text-gray-100 mb-3 w-full text-left"
+					>
+						Bible Books
+					</h2>
+					<!-- Legend -->
+					<div class="flex flex-wrap gap-2 mb-3">
+						<span
+							class="flex items-center gap-1 text-xs text-gray-400"
+						>
+							<span
+								class="inline-block w-5 h-5 rounded bg-blue-700"
+							></span>
+							Explored
+						</span>
+						<span
+							class="flex items-center gap-1 text-xs text-gray-400"
+						>
+							<span
+								class="inline-block w-5 h-5 rounded bg-purple-600"
+							></span>
+							Mastered
+						</span>
+						<span
+							class="flex items-center gap-1 text-xs text-gray-400"
+						>
+							<span
+								class="inline-block w-5 h-5 rounded bg-emerald-500"
+							></span>
+							Perfect
+						</span>
+					</div>
+					<!-- Grid -->
+					<div class="grid grid-cols-8 md:grid-cols-11 gap-1 w-full">
+						{#each prog.bookGrid as entry (entry.bookId)}
+							{@const bookMeta = bibleBooks.find(
+								(b) => b.id === entry.bookId,
+							)}
+							<div
+								class="aspect-square flex items-center justify-center rounded text-[9px] md:text-[10px] font-bold cursor-default {bookTileClass(
+									entry.tier,
+								)}"
+								title="{bookMeta?.name ??
+									entry.bookId} — {entry.tier}{entry.avgGuesses !==
+								null
+									? ` (avg ${entry.avgGuesses})`
+									: ''}"
+							>
+								{entry.bookId}
+							</div>
+						{/each}
+					</div>
+					<p class="text-xs text-gray-500 mt-3 leading-relaxed">
+						<span class="text-blue-400 font-medium">Explored</span>
+						— played at least once<br />
+						<span class="text-purple-400 font-medium"
+							>Mastered</span
+						>
+						— avg &le; 3 guesses over 2+ plays<br />
+						<span class="text-emerald-400 font-medium">Perfect</span> —
+						mastered and guessed in 1 at least once
+					</p>
+				</Container>
+			</div>
+
+			<!-- Activity Calendar -->
+			<div class="mb-6">
+				<ActivityCalendar completions={prog.completions} />
+			</div>
+
+			<!-- Skill Growth Chart (hidden, needs rework) -->
+			{#if false && showChart}
+				<div class="mb-6">
+					<Container class="p-4 md:p-6 w-full">
+						<div class="w-full">
+							<div class="flex items-baseline gap-2 mb-1">
+								<h2 class="text-xl font-bold text-gray-100">
+									Skill Growth
+								</h2>
+								<span class="text-xs text-gray-400">
+									Lower is better
+								</span>
+							</div>
+							<svg
+								viewBox="0 0 400 135"
+								class="w-full"
+								aria-hidden="true"
+							>
+								<defs>
+									<linearGradient
+										id="chartFill"
+										x1="0"
+										y1="0"
+										x2="0"
+										y2="1"
+									>
+										<stop
+											offset="0%"
+											stop-color="#10b981"
+											stop-opacity="0.3"
+										/>
+										<stop
+											offset="100%"
+											stop-color="#10b981"
+											stop-opacity="0"
+										/>
+									</linearGradient>
+								</defs>
+								<!-- Y-axis label -->
+								<text
+									transform="translate(8, 60) rotate(-90)"
+									text-anchor="middle"
+									font-size="8"
+									fill="#9ca3af"
+								>Guesses</text>
+								<!-- Fill polygon -->
+								<polygon
+									points="{polylinePoints} {svgX(
+										chartPoints.length - 1,
+										chartPoints.length,
+									)},110 {svgX(0, chartPoints.length)},110"
+									fill="url(#chartFill)"
+								/>
+								<!-- Line -->
+								<polyline
+									points={polylinePoints}
+									fill="none"
+									stroke="#10b981"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+								<!-- Dots -->
+								{#each chartPoints as point, i (i)}
+									<circle
+										cx={svgX(i, chartPoints.length)}
+										cy={svgY(point.avgGuesses, maxGuesses)}
+										r="3"
+										fill="#10b981"
+									/>
+									<text
+										x={svgX(i, chartPoints.length)}
+										y={svgY(point.avgGuesses, maxGuesses) - 6}
+										font-size="7"
+										fill="#6ee7b7"
+										text-anchor="middle"
+									>{point.avgGuesses}</text>
+								{/each}
+								<!-- X-axis labels -->
+								<text
+									x={svgX(0, chartPoints.length)}
+									y="118"
+									font-size="8"
+									fill="#9ca3af"
+									text-anchor="middle"
+								>
+									{chartPoints[0].label}
+								</text>
+								<text
+									x={svgX(
+										chartPoints.length - 1,
+										chartPoints.length,
+									)}
+									y="118"
+									font-size="8"
+									fill="#9ca3af"
+									text-anchor="middle"
+								>
+									{chartPoints[chartPoints.length - 1].label}
+								</text>
+								<!-- X-axis title -->
+								<text
+									x="200"
+									y="132"
+									font-size="8"
+									fill="#9ca3af"
+									text-anchor="middle"
+								>Date</text>
+							</svg>
+							{#if chartImproving}
+								<p class="text-xs text-emerald-400 mt-1">
+									You're getting better!
+								</p>
+							{/if}
+							<p
+								class="text-xs text-gray-500 mt-2 leading-relaxed"
+							>
+								Each point is your average guesses over a
+								rolling window of games. A downward trend means
+								you're improving.
+							</p>
+						</div>
+					</Container>
+				</div>
+			{/if}
+
+			<!-- Achievements -->
+			{#if prog.milestones.length > 0}
+				<div class="mb-6">
+					<h2 class="text-xl font-bold text-gray-100 mb-3">🏆 Achievements</h2>
+					<div class="grid grid-cols-3 md:grid-cols-4 gap-2 md:gap-3">
+						{#each prog.milestones.filter(m => m.achieved) as milestone (milestone.id)}
+							<Container class="p-3 min-h-[130px]">
+								<div class="text-center flex flex-col items-center justify-center h-full">
+									<div class="text-2xl mb-1">{milestone.emoji}</div>
+									<div class="text-sm font-bold text-yellow-300 leading-tight mb-1">
+										{milestone.name}
+									</div>
+									<div class="text-xs text-gray-400 leading-tight">
+										{milestone.description}
+									</div>
+									{#if milestone.achievedDate}
+										<div class="text-[10px] text-gray-500 mt-1">
+											{formatDate(milestone.achievedDate)}
+										</div>
+									{:else}
+										<div class="text-[10px] text-emerald-500 mt-1">Earned</div>
+									{/if}
+								</div>
+							</Container>
+						{/each}
+					</div>
+					<p class="text-xs text-gray-500 mt-2">{prog.milestones.filter(m => m.achieved).length} / {prog.milestones.length} achievements unlocked</p>
+				</div>
+			{/if}
+
+			<!-- Insights -->
+			{#if showInsights}
+				<div class="mb-6">
+					<h2 class="text-xl font-bold text-gray-100 mb-3">
+						Insights
+					</h2>
+					<div class="flex flex-col gap-3">
+						{#if prog.testamentStats.old && prog.testamentStats.new}
+							{@const comparison = testamentComparison(
+								prog.testamentStats.old,
+								prog.testamentStats.new,
+							)}
+							{#if comparison}
+								<Container class="p-4 w-full">
+									<div class="flex items-start gap-3 w-full">
+										<span class="text-2xl">📊</span>
+										<div class="flex-1 min-w-0">
+											<p
+												class="text-gray-100 font-medium text-sm"
+											>
+												{comparison}
+											</p>
+											<p
+												class="text-gray-400 text-xs mt-0.5"
+											>
+												OT avg: {prog.testamentStats.old
+													.avgGuesses} guesses &bull; NT
+												avg: {prog.testamentStats.new
+													.avgGuesses} guesses
+											</p>
+										</div>
+									</div>
+								</Container>
+							{/if}
+						{/if}
+
+						{#if bestSection && bestSection.count >= 3}
+							<Container class="p-4 w-full">
+								<div class="flex items-start gap-3 w-full">
+									<span class="text-2xl">🌟</span>
+									<div class="flex-1 min-w-0">
+										<p
+											class="text-gray-100 font-medium text-sm"
+										>
+											Your strongest section: {bestSection.section}
+										</p>
+										<p class="text-gray-400 text-xs mt-0.5">
+											{bestSection.avgGuesses} avg guesses
+											across {bestSection.count} games
+										</p>
+									</div>
+								</div>
+							</Container>
+						{/if}
+
+						{#if hardestSection}
+							{@const hard = hardestSection}
+							{#if hard && hard.count >= 3}
+								<Container class="p-4 w-full">
+									<div class="flex items-start gap-3 w-full">
+										<span class="text-2xl">💪</span>
+										<div class="flex-1 min-w-0">
+											<p
+												class="text-gray-100 font-medium text-sm"
+											>
+												Room to grow: {hard.section}
+											</p>
+											<p
+												class="text-gray-400 text-xs mt-0.5"
+											>
+												{hard.avgGuesses} avg guesses across
+												{hard.count} games
+											</p>
+										</div>
+									</div>
+								</Container>
+							{/if}
+						{/if}
+					</div>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<AuthModal bind:isOpen={authModalOpen} {anonymousId} />

src/routes/sitemap.xml/+server.ts

@@ -0,0 +1,23 @@
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const GET: RequestHandler = () => {
+	const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://bibdle.com/</loc>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://bibdle.com/about</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.5</priority>
+  </url>
+</urlset>`;
+
+	return new Response(sitemap, {
+		headers: {
+			'Content-Type': 'application/xml'
+		}
+	});
+};

src/routes/stats/+page.server.ts

@@ -27,9 +27,9 @@ export const load: PageServerLoad = async ({ url, locals }) => {
 		};
 	}
 
-	// Get user's current date from timezone query param
-	const timezone = url.searchParams.get('tz') || 'UTC';
-	const userToday = new Date().toLocaleDateString('en-CA', { timeZone: timezone });
+	// Note: userToday is used only for the initial server-side streak estimate.
+	// The client overrides this with a precise local-date calculation via /api/streak.
+	const userToday = new Date().toISOString().slice(0, 10); // UTC date as safe fallback
 
 	try {
 		// Get all completions for this user
@@ -85,7 +85,7 @@ export const load: PageServerLoad = async ({ url, locals }) => {
 			'C': completions.filter((c: DailyCompletion) => c.guessCount > 15).length
 		};
 
-		// Calculate streaks
+		// Calculate streaks — dates are stored as the user's local date
 		const sortedDates = completions
 			.map((c: DailyCompletion) => c.date)
 			.sort();

src/routes/stats/+page.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-	import { goto } from "$app/navigation";
 	import { onMount } from "svelte";
-	import { enhance } from "$app/forms";
 	import AuthModal from "$lib/components/AuthModal.svelte";
 	import Container from "$lib/components/Container.svelte";
 	import { bibleBooks } from "$lib/types/bible";
 	import {
-		getGradeColor,
 		formatDate,
-		getStreakMessage,
-		getPerformanceMessage,
 		type UserStats,
 	} from "$lib/utils/stats";
+	import { fetchStreak } from "$lib/utils/streak";
 
 	interface PageData {
 		stats: UserStats | null;
@@ -27,6 +23,7 @@
 	let anonymousId = $state("");
 
 	let loading = $state(true);
+	let currentStreak = $state(0);
 
 	function getOrCreateAnonymousId(): string {
 		if (!browser) return "";
@@ -41,13 +38,15 @@
 
 	onMount(async () => {
 		anonymousId = getOrCreateAnonymousId();
+		if (data.user?.id) {
+			const localDate = new Date().toLocaleDateString("en-CA");
+			currentStreak = await fetchStreak(data.user.id, localDate);
+		} else {
+			currentStreak = data.stats?.currentStreak ?? 0;
+		}
 		loading = false;
 	});
 
-	function getGradePercentage(count: number, total: number): number {
-		return total > 0 ? Math.round((count / total) * 100) : 0;
-	}
-
 	function getBookName(bookId: string): string {
 		return bibleBooks.find((b) => b.id === bookId)?.name || bookId;
 	}
@@ -160,7 +159,7 @@
 						<div
 							class="text-2xl md:text-3xl font-bold text-orange-400 mb-1"
 						>
-							{stats.currentStreak}
+							{currentStreak}
 						</div>
 						<div
 							class="text-xs md:text-sm text-gray-300 font-medium"
@@ -333,83 +332,7 @@
 					</Container>
 				</div>
 
-				<!-- Grade Distribution -->
-				<Container class="p-5 md:p-6 mb-6">
-					<h2 class="text-lg md:text-xl font-bold text-gray-100 mb-4">
-						Grade Distribution
-					</h2>
-					<div class="grid grid-cols-4 md:grid-cols-8 gap-2 md:gap-3">
-						{#each Object.entries(stats.gradeDistribution) as [grade, count] (grade)}
-							{@const percentage = getGradePercentage(
-								count,
-								stats.totalSolves,
-							)}
-							<div class="text-center">
-								<div class="mb-2">
-									<span
-										class="inline-block px-2 md:px-3 py-1 rounded-full text-xs md:text-sm font-semibold {getGradeColor(
-											grade,
-										)}"
-									>
-										{grade}
-									</span>
-								</div>
-								<div
-									class="text-lg md:text-2xl font-bold text-gray-100"
-								>
-									{count}
-								</div>
-								<div class="text-xs text-gray-400">
-									{percentage}%
-								</div>
-							</div>
-						{/each}
-					</div>
-				</Container>
-
-				<!-- Recent Performance -->
-				{#if stats.recentCompletions.length > 0}
-					<Container class="p-5 md:p-6">
-						<h2
-							class="text-lg md:text-xl font-bold text-gray-100 mb-4"
-						>
-							Recent Performance
-						</h2>
-						<div class="space-y-2">
-							{#each stats.recentCompletions as completion, idx (`${completion.date}-${idx}`)}
-								<div
-									class="flex justify-between items-center py-2 border-b border-white/10 last:border-b-0"
-								>
-									<div>
-										<span
-											class="text-sm md:text-base font-medium text-gray-200"
-											>{formatDate(completion.date)}</span
-										>
-									</div>
-									<div
-										class="flex items-center gap-2 md:gap-3"
-									>
-										<span
-											class="text-xs md:text-sm text-gray-300"
-											>{completion.guessCount} guess{completion.guessCount ===
-											1
-												? ""
-												: "es"}</span
-										>
-										<span
-											class="px-2 py-0.5 md:py-1 rounded text-xs md:text-sm font-semibold {getGradeColor(
-												completion.grade,
-											)}"
-										>
-											{completion.grade}
-										</span>
-									</div>
-								</div>
-							{/each}
-						</div>
-					</Container>
 				{/if}
-			{/if}
 		{/if}
 	</div>
 </div>

static/about.md

@@ -0,0 +1,15 @@
+# About Bibdle
+
+Bibdle is a daily Bible guessing game. Every day, a random verse is posted to the website. Try to figure out which book of the Bible it comes from, in as few guesses as possible. That's it!
+
+---
+
+The game was built with the hope that it would be a small, delightful thing people can make part of their day. It's not a Bible study course. You don't need to know the Bible inside and out to enjoy it or to learn something from it.
+
+If you're someone who grew up in church and can name all 66 books in order, great. If you're someone who can barely tell the Old Testament from the New, that's great too. The game meets you where you are.
+
+It is completely free. If you'd like to support the developer (who works solely on small projects like this one) or express your thanks, you can become a Bibdle patron.
+
+If you use Bibdle, I would love to hear from you! I can be reached via email or through Bluesky.
+
+<!-- social -->

static/how-to-play.md

@@ -0,0 +1,47 @@
+# How to Play
+
+Each day, Bibdle gives you a verse from the Bible. Your job is to guess which book it comes from. (Genesis, John, Corinthians, etc.)
+
+You have unlimited guesses.
+
+---
+
+## The Basics
+
+1. **Read the verse.** It appears at the top of the page.
+2. **Make a guess.** Type or select a book of the Bible from the list.
+3. **Read the feedback.** After each guess, you'll get clues telling you how close you were.
+4. **Keep guessing** until you get it right.
+
+
+---
+
+## Feedback Hints
+
+After each wrong guess, you'll see the following hints:
+
+| Hint | What it means |
+|---|---|
+| **Testament** | If your guess was in the correct Testament (Old or New) |
+| **Section** | If your guess was in the correct section of the Bible (e.g. Gospels, Epistles, Major Prophets) |
+| **First Letter** | If your guess has the same first letter as the correct guess |
+
+Use the hints to narrow down your search.
+
+---
+
+## A Few Things to Know
+
+- **Everyone plays the same verse each day.** The daily verse resets at midnight.
+- **Your progress is saved automatically.** You can close the tab and come back later.
+
+---
+
+## Tips
+
+- Pay attention to writing style: the voice of Psalms is very different from Paul's letters.
+- Historical narrative (battles, kings, genealogies) tends to be Old Testament.
+- Short, poetic, or wisdom-focused verses could be Proverbs, Ecclesiastes, or Psalms.
+- If a verse mentions Jesus by name, it's in the New Testament.
+
+Good luck!

static/robots.txt

@@ -1,3 +1,5 @@
 # allow crawling everything by default
 User-agent: *
 Disallow:
+
+Sitemap: https://bibdle.com/sitemap.xml

tests/bible.test.ts

@@ -0,0 +1,234 @@
+import { describe, test, expect } from "bun:test";
+import {
+	getBookById,
+	getBookByNumber,
+	getBooksByTestament,
+	getBooksBySection,
+	isAdjacent,
+	bookNumberToId,
+	bookIdToNumber,
+	bibleBooks,
+} from "$lib/server/bible";
+
+describe("bibleBooks data integrity", () => {
+	test("contains exactly 66 books", () => {
+		expect(bibleBooks).toHaveLength(66);
+	});
+
+	test("order numbers are 1 through 66 with no gaps or duplicates", () => {
+		const orders = bibleBooks.map((b) => b.order).sort((a, b) => a - b);
+		for (let i = 0; i < 66; i++) {
+			expect(orders[i]).toBe(i + 1);
+		}
+	});
+
+	test("book IDs are unique", () => {
+		const ids = bibleBooks.map((b) => b.id);
+		const unique = new Set(ids);
+		expect(unique.size).toBe(66);
+	});
+
+	test("every book has a non-empty name", () => {
+		for (const book of bibleBooks) {
+			expect(book.name.length).toBeGreaterThan(0);
+		}
+	});
+
+	test("Old Testament has 39 books", () => {
+		expect(bibleBooks.filter((b) => b.testament === "old")).toHaveLength(39);
+	});
+
+	test("New Testament has 27 books", () => {
+		expect(bibleBooks.filter((b) => b.testament === "new")).toHaveLength(27);
+	});
+
+	test("Genesis is first and Revelation is last", () => {
+		const sorted = [...bibleBooks].sort((a, b) => a.order - b.order);
+		expect(sorted[0].id).toBe("GEN");
+		expect(sorted[65].id).toBe("REV");
+	});
+
+	test("Matthew is the first New Testament book", () => {
+		const nt = bibleBooks
+			.filter((b) => b.testament === "new")
+			.sort((a, b) => a.order - b.order);
+		expect(nt[0].id).toBe("MAT");
+	});
+});
+
+describe("section counts", () => {
+	test("Law: 5 books", () => {
+		expect(getBooksBySection("Law")).toHaveLength(5);
+	});
+
+	test("History: 13 books (12 OT + Acts)", () => {
+		expect(getBooksBySection("History")).toHaveLength(13);
+	});
+
+	test("Wisdom: 5 books", () => {
+		expect(getBooksBySection("Wisdom")).toHaveLength(5);
+	});
+
+	test("Major Prophets: 5 books", () => {
+		expect(getBooksBySection("Major Prophets")).toHaveLength(5);
+	});
+
+	test("Minor Prophets: 12 books", () => {
+		expect(getBooksBySection("Minor Prophets")).toHaveLength(12);
+	});
+
+	test("Gospels: 4 books", () => {
+		expect(getBooksBySection("Gospels")).toHaveLength(4);
+	});
+
+	test("Pauline Epistles: 13 books", () => {
+		expect(getBooksBySection("Pauline Epistles")).toHaveLength(13);
+	});
+
+	test("General Epistles: 8 books", () => {
+		expect(getBooksBySection("General Epistles")).toHaveLength(8);
+	});
+
+	test("Apocalyptic: 1 book (Revelation)", () => {
+		const books = getBooksBySection("Apocalyptic");
+		expect(books).toHaveLength(1);
+		expect(books[0].id).toBe("REV");
+	});
+
+	test("all sections sum to 66", () => {
+		const total =
+			getBooksBySection("Law").length +
+			getBooksBySection("History").length +
+			getBooksBySection("Wisdom").length +
+			getBooksBySection("Major Prophets").length +
+			getBooksBySection("Minor Prophets").length +
+			getBooksBySection("Gospels").length +
+			getBooksBySection("Pauline Epistles").length +
+			getBooksBySection("General Epistles").length +
+			getBooksBySection("Apocalyptic").length;
+		expect(total).toBe(66);
+	});
+});
+
+describe("getBookById", () => {
+	test("returns Genesis for GEN", () => {
+		const book = getBookById("GEN");
+		expect(book).toBeDefined();
+		expect(book!.name).toBe("Genesis");
+	});
+
+	test("returns Revelation for REV", () => {
+		const book = getBookById("REV");
+		expect(book!.name).toBe("Revelation");
+	});
+
+	test("returns undefined for unknown ID", () => {
+		expect(getBookById("UNKNOWN")).toBeUndefined();
+	});
+});
+
+describe("getBookByNumber", () => {
+	test("1 → Genesis", () => {
+		expect(getBookByNumber(1)!.id).toBe("GEN");
+	});
+
+	test("66 → Revelation", () => {
+		expect(getBookByNumber(66)!.id).toBe("REV");
+	});
+
+	test("40 → Matthew (first NT book)", () => {
+		expect(getBookByNumber(40)!.id).toBe("MAT");
+	});
+
+	test("0 → undefined", () => {
+		expect(getBookByNumber(0)).toBeUndefined();
+	});
+
+	test("67 → undefined", () => {
+		expect(getBookByNumber(67)).toBeUndefined();
+	});
+});
+
+describe("getBooksByTestament", () => {
+	test("old returns 39 books", () => {
+		expect(getBooksByTestament("old")).toHaveLength(39);
+	});
+
+	test("new returns 27 books", () => {
+		expect(getBooksByTestament("new")).toHaveLength(27);
+	});
+
+	test("all OT books have testament = old", () => {
+		for (const book of getBooksByTestament("old")) {
+			expect(book.testament).toBe("old");
+		}
+	});
+
+	test("all NT books have testament = new", () => {
+		for (const book of getBooksByTestament("new")) {
+			expect(book.testament).toBe("new");
+		}
+	});
+});
+
+describe("isAdjacent", () => {
+	test("Genesis and Exodus are adjacent", () => {
+		expect(isAdjacent("GEN", "EXO")).toBe(true);
+	});
+
+	test("adjacency is symmetric", () => {
+		expect(isAdjacent("EXO", "GEN")).toBe(true);
+	});
+
+	test("Malachi and Matthew are adjacent across testament boundary", () => {
+		expect(isAdjacent("MAL", "MAT")).toBe(true); // 39, 40
+	});
+
+	test("Jude and Revelation are adjacent", () => {
+		expect(isAdjacent("JUD", "REV")).toBe(true); // 65, 66
+	});
+
+	test("same book is not adjacent to itself", () => {
+		expect(isAdjacent("GEN", "GEN")).toBe(false);
+	});
+
+	test("books two apart are not adjacent", () => {
+		expect(isAdjacent("GEN", "LEV")).toBe(false); // 1, 3
+	});
+
+	test("returns false for invalid IDs", () => {
+		expect(isAdjacent("FAKE", "GEN")).toBe(false);
+	});
+});
+
+describe("bookNumberToId / bookIdToNumber lookup tables", () => {
+	test("bookNumberToId[1] is GEN", () => {
+		expect(bookNumberToId[1]).toBe("GEN");
+	});
+
+	test("bookNumberToId[66] is REV", () => {
+		expect(bookNumberToId[66]).toBe("REV");
+	});
+
+	test("bookIdToNumber['GEN'] is 1", () => {
+		expect(bookIdToNumber["GEN"]).toBe(1);
+	});
+
+	test("bookIdToNumber['REV'] is 66", () => {
+		expect(bookIdToNumber["REV"]).toBe(66);
+	});
+
+	test("round-trip: number → ID → number", () => {
+		for (let i = 1; i <= 66; i++) {
+			const id = bookNumberToId[i];
+			expect(bookIdToNumber[id]).toBe(i);
+		}
+	});
+
+	test("round-trip: ID → number → ID", () => {
+		for (const book of bibleBooks) {
+			const num = bookIdToNumber[book.id];
+			expect(bookNumberToId[num]).toBe(book.id);
+		}
+	});
+});

tests/game.test.ts

@@ -0,0 +1,271 @@
+import { describe, test, expect } from "bun:test";
+import {
+	evaluateGuess,
+	getBookById,
+	getFirstLetter,
+	getGrade,
+	getNextGradeMessage,
+	isAdjacent,
+	toOrdinal,
+} from "$lib/utils/game";
+
+describe("getBookById", () => {
+	test("returns correct book for a valid ID", () => {
+		const book = getBookById("GEN");
+		expect(book).toBeDefined();
+		expect(book!.name).toBe("Genesis");
+		expect(book!.order).toBe(1);
+	});
+
+	test("returns the last book by ID", () => {
+		const book = getBookById("REV");
+		expect(book).toBeDefined();
+		expect(book!.name).toBe("Revelation");
+		expect(book!.order).toBe(66);
+	});
+
+	test("returns undefined for an invalid ID", () => {
+		expect(getBookById("INVALID")).toBeUndefined();
+	});
+
+	test("returns undefined for an empty string", () => {
+		expect(getBookById("")).toBeUndefined();
+	});
+
+	test("is case-sensitive", () => {
+		expect(getBookById("gen")).toBeUndefined();
+	});
+});
+
+describe("isAdjacent", () => {
+	test("consecutive books are adjacent", () => {
+		expect(isAdjacent("GEN", "EXO")).toBe(true); // 1, 2
+	});
+
+	test("adjacency is symmetric", () => {
+		expect(isAdjacent("EXO", "GEN")).toBe(true);
+	});
+
+	test("books two apart are not adjacent", () => {
+		expect(isAdjacent("GEN", "LEV")).toBe(false); // 1, 3
+	});
+
+	test("the same book is not adjacent to itself", () => {
+		expect(isAdjacent("GEN", "GEN")).toBe(false); // diff = 0
+	});
+
+	test("works across testament boundary (Malachi / Matthew)", () => {
+		expect(isAdjacent("MAL", "MAT")).toBe(true); // 39, 40
+	});
+
+	test("far-apart books are not adjacent", () => {
+		expect(isAdjacent("GEN", "REV")).toBe(false);
+	});
+
+	test("returns false for unknown IDs", () => {
+		expect(isAdjacent("FAKE", "GEN")).toBe(false);
+		expect(isAdjacent("GEN", "FAKE")).toBe(false);
+	});
+});
+
+describe("getFirstLetter", () => {
+	test("returns first letter of a normal book name", () => {
+		expect(getFirstLetter("Genesis")).toBe("G");
+		expect(getFirstLetter("Revelation")).toBe("R");
+	});
+
+	test("skips leading digits and returns first letter", () => {
+		expect(getFirstLetter("1 Samuel")).toBe("S");
+		expect(getFirstLetter("2 Kings")).toBe("K");
+		expect(getFirstLetter("1 Corinthians")).toBe("C");
+		expect(getFirstLetter("3 John")).toBe("J");
+	});
+
+	test("returns first letter of multi-word names", () => {
+		expect(getFirstLetter("Song of Solomon")).toBe("S");
+	});
+});
+
+describe("evaluateGuess", () => {
+	test("returns null for an invalid guess ID", () => {
+		expect(evaluateGuess("INVALID", "GEN")).toBeNull();
+	});
+
+	test("returns null for an invalid correct ID", () => {
+		expect(evaluateGuess("GEN", "INVALID")).toBeNull();
+	});
+
+	test("exact book match: testamentMatch and sectionMatch are true, adjacent is false", () => {
+		const result = evaluateGuess("GEN", "GEN");
+		expect(result).not.toBeNull();
+		expect(result!.book.id).toBe("GEN");
+		expect(result!.testamentMatch).toBe(true);
+		expect(result!.sectionMatch).toBe(true);
+		expect(result!.adjacent).toBe(false);
+	});
+
+	test("same section implies same testament", () => {
+		// Genesis and Exodus are both OT Law
+		const result = evaluateGuess("GEN", "EXO");
+		expect(result!.testamentMatch).toBe(true);
+		expect(result!.sectionMatch).toBe(true);
+		expect(result!.adjacent).toBe(true);
+	});
+
+	test("same testament, different section", () => {
+		// Genesis (Law) vs Joshua (History) — both OT
+		const result = evaluateGuess("GEN", "JOS");
+		expect(result!.testamentMatch).toBe(true);
+		expect(result!.sectionMatch).toBe(false);
+		expect(result!.adjacent).toBe(false);
+	});
+
+	test("different testament, no match", () => {
+		// Genesis (OT) vs Matthew (NT)
+		const result = evaluateGuess("GEN", "MAT");
+		expect(result!.testamentMatch).toBe(false);
+		expect(result!.sectionMatch).toBe(false);
+		expect(result!.adjacent).toBe(false);
+	});
+
+	test("adjacent books across testament boundary", () => {
+		// Malachi (OT, 39) and Matthew (NT, 40)
+		const result = evaluateGuess("MAL", "MAT");
+		expect(result!.adjacent).toBe(true);
+		expect(result!.testamentMatch).toBe(false);
+		expect(result!.sectionMatch).toBe(false);
+	});
+
+	test("adjacent books within same testament and section", () => {
+		// Hosea (28) and Joel (29), both Minor Prophets
+		const result = evaluateGuess("HOS", "JOL");
+		expect(result!.adjacent).toBe(true);
+		expect(result!.testamentMatch).toBe(true);
+		expect(result!.sectionMatch).toBe(true);
+	});
+
+	test("firstLetterMatch: same first letter", () => {
+		// Genesis and Galatians both start with G
+		const result = evaluateGuess("GEN", "GAL");
+		expect(result!.firstLetterMatch).toBe(true);
+	});
+
+	test("firstLetterMatch: different first letter", () => {
+		// Genesis (G) vs Matthew (M)
+		const result = evaluateGuess("GEN", "MAT");
+		expect(result!.firstLetterMatch).toBe(false);
+	});
+
+	test("firstLetterMatch is case-insensitive", () => {
+		// Both start with J but from different contexts — Jeremiah vs Joel
+		const result = evaluateGuess("JER", "JOL");
+		expect(result!.firstLetterMatch).toBe(true);
+	});
+
+	test("special case: two Epistle '1' books always firstLetterMatch", () => {
+		// 1 Corinthians (Pauline) vs 1 John (General) — both Epistles starting with "1"
+		const result = evaluateGuess("1CO", "1JN");
+		expect(result!.firstLetterMatch).toBe(true);
+	});
+
+	test("special case: Epistle '1' book vs non-Epistle '1' book — no special treatment", () => {
+		// 1 Corinthians (Pauline Epistles) vs 1 Samuel (History)
+		// Correct is NOT Epistles, so special case doesn't apply
+		const result = evaluateGuess("1CO", "1SA");
+		// getFirstLetter("1 Corinthians") = "C", getFirstLetter("1 Samuel") = "S" → false
+		expect(result!.firstLetterMatch).toBe(false);
+	});
+
+	test("special case only triggers when BOTH are Epistle '1' books", () => {
+		// 2 Corinthians (Pauline, starts with "2") vs 1 John (General, starts with "1")
+		// guessIsEpistlesWithNumber requires name[0] === "1", so 2CO fails
+		const result = evaluateGuess("2CO", "1JN");
+		// getFirstLetter("2 Corinthians") = "C", getFirstLetter("1 John") = "J" → false
+		expect(result!.firstLetterMatch).toBe(false);
+	});
+});
+
+describe("getGrade", () => {
+	test("1 guess → S+", () => expect(getGrade(1)).toBe("S+"));
+	test("2 guesses → A+", () => expect(getGrade(2)).toBe("A+"));
+	test("3 guesses → A", () => expect(getGrade(3)).toBe("A"));
+	test("4 guesses → B+", () => expect(getGrade(4)).toBe("B+"));
+	test("6 guesses → B+", () => expect(getGrade(6)).toBe("B+"));
+	test("7 guesses → B", () => expect(getGrade(7)).toBe("B"));
+	test("10 guesses → B", () => expect(getGrade(10)).toBe("B"));
+	test("11 guesses → C+", () => expect(getGrade(11)).toBe("C+"));
+	test("15 guesses → C+", () => expect(getGrade(15)).toBe("C+"));
+	test("16 guesses → C", () => expect(getGrade(16)).toBe("C"));
+	test("100 guesses → C", () => expect(getGrade(100)).toBe("C"));
+});
+
+describe("getNextGradeMessage", () => {
+	test("returns empty string at top grade", () => {
+		expect(getNextGradeMessage(1)).toBe("");
+	});
+
+	test("grade A+ shows 1 guess threshold", () => {
+		expect(getNextGradeMessage(2)).toBe("Next grade: 1 guess or less");
+	});
+
+	test("grade A shows 2 guess threshold", () => {
+		expect(getNextGradeMessage(3)).toBe("Next grade: 2 guesses or less");
+	});
+
+	test("grade B+ shows 3 guess threshold", () => {
+		expect(getNextGradeMessage(4)).toBe("Next grade: 3 guesses or less");
+		expect(getNextGradeMessage(6)).toBe("Next grade: 3 guesses or less");
+	});
+
+	test("grade B shows 6 guess threshold", () => {
+		expect(getNextGradeMessage(7)).toBe("Next grade: 6 guesses or less");
+		expect(getNextGradeMessage(10)).toBe("Next grade: 6 guesses or less");
+	});
+
+	test("grade C+ shows 10 guess threshold", () => {
+		expect(getNextGradeMessage(11)).toBe("Next grade: 10 guesses or less");
+		expect(getNextGradeMessage(15)).toBe("Next grade: 10 guesses or less");
+	});
+
+	test("grade C shows 15 guess threshold", () => {
+		expect(getNextGradeMessage(16)).toBe("Next grade: 15 guesses or less");
+		expect(getNextGradeMessage(50)).toBe("Next grade: 15 guesses or less");
+	});
+});
+
+describe("toOrdinal", () => {
+	test("1st, 2nd, 3rd", () => {
+		expect(toOrdinal(1)).toBe("1st");
+		expect(toOrdinal(2)).toBe("2nd");
+		expect(toOrdinal(3)).toBe("3rd");
+	});
+
+	test("4-10 use th", () => {
+		expect(toOrdinal(4)).toBe("4th");
+		expect(toOrdinal(10)).toBe("10th");
+	});
+
+	test("11, 12, 13 use th (not st/nd/rd)", () => {
+		expect(toOrdinal(11)).toBe("11th");
+		expect(toOrdinal(12)).toBe("12th");
+		expect(toOrdinal(13)).toBe("13th");
+	});
+
+	test("21, 22, 23 use st/nd/rd", () => {
+		expect(toOrdinal(21)).toBe("21st");
+		expect(toOrdinal(22)).toBe("22nd");
+		expect(toOrdinal(23)).toBe("23rd");
+	});
+
+	test("101, 102, 103 use st/nd/rd", () => {
+		expect(toOrdinal(101)).toBe("101st");
+		expect(toOrdinal(102)).toBe("102nd");
+		expect(toOrdinal(103)).toBe("103rd");
+	});
+
+	test("111, 112, 113 use th", () => {
+		expect(toOrdinal(111)).toBe("111th");
+		expect(toOrdinal(112)).toBe("112th");
+		expect(toOrdinal(113)).toBe("113th");
+	});
+});

tests/share.test.ts

@@ -0,0 +1,339 @@
+import { describe, test, expect } from "bun:test";
+import { generateShareText, getVerseSnippet } from "$lib/utils/share";
+import { getBookById } from "$lib/utils/game";
+import type { Guess } from "$lib/utils/game";
+
+// Helpers to build Guess objects without calling evaluateGuess
+function makeGuess(bookId: string, overrides: Partial<Omit<Guess, "book">> = {}): Guess {
+	const book = getBookById(bookId)!;
+	return {
+		book,
+		testamentMatch: false,
+		sectionMatch: false,
+		adjacent: false,
+		firstLetterMatch: false,
+		...overrides,
+	};
+}
+
+const CORRECT_BOOK_ID = "GEN";
+
+const exactGuess = makeGuess("GEN", {
+	testamentMatch: true,
+	sectionMatch: true,
+});
+
+const adjacentGuess = makeGuess("EXO", {
+	testamentMatch: true,
+	sectionMatch: true,
+	adjacent: true,
+});
+
+const sectionGuess = makeGuess("LEV", {
+	testamentMatch: true,
+	sectionMatch: true,
+});
+
+const testamentGuess = makeGuess("JOS", {
+	testamentMatch: true,
+	sectionMatch: false,
+});
+
+const noMatchGuess = makeGuess("MAT", {
+	testamentMatch: false,
+	sectionMatch: false,
+});
+
+describe("generateShareText — emoji mapping", () => {
+	test("exact match → ✅", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "In the beginning...",
+		});
+		expect(text).toContain("✅");
+	});
+
+	test("adjacent book → ‼️", () => {
+		const text = generateShareText({
+			guesses: [adjacentGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "In the beginning...",
+		});
+		expect(text).toContain("‼️");
+	});
+
+	test("section match → 🟩", () => {
+		// LEV matches section (Law) but is not adjacent to GEN (order 1 vs 3)
+		const text = generateShareText({
+			guesses: [sectionGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "In the beginning...",
+		});
+		expect(text).toContain("🟩");
+	});
+
+	test("testament match only → 🟧", () => {
+		const text = generateShareText({
+			guesses: [testamentGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "In the beginning...",
+		});
+		expect(text).toContain("🟧");
+	});
+
+	test("no match → 🟥", () => {
+		const text = generateShareText({
+			guesses: [noMatchGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "In the beginning...",
+		});
+		expect(text).toContain("🟥");
+	});
+});
+
+describe("generateShareText — guess count wording", () => {
+	test("1 guess uses singular 'guess'", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("1 guess,");
+	});
+
+	test("multiple guesses uses plural 'guesses'", () => {
+		const text = generateShareText({
+			guesses: [noMatchGuess, testamentGuess, exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("3 guesses,");
+	});
+});
+
+describe("generateShareText — streak display", () => {
+	test("streak > 1 is shown with fire emoji", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			streak: 5,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("5 days 🔥");
+	});
+
+	test("streak of 1 is not shown", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			streak: 1,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).not.toContain("🔥");
+	});
+
+	test("undefined streak is not shown", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).not.toContain("🔥");
+	});
+});
+
+describe("generateShareText — chapter star", () => {
+	test("1 guess + chapterCorrect → ⭐ appended to emoji line", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: true,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("✅ ⭐");
+	});
+
+	test("multiple guesses + chapterCorrect → no star (only awarded for hole-in-one)", () => {
+		const text = generateShareText({
+			guesses: [noMatchGuess, exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: true,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).not.toContain("⭐");
+	});
+
+	test("1 guess + chapterCorrect false → no star", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).not.toContain("⭐");
+	});
+});
+
+describe("generateShareText — login book emoji", () => {
+	test("logged in uses 📜", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: true,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("📜");
+		expect(text).not.toContain("📖");
+	});
+
+	test("not logged in uses 📖", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("📖");
+		expect(text).not.toContain("📜");
+	});
+});
+
+describe("generateShareText — date formatting", () => {
+	test("date is formatted as 'Mon DD, YYYY'", () => {
+		const text = generateShareText({
+			guesses: [exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		expect(text).toContain("Jan 15, 2025");
+	});
+});
+
+describe("generateShareText — guess order", () => {
+	test("guesses are reversed in the emoji line (first guess last)", () => {
+		// noMatchGuess first, then exactGuess — reversed output: ✅🟥
+		const text = generateShareText({
+			guesses: [noMatchGuess, exactGuess],
+			correctBookId: CORRECT_BOOK_ID,
+			dailyVerseDate: "2025-01-15",
+			chapterCorrect: false,
+			isLoggedIn: false,
+			origin: "https://bibdle.com",
+			verseText: "...",
+		});
+		const lines = text.split("\n");
+		expect(lines[2]).toBe("✅🟥");
+	});
+});
+
+describe("getVerseSnippet", () => {
+	test("wraps output in curly double quotes", () => {
+		const result = getVerseSnippet("Hello world");
+		expect(result.startsWith("\u201C")).toBe(true);
+		expect(result.endsWith("\u201D")).toBe(true);
+	});
+
+	test("short verse (fewer than 10 words) returns full text", () => {
+		const result = getVerseSnippet("For God so loved");
+		// No punctuation search happens, returns all words
+		expect(result).toContain("For God so loved");
+		expect(result).toContain("...");
+	});
+
+	test("verse with no punctuation in range returns first 25 words", () => {
+		const words = Array.from({ length: 30 }, (_, i) => `word${i + 1}`);
+		const verse = words.join(" ");
+		const result = getVerseSnippet(verse);
+		// Should contain up to 25 words
+		expect(result).toContain("word25");
+		expect(result).not.toContain("word26");
+	});
+
+	test("truncates at punctuation between words 10 and 25", () => {
+		// 12 words before comma, rest after
+		const verse =
+			"one two three four five six seven eight nine ten eleven twelve, thirteen fourteen fifteen twenty";
+		const result = getVerseSnippet(verse);
+		// The comma is after word 12, which is between word 10 and 25
+		expect(result).toContain("twelve");
+		expect(result).not.toContain("thirteen");
+	});
+
+	test("punctuation before word 10 does not trigger truncation", () => {
+		// Comma is after word 5 — before the search window starts at word 10
+		const verse =
+			"one two three four five, six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen";
+		const result = getVerseSnippet(verse);
+		// The comma at word 5 is before start of search range, so we continue
+		// The snippet should contain word 10 at minimum
+		expect(result).toContain("ten");
+	});
+
+	test("does not include trailing whitespace before ellipsis", () => {
+		const verse =
+			"one two three four five six seven eight nine ten eleven twelve, rest of verse here";
+		const result = getVerseSnippet(verse);
+		// trimEnd is applied before adding ..., so no space before ...
+		expect(result).not.toMatch(/\s\.\.\./);
+	});
+});

tests/stats.test.ts

@@ -0,0 +1,129 @@
+import { describe, test, expect } from "bun:test";
+import {
+	formatDate,
+	getGradeColor,
+	getPerformanceMessage,
+	getStreakMessage,
+} from "$lib/utils/stats";
+
+describe("getGradeColor", () => {
+	test("S++ → purple", () => {
+		expect(getGradeColor("S++")).toBe("text-purple-600 bg-purple-100");
+	});
+
+	test("S+ → yellow", () => {
+		expect(getGradeColor("S+")).toBe("text-yellow-600 bg-yellow-100");
+	});
+
+	test("A+ → green", () => {
+		expect(getGradeColor("A+")).toBe("text-green-600 bg-green-100");
+	});
+
+	test("A → light green", () => {
+		expect(getGradeColor("A")).toBe("text-green-500 bg-green-50");
+	});
+
+	test("B+ → blue", () => {
+		expect(getGradeColor("B+")).toBe("text-blue-600 bg-blue-100");
+	});
+
+	test("B → light blue", () => {
+		expect(getGradeColor("B")).toBe("text-blue-500 bg-blue-50");
+	});
+
+	test("C+ → orange", () => {
+		expect(getGradeColor("C+")).toBe("text-orange-600 bg-orange-100");
+	});
+
+	test("C → red", () => {
+		expect(getGradeColor("C")).toBe("text-red-600 bg-red-100");
+	});
+
+	test("unknown grade → gray fallback", () => {
+		expect(getGradeColor("X")).toBe("text-gray-600 bg-gray-100");
+		expect(getGradeColor("")).toBe("text-gray-600 bg-gray-100");
+	});
+});
+
+describe("formatDate", () => {
+	test("formats a mid-year date", () => {
+		expect(formatDate("2024-07-04")).toBe("Jul 4");
+	});
+
+	test("formats a January date", () => {
+		expect(formatDate("2024-01-15")).toBe("Jan 15");
+	});
+
+	test("formats the last day of the year", () => {
+		expect(formatDate("2023-12-31")).toBe("Dec 31");
+	});
+
+	test("formats a single-digit day without leading zero", () => {
+		expect(formatDate("2025-03-01")).toBe("Mar 1");
+	});
+
+	test("year in input does not appear in output", () => {
+		expect(formatDate("2024-06-20")).not.toContain("2024");
+	});
+});
+
+describe("getStreakMessage", () => {
+	test("0 → prompt to start", () => {
+		expect(getStreakMessage(0)).toBe("Start your streak today!");
+	});
+
+	test("1 → encouragement", () => {
+		expect(getStreakMessage(1)).toBe("Keep it going!");
+	});
+
+	test("2 → X days strong", () => {
+		expect(getStreakMessage(2)).toBe("2 days strong!");
+	});
+
+	test("6 → X days strong (upper bound of that range)", () => {
+		expect(getStreakMessage(6)).toBe("6 days strong!");
+	});
+
+	test("7 → week streak message", () => {
+		expect(getStreakMessage(7)).toBe("7 day streak - amazing!");
+	});
+
+	test("29 → upper bound of week-streak range", () => {
+		expect(getStreakMessage(29)).toBe("29 day streak - amazing!");
+	});
+
+	test("30 → unstoppable message", () => {
+		expect(getStreakMessage(30)).toBe("30 days - you're unstoppable!");
+	});
+
+	test("100 → unstoppable message", () => {
+		expect(getStreakMessage(100)).toBe("100 days - you're unstoppable!");
+	});
+});
+
+describe("getPerformanceMessage", () => {
+	test("≤ 2 guesses → exceptional", () => {
+		expect(getPerformanceMessage(1)).toBe("Exceptional performance!");
+		expect(getPerformanceMessage(2)).toBe("Exceptional performance!");
+	});
+
+	test("≤ 4 guesses → great", () => {
+		expect(getPerformanceMessage(2.1)).toBe("Great performance!");
+		expect(getPerformanceMessage(4)).toBe("Great performance!");
+	});
+
+	test("≤ 6 guesses → good", () => {
+		expect(getPerformanceMessage(4.1)).toBe("Good performance!");
+		expect(getPerformanceMessage(6)).toBe("Good performance!");
+	});
+
+	test("≤ 8 guesses → room for improvement", () => {
+		expect(getPerformanceMessage(6.1)).toBe("Room for improvement!");
+		expect(getPerformanceMessage(8)).toBe("Room for improvement!");
+	});
+
+	test("> 8 guesses → keep practicing", () => {
+		expect(getPerformanceMessage(8.1)).toBe("Keep practicing!");
+		expect(getPerformanceMessage(20)).toBe("Keep practicing!");
+	});
+});

tests/timezone-handling.test.ts

@@ -496,3 +496,149 @@ describe('Timezone-aware daily verse system', () => {
 		// See /api/submit-completion for the unique constraint enforcement
 	});
 });
+
+// ---------------------------------------------------------------------------
+// Streak walk-back logic — mirrors /api/streak/+server.ts
+// UTC is NEVER used for date comparison; all walk-back is pure string arithmetic.
+// ---------------------------------------------------------------------------
+
+function prevDay(dateStr: string): string {
+	const d = new Date(dateStr + 'T00:00:00Z');
+	d.setUTCDate(d.getUTCDate() - 1);
+	return d.toISOString().slice(0, 10);
+}
+
+function calcStreak(completedDates: Set<string>, localDate: string): number {
+	let streak = 0;
+	let cursor = localDate;
+	while (completedDates.has(cursor)) {
+		streak++;
+		cursor = prevDay(cursor);
+	}
+	return streak < 2 ? 0 : streak;
+}
+
+describe('Streak walk-back — local time always used, UTC never', () => {
+	test('prevDay uses UTC arithmetic, never server local time', () => {
+		// Regardless of server timezone, prevDay("2024-03-10") must always be "2024-03-09"
+		// (including across DST boundaries where local midnight ≠ UTC midnight)
+		expect(prevDay('2024-03-10')).toBe('2024-03-09'); // DST spring-forward in US
+		expect(prevDay('2024-11-03')).toBe('2024-11-02'); // DST fall-back in US
+		expect(prevDay('2024-01-01')).toBe('2023-12-31'); // year boundary
+		expect(prevDay('2024-03-01')).toBe('2024-02-29'); // leap year
+		expect(prevDay('2023-03-01')).toBe('2023-02-28'); // non-leap year
+	});
+
+	test('UTC+9 user: plays at 01:00 local (still previous UTC date) — streak uses local date', () => {
+		// Scenario: It is 2024-01-16 01:00 in Tokyo (UTC+9) = 2024-01-15 16:00 UTC.
+		// The verse served is for 2024-01-15 (UTC), but the user's LOCAL date is 2024-01-16.
+		// Completions are stored as the user's local date (as returned by dailyVerse.date
+		// which is set from the client's new Date().toLocaleDateString("en-CA")).
+		// The streak walk-back must use local dates, not UTC dates.
+
+		// Four consecutive local dates for a Tokyo user
+		const completedLocalDates = new Set(['2024-01-13', '2024-01-14', '2024-01-15', '2024-01-16']);
+
+		// If we (incorrectly) walked back from the UTC date "2024-01-15" instead of
+		// the local date "2024-01-16", we would miss the most recent completion.
+		const wrongStreakIfUTC = calcStreak(completedLocalDates, '2024-01-15');
+		const correctStreakWithLocalDate = calcStreak(completedLocalDates, '2024-01-16');
+
+		// UTC walk-back misses the local "2024-01-16" entry → only finds 3 consecutive days
+		// (but actually it finds 2024-01-15, 2024-01-14, 2024-01-13 = 3, returned as 3)
+		// The point is it does NOT include 2024-01-16 which is "today" for the user.
+		expect(wrongStreakIfUTC).toBe(3); // stale — missing today's local entry
+
+		// Local walk-back correctly finds all four entries
+		expect(correctStreakWithLocalDate).toBe(4);
+	});
+
+	test('UTC-8 user: plays at 23:00 local (next UTC date) — streak uses local date', () => {
+		// Scenario: It is 2024-01-15 23:00 in Los Angeles (UTC-8) = 2024-01-16 07:00 UTC.
+		// The verse served is for 2024-01-16 (UTC), but the user's LOCAL date is still 2024-01-15.
+		// Completion is stored as local date "2024-01-15".
+		// Walk-back from "2024-01-15" (local) must find it; walk-back from "2024-01-16" (UTC)
+		// would NOT find it (the entry is stored as "2024-01-15").
+
+		const completedLocalDates = new Set(['2024-01-12', '2024-01-13', '2024-01-14', '2024-01-15']);
+
+		// If we (incorrectly) walked back from the UTC date "2024-01-16" instead of
+		// the local date "2024-01-15", "2024-01-16" is not in the set → streak = 0.
+		const wrongStreakIfUTC = calcStreak(completedLocalDates, '2024-01-16');
+		const correctStreakWithLocalDate = calcStreak(completedLocalDates, '2024-01-15');
+
+		expect(wrongStreakIfUTC).toBe(0); // broken — UTC date not in DB
+		expect(correctStreakWithLocalDate).toBe(4);
+	});
+
+	test('UTC+13 user (Samoa): local date is two days ahead of UTC-11', () => {
+		// Extreme case: UTC+13 user on 2024-01-16 local = 2024-01-15 UTC.
+		const completedLocalDates = new Set(['2024-01-14', '2024-01-15', '2024-01-16']);
+
+		expect(calcStreak(completedLocalDates, '2024-01-14')).toBe(0); // only 1 day (< 2)
+		expect(calcStreak(completedLocalDates, '2024-01-16')).toBe(3); // correct local streak
+		expect(calcStreak(completedLocalDates, '2024-01-15')).toBe(0); // UTC date misses Jan 16
+	});
+
+	test('streak is 0 when today is missing even if yesterday exists', () => {
+		// User missed today — streak must reset regardless of timezone
+		const completedLocalDates = new Set(['2024-01-12', '2024-01-13', '2024-01-14']);
+		// "Today" is 2024-01-16 — they missed the 15th and 16th
+		expect(calcStreak(completedLocalDates, '2024-01-16')).toBe(0);
+	});
+
+	test('streak suppressed below 2 — single day returns 0', () => {
+		const completedLocalDates = new Set(['2024-01-15']);
+		expect(calcStreak(completedLocalDates, '2024-01-15')).toBe(0);
+	});
+
+	test('DB entries with local date store correctly alongside UTC completion timestamp', async () => {
+		// Verify DB round-trip: storing completions with local dates (not UTC)
+		// ensures streak calculation with local dates always works.
+		const userId = 'tz-test-user-' + crypto.randomUUID();
+
+		// UTC+9 scenario: played at 01:00 local on Jan 16 (= UTC Jan 15)
+		// Local date is Jan 16, stored as "2024-01-16" in the DB.
+		const completions = [
+			{
+				id: crypto.randomUUID(),
+				anonymousId: userId,
+				date: '2024-01-14', // local date
+				guessCount: 2,
+				completedAt: new Date('2024-01-13T15:00:00Z'), // UTC
+			},
+			{
+				id: crypto.randomUUID(),
+				anonymousId: userId,
+				date: '2024-01-15', // local date
+				guessCount: 3,
+				completedAt: new Date('2024-01-14T15:00:00Z'), // UTC
+			},
+			{
+				id: crypto.randomUUID(),
+				anonymousId: userId,
+				date: '2024-01-16', // local date — UTC equivalent is 2024-01-15
+				guessCount: 1,
+				completedAt: new Date('2024-01-15T16:00:00Z'), // 01:00 Tokyo time
+			},
+		];
+
+		await db.insert(dailyCompletions).values(completions);
+
+		const rows = await db
+			.select({ date: dailyCompletions.date })
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, userId));
+
+		const storedDates = new Set(rows.map((r) => r.date));
+
+		// Walk-back from LOCAL date "2024-01-16" finds all three entries
+		expect(calcStreak(storedDates, '2024-01-16')).toBe(3);
+
+		// Walk-back from UTC date "2024-01-15" misses the "2024-01-16" local entry
+		// (demonstrates the bug that was fixed: UTC walk-back gives wrong result)
+		expect(calcStreak(storedDates, '2024-01-15')).toBe(0);
+
+		await db.delete(dailyCompletions).where(eq(dailyCompletions.anonymousId, userId));
+	});
+});

todo.md

@@ -59,6 +59,62 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
 
 # done
 
+## march 25th
+
+- Added Sign In with Google (OAuth)
+- Added Google sign-in button to win screen and footer provider label
+- Added rainbow glow effect
+
+## march 24th
+
+- Added achievements system, hint overlay, and progress page polish
+
+## march 23rd
+
+- Extracted CollapsibleTable component and fixed show more behavior
+
+## march 22nd
+
+- Added `/api/send-daily-verse` endpoint for daily Discord verse posting
+- Improved guesses collapse timing, win screen CTA, and progress page polish
+- Fixed Discord message format (italic date + bold verse)
+
+## march 21st
+
+- Added progress page with activity calendar, book grid, and insights
+
+## march 19th
+
+- Added Discord link and shrunk guesses grid for more than three guesses
+- Added MAU section with projection to global stats
+- Added survival curve metrics and table minimizing to global stats
+
+## march 15th–16th
+
+- Fixed instructions, added color border based on closeness between guess and target
+- Added return rate and retention metrics to global stats
+- Added WAU history table, fixed retention metric, added new logos and favicon
+
+## 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
+- Fixed incorrect header background color on Desktop
+- Added color theme toggle button (commented out for now)
+
+## feb 26th
+
+- Added dark mode
+- Removed URL from share text (Wordle said it was ratchet)
+- added option for sharing with verse snippet (hidden on share text first copy)
+
 ## february 22nd
 
 - New share button design; speech bubbles

verses.json

@@ -0,0 +1,94 @@
+[{"book":"1 Chronicles","verse":"Of Mahli: Eleazar, who had no sons.\n Of Kish, the son of Kish: Jerahmeel.\n The sons of Mushi: Mahli, Eder, and Jerimoth. These were the sons of the Levites after their fathers’ houses.\n","citation":"1 Chronicles 24:28-30","date":"2025-12-17"},
+{"book":"Deuteronomy","verse":"Yahweh spoke these words to all your assembly on the mountain out of the middle of the fire, of the cloud, and of the thick darkness, with a great voice. He added no more. He wrote them on two stone tablets, and gave them to me.\n When you heard the voice out of the middle of the darkness, while the mountain was burning with fire, you came near to me, even all the heads of your tribes, and your elders;\n and you said, “Behold, Yahweh our God has shown us his glory and his greatness, and we have heard his voice out of the middle of the fire. We have seen today that God does speak with man, and he lives.\n","citation":"Deuteronomy 5:22-24","date":"2025-12-18"},
+{"book":"Esther","verse":"Haman also said, “Yes, Esther the queen let no man come in with the king to the banquet that she had prepared but myself; and tomorrow I am also invited by her together with the king.\n Yet all this avails me nothing, so long as I see Mordecai the Jew sitting at the king’s gate.”\n Then Zeresh his wife and all his friends said to him, “Let a gallows be made fifty cubits high, and in the morning speak to the king about hanging Mordecai on it. Then go in merrily with the king to the banquet.” This pleased Haman, so he had the gallows made.\n","citation":"Esther 5:12-14","date":"2025-12-19"},
+{"book":"Nehemiah","verse":"I discerned, and behold, God had not sent him; but he pronounced this prophecy against me. Tobiah and Sanballat had hired him.\n He hired so that I would be afraid, do so, and sin, and that they might have material for an evil report, that they might reproach me.\n “Remember, my God, Tobiah and Sanballat according to these their works, and also the prophetess Noadiah, and the rest of the prophets, that would have put me in fear.”\n","citation":"Nehemiah 6:12-14","date":"2025-12-20"},
+{"book":"Micah","verse":"Therefore he will abandon them until the time that she who is in labor gives birth.\nThen the rest of his brothers will return to the children of Israel.\n He shall stand, and shall shepherd in the strength of Yahweh,\nin the majesty of the name of Yahweh his God:\nand they will live, for then he will be great to the ends of the earth.\n He will be our peace when Assyria invades our land,\nand when he marches through our fortresses,\nthen we will raise against him seven shepherds,\nand eight leaders of men.\n","citation":"Micah 5:3-5","date":"2025-12-21"},
+{"book":"Psalms","verse":"Yahweh is your keeper.\nYahweh is your shade on your right hand.\n The sun will not harm you by day,\nnor the moon by night.\n Yahweh will keep you from all evil.\nHe will keep your soul.\n","citation":"Psalms 121:5-7","date":"2025-12-22"},
+{"book":"Genesis","verse":"Leah conceived again, and bore a sixth son to Jacob.\n Leah said, “God has endowed me with a good dowry. Now my husband will live with me, because I have borne him six sons.” She named him Zebulun.\n Afterwards, she bore a daughter, and named her Dinah.\n","citation":"Genesis 30:19-21","date":"2025-12-23"},
+{"book":"Luke","verse":"And it came to pass in those days that a decree went out from Caesar Augustus that all the world should be registered. This census first took place while Quirinius was governing Syria. So all went to be registered, everyone to his own city.\n\nJoseph also went up from Galilee, out of the city of Nazareth, into Judea, to the city of David, which is called Bethlehem, because he was of the house and lineage of David, to be registered with Mary, his betrothed wife, who was with child. So it was, that while they were there, the days were completed for her to be delivered.","citation":"Luke 2:1-6","date":"2025-12-24"},
+{"book":"Luke","verse":"Now there were in the same country shepherds living out in the fields, keeping watch over their flock by night. And behold, an angel of the Lord stood before them, and the glory of the Lord shone around them, and they were greatly afraid. Then the angel said to them, “Do not be afraid, for behold, I bring you good tidings of great joy which will be to all people. For there is born to you this day in the city of David a Savior, who is Christ the Lord. And this will be the sign to you: You will find a Babe wrapped in swaddling cloths, lying in a manger.”","citation":"Luke 2:8-12","date":"2025-12-25"},
+{"book":"Jude","verse":"Jude, a bondservant of Jesus Christ, and brother of James, To those who are called, sanctified by God the Father, and preserved in Jesus Christ: Mercy, peace, and love be multiplied to you. Beloved, while I was very diligent to write to you concerning our common salvation, I found it necessary to write to you exhorting you to contend earnestly for the faith which was once for all delivered to the saints.","citation":"Jude 1:1-3","date":"2025-12-26"},
+{"book":"Isaiah","verse":"Do not let the son of the foreigner Who has joined himself to the Lord speak, saying, \"The Lord has utterly separated me from His people\"; Nor let the eunuch say, \"Here I am, a dry tree.\" For thus says the Lord: \"To the eunuchs who keep My Sabbaths, and choose what pleases Me, And hold fast My covenant, Even to them I will give in My house And within My walls a place and a name better than that of sons and daughters; I will give them an everlasting name that shall not be cut off.","citation":"Isaiah 56:3-5","date":"2025-12-27"},
+{"book":"Matthew","verse":"But Jesus answered and said to them, “I also will ask you one thing, which if you tell Me, I likewise will tell you by what authority I do these things: The baptism of John—where was it from? From heaven or from men?” And they reasoned among themselves, saying, “If we say, ‘From heaven,’ He will say to us, ‘Why then did you not believe him?’ But if we say, ‘From men,’ we fear the multitude, for all count John as a prophet.”","citation":"Matthew 21:24-26","date":"2025-12-28"},
+{"book":"2 Chronicles","verse":"Then Hezekiah humbled himself for the pride of his heart, he and the inhabitants of Jerusalem, so that the wrath of the Lord did not come upon them in the days of Hezekiah. Hezekiah had very great riches and honor. And he made himself treasuries for silver, for gold, for precious stones, for spices, for shields, and for all kinds of desirable items; storehouses for the harvest of grain, wine, and oil; and stalls for all kinds of livestock, and folds for flocks.","citation":"2 Chronicles 32:26-28","date":"2025-12-29"},
+{"book":"1 Thessalonians","verse":"therefore, brethren, in all our affliction and distress we were comforted concerning you by your faith. For now we live, if you stand fast in the Lord. For what thanks can we render to God for you, for all the joy with which we rejoice for your sake before our God,","citation":"1 Thessalonians 3:7-9","date":"2025-12-30"},
+{"book":"Psalms","verse":"The moon and stars to rule by night, For His mercy endures forever. To Him who struck Egypt in their firstborn, For His mercy endures forever; And brought out Israel from among them, For His mercy endures forever;","citation":"Psalms 136:9-11","date":"2025-12-31"},
+{"book":"Daniel","verse":"And the male goat is the kingdom of Greece. The large horn that is between its eyes is the first king. As for the broken horn and the four that stood up in its place, four kingdoms shall arise out of that nation, but not with its power. “And in the latter time of their kingdom, When the transgressors have reached their fullness, A king shall arise, Having fierce features, Who understands sinister schemes.","citation":"Daniel 8:21-23","date":"2026-01-01"},
+{"book":"Jude","verse":"But you, beloved, remember the words which were spoken before by the apostles of our Lord Jesus Christ: how they told you that there would be mockers in the last time who would walk according to their own ungodly lusts. These are sensual persons, who cause divisions, not having the Spirit.","citation":"Jude 1:17-19","date":"2026-01-02"},
+{"book":"Exodus","verse":"And Moses said, “We will go with our young and our old; with our sons and our daughters, with our flocks and our herds we will go, for we must hold a feast to the Lord.” Then he said to them, “The Lord had better be with you when I let you and your little ones go! Beware, for evil is ahead of you. Not so! Go now, you who are men, and serve the Lord, for that is what you desired.” And they were driven out from Pharaoh’s presence.","citation":"Exodus 10:9-11","date":"2026-01-03"},
+{"book":"Deuteronomy","verse":"Gather the people together, men and women and little ones, and the stranger who is within your gates, that they may hear and that they may learn to fear the Lord your God and carefully observe all the words of this law, and that their children, who have not known it, may hear and learn to fear the Lord your God as long as you live in the land which you cross the Jordan to possess.” Then the Lord said to Moses, “Behold, the days approach when you must die; call Joshua, and present yourselves in the tabernacle of meeting, that I may inaugurate him.” So Moses and Joshua went and presented themselves in the tabernacle of meeting.","citation":"Deuteronomy 31:12-14","date":"2026-01-04"},
+{"book":"Colossians","verse":"and by Him to reconcile all things to Himself, by Him, whether things on earth or things in heaven, having made peace through the blood of His cross. And you, who once were alienated and enemies in your mind by wicked works, yet now He has reconciled in the body of His flesh through death, to present you holy, and blameless, and above reproach in His sight—","citation":"Colossians 1:20-22","date":"2026-01-05"},
+{"book":"2 Thessalonians","verse":"We are bound to thank God always for you, brethren, as it is fitting, because your faith grows exceedingly, and the love of every one of you all abounds toward each other, so that we ourselves boast of you among the churches of God for your patience and faith in all your persecutions and tribulations that you endure, which is manifest evidence of the righteous judgment of God, that you may be counted worthy of the kingdom of God, for which you also suffer;","citation":"2 Thessalonians 1:3-5","date":"2026-01-06"},
+{"book":"2 Timothy","verse":"The Lord grant mercy to the household of Onesiphorus, for he often refreshed me, and was not ashamed of my chain; but when he arrived in Rome, he sought me out very zealously and found me. The Lord grant to him that he may find mercy from the Lord in that Day—and you know very well how many ways he ministered to me at Ephesus.","citation":"2 Timothy 1:16-18","date":"2026-01-07"},
+{"book":"Micah","verse":"Do not trust in a friend; Do not put your confidence in a companion; Guard the doors of your mouth From her who lies in your bosom. For son dishonors father, Daughter rises against her mother, Daughter-in-law against her mother-in-law; A man’s enemies are the men of his own household. Therefore I will look to the Lord; I will wait for the God of my salvation; My God will hear me.","citation":"Micah 7:5-7","date":"2026-01-08"},
+{"book":"Amos","verse":"And He said, “Amos, what do you see?” So I said, “A basket of summer fruit.” Then the Lord said to me: “The end has come upon My people Israel; I will not pass by them anymore. And the songs of the temple Shall be wailing in that day,” Says the Lord God— “Many dead bodies everywhere, They shall be thrown out in silence.” Hear this, you who swallow up the needy, And make the poor of the land fail,","citation":"Amos 8:2-4","date":"2026-01-09"},
+{"book":"Acts","verse":"But do not yield to them, for more than forty of them lie in wait for him, men who have bound themselves by an oath that they will neither eat nor drink till they have killed him; and now they are ready, waiting for the promise from you.” So the commander let the young man depart, and commanded him, “Tell no one that you have revealed these things to me.” And he called for two centurions, saying, “Prepare two hundred soldiers, seventy horsemen, and two hundred spearmen to go to Caesarea at the third hour of the night;","citation":"Acts 23:21-23","date":"2026-01-10"},
+{"book":"Hebrews","verse":"that by two immutable things, in which it is impossible for God to lie, we might have strong consolation, who have fled for refuge to lay hold of the hope set before us. This hope we have as an anchor of the soul, both sure and steadfast, and which enters the Presence behind the veil, where the forerunner has entered for us, even Jesus, having become High Priest forever according to the order of Melchizedek.","citation":"Hebrews 6:18-20","date":"2026-01-11"},
+{"book":"Acts","verse":"So when Paul’s sister’s son heard of their ambush, he went and entered the barracks and told Paul. Then Paul called one of the centurions to him and said, “Take this young man to the commander, for he has something to tell him.” So he took him and brought him to the commander and said, “Paul the prisoner called me to him and asked me to bring this young man to you. He has something to say to you.”","citation":"Acts 23:16-18","date":"2026-01-12"},
+{"book":"Habakkuk","verse":"You went forth for the salvation of Your people, For salvation with Your Anointed. You struck the head from the house of the wicked, By laying bare from foundation to neck. You thrust through with his own arrows The head of his villages. They came out like a whirlwind to scatter me; Their rejoicing was like feasting on the poor in secret. You walked through the sea with Your horses, Through the heap of great waters.","citation":"Habakkuk 3:13-15","date":"2026-01-13"},
+{"book":"Zephaniah","verse":"In that day you shall not be shamed for any of your deeds In which you transgress against Me; For then I will take away from your midst Those who rejoice in your pride, And you shall no longer be haughty In My holy mountain. I will leave in your midst A meek and humble people, And they shall trust in the name of the Lord. The remnant of Israel shall do no unrighteousness And speak no lies, Nor shall a deceitful tongue be found in their mouth; For they shall feed their flocks and lie down, And no one shall make them afraid.”","citation":"Zephaniah 3:11-13","date":"2026-01-14"},
+{"book":"Ezra","verse":"However, in the first year of Cyrus king of Babylon, King Cyrus issued a decree to build this house of God. Also, the gold and silver articles of the house of God, which Nebuchadnezzar had taken from the temple that was in Jerusalem and carried into the temple of Babylon—those King Cyrus took from the temple of Babylon, and they were given to one named Sheshbazzar, whom he had made governor. And he said to him, ‘Take these articles; go, carry them to the temple site that is in Jerusalem, and let the house of God be rebuilt on its former site.’","citation":"Ezra 5:13-15","date":"2026-01-15"},
+{"book":"Numbers","verse":"They departed from Succoth and camped at Etham, which is on the edge of the wilderness. They moved from Etham and turned back to Pi Hahiroth, which is east of Baal Zephon; and they camped near Migdol. They departed from before Hahiroth and passed through the midst of the sea into the wilderness, went three days’ journey in the Wilderness of Etham, and camped at Marah.","citation":"Numbers 33:6-8","date":"2026-01-16"},
+{"book":"Ruth","verse":"When she saw that she was determined to go with her, she stopped speaking to her. Now the two of them went until they came to Bethlehem. And it happened, when they had come to Bethlehem, that all the city was excited because of them; and the women said, “ Is this Naomi?” But she said to them, “Do not call me Naomi; call me Mara, for the Almighty has dealt very bitterly with me.","citation":"Ruth 1:18-20","date":"2026-01-17"},
+{"book":"Matthew","verse":"But as the days of Noah were, so also will the coming of the Son of Man be. For as in the days before the flood, they were eating and drinking, marrying and giving in marriage, until the day that Noah entered the ark, and did not know until the flood came and took them all away, so also will the coming of the Son of Man be.","citation":"Matthew 24:37-39","date":"2026-01-18"},
+{"book":"1 Timothy","verse":"Now the purpose of the commandment is love from a pure heart, from a good conscience, and from sincere faith, from which some, having strayed, have turned aside to idle talk, desiring to be teachers of the law, understanding neither what they say nor the things which they affirm.","citation":"1 Timothy 1:5-7","date":"2026-01-19"},
+{"book":"1 Peter","verse":"To them it was revealed that, not to themselves, but to us they were ministering the things which now have been reported to you through those who have preached the gospel to you by the Holy Spirit sent from heaven—things which angels desire to look into. Therefore gird up the loins of your mind, be sober, and rest your hope fully upon the grace that is to be brought to you at the revelation of Jesus Christ; as obedient children, not conforming yourselves to the former lusts, as in your ignorance;","citation":"1 Peter 1:12-14","date":"2026-01-20"},
+{"book":"Ruth","verse":"Now the two of them went until they came to Bethlehem. And it happened, when they had come to Bethlehem, that all the city was excited because of them; and the women said, “ Is this Naomi?” But she said to them, “Do not call me Naomi; call me Mara, for the Almighty has dealt very bitterly with me. I went out full, and the Lord has brought me home again empty. Why do you call me Naomi, since the Lord has testified against me, and the Almighty has afflicted me?”","citation":"Ruth 1:19-21","date":"2026-01-21"},
+{"book":"Ezra","verse":"Then the prophet Haggai and Zechariah the son of Iddo, prophets, prophesied to the Jews who were in Judah and Jerusalem, in the name of the God of Israel, who was over them. So Zerubbabel the son of Shealtiel and Jeshua the son of Jozadak rose up and began to build the house of God which is in Jerusalem; and the prophets of God were with them, helping them. At the same time Tattenai the governor of the region beyond the River and Shethar-Boznai and their companions came to them and spoke thus to them: “Who has commanded you to build this temple and finish this wall?”","citation":"Ezra 5:1-3","date":"2026-01-22"},
+{"book":"2 Chronicles","verse":"For now I have chosen and sanctified this house, that My name may be there forever; and My eyes and My heart will be there perpetually. As for you, if you walk before Me as your father David walked, and do according to all that I have commanded you, and if you keep My statutes and My judgments, then I will establish the throne of your kingdom, as I covenanted with David your father, saying, ‘You shall not fail to have a man as ruler in Israel.’","citation":"2 Chronicles 7:16-18","date":"2026-01-23"},
+{"book":"Joel","verse":"Then the Lord will be zealous for His land, And pity His people. The Lord will answer and say to His people, “Behold, I will send you grain and new wine and oil, And you will be satisfied by them; I will no longer make you a reproach among the nations. “But I will remove far from you the northern army, And will drive him away into a barren and desolate land, With his face toward the eastern sea And his back toward the western sea; His stench will come up, And his foul odor will rise, Because he has done monstrous things.”","citation":"Joel 2:18-20","date":"2026-01-24"},
+{"book":"1 Samuel","verse":"And now this present which your maidservant has brought to my lord, let it be given to the young men who follow my lord. Please forgive the trespass of your maidservant. For the Lord will certainly make for my lord an enduring house, because my lord fights the battles of the Lord, and evil is not found in you throughout your days. Yet a man has risen to pursue you and seek your life, but the life of my lord shall be bound in the bundle of the living with the Lord your God; and the lives of your enemies He shall sling out, as from the pocket of a sling.","citation":"1 Samuel 25:27-29","date":"2026-01-25"},
+{"book":"Galatians","verse":"But I saw none of the other apostles except James, the Lord’s brother. (Now concerning the things which I write to you, indeed, before God, I do not lie.) Afterward I went into the regions of Syria and Cilicia.","citation":"Galatians 1:19-21","date":"2026-01-26"},
+{"book":"Lamentations","verse":"How the gold has become dim! How changed the fine gold! The stones of the sanctuary are scattered At the head of every street. The precious sons of Zion, Valuable as fine gold, How they are regarded as clay pots, The work of the hands of the potter! Even the jackals present their breasts To nurse their young; But the daughter of my people is cruel, Like ostriches in the wilderness.","citation":"Lamentations 4:1-3","date":"2026-01-27"},
+{"book":"James","verse":"Draw near to God and He will draw near to you. Cleanse your hands, you sinners; and purify your hearts, you double-minded. Lament and mourn and weep! Let your laughter be turned to mourning and your joy to gloom. Humble yourselves in the sight of the Lord, and He will lift you up.","citation":"James 4:8-10","date":"2026-01-28"},
+{"book":"2 Kings","verse":"And he called Gehazi and said, “Call this Shunammite woman.” So he called her. And when she came in to him, he said, “Pick up your son.” So she went in, fell at his feet, and bowed to the ground; then she picked up her son and went out. And Elisha returned to Gilgal, and there was a famine in the land. Now the sons of the prophets were sitting before him; and he said to his servant, “Put on the large pot, and boil stew for the sons of the prophets.”","citation":"2 Kings 4:36-38","date":"2026-01-29"},
+{"book":"Deuteronomy","verse":"You should know in your heart that as a man chastens his son, so the Lord your God chastens you. “Therefore you shall keep the commandments of the Lord your God, to walk in His ways and to fear Him. For the Lord your God is bringing you into a good land, a land of brooks of water, of fountains and springs, that flow out of valleys and hills;","citation":"Deuteronomy 8:5-7","date":"2026-01-30"},
+{"book":"Isaiah","verse":"He burns half of it in the fire; With this half he eats meat; He roasts a roast, and is satisfied. He even warms himself and says, “Ah! I am warm, I have seen the fire.” And the rest of it he makes into a god, His carved image. He falls down before it and worships it, Prays to it and says, “Deliver me, for you are my god!” They do not know nor understand; For He has shut their eyes, so that they cannot see, And their hearts, so that they cannot understand.","citation":"Isaiah 44:16-18","date":"2026-01-31"},
+{"book":"3 John","verse":"Beloved, you do faithfully whatever you do for the brethren and for strangers, who have borne witness of your love before the church. If you send them forward on their journey in a manner worthy of God, you will do well, because they went forth for His name’s sake, taking nothing from the Gentiles.","citation":"3 John 1:5-7","date":"2026-02-01"},
+{"book":"1 Thessalonians","verse":"Greet all the brethren with a holy kiss. I charge you by the Lord that this epistle be read to all the holy brethren. The grace of our Lord Jesus Christ be with you. Amen.","citation":"1 Thessalonians 5:26-28","date":"2026-02-02"},
+{"book":"Joshua","verse":"Then the manna ceased on the day after they had eaten the produce of the land; and the children of Israel no longer had manna, but they ate the food of the land of Canaan that year. And it came to pass, when Joshua was by Jericho, that he lifted his eyes and looked, and behold, a Man stood opposite him with His sword drawn in His hand. And Joshua went to Him and said to Him, “ Are You for us or for our adversaries?” So He said, “No, but as Commander of the army of the Lord I have now come.” And Joshua fell on his face to the earth and worshiped, and said to Him, “What does my Lord say to His servant?”","citation":"Joshua 5:12-14","date":"2026-02-03"},
+{"book":"Song of Solomon","verse":"Your neck is like the tower of David, Built for an armory, On which hang a thousand bucklers, All shields of mighty men. Your two breasts are like two fawns, Twins of a gazelle, Which feed among the lilies. Until the day breaks And the shadows flee away, I will go my way to the mountain of myrrh And to the hill of frankincense.","citation":"Song of Solomon 4:4-6","date":"2026-02-04"},
+{"book":"Genesis","verse":"But his father refused and said, “I know, my son, I know. He also shall become a people, and he also shall be great; but truly his younger brother shall be greater than he, and his descendants shall become a multitude of nations.” So he blessed them that day, saying, “By you Israel will bless, saying, ‘May God make you as Ephraim and as Manasseh!’ ” And thus he set Ephraim before Manasseh. Then Israel said to Joseph, “Behold, I am dying, but God will be with you and bring you back to the land of your fathers.","citation":"Genesis 48:19-21","date":"2026-02-05"},
+{"book":"2 Peter","verse":"whereas angels, who are greater in power and might, do not bring a reviling accusation against them before the Lord. But these, like natural brute beasts made to be caught and destroyed, speak evil of the things they do not understand, and will utterly perish in their own corruption, and will receive the wages of unrighteousness, as those who count it pleasure to carouse in the daytime. They are spots and blemishes, carousing in their own deceptions while they feast with you,","citation":"2 Peter 2:11-13","date":"2026-02-06"},
+{"book":"2 Chronicles","verse":"Now after the death of Jehoiada the leaders of Judah came and bowed down to the king. And the king listened to them. Therefore they left the house of the Lord God of their fathers, and served wooden images and idols; and wrath came upon Judah and Jerusalem because of their trespass. Yet He sent prophets to them, to bring them back to the Lord; and they testified against them, but they would not listen.","citation":"2 Chronicles 24:17-19","date":"2026-02-07"},
+{"book":"Psalms","verse":"Man goes out to his work And to his labor until the evening. O Lord, how manifold are Your works! In wisdom You have made them all. The earth is full of Your possessions— This great and wide sea, In which are innumerable teeming things, Living things both small and great.","citation":"Psalms 104:23-25","date":"2026-02-08"},
+{"book":"1 Kings","verse":"Thus Zimri destroyed all the household of Baasha, according to the word of the Lord, which He spoke against Baasha by Jehu the prophet, for all the sins of Baasha and the sins of Elah his son, by which they had sinned and by which they had made Israel sin, in provoking the Lord God of Israel to anger with their idols. Now the rest of the acts of Elah, and all that he did, are they not written in the book of the chronicles of the kings of Israel?","citation":"1 Kings 16:12-14","date":"2026-02-09"},
+{"book":"Psalms","verse":"Blessed is the man Who walks not in the counsel of the ungodly, Nor stands in the path of sinners, Nor sits in the seat of the scornful; But his delight is in the law of the Lord, And in His law he meditates day and night. He shall be like a tree Planted by the rivers of water, That brings forth its fruit in its season, Whose leaf also shall not wither; And whatever he does shall prosper.","citation":"Psalms 1:1-3","date":"2026-02-10"},
+{"book":"Romans","verse":"And not only that, but we also rejoice in God through our Lord Jesus Christ, through whom we have now received the reconciliation. Therefore, just as through one man sin entered the world, and death through sin, and thus death spread to all men, because all sinned— (For until the law sin was in the world, but sin is not imputed when there is no law.","citation":"Romans 5:11-13","date":"2026-02-11"},
+{"book":"1 Peter","verse":"For in this manner, in former times, the holy women who trusted in God also adorned themselves, being submissive to their own husbands, as Sarah obeyed Abraham, calling him lord, whose daughters you are if you do good and are not afraid with any terror. Husbands, likewise, dwell with them with understanding, giving honor to the wife, as to the weaker vessel, and as being heirs together of the grace of life, that your prayers may not be hindered.","citation":"1 Peter 3:5-7","date":"2026-02-12"},
+{"book":"Micah","verse":"Will the Lord be pleased with thousands of rams, Ten thousand rivers of oil? Shall I give my firstborn for my transgression, The fruit of my body for the sin of my soul? He has shown you, O man, what is good; And what does the Lord require of you But to do justly, To love mercy, And to walk humbly with your God? The Lord’s voice cries to the city— Wisdom shall see Your name: “Hear the rod! Who has appointed it?","citation":"Micah 6:7-9","date":"2026-02-13"},
+{"book":"Micah","verse":"For all people walk each in the name of his god, But we will walk in the name of the Lord our God Forever and ever. “In that day,” says the Lord, “I will assemble the lame, I will gather the outcast And those whom I have afflicted; I will make the lame a remnant, And the outcast a strong nation; So the Lord will reign over them in Mount Zion From now on, even forever.","citation":"Micah 4:5-7","date":"2026-02-14"},
+{"book":"1 John","verse":"And whatever we ask we receive from Him, because we keep His commandments and do those things that are pleasing in His sight. And this is His commandment: that we should believe on the name of His Son Jesus Christ and love one another, as He gave us commandment. Now he who keeps His commandments abides in Him, and He in him. And by this we know that He abides in us, by the Spirit whom He has given us.","citation":"1 John 3:22-24","date":"2026-02-15"},
+{"book":"Joel","verse":"Tell your children about it, Let your children tell their children, And their children another generation. What the chewing locust left, the swarming locust has eaten; What the swarming locust left, the crawling locust has eaten; And what the crawling locust left, the consuming locust has eaten. Awake, you drunkards, and weep; And wail, all you drinkers of wine, Because of the new wine, For it has been cut off from your mouth.","citation":"Joel 1:3-5","date":"2026-02-16"},
+{"book":"Isaiah","verse":"The Syrians before and the Philistines behind; And they shall devour Israel with an open mouth. For all this His anger is not turned away, But His hand is stretched out still. For the people do not turn to Him who strikes them, Nor do they seek the Lord of hosts. Therefore the Lord will cut off head and tail from Israel, Palm branch and bulrush in one day.","citation":"Isaiah 9:12-14","date":"2026-02-17"},
+{"book":"1 Thessalonians","verse":"Abstain from every form of evil. Now may the God of peace Himself sanctify you completely; and may your whole spirit, soul, and body be preserved blameless at the coming of our Lord Jesus Christ. He who calls you is faithful, who also will do it.","citation":"1 Thessalonians 5:22-24","date":"2026-02-18"},
+{"book":"Jonah","verse":"Then the mariners were afraid; and every man cried out to his god, and threw the cargo that was in the ship into the sea, to lighten the load. But Jonah had gone down into the lowest parts of the ship, had lain down, and was fast asleep. So the captain came to him, and said to him, “What do you mean, sleeper? Arise, call on your God; perhaps your God will consider us, so that we may not perish.” And they said to one another, “Come, let us cast lots, that we may know for whose cause this trouble has come upon us.” So they cast lots, and the lot fell on Jonah.","citation":"Jonah 1:5-7","date":"2026-02-19"},
+{"book":"Judges","verse":"And the Angel of the Lord appeared to the woman and said to her, “Indeed now, you are barren and have borne no children, but you shall conceive and bear a son. Now therefore, please be careful not to drink wine or similar drink, and not to eat anything unclean. For behold, you shall conceive and bear a son. And no razor shall come upon his head, for the child shall be a Nazirite to God from the womb; and he shall begin to deliver Israel out of the hand of the Philistines.”","citation":"Judges 13:3-5","date":"2026-02-20"},
+{"book":"1 Thessalonians","verse":"For if we believe that Jesus died and rose again, even so God will bring with Him those who sleep in Jesus. For this we say to you by the word of the Lord, that we who are alive and remain until the coming of the Lord will by no means precede those who are asleep. For the Lord Himself will descend from heaven with a shout, with the voice of an archangel, and with the trumpet of God. And the dead in Christ will rise first.","citation":"1 Thessalonians 4:14-16","date":"2026-02-21"},
+{"book":"Daniel","verse":"And suddenly, one having the likeness of the sons of men touched my lips; then I opened my mouth and spoke, saying to him who stood before me, “My lord, because of the vision my sorrows have overwhelmed me, and I have retained no strength. For how can this servant of my lord talk with you, my lord? As for me, no strength remains in me now, nor is any breath left in me.” Then again, the one having the likeness of a man touched me and strengthened me.","citation":"Daniel 10:16-18","date":"2026-02-22"},
+{"book":"Exodus","verse":"Then the daughter of Pharaoh came down to bathe at the river. And her maidens walked along the riverside; and when she saw the ark among the reeds, she sent her maid to get it. And when she opened it, she saw the child, and behold, the baby wept. So she had compassion on him, and said, “This is one of the Hebrews’ children.” Then his sister said to Pharaoh’s daughter, “Shall I go and call a nurse for you from the Hebrew women, that she may nurse the child for you?”","citation":"Exodus 2:5-7","date":"2026-02-23"},
+{"book":"Philippians","verse":"and not in any way terrified by your adversaries, which is to them a proof of perdition, but to you of salvation, and that from God. For to you it has been granted on behalf of Christ, not only to believe in Him, but also to suffer for His sake, having the same conflict which you saw in me and now hear is in me.","citation":"Philippians 1:28-30","date":"2026-02-24"},
+{"book":"Hosea","verse":"As they called them, So they went from them; They sacrificed to the Baals, And burned incense to carved images. “I taught Ephraim to walk, Taking them by their arms; But they did not know that I healed them. I drew them with gentle cords, With bands of love, And I was to them as those who take the yoke from their neck. I stooped and fed them.","citation":"Hosea 11:2-4","date":"2026-02-25"},
+{"book":"Habakkuk","verse":"You are filled with shame instead of glory. You also—drink! And be exposed as uncircumcised! The cup of the Lord’s right hand will be turned against you, And utter shame will be on your glory. For the violence done to Lebanon will cover you, And the plunder of beasts which made them afraid, Because of men’s blood And the violence of the land and the city, And of all who dwell in it. “What profit is the image, that its maker should carve it, The molded image, a teacher of lies, That the maker of its mold should trust in it, To make mute idols?","citation":"Habakkuk 2:16-18","date":"2026-02-26"},
+{"book":"Genesis","verse":"I am the God of Bethel, where you anointed the pillar and where you made a vow to Me. Now arise, get out of this land, and return to the land of your family.’ ” Then Rachel and Leah answered and said to him, “Is there still any portion or inheritance for us in our father’s house? Are we not considered strangers by him? For he has sold us, and also completely consumed our money.","citation":"Genesis 31:13-15","date":"2026-02-27"},
+{"book":"Galatians","verse":"to whom we did not yield submission even for an hour, that the truth of the gospel might continue with you. But from those who seemed to be something—whatever they were, it makes no difference to me; God shows personal favoritism to no man—for those who seemed to be something added nothing to me. But on the contrary, when they saw that the gospel for the uncircumcised had been committed to me, as the gospel for the circumcised was to Peter","citation":"Galatians 2:5-7","date":"2026-02-28"},
+{"book":"Revelation","verse":"Now when the dragon saw that he had been cast to the earth, he persecuted the woman who gave birth to the male Child. But the woman was given two wings of a great eagle, that she might fly into the wilderness to her place, where she is nourished for a time and times and half a time, from the presence of the serpent. So the serpent spewed water out of his mouth like a flood after the woman, that he might cause her to be carried away by the flood.","citation":"Revelation 12:13-15","date":"2026-03-01"},
+{"book":"Zephaniah","verse":"“I will utterly consume everything From the face of the land,” Says the Lord; “I will consume man and beast; I will consume the birds of the heavens, The fish of the sea, And the stumbling blocks along with the wicked. I will cut off man from the face of the land,” Says the Lord. “I will stretch out My hand against Judah, And against all the inhabitants of Jerusalem. I will cut off every trace of Baal from this place, The names of the idolatrous priests with the pagan priests—","citation":"Zephaniah 1:2-4","date":"2026-03-02"},
+{"book":"Malachi","verse":"“But you profane it, In that you say, ‘The table of the Lord is defiled; And its fruit, its food, is contemptible.’ You also say, ‘Oh, what a weariness!’ And you sneer at it,” Says the Lord of hosts. “And you bring the stolen, the lame, and the sick; Thus you bring an offering! Should I accept this from your hand?” Says the Lord. “But cursed be the deceiver Who has in his flock a male, And takes a vow, But sacrifices to the Lord what is blemished— For I am a great King,” Says the Lord of hosts, “And My name is to be feared among the nations.","citation":"Malachi 1:12-14","date":"2026-03-03"},
+{"book":"Job","verse":"Why does your heart carry you away, And what do your eyes wink at, That you turn your spirit against God, And let such words go out of your mouth? “What is man, that he could be pure? And he who is born of a woman, that he could be righteous?","citation":"Job 15:12-14","date":"2026-03-04"},
+{"book":"Acts","verse":"Also, many of those who had practiced magic brought their books together and burned them in the sight of all. And they counted up the value of them, and it totaled fifty thousand pieces of silver. So the word of the Lord grew mightily and prevailed. When these things were accomplished, Paul purposed in the Spirit, when he had passed through Macedonia and Achaia, to go to Jerusalem, saying, “After I have been there, I must also see Rome.”","citation":"Acts 19:19-21","date":"2026-03-05"},
+{"book":"2 Peter","verse":"For we did not follow cunningly devised fables when we made known to you the power and coming of our Lord Jesus Christ, but were eyewitnesses of His majesty. For He received from God the Father honor and glory when such a voice came to Him from the Excellent Glory: “This is My beloved Son, in whom I am well pleased.” And we heard this voice which came from heaven when we were with Him on the holy mountain.","citation":"2 Peter 1:16-18","date":"2026-03-06"},
+{"book":"James","verse":"If any of you lacks wisdom, let him ask of God, who gives to all liberally and without reproach, and it will be given to him. But let him ask in faith, with no doubting, for he who doubts is like a wave of the sea driven and tossed by the wind. For let not that man suppose that he will receive anything from the Lord;","citation":"James 1:5-7","date":"2026-03-07"},
+{"book":"1 Samuel","verse":"And watch: if it goes up the road to its own territory, to Beth Shemesh, then He has done us this great evil. But if not, then we shall know that it is not His hand that struck us—it happened to us by chance.” Then the men did so; they took two milk cows and hitched them to the cart, and shut up their calves at home. And they set the ark of the Lord on the cart, and the chest with the gold rats and the images of their tumors.","citation":"1 Samuel 6:9-11","date":"2026-03-08"},
+{"book":"2 Corinthians","verse":"For our boasting is this: the testimony of our conscience that we conducted ourselves in the world in simplicity and godly sincerity, not with fleshly wisdom but by the grace of God, and more abundantly toward you. For we are not writing any other things to you than what you read or understand. Now I trust you will understand, even to the end (as also you have understood us in part), that we are your boast as you also are ours, in the day of the Lord Jesus.","citation":"2 Corinthians 1:12-14","date":"2026-03-09"},
+{"book":"1 Kings","verse":"Benaiah the son of Jehoiada answered the king and said, “Amen! May the Lord God of my lord the king say so too. As the Lord has been with my lord the king, even so may He be with Solomon, and make his throne greater than the throne of my lord King David.” So Zadok the priest, Nathan the prophet, Benaiah the son of Jehoiada, the Cherethites, and the Pelethites went down and had Solomon ride on King David’s mule, and took him to Gihon.","citation":"1 Kings 1:36-38","date":"2026-03-10"},
+{"book":"Proverbs","verse":"So that your trust may be in the Lord; I have instructed you today, even you. Have I not written to you excellent things Of counsels and knowledge, That I may make you know the certainty of the words of truth, That you may answer words of truth To those who send to you?","citation":"Proverbs 22:19-21","date":"2026-03-11"},
+{"book":"2 Samuel","verse":"Then Hadadezer sent and brought out the Syrians who were beyond the River, and they came to Helam. And Shobach the commander of Hadadezer’s army went before them. When it was told David, he gathered all Israel, crossed over the Jordan, and came to Helam. And the Syrians set themselves in battle array against David and fought with him. Then the Syrians fled before Israel; and David killed seven hundred charioteers and forty thousand horsemen of the Syrians, and struck Shobach the commander of their army, who died there.","citation":"2 Samuel 10:16-18","date":"2026-03-12"},
+{"book":"Amos","verse":"“I overthrew some of you, As God overthrew Sodom and Gomorrah, And you were like a firebrand plucked from the burning; Yet you have not returned to Me,” Says the Lord. “Therefore thus will I do to you, O Israel; Because I will do this to you, Prepare to meet your God, O Israel!” For behold, He who forms mountains, And creates the wind, Who declares to man what his thought is, And makes the morning darkness, Who treads the high places of the earth— The Lord God of hosts is His name.","citation":"Amos 4:11-13","date":"2026-03-13"},
+{"book":"Hosea","verse":"“Therefore, behold, I will hedge up your way with thorns, And wall her in, So that she cannot find her paths. She will chase her lovers, But not overtake them; Yes, she will seek them, but not find them. Then she will say, ‘I will go and return to my first husband, For then it was better for me than now.’ For she did not know That I gave her grain, new wine, and oil, And multiplied her silver and gold— Which they prepared for Baal.","citation":"Hosea 2:6-8","date":"2026-03-14"},
+{"book":"Jeremiah","verse":"Behold, I will bring fear upon you,” Says the Lord God of hosts, “From all those who are around you; You shall be driven out, everyone headlong, And no one will gather those who wander off. But afterward I will bring back The captives of the people of Ammon,” says the Lord. Against Edom. Thus says the Lord of hosts: “ Is wisdom no more in Teman? Has counsel perished from the prudent? Has their wisdom vanished?","citation":"Jeremiah 49:5-7","date":"2026-03-15"},
+{"book":"Genesis","verse":"Now Jacob went out from Beersheba and went toward Haran. So he came to a certain place and stayed there all night, because the sun had set. And he took one of the stones of that place and put it at his head, and he lay down in that place to sleep. Then he dreamed, and behold, a ladder was set up on the earth, and its top reached to heaven; and there the angels of God were ascending and descending on it.","citation":"Genesis 28:10-12","date":"2026-03-16"},
+{"book":"1 Kings","verse":"In the twenty-seventh year of Asa king of Judah, Zimri had reigned in Tirzah seven days. And the people were encamped against Gibbethon, which belonged to the Philistines. Now the people who were encamped heard it said, “Zimri has conspired and also has killed the king.” So all Israel made Omri, the commander of the army, king over Israel that day in the camp. Then Omri and all Israel with him went up from Gibbethon, and they besieged Tirzah.","citation":"1 Kings 16:15-17","date":"2026-03-17"},
+{"book":"1 John","verse":"And He Himself is the propitiation for our sins, and not for ours only but also for the whole world. Now by this we know that we know Him, if we keep His commandments. He who says, “I know Him,” and does not keep His commandments, is a liar, and the truth is not in him.","citation":"1 John 2:2-4","date":"2026-03-18"},
+{"book":"Esther","verse":"And King Ahasuerus imposed tribute on the land and on the islands of the sea. Now all the acts of his power and his might, and the account of the greatness of Mordecai, to which the king advanced him, are they not written in the book of the chronicles of the kings of Media and Persia? For Mordecai the Jew was second to King Ahasuerus, and was great among the Jews and well received by the multitude of his brethren, seeking the good of his people and speaking peace to all his countrymen.","citation":"Esther 10:1-3","date":"2026-03-19"},
+{"book":"1 Corinthians","verse":"When I was a child, I spoke as a child, I understood as a child, I thought as a child; but when I became a man, I put away childish things. For now we see in a mirror, dimly, but then face to face. Now I know in part, but then I shall know just as I also am known. And now abide faith, hope, love, these three; but the greatest of these is love.","citation":"1 Corinthians 13:11-13","date":"2026-03-20"}]