diff --git a/spike/shots.mjs b/spike/shots.mjs
deleted file mode 100644
index 7c07005..0000000
--- a/spike/shots.mjs
+++ /dev/null
@@ -1,25 +0,0 @@
-// Throwaway visual-diff helper for the Tailwind migration branch.
-// Usage: node spike/shots.mjs <label>   e.g. `node spike/shots.mjs before`
-import { chromium } from "playwright";
-
-const label = process.argv[2] || "shot";
-const base = "http://localhost:4321";
-const pages = [
-  { name: "index", url: "/" },
-  { name: "roulette", url: "/roulette?demo=1" },
-];
-
-const browser = await chromium.launch();
-const ctx = await browser.newContext({
-  viewport: { width: 700, height: 1100 },
-  deviceScaleFactor: 2,
-  reducedMotion: "reduce", // freeze entrance/spin animations for stable diffs
-});
-const page = await ctx.newPage();
-for (const p of pages) {
-  await page.goto(base + p.url, { waitUntil: "networkidle" });
-  await page.waitForTimeout(600);
-  await page.screenshot({ path: `/tmp/ddr-${p.name}-${label}.png`, fullPage: true });
-  console.log(`saved /tmp/ddr-${p.name}-${label}.png`);
-}
-await browser.close();
diff --git a/src/lib/daily.ts b/src/lib/daily.ts
index d88e2b6..6dbbf24 100644
--- a/src/lib/daily.ts
+++ b/src/lib/daily.ts
@@ -47,11 +47,40 @@ export async function validateToken(token: string): Promise<boolean> {
 }
 
 // Response shape per OpenAPI: { data: BookmarkedPost[], pagination: { cursor, hasNextPage } }
+// `total` is read defensively: the current API does not document it, but if a
+// future version returns it we can report an exact count from a single page.
 type BookmarksPage = {
   data: Bookmark[];
-  pagination?: { cursor?: string | null; hasNextPage?: boolean };
+  pagination?: { cursor?: string | null; hasNextPage?: boolean; total?: number };
+  total?: number;
 };
 
+/**
+ * Cheap chamber tally for the homepage. Fetches a single page instead of
+ * paginating the whole pile (which `listAllBookmarks` would do just to count).
+ * Returns an exact count when the API exposes a total or the pile fits in one
+ * page; otherwise `exact` is false and the count is the first-page size, which
+ * the UI renders as "N+".
+ */
+export async function countBookmarks(
+  token: string,
+  opts: { unreadOnly?: boolean } = {},
+): Promise<{ count: number; exact: boolean }> {
+  const url = new URL(`${BASE}/bookmarks/`);
+  url.searchParams.set("limit", "50");
+  if (opts.unreadOnly) url.searchParams.set("unreadOnly", "true");
+
+  const res = await fetch(url, { headers: authHeaders(token) });
+  if (!res.ok) throw new Error(`countBookmarks failed: ${res.status}`);
+
+  const body = (await res.json()) as BookmarksPage;
+  const total = body.pagination?.total ?? body.total;
+  if (typeof total === "number") return { count: total, exact: true };
+
+  const items = body.data ?? [];
+  return { count: items.length, exact: !(body.pagination?.hasNextPage ?? false) };
+}
+
 /** Fetches one page (max 50). `unreadOnly` targets the dead-weight pile we want to cull. */
 export async function listBookmarks(
   token: string,
diff --git a/src/pages/api/bookmarks/count.ts b/src/pages/api/bookmarks/count.ts
new file mode 100644
index 0000000..5597171
--- /dev/null
+++ b/src/pages/api/bookmarks/count.ts
@@ -0,0 +1,22 @@
+import type { APIRoute } from "astro";
+import { countBookmarks } from "../../../lib/daily";
+import { getToken } from "../../../lib/session";
+
+// GET /api/bookmarks/count?unreadOnly=true — a lightweight tally for the
+// homepage "in the chamber" counter. Unlike /api/bookmarks, this hits daily.dev
+// once (a single page) instead of paginating the whole pile just to count.
+export const GET: APIRoute = async ({ url, cookies }) => {
+  const token = getToken(cookies);
+  if (!token) return new Response(JSON.stringify({ error: "Not signed in" }), { status: 401 });
+
+  const unreadOnly = url.searchParams.get("unreadOnly") === "true";
+  try {
+    const { count, exact } = await countBookmarks(token, { unreadOnly });
+    return new Response(JSON.stringify({ count, exact }), {
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (err) {
+    console.error("[bookmarks:count] ", err);
+    return new Response(JSON.stringify({ error: "Failed to count bookmarks" }), { status: 502 });
+  }
+};
diff --git a/src/pages/index.astro b/src/pages/index.astro
index bf974c1..cc5e7f7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -82,9 +82,13 @@ const profile = await currentUser(Astro.cookies);
 
   const countEl = document.getElementById("bm-count");
   if (countEl) {
-    fetch("/api/bookmarks")
+    // Lightweight count endpoint: one daily.dev call, not a full paginated load.
+    fetch("/api/bookmarks/count")
       .then((r) => r.json())
-      .then((d) => { countEl.textContent = String(d.items?.length ?? 0); })
+      .then((d) => {
+        const n = d.count ?? 0;
+        countEl.textContent = d.exact ? String(n) : `${n}+`;
+      })
       .catch(() => { countEl.textContent = "?"; });
   }
 </script>
diff --git a/src/pages/roulette.astro b/src/pages/roulette.astro
index aa16fb4..5593494 100644
--- a/src/pages/roulette.astro
+++ b/src/pages/roulette.astro
@@ -1,7 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import { currentUser } from "../lib/auth";
-import { MOCK_BOOKMARKS } from "../lib/mock";
 
 const isDemo = Astro.url.searchParams.get("demo") === "1";
 const profile = await currentUser(Astro.cookies);
@@ -11,7 +10,6 @@ if (!isDemo && !profile) {
 }
 
 const mode = isDemo ? "demo" : "real";
-const mockJson = JSON.stringify(MOCK_BOOKMARKS);
 ---
 
 <Layout title="Bookmarks Roulette · daily.dev Roulette" profile={profile}>
@@ -20,7 +18,7 @@ const mockJson = JSON.stringify(MOCK_BOOKMARKS);
     {isDemo ? "Demo town — no real bookmarks were harmed." : "Real bookmarks, real bullets. No do-overs."}
   </p>
 
-  <section class="stage" id="stage">
+  <section class="stage" id="stage" data-mode={mode}>
     <button class="mute" id="mute" title="Toggle sound" aria-label="Toggle sound">🔊</button>
     <div class="stats">
       <div>in chamber<b id="stat-chamber">0</b></div>
@@ -75,323 +73,9 @@ const mockJson = JSON.stringify(MOCK_BOOKMARKS);
   </section>
 </Layout>
 
-<script define:vars={{ mode, mockJson }}>
-  const MOCK = JSON.parse(mockJson);
-  const STORAGE_KEY = "ddr_progress";
-
-  const state = { mode, chamber: [], killed: 0, survived: 0, total: 0, current: null };
-  let cylRotation = 0;
-
-  const $ = (id) => document.getElementById(id);
-  const show = (el) => el.classList.remove("hidden");
-  const hide = (el) => el.classList.add("hidden");
-
-  function saveState() {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify({
-        mode: state.mode, chamber: state.chamber, current: state.current,
-        killed: state.killed, survived: state.survived, total: state.total,
-      }));
-    } catch {}
-  }
-  function clearState() { try { localStorage.removeItem(STORAGE_KEY); } catch {} }
-  function loadState() {
-    try {
-      const s = JSON.parse(localStorage.getItem(STORAGE_KEY) || "null");
-      return s && Array.isArray(s.chamber) && s.mode === state.mode ? s : null;
-    } catch { return null; }
-  }
-
-  function renderStats() {
-    $("stat-chamber").textContent = state.chamber.length;
-    $("stat-killed").textContent = state.killed;
-    $("stat-survived").textContent = state.survived;
-  }
-
-  function renderCard(b) {
-    $("card-source").textContent = "alias: " + (b.source?.name || "unknown");
-    $("card-title").textContent = b.title || b.url || "Untitled bookmark";
-    $("card-summary").textContent = b.summary || "";
-    const when = b.bookmarkedAt ? new Date(b.bookmarkedAt).toLocaleDateString() : "";
-    $("card-meta").textContent = [b.readTime ? `${b.readTime} min read` : "", when ? `bookmarked ${when}` : ""].filter(Boolean).join(" · ");
-  }
-
-  // Re-trigger an entrance animation each time the poster appears.
-  function slam(el) { el.classList.remove("slam-in"); void el.offsetWidth; el.classList.add("slam-in"); }
-
-  // Friendly toast that pops above the gun. kind: "spare" | "miss" | "kill".
-  let toastTimer;
-  function showToast(msg, kind) {
-    const t = $("toast");
-    t.className = "toast";
-    t.textContent = msg;
-    void t.offsetWidth;
-    t.classList.add("show");
-    if (kind) t.classList.add("toast--" + kind);
-    clearTimeout(toastTimer);
-    toastTimer = setTimeout(() => t.classList.remove("show"), 2900);
-  }
-
-  // --- synthesized sound (Web Audio, no asset files) ---
-  let muted = false;
-  try { muted = localStorage.getItem("ddr_muted") === "1"; } catch {}
-  let audioCtx;
-  function ac() {
-    if (!audioCtx) {
-      const AC = window.AudioContext || window.webkitAudioContext;
-      if (AC) audioCtx = new AC();
-    }
-    audioCtx?.resume?.();
-    return audioCtx;
-  }
-  // a short mechanical tick
-  function tick(ctx, t, freq, gain) {
-    const o = ctx.createOscillator(), g = ctx.createGain();
-    o.type = "square"; o.frequency.value = freq;
-    g.gain.setValueAtTime(0, t);
-    g.gain.linearRampToValueAtTime(gain, t + 0.001);
-    g.gain.exponentialRampToValueAtTime(0.0001, t + 0.045);
-    o.connect(g).connect(ctx.destination);
-    o.start(t); o.stop(t + 0.06);
-  }
-  function playSpin() {
-    if (muted) return; const ctx = ac(); if (!ctx) return;
-    const t0 = ctx.currentTime;
-    let t = t0, gap = 0.028;            // ratchet that decelerates with the cylinder
-    while (t < t0 + 2.0) { tick(ctx, t, 1500, 0.16); t += gap; gap *= 1.13; }
-  }
-  function playClick() {
-    if (muted) return; const ctx = ac(); if (!ctx) return;
-    const t = ctx.currentTime;
-    tick(ctx, t, 900, 0.5);
-    tick(ctx, t + 0.05, 600, 0.3);
-  }
-  function playBang() {
-    if (muted) return; const ctx = ac(); if (!ctx) return;
-    const t = ctx.currentTime, dur = 0.4;
-    const buf = ctx.createBuffer(1, Math.floor(ctx.sampleRate * dur), ctx.sampleRate);
-    const data = buf.getChannelData(0);
-    for (let i = 0; i < data.length; i++) data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 2);
-    const src = ctx.createBufferSource(); src.buffer = buf;
-    const lp = ctx.createBiquadFilter();
-    lp.type = "lowpass"; lp.frequency.setValueAtTime(2200, t);
-    lp.frequency.exponentialRampToValueAtTime(200, t + 0.3);
-    const g = ctx.createGain();
-    g.gain.setValueAtTime(0.9, t); g.gain.exponentialRampToValueAtTime(0.001, t + dur);
-    src.connect(lp).connect(g).connect(ctx.destination); src.start(t);
-    const o = ctx.createOscillator(), og = ctx.createGain(); // low thump
-    o.type = "sine"; o.frequency.setValueAtTime(120, t); o.frequency.exponentialRampToValueAtTime(40, t + 0.2);
-    og.gain.setValueAtTime(0.7, t); og.gain.exponentialRampToValueAtTime(0.001, t + 0.26);
-    o.connect(og).connect(ctx.destination); o.start(t); o.stop(t + 0.3);
-  }
-
-  function startGame(bookmarks) {
-    state.chamber = bookmarks.slice();
-    state.killed = 0;
-    state.survived = 0;
-    state.total = bookmarks.length;
-    state.current = null;
-    hide($("over"));
-    if (state.chamber.length === 0) return gameOver();
-    hide($("verdict"));
-    show($("spin"));
-    renderStats();
-    saveState();
-  }
-
-  function resumeGame(s) {
-    state.chamber = s.chamber;
-    state.killed = s.killed;
-    state.survived = s.survived;
-    state.total = s.total;
-    state.current = s.current || null;
-    if (state.chamber.length === 0) return gameOver();
-    renderStats();
-    if (state.current) {
-      renderCard(state.current);
-      $("verdict-msg").textContent = "";
-      $("read").disabled = false;
-      $("kill").disabled = false;
-      show($("verdict"));
-      slam($("poster"));
-      hide($("spin"));
-    } else {
-      hide($("verdict"));
-      show($("spin"));
-    }
-  }
-
-  function spin() {
-    if (state.chamber.length === 0) return gameOver();
-    hide($("spin"));
-    hide($("verdict"));
-    $("round").classList.remove("show");
-    playSpin();
-    const cyl = $("cylinder");
-    cyl.classList.add("spinning");
-    // Snap to a whole chamber so the hammer always lands ON a chamber, not between two.
-    cylRotation += 1440 + Math.floor(Math.random() * CHAMBERS) * (360 / CHAMBERS);
-    cyl.style.transform = `rotate(${cylRotation}deg)`;
-    setTimeout(() => {
-      cyl.classList.remove("spinning");
-      const idx = Math.floor(Math.random() * state.chamber.length);
-      state.current = state.chamber[idx];
-      renderCard(state.current);
-      $("verdict-msg").textContent = "";
-      $("read").disabled = false;
-      $("kill").disabled = false;
-      show($("verdict"));
-      slam($("poster"));
-      saveState();
-    }, 2200);
-  }
-
-  function removeCurrent() {
-    state.chamber = state.chamber.filter((x) => x.id !== state.current.id);
-  }
-
-  const CHAMBERS = 6; // 1 live round in 6 — classic odds
-
-  function read() {
-    if (!state.current) return;
-    window.open(state.current.url, "_blank", "noopener");
-    removeCurrent();
-    state.survived++;
-    showToast("📖 Spared! Off you go to read it.", "spare");
-    afterVerdict();
-  }
-
-  // Pull the trigger: gamble. Bullet under the hammer (1/CHAMBERS) = it dies.
-  async function pullTrigger() {
-    if (!state.current || state.firing) return;
-    state.firing = true;
-    const b = state.current;
-    const hit = Math.floor(Math.random() * CHAMBERS) === 0;
-
-    $("read").disabled = true;
-    $("kill").disabled = true;
-    $("verdict-msg").textContent = "";
-
-    // hammer strike
-    const hammer = $("hammer");
-    hammer.classList.remove("fire"); void hammer.offsetWidth; hammer.classList.add("fire");
-
-    await wait(280); // wait for the hammer to fall (impact ~55% of the 0.5s anim)
-    if (hit) playBang(); else playClick();
-
-    if (!hit) {
-      // *click* — dodged. Advance the cylinder one notch.
-      cylRotation += 60;
-      $("cylinder").style.transform = `rotate(${cylRotation}deg)`;
-      removeCurrent();
-      state.survived++;
-      showToast("😮‍💨 Click! Empty chamber — it dodged the bullet.", "miss");
-      finishTrigger();
-      return;
-    }
-
-    // BANG. In real mode, actually delete now.
-    if (state.mode === "real") {
-      try {
-        const res = await fetch(`/api/bookmarks/${b.id}`, { method: "DELETE" });
-        if (!res.ok && res.status !== 204) {
-          const detail = await res.json().catch(() => ({}));
-          throw new Error(detail.error || res.status);
-        }
-      } catch (e) {
-        $("verdict-msg").textContent = "⚠️ The gun jammed: " + String(e.message || e);
-        $("read").disabled = false; $("kill").disabled = false;
-        state.firing = false;
-        return;
-      }
-    }
-
-    // reveal the live round in the firing chamber, then muzzle flash + recoil
-    $("round").classList.add("show");
-    const flash = $("flash");
-    flash.classList.remove("bang"); void flash.offsetWidth; flash.classList.add("bang");
-    const stage = $("stage");
-    stage.classList.remove("recoil"); void stage.offsetWidth; stage.classList.add("recoil");
-
-    removeCurrent();
-    state.killed++;
-    showToast(`💥 Bang! "${(b.title || "this one").slice(0, 32)}" didn't make it.`, "kill");
-    finishTrigger();
-  }
-
-  function finishTrigger() {
-    state.firing = false;
-    afterVerdict();
-  }
-
-  function wait(ms) { return new Promise((r) => setTimeout(r, ms)); }
-
-  function afterVerdict() {
-    renderStats();
-    state.current = null;
-    saveState();
-    setTimeout(() => {
-      hide($("verdict"));
-      if (state.chamber.length === 0) gameOver();
-      else show($("spin"));
-    }, 1300);
-  }
-
-  function gameOver() {
-    clearState();
-    hide($("verdict"));
-    hide($("spin"));
-    $("over-total").textContent = state.total;
-    $("over-killed").textContent = state.killed;
-    $("over-survived").textContent = state.survived;
-    show($("over"));
-  }
-
-  async function fetchReal() {
-    const res = await fetch("/api/bookmarks");
-    if (!res.ok) throw new Error("Could not load your bookmarks. Try signing in again.");
-    return (await res.json()).items ?? [];
-  }
-
-  function updateMute() { $("mute").textContent = muted ? "🔇" : "🔊"; }
-  $("mute").addEventListener("click", () => {
-    muted = !muted;
-    try { localStorage.setItem("ddr_muted", muted ? "1" : "0"); } catch {}
-    updateMute();
-    if (!muted) ac(); // unlock the audio context on unmute
-  });
-  updateMute();
-
-  $("spin").addEventListener("click", spin);
-  $("read").addEventListener("click", read);
-  $("kill").addEventListener("click", pullTrigger);
-  $("restart").addEventListener("click", async () => {
-    if (state.mode === "demo") return startGame(MOCK);
-    hide($("over"));
-    show($("loading"));
-    try { startGame(await fetchReal()); } finally { hide($("loading")); }
-  });
-
-  (async () => {
-    const saved = loadState();
-    if (saved) {
-      hide($("loading"));
-      resumeGame(saved);
-      return;
-    }
-    if (state.mode === "demo") {
-      hide($("loading"));
-      startGame(MOCK);
-    } else {
-      try {
-        startGame(await fetchReal());
-      } catch (e) {
-        $("loading").textContent = "⚠️ " + String(e.message || e);
-        return;
-      }
-      hide($("loading"));
-    }
-  })();
+<script>
+  import { initRoulette } from "../scripts/roulette";
+  initRoulette();
 </script>
 
 <style>
diff --git a/src/scripts/roulette.ts b/src/scripts/roulette.ts
new file mode 100644
index 0000000..300dec8
--- /dev/null
+++ b/src/scripts/roulette.ts
@@ -0,0 +1,415 @@
+// Client-side game logic for the Bookmarks Roulette (src/pages/roulette.astro).
+// Extracted from an inline `<script define:vars>` so it is typed, bundled and
+// testable. The page imports MOCK_BOOKMARKS directly (plain data, no server
+// deps) and passes the run mode via the stage's `data-mode` attribute.
+import type { Bookmark } from "../lib/daily";
+import { MOCK_BOOKMARKS } from "../lib/mock";
+
+type Mode = "demo" | "real";
+
+type GameState = {
+  mode: Mode;
+  chamber: Bookmark[];
+  killed: number;
+  survived: number;
+  total: number;
+  current: Bookmark | null;
+  firing: boolean;
+};
+
+type SavedState = Pick<GameState, "mode" | "chamber" | "current" | "killed" | "survived" | "total">;
+
+const STORAGE_KEY = "ddr_progress";
+const CHAMBERS = 6; // 1 live round in 6 — classic odds
+
+const $ = (id: string): HTMLElement => document.getElementById(id)!;
+const show = (el: HTMLElement) => el.classList.remove("hidden");
+const hide = (el: HTMLElement) => el.classList.add("hidden");
+const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));
+
+// Re-trigger an entrance animation each time an element (re)appears.
+function slam(el: HTMLElement) {
+  el.classList.remove("slam-in");
+  void el.offsetWidth;
+  el.classList.add("slam-in");
+}
+
+// a short mechanical tick
+function tick(ctx: AudioContext, t: number, freq: number, gain: number) {
+  const o = ctx.createOscillator(),
+    g = ctx.createGain();
+  o.type = "square";
+  o.frequency.value = freq;
+  g.gain.setValueAtTime(0, t);
+  g.gain.linearRampToValueAtTime(gain, t + 0.001);
+  g.gain.exponentialRampToValueAtTime(0.0001, t + 0.045);
+  o.connect(g).connect(ctx.destination);
+  o.start(t);
+  o.stop(t + 0.06);
+}
+
+async function fetchReal(): Promise<Bookmark[]> {
+  const res = await fetch("/api/bookmarks");
+  if (!res.ok) throw new Error("Could not load your bookmarks. Try signing in again.");
+  return ((await res.json()).items ?? []) as Bookmark[];
+}
+
+export function initRoulette(): void {
+  const stage = document.getElementById("stage");
+  if (!stage) return;
+  const mode: Mode = stage.dataset.mode === "real" ? "real" : "demo";
+
+  const state: GameState = {
+    mode,
+    chamber: [],
+    killed: 0,
+    survived: 0,
+    total: 0,
+    current: null,
+    firing: false,
+  };
+  let cylRotation = 0;
+
+  function saveState() {
+    try {
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({
+          mode: state.mode,
+          chamber: state.chamber,
+          current: state.current,
+          killed: state.killed,
+          survived: state.survived,
+          total: state.total,
+        }),
+      );
+    } catch {}
+  }
+  function clearState() {
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch {}
+  }
+  function loadState(): SavedState | null {
+    try {
+      const s = JSON.parse(localStorage.getItem(STORAGE_KEY) || "null") as SavedState | null;
+      return s && Array.isArray(s.chamber) && s.mode === state.mode ? s : null;
+    } catch {
+      return null;
+    }
+  }
+
+  function renderStats() {
+    $("stat-chamber").textContent = String(state.chamber.length);
+    $("stat-killed").textContent = String(state.killed);
+    $("stat-survived").textContent = String(state.survived);
+  }
+
+  function renderCard(b: Bookmark) {
+    $("card-source").textContent = "alias: " + (b.source?.name || "unknown");
+    $("card-title").textContent = b.title || b.url || "Untitled bookmark";
+    $("card-summary").textContent = b.summary || "";
+    const when = b.bookmarkedAt ? new Date(b.bookmarkedAt).toLocaleDateString() : "";
+    $("card-meta").textContent = [
+      b.readTime ? `${b.readTime} min read` : "",
+      when ? `bookmarked ${when}` : "",
+    ]
+      .filter(Boolean)
+      .join(" · ");
+  }
+
+  // Friendly toast that pops above the gun. kind: "spare" | "miss" | "kill".
+  let toastTimer: ReturnType<typeof setTimeout>;
+  function showToast(msg: string, kind?: "spare" | "miss" | "kill") {
+    const t = $("toast");
+    t.className = "toast";
+    t.textContent = msg;
+    void t.offsetWidth;
+    t.classList.add("show");
+    if (kind) t.classList.add("toast--" + kind);
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => t.classList.remove("show"), 2900);
+  }
+
+  // --- synthesized sound (Web Audio, no asset files) ---
+  let muted = false;
+  try {
+    muted = localStorage.getItem("ddr_muted") === "1";
+  } catch {}
+  let audioCtx: AudioContext | undefined;
+  function ac(): AudioContext | undefined {
+    if (!audioCtx) {
+      const AC = window.AudioContext || (window as any).webkitAudioContext;
+      if (AC) audioCtx = new AC();
+    }
+    audioCtx?.resume?.();
+    return audioCtx;
+  }
+  function playSpin() {
+    if (muted) return;
+    const ctx = ac();
+    if (!ctx) return;
+    const t0 = ctx.currentTime;
+    let t = t0,
+      gap = 0.028; // ratchet that decelerates with the cylinder
+    while (t < t0 + 2.0) {
+      tick(ctx, t, 1500, 0.16);
+      t += gap;
+      gap *= 1.13;
+    }
+  }
+  function playClick() {
+    if (muted) return;
+    const ctx = ac();
+    if (!ctx) return;
+    const t = ctx.currentTime;
+    tick(ctx, t, 900, 0.5);
+    tick(ctx, t + 0.05, 600, 0.3);
+  }
+  function playBang() {
+    if (muted) return;
+    const ctx = ac();
+    if (!ctx) return;
+    const t = ctx.currentTime,
+      dur = 0.4;
+    const buf = ctx.createBuffer(1, Math.floor(ctx.sampleRate * dur), ctx.sampleRate);
+    const data = buf.getChannelData(0);
+    for (let i = 0; i < data.length; i++)
+      data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 2);
+    const src = ctx.createBufferSource();
+    src.buffer = buf;
+    const lp = ctx.createBiquadFilter();
+    lp.type = "lowpass";
+    lp.frequency.setValueAtTime(2200, t);
+    lp.frequency.exponentialRampToValueAtTime(200, t + 0.3);
+    const g = ctx.createGain();
+    g.gain.setValueAtTime(0.9, t);
+    g.gain.exponentialRampToValueAtTime(0.001, t + dur);
+    src.connect(lp).connect(g).connect(ctx.destination);
+    src.start(t);
+    const o = ctx.createOscillator(),
+      og = ctx.createGain(); // low thump
+    o.type = "sine";
+    o.frequency.setValueAtTime(120, t);
+    o.frequency.exponentialRampToValueAtTime(40, t + 0.2);
+    og.gain.setValueAtTime(0.7, t);
+    og.gain.exponentialRampToValueAtTime(0.001, t + 0.26);
+    o.connect(og).connect(ctx.destination);
+    o.start(t);
+    o.stop(t + 0.3);
+  }
+
+  function startGame(bookmarks: Bookmark[]) {
+    state.chamber = bookmarks.slice();
+    state.killed = 0;
+    state.survived = 0;
+    state.total = bookmarks.length;
+    state.current = null;
+    hide($("over"));
+    if (state.chamber.length === 0) return gameOver();
+    hide($("verdict"));
+    show($("spin"));
+    renderStats();
+    saveState();
+  }
+
+  function resumeGame(s: SavedState) {
+    state.chamber = s.chamber;
+    state.killed = s.killed;
+    state.survived = s.survived;
+    state.total = s.total;
+    state.current = s.current || null;
+    if (state.chamber.length === 0) return gameOver();
+    renderStats();
+    if (state.current) {
+      renderCard(state.current);
+      $("verdict-msg").textContent = "";
+      ($("read") as HTMLButtonElement).disabled = false;
+      ($("kill") as HTMLButtonElement).disabled = false;
+      show($("verdict"));
+      slam($("poster"));
+      hide($("spin"));
+    } else {
+      hide($("verdict"));
+      show($("spin"));
+    }
+  }
+
+  function spin() {
+    if (state.chamber.length === 0) return gameOver();
+    hide($("spin"));
+    hide($("verdict"));
+    $("round").classList.remove("show");
+    playSpin();
+    const cyl = $("cylinder");
+    cyl.classList.add("spinning");
+    // Snap to a whole chamber so the hammer always lands ON a chamber, not between two.
+    cylRotation += 1440 + Math.floor(Math.random() * CHAMBERS) * (360 / CHAMBERS);
+    cyl.style.transform = `rotate(${cylRotation}deg)`;
+    setTimeout(() => {
+      cyl.classList.remove("spinning");
+      const idx = Math.floor(Math.random() * state.chamber.length);
+      state.current = state.chamber[idx];
+      renderCard(state.current);
+      $("verdict-msg").textContent = "";
+      ($("read") as HTMLButtonElement).disabled = false;
+      ($("kill") as HTMLButtonElement).disabled = false;
+      show($("verdict"));
+      slam($("poster"));
+      saveState();
+    }, 2200);
+  }
+
+  function removeCurrent() {
+    state.chamber = state.chamber.filter((x) => x.id !== state.current!.id);
+  }
+
+  function read() {
+    if (!state.current) return;
+    window.open(state.current.url, "_blank", "noopener");
+    removeCurrent();
+    state.survived++;
+    showToast("📖 Spared! Off you go to read it.", "spare");
+    afterVerdict();
+  }
+
+  // Pull the trigger: gamble. Bullet under the hammer (1/CHAMBERS) = it dies.
+  async function pullTrigger() {
+    if (!state.current || state.firing) return;
+    state.firing = true;
+    const b = state.current;
+    const hit = Math.floor(Math.random() * CHAMBERS) === 0;
+
+    ($("read") as HTMLButtonElement).disabled = true;
+    ($("kill") as HTMLButtonElement).disabled = true;
+    $("verdict-msg").textContent = "";
+
+    // hammer strike
+    const hammer = $("hammer");
+    hammer.classList.remove("fire");
+    void hammer.offsetWidth;
+    hammer.classList.add("fire");
+
+    await wait(280); // wait for the hammer to fall (impact ~55% of the 0.5s anim)
+    if (hit) playBang();
+    else playClick();
+
+    if (!hit) {
+      // *click* — dodged. Advance the cylinder one notch.
+      cylRotation += 60;
+      $("cylinder").style.transform = `rotate(${cylRotation}deg)`;
+      removeCurrent();
+      state.survived++;
+      showToast("😮‍💨 Click! Empty chamber — it dodged the bullet.", "miss");
+      finishTrigger();
+      return;
+    }
+
+    // BANG. In real mode, actually delete now.
+    if (state.mode === "real") {
+      try {
+        const res = await fetch(`/api/bookmarks/${b.id}`, { method: "DELETE" });
+        if (!res.ok && res.status !== 204) {
+          const detail = await res.json().catch(() => ({}));
+          throw new Error(detail.error || res.status);
+        }
+      } catch (e: any) {
+        $("verdict-msg").textContent = "⚠️ The gun jammed: " + String(e.message || e);
+        ($("read") as HTMLButtonElement).disabled = false;
+        ($("kill") as HTMLButtonElement).disabled = false;
+        state.firing = false;
+        return;
+      }
+    }
+
+    // reveal the live round in the firing chamber, then muzzle flash + recoil
+    $("round").classList.add("show");
+    const flash = $("flash");
+    flash.classList.remove("bang");
+    void flash.offsetWidth;
+    flash.classList.add("bang");
+    const stageEl = $("stage");
+    stageEl.classList.remove("recoil");
+    void stageEl.offsetWidth;
+    stageEl.classList.add("recoil");
+
+    removeCurrent();
+    state.killed++;
+    showToast(`💥 Bang! "${(b.title || "this one").slice(0, 32)}" didn't make it.`, "kill");
+    finishTrigger();
+  }
+
+  function finishTrigger() {
+    state.firing = false;
+    afterVerdict();
+  }
+
+  function afterVerdict() {
+    renderStats();
+    state.current = null;
+    saveState();
+    setTimeout(() => {
+      hide($("verdict"));
+      if (state.chamber.length === 0) gameOver();
+      else show($("spin"));
+    }, 1300);
+  }
+
+  function gameOver() {
+    clearState();
+    hide($("verdict"));
+    hide($("spin"));
+    $("over-total").textContent = String(state.total);
+    $("over-killed").textContent = String(state.killed);
+    $("over-survived").textContent = String(state.survived);
+    show($("over"));
+  }
+
+  function updateMute() {
+    $("mute").textContent = muted ? "🔇" : "🔊";
+  }
+  $("mute").addEventListener("click", () => {
+    muted = !muted;
+    try {
+      localStorage.setItem("ddr_muted", muted ? "1" : "0");
+    } catch {}
+    updateMute();
+    if (!muted) ac(); // unlock the audio context on unmute
+  });
+  updateMute();
+
+  $("spin").addEventListener("click", spin);
+  $("read").addEventListener("click", read);
+  $("kill").addEventListener("click", pullTrigger);
+  $("restart").addEventListener("click", async () => {
+    if (state.mode === "demo") return startGame(MOCK_BOOKMARKS);
+    hide($("over"));
+    show($("loading"));
+    try {
+      startGame(await fetchReal());
+    } finally {
+      hide($("loading"));
+    }
+  });
+
+  (async () => {
+    const saved = loadState();
+    if (saved) {
+      hide($("loading"));
+      resumeGame(saved);
+      return;
+    }
+    if (state.mode === "demo") {
+      hide($("loading"));
+      startGame(MOCK_BOOKMARKS);
+    } else {
+      try {
+        startGame(await fetchReal());
+      } catch (e: any) {
+        $("loading").textContent = "⚠️ " + String(e.message || e);
+        return;
+      }
+      hide($("loading"));
+    }
+  })();
+}