Add test infrastructure and signin migration tests

- Add test-specific Drizzle config and database connection
- Create test version of auth module using test database
- Add comprehensive integration tests for signin migration logic
- Add unit tests for deduplication algorithm
- Tests cover edge cases like multiple duplicates, timing, and error handling

🤖 Generated with [Claude Code](https://claude.ai/code)

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

.claude/settings.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "deny": [
+      "Read(./.env)",
+      "Read(./secrets/**)",
+      "Read(./config/credentials.json)",
+      "Read(./build)",
+	  "Read(./**.xml)",
+	  "Read(./embeddings**)"
+    ]
+  }
+}

.env.example

@@ -0,0 +1,9 @@
+DATABASE_URL=example.db
+
+AUTH_SECRET=your-random-secret-here
+APPLE_ID=com.yourcompany.yourapp.client
+APPLE_TEAM_ID=your-team-id
+APPLE_KEY_ID=your-key-id
+APPLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----
+your-private-key-here
+-----END PRIVATE KEY-----"

.gitignore

@@ -27,6 +27,5 @@ vite.config.ts.timestamp-*
 
 llms-*
 
-engwebu_usfx.xml
-embeddings-cache-L12.json
-embeddings-cache-L6.json
+embeddings*
+*.xml

.rooignore

@@ -1,3 +0,0 @@
-EnglishNKJBible.xml
-GreekModern1904Bible.xml
-engwebu_usfx.xml

CLAUDE.md

@@ -4,7 +4,33 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Bibdle is a daily Bible verse guessing game built with SvelteKit 5. Players read a verse and try to guess which book of the Bible it comes from. The game provides feedback hints (Testament match, Section match, Adjacent book) similar to Wordle-style games. Progress is stored locally in the browser and a new verse is generated daily.
+Bibdle is a daily Bible verse guessing game built with SvelteKit 5. Players read a verse and try to guess which book of the Bible it comes from. The game provides feedback hints (Testament match, Section match, Adjacent book, etc.) similar to Wordle-style games. Progress is stored locally in the browser and a new verse is generated daily.
+
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+(Make sure you use the Svelte agent to execute these commands)
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+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
 
@@ -19,23 +45,23 @@ Bibdle is a daily Bible verse guessing game built with SvelteKit 5. Players read
 
 ```bash
 # Start development server
-npm run dev
+bun run dev
 
 # Type checking
-npm run check
-npm run check:watch
+bun run check
+bun run check:watch
 
 # Build for production
-npm run build
+bun run build
 
 # Preview production build
-npm run preview
+bun run preview
 
 # Database operations
-npm run db:push      # Push schema changes to database
-npm run db:generate  # Generate migrations
-npm run db:migrate   # Run migrations
-npm run db:studio    # Open Drizzle Studio GUI
+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:studio    # Open Drizzle Studio GUI
 ```
 
 ## Architecture

EnglishNKJBible.xml

@@ -25056,7 +25056,7 @@
 			<chapter number="3">
 				<verse number="1">“Behold, I send My messenger, And he will prepare the way before Me. And the Lord, whom you seek, Will suddenly come to His temple, Even the Messenger of the covenant, In whom you delight. Behold, He is coming,” Says the Lord of hosts.</verse>
 				<verse number="2">“But who can endure the day of His coming? And who can stand when He appears? For He is like a refiner’s fire And like launderers’ soap.</verse>
-				<verse number="3">He will sit as a refiner and a purifier of silver; He will purify the sons of Levi, And purge them as gold and silver, That they may offer to the LordAn offering in righteousness.</verse>
+				<verse number="3">He will sit as a refiner and a purifier of silver; He will purify the sons of Levi, and purge them as gold and silver, that they may offer to the Lord an offering in righteousness.</verse>
 				<verse number="4">“Then the offering of Judah and Jerusalem Will be pleasant to the Lord, As in the days of old, As in former years.</verse>
 				<verse number="5">And I will come near you for judgment; I will be a swift witness Against sorcerers, Against adulterers, Against perjurers, Against those who exploit wage earners and widows and orphans, And against those who turn away an alien— Because they do not fear Me,” Says the Lord of hosts.</verse>
 				<verse number="6">“For I am the Lord, I do not change; Therefore you are not consumed, O sons of Jacob.</verse>

README.md

@@ -8,10 +8,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```sh
 # create a new project in the current directory
-npx sv create
+bunx sv create
 
 # create a new project in my-app
-npx sv create my-app
+bunx sv create my-app
 ```
 
 ## Developing
@@ -19,10 +19,10 @@ npx sv create my-app
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```sh
-npm run dev
+bun run dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
+bun run dev -- --open
 ```
 
 ## Building
@@ -30,9 +30,9 @@ npm run dev -- --open
 To create a production version of your app:
 
 ```sh
-npm run build
+bun run build
 ```
 
-You can preview the production build with `npm run preview`.
+You can preview the production build with `bun run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

bun.lock

@@ -6,27 +6,26 @@
       "name": "bibdle",
       "dependencies": {
         "@xenova/transformers": "^2.17.2",
-        "better-sqlite3": "^12.5.0",
         "fast-xml-parser": "^5.3.3",
         "xml2js": "^0.6.2",
       },
       "devDependencies": {
         "@oslojs/crypto": "^1.0.1",
         "@oslojs/encoding": "^1.1.0",
-        "@sveltejs/adapter-node": "^5.4.0",
-        "@sveltejs/kit": "^2.49.1",
-        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+        "@sveltejs/adapter-node": "^5.5.2",
+        "@sveltejs/kit": "^2.50.1",
+        "@sveltejs/vite-plugin-svelte": "^6.2.4",
         "@tailwindcss/typography": "^0.5.19",
-        "@tailwindcss/vite": "^4.1.17",
-        "@types/better-sqlite3": "^7.6.13",
-        "@types/node": "^22",
+        "@tailwindcss/vite": "^4.1.18",
+        "@types/bun": "^1.3.8",
+        "@types/node": "^22.19.7",
         "drizzle-kit": "^0.31.8",
-        "drizzle-orm": "^0.45.0",
-        "svelte": "^5.45.6",
-        "svelte-check": "^4.3.4",
-        "tailwindcss": "^4.1.17",
+        "drizzle-orm": "^0.45.1",
+        "svelte": "^5.48.5",
+        "svelte-check": "^4.3.5",
+        "tailwindcss": "^4.1.18",
         "typescript": "^5.9.3",
-        "vite": "^7.2.6",
+        "vite": "^7.3.1",
       },
     },
   },
@@ -187,11 +186,11 @@
 
     "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.8", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-esgN+54+q0NjB0Y/4BomT9samII7jGwNy/2a3wNZbT2A2RpmXsXwUt24LvLhx6jUq2gVk4cWEvcRO6MFQbOfNA=="],
 
-    "@sveltejs/adapter-node": ["@sveltejs/adapter-node@5.4.0", "", { "dependencies": { "@rollup/plugin-commonjs": "^28.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^16.0.0", "rollup": "^4.9.5" }, "peerDependencies": { "@sveltejs/kit": "^2.4.0" } }, "sha512-NMsrwGVPEn+J73zH83Uhss/hYYZN6zT3u31R3IHAn3MiKC3h8fjmIAhLfTSOeNHr5wPYfjjMg8E+1gyFgyrEcQ=="],
+    "@sveltejs/adapter-node": ["@sveltejs/adapter-node@5.5.2", "", { "dependencies": { "@rollup/plugin-commonjs": "^28.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^16.0.0", "rollup": "^4.9.5" }, "peerDependencies": { "@sveltejs/kit": "^2.4.0" } }, "sha512-L15Djwpr7HrSAPj/Z8PYfc0pa9A1tllrr18phKI0WJHJeoWw45yinPf0IGgVTmakqx1B3JQ+C/OFl9ZwmxHU1Q=="],
 
-    "@sveltejs/kit": ["@sveltejs/kit@2.49.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.3.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["@opentelemetry/api"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-Vp3zX/qlwerQmHMP6x0Ry1oY7eKKRcOWGc2P59srOp4zcqyn+etJyQpELgOi4+ZSUgteX8Y387NuwruLgGXLUQ=="],
+    "@sveltejs/kit": ["@sveltejs/kit@2.50.1", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.6.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.3.3", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["@opentelemetry/api", "typescript"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-XRHD2i3zC4ukhz2iCQzO4mbsts081PAZnnMAQ7LNpWeYgeBmwMsalf0FGSwhFXBbtr2XViPKnFJBDCckWqrsLw=="],
 
-    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "debug": "^4.4.1", "deepmerge": "^4.3.1", "magic-string": "^0.30.17", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ=="],
+    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="],
 
     "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.1", "", { "dependencies": { "debug": "^4.4.1" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA=="],
 
@@ -229,13 +228,15 @@
 
     "@types/better-sqlite3": ["@types/better-sqlite3@7.6.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA=="],
 
+    "@types/bun": ["@types/bun@1.3.8", "", { "dependencies": { "bun-types": "1.3.8" } }, "sha512-3LvWJ2q5GerAXYxO2mffLTqOzEu5qnhEAlh48Vnu8WQfnmSwbgagjGZV6BoHKJztENYEDn6QmVd949W4uESRJA=="],
+
     "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
     "@types/long": ["@types/long@4.0.2", "", {}, "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA=="],
 
-    "@types/node": ["@types/node@22.19.3", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA=="],
+    "@types/node": ["@types/node@22.19.7", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw=="],
 
     "@types/resolve": ["@types/resolve@1.20.2", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
 
@@ -263,7 +264,7 @@
 
     "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
 
-    "better-sqlite3": ["better-sqlite3@12.5.0", "", { "dependencies": { "bindings": "^1.5.0", "prebuild-install": "^7.1.1" } }, "sha512-WwCZ/5Diz7rsF29o27o0Gcc1Du+l7Zsv7SYtVPG0X3G/uUI1LqdxrQI7c9Hs2FWpqXXERjW9hp6g3/tH7DlVKg=="],
+    "better-sqlite3": ["better-sqlite3@12.6.2", "", { "dependencies": { "bindings": "^1.5.0", "prebuild-install": "^7.1.1" } }, "sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA=="],
 
     "bindings": ["bindings@1.5.0", "", { "dependencies": { "file-uri-to-path": "1.0.0" } }, "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="],
 
@@ -273,6 +274,8 @@
 
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
+    "bun-types": ["bun-types@1.3.8", "", { "dependencies": { "@types/node": "*" } }, "sha512-fL99nxdOWvV4LqjmC+8Q9kW3M4QTtTR1eePs94v5ctGqU8OeceWrSUaRw3JYb7tU3FkMIAjkueehrHPPPGKi5Q=="],
+
     "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
 
     "chownr": ["chownr@1.1.4", "", {}, "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="],
@@ -303,7 +306,7 @@
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
-    "devalue": ["devalue@5.6.1", "", {}, "sha512-jDwizj+IlEZBunHcOuuFVBnIMPAEHvTsJj0BcIp94xYguLRVBcXO853px/MyIJvbVzWdsGvrRweIUWJw8hBP7A=="],
+    "devalue": ["devalue@5.6.2", "", {}, "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg=="],
 
     "drizzle-kit": ["drizzle-kit@0.31.8", "", { "dependencies": { "@drizzle-team/brocli": "^0.10.2", "@esbuild-kit/esm-loader": "^2.5.5", "esbuild": "^0.25.4", "esbuild-register": "^3.5.0" }, "bin": { "drizzle-kit": "bin.cjs" } }, "sha512-O9EC/miwdnRDY10qRxM8P3Pg8hXe3LyU4ZipReKOgTwn4OqANmftj8XJz1UPUAS6NMHf0E2htjsbQujUTkncCg=="],
 
@@ -421,6 +424,8 @@
 
     "node-addon-api": ["node-addon-api@6.1.0", "", {}, "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="],
 
+    "obug": ["obug@2.1.1", "", {}, "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="],
+
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
     "onnx-proto": ["onnx-proto@4.0.4", "", { "dependencies": { "protobufjs": "^6.8.8" } }, "sha512-aldMOB3HRoo6q/phyB6QRQxSt895HNNw82BNyZ2CMh4bjeKv7g/c+VpAFtJuEMVfYLMbRx61hbuqnKceLeDcDA=="],
@@ -497,9 +502,9 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
-    "svelte": ["svelte@5.46.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.5.0", "esm-env": "^1.2.1", "esrap": "^2.2.1", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-ZhLtvroYxUxr+HQJfMZEDRsGsmU46x12RvAv/zi9584f5KOX7bUrEbhPJ7cKFmUvZTJXi/CFZUYwDC6M1FigPw=="],
+    "svelte": ["svelte@5.48.5", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.6.2", "esm-env": "^1.2.1", "esrap": "^2.2.1", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-NB3o70OxfmnE5UPyLr8uH3IV02Q43qJVAuWigYmsSOYsS0s/rHxP0TF81blG0onF/xkhNvZw4G8NfzIX+By5ZQ=="],
 
-    "svelte-check": ["svelte-check@4.3.4", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-DVWvxhBrDsd+0hHWKfjP99lsSXASeOhHJYyuKOFYJcP7ThfSCKgjVarE8XfuMWpS5JV3AlDf+iK1YGGo2TACdw=="],
+    "svelte-check": ["svelte-check@4.3.5", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-e4VWZETyXaKGhpkxOXP+B/d0Fp/zKViZoJmneZWe/05Y2aqSKj3YN2nLfYPJBQ87WEiY4BQCQ9hWGu9mPT1a1Q=="],
 
     "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
 
@@ -523,7 +528,7 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
-    "vite": ["vite@7.3.0", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg=="],
+    "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
 
     "vitefu": ["vitefu@1.1.1", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["vite"] }, "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ=="],
 
@@ -551,8 +556,12 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "@types/better-sqlite3/@types/node": ["@types/node@22.19.3", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA=="],
+
     "prebuild-install/tar-fs": ["tar-fs@2.1.4", "", { "dependencies": { "chownr": "^1.1.1", "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", "tar-stream": "^2.1.4" } }, "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ=="],
 
+    "protobufjs/@types/node": ["@types/node@22.19.3", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA=="],
+
     "vite/esbuild": ["esbuild@0.27.1", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.1", "@esbuild/android-arm": "0.27.1", "@esbuild/android-arm64": "0.27.1", "@esbuild/android-x64": "0.27.1", "@esbuild/darwin-arm64": "0.27.1", "@esbuild/darwin-x64": "0.27.1", "@esbuild/freebsd-arm64": "0.27.1", "@esbuild/freebsd-x64": "0.27.1", "@esbuild/linux-arm": "0.27.1", "@esbuild/linux-arm64": "0.27.1", "@esbuild/linux-ia32": "0.27.1", "@esbuild/linux-loong64": "0.27.1", "@esbuild/linux-mips64el": "0.27.1", "@esbuild/linux-ppc64": "0.27.1", "@esbuild/linux-riscv64": "0.27.1", "@esbuild/linux-s390x": "0.27.1", "@esbuild/linux-x64": "0.27.1", "@esbuild/netbsd-arm64": "0.27.1", "@esbuild/netbsd-x64": "0.27.1", "@esbuild/openbsd-arm64": "0.27.1", "@esbuild/openbsd-x64": "0.27.1", "@esbuild/openharmony-arm64": "0.27.1", "@esbuild/sunos-x64": "0.27.1", "@esbuild/win32-arm64": "0.27.1", "@esbuild/win32-ia32": "0.27.1", "@esbuild/win32-x64": "0.27.1" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA=="],
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm": ["@esbuild/android-arm@0.18.20", "", { "os": "android", "cpu": "arm" }, "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw=="],

deploy.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+set -e
+
+cd "$(dirname "$0")"
+
+echo "Pulling latest changes..."
+git pull
+
+echo "Installing dependencies..."
+bun i
+
+echo "Building..."
+bun run build
+
+echo "Restarting service..."
+sudo systemctl restart bibdle
+
+echo "Done!"

drizzle.test.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'drizzle-kit';
+
+if (!process.env.TEST_DATABASE_URL) throw new Error('TEST_DATABASE_URL is not set');
+
+export default defineConfig({
+	schema: './src/lib/server/db/schema.ts',
+	dialect: 'sqlite',
+	dbCredentials: { url: process.env.TEST_DATABASE_URL },
+	verbose: true,
+	strict: true
+});

drizzle/meta/_journal.json

@@ -8,6 +8,13 @@
       "when": 1765934144883,
       "tag": "0000_clumsy_impossible_man",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1770266674489,
+      "tag": "0001_loose_kree",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -1,15 +1,17 @@
 {
 	"name": "bibdle",
 	"private": true,
-	"version": "0.0.1",
+	"version": "3.0.0alpha",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "bun --bun vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "bun test",
+		"test:watch": "bun test --watch",
 		"db:push": "drizzle-kit push",
 		"db:generate": "drizzle-kit generate",
 		"db:migrate": "drizzle-kit migrate",
@@ -18,24 +20,23 @@
 	"devDependencies": {
 		"@oslojs/crypto": "^1.0.1",
 		"@oslojs/encoding": "^1.1.0",
-		"@sveltejs/adapter-node": "^5.4.0",
-		"@sveltejs/kit": "^2.49.1",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@sveltejs/adapter-node": "^5.5.2",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/typography": "^0.5.19",
-		"@tailwindcss/vite": "^4.1.17",
-		"@types/better-sqlite3": "^7.6.13",
-		"@types/node": "^22",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/bun": "^1.3.8",
+		"@types/node": "^22.19.7",
 		"drizzle-kit": "^0.31.8",
-		"drizzle-orm": "^0.45.0",
-		"svelte": "^5.45.6",
-		"svelte-check": "^4.3.4",
-		"tailwindcss": "^4.1.17",
+		"drizzle-orm": "^0.45.1",
+		"svelte": "^5.48.5",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3",
-		"vite": "^7.2.6"
+		"vite": "^7.3.1"
 	},
 	"dependencies": {
 		"@xenova/transformers": "^2.17.2",
-		"better-sqlite3": "^12.5.0",
 		"fast-xml-parser": "^5.3.3",
 		"xml2js": "^0.6.2"
 	}

scripts/average-guesses.ts

@@ -2,18 +2,15 @@ import Database from 'bun:sqlite';
 
 // Database path - adjust if your database is located elsewhere
 const dbPath = process.env.DATABASE_URL || './local.db';
-
 console.log(`Connecting to database: ${dbPath}`);
-
 const db = new Database(dbPath);
 
 // Query all rows from daily_completions
 const query = db.query(`
-	SELECT date, guess_count
-	FROM daily_completions
-	ORDER BY date
+    SELECT date, guess_count
+    FROM daily_completions
+    ORDER BY date
 `);
-
 const rows = query.all() as { date: string; guess_count: number }[];
 
 if (rows.length === 0) {
@@ -50,4 +47,60 @@ const overallAvg = (totalGuesses / totalCompletions).toFixed(2);
 console.log('--------------|-------------|-------------------');
 console.log(`Overall Average: ${overallAvg} guesses across ${totalCompletions} completions`);
 
-db.close();
+// Calculate correlation between avg_guesses and completions
+function calculateCorrelation(data: { avgGuesses: number; completions: number }[]): number {
+	const n = data.length;
+	if (n < 2) return 0;
+
+	const avgX = data.reduce((sum, d) => sum + d.avgGuesses, 0) / n;
+	const avgY = data.reduce((sum, d) => sum + d.completions, 0) / n;
+
+	let numerator = 0;
+	let sumXSquared = 0;
+	let sumYSquared = 0;
+
+	for (const d of data) {
+		const xDiff = d.avgGuesses - avgX;
+		const yDiff = d.completions - avgY;
+		numerator += xDiff * yDiff;
+		sumXSquared += xDiff * xDiff;
+		sumYSquared += yDiff * yDiff;
+	}
+
+	const denominator = Math.sqrt(sumXSquared * sumYSquared);
+	return denominator === 0 ? 0 : numerator / denominator;
+}
+
+// Prepare data for correlation analysis
+const allData = Array.from(dateStats.entries()).map(([date, stats]) => ({
+	date,
+	avgGuesses: stats.total / stats.count,
+	completions: stats.count
+}));
+
+// Split into pre and post marketing periods
+const marketingStartDate = '2026-01-08';
+const preMarketing = allData.filter(d => d.date < marketingStartDate);
+const postMarketing = allData.filter(d => d.date >= marketingStartDate);
+
+console.log('\n=== Correlation Analysis ===\n');
+
+const allCorrelation = calculateCorrelation(allData);
+console.log(`Overall correlation (avg_guesses vs completions): ${allCorrelation.toFixed(3)}`);
+
+if (preMarketing.length >= 2) {
+	const preCorrelation = calculateCorrelation(preMarketing);
+	console.log(`Pre-marketing correlation (before ${marketingStartDate}): ${preCorrelation.toFixed(3)} (n=${preMarketing.length} days)`);
+}
+
+if (postMarketing.length >= 2) {
+	const postCorrelation = calculateCorrelation(postMarketing);
+	console.log(`Post-marketing correlation (${marketingStartDate} onward): ${postCorrelation.toFixed(3)} (n=${postMarketing.length} days)`);
+}
+
+console.log('\nInterpretation:');
+console.log('  r close to -1: Strong negative correlation (easier verses → more completions)');
+console.log('  r close to 0:  No correlation');
+console.log('  r close to +1: Strong positive correlation (harder verses → more completions)');
+
+db.close();

src/lib/assets/Bluesky_Logo.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#1185fe"/>
+</svg>

src/lib/components/AuthModal.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { browser } from '$app/environment';
+	import Container from './Container.svelte';
+
+	let { 
+		isOpen = $bindable(),
+		anonymousId = '' 
+	}: {
+		isOpen: boolean;
+		anonymousId: string;
+	} = $props();
+
+	let mode = $state<'signin' | 'signup'>('signin');
+	let loading = $state(false);
+	let error = $state('');
+	let success = $state('');
+
+	let email = $state('');
+	let password = $state('');
+	let firstName = $state('');
+	let lastName = $state('');
+
+	function resetForm() {
+		email = '';
+		password = '';
+		firstName = '';
+		lastName = '';
+		error = '';
+		success = '';
+	}
+
+	function switchMode() {
+		mode = mode === 'signin' ? 'signup' : 'signin';
+		resetForm();
+	}
+
+	function closeModal() {
+		isOpen = false;
+		resetForm();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			closeModal();
+		}
+	}
+
+	function handleSubmit() {
+		loading = true;
+		error = '';
+		success = '';
+	}
+
+	function handleResult(event: any) {
+		loading = false;
+		const result = event.result;
+		
+		if (result.type === 'success') {
+			if (result.data?.success) {
+				success = mode === 'signin' ? 'Signed in successfully!' : 'Account created successfully!';
+				setTimeout(() => {
+					if (browser) {
+						window.location.reload();
+					}
+				}, 1000);
+			} else if (result.data?.error) {
+				error = result.data.error;
+			}
+		} else if (result.type === 'failure') {
+			error = result.data?.error || 'An error occurred. Please try again.';
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isOpen}
+	<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
+		<Container class="w-full max-w-md p-6 relative">
+			<button
+				type="button"
+				onclick={closeModal}
+				class="absolute top-4 right-4 text-white hover:text-gray-300 text-2xl leading-none"
+			>
+				×
+			</button>
+			<div class="mb-6">
+				<h2 class="text-2xl font-bold text-white">
+					{mode === 'signin' ? 'Sign In' : 'Create Account'}
+				</h2>
+			</div>
+
+			<form
+				method="POST"
+				action={mode === 'signin' ? '/auth/signin' : '/auth/signup'}
+				use:enhance={({ formData }) => {
+					if (anonymousId) {
+						formData.append('anonymousId', anonymousId);
+					}
+					handleSubmit();
+					return handleResult;
+				}}
+			>
+				<div class="space-y-4">
+					{#if mode === 'signup'}
+						<div class="grid grid-cols-2 gap-4">
+							<div>
+								<label for="firstName" class="block text-sm font-medium text-white mb-1">
+									First Name
+								</label>
+								<input
+									id="firstName"
+									name="firstName"
+									type="text"
+									bind:value={firstName}
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white bg-transparent placeholder-white/60"
+									placeholder="John"
+								/>
+							</div>
+							<div>
+								<label for="lastName" class="block text-sm font-medium text-white mb-1">
+									Last Name
+								</label>
+								<input
+									id="lastName"
+									name="lastName"
+									type="text"
+									bind:value={lastName}
+									class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white bg-transparent placeholder-white/60"
+									placeholder="Doe"
+								/>
+							</div>
+						</div>
+					{/if}
+
+					<div>
+						<label for="email" class="block text-sm font-medium text-white mb-1">
+							Email
+						</label>
+						<input
+							id="email"
+							name="email"
+							type="email"
+							required
+							bind:value={email}
+							class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white bg-transparent placeholder-white/60"
+							placeholder="john@example.com"
+						/>
+					</div>
+
+					<div>
+						<label for="password" class="block text-sm font-medium text-white mb-1">
+							Password
+						</label>
+						<input
+							id="password"
+							name="password"
+							type="password"
+							required
+							bind:value={password}
+							class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white bg-transparent placeholder-white/60"
+							placeholder="••••••••"
+							minlength="6"
+						/>
+						{#if mode === 'signup'}
+							<p class="text-xs text-white/80 mt-1">Minimum 6 characters</p>
+						{/if}
+					</div>
+				</div>
+
+				{#if error}
+					<div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
+						<p class="text-sm text-red-600">{error}</p>
+					</div>
+				{/if}
+
+				{#if success}
+					<div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
+						<p class="text-sm text-green-600">{success}</p>
+					</div>
+				{/if}
+
+				<button
+					type="submit"
+					disabled={loading}
+					class="w-full mt-6 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+				>
+					{#if loading}
+						<span class="inline-flex items-center">
+							<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+							</svg>
+							{mode === 'signin' ? 'Signing in...' : 'Creating account...'}
+						</span>
+					{:else}
+						{mode === 'signin' ? 'Sign In' : 'Create Account'}
+					{/if}
+				</button>
+			</form>
+
+			<div class="mt-6 text-center">
+				<p class="text-sm text-white">
+					{mode === 'signin' ? "Don't have an account?" : 'Already have an account?'}
+					<button
+						type="button"
+						onclick={switchMode}
+						class="text-blue-300 hover:text-blue-200 font-medium ml-1"
+					>
+						{mode === 'signin' ? 'Create one' : 'Sign in'}
+					</button>
+				</p>
+			</div>
+		</Container>
+	</div>
+{/if}

src/lib/components/Button.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		children: Snippet;
+		variant?: "primary" | "google" | "apple" | "secondary" | "danger";
+		onclick?: () => void;
+		class?: string;
+		type?: "button" | "submit" | "reset";
+	}
+
+	let {
+		children,
+		variant = "primary",
+		onclick,
+		class: className = "",
+		type = "button",
+	}: Props = $props();
+
+	const variantClasses = {
+		primary:
+			"bg-blue-500 hover:bg-blue-600 text-white border-gray-500 shadow-md hover:shadow-lg",
+		google: "bg-white hover:bg-gray-50 text-gray-700 border-gray-500 shadow-md hover:shadow-lg",
+		apple: "bg-black hover:bg-gray-900 text-white border-gray-500 shadow-md hover:shadow-lg",
+		secondary:
+			"bg-white/50 hover:bg-white/70 text-gray-700 border-gray-500 shadow-sm hover:shadow-md backdrop-blur-sm",
+		danger: "bg-red-500 hover:bg-red-600 text-white border-gray-500 shadow-md hover:shadow-lg",
+	};
+</script>
+
+<button
+	{type}
+	{onclick}
+	class="inline-flex items-center justify-center px-4 py-2 rounded-lg border-2 font-bold text-sm transition-all duration-200 {variantClasses[
+		variant
+	]} {className}"
+>
+	{@render children()}
+</button>

src/lib/components/ChapterGuess.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { browser } from "$app/environment";
+	import Container from "./Container.svelte";
+
+	interface Props {
+		reference: string;
+		bookId: string;
+		onCompleted?: () => void;
+	}
+
+	let { reference, bookId, onCompleted }: Props = $props();
+
+	// Parse the chapter from the reference (e.g., "John 3:16" -> 3)
+	function parseChapterFromReference(ref: string): number {
+		const match = ref.match(/\s(\d+):/);
+		return match ? parseInt(match[1], 10) : 1;
+	}
+
+	// Get the number of chapters for a book
+	function getChapterCount(bookId: string): number {
+		const chapterCounts: Record<string, number> = {
+			GEN: 50,
+			EXO: 40,
+			LEV: 27,
+			NUM: 36,
+			DEU: 34,
+			JOS: 24,
+			JDG: 21,
+			RUT: 4,
+			"1SA": 31,
+			"2SA": 24,
+			"1KI": 22,
+			"2KI": 25,
+			"1CH": 29,
+			"2CH": 36,
+			EZR: 10,
+			NEH: 13,
+			EST: 10,
+			JOB: 42,
+			PSA: 150,
+			PRO: 31,
+			ECC: 12,
+			SNG: 8,
+			ISA: 66,
+			JER: 52,
+			LAM: 5,
+			EZK: 48,
+			DAN: 12,
+			HOS: 14,
+			JOL: 3,
+			AMO: 9,
+			OBA: 1,
+			JON: 4,
+			MIC: 7,
+			NAM: 3,
+			HAB: 3,
+			ZEP: 3,
+			HAG: 2,
+			ZEC: 14,
+			MAL: 4,
+			MAT: 28,
+			MRK: 16,
+			LUK: 24,
+			JHN: 21,
+			ACT: 28,
+			ROM: 16,
+			"1CO": 16,
+			"2CO": 13,
+			GAL: 6,
+			EPH: 6,
+			PHP: 4,
+			COL: 4,
+			"1TH": 5,
+			"2TH": 3,
+			"1TI": 6,
+			"2TI": 4,
+			TIT: 3,
+			PHM: 1,
+			HEB: 13,
+			JAS: 5,
+			"1PE": 5,
+			"2PE": 3,
+			"1JN": 5,
+			"2JN": 1,
+			"3JN": 1,
+			JUD: 1,
+			REV: 22,
+		};
+		return chapterCounts[bookId] || 1;
+	}
+
+	// Generate 6 random chapter options including the correct one
+	function generateChapterOptions(
+		correctChapter: number,
+		totalChapters: number,
+	): number[] {
+		const options = new Set<number>();
+		options.add(correctChapter);
+
+		if (totalChapters >= 6) {
+			while (options.size < 6) {
+				const randomChapter =
+					Math.floor(Math.random() * totalChapters) + 1;
+				options.add(randomChapter);
+			}
+		} else {
+			while (options.size < 6) {
+				const randomChapter = Math.floor(Math.random() * 10) + 1;
+				options.add(randomChapter);
+			}
+		}
+		return Array.from(options).sort(() => Math.random() - 0.5);
+	}
+
+	let correctChapter = $derived(parseChapterFromReference(reference));
+	let totalChapters = $derived(getChapterCount(bookId));
+	let chapterOptions = $state<number[]>([]);
+
+	$effect(() => {
+		if (chapterOptions.length === 0) {
+			chapterOptions = generateChapterOptions(
+				correctChapter,
+				totalChapters,
+			);
+		}
+	});
+
+	let selectedChapter = $state<number | null>(null);
+	let hasAnswered = $state(false);
+
+	// Load saved state from localStorage
+	$effect(() => {
+		if (!browser) return;
+		const key = `bibdle-chapter-guess-${reference}`;
+		const saved = localStorage.getItem(key);
+		if (saved) {
+			const data = JSON.parse(saved);
+			selectedChapter = data.selectedChapter;
+			hasAnswered = data.hasAnswered;
+			chapterOptions = data.chapterOptions ?? [];
+		}
+	});
+
+	// Save state to localStorage whenever options are generated or answer given
+	$effect(() => {
+		if (!browser || chapterOptions.length === 0) return;
+		const key = `bibdle-chapter-guess-${reference}`;
+		localStorage.setItem(
+			key,
+			JSON.stringify({ selectedChapter, hasAnswered, chapterOptions }),
+		);
+	});
+
+	function handleChapterSelect(chapter: number) {
+		if (hasAnswered) return;
+		selectedChapter = chapter;
+		hasAnswered = true;
+		if (onCompleted) {
+			onCompleted();
+		}
+	}
+
+	let isCorrect = $derived(
+		selectedChapter !== null && selectedChapter === correctChapter,
+	);
+</script>
+
+<Container
+	class="w-full p-6 sm:p-8 bg-linear-to-br from-yellow-100/80 to-amber-200/80 text-gray-800 shadow-md"
+>
+	<div class="text-center">
+		<p class="text-xl sm:text-2xl font-bold mb-2">Bonus Challenge</p>
+		<p class="text-sm sm:text-base opacity-80 mb-6">
+			Guess the chapter for an even higher grade
+		</p>
+
+		<div
+			class="grid grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 justify-center mx-auto mb-6"
+		>
+			{#each chapterOptions as chapter}
+				<button
+					onclick={() => handleChapterSelect(chapter)}
+					disabled={hasAnswered}
+					class={`
+            w-20 h-20 sm:w-24 sm:h-24 text-2xl sm:text-3xl font-bold rounded-xl
+            transition-all duration-300 border-2
+            ${
+				hasAnswered
+					? chapter === correctChapter
+						? "bg-green-500 text-white border-green-600 shadow-lg"
+						: selectedChapter === chapter
+							? 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"
+			}
+          `}
+				>
+					{chapter}
+				</button>
+			{/each}
+		</div>
+
+		{#if hasAnswered}
+			<p
+				class="text-xl sm:text-2xl font-bold mb-2"
+				class:text-green-600={isCorrect}
+				class:text-red-600={!isCorrect}
+			>
+				{isCorrect ? "✓ Correct!" : "✗ Incorrect"}
+			</p>
+			<p class="text-sm opacity-80">
+				The verse is from chapter {correctChapter}
+			</p>
+			{#if isCorrect}
+				<p class="text-lg font-bold text-amber-600 mt-2">Grade: S++</p>
+			{/if}
+		{/if}
+	</div>
+</Container>

src/lib/components/Container.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    class?: string;
+  }
+
+  let { children, class: className = "" }: Props = $props();
+</script>
+
+<div
+  class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm rounded-2xl border border-white/50 shadow-sm {className}"
+>
+  {@render children()}
+</div>

src/lib/components/CountdownTimer.svelte

@@ -1,90 +1,88 @@
 <script lang="ts">
-	import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy } from "svelte";
 
-	let timeUntilNext = $state("");
-	let intervalId: number | null = null;
+  let timeUntilNext = $state("");
+  let intervalId: number | null = null;
 
-	function calculateTimeUntilFivePM(): string {
-		const now = new Date();
-		const target = new Date(now);
+  function calculateTimeUntilFivePM(): string {
+    const now = new Date();
+    const target = new Date(now);
 
-		// Set target to 5:00 PM today
-		target.setHours(17, 0, 0, 0);
+    // Set target to 5:00 PM today
+    target.setHours(17, 0, 0, 0);
 
-		// If it's already past 5:00 PM, set target to tomorrow 5:00 PM
-		if (now.getTime() >= target.getTime()) {
-			target.setDate(target.getDate() + 1);
-		}
+    // If it's already past 5:00 PM, set target to tomorrow 5:00 PM
+    if (now.getTime() >= target.getTime()) {
+      target.setDate(target.getDate() + 1);
+    }
 
-		const diff = target.getTime() - now.getTime();
+    const diff = target.getTime() - now.getTime();
 
-		if (diff <= 0) {
-			return "00:00:00";
-		}
+    if (diff <= 0) {
+      return "00:00:00";
+    }
 
-		const hours = Math.floor(diff / (1000 * 60 * 60));
-		const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-		const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-		return `${hours.toString().padStart(2, "0")}h ${minutes
-			.toString()
-			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
-	}
+    return `${hours.toString().padStart(2, "0")}h ${minutes
+      .toString()
+      .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+  }
 
-	function calculateTimeUntilMidnight(): string {
-		const now = new Date();
-		const target = new Date(now);
+  function calculateTimeUntilMidnight(): string {
+    const now = new Date();
+    const target = new Date(now);
 
-		// Set target to midnight today
-		target.setHours(0, 0, 0, 0);
+    // Set target to midnight today
+    target.setHours(0, 0, 0, 0);
 
-		// If it's already past midnight, set target to tomorrow midnight
-		if (now.getTime() >= target.getTime()) {
-			target.setDate(target.getDate() + 1);
-		}
+    // If it's already past midnight, set target to tomorrow midnight
+    if (now.getTime() >= target.getTime()) {
+      target.setDate(target.getDate() + 1);
+    }
 
-		const diff = target.getTime() - now.getTime();
+    const diff = target.getTime() - now.getTime();
 
-		if (diff <= 0) {
-			return "00:00:00";
-		}
+    if (diff <= 0) {
+      return "00:00:00";
+    }
 
-		const hours = Math.floor(diff / (1000 * 60 * 60));
-		const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-		const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-		return `${hours.toString().padStart(2, "0")}h ${minutes
-			.toString()
-			.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
-	}
+    return `${hours.toString().padStart(2, "0")}h ${minutes
+      .toString()
+      .padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
+  }
 
-	function updateTimer() {
-		timeUntilNext = calculateTimeUntilMidnight();
-	}
+  function updateTimer() {
+    timeUntilNext = calculateTimeUntilMidnight();
+  }
 
-	onMount(() => {
-		updateTimer();
-		intervalId = window.setInterval(updateTimer, 1000);
-	});
+  onMount(() => {
+    updateTimer();
+    intervalId = window.setInterval(updateTimer, 1000);
+  });
 
-	onDestroy(() => {
-		if (intervalId) {
-			clearInterval(intervalId);
-		}
-	});
+  onDestroy(() => {
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+  });
 </script>
 
-<div class="text-center py-12">
-	<div
-		class="inline-flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
-	>
-		<p
-			class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2"
-		>
-			Next Verse In
-		</p>
-		<p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
-			{timeUntilNext}
-		</p>
-	</div>
+<div class="w-full">
+  <div
+    class="flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full"
+  >
+    <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mb-2">
+      Next Verse In
+    </p>
+    <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
+      {timeUntilNext}
+    </p>
+  </div>
 </div>

src/lib/components/Credits.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import BlueskyLogo from "$lib/assets/Bluesky_Logo.svg";
+</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"
+	>
+		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+			A project by George Powell & Silent Summit Co.
+		</p>
+		<!-- <p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
+			For questions, comments, job opportunities, or cash donations,
+			please email <a
+				class="text-blue-400"
+				href="mailto:george+bibdle@silentsummit.co"
+				>george@silentsummit.co</a
+			>
+		</p> -->
+		<!-- <p class="text-lg font-triodion font-black text-gray-800 tabular-nums">
+
+		</p> -->
+
+		<!-- 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"
+		>
+			<img src={BlueskyLogo} alt="Bluesky" 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"
+		>
+			<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>
+</div>

src/lib/components/DevButtons.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import Button from "$lib/components/Button.svelte";
+
+	function clearLocalStorage() {
+		if (!browser) return;
+		// Clear all bibdle-related localStorage items
+		const keysToRemove: string[] = [];
+		for (let i = 0; i < localStorage.length; i++) {
+			const key = localStorage.key(i);
+			if (key && key.startsWith("bibdle-")) {
+				keysToRemove.push(key);
+			}
+		}
+		keysToRemove.forEach((key) => localStorage.removeItem(key));
+		// Reload the page to reset state
+		window.location.reload();
+	}
+</script>
+
+<div class="pt-24 pb-4">
+	<div class="border-t-2 border-gray-400"></div>
+</div>
+<div class="flex flex-col gap-3">
+	<div class="flex flex-col md:flex-row gap-3 md:gap-2">
+		<Button
+			variant="secondary"
+			onclick={() => alert("About page coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			About Bibdle / FAQs
+		</Button>
+		<Button
+			variant="google"
+			onclick={() => alert("Google sign-in coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			<svg class="w-4 h-4 mr-2" 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.93l2.85-2.22.81-.62z"
+				/>
+				<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>
+		<Button
+			variant="apple"
+			onclick={() => alert("Apple sign-in coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			<svg class="w-4 h-4 mr-2" 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.09l.01-.01zM12.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>
+	</div>
+
+	<div class="flex flex-col md:flex-row gap-3 md:gap-2">
+		<Button
+			variant="primary"
+			onclick={() => alert("Patreon coming soon!")}
+			class="w-full md:w-auto py-4 md:py-2"
+		>
+			Become a Patron
+		</Button>
+	</div>
+
+	<Button
+		variant="danger"
+		onclick={clearLocalStorage}
+		class="w-full py-4 md:py-2"
+	>
+		Clear LocalStorage
+	</Button>
+</div>

src/lib/components/Feedback.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { fade } from "svelte/transition";
-</script>
-
-<!-- <div
-	class="my-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
-	in:fade={{ delay: 1500, duration: 1000 }}
->
-	Thank you so much for playing! Feel free to email me directly with feedback:
-	<a
-		href="mailto:george@snail.city"
-		class="font-semibold text-blue-600 hover:text-blue-800 underline"
-		>george@snail.city</a
-	>
-</div> -->
-
-<div class="text-center py-12">
-	<div
-		class="inline-flex w-full flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm"
-	>
-		<p class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold">
-			A project by George Powell & Silent Summit Co.
-		</p>
-		<!-- <p class="text-4xl font-triodion font-black text-gray-800 tabular-nums">
-			
-		</p> -->
-	</div>
-</div>

src/lib/components/GuessesTable.svelte

@@ -1,105 +1,201 @@
 <script lang="ts">
-  interface Guess {
-    book: {
-      id: string;
-      name: string;
-      testament: string;
-      section: string;
-    };
-    testamentMatch: boolean;
-    sectionMatch: boolean;
-    adjacent: boolean;
-  }
+	import { bibleBooks } from "$lib/types/bible";
+	import Container from "./Container.svelte";
 
-  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
-    $props();
+	interface Guess {
+		book: {
+			id: string;
+			name: string;
+			testament: string;
+			section: string;
+		};
+		testamentMatch: boolean;
+		sectionMatch: boolean;
+		adjacent: boolean;
+		firstLetterMatch: boolean;
+	}
 
-  let hasGuesses = $derived(guesses.length > 0);
+	let {
+		guesses,
+		correctBookId,
+	}: { guesses: Guess[]; correctBookId: string } = $props();
+
+	let hasGuesses = $derived(guesses.length > 0);
+
+	function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
+		if (isCorrect) return "bg-green-500 border-green-600";
+		if (isAdjacent) return "bg-yellow-500 border-yellow-600";
+		return "bg-red-500 border-red-600";
+	}
+
+	function getBoxContent(
+		guess: Guess,
+		column: "book" | "firstLetter" | "testament" | "section",
+	): string {
+		switch (column) {
+			case "book":
+				return guess.book.name;
+			case "firstLetter":
+				// Check if this is the special Epistles + "1" case
+				const correctBook = bibleBooks.find(
+					(b) => b.id === correctBookId,
+				);
+				const correctIsEpistlesWithNumber =
+					(correctBook?.section === "Pauline Epistles" ||
+						correctBook?.section === "General Epistles") &&
+					correctBook.name[0] === "1";
+				const guessStartsWithNumber = guess.book.name[0] === "1";
+
+				if (
+					correctIsEpistlesWithNumber &&
+					guessStartsWithNumber &&
+					guess.firstLetterMatch
+				) {
+					return "Yes"; // Special wordplay case
+				}
+				return guess.book.name[0]; // Normal case: just show the first letter
+			case "testament":
+				return (
+					guess.book.testament.charAt(0).toUpperCase() +
+					guess.book.testament.slice(1).toLowerCase()
+				);
+			case "section":
+				return guess.book.section;
+		}
+	}
 </script>
 
-{#if hasGuesses}
-  <div class="bg-white rounded-2xl shadow-xl overflow-x-auto fade-in">
-    <table class="w-full">
-      <thead class="fade-in">
-        <tr class="bg-linear-to-r from-gray-50 to-gray-300">
-          <th
-            class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-            >Book</th
-          >
-          <th
-            class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-            >Testament</th
-          >
-          <th
-            class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
-            >Section</th
-          >
-        </tr>
-      </thead>
-      <tbody>
-        {#each guesses as guess, index (guess.book.id)}
-          <tr
-            class="border-b border-gray-100 transition-colors {guess.book.id ===
-            correctBookId
-              ? 'bg-green-200 animate-shine'
-              : 'hover:bg-gray-50'} {index === 0 ? 'fade-in' : ''}"
-          >
-            <td
-              class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
-            >
-              {guess.book.id === correctBookId ? "✅" : "❌"}
-              {guess.book.name}
-            </td>
-            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-              {guess.testamentMatch ? "✅" : "❌"}
-              {guess.book.testament.charAt(0).toUpperCase() +
-                guess.book.testament.slice(1).toLowerCase()}
-            </td>
-            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
-              {guess.sectionMatch ? "✅" : "❌"}
-              {guess.adjacent ? "‼️ " : ""}{guess.book.section}
-            </td>
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
+{#if !hasGuesses}
+	<Container class="p-6 text-center">
+		<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
+			Instructions
+		</h2>
+		<p class="text-gray-700 leading-relaxed italic">
+			Guess what book of the bible you think the verse is from. You will
+			get clues to tell you if your guess is close or not. Green means the
+			category is correct; red means wrong.
+		</p>
+	</Container>
+{:else}
+	<div class="space-y-3">
+		<!-- Column Headers -->
+		<div
+			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
+		>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+			>
+				Book
+			</div>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+			>
+				Testament
+			</div>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+			>
+				Section
+			</div>
+			<div
+				class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
+			>
+				First Letter
+			</div>
+		</div>
+
+		{#each guesses as guess, rowIndex (guess.book.id)}
+			<div class="flex gap-2 justify-center">
+				<!-- Book Column -->
+				<div
+					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in {getBoxColor(
+						guess.book.id === correctBookId,
+					)}"
+					style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
+				>
+					<span class="text-center leading-tight px-1 text-shadow-lg"
+						>{getBoxContent(guess, "book")}</span
+					>
+				</div>
+
+				<!-- 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-delay: {rowIndex * 1000 + 1 * 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="animation-delay: {rowIndex * 1000 + 2 * 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="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
+				>
+					<span class="text-center leading-tight px-1 text-shadow-sm"
+						>{getBoxContent(guess, "firstLetter")}</span
+					>
+				</div>
+			</div>
+		{/each}
+	</div>
+	<!-- </div> -->
 {/if}
 
 <style>
-  @keyframes shine {
-    0% {
-      background-position: -200% 0;
-    }
-    100% {
-      background-position: 200% 0;
-    }
-  }
+	@keyframes flipIn {
+		0% {
+			opacity: 0;
+			transform: rotateX(-90deg);
+		}
+		50% {
+			transform: rotateX(0deg);
+		}
+		100% {
+			opacity: 1;
+			transform: rotateX(0deg);
+		}
+	}
 
-  .animate-shine {
-    background: linear-gradient(110deg, #dcffe7 45%, #f1fff5 50%, #dcffe7 55%);
-    background-size: 200% 100%;
-    animation: shine 5s infinite;
-  }
+	.animate-flip-in {
+		opacity: 0;
+		transform: rotateX(-90deg);
+		animation: flipIn 0.6s ease-out forwards;
+	}
 
-  .animate-shine.fade-in {
-    animation:
-      fadeIn 0.5s ease-out,
-      shine 5s infinite;
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .fade-in {
-    animation: fadeIn 0.5s ease-out;
-  }
+	.fade-in {
+		animation: fadeIn 0.5s ease-out;
+	}
 </style>

src/lib/components/Imposter.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  interface ImposterData {
+    verses: string[];
+    refs: string[];
+    imposterIndex: number;
+  }
+
+  let data: ImposterData | null = null;
+  let clicked: boolean[] = [];
+  let gameOver = false;
+  let loading = true;
+  let error: string | null = null;
+
+  async function loadGame() {
+    try {
+      const res = await fetch("/api/imposter");
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      }
+      data = (await res.json()) as ImposterData;
+      clicked = new Array(data.verses.length).fill(false);
+      gameOver = false;
+    } catch (e) {
+      error = e instanceof Error ? e.message : "Unknown error";
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleClick(index: number) {
+    if (gameOver || !data || clicked[index]) return;
+    clicked[index] = true;
+    if (index !== data.imposterIndex) {
+      clicked[data.imposterIndex] = true;
+    }
+    gameOver = true;
+  }
+
+  function newGame() {
+    loading = true;
+    error = null;
+    data = null;
+    loadGame();
+  }
+
+  onMount(loadGame);
+
+  function formatVerse(verse: string): string {
+    let formatted = verse;
+
+    // Handle unbalanced opening/closing punctuation
+    const pairs: [string, string][] = [
+      ["(", ")"],
+      ["[", "]"],
+      ["{", "}"],
+      ['"', '"'],
+      ["'", "'"],
+      ["\u201C", "\u201D"], // \u201C
+      ["\u2018", "\u2019"], // \u2018
+    ];
+    for (const [open, close] of pairs) {
+      if (formatted.startsWith(open) && !formatted.includes(close)) {
+        formatted += "..." + close;
+        break;
+      }
+    }
+    for (const [open, close] of pairs) {
+      if (formatted.endsWith(close) && !formatted.includes(open)) {
+        formatted = open + "..." + formatted;
+        break;
+      }
+    }
+
+    if (/^[a-z]/.test(formatted)) {
+      formatted = "..." + formatted;
+    }
+    formatted = formatted.replace(/[,:;-—]$/, "...");
+    return formatted;
+  }
+</script>
+
+<div class="imposter-game">
+  {#if loading}
+    <p class="loading">Loading verses...</p>
+  {:else if error}
+    <div class="error">
+      <p>Error: {error}</p>
+      <button on:click={newGame}>Retry</button>
+    </div>
+  {:else if data}
+    <!-- <div class="instructions">
+      <p>Click the verse that doesn't belong (from a different book).</p>
+    </div> -->
+    <div class="verses">
+      {#each data.verses as verse, i}
+        <div class="verse-item">
+          <button
+            class="verse-button"
+            class:clicked={clicked[i]}
+            class:correct={clicked[i] && i === data.imposterIndex}
+            class:wrong={clicked[i] && i !== data.imposterIndex}
+            on:click={() => handleClick(i)}
+            disabled={gameOver}
+          >
+            {formatVerse(verse)}
+          </button>
+          {#if gameOver}
+            <div class="ref">{data.refs[i]}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+    {#if gameOver}
+      <div class="result">
+        <button on:click={newGame}>New Game</button>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .imposter-game {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .loading,
+  .error {
+    text-align: center;
+  }
+
+  .instructions {
+    text-align: center;
+    font-style: italic;
+    color: #666;
+  }
+
+  .verses {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 1.5rem;
+    width: 100%;
+  }
+
+  .verse-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .verse-button {
+    padding: 1.5rem;
+    font-size: 1.1rem;
+    line-height: 1.4;
+    border: 3px solid #ddd;
+    background: #fafafa;
+    cursor: pointer;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    min-height: 100px;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .verse-button:hover:not(.clicked):not(:disabled) {
+    border-color: #007bff;
+    background: #f8f9ff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
+  }
+
+  .verse-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .verse-button.clicked {
+    cursor: default;
+  }
+
+  .correct {
+    background: #d4edda !important;
+    border-color: #28a745 !important;
+    color: #155724;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);
+  }
+
+  .wrong {
+    background: #f8d7da !important;
+    border-color: #dc3545 !important;
+    color: #721c24;
+    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
+  }
+
+  .ref {
+    font-size: 0.9rem;
+    font-weight: 500;
+    text-align: center;
+    color: #555;
+    padding-top: 0.25rem;
+  }
+
+  .verse-button.correct ~ .ref {
+    color: #28a745;
+    font-weight: bold;
+  }
+
+  .verse-button.wrong ~ .ref {
+    color: #dc3545;
+  }
+
+  .result {
+    display: flex;
+    justify-content: center;
+  }
+
+  .result button,
+  .error button {
+    padding: 0.75rem 2rem;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .result button:hover,
+  .error button:hover {
+    background: #0056b3;
+  }
+</style>

src/lib/components/SearchInput.svelte

@@ -1,55 +1,92 @@
 <script lang="ts">
-	import { bibleBooks, type BibleBook } from "$lib/types/bible";
+  import { bibleBooks, type BibleBook } from "$lib/types/bible";
 
-	let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();
+  let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();
 
-	let filteredBooks = $derived(
-		bibleBooks.filter((book) =>
-			book.name.toLowerCase().includes(searchQuery.toLowerCase()),
-		),
-	);
+  let filteredBooks = $derived(
+    bibleBooks.filter((book) =>
+      book.name.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  );
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === "Enter" && filteredBooks.length > 0) {
-			submitGuess(filteredBooks[0].id);
-		}
-	}
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" && filteredBooks.length > 0) {
+      submitGuess(filteredBooks[0].id);
+    }
+  }
 </script>
 
-<div class="mb-12">
-	<input
-		bind:value={searchQuery}
-		placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
-		class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
-		onkeydown={handleKeydown}
-	/>
-	{#if searchQuery && filteredBooks.length > 0}
-		<ul
-			class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
-		>
-			{#each filteredBooks as book (book.id)}
-				<li>
-					<button
-						class="w-full p-4 sm:p-5 text-left {guessedIds.has(
-							book.id,
-						)
-							? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
-							: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
-						onclick={() => submitGuess(book.id)}
-					>
-						<span
-							class="font-semibold {guessedIds.has(book.id)
-								? 'line-through text-gray-500'
-								: ''}">{book.name}</span
-						>
-						<span class="ml-auto text-sm opacity-75"
-							>({book.testament.toUpperCase()})</span
-						>
-					</button>
-				</li>
-			{/each}
-		</ul>
-	{:else if searchQuery}
-		<p class="mt-4 text-center text-gray-500 p-8">No books found</p>
-	{/if}
+<div class="relative">
+  <div class="relative">
+    <svg
+      class="absolute left-4 sm:left-6 top-1/2 transform -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"
+    >
+      <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 transform -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"
+        >
+          <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"
+    >
+      {#each filteredBooks as book (book.id)}
+        <li>
+          <button
+            class="w-full p-4 sm:p-5 text-left {guessedIds.has(book.id)
+              ? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
+              : 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
+            onclick={() => submitGuess(book.id)}
+          >
+            <span
+              class="font-semibold {guessedIds.has(book.id)
+                ? 'line-through text-gray-500'
+                : ''}">{book.name}</span
+            >
+            <span class="ml-auto text-sm opacity-75"
+              >({book.testament.toUpperCase()})</span
+            >
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {:else if searchQuery}
+    <p class="mt-4 text-center text-gray-500 p-8">No books found</p>
+  {/if}
 </div>

src/lib/components/VerseDisplay.svelte

@@ -1,25 +1,38 @@
 <script lang="ts">
   import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+  import Container from "./Container.svelte";
 
-  let { data, isWon }: { data: PageData; isWon: boolean } = $props();
+  let {
+    data,
+    isWon,
+    blurChapter = false,
+  }: { data: PageData; isWon: boolean; blurChapter?: boolean } = $props();
   let dailyVerse = $derived(data.dailyVerse);
   let displayReference = $derived(
-    dailyVerse.reference.replace(/^Psalms /, "Psalm ")
+    blurChapter
+      ? dailyVerse.reference
+          .replace(/^Psalms /, "Psalm ")
+          .replace(/\s(\d+):/, " ?:")
+      : dailyVerse.reference.replace(/^Psalms /, "Psalm ")
   );
   let displayVerseText = $derived(
-    dailyVerse.verseText.replace(/^([a-z])/, (c) => c.toUpperCase())
+    dailyVerse.verseText
+      .replace(/^([a-z])/, (c) => c.toUpperCase())
+      .replace(/[,:;-—]$/, "...")
   );
 </script>
 
-<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
+<Container class="w-full p-8 sm:p-12 bg-white/70">
   <blockquote
     class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
   >
     {displayVerseText}
   </blockquote>
   {#if isWon}
-    <p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
+    <p
+      class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+    >
       {displayReference}
     </p>
   {/if}
-</div>
+</Container>

src/lib/components/WinScreen.svelte

@@ -1,196 +1,245 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
-  import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
-  import { onMount } from "svelte";
+	import { fade } from "svelte/transition";
+	import {
+		getBookById,
+		toOrdinal,
+		getNextGradeMessage,
+	} from "$lib/utils/game";
+	import { onMount } from "svelte";
+	import Container from "./Container.svelte";
+	import CountdownTimer from "./CountdownTimer.svelte";
+	import ChapterGuess from "./ChapterGuess.svelte";
 
-  interface StatsData {
-    solveRank: number;
-    guessRank: number;
-    totalSolves: number;
-    averageGuesses: number;
-  }
+	interface StatsData {
+		solveRank: number;
+		guessRank: number;
+		totalSolves: number;
+		averageGuesses: number;
+		tiedCount: number;
+		percentile: number;
+	}
 
-  interface WeightedMessage {
-    text: string;
-    weight: number;
-  }
+	interface WeightedMessage {
+		text: string;
+		weight: number;
+	}
 
-  let {
-    grade,
-    statsData,
-    correctBookId,
-    handleShare,
-    copyToClipboard,
-    copied = $bindable(false),
-    statsSubmitted,
-    guessCount,
-  } = $props();
+	let {
+		grade,
+		statsData,
+		correctBookId,
+		handleShare,
+		copyToClipboard,
+		copied = $bindable(false),
+		statsSubmitted,
+		guessCount,
+		reference,
+		onChapterGuessCompleted,
+	} = $props();
 
-  let bookName = $derived(getBookById(correctBookId)?.name ?? "");
-  let hasWebShare = $derived(
-    typeof navigator !== "undefined" && "share" in navigator
-  );
-  let copySuccess = $state(false);
+	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
+	let hasWebShare = $derived(
+		typeof navigator !== "undefined" && "share" in navigator,
+	);
+	let copySuccess = $state(false);
 
-  // List of congratulations messages with weights
-  const congratulationsMessages: WeightedMessage[] = [
-    { text: "Congratulations!", weight: 10 },
-    { text: "You got it!", weight: 1000 },
-    { text: "Yup,", weight: 100 },
-    { text: "Very nice!", weight: 1 },
-  ];
+	// List of congratulations messages with weights
+	const congratulationsMessages: WeightedMessage[] = [
+		{ text: "Congratulations!", weight: 10 },
+		{ text: "You got it!", weight: 1000 },
+		{ text: "Yup.", weight: 100 },
+		{ text: "Very nice!", weight: 1 },
+	];
 
-  // Function to select a random message based on weights
-  function getRandomCongratulationsMessage(): string {
-    // Special case for first try success
-    if (guessCount === 1) {
-      const n = Math.random();
-      if (n < 0.99) {
-        return "🌟 First try! 🌟";
-      } else {
-        return "🗣️ Axios! 🗣️";
-      }
-    }
+	// Function to select a random message based on weights
+	function getRandomCongratulationsMessage(): string {
+		// Special case for first try success
+		if (guessCount === 1) {
+			const n = Math.random();
+			if (n < 0.99) {
+				return "🌟 First try! 🌟";
+			} else {
+				return "🗣️ Axios! 🗣️";
+			}
+		}
 
-    const totalWeight = congratulationsMessages.reduce(
-      (sum, msg) => sum + msg.weight,
-      0
-    );
-    let random = Math.random() * totalWeight;
+		const totalWeight = congratulationsMessages.reduce(
+			(sum, msg) => sum + msg.weight,
+			0,
+		);
+		let random = Math.random() * totalWeight;
 
-    for (const message of congratulationsMessages) {
-      random -= message.weight;
-      if (random <= 0) {
-        return message.text;
-      }
-    }
+		for (const message of congratulationsMessages) {
+			random -= message.weight;
+			if (random <= 0) {
+				return message.text;
+			}
+		}
 
-    // Fallback to first message if something goes wrong
-    return congratulationsMessages[0].text;
-  }
+		// Fallback to first message if something goes wrong
+		return congratulationsMessages[0].text;
+	}
 
-  // Generate the congratulations message
-  let congratulationsMessage = $derived(getRandomCongratulationsMessage());
+	// Generate the congratulations message
+	let congratulationsMessage = $derived(getRandomCongratulationsMessage());
 </script>
 
-<div
-  class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center fade-in"
->
-  <!-- <h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-    {congratulationsMessage}
-  </h2> -->
-  <p class="text-xl sm:text-3xl md:text-4xl">
-    {congratulationsMessage} The verse is from
-    <span class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span>.
-  </p>
-  <p
-    class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
-  >
-    Your grade: {grade}
-  </p>
+<div class="flex flex-col gap-6">
+	<Container
+		class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
+	>
+		<p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
+			{congratulationsMessage} The verse is from
+			<span class="font-black text-3xl md:text-4xl">{bookName}</span>.
+		</p>
+		<p class="text-lg sm:text-xl md:text-2xl mt-4">
+			You guessed correctly after {guessCount}
+			{guessCount === 1 ? "guess" : "guesses"}.
+			<span class="font-bold bg-white/40 rounded px-1.5 py-0.75"
+				>{grade}</span
+			>
+		</p>
 
-  {#if hasWebShare}
-    <button
-      onclick={handleShare}
-      data-umami-event="Share"
-      class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
-    >
-      📤 Share
-    </button>
-    <button
-      onclick={() => {
-        copyToClipboard();
-        copySuccess = true;
-        setTimeout(() => {
-          copySuccess = false;
-        }, 3000);
-      }}
-      data-umami-event="Copy to Clipboard"
-      class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
-        copySuccess
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
-      }`}
-    >
-      {copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
-    </button>
-  {:else}
-    <button
-      onclick={handleShare}
-      data-umami-event="Share"
-      class={`mt-4 text-2xl font-bold p-2 ${
-        copied
-          ? "bg-green-400/50 hover:bg-green-500/60"
-          : "bg-white/20 hover:bg-white/30"
-      } rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
-    >
-      {copied ? "Copied to clipboard!" : "📤 Share"}
-    </button>
-  {/if}
+		<div class="flex justify-center mt-6">
+			{#if hasWebShare}
+				<!-- mobile and arc in production -->
+				<button
+					onclick={handleShare}
+					data-umami-event="Share"
+					class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+				>
+					📤 Share
+				</button>
+				<button
+					onclick={() => {
+						copyToClipboard();
+						copySuccess = true;
+						setTimeout(() => {
+							copySuccess = false;
+						}, 3000);
+					}}
+					data-umami-event="Copy to Clipboard"
+					class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
+						copySuccess
+							? "bg-white/30"
+							: "bg-white/70 hover:bg-white/80"
+					}`}
+				>
+					{copySuccess ? "✅ Copied!" : "📋 Copy"}
+				</button>
+			{:else}
+				<!-- dev mode and desktop browsers -->
+				<button
+					onclick={handleShare}
+					data-umami-event="Copy to Clipboard"
+					class={`text-2xl font-bold p-4 ${
+						copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
+					} rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
+				>
+					{copied ? "✅ Copied!" : "📋 Share"}
+				</button>
+			{/if}
+		</div>
 
-  <p class="pt-6 big-text text-gray-100!">
-    {getNextGradeMessage(guessCount)}
-  </p>
+		{#if guessCount !== 1}
+			<p class="pt-6 big-text text-gray-700!">
+				{getNextGradeMessage(guessCount)}
+			</p>
+		{/if}
+	</Container>
 
-  <!-- Statistics Display -->
-  {#if statsData}
-    <div class="mt-6" in:fade={{ delay: 800 }}>
-      <div class="grid grid-cols-3 gap-4 gap-x-8 text-center">
-        <!-- Solve Rank Column -->
-        <div class="flex flex-col">
-          <div class="text-3xl sm:text-4xl font-black">
-            #{statsData.solveRank}
-          </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
-            You were the {toOrdinal(statsData.solveRank)} person to solve today
-          </div>
-        </div>
+	<!-- S++ Bonus Challenge for first try -->
+	{#if guessCount === 1}
+		<ChapterGuess
+			{reference}
+			bookId={correctBookId}
+			onCompleted={onChapterGuessCompleted}
+		/>
+	{/if}
 
-        <!-- Guess Rank Column -->
-        <div class="flex flex-col">
-          <div class="text-3xl sm:text-4xl font-black">
-            {Math.round(
-              ((statsData.totalSolves - statsData.guessRank + 1) /
-                statsData.totalSolves) *
-                100
-            )}%
-          </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
-            You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
-            total solves
-          </div>
-        </div>
+	<CountdownTimer />
 
-        <!-- Average Column -->
-        <div class="flex flex-col">
-          <div class="text-3xl sm:text-4xl font-black">
-            {statsData.averageGuesses}
-          </div>
-          <div class="text-xs sm:text-sm opacity-90 mt-1">
-            People guessed correctly after {statsData.averageGuesses}
-            {statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
-          </div>
-        </div>
-      </div>
-    </div>
-  {:else if !statsSubmitted}
-    <div class="mt-6 text-sm opacity-80">Submitting stats...</div>
-  {/if}
+	<!-- Statistics Display -->
+	{#if statsData}
+		<Container
+			class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+		>
+			<div
+				class="grid grid-cols-3 gap-4 gap-x-8 text-center"
+				in:fade={{ delay: 800 }}
+			>
+				<!-- Solve Rank Column -->
+				<div class="flex flex-col">
+					<div
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+					>
+						#{statsData.solveRank}
+					</div>
+					<div class="text-sm sm:text-sm opacity-90 mt-1">
+						You were the {toOrdinal(statsData.solveRank)} person to solve
+						today
+					</div>
+				</div>
+
+				<!-- Guess Rank Column -->
+				<div class="flex flex-col">
+					<div
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+					>
+						{toOrdinal(statsData.guessRank)}
+					</div>
+					<div class="text-sm sm:text-sm opacity-90 mt-1">
+						You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
+						{statsData.totalSolves === 1
+							? "solve"
+							: "solves"}{statsData.tiedCount > 0
+							? `, tied with ${statsData.tiedCount} ${statsData.tiedCount === 1 ? "other" : "others"}`
+							: ""}.<br />
+						{#if statsData.percentile <= 25}
+							<span class="font-bold">
+								(Top {statsData.percentile}%)
+							</span>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Average Column -->
+				<div class="flex flex-col">
+					<div
+						class="text-3xl sm:text-4xl font-black border-b border-gray-300 pb-2"
+					>
+						{statsData.averageGuesses}
+					</div>
+					<div class="text-sm sm:text-sm opacity-90 mt-1">
+						People solved after {statsData.averageGuesses}
+						{statsData.averageGuesses === 1 ? "guess" : "guesses"} on
+						average
+					</div>
+				</div>
+			</div>
+		</Container>
+	{:else if !statsSubmitted}
+		<Container
+			class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
+		>
+			<div class="text-sm opacity-80">Submitting stats...</div>
+		</Container>
+	{/if}
 </div>
 
 <style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  .fade-in {
-    animation: fadeIn 0.5s ease-out;
-  }
+	.fade-in {
+		animation: fadeIn 0.5s ease-out;
+	}
 </style>

src/lib/server/auth.test.ts

@@ -0,0 +1,115 @@
+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';
+
+const DAY_IN_MS = 1000 * 60 * 60 * 24;
+
+export const sessionCookieName = 'auth-session';
+
+export function generateSessionToken() {
+	const bytes = crypto.getRandomValues(new Uint8Array(18));
+	const token = encodeBase64url(bytes);
+	return token;
+}
+
+export async function createSession(token: string, userId: string) {
+	const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
+	const session: table.Session = {
+		id: sessionId,
+		userId,
+		expiresAt: new Date(Date.now() + DAY_IN_MS * 30)
+	};
+	await db.insert(table.session).values(session);
+	return session;
+}
+
+export async function validateSessionToken(token: string) {
+	const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
+	const [result] = await db
+		.select({
+			// Adjust user table here to tweak returned data
+			user: { id: table.user.id, email: table.user.email },
+			session: table.session
+		})
+		.from(table.session)
+		.innerJoin(table.user, eq(table.session.userId, table.user.id))
+		.where(eq(table.session.id, sessionId));
+
+	if (!result) {
+		return { session: null, user: null };
+	}
+	const { session, user } = result;
+
+	const sessionExpired = Date.now() >= session.expiresAt.getTime();
+	if (sessionExpired) {
+		await db.delete(table.session).where(eq(table.session.id, session.id));
+		return { session: null, user: null };
+	}
+
+	const renewSession = Date.now() >= session.expiresAt.getTime() - DAY_IN_MS * 15;
+	if (renewSession) {
+		session.expiresAt = new Date(Date.now() + DAY_IN_MS * 30);
+		await db
+			.update(table.session)
+			.set({ expiresAt: session.expiresAt })
+			.where(eq(table.session.id, session.id));
+	}
+
+	return { session, user };
+}
+
+export type SessionValidationResult = Awaited<ReturnType<typeof validateSessionToken>>;
+
+export async function invalidateSession(sessionId: string) {
+	await db.delete(table.session).where(eq(table.session.id, sessionId));
+}
+
+export function setSessionTokenCookie(event: RequestEvent, token: string, expiresAt: Date) {
+	event.cookies.set(sessionCookieName, token, {
+		expires: expiresAt,
+		path: '/'
+	});
+}
+
+export function deleteSessionTokenCookie(event: RequestEvent) {
+	event.cookies.delete(sessionCookieName, {
+		path: '/'
+	});
+}
+
+export async function hashPassword(password: string): Promise<string> {
+	return await Bun.password.hash(password, {
+		algorithm: 'argon2id',
+		memoryCost: 4,
+		timeCost: 3
+	});
+}
+
+export async function verifyPassword(password: string, hash: string): Promise<boolean> {
+	try {
+		return await Bun.password.verify(password, hash);
+	} catch {
+		return false;
+	}
+}
+
+export async function createUser(anonymousId: string, email: string, passwordHash: string, firstName?: string, lastName?: string) {
+	const user: table.User = {
+		id: anonymousId, // Use anonymousId as the user ID to preserve stats
+		email,
+		passwordHash,
+		firstName: firstName || null,
+		lastName: lastName || null,
+		isPrivate: false
+	};
+	await db.insert(table.user).values(user);
+	return user;
+}
+
+export async function getUserByEmail(email: string) {
+	const [user] = await db.select().from(table.user).where(eq(table.user.email, email));
+	return user || null;
+}

src/lib/server/auth.ts

@@ -31,7 +31,7 @@ export async function validateSessionToken(token: string) {
 	const [result] = await db
 		.select({
 			// Adjust user table here to tweak returned data
-			user: { id: table.user.id, username: table.user.username },
+			user: { id: table.user.id, email: table.user.email },
 			session: table.session
 		})
 		.from(table.session)
@@ -79,3 +79,37 @@ export function deleteSessionTokenCookie(event: RequestEvent) {
 		path: '/'
 	});
 }
+
+export async function hashPassword(password: string): Promise<string> {
+	return await Bun.password.hash(password, {
+		algorithm: 'argon2id',
+		memoryCost: 4,
+		timeCost: 3
+	});
+}
+
+export async function verifyPassword(password: string, hash: string): Promise<boolean> {
+	try {
+		return await Bun.password.verify(password, hash);
+	} catch {
+		return false;
+	}
+}
+
+export async function createUser(anonymousId: string, email: string, passwordHash: string, firstName?: string, lastName?: string) {
+	const user: table.User = {
+		id: anonymousId, // Use anonymousId as the user ID to preserve stats
+		email,
+		passwordHash,
+		firstName: firstName || null,
+		lastName: lastName || null,
+		isPrivate: false
+	};
+	await db.insert(table.user).values(user);
+	return user;
+}
+
+export async function getUserByEmail(email: string) {
+	const [user] = await db.select().from(table.user).where(eq(table.user.email, email));
+	return user || null;
+}

src/lib/server/db/index.ts

@@ -1,10 +1,9 @@
-import { drizzle } from 'drizzle-orm/better-sqlite3';
-import Database from 'better-sqlite3';
+import { drizzle } from 'drizzle-orm/bun-sqlite';
+import { Database } from 'bun:sqlite';
 import * as schema from './schema';
-import { env } from '$env/dynamic/private';
 
-if (!env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
+if (!Bun.env.DATABASE_URL) throw new Error('DATABASE_URL is not set');
 
-const client = new Database(env.DATABASE_URL);
+const client = new Database(Bun.env.DATABASE_URL);
 
 export const db = drizzle(client, { schema });

src/lib/server/db/schema.ts

@@ -2,7 +2,14 @@ import { integer, sqliteTable, text, index, unique } from 'drizzle-orm/sqlite-co
 
 import { sql } from 'drizzle-orm';
 
-export const user = sqliteTable('user', { id: text('id').primaryKey(), age: integer('age') });
+export const user = sqliteTable('user', { 
+	id: text('id').primaryKey(), 
+	firstName: text('first_name'),
+	lastName: text('last_name'),
+	email: text('email').unique(),
+	passwordHash: text('password_hash'),
+	isPrivate: integer('is_private', { mode: 'boolean' }).default(false)
+});
 
 export const session = sqliteTable('session', {
 	id: text('id').primaryKey(),
@@ -32,7 +39,7 @@ export const dailyCompletions = sqliteTable('daily_completions', {
 	guessCount: integer('guess_count').notNull(),
 	completedAt: integer('completed_at', { mode: 'timestamp' }).notNull(),
 }, (table) => ({
-	uniqueCompletion: unique().on(table.anonymousId, table.date),
+	anonymousIdDateIndex: index('anonymous_id_date_idx').on(table.anonymousId, table.date),
 	dateIndex: index('date_idx').on(table.date),
 	dateGuessIndex: index('date_guess_idx').on(table.date, table.guessCount),
 }));

src/lib/server/db/test.ts

@@ -0,0 +1,9 @@
+import { drizzle } from 'drizzle-orm/bun-sqlite';
+import { Database } from 'bun:sqlite';
+import * as schema from './schema';
+
+if (!Bun.env.TEST_DATABASE_URL) throw new Error('TEST_DATABASE_URL is not set');
+
+const testClient = new Database(Bun.env.TEST_DATABASE_URL);
+
+export const testDb = drizzle(testClient, { schema });

src/lib/server/xml-bible.ts

@@ -353,6 +353,54 @@ export function getRandomGreekVerses(count: number = 3): {
 	return null;
 }
 
+/**
+	* Get a random set of verses from a specific book
+	* Returns `count` consecutive verses by default
+	*/
+export function getRandomVersesFromBook(
+	bookNumber: number,
+	count: number = 1
+): {
+	bookId: string;
+	bookName: string;
+	chapter: number;
+	startVerse: number;
+	endVerse: number;
+	verses: string[];
+} | null {
+	const book = getBookByNumber(bookNumber);
+	if (!book) {
+		return null;
+	}
+
+	// Try up to 10 times to find a valid passage
+	for (let attempt = 0; attempt < 10; attempt++) {
+		const chapterNumber = getRandomChapterNumber(bookNumber);
+		const verseCount = getVerseCount(bookNumber, chapterNumber);
+
+		// Skip chapters that don't have enough verses
+		if (verseCount < count) {
+			continue;
+		}
+
+		const startVerse = getRandomStartVerse(bookNumber, chapterNumber, count);
+		const verses = extractVerses(bookNumber, chapterNumber, startVerse, count);
+
+		if (verses.length === count) {
+			return {
+				bookId: book.id,
+				bookName: book.name,
+				chapter: chapterNumber,
+				startVerse,
+				endVerse: startVerse + count - 1,
+				verses
+			};
+		}
+	}
+
+	return null;
+}
+
 /**
  * Format a reference string from verse data
  */

src/lib/utils/stats.ts

@@ -0,0 +1,71 @@
+export interface UserStats {
+	totalSolves: number;
+	avgGuesses: number;
+	gradeDistribution: {
+		'S++': number;
+		'S+': number;
+		'A+': number;
+		'A': number;
+		'B+': number;
+		'B': number;
+		'C+': number;
+		'C': number;
+	};
+	currentStreak: number;
+	bestStreak: number;
+	recentCompletions: Array<{
+		date: string;
+		guessCount: number;
+		grade: string;
+	}>;
+}
+
+export function getGradeColor(grade: string): string {
+	switch (grade) {
+		case 'S++': return 'text-purple-600 bg-purple-100';
+		case 'S+': return 'text-yellow-600 bg-yellow-100';
+		case 'A+': return 'text-green-600 bg-green-100';
+		case 'A': return 'text-green-500 bg-green-50';
+		case 'B+': return 'text-blue-600 bg-blue-100';
+		case 'B': return 'text-blue-500 bg-blue-50';
+		case 'C+': return 'text-orange-600 bg-orange-100';
+		case 'C': return 'text-red-600 bg-red-100';
+		default: return 'text-gray-600 bg-gray-100';
+	}
+}
+
+export function formatDate(dateStr: string): string {
+	const date = new Date(dateStr + 'T00:00:00');
+	return date.toLocaleDateString('en-US', {
+		month: 'short',
+		day: 'numeric'
+	});
+}
+
+export function getStreakMessage(currentStreak: number): string {
+	if (currentStreak === 0) {
+		return "Start your streak today!";
+	} else if (currentStreak === 1) {
+		return "Keep it going!";
+	} else if (currentStreak < 7) {
+		return `${currentStreak} days strong!`;
+	} else if (currentStreak < 30) {
+		return `${currentStreak} day streak - amazing!`;
+	} else {
+		return `${currentStreak} days - you're unstoppable!`;
+	}
+}
+
+export function getPerformanceMessage(avgGuesses: number): string {
+	if (avgGuesses <= 2) {
+		return "Exceptional performance!";
+	} else if (avgGuesses <= 4) {
+		return "Great performance!";
+	} else if (avgGuesses <= 6) {
+		return "Good performance!";
+	} else if (avgGuesses <= 8) {
+		return "Room for improvement!";
+	} else {
+		return "Keep practicing!";
+	}
+}

src/routes/+layout.svelte

@@ -1,17 +1,31 @@
 <script lang="ts">
+ import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  
   import "./layout.css";
   import favicon from "$lib/assets/favicon.ico";
 
+  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);
+    }
+  });
+
   let { children } = $props();
 </script>
 
 <svelte:head>
   <link rel="icon" href={favicon} />
-  <script
+  <!-- <script
     defer
     src="https://umami.snail.city/script.js"
     data-website-id="5b8c31ad-71cd-4317-940b-6bccea732acc"
     data-domains="bibdle.com,www.bibdle.com"
-  ></script>
+  ></script> -->
 </svelte:head>
 {@render children()}

src/routes/+page.server.ts

@@ -34,14 +34,16 @@ async function getTodayVerse(): Promise<DailyVerse> {
 	return inserted;
 }
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({ locals }) => {
 	const dailyVerse = await getTodayVerse();
 	const correctBook = getBookById(dailyVerse.bookId) ?? null;
 
 	return {
 		dailyVerse,
 		correctBookId: dailyVerse.bookId,
-		correctBook
+		correctBook,
+		user: locals.user,
+		session: locals.session
 	};
 };
 

src/routes/+page.svelte

@@ -1,442 +1,539 @@
 <script lang="ts">
-  import { bibleBooks, type BibleBook } from "$lib/types/bible";
+	import { bibleBooks, type BibleBook } from "$lib/types/bible";
 
-  import type { PageProps } from "./$types";
-  import { browser } from "$app/environment";
+	import type { PageProps } from "./$types";
+	import { browser } from "$app/environment";
 
-  import VerseDisplay from "$lib/components/VerseDisplay.svelte";
-  import SearchInput from "$lib/components/SearchInput.svelte";
-  import GuessesTable from "$lib/components/GuessesTable.svelte";
-  import CountdownTimer from "$lib/components/CountdownTimer.svelte";
-  import WinScreen from "$lib/components/WinScreen.svelte";
-  import Feedback from "$lib/components/Feedback.svelte";
-  import TitleAnimation from "$lib/components/TitleAnimation.svelte";
-  import { getGrade } from "$lib/utils/game";
+	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 DevButtons from "$lib/components/DevButtons.svelte";
+	import AuthModal from "$lib/components/AuthModal.svelte";
+	import { getGrade } from "$lib/utils/game";
+	import { enhance } from '$app/forms';
 
-  interface Guess {
-    book: BibleBook;
-    testamentMatch: boolean;
-    sectionMatch: boolean;
-    adjacent: boolean;
-  }
+	interface Guess {
+		book: BibleBook;
+		testamentMatch: boolean;
+		sectionMatch: boolean;
+		adjacent: boolean;
+		firstLetterMatch: boolean;
+	}
 
-  let { data }: PageProps = $props();
+	let { data }: PageProps = $props();
 
-  let dailyVerse = $derived(data.dailyVerse);
-  let correctBookId = $derived(data.correctBookId);
+	let dailyVerse = $derived(data.dailyVerse);
+	let correctBookId = $derived(data.correctBookId);
+	let user = $derived(data.user);
+	let session = $derived(data.session);
 
-  let guesses = $state<Guess[]>([]);
+	let guesses = $state<Guess[]>([]);
 
-  let searchQuery = $state("");
+	let searchQuery = $state("");
 
-  let copied = $state(false);
-  let isDev = $state(false);
+	let copied = $state(false);
+	let isDev = $state(false);
+	let chapterGuessCompleted = $state(false);
+	let chapterCorrect = $state(false);
 
-  let anonymousId = $state("");
-  let statsSubmitted = $state(false);
-  let statsData = $state<{
-    solveRank: number;
-    guessRank: number;
-    totalSolves: number;
-    averageGuesses: number;
-  } | null>(null);
+	let anonymousId = $state("");
+	let statsSubmitted = $state(false);
+	let authModalOpen = $state(false);
+	let statsData = $state<{
+		solveRank: number;
+		guessRank: number;
+		totalSolves: number;
+		averageGuesses: number;
+		tiedCount: number;
+		percentile: number;
+	} | null>(null);
 
-  let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
+	let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
 
-  const currentDate = $derived(
-    new Date().toLocaleDateString("en-US", {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    })
-  );
+	const currentDate = $derived(
+		new Date().toLocaleDateString("en-US", {
+			weekday: "long",
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+		}),
+	);
 
-  let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
-  let grade = $derived(
-    isWon
-      ? getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
-      : ""
-  );
+	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
+	let grade = $derived(
+		isWon
+			? guesses.length === 1 && chapterCorrect
+				? "S++"
+				: getGrade(
+						guesses.length,
+						getBookById(correctBookId)?.popularity ?? 0,
+					)
+			: "",
+	);
+	let blurChapter = $derived(
+		isWon && guesses.length === 1 && !chapterGuessCompleted,
+	);
 
-  function getBookById(id: string): BibleBook | undefined {
-    return bibleBooks.find((b) => b.id === id);
-  }
+	function getBookById(id: string): BibleBook | undefined {
+		return bibleBooks.find((b) => b.id === id);
+	}
 
-  function isAdjacent(id1: string, id2: string): boolean {
-    const b1 = getBookById(id1);
-    const b2 = getBookById(id2);
-    return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
-  }
+	function isAdjacent(id1: string, id2: string): boolean {
+		const b1 = getBookById(id1);
+		const b2 = getBookById(id2);
+		return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
+	}
 
-  function submitGuess(bookId: string) {
-    if (guesses.some((g) => g.book.id === bookId)) return;
+	function submitGuess(bookId: string) {
+		if (guesses.some((g) => g.book.id === bookId)) return;
 
-    const book = getBookById(bookId);
-    if (!book) return;
+		const book = getBookById(bookId);
+		if (!book) return;
 
-    const correctBook = getBookById(correctBookId);
-    if (!correctBook) return;
+		const correctBook = getBookById(correctBookId);
+		if (!correctBook) return;
 
-    const testamentMatch = book.testament === correctBook.testament;
-    const sectionMatch = book.section === correctBook.section;
-    const adjacent = isAdjacent(book.id, correctBookId);
+		const testamentMatch = book.testament === correctBook.testament;
+		const sectionMatch = book.section === correctBook.section;
+		const adjacent = isAdjacent(bookId, correctBookId);
 
-    console.log(
-      `Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
-    );
+		// Special case: if correct book is in the Epistles + starts with "1",
+		// any guess starting with "1" counts as first letter match
+		const correctIsEpistlesWithNumber =
+			correctBook.section === "Pauline Epistles" &&
+			correctBook.name[0] === "1";
+		const guessStartsWithNumber = book.name[0] === "1";
 
-    if (guesses.length === 0) {
-      const key = `bibdle-first-guess-${dailyVerse.date}`;
-      if (
-        localStorage.getItem(key) !== "true" &&
-        browser &&
-        (window as any).umami
-      ) {
-        (window as any).umami.track("First guess");
-        localStorage.setItem(key, "true");
-      }
-    }
+		const firstLetterMatch =
+			correctIsEpistlesWithNumber && guessStartsWithNumber
+				? true
+				: book.name[0].toUpperCase() ===
+					correctBook.name[0].toUpperCase();
 
-    guesses = [
-      {
-        book,
-        testamentMatch,
-        sectionMatch,
-        adjacent,
-      },
-      ...guesses,
-    ];
+		console.log(
+			`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
+		);
 
-    searchQuery = "";
-  }
+		if (guesses.length === 0) {
+			const key = `bibdle-first-guess-${dailyVerse.date}`;
+			if (
+				localStorage.getItem(key) !== "true" &&
+				browser &&
+				(window as any).umami
+			) {
+				(window as any).umami.track("First guess");
+				localStorage.setItem(key, "true");
+			}
+		}
 
-  function generateUUID(): string {
-    // Try native randomUUID if available
-    if (typeof window.crypto.randomUUID === "function") {
-      return window.crypto.randomUUID();
-    }
+		guesses = [
+			{
+				book,
+				testamentMatch,
+				sectionMatch,
+				adjacent,
+				firstLetterMatch,
+			},
+			...guesses,
+		];
 
-    // Fallback UUID v4 generator for older browsers
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-      const r = window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
-      const v = c === "x" ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
+		searchQuery = "";
+	}
 
-  function getOrCreateAnonymousId(): string {
-    if (!browser) return "";
-    const key = "bibdle-anonymous-id";
-    let id = localStorage.getItem(key);
-    if (!id) {
-      id = generateUUID();
-      localStorage.setItem(key, id);
-    }
-    return id;
-  }
+	function generateUUID(): string {
+		// Try native randomUUID if available
+		if (typeof window.crypto.randomUUID === "function") {
+			return window.crypto.randomUUID();
+		}
 
-  // Initialize anonymous ID
-  $effect(() => {
-    if (!browser) return;
-    anonymousId = getOrCreateAnonymousId();
-    const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
-    statsSubmitted = localStorage.getItem(statsKey) === "true";
-  });
+		// Fallback UUID v4 generator for older browsers
+		return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+			const r =
+				window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
+			const v = c === "x" ? r : (r & 0x3) | 0x8;
+			return v.toString(16);
+		});
+	}
 
-  $effect(() => {
-    if (!browser) return;
-    isDev = window.location.host === "localhost:5173";
-  });
+	function getOrCreateAnonymousId(): string {
+		if (!browser) return "";
+		const key = "bibdle-anonymous-id";
+		let id = localStorage.getItem(key);
+		if (!id) {
+			id = generateUUID();
+			localStorage.setItem(key, id);
+		}
+		return id;
+	}
 
-  // Load saved guesses
-  $effect(() => {
-    if (!browser) return;
+	// Initialize anonymous ID
+	$effect(() => {
+		if (!browser) return;
+		anonymousId = getOrCreateAnonymousId();
+		if ((window as any).umami) {
+			// Use user id if logged in, otherwise use anonymous id
+			(window as any).umami.identify(user ? user.id : anonymousId);
+		}
+		const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
+		statsSubmitted = localStorage.getItem(statsKey) === "true";
+		const chapterGuessKey = `bibdle-chapter-guess-${dailyVerse.reference}`;
+		chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
+		if (chapterGuessCompleted) {
+			const saved = localStorage.getItem(chapterGuessKey);
+			if (saved) {
+				const data = JSON.parse(saved);
+				const match = dailyVerse.reference.match(/\s(\d+):/);
+				const correctChapter = match ? parseInt(match[1], 10) : 1;
+				chapterCorrect = data.selectedChapter === correctChapter;
+			}
+		}
+	});
 
-    const key = `bibdle-guesses-${dailyVerse.date}`;
-    const saved = localStorage.getItem(key);
-    if (saved) {
-      let savedIds: string[] = JSON.parse(saved);
-      savedIds = Array.from(new Set(savedIds));
-      guesses = savedIds.map((bookId: string) => {
-        const book = getBookById(bookId)!;
-        const correctBook = getBookById(correctBookId)!;
-        const testamentMatch = book.testament === correctBook.testament;
-        const sectionMatch = book.section === correctBook.section;
-        const adjacent = isAdjacent(bookId, correctBookId);
-        return {
-          book,
-          testamentMatch,
-          sectionMatch,
-          adjacent,
-        };
-      });
-    }
-  });
+	$effect(() => {
+		if (!browser) return;
+		isDev = window.location.host === "localhost:5173";
+	});
 
-  $effect(() => {
-    if (!browser) return;
-    localStorage.setItem(
-      `bibdle-guesses-${dailyVerse.date}`,
-      JSON.stringify(guesses.map((g) => g.book.id))
-    );
-  });
+	// Load saved guesses
+	$effect(() => {
+		if (!browser) return;
 
-  // Auto-submit stats when user wins
-  $effect(() => {
-    console.log("Stats effect triggered:", {
-      browser,
-      isWon,
-      anonymousId,
-      statsSubmitted,
-      statsData,
-    });
+		const key = `bibdle-guesses-${dailyVerse.date}`;
+		const saved = localStorage.getItem(key);
+		if (saved) {
+			let savedIds: string[] = JSON.parse(saved);
+			savedIds = Array.from(new Set(savedIds));
+			guesses = savedIds.map((bookId: string) => {
+				const book = getBookById(bookId)!;
+				const correctBook = getBookById(correctBookId)!;
+				const testamentMatch = book.testament === correctBook.testament;
+				const sectionMatch = book.section === correctBook.section;
+				const adjacent = isAdjacent(bookId, correctBookId);
 
-    if (!browser || !isWon || !anonymousId) {
-      console.log("Basic conditions not met");
-      return;
-    }
+				// Apply same first letter logic as in submitGuess
+				const correctIsEpistlesWithNumber =
+					correctBook.section === "Pauline Epistles" &&
+					correctBook.name[0] === "1";
+				const guessStartsWithNumber = book.name[0] === "1";
 
-    if (statsSubmitted && !statsData) {
-      console.log("Fetching existing stats...");
+				const firstLetterMatch =
+					correctIsEpistlesWithNumber && guessStartsWithNumber
+						? true
+						: book.name[0].toUpperCase() ===
+							correctBook.name[0].toUpperCase();
 
-      (async () => {
-        try {
-          const response = await fetch(
-            `/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`
-          );
-          const result = await response.json();
-          console.log("Stats response:", result);
+				return {
+					book,
+					testamentMatch,
+					sectionMatch,
+					adjacent,
+					firstLetterMatch,
+				};
+			});
+		}
+	});
 
-          if (result.success && result.stats) {
-            console.log("Setting stats data:", result.stats);
-            statsData = result.stats;
-            localStorage.setItem(
-              `bibdle-stats-submitted-${dailyVerse.date}`,
-              "true"
-            );
-          } else if (result.error) {
-            console.error("Server error:", result.error);
-          } else {
-            console.error("Unexpected response format:", result);
-          }
-        } catch (err) {
-          console.error("Stats fetch failed:", err);
-        }
-      })();
+	$effect(() => {
+		if (!browser) return;
+		localStorage.setItem(
+			`bibdle-guesses-${dailyVerse.date}`,
+			JSON.stringify(guesses.map((g) => g.book.id)),
+		);
+	});
 
-      return;
-    }
+	// Auto-submit stats when user wins
+	$effect(() => {
+		console.log("Stats effect triggered:", {
+			browser,
+			isWon,
+			anonymousId,
+			statsSubmitted,
+			statsData,
+		});
 
-    console.log("Submitting stats...");
+		if (!browser || !isWon || !anonymousId) {
+			console.log("Basic conditions not met");
+			return;
+		}
 
-    async function submitStats() {
-      try {
-        const payload = {
-          anonymousId,
-          date: dailyVerse.date,
-          guessCount: guesses.length,
-        };
+		if (statsSubmitted && !statsData) {
+			console.log("Fetching existing stats...");
 
-        console.log("Sending POST request with:", payload);
+			(async () => {
+				try {
+					const response = await fetch(
+						`/api/submit-completion?anonymousId=${user ? user.id : anonymousId}&date=${dailyVerse.date}`,
+					);
+					const result = await response.json();
+					console.log("Stats response:", result);
 
-        const response = await fetch("/api/submit-completion", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(payload),
-        });
+					if (result.success && result.stats) {
+						console.log("Setting stats data:", result.stats);
+						statsData = result.stats;
+						localStorage.setItem(
+							`bibdle-stats-submitted-${dailyVerse.date}`,
+							"true",
+						);
+					} else if (result.error) {
+						console.error("Server error:", result.error);
+					} else {
+						console.error("Unexpected response format:", result);
+					}
+				} catch (err) {
+					console.error("Stats fetch failed:", err);
+				}
+			})();
 
-        const result = await response.json();
-        console.log("Stats response:", result);
+			return;
+		}
 
-        if (result.success && result.stats) {
-          console.log("Setting stats data:", result.stats);
-          statsData = result.stats;
-          statsSubmitted = true;
-          localStorage.setItem(
-            `bibdle-stats-submitted-${dailyVerse.date}`,
-            "true"
-          );
-        } else if (result.error) {
-          console.error("Server error:", result.error);
-        } else {
-          console.error("Unexpected response format:", result);
-        }
-      } catch (err) {
-        console.error("Stats submission failed:", err);
-      }
-    }
+		console.log("Submitting stats...");
 
-    submitStats();
-  });
+		async function submitStats() {
+			try {
+				const payload = {
+					anonymousId: user ? user.id : anonymousId,
+					date: dailyVerse.date,
+					guessCount: guesses.length,
+				};
 
-  $effect(() => {
-    if (!browser || !isWon) return;
-    const key = `bibdle-win-tracked-${dailyVerse.date}`;
-    if (localStorage.getItem(key) === "true") return;
-    if ((window as any).umami) {
-      (window as any).umami.track("Guessed correctly", {
-        totalGuesses: guesses.length,
-      });
-    }
-    localStorage.setItem(key, "true");
-  });
+				console.log("Sending POST request with:", payload);
 
-  function generateShareText(): string {
-    const emojis = guesses
-      .slice()
-      .reverse()
-      .map((guess) => {
-        if (guess.book.id === correctBookId) return "✅";
-        if (guess.adjacent) return "‼️";
-        if (guess.sectionMatch) return "🟩";
-        if (guess.testamentMatch) return "🟧";
-        return "🟥";
-      })
-      .join("");
+				const response = await fetch("/api/submit-completion", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(payload),
+				});
 
-    const dateFormatter = new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-    });
-    const formattedDate = dateFormatter.format(
-      new Date(`${dailyVerse.date}T00:00:00`)
-    );
-    const siteUrl = window.location.origin;
-    return [
-      `📖 Bibdle | ${formattedDate} 📖`,
-      `${grade} (${guesses.length} ${guesses.length == 1 ? "guess" : "guesses"})`,
-      `${emojis}`,
-      siteUrl,
-    ].join("\n");
-  }
+				const result = await response.json();
+				console.log("Stats response:", result);
 
-  async function share() {
-    if (!browser) return;
+				if (result.success && result.stats) {
+					console.log("Setting stats data:", result.stats);
+					statsData = result.stats;
+					statsSubmitted = true;
+					localStorage.setItem(
+						`bibdle-stats-submitted-${dailyVerse.date}`,
+						"true",
+					);
+				} else if (result.error) {
+					console.error("Server error:", result.error);
+				} else {
+					console.error("Unexpected response format:", result);
+				}
+			} catch (err) {
+				console.error("Stats submission failed:", err);
+			}
+		}
 
-    const shareText = generateShareText();
+		submitStats();
+	});
 
-    try {
-      if ("share" in navigator) {
-        await (navigator as any).share({ text: shareText });
-      } else {
-        await (navigator as any).clipboard.writeText(shareText);
-      }
-    } catch (err) {
-      console.error("Share failed:", err);
-      throw err;
-    }
-  }
+	$effect(() => {
+		if (!browser || !isWon) return;
+		const key = `bibdle-win-tracked-${dailyVerse.date}`;
+		if (localStorage.getItem(key) === "true") return;
+		if ((window as any).umami) {
+			(window as any).umami.track("Guessed correctly", {
+				totalGuesses: guesses.length,
+			});
+		}
+		localStorage.setItem(key, "true");
+	});
 
-  async function copyToClipboard() {
-    if (!browser) return;
+	function generateShareText(): string {
+		const emojis = guesses
+			.slice()
+			.reverse()
+			.map((guess) => {
+				if (guess.book.id === correctBookId) return "✅";
+				if (guess.adjacent) return "‼️";
+				if (guess.sectionMatch) return "🟩";
+				if (guess.testamentMatch) return "🟧";
+				return "🟥";
+			})
+			.join("");
 
-    const shareText = generateShareText();
+		const dateFormatter = new Intl.DateTimeFormat("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+		});
+		const formattedDate = dateFormatter.format(
+			new Date(`${dailyVerse.date}T00:00:00`),
+		);
+		const siteUrl = window.location.origin;
+		return [
+			`📖 Bibdle | ${formattedDate} 📖`,
+			`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
+			`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
+			siteUrl,
+		].join("\n");
+	}
 
-    try {
-      await (navigator as any).clipboard.writeText(shareText);
-      copied = true;
-      setTimeout(() => {
-        copied = false;
-      }, 5000);
-    } catch (err) {
-      console.error("Copy to clipboard failed:", err);
-      throw err;
-    }
-  }
+	async function share() {
+		if (!browser) return;
 
-  function handleShare() {
-    if (copied || !browser) return;
-    const useClipboard = !("share" in navigator);
-    if (useClipboard) {
-      copied = true;
-    }
-    share()
-      .then(() => {
-        if (useClipboard) {
-          setTimeout(() => {
-            copied = false;
-          }, 5000);
-        }
-      })
-      .catch(() => {
-        if (useClipboard) {
-          copied = false;
-        }
-      });
-  }
+		const shareText = generateShareText();
 
-  function clearLocalStorage() {
-    if (!browser) return;
-    // Clear all bibdle-related localStorage items
-    const keysToRemove: string[] = [];
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      if (key && key.startsWith("bibdle-")) {
-        keysToRemove.push(key);
-      }
-    }
-    keysToRemove.forEach((key) => localStorage.removeItem(key));
-    // Reload the page to reset state
-    window.location.reload();
-  }
+		try {
+			if ("share" in navigator) {
+				await (navigator as any).share({ text: shareText });
+			} else {
+				await (navigator as any).clipboard.writeText(shareText);
+			}
+		} catch (err) {
+			console.error("Share failed:", err);
+			throw err;
+		}
+	}
+
+	async function copyToClipboard() {
+		if (!browser) return;
+
+		const shareText = generateShareText();
+
+		try {
+			await (navigator as any).clipboard.writeText(shareText);
+			copied = true;
+			setTimeout(() => {
+				copied = false;
+			}, 5000);
+		} catch (err) {
+			console.error("Copy to clipboard failed:", err);
+			throw err;
+		}
+	}
+
+	function handleShare() {
+		if (copied || !browser) return;
+		const useClipboard = !("share" in navigator);
+		if (useClipboard) {
+			copied = true;
+		}
+		share()
+			.then(() => {
+				if (useClipboard) {
+					setTimeout(() => {
+						copied = false;
+					}, 5000);
+				}
+			})
+			.catch(() => {
+				if (useClipboard) {
+					copied = false;
+				}
+			});
+	}
 </script>
 
 <svelte:head>
-  <!-- <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title> -->
-  <title>A daily bible game{isDev ? " (dev)" : ""}</title>
-  <!-- <meta
+	<!-- <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title> -->
+	<title>A daily bible game{isDev ? " (dev)" : ""}</title>
+	<!-- <meta
     name="description"
     content="Guess which book of the Bible a verse comes from."
   /> -->
 </svelte:head>
 
 <div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-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"
-    >
-      <TitleAnimation />
-      <div class="font-normal"></div>
-    </h1>
-    <div class="text-center mb-8">
-      <span class="big-text"
-        >{isDev ? "Dev Edition  |  " : ""}{currentDate}</span
-      >
-    </div>
+	<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"
+		>
+			<TitleAnimation />
+			<div class="font-normal"></div>
+		</h1>
+		<div class="text-center mb-8">
+			<span class="big-text"
+				>{isDev ? "Dev Edition  |  " : ""}{currentDate}</span
+			>
+		</div>
 
-    <VerseDisplay {data} {isWon} />
+		<div class="flex flex-col gap-6">
+			<VerseDisplay {data} {isWon} {blurChapter} />
 
-    {#if !isWon}
-      <SearchInput bind:searchQuery {guessedIds} {submitGuess} />
-    {:else}
-      <WinScreen
-        {grade}
-        {statsData}
-        {correctBookId}
-        {handleShare}
-        {copyToClipboard}
-        bind:copied
-        {statsSubmitted}
-        guessCount={guesses.length}
-      />
-      <CountdownTimer />
-    {/if}
+			{#if !isWon}
+				<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
+			{:else}
+				<WinScreen
+					{grade}
+					{statsData}
+					{correctBookId}
+					{handleShare}
+					{copyToClipboard}
+					bind:copied
+					{statsSubmitted}
+					guessCount={guesses.length}
+					reference={dailyVerse.reference}
+					onChapterGuessCompleted={() => {
+						chapterGuessCompleted = true;
+						const key = `bibdle-chapter-guess-${dailyVerse.reference}`;
+						const saved = localStorage.getItem(key);
+						if (saved) {
+							const data = JSON.parse(saved);
+							const match =
+								dailyVerse.reference.match(/\s(\d+):/);
+							const correctChapter = match
+								? parseInt(match[1], 10)
+								: 1;
+							chapterCorrect =
+								data.selectedChapter === correctChapter;
+						}
+					}}
+				/>
+			{/if}
 
-    <GuessesTable {guesses} {correctBookId} />
-    {#if isWon}
-      <Feedback />
-    {/if}
-    {#if isDev}
-      <button
-        onclick={clearLocalStorage}
-        class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
-      >
-        Clear LocalStorage
-      </button>
-    {/if}
-  </div>
+			<GuessesTable {guesses} {correctBookId} />
+
+			{#if isWon}
+				<Credits />
+			{/if}
+		</div>
+		<div class="mt-8 flex flex-col items-center gap-3">
+			<div class="flex gap-3">
+				<a 
+					href="/stats?{user ? `userId=${user.id}` : `anonymousId=${anonymousId}`}"
+					class="inline-flex items-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>
+						<button
+							type="submit"
+							class="inline-flex items-center 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 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>
+			
+			{#if isDev}
+				<div class="text-xs text-gray-600 bg-gray-100 px-3 py-2 rounded border">
+					<div><strong>Debug Info:</strong></div>
+					<div>User: {user ? `${user.email} (ID: ${user.id})` : 'Not signed in'}</div>
+					<div>Session: {session ? `Expires ${session.expiresAt.toLocaleDateString()}` : 'No session'}</div>
+					<div>Anonymous ID: {anonymousId || 'Not set'}</div>
+				</div>
+				<DevButtons />
+			{/if}
+		</div>
+	</div>
 </div>
+
+<AuthModal bind:isOpen={authModalOpen} {anonymousId} />

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

@@ -0,0 +1,68 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { getRandomVersesFromBook } from '$lib/server/xml-bible';
+
+interface VerseOption {
+	text: string;
+	isImposter: boolean;
+	ref: string;
+}
+
+export const GET: RequestHandler = async () => {
+	try {
+		// Select two different random books (1-66)
+		let book1Num = Math.floor(Math.random() * 66) + 1;
+		let book2Num = Math.floor(Math.random() * 66) + 1;
+		while (book2Num === book1Num) {
+			book2Num = Math.floor(Math.random() * 66) + 1;
+		}
+
+		// Randomly decide which is majority
+		const majorityBookNum = Math.random() < 0.5 ? book1Num : book2Num;
+		const imposterBookNum = majorityBookNum === book1Num ? book2Num : book1Num;
+
+		// Get 3 random verses from majority book
+		const options: VerseOption[] = [];
+		for (let i = 0; i < 3; i++) {
+			const verseData = getRandomVersesFromBook(majorityBookNum, 1);
+			if (!verseData) {
+				throw new Error('Failed to get majority verse');
+			}
+			options.push({
+				text: verseData.verses[0],
+				isImposter: false,
+				ref: `${verseData.bookName} ${verseData.chapter}:${verseData.startVerse}`
+			});
+		}
+
+		// Get 1 random verse from imposter book
+		const imposterVerseData = getRandomVersesFromBook(imposterBookNum, 1);
+		if (!imposterVerseData) {
+			throw new Error('Failed to get imposter verse');
+		}
+		options.push({
+			text: imposterVerseData.verses[0],
+			isImposter: true,
+			ref: `${imposterVerseData.bookName} ${imposterVerseData.chapter}:${imposterVerseData.startVerse}`
+		});
+
+		// Fisher-Yates shuffle
+		for (let i = options.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[options[i], options[j]] = [options[j], options[i]];
+		}
+
+		const verses = options.map(o => o.text);
+		const refs = options.map(o => o.ref);
+		const imposterIndex = options.findIndex(o => o.isImposter);
+
+		return json({
+			verses,
+			refs,
+			imposterIndex
+		});
+	} catch (error) {
+		console.error('Imposter API error:', error);
+		return json({ error: 'Failed to generate imposter game' }, { status: 500 });
+	}
+};

src/routes/api/submit-completion/+server.ts

@@ -44,17 +44,26 @@ export const POST: RequestHandler = async ({ request }) => {
 		// Solve rank: position in time-ordered list
 		const solveRank = allCompletions.findIndex(c => c.anonymousId === anonymousId) + 1;
 
-		// Guess rank: count how many had FEWER guesses (ties get same rank)
-		const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
-		const guessRank = betterGuesses + 1;
+		// Guess rank: count how many DISTINCT guess counts are better (grouped ranking)
+		const uniqueBetterGuessCounts = new Set(
+			allCompletions.filter(c => c.guessCount < guessCount).map(c => c.guessCount)
+		);
+		const guessRank = uniqueBetterGuessCounts.size + 1;
+
+		// Count ties: how many have the SAME guessCount (excluding self)
+		const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
 
 		// Average guesses
 		const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
 		const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
 
+		// Percentile: what percentage of people you beat (100 - your rank percentage)
+		const betterOrEqualCount = allCompletions.filter(c => c.guessCount <= guessCount).length;
+		const percentile = Math.round((betterOrEqualCount / totalSolves) * 100);
+
 		return json({
 			success: true,
-			stats: { solveRank, guessRank, totalSolves, averageGuesses }
+			stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount, percentile }
 		});
 	} catch (err) {
 		console.error('Error submitting completion:', err);
@@ -101,17 +110,26 @@ export const GET: RequestHandler = async ({ url }) => {
 		// Solve rank: position in time-ordered list
 		const solveRank = allCompletions.findIndex(c => c.anonymousId === anonymousId) + 1;
 
-		// Guess rank: count how many had FEWER guesses (ties get same rank)
-		const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
-		const guessRank = betterGuesses + 1;
+		// Guess rank: count how many DISTINCT guess counts are better (grouped ranking)
+		const uniqueBetterGuessCounts = new Set(
+			allCompletions.filter(c => c.guessCount < guessCount).map(c => c.guessCount)
+		);
+		const guessRank = uniqueBetterGuessCounts.size + 1;
+
+		// Count ties: how many have the SAME guessCount (excluding self)
+		const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
 
 		// Average guesses
 		const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
 		const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
 
+		// Percentile: what percentage of people you beat (100 - your rank percentage)
+		const betterOrEqualCount = allCompletions.filter(c => c.guessCount <= guessCount).length;
+		const percentile = Math.round((betterOrEqualCount / totalSolves) * 100);
+
 		return json({
 			success: true,
-			stats: { solveRank, guessRank, totalSolves, averageGuesses }
+			stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount, percentile }
 		});
 	} catch (err) {
 		console.error('Error fetching stats:', err);

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

@@ -0,0 +1,13 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import * as auth from '$lib/server/auth';
+
+export const actions: Actions = {
+	default: async ({ locals, cookies }) => {
+		if (locals.session) {
+			await auth.invalidateSession(locals.session.id);
+		}
+		auth.deleteSessionTokenCookie({ cookies });
+		redirect(302, '/');
+	}
+};

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

@@ -0,0 +1,110 @@
+import { redirect, fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import * as auth from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import { dailyCompletions } from '$lib/server/db/schema';
+import { eq, inArray } from 'drizzle-orm';
+
+export const actions: Actions = {
+	default: async ({ request, cookies }) => {
+		const data = await request.formData();
+		const email = data.get('email')?.toString();
+		const password = data.get('password')?.toString();
+		const anonymousId = data.get('anonymousId')?.toString();
+
+		if (!email || !password) {
+			return fail(400, { error: 'Email and password are required' });
+		}
+
+		// Basic email validation
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(email)) {
+			return fail(400, { error: 'Please enter a valid email address' });
+		}
+
+		if (password.length < 6) {
+			return fail(400, { error: 'Password must be at least 6 characters' });
+		}
+
+		try {
+			// Get user by email
+			const user = await auth.getUserByEmail(email);
+			if (!user || !user.passwordHash) {
+				return fail(400, { error: 'Invalid email or password' });
+			}
+
+			// Verify password
+			const isValidPassword = await auth.verifyPassword(password, user.passwordHash);
+			if (!isValidPassword) {
+				return fail(400, { error: 'Invalid email or password' });
+			}
+
+			// Migrate anonymous stats if different anonymous ID
+			if (anonymousId && anonymousId !== user.id) {
+				try {
+					// Update all daily completions from the local anonymous ID to the user's ID
+					await db
+						.update(dailyCompletions)
+						.set({ anonymousId: user.id })
+						.where(eq(dailyCompletions.anonymousId, anonymousId));
+					
+					console.log(`Migrated stats from ${anonymousId} to ${user.id}`);
+
+					// Deduplicate any entries for the same date after migration
+					const allUserCompletions = await db
+						.select()
+						.from(dailyCompletions)
+						.where(eq(dailyCompletions.anonymousId, user.id));
+
+					// Group by date to find duplicates
+					const dateGroups = new Map<string, typeof allUserCompletions>();
+					for (const completion of allUserCompletions) {
+						const date = completion.date;
+						if (!dateGroups.has(date)) {
+							dateGroups.set(date, []);
+						}
+						dateGroups.get(date)!.push(completion);
+					}
+
+					// Process dates with duplicates
+					const duplicateIds: string[] = [];
+					for (const [date, completions] of dateGroups) {
+						if (completions.length > 1) {
+							// Sort by completedAt timestamp (earliest first)
+							completions.sort((a, b) => a.completedAt.getTime() - b.completedAt.getTime());
+							
+							// Keep the first (earliest), mark the rest for deletion
+							const toDelete = completions.slice(1);
+							duplicateIds.push(...toDelete.map(c => c.id));
+							
+							console.log(`Found ${completions.length} duplicates for date ${date}, keeping earliest, deleting ${toDelete.length}`);
+						}
+					}
+
+					// Delete duplicate entries
+					if (duplicateIds.length > 0) {
+						await db
+							.delete(dailyCompletions)
+							.where(inArray(dailyCompletions.id, duplicateIds));
+						
+						console.log(`Deleted ${duplicateIds.length} duplicate completion entries`);
+					}
+
+				} catch (error) {
+					console.error('Error migrating anonymous stats:', error);
+					// Don't fail the signin if stats migration fails
+				}
+			}
+
+			// Create session
+			const sessionToken = auth.generateSessionToken();
+			const session = await auth.createSession(sessionToken, user.id);
+			auth.setSessionTokenCookie({ cookies }, sessionToken, session.expiresAt);
+
+			return { success: true };
+		} catch (error) {
+			console.error('Sign in error:', error);
+			return fail(500, { error: 'An error occurred during sign in' });
+		}
+	}
+};

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

@@ -0,0 +1,64 @@
+import { redirect, fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import * as auth from '$lib/server/auth';
+
+export const actions: Actions = {
+	default: async ({ request, cookies }) => {
+		const data = await request.formData();
+		const email = data.get('email')?.toString();
+		const password = data.get('password')?.toString();
+		const firstName = data.get('firstName')?.toString();
+		const lastName = data.get('lastName')?.toString();
+		const anonymousId = data.get('anonymousId')?.toString();
+
+		if (!email || !password || !anonymousId) {
+			return fail(400, { error: 'Email, password, and anonymous ID are required' });
+		}
+
+		// Basic email validation
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(email)) {
+			return fail(400, { error: 'Please enter a valid email address' });
+		}
+
+		if (password.length < 6) {
+			return fail(400, { error: 'Password must be at least 6 characters' });
+		}
+
+		try {
+			// Check if user already exists
+			const existingUser = await auth.getUserByEmail(email);
+			if (existingUser) {
+				return fail(400, { error: 'An account with this email already exists' });
+			}
+
+			// Hash password
+			const passwordHash = await auth.hashPassword(password);
+
+			// Create user with anonymousId as the user ID
+			const user = await auth.createUser(
+				anonymousId,
+				email,
+				passwordHash,
+				firstName || undefined,
+				lastName || undefined
+			);
+
+			// Create session
+			const sessionToken = auth.generateSessionToken();
+			const session = await auth.createSession(sessionToken, user.id);
+			auth.setSessionTokenCookie({ cookies }, sessionToken, session.expiresAt);
+
+			return { success: true };
+		} catch (error) {
+			console.error('Sign up error:', error);
+			
+			// Check if it's a unique constraint error (user with this ID already exists)
+			if (error instanceof Error && error.message.includes('UNIQUE constraint')) {
+				return fail(400, { error: 'This account is already registered. Please sign in instead.' });
+			}
+			
+			return fail(500, { error: 'An error occurred during account creation' });
+		}
+	}
+};

src/routes/imposter/+page.svelte

@@ -1,214 +1,17 @@
 <script lang="ts">
-  let sentence = $state("");
-  let results = $state<
-    Array<{
-      book: string;
-      chapter: number;
-      verse: number;
-      text: string;
-      score: number;
-    }>
-  >([]);
-  let loading = $state(false);
-
-  async function searchVerses() {
-    loading = true;
-    try {
-      const response = await fetch("/api/similar-verses", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sentence, topK: 10 }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
-      }
-
-      const data = await response.json();
-      if (data.error) {
-        throw new Error(data.error);
-      }
-      results = data.results || [];
-    } catch (error) {
-      console.error("Search error:", error);
-      results = [];
-    } finally {
-      loading = false;
-    }
-  }
+  import Imposter from "$lib/components/Imposter.svelte";
+  import Container from "$lib/components/Container.svelte";
 </script>
 
-<div class="page">
-  <h1 class="title">Similar Verse Finder</h1>
+<svelte:head>
+  <title>Bibdle (imposter mode)</title>
+</svelte:head>
 
-  <div class="search-section">
-    <input
-      bind:value={sentence}
-      placeholder="Enter a sentence to find similar Bible verses..."
-      class="input"
-    />
-    <button onclick={searchVerses} disabled={loading} class="button">
-      {loading ? "Searching..." : "Find Similar Verses"}
-    </button>
-  </div>
+<Container>
+  <Container class="p-2 mt-12">
+    <h1><i>Imposter Mode</i></h1>
+    <p>Click the verse that doesn't belong</p>
+  </Container>
 
-  {#if results.length > 0}
-    <div class="results">
-      {#each results as result, i (i)}
-        <article class="result">
-          <header>
-            <strong>{result.book} {result.chapter}:{result.verse}</strong>
-            <span class="score">Score: {result.score.toFixed(3)}</span>
-          </header>
-          <p>{result.text}</p>
-        </article>
-      {/each}
-    </div>
-  {:else if sentence.trim() && !loading}
-    <p class="no-results">No similar verses found. Try another sentence!</p>
-  {/if}
-</div>
-
-<style>
-  .page {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 1rem 0.75rem;
-    font-family:
-      system-ui,
-      -apple-system,
-      sans-serif;
-  }
-
-  .title {
-    text-align: center;
-    margin-bottom: 1.75rem;
-    font-size: clamp(2rem, 5vw, 3rem);
-    color: #2c3e50;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  .search-section {
-    display: flex;
-    gap: 0.75rem;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-  }
-
-  .input {
-    flex: 1;
-    min-width: 300px;
-    padding: 0.75rem 1rem;
-    border: 2px solid #e1e5e9;
-    border-radius: 12px;
-    font-size: 1.1rem;
-    transition: all 0.2s ease;
-    background: #fafbfc;
-  }
-
-  .input:focus {
-    outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
-    background: white;
-  }
-
-  .button {
-    padding: 0.75rem 1.5rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border: none;
-    border-radius: 12px;
-    font-size: 1.1rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-  }
-
-  .button:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-  }
-
-  .button:disabled {
-    background: #a0aec0;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-  }
-
-  .results {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .result {
-    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
-    border: 1px solid #e2e8f0;
-    border-radius: 16px;
-    padding: 1.25rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    transition: all 0.2s ease;
-  }
-
-  .result:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
-  }
-
-  .result header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 0.75rem;
-    gap: 0.75rem;
-  }
-
-  .result strong {
-    font-size: 1.3rem;
-    color: #1a202c;
-  }
-
-  .score {
-    font-size: 1rem;
-    color: #718096;
-    font-weight: 500;
-    white-space: nowrap;
-  }
-
-  .result p {
-    margin: 0;
-    line-height: 1.7;
-    color: #4a5568;
-    font-size: 1.1rem;
-  }
-
-  .no-results {
-    text-align: center;
-    padding: 1.75rem 0.75rem;
-    color: #a0aec0;
-    font-size: 1.2rem;
-    font-style: italic;
-  }
-
-  @media (max-width: 768px) {
-    .search-section {
-      flex-direction: column;
-    }
-
-    .input {
-      min-width: unset;
-    }
-
-    .result header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.5rem;
-    }
-  }
-</style>
+  <Imposter />
+</Container>

src/routes/similarity/+page.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+  let sentence = $state("");
+  let results = $state<
+    Array<{
+      book: string;
+      chapter: number;
+      verse: number;
+      text: string;
+      score: number;
+    }>
+  >([]);
+  let loading = $state(false);
+
+  async function searchVerses() {
+    loading = true;
+    try {
+      const response = await fetch("/api/similar-verses", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sentence, topK: 10 }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+      }
+
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data.error);
+      }
+      results = data.results || [];
+    } catch (error) {
+      console.error("Search error:", error);
+      results = [];
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="page">
+  <h1 class="title">Similar Verse Finder</h1>
+
+  <div class="search-section">
+    <input
+      bind:value={sentence}
+      placeholder="Enter a sentence to find similar Bible verses..."
+      class="input"
+    />
+    <button onclick={searchVerses} disabled={loading} class="button">
+      {loading ? "Searching..." : "Find Similar Verses"}
+    </button>
+  </div>
+
+  {#if results.length > 0}
+    <div class="results">
+      {#each results as result, i (i)}
+        <article class="result">
+          <header>
+            <strong>{result.book} {result.chapter}:{result.verse}</strong>
+            <span class="score">Score: {result.score.toFixed(3)}</span>
+          </header>
+          <p>{result.text}</p>
+        </article>
+      {/each}
+    </div>
+  {:else if sentence.trim() && !loading}
+    <p class="no-results">No similar verses found. Try another sentence!</p>
+  {/if}
+</div>
+
+<style>
+  .page {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 1rem 0.75rem;
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+
+  .title {
+    text-align: center;
+    margin-bottom: 1.75rem;
+    font-size: clamp(2rem, 5vw, 3rem);
+    color: #2c3e50;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .search-section {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .input {
+    flex: 1;
+    min-width: 300px;
+    padding: 0.75rem 1rem;
+    border: 2px solid #e1e5e9;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    transition: all 0.2s ease;
+    background: #fafbfc;
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+    background: white;
+  }
+
+  .button {
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+  }
+
+  .button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+  }
+
+  .button:disabled {
+    background: #a0aec0;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+
+  .results {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .result {
+    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 1.25rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+  }
+
+  .result:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+  }
+
+  .result header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.75rem;
+    gap: 0.75rem;
+  }
+
+  .result strong {
+    font-size: 1.3rem;
+    color: #1a202c;
+  }
+
+  .score {
+    font-size: 1rem;
+    color: #718096;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .result p {
+    margin: 0;
+    line-height: 1.7;
+    color: #4a5568;
+    font-size: 1.1rem;
+  }
+
+  .no-results {
+    text-align: center;
+    padding: 1.75rem 0.75rem;
+    color: #a0aec0;
+    font-size: 1.2rem;
+    font-style: italic;
+  }
+
+  @media (max-width: 768px) {
+    .search-section {
+      flex-direction: column;
+    }
+
+    .input {
+      min-width: unset;
+    }
+
+    .result header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+  }
+</style>

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

@@ -0,0 +1,168 @@
+import { db } from '$lib/server/db';
+import { dailyCompletions, type DailyCompletion } from '$lib/server/db/schema';
+import { eq, desc } from 'drizzle-orm';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url, locals }) => {
+	// Check if user is authenticated
+	if (!locals.user) {
+		return {
+			stats: null,
+			error: null,
+			user: null,
+			session: null,
+			requiresAuth: true
+		};
+	}
+	
+	const userId = locals.user.id;
+	
+	if (!userId) {
+		return {
+			stats: null,
+			error: 'No user ID provided',
+			user: locals.user,
+			session: locals.session
+		};
+	}
+
+	try {
+		// Get all completions for this user
+		const completions = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, userId))
+			.orderBy(desc(dailyCompletions.date));
+
+		if (completions.length === 0) {
+			return {
+				stats: {
+					totalSolves: 0,
+					avgGuesses: 0,
+					gradeDistribution: {
+						'S++': 0,
+						'S+': 0,
+						'A+': 0,
+						'A': 0,
+						'B+': 0,
+						'B': 0,
+						'C+': 0,
+						'C': 0
+					},
+					currentStreak: 0,
+					bestStreak: 0,
+					recentCompletions: []
+				},
+				user: locals.user,
+				session: locals.session
+			};
+		}
+
+		// Calculate basic stats
+		const totalSolves = completions.length;
+		const totalGuesses = completions.reduce((sum: number, c: DailyCompletion) => sum + c.guessCount, 0);
+		const avgGuesses = Math.round((totalGuesses / totalSolves) * 100) / 100;
+
+		// Calculate grade distribution
+		const gradeDistribution = {
+			'S++': 0, // This will be calculated differently since we don't store chapter correctness
+			'S+': completions.filter((c: DailyCompletion) => c.guessCount === 1).length,
+			'A+': completions.filter((c: DailyCompletion) => c.guessCount === 2).length,
+			'A': completions.filter((c: DailyCompletion) => c.guessCount === 3).length,
+			'B+': completions.filter((c: DailyCompletion) => c.guessCount >= 4 && c.guessCount <= 6).length,
+			'B': completions.filter((c: DailyCompletion) => c.guessCount >= 7 && c.guessCount <= 10).length,
+			'C+': completions.filter((c: DailyCompletion) => c.guessCount >= 11 && c.guessCount <= 15).length,
+			'C': completions.filter((c: DailyCompletion) => c.guessCount > 15).length
+		};
+
+		// Calculate streaks
+		const sortedDates = completions
+			.map((c: DailyCompletion) => c.date)
+			.sort();
+		
+		let currentStreak = 0;
+		let bestStreak = 0;
+		let tempStreak = 1;
+		
+		if (sortedDates.length > 0) {
+			// Check if current streak is active (includes today or yesterday)
+			const today = new Date().toISOString().split('T')[0];
+			const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+			const lastPlayedDate = sortedDates[sortedDates.length - 1];
+			
+			if (lastPlayedDate === today || lastPlayedDate === yesterday) {
+				currentStreak = 1;
+				
+				// Count backwards from the most recent date
+				for (let i = sortedDates.length - 2; i >= 0; i--) {
+					const currentDate = new Date(sortedDates[i + 1]);
+					const prevDate = new Date(sortedDates[i]);
+					const daysDiff = Math.floor((currentDate.getTime() - prevDate.getTime()) / (1000 * 60 * 60 * 24));
+					
+					if (daysDiff === 1) {
+						currentStreak++;
+					} else {
+						break;
+					}
+				}
+			}
+			
+			// Calculate best streak
+			bestStreak = 1;
+			for (let i = 1; i < sortedDates.length; i++) {
+				const currentDate = new Date(sortedDates[i]);
+				const prevDate = new Date(sortedDates[i - 1]);
+				const daysDiff = Math.floor((currentDate.getTime() - prevDate.getTime()) / (1000 * 60 * 60 * 24));
+				
+				if (daysDiff === 1) {
+					tempStreak++;
+				} else {
+					bestStreak = Math.max(bestStreak, tempStreak);
+					tempStreak = 1;
+				}
+			}
+			bestStreak = Math.max(bestStreak, tempStreak);
+		}
+
+		// Get recent completions (last 7 days)
+		const recentCompletions = completions
+			.slice(0, 7)
+			.map((c: DailyCompletion) => ({
+				date: c.date,
+				guessCount: c.guessCount,
+				grade: getGradeFromGuesses(c.guessCount)
+			}));
+
+		return {
+			stats: {
+				totalSolves,
+				avgGuesses,
+				gradeDistribution,
+				currentStreak,
+				bestStreak,
+				recentCompletions
+			},
+			user: locals.user,
+			session: locals.session
+		};
+
+	} catch (error) {
+		console.error('Error fetching user stats:', error);
+		return {
+			stats: null,
+			error: 'Failed to fetch stats',
+			user: locals.user,
+			session: locals.session
+		};
+	}
+};
+
+function getGradeFromGuesses(guessCount: number): string {
+	if (guessCount === 1) return "S+";
+	if (guessCount === 2) return "A+";
+	if (guessCount === 3) return "A";
+	if (guessCount >= 4 && guessCount <= 6) return "B+";
+	if (guessCount >= 7 && guessCount <= 10) return "B";
+	if (guessCount >= 11 && guessCount <= 15) return "C+";
+	return "C";
+}

src/routes/stats/+page.svelte

@@ -0,0 +1,221 @@
+<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 { 
+		getGradeColor, 
+		formatDate, 
+		getStreakMessage, 
+		getPerformanceMessage,
+		type UserStats 
+	} from "$lib/utils/stats";
+
+	interface PageData {
+		stats: UserStats | null;
+		error?: string;
+		user?: any;
+		session?: any;
+		requiresAuth?: boolean;
+	}
+
+	let { data }: { data: PageData } = $props();
+	let authModalOpen = $state(false);
+
+	let loading = $state(true);
+
+	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;
+	}
+
+	onMount(async () => {
+		loading = false;
+	});
+
+	function getGradePercentage(count: number, total: number): number {
+		return total > 0 ? Math.round((count / total) * 100) : 0;
+	}
+
+	$inspect(data);
+</script>
+
+<svelte:head>
+	<title>Stats | Bibdle</title>
+	<meta name="description" content="View your Bibdle game statistics and performance" />
+</svelte:head>
+
+<div class="min-h-screen bg-gradient-to-br from-amber-50 to-orange-100 p-4">
+	<div class="max-w-4xl mx-auto">
+		<!-- Header -->
+		<div class="text-center mb-8">
+			<h1 class="text-4xl font-bold text-gray-800 mb-2">Your Stats</h1>
+			<p class="text-gray-600">Track your Bibdle performance over time</p>
+			<div class="mt-4">
+				<a 
+					href="/"
+					class="inline-flex items-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors"
+				>
+					← Back to Game
+				</a>
+			</div>
+		</div>
+
+		{#if loading}
+			<div class="text-center py-12">
+				<div class="inline-block w-8 h-8 border-4 border-amber-600 border-t-transparent rounded-full animate-spin"></div>
+				<p class="mt-4 text-gray-600">Loading your stats...</p>
+			</div>
+		{:else if data.requiresAuth}
+			<div class="text-center py-12">
+				<div class="bg-blue-100 border border-blue-300 rounded-lg p-8 max-w-md mx-auto">
+					<h2 class="text-2xl font-bold text-blue-800 mb-4">Authentication Required</h2>
+					<p class="text-blue-700 mb-6">You must be logged in to see your stats.</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-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium"
+						>
+							← Back to Game
+						</a>
+					</div>
+				</div>
+			</div>
+		{:else if data.error}
+			<div class="text-center py-12">
+				<div class="bg-red-100 border border-red-300 rounded-lg p-6 max-w-md mx-auto">
+					<p class="text-red-700">{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.stats}
+			<div class="text-center py-12">
+				<div class="bg-yellow-100 border border-yellow-300 rounded-lg p-6 max-w-md mx-auto">
+					<p class="text-yellow-700">No stats available.</p>
+					<a 
+						href="/" 
+						class="mt-4 inline-block px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 transition-colors"
+					>
+						Start Playing
+					</a>
+				</div>
+			</div>
+		{:else}
+			{@const stats = data.stats}
+			
+			<!-- Overview Cards -->
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+				<!-- Total Solves -->
+				<div class="bg-white rounded-lg shadow-md p-6">
+					<div class="text-center">
+						<div class="text-3xl font-bold text-amber-600 mb-2">{stats.totalSolves}</div>
+						<div class="text-gray-600">Total Solves</div>
+						{#if stats.totalSolves > 0}
+							<div class="text-sm text-gray-500 mt-1">
+								{getPerformanceMessage(stats.avgGuesses)}
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Average Guesses -->
+				<div class="bg-white rounded-lg shadow-md p-6">
+					<div class="text-center">
+						<div class="text-3xl font-bold text-blue-600 mb-2">{stats.avgGuesses}</div>
+						<div class="text-gray-600">Avg. Guesses</div>
+						<div class="text-sm text-gray-500 mt-1">per solve</div>
+					</div>
+				</div>
+
+				<!-- Current Streak -->
+				<div class="bg-white rounded-lg shadow-md p-6">
+					<div class="text-center">
+						<div class="text-3xl font-bold text-green-600 mb-2">{stats.currentStreak}</div>
+						<div class="text-gray-600">Current Streak</div>
+						<div class="text-sm text-gray-500 mt-1">
+							{getStreakMessage(stats.currentStreak)}
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Grade Distribution -->
+			{#if stats.totalSolves > 0}
+				<div class="bg-white rounded-lg shadow-md p-6 mb-8">
+					<h2 class="text-2xl font-bold text-gray-800 mb-4">Grade Distribution</h2>
+					<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+						{#each Object.entries(stats.gradeDistribution) as [grade, count]}
+							{@const percentage = getGradePercentage(count, stats.totalSolves)}
+							<div class="text-center">
+								<div class="mb-2">
+									<span class="inline-block px-3 py-1 rounded-full text-sm font-semibold {getGradeColor(grade)}">
+										{grade}
+									</span>
+								</div>
+								<div class="text-2xl font-bold text-gray-800">{count}</div>
+								<div class="text-sm text-gray-500">{percentage}%</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Streak Info -->
+				<div class="bg-white rounded-lg shadow-md p-6 mb-8">
+					<h2 class="text-2xl font-bold text-gray-800 mb-4">Streak Information</h2>
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+						<div class="text-center">
+							<div class="text-3xl font-bold text-green-600 mb-2">{stats.currentStreak}</div>
+							<div class="text-gray-600">Current Streak</div>
+						</div>
+						<div class="text-center">
+							<div class="text-3xl font-bold text-purple-600 mb-2">{stats.bestStreak}</div>
+							<div class="text-gray-600">Best Streak</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Recent Performance -->
+				{#if stats.recentCompletions.length > 0}
+					<div class="bg-white rounded-lg shadow-md p-6">
+						<h2 class="text-2xl font-bold text-gray-800 mb-4">Recent Performance</h2>
+						<div class="space-y-3">
+							{#each stats.recentCompletions as completion}
+								<div class="flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0">
+									<div>
+										<span class="font-medium">{formatDate(completion.date)}</span>
+									</div>
+									<div class="flex items-center gap-3">
+										<span class="text-gray-600">{completion.guessCount} guess{completion.guessCount === 1 ? '' : 'es'}</span>
+										<span class="px-2 py-1 rounded text-sm font-semibold {getGradeColor(completion.grade)}">
+											{completion.grade}
+										</span>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<AuthModal bind:isOpen={authModalOpen} anonymousId={""} />

tests/signin-migration-unit.test.ts

@@ -0,0 +1,245 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+
+describe('Signin Migration Logic (Unit Tests)', () => {
+	
+	// Test the deduplication algorithm independently
+	it('should correctly identify and remove duplicates keeping earliest', () => {
+		// Mock completion data structure
+		type MockCompletion = {
+			id: string;
+			anonymousId: string;
+			date: string;
+			guessCount: number;
+			completedAt: Date;
+		};
+
+		// Test data: multiple completions on same date
+		const allUserCompletions: MockCompletion[] = [
+			{
+				id: 'comp1',
+				anonymousId: 'user123',
+				date: '2024-01-01',
+				guessCount: 4,
+				completedAt: new Date('2024-01-01T08:00:00Z') // Earliest
+			},
+			{
+				id: 'comp2', 
+				anonymousId: 'user123',
+				date: '2024-01-01',
+				guessCount: 2,
+				completedAt: new Date('2024-01-01T14:00:00Z') // Later
+			},
+			{
+				id: 'comp3',
+				anonymousId: 'user123',
+				date: '2024-01-01',
+				guessCount: 6,
+				completedAt: new Date('2024-01-01T20:00:00Z') // Latest
+			},
+			{
+				id: 'comp4',
+				anonymousId: 'user123',
+				date: '2024-01-02',
+				guessCount: 3,
+				completedAt: new Date('2024-01-02T09:00:00Z') // Unique date
+			}
+		];
+
+		// Implement the deduplication logic from signin server action
+		const dateGroups = new Map<string, MockCompletion[]>();
+		for (const completion of allUserCompletions) {
+			const date = completion.date;
+			if (!dateGroups.has(date)) {
+				dateGroups.set(date, []);
+			}
+			dateGroups.get(date)!.push(completion);
+		}
+
+		// Process dates with duplicates
+		const duplicateIds: string[] = [];
+		const keptEntries: MockCompletion[] = [];
+		
+		for (const [date, completions] of dateGroups) {
+			if (completions.length > 1) {
+				// Sort by completedAt timestamp (earliest first)
+				completions.sort((a, b) => a.completedAt.getTime() - b.completedAt.getTime());
+				
+				// Keep the first (earliest), mark the rest for deletion
+				const toKeep = completions[0];
+				const toDelete = completions.slice(1);
+				
+				keptEntries.push(toKeep);
+				duplicateIds.push(...toDelete.map(c => c.id));
+			} else {
+				// Single entry for this date, keep it
+				keptEntries.push(completions[0]);
+			}
+		}
+
+		// Verify the logic worked correctly
+		expect(duplicateIds).toHaveLength(2); // comp2 and comp3 should be deleted
+		expect(duplicateIds).toContain('comp2');
+		expect(duplicateIds).toContain('comp3');
+		expect(duplicateIds).not.toContain('comp1'); // comp1 should be kept (earliest)
+		expect(duplicateIds).not.toContain('comp4'); // comp4 should be kept (unique date)
+
+		// Verify kept entries
+		expect(keptEntries).toHaveLength(2);
+		
+		// Check that the earliest entry for 2024-01-01 was kept
+		const jan1Entry = keptEntries.find(e => e.date === '2024-01-01');
+		expect(jan1Entry).toBeTruthy();
+		expect(jan1Entry!.id).toBe('comp1'); // Earliest timestamp
+		expect(jan1Entry!.guessCount).toBe(4);
+		expect(jan1Entry!.completedAt.getTime()).toBe(new Date('2024-01-01T08:00:00Z').getTime());
+
+		// Check that unique date entry was preserved
+		const jan2Entry = keptEntries.find(e => e.date === '2024-01-02');
+		expect(jan2Entry).toBeTruthy();
+		expect(jan2Entry!.id).toBe('comp4');
+	});
+
+	it('should handle no duplicates correctly', () => {
+		type MockCompletion = {
+			id: string;
+			anonymousId: string;
+			date: string;
+			guessCount: number;
+			completedAt: Date;
+		};
+
+		// Test data: all unique dates
+		const allUserCompletions: MockCompletion[] = [
+			{
+				id: 'comp1',
+				anonymousId: 'user123',
+				date: '2024-01-01',
+				guessCount: 4,
+				completedAt: new Date('2024-01-01T08:00:00Z')
+			},
+			{
+				id: 'comp2',
+				anonymousId: 'user123', 
+				date: '2024-01-02',
+				guessCount: 2,
+				completedAt: new Date('2024-01-02T14:00:00Z')
+			}
+		];
+
+		// Run deduplication logic
+		const dateGroups = new Map<string, MockCompletion[]>();
+		for (const completion of allUserCompletions) {
+			if (!dateGroups.has(completion.date)) {
+				dateGroups.set(completion.date, []);
+			}
+			dateGroups.get(completion.date)!.push(completion);
+		}
+
+		const duplicateIds: string[] = [];
+		for (const [date, completions] of dateGroups) {
+			if (completions.length > 1) {
+				completions.sort((a, b) => a.completedAt.getTime() - b.completedAt.getTime());
+				const toDelete = completions.slice(1);
+				duplicateIds.push(...toDelete.map(c => c.id));
+			}
+		}
+
+		// Should find no duplicates
+		expect(duplicateIds).toHaveLength(0);
+	});
+
+	it('should handle edge case with same timestamp', () => {
+		type MockCompletion = {
+			id: string;
+			anonymousId: string;
+			date: string;
+			guessCount: number;
+			completedAt: Date;
+		};
+
+		// Edge case: same completion time (very unlikely but possible)
+		const sameTime = new Date('2024-01-01T08:00:00Z');
+		const allUserCompletions: MockCompletion[] = [
+			{
+				id: 'comp1',
+				anonymousId: 'user123',
+				date: '2024-01-01',
+				guessCount: 3,
+				completedAt: sameTime
+			},
+			{
+				id: 'comp2',
+				anonymousId: 'user123',
+				date: '2024-01-01', 
+				guessCount: 5,
+				completedAt: sameTime
+			}
+		];
+
+		// Run deduplication logic
+		const dateGroups = new Map<string, MockCompletion[]>();
+		for (const completion of allUserCompletions) {
+			if (!dateGroups.has(completion.date)) {
+				dateGroups.set(completion.date, []);
+			}
+			dateGroups.get(completion.date)!.push(completion);
+		}
+
+		const duplicateIds: string[] = [];
+		for (const [date, completions] of dateGroups) {
+			if (completions.length > 1) {
+				completions.sort((a, b) => a.completedAt.getTime() - b.completedAt.getTime());
+				const toDelete = completions.slice(1);
+				duplicateIds.push(...toDelete.map(c => c.id));
+			}
+		}
+
+		// Should still remove one duplicate (deterministically based on array order)
+		expect(duplicateIds).toHaveLength(1);
+		// Since they have the same timestamp, it keeps the first one in the sorted array
+		expect(duplicateIds[0]).toBe('comp2'); // Second entry gets removed
+	});
+
+	it('should validate migration condition logic', () => {
+		// Test the condition check that determines when migration should occur
+		const testCases = [
+			{ 
+				anonymousId: 'device2-id',
+				userId: 'device1-id',
+				shouldMigrate: true,
+				description: 'Different IDs should trigger migration'
+			},
+			{
+				anonymousId: 'same-id',
+				userId: 'same-id', 
+				shouldMigrate: false,
+				description: 'Same IDs should not trigger migration'
+			},
+			{
+				anonymousId: null as any,
+				userId: 'user-id',
+				shouldMigrate: false,
+				description: 'Null anonymous ID should not trigger migration'
+			},
+			{
+				anonymousId: undefined as any,
+				userId: 'user-id',
+				shouldMigrate: false,
+				description: 'Undefined anonymous ID should not trigger migration'
+			},
+			{
+				anonymousId: '',
+				userId: 'user-id', 
+				shouldMigrate: false,
+				description: 'Empty anonymous ID should not trigger migration'
+			}
+		];
+
+		for (const testCase of testCases) {
+			// This is the exact condition from signin/+page.server.ts
+			const shouldMigrate = !!(testCase.anonymousId && testCase.anonymousId !== testCase.userId);
+			
+			expect(shouldMigrate).toBe(testCase.shouldMigrate);
+		}
+	});
+});

tests/signin-migration.test.ts

@@ -0,0 +1,287 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { testDb as db } from '../src/lib/server/db/test';
+import { user, session, dailyCompletions } from '../src/lib/server/db/schema';
+import * as auth from '../src/lib/server/auth.test';
+import { eq, inArray } from 'drizzle-orm';
+import crypto from 'node:crypto';
+
+// Test helper functions
+function generateTestUUID() {
+	return crypto.randomUUID();
+}
+
+async function createTestUser(anonymousId: string, email: string, password: string = 'testpass123') {
+	const passwordHash = await auth.hashPassword(password);
+	const testUser = await auth.createUser(anonymousId, email, passwordHash, 'Test', 'User');
+	return testUser;
+}
+
+async function createTestCompletion(anonymousId: string, date: string, guessCount: number, completedAt: Date) {
+	const completion = {
+		id: generateTestUUID(),
+		anonymousId,
+		date,
+		guessCount,
+		completedAt
+	};
+	await db.insert(dailyCompletions).values(completion);
+	return completion;
+}
+
+async function clearTestData() {
+	// Clear test data in reverse dependency order
+	await db.delete(session);
+	await db.delete(dailyCompletions);
+	await db.delete(user);
+}
+
+describe('Signin Stats Migration', () => {
+	beforeEach(async () => {
+		await clearTestData();
+	});
+
+	afterEach(async () => {
+		await clearTestData();
+	});
+
+	it('should migrate stats from local anonymous ID to user ID on signin', async () => {
+		// Setup: Create user with device 1 anonymous ID
+		const device1AnonymousId = generateTestUUID();
+		const device2AnonymousId = generateTestUUID();
+		const email = 'test@example.com';
+		
+		const testUser = await createTestUser(device1AnonymousId, email);
+		
+		// Add some completions for device 1 (user's original device)
+		await createTestCompletion(device1AnonymousId, '2024-01-01', 3, new Date('2024-01-01T08:00:00Z'));
+		await createTestCompletion(device1AnonymousId, '2024-01-02', 5, new Date('2024-01-02T09:00:00Z'));
+		
+		// Add some completions for device 2 (before signin)
+		await createTestCompletion(device2AnonymousId, '2024-01-03', 2, new Date('2024-01-03T10:00:00Z'));
+		await createTestCompletion(device2AnonymousId, '2024-01-04', 4, new Date('2024-01-04T11:00:00Z'));
+		
+		// Verify initial state
+		const initialDevice1Stats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, device1AnonymousId));
+		const initialDevice2Stats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, device2AnonymousId));
+			
+		expect(initialDevice1Stats).toHaveLength(2);
+		expect(initialDevice2Stats).toHaveLength(2);
+		
+		// Simulate signin action - this is what happens in signin/+page.server.ts
+		const user = await auth.getUserByEmail(email);
+		expect(user).toBeTruthy();
+		
+		// Migrate stats (simulating the signin logic)
+		if (device2AnonymousId && device2AnonymousId !== user!.id) {
+			// Update all daily completions from device2 anonymous ID to user's ID
+			await db
+				.update(dailyCompletions)
+				.set({ anonymousId: user!.id })
+				.where(eq(dailyCompletions.anonymousId, device2AnonymousId));
+		}
+		
+		// Verify migration worked
+		const finalUserStats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, user!.id));
+		const remainingDevice2Stats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, device2AnonymousId));
+			
+		expect(finalUserStats).toHaveLength(4); // All 4 completions now under user ID
+		expect(remainingDevice2Stats).toHaveLength(0); // No more completions under device2 ID
+		
+		// Verify the actual data is correct
+		const dates = finalUserStats.map(c => c.date).sort();
+		expect(dates).toEqual(['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04']);
+	});
+
+	it('should deduplicate entries for same date keeping earliest completion', async () => {
+		// Setup: User played same day on both devices
+		const device1AnonymousId = generateTestUUID();
+		const device2AnonymousId = generateTestUUID();
+		const email = 'test@example.com';
+		
+		const testUser = await createTestUser(device1AnonymousId, email);
+		
+		// Both devices played on same date - device1 played earlier and better
+		const date = '2024-01-01';
+		const earlierTime = new Date('2024-01-01T08:00:00Z');
+		const laterTime = new Date('2024-01-01T14:00:00Z');
+		
+		await createTestCompletion(device1AnonymousId, date, 3, earlierTime); // Better score, earlier
+		await createTestCompletion(device2AnonymousId, date, 5, laterTime);   // Worse score, later
+		
+		// Also add unique dates to ensure they're preserved
+		await createTestCompletion(device1AnonymousId, '2024-01-02', 4, new Date('2024-01-02T09:00:00Z'));
+		await createTestCompletion(device2AnonymousId, '2024-01-03', 2, new Date('2024-01-03T10:00:00Z'));
+		
+		// Migrate stats
+		const user = await auth.getUserByEmail(email);
+		await db
+			.update(dailyCompletions)
+			.set({ anonymousId: user!.id })
+			.where(eq(dailyCompletions.anonymousId, device2AnonymousId));
+		
+		// Implement deduplication logic (from signin server action)
+		const allUserCompletions = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, user!.id));
+
+		// Group by date to find duplicates
+		const dateGroups = new Map<string, typeof allUserCompletions>();
+		for (const completion of allUserCompletions) {
+			const date = completion.date;
+			if (!dateGroups.has(date)) {
+				dateGroups.set(date, []);
+			}
+			dateGroups.get(date)!.push(completion);
+		}
+
+		// Process dates with duplicates
+		const duplicateIds: string[] = [];
+		for (const [date, completions] of dateGroups) {
+			if (completions.length > 1) {
+				// Sort by completedAt timestamp (earliest first)
+				completions.sort((a, b) => a.completedAt.getTime() - b.completedAt.getTime());
+				
+				// Keep the first (earliest), mark the rest for deletion
+				const toDelete = completions.slice(1);
+				duplicateIds.push(...toDelete.map(c => c.id));
+			}
+		}
+
+		// Delete duplicate entries
+		if (duplicateIds.length > 0) {
+			await db
+				.delete(dailyCompletions)
+				.where(inArray(dailyCompletions.id, duplicateIds));
+		}
+		
+		// Verify deduplication worked correctly
+		const finalStats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, user!.id));
+			
+		expect(finalStats).toHaveLength(3); // One duplicate removed
+		
+		// Verify the correct entry was kept for the duplicate date
+		const duplicateDateEntry = finalStats.find(c => c.date === date);
+		expect(duplicateDateEntry).toBeTruthy();
+		expect(duplicateDateEntry!.guessCount).toBe(3); // Better score kept
+		expect(duplicateDateEntry!.completedAt.getTime()).toBe(earlierTime.getTime()); // Earlier time kept
+		
+		// Verify unique dates are preserved
+		const allDates = finalStats.map(c => c.date).sort();
+		expect(allDates).toEqual(['2024-01-01', '2024-01-02', '2024-01-03']);
+	});
+
+	it('should handle no migration when anonymous ID matches user ID', async () => {
+		// Setup: User signing in from same device they signed up on
+		const anonymousId = generateTestUUID();
+		const email = 'test@example.com';
+		
+		const testUser = await createTestUser(anonymousId, email);
+		
+		// Add some completions
+		await createTestCompletion(anonymousId, '2024-01-01', 3, new Date('2024-01-01T08:00:00Z'));
+		await createTestCompletion(anonymousId, '2024-01-02', 5, new Date('2024-01-02T09:00:00Z'));
+		
+		// Verify initial state
+		const initialStats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, anonymousId));
+		expect(initialStats).toHaveLength(2);
+		
+		// Simulate signin with same anonymous ID (no migration needed)
+		const user = await auth.getUserByEmail(email);
+		
+		// Migration logic should skip when IDs match
+		const shouldMigrate = anonymousId && anonymousId !== user!.id;
+		expect(shouldMigrate).toBe(false);
+		
+		// Verify no changes
+		const finalStats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, anonymousId));
+		expect(finalStats).toHaveLength(2);
+		expect(finalStats[0].anonymousId).toBe(anonymousId);
+	});
+
+	it('should handle multiple duplicates for same date correctly', async () => {
+		// Edge case: User played same date on 3+ devices
+		const device1AnonymousId = generateTestUUID();
+		const device2AnonymousId = generateTestUUID();
+		const device3AnonymousId = generateTestUUID();
+		const email = 'test@example.com';
+		
+		const testUser = await createTestUser(device1AnonymousId, email);
+		
+		const date = '2024-01-01';
+		// Three completions on same date at different times
+		await createTestCompletion(device1AnonymousId, date, 4, new Date('2024-01-01T08:00:00Z')); // Earliest
+		await createTestCompletion(device2AnonymousId, date, 2, new Date('2024-01-01T14:00:00Z')); // Middle
+		await createTestCompletion(device3AnonymousId, date, 6, new Date('2024-01-01T20:00:00Z')); // Latest
+		
+		// Migrate all to user ID
+		const user = await auth.getUserByEmail(email);
+		await db
+			.update(dailyCompletions)
+			.set({ anonymousId: user!.id })
+			.where(eq(dailyCompletions.anonymousId, device2AnonymousId));
+		await db
+			.update(dailyCompletions)
+			.set({ anonymousId: user!.id })
+			.where(eq(dailyCompletions.anonymousId, device3AnonymousId));
+		
+		// Implement deduplication
+		const allUserCompletions = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, user!.id));
+
+		const dateGroups = new Map<string, typeof allUserCompletions>();
+		for (const completion of allUserCompletions) {
+			if (!dateGroups.has(completion.date)) {
+				dateGroups.set(completion.date, []);
+			}
+			dateGroups.get(completion.date)!.push(completion);
+		}
+
+		const duplicateIds: string[] = [];
+		for (const [_, completions] of dateGroups) {
+			if (completions.length > 1) {
+				completions.sort((a, b) => a.completedAt.getTime() - b.completedAt.getTime());
+				const toDelete = completions.slice(1);
+				duplicateIds.push(...toDelete.map(c => c.id));
+			}
+		}
+
+		// Delete duplicates
+		for (const id of duplicateIds) {
+			await db.delete(dailyCompletions).where(eq(dailyCompletions.id, id));
+		}
+		
+		// Verify only earliest kept
+		const finalStats = await db
+			.select()
+			.from(dailyCompletions)
+			.where(eq(dailyCompletions.anonymousId, user!.id));
+			
+		expect(finalStats).toHaveLength(1); // 2 duplicates removed
+		expect(finalStats[0].guessCount).toBe(4); // First device's score
+		expect(finalStats[0].completedAt.getTime()).toBe(new Date('2024-01-01T08:00:00Z').getTime());
+	});
+});

todo.md

@@ -1,21 +1,33 @@
 # in progress
 
-- root menu: classic / imposter mode / impossible mode (complete today's classic and imposter modes to unlock)
 
 # todo
 
+- login
+- login route
+
 - impossible mode (1904 greek bible) three guesses only.
 
   - share both classic and impossible mode with both buttons
 
-- add imposter mode
+- improve imposter mode
+
+- Show new/old testament after 3 guesses and section after 7 guesses
+- Add sections for "first letter", "Canonical/deutero", etc...
+
+- How do you balance rewarding knowledge vs incentivising learning?
+
 
 - instructions
 
   - classic mode: identify what book the verse is from (e.g. Genesis, John, Revelations...) in as few guesses as possible.
   - imposter mode: out of four options, identify the verse that is not in the Bible
+  - OR out of four options, identify the verse that is not in the same book as the other three options
+  - OR, out of four options, drag them into the
   - impossible mode: identify which book of the bible the verse is from in less than three guesses.
 
+- The gambling aspect of hoping you get a verse you already know is VERY strong
+
 - add login + saved stats + streak etc.
 
 - add deuterocanonical books
@@ -47,6 +59,45 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
 
 # done
 
+## february 2nd
+
+- created rss feed
+- fixed "first letter" clue edge cases
+- updated ranking formula
+
+## january 28th
+
+- add percentile stats, update chapter guess UI
+- fixed middle statline (removed meaningless %)
+- added instructions
+- added email button
+- added test buttons for 3.0 UI/UX
+- package upgrades
+
+## january 26th
+
+- Make the UI more "wordle-like"
+- added deployment script (./deploy.sh)
+- added bluesky button
+- added "first letter" column
+- added imposter mode, v0.1 (mom likes it) but needs work
+
+## january 5th
+
+- created Imposter Mode with four options, identify the verse that is not in the same book as the other three. Needs more testing...
+- Verses ending in semicolons, commas, etc. will be replaced with "..."
+
+## january 4th
+
+- For bonus points: guess the verse/psalm number
+- major UI styling revamp
+
+-- 2026 --
+
+## december 30th
+
+- merged the embeddings/similarity route into production
+
 ## december 27th
 
 - add event log to submitting first-guess or correct-guess to umami (to make bounce rate more accurate)