@funnycaptcha/embed 0.2.0 → 0.3.0

package/dist/embed.global.js

@@ -92,11 +92,12 @@ var FunnyCaptcha = (() => {
     return c.answer === userAnswer;
   }
   var STR = {
-    zh: { title: "\u8BF7\u8BA1\u7B97", placeholder: "\u8F93\u5165\u7B54\u6848", submit: "\u9A8C\u8BC1", fail: "\u7B54\u9519\u4E86\uFF0C\u6362\u4E00\u9898" },
-    en: { title: "Solve", placeholder: "Enter answer", submit: "Verify", fail: "Wrong, try again" }
+    zh: { title: "\u8BF7\u8BA1\u7B97", placeholder: "\u8F93\u5165\u7B54\u6848", submit: "\u9A8C\u8BC1", fail: "\u7B54\u9519\u4E86\uFF0C\u6362\u4E00\u9898", refresh: "\u5237\u65B0" },
+    en: { title: "Solve", placeholder: "Enter answer", submit: "Verify", fail: "Wrong, try again", refresh: "Refresh" }
   };
   function createMathInstance(container, config) {
     const t = STR[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -104,16 +105,36 @@ var FunnyCaptcha = (() => {
       current = generateChallenge();
       startTime = Date.now();
       container.innerHTML = `
-      <div class="fc-math">
+      <style>
+        .fc-math{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-math[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-math[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-math{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-math-q{display:block;font-size:14px;font-weight:600;color:var(--fc-text);margin-bottom:12px}
+        .fc-math-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+        .fc-math-input{flex:1;min-width:0;padding:8px 12px;font-size:14px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text);border-radius:8px;box-sizing:border-box;outline:none}
+        .fc-math-input:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
+        .fc-math-btn{padding:8px 16px;font-size:14px;border:1px solid var(--fc-accent);background:var(--fc-accent);color:#fff;border-radius:8px;cursor:pointer;transition:opacity .15s}
+        .fc-math-btn:hover{opacity:.9}
+        .fc-math-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-math-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+        .fc-math-msg{font-size:13px;min-height:18px;margin-top:10px;color:var(--fc-danger)}
+      </style>
+      <div class="fc-math" data-theme="${theme}">
         <label class="fc-math-q">${t.title}: ${current.question}</label>
-        <input class="fc-math-input" type="text" inputmode="numeric" placeholder="${t.placeholder}" />
-        <button class="fc-math-btn">${t.submit}</button>
+        <div class="fc-math-row">
+          <input class="fc-math-input" type="text" inputmode="numeric" placeholder="${t.placeholder}" />
+          <button class="fc-math-btn">${t.submit}</button>
+          <button class="fc-math-refresh">${t.refresh}</button>
+        </div>
         <div class="fc-math-msg"></div>
       </div>
     `;
       const btn = container.querySelector(".fc-math-btn");
       const input = container.querySelector(".fc-math-input");
       const msg = container.querySelector(".fc-math-msg");
+      const refreshBtn = container.querySelector(".fc-math-refresh");
+      refreshBtn.addEventListener("click", render2);
       btn.addEventListener("click", async () => {
         const val = Number(input.value);
         const success = verifyAnswer(current, val);
@@ -172,12 +193,16 @@ var FunnyCaptcha = (() => {
     zh: { placeholder: "\u8F93\u5165\u56FE\u4E2D\u5B57\u7B26", submit: "\u9A8C\u8BC1", fail: "\u770B\u4E0D\u6E05\uFF1F\u6362\u4E00\u5F20", refresh: "\u5237\u65B0" },
     en: { placeholder: "Type the text", submit: "Verify", fail: "Wrong? Try another", refresh: "Refresh" }
   };
-  function drawDistorted(canvas, code) {
+  function drawDistorted(canvas, code, surface, text, border) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "#f0f0f0";
+    ctx.fillStyle = surface;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
+    for (let i = 0; i < 80; i++) {
+      ctx.fillStyle = `rgba(0,0,0,${Math.random() * 0.12})`;
+      ctx.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 1.5, 1.5);
+    }
     const chars = code.split("");
     const step = canvas.width / (chars.length + 1);
     chars.forEach((ch, i) => {
@@ -187,22 +212,34 @@ var FunnyCaptcha = (() => {
       ctx.translate(x, y);
       ctx.rotate((Math.random() - 0.5) * 0.5);
       ctx.font = `${24 + Math.floor(Math.random() * 8)}px sans-serif`;
-      ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 40%)`;
+      ctx.fillStyle = text;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText(ch, 0, 0);
       ctx.restore();
     });
-    for (let i = 0; i < 4; i++) {
-      ctx.strokeStyle = `hsla(${Math.random() * 360}, 70%, 50%, 0.4)`;
+    for (let i = 0; i < 6; i++) {
+      ctx.strokeStyle = border;
+      ctx.lineWidth = 1 + Math.random() * 1.5;
       ctx.beginPath();
-      ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
-      ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
+      const x1 = Math.random() * canvas.width;
+      const y1 = Math.random() * canvas.height;
+      const x2 = Math.random() * canvas.width;
+      const y2 = Math.random() * canvas.height;
+      const cpx = Math.random() * canvas.width;
+      const cpy = Math.random() * canvas.height;
+      ctx.moveTo(x1, y1);
+      ctx.quadraticCurveTo(cpx, cpy, x2, y2);
       ctx.stroke();
     }
   }
+  function readVar(root, name, fallback) {
+    const v = getComputedStyle(root).getPropertyValue(name).trim();
+    return v || fallback;
+  }
   function createTextDistortInstance(container, config) {
     const t = STR2[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -210,16 +247,37 @@ var FunnyCaptcha = (() => {
       current = generateChallenge2();
       startTime = Date.now();
       container.innerHTML = `
-      <div class="fc-text">
-        <canvas class="fc-text-canvas" width="180" height="60"></canvas>
-        <button class="fc-text-refresh">${t.refresh}</button>
-        <input class="fc-text-input" placeholder="${t.placeholder}" />
-        <button class="fc-text-btn">${t.submit}</button>
+      <style>
+        .fc-text{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-text[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-text[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-text{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-text-canvas{display:block;width:100%;max-width:240px;height:60px;border-radius:8px;border:1px solid var(--fc-border);margin-bottom:10px}
+        .fc-text-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+        .fc-text-input{flex:1;min-width:0;padding:8px 12px;font-size:14px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text);border-radius:8px;box-sizing:border-box;outline:none}
+        .fc-text-input:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
+        .fc-text-btn{padding:8px 16px;font-size:14px;border:1px solid var(--fc-accent);background:var(--fc-accent);color:#fff;border-radius:8px;cursor:pointer;transition:opacity .15s}
+        .fc-text-btn:hover{opacity:.9}
+        .fc-text-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-text-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+        .fc-text-msg{font-size:13px;min-height:18px;margin-top:10px;color:var(--fc-danger)}
+      </style>
+      <div class="fc-text" data-theme="${theme}">
+        <canvas class="fc-text-canvas" width="240" height="60"></canvas>
+        <div class="fc-text-row">
+          <input class="fc-text-input" placeholder="${t.placeholder}" />
+          <button class="fc-text-btn">${t.submit}</button>
+          <button class="fc-text-refresh">${t.refresh}</button>
+        </div>
         <div class="fc-text-msg"></div>
       </div>
     `;
+      const root = container.querySelector(".fc-text");
       const canvas = container.querySelector(".fc-text-canvas");
-      drawDistorted(canvas, current.code);
+      const surface = readVar(root, "--fc-surface", "#f6f7f9");
+      const text = readVar(root, "--fc-text", "#0f172a");
+      const border = readVar(root, "--fc-border", "#e2e8f0");
+      drawDistorted(canvas, current.code, surface, text, border);
       container.querySelector(".fc-text-refresh").addEventListener("click", render2);
       const btn = container.querySelector(".fc-text-btn");
       const input = container.querySelector(".fc-text-input");
@@ -274,11 +332,12 @@ var FunnyCaptcha = (() => {
     return `${c.token}:completed`;
   }
   var STR3 = {
-    zh: { title: "\u62D6\u52A8\u6ED1\u5757\u5230\u6700\u53F3\u7AEF", tip: "\u5411\u53F3\u62D6\u52A8", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u8BF7\u62D6\u5230\u5C3D\u5934" },
-    en: { title: "Drag the slider to the right end", tip: "Drag right", success: "Verified", fail: "Drag to the end" }
+    zh: { title: "\u62D6\u52A8\u6ED1\u5757\u5230\u6700\u53F3\u7AEF", tip: "\u5411\u53F3\u62D6\u52A8", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u8BF7\u62D6\u5230\u5C3D\u5934", refresh: "\u5237\u65B0" },
+    en: { title: "Drag the slider to the right end", tip: "Drag right", success: "Verified", fail: "Drag to the end", refresh: "Refresh" }
   };
   function createSliderInstance(container, config) {
     const t = STR3[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -289,17 +348,26 @@ var FunnyCaptcha = (() => {
       done = false;
       container.innerHTML = `
       <style>
-        .fc-slider{font-family:-apple-system,system-ui,sans-serif;width:300px;padding:16px;box-sizing:border-box}
-        .fc-slider-title{font-size:14px;color:#333;margin-bottom:12px;text-align:center}
-        .fc-slider-track{position:relative;height:40px;background:#e8e8e8;border-radius:20px}
-        .fc-slider-progress{position:absolute;left:0;top:0;height:100%;width:0;background:#4a90d9;border-radius:20px;transition:width .05s}
-        .fc-slider-handle{position:absolute;left:0;top:50%;transform:translateY(-50%);width:50px;height:50px;background:#fff;border:2px solid #4a90d9;border-radius:50%;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15);user-select:none;touch-action:none}
+        .fc-slider{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-slider[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-slider[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-slider{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-slider-title{font-size:14px;color:var(--fc-text);margin-bottom:12px;text-align:center}
+        .fc-slider-track{position:relative;height:40px;background:var(--fc-surface);border:1px solid var(--fc-border);border-radius:20px}
+        .fc-slider-progress{position:absolute;left:0;top:0;height:100%;width:0;background:var(--fc-accent);border-radius:20px;transition:width .05s,background .15s}
+        .fc-slider-handle{position:absolute;left:0;top:50%;transform:translateY(-50%);width:50px;height:50px;background:var(--fc-bg);border:2px solid var(--fc-accent);border-radius:50%;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15);user-select:none;touch-action:none;transition:border-color .15s,color .15s}
         .fc-slider-handle:active{cursor:grabbing}
-        .fc-slider-handle::after{content:'\\2192';color:#4a90d9;font-size:18px;font-weight:bold}
-        .fc-slider-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;color:#999;pointer-events:none;transition:opacity .2s}
-        .fc-slider-msg{font-size:13px;min-height:18px;text-align:center;margin-top:10px;color:#2e7d32}
+        .fc-slider-handle::after{content:'\\2192';color:var(--fc-accent);font-size:18px;font-weight:bold;transition:color .15s}
+        .fc-slider-tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;color:var(--fc-text-soft);pointer-events:none;transition:opacity .2s}
+        .fc-slider-msg{font-size:13px;min-height:18px;text-align:center;margin-top:10px;color:var(--fc-success)}
+        .fc-slider-row{display:flex;justify-content:center;margin-top:10px}
+        .fc-slider-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-slider-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+        .fc-slider-done .fc-slider-handle{border-color:var(--fc-success)}
+        .fc-slider-done .fc-slider-handle::after{color:var(--fc-success)}
+        .fc-slider-done .fc-slider-progress{background:var(--fc-success)}
       </style>
-      <div class="fc-slider">
+      <div class="fc-slider" data-theme="${theme}">
         <div class="fc-slider-title">${t.title}</div>
         <div class="fc-slider-track">
           <div class="fc-slider-progress"></div>
@@ -307,13 +375,19 @@ var FunnyCaptcha = (() => {
           <span class="fc-slider-tip">${t.tip}</span>
         </div>
         <div class="fc-slider-msg"></div>
+        <div class="fc-slider-row">
+          <button class="fc-slider-refresh">${t.refresh}</button>
+        </div>
       </div>
     `;
+      const root = container.querySelector(".fc-slider");
       const track = container.querySelector(".fc-slider-track");
       const handle = container.querySelector(".fc-slider-handle");
       const progress = container.querySelector(".fc-slider-progress");
       const tip = container.querySelector(".fc-slider-tip");
       const msg = container.querySelector(".fc-slider-msg");
+      const refreshBtn = container.querySelector(".fc-slider-refresh");
+      refreshBtn.addEventListener("click", render2);
       let dragging = false;
       let startX = 0;
       let startOffset = 0;
@@ -349,6 +423,7 @@ var FunnyCaptcha = (() => {
         if (currentOffset / maxX >= 0.95) {
           done = true;
           applyPos(maxX);
+          root.classList.add("fc-slider-done");
           const result = {
             success: true,
             proof: await hashProof(proofInput(current)),
@@ -414,17 +489,41 @@ var FunnyCaptcha = (() => {
     return c.order.join(",");
   }
   var STR4 = {
-    zh: { title: "\u6309 1 \u2192 2 \u2192 3 \u2192 4 \u987A\u5E8F\u70B9\u51FB", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u987A\u5E8F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5" },
-    en: { title: "Click in order 1 \u2192 2 \u2192 3 \u2192 4", success: "Verified", fail: "Wrong order, try again" }
+    zh: { title: "\u6309 1 \u2192 2 \u2192 3 \u2192 4 \u987A\u5E8F\u70B9\u51FB", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u987A\u5E8F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5", refresh: "\u5237\u65B0" },
+    en: { title: "Click in order 1 \u2192 2 \u2192 3 \u2192 4", success: "Verified", fail: "Wrong order, try again", refresh: "Refresh" }
   };
-  var SLOTS = [
-    { x: 20, y: 20 },
-    { x: 160, y: 20 },
-    { x: 20, y: 100 },
-    { x: 160, y: 100 }
-  ];
+  var AREA_W = 280;
+  var AREA_H = 180;
+  var BOX_W = 100;
+  var BOX_H = 60;
+  var MIN_DIST = 110;
+  function generateSlots(count) {
+    const maxX = AREA_W - BOX_W;
+    const maxY = AREA_H - BOX_H;
+    const slots = [];
+    let attempts = 0;
+    while (slots.length < count && attempts < 1e3) {
+      attempts++;
+      const candidate = { x: Math.random() * maxX, y: Math.random() * maxY };
+      let ok = true;
+      for (const s of slots) {
+        const dx = candidate.x - s.x;
+        const dy = candidate.y - s.y;
+        if (Math.sqrt(dx * dx + dy * dy) < MIN_DIST) {
+          ok = false;
+          break;
+        }
+      }
+      if (ok) slots.push(candidate);
+    }
+    while (slots.length < count) {
+      slots.push({ x: Math.random() * maxX, y: Math.random() * maxY });
+    }
+    return slots;
+  }
   function createClickOrderInstance(container, config) {
     const t = STR4[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -435,30 +534,42 @@ var FunnyCaptcha = (() => {
       clicked = [];
       finished = false;
       startTime = Date.now();
+      const slots = generateSlots(current.targets.length);
       const boxes = current.targets.map((num, i) => {
-        const slot = SLOTS[i];
-        return `<div class="fc-click-box" data-num="${num}" style="left:${slot.x}px;top:${slot.y}px;">${num}</div>`;
+        const slot = slots[i];
+        return `<div class="fc-click-box" data-num="${num}" style="left:${Math.round(slot.x)}px;top:${Math.round(slot.y)}px;">${num}</div>`;
       }).join("");
       container.innerHTML = `
       <style>
-        .fc-click{font-family:-apple-system,system-ui,sans-serif;width:320px;padding:16px;box-sizing:border-box}
-        .fc-click-title{font-size:14px;color:#333;margin-bottom:12px;text-align:center}
-        .fc-click-area{position:relative;width:280px;height:180px;background:#f5f5f5;border-radius:8px;border:1px solid #e0e0e0;overflow:hidden}
-        .fc-click-box{position:absolute;width:100px;height:60px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold;color:#4a90d9;background:#fff;border:2px solid #4a90d9;border-radius:8px;cursor:pointer;user-select:none;transition:transform .15s,background .15s,color .15s}
+        .fc-click{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-click[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-click[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-click{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-click-title{font-size:14px;color:var(--fc-text);margin-bottom:12px;text-align:center}
+        .fc-click-area{position:relative;width:${AREA_W}px;height:${AREA_H}px;background:var(--fc-surface);border-radius:8px;border:1px solid var(--fc-border);overflow:hidden}
+        .fc-click-box{position:absolute;width:${BOX_W}px;height:${BOX_H}px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold;color:var(--fc-accent);background:var(--fc-bg);border:2px solid var(--fc-accent);border-radius:8px;cursor:pointer;user-select:none;transition:transform .15s,background .15s,color .15s,border-color .15s}
         .fc-click-box:hover{transform:scale(1.05)}
-        .fc-click-box-active{background:#4a90d9;color:#fff}
-        .fc-click-box-done{background:#2e7d32;border-color:#2e7d32;color:#fff;cursor:default}
+        .fc-click-box-active{background:var(--fc-accent);color:var(--fc-bg)}
+        .fc-click-box-done{background:var(--fc-success);border-color:var(--fc-success);color:#fff;cursor:default}
         .fc-click-box-done:hover{transform:none}
-        .fc-click-msg{font-size:13px;min-height:18px;text-align:center;margin-top:10px;color:#2e7d32}
+        .fc-click-row{display:flex;justify-content:center;margin-top:10px}
+        .fc-click-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-click-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+        .fc-click-msg{font-size:13px;min-height:18px;text-align:center;margin-top:10px;color:var(--fc-success)}
       </style>
-      <div class="fc-click">
+      <div class="fc-click" data-theme="${theme}">
         <div class="fc-click-title">${t.title}</div>
         <div class="fc-click-area">${boxes}</div>
         <div class="fc-click-msg"></div>
+        <div class="fc-click-row">
+          <button class="fc-click-refresh">${t.refresh}</button>
+        </div>
       </div>
     `;
       const area = container.querySelector(".fc-click-area");
       const msg = container.querySelector(".fc-click-msg");
+      const refreshBtn = container.querySelector(".fc-click-refresh");
+      refreshBtn.addEventListener("click", render2);
       area.querySelectorAll(".fc-click-box").forEach((el) => {
         el.addEventListener("click", async () => {
           if (finished) return;
@@ -527,11 +638,12 @@ var FunnyCaptcha = (() => {
     return `${c.angle}:aligned`;
   }
   var STR5 = {
-    zh: { title: "\u62D6\u52A8\u6ED1\u5757\u5C06\u56FE\u5F62\u8F6C\u6B63", success: "\u9A8C\u8BC1\u6210\u529F", hint: "\u8BA9\u7BAD\u5934\u6307\u5411\u4E0A\u65B9" },
-    en: { title: "Drag to rotate the figure upright", success: "Verified", hint: "Point the arrow up" }
+    zh: { title: "\u62D6\u52A8\u6ED1\u5757\u5C06\u56FE\u5F62\u8F6C\u6B63", success: "\u9A8C\u8BC1\u6210\u529F", hint: "\u8BA9\u7BAD\u5934\u6307\u5411\u4E0A\u65B9", refresh: "\u5237\u65B0" },
+    en: { title: "Drag to rotate the figure upright", success: "Verified", hint: "Point the arrow up", refresh: "Refresh" }
   };
   function createRotateInstance(container, config) {
     const t = STR5[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -542,31 +654,42 @@ var FunnyCaptcha = (() => {
       done = false;
       container.innerHTML = `
       <style>
-        .fc-rotate{font-family:-apple-system,system-ui,sans-serif;width:300px;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px}
-        .fc-rotate-title{font-size:14px;color:#333;text-align:center}
-        .fc-rotate-stage{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center;border:2px dashed #ccc;border-radius:50%}
+        .fc-rotate{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px}
+        .fc-rotate[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-rotate[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-rotate{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-rotate-title{font-size:14px;color:var(--fc-text);text-align:center}
+        .fc-rotate-stage{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--fc-border);border-radius:50%}
         .fc-rotate-figure{width:100px;height:100px;transform-origin:center;transition:transform .05s}
-        .fc-rotate-marker{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #e74c3c}
-        .fc-rotate-hint{font-size:12px;color:#999}
-        .fc-rotate-range{width:240px;accent-color:#4a90d9}
-        .fc-rotate-msg{font-size:13px;min-height:18px;text-align:center;color:#2e7d32}
+        .fc-rotate-marker{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--fc-danger)}
+        .fc-rotate-hint{font-size:12px;color:var(--fc-text-soft)}
+        .fc-rotate-range{width:240px;accent-color:var(--fc-accent)}
+        .fc-rotate-msg{font-size:13px;min-height:18px;text-align:center;color:var(--fc-success)}
+        .fc-rotate-row{display:flex;justify-content:center}
+        .fc-rotate-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-rotate-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
       </style>
-      <div class="fc-rotate">
+      <div class="fc-rotate" data-theme="${theme}">
         <div class="fc-rotate-title">${t.title}</div>
         <div class="fc-rotate-stage">
           <div class="fc-rotate-figure" style="transform: rotate(${current.angle}deg)">
-            <svg viewBox="0 0 100 100" width="100" height="100"><polygon points="50,12 90,85 10,85" fill="#4a90d9"/></svg>
+            <svg viewBox="0 0 100 100" width="100" height="100"><path d="M 50 8 L 82 42 L 62 42 L 62 92 L 38 92 L 38 42 Z" fill="var(--fc-accent)"/></svg>
           </div>
           <div class="fc-rotate-marker"></div>
         </div>
         <div class="fc-rotate-hint">${t.hint}</div>
         <input class="fc-rotate-range" type="range" min="0" max="360" step="1" value="0" />
         <div class="fc-rotate-msg"></div>
+        <div class="fc-rotate-row">
+          <button class="fc-rotate-refresh">${t.refresh}</button>
+        </div>
       </div>
     `;
       const figure = container.querySelector(".fc-rotate-figure");
       const range = container.querySelector(".fc-rotate-range");
       const msg = container.querySelector(".fc-rotate-msg");
+      const refreshBtn = container.querySelector(".fc-rotate-refresh");
+      refreshBtn.addEventListener("click", render2);
       const update = async () => {
         if (done) return;
         const v = Number(range.value);
@@ -649,11 +772,12 @@ var FunnyCaptcha = (() => {
     return sorted.every((v, i) => v === c.diffs[i]);
   }
   var STR6 = {
-    zh: { title: "\u627E\u51FA\u4E24\u5904\u4E0D\u540C", hint: "\u70B9\u51FB\u53F3\u4FA7\u7F51\u683C\u4E2D\u4E0D\u540C\u7684\u683C\u5B50", found: "\u5DF2\u627E\u5230", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u627E\u5F97\u4E0D\u5BF9\uFF0C\u518D\u6765\u4E00\u6B21" },
-    en: { title: "Spot 2 differences", hint: "Click the differing cells on the right grid", found: "Found", success: "Verified", fail: "Not quite, try again" }
+    zh: { title: "\u627E\u51FA\u4E24\u5904\u4E0D\u540C", hint: "\u70B9\u51FB\u53F3\u4FA7\u7F51\u683C\u4E2D\u4E0D\u540C\u7684\u683C\u5B50", found: "\u5DF2\u627E\u5230", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u627E\u5F97\u4E0D\u5BF9\uFF0C\u518D\u6765\u4E00\u6B21", refresh: "\u5237\u65B0" },
+    en: { title: "Spot 2 differences", hint: "Click the differing cells on the right grid", found: "Found", success: "Verified", fail: "Not quite, try again", refresh: "Refresh" }
   };
   function createSpotDiffInstance(container, config) {
     const t = STR6[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -670,20 +794,26 @@ var FunnyCaptcha = (() => {
       startTime = Date.now();
       container.innerHTML = `
       <style>
-        .fc-spot-diff{font-family:-apple-system,system-ui,sans-serif;width:360px;padding:16px;box-sizing:border-box}
-        .fc-spot-diff-title{font-size:14px;color:#333;margin-bottom:6px;text-align:center;font-weight:600}
-        .fc-spot-diff-hint{font-size:12px;color:#888;margin-bottom:12px;text-align:center}
+        .fc-spot-diff{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-spot-diff[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-spot-diff[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-spot-diff{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-spot-diff-title{font-size:14px;color:var(--fc-text);margin-bottom:6px;text-align:center;font-weight:600}
+        .fc-spot-diff-hint{font-size:12px;color:var(--fc-text-soft);margin-bottom:12px;text-align:center}
         .fc-spot-diff-grids{display:flex;gap:16px;justify-content:center}
-        .fc-spot-diff-grid{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:4px;background:#f5f5f5;padding:8px;border-radius:8px;border:1px solid #e0e0e0}
-        .fc-spot-diff-cell{display:flex;align-items:center;justify-content:center;font-size:26px;background:#fff;border-radius:6px;user-select:none}
+        .fc-spot-diff-grid{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:4px;background:var(--fc-surface);padding:8px;border-radius:8px;border:1px solid var(--fc-border)}
+        .fc-spot-diff-cell{display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--fc-bg);border-radius:6px;user-select:none}
         .fc-spot-diff-clickable{cursor:pointer;transition:transform .12s,box-shadow .12s}
         .fc-spot-diff-clickable:hover{transform:scale(1.06)}
-        .fc-spot-diff-marked{box-shadow:0 0 0 3px #4a90d9 inset;background:#eaf3ff}
-        .fc-spot-diff-wrong{box-shadow:0 0 0 3px #e53935 inset;background:#fdecea}
-        .fc-spot-diff-status{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:#2e7d32}
-        .fc-spot-diff-status-fail{color:#e53935}
+        .fc-spot-diff-marked{box-shadow:0 0 0 3px var(--fc-accent) inset;background:var(--fc-accent-soft)}
+        .fc-spot-diff-wrong{box-shadow:0 0 0 3px var(--fc-danger) inset;background:var(--fc-danger)}
+        .fc-spot-diff-status{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:var(--fc-success)}
+        .fc-spot-diff-status-fail{color:var(--fc-danger)}
+        .fc-spot-diff-row{display:flex;justify-content:center;margin-top:8px}
+        .fc-spot-diff-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-spot-diff-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
       </style>
-      <div class="fc-spot-diff">
+      <div class="fc-spot-diff" data-theme="${theme}">
         <div class="fc-spot-diff-title">${t.title}</div>
         <div class="fc-spot-diff-hint">${t.hint}</div>
         <div class="fc-spot-diff-grids">
@@ -691,10 +821,15 @@ var FunnyCaptcha = (() => {
           <div class="fc-spot-diff-grid fc-spot-diff-grid-b">${renderGrid(current.gridB, true)}</div>
         </div>
         <div class="fc-spot-diff-status">${t.found} 0/${current.diffs.length}</div>
+        <div class="fc-spot-diff-row">
+          <button class="fc-spot-diff-refresh">${t.refresh}</button>
+        </div>
       </div>
     `;
       const gridB = container.querySelector(".fc-spot-diff-grid-b");
       const status = container.querySelector(".fc-spot-diff-status");
+      const refreshBtn = container.querySelector(".fc-spot-diff-refresh");
+      refreshBtn.addEventListener("click", render2);
       gridB.querySelectorAll(".fc-spot-diff-clickable").forEach((el) => {
         el.addEventListener("click", async () => {
           if (finished) return;
@@ -789,11 +924,12 @@ var FunnyCaptcha = (() => {
     return c.correct === userPick;
   }
   var STR7 = {
-    zh: { title: "\u9009\u51FA\u7B26\u5408\u63CF\u8FF0\u7684\u8868\u60C5", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u9009\u9519\u4E86\uFF0C\u518D\u8BD5\u4E00\u6B21" },
-    en: { title: "Pick the face matching the description", success: "Verified", fail: "Wrong, try again" }
+    zh: { title: "\u9009\u51FA\u7B26\u5408\u63CF\u8FF0\u7684\u8868\u60C5", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u9009\u9519\u4E86\uFF0C\u518D\u8BD5\u4E00\u6B21", refresh: "\u5237\u65B0" },
+    en: { title: "Pick the face matching the description", success: "Verified", fail: "Wrong, try again", refresh: "Refresh" }
   };
   function createEmojiMatchInstance(container, config) {
     const t = STR7[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -807,24 +943,36 @@ var FunnyCaptcha = (() => {
       ).join("");
       container.innerHTML = `
       <style>
-        .fc-emoji-match{font-family:-apple-system,system-ui,sans-serif;width:320px;padding:16px;box-sizing:border-box}
-        .fc-emoji-match-title{font-size:14px;color:#333;margin-bottom:6px;text-align:center;font-weight:600}
-        .fc-emoji-match-desc{font-size:15px;color:#4a90d9;margin-bottom:14px;text-align:center;font-weight:600}
+        .fc-emoji-match{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-emoji-match[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-emoji-match[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-emoji-match{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-emoji-match-title{font-size:14px;color:var(--fc-text);margin-bottom:6px;text-align:center;font-weight:600}
+        .fc-emoji-match-desc{font-size:15px;color:var(--fc-accent);margin-bottom:14px;text-align:center;font-weight:600}
         .fc-emoji-match-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
-        .fc-emoji-match-opt{font-size:30px;height:64px;border:2px solid #e0e0e0;background:#fff;border-radius:10px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;display:flex;align-items:center;justify-content:center}
-        .fc-emoji-match-opt:hover{transform:scale(1.06);border-color:#4a90d9}
-        .fc-emoji-match-opt-wrong{border-color:#e53935;background:#fdecea}
-        .fc-emoji-match-opt-correct{border-color:#2e7d32;background:#e8f5e9}
-        .fc-emoji-match-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:#e53935}
+        .fc-emoji-match-opt{font-size:30px;height:64px;border:2px solid var(--fc-border);background:var(--fc-bg);border-radius:10px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;display:flex;align-items:center;justify-content:center;color:var(--fc-text)}
+        .fc-emoji-match-opt:hover{transform:scale(1.06);border-color:var(--fc-accent)}
+        .fc-emoji-match-opt-wrong{border-color:var(--fc-danger);background:var(--fc-danger)}
+        .fc-emoji-match-opt-correct{border-color:var(--fc-success);background:var(--fc-accent-soft)}
+        .fc-emoji-match-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:var(--fc-danger)}
+        .fc-emoji-match-msg-ok{color:var(--fc-success)}
+        .fc-emoji-match-row{display:flex;justify-content:center;margin-top:8px}
+        .fc-emoji-match-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-emoji-match-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
       </style>
-      <div class="fc-emoji-match">
+      <div class="fc-emoji-match" data-theme="${theme}">
         <div class="fc-emoji-match-title">${t.title}</div>
         <div class="fc-emoji-match-desc">${current.description}</div>
         <div class="fc-emoji-match-opts">${buttons}</div>
         <div class="fc-emoji-match-msg"></div>
+        <div class="fc-emoji-match-row">
+          <button class="fc-emoji-match-refresh">${t.refresh}</button>
+        </div>
       </div>
     `;
       const msg = container.querySelector(".fc-emoji-match-msg");
+      const refreshBtn = container.querySelector(".fc-emoji-match-refresh");
+      refreshBtn.addEventListener("click", render2);
       container.querySelectorAll(".fc-emoji-match-opt").forEach((el) => {
         el.addEventListener("click", async () => {
           if (finished) return;
@@ -838,7 +986,7 @@ var FunnyCaptcha = (() => {
               proof: await hashProof(current.correct),
               duration: Date.now() - startTime
             };
-            msg.style.color = "#2e7d32";
+            msg.classList.add("fc-emoji-match-msg-ok");
             msg.textContent = t.success;
             config.onVerify?.(result);
             listeners.forEach((cb) => cb(result));
@@ -906,11 +1054,12 @@ var FunnyCaptcha = (() => {
     return c.correct === userPick;
   }
   var STR8 = {
-    zh: { title: "\u6897\u56FE\u95EE\u7B54", hint: "\u9009\u51FA\u6B63\u786E\u7684\u6897\u540D", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u7B54\u9519\u4E86\uFF0C\u6362\u4E00\u9898" },
-    en: { title: "Meme Quiz", hint: "Pick the correct meme name", success: "Verified", fail: "Wrong, try again" }
+    zh: { title: "\u6897\u56FE\u95EE\u7B54", hint: "\u9009\u51FA\u6B63\u786E\u7684\u6897\u540D", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u7B54\u9519\u4E86\uFF0C\u6362\u4E00\u9898", refresh: "\u5237\u65B0" },
+    en: { title: "Meme Quiz", hint: "Pick the correct meme name", success: "Verified", fail: "Wrong, try again", refresh: "Refresh" }
   };
   function createMemeQuizInstance(container, config) {
     const t = STR8[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -924,26 +1073,38 @@ var FunnyCaptcha = (() => {
       ).join("");
       container.innerHTML = `
       <style>
-        .fc-meme-quiz{font-family:-apple-system,system-ui,sans-serif;width:320px;padding:16px;box-sizing:border-box}
-        .fc-meme-quiz-title{font-size:14px;color:#333;margin-bottom:6px;text-align:center;font-weight:600}
-        .fc-meme-quiz-hint{font-size:12px;color:#888;margin-bottom:10px;text-align:center}
-        .fc-meme-quiz-q{font-size:24px;color:#4a90d9;margin-bottom:14px;text-align:center;letter-spacing:2px}
+        .fc-meme-quiz{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-meme-quiz[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-meme-quiz[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-meme-quiz{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-meme-quiz-title{font-size:14px;color:var(--fc-text);margin-bottom:6px;text-align:center;font-weight:600}
+        .fc-meme-quiz-hint{font-size:12px;color:var(--fc-text-soft);margin-bottom:10px;text-align:center}
+        .fc-meme-quiz-q{font-size:24px;color:var(--fc-accent);margin-bottom:14px;text-align:center;letter-spacing:2px}
         .fc-meme-quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
-        .fc-meme-quiz-opt{font-size:15px;height:48px;border:2px solid #e0e0e0;background:#fff;border-radius:8px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;color:#333}
-        .fc-meme-quiz-opt:hover{transform:scale(1.03);border-color:#4a90d9}
-        .fc-meme-quiz-opt-wrong{border-color:#e53935;background:#fdecea}
-        .fc-meme-quiz-opt-correct{border-color:#2e7d32;background:#e8f5e9}
-        .fc-meme-quiz-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:#e53935}
+        .fc-meme-quiz-opt{font-size:15px;height:48px;border:2px solid var(--fc-border);background:var(--fc-bg);border-radius:8px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;color:var(--fc-text)}
+        .fc-meme-quiz-opt:hover{transform:scale(1.03);border-color:var(--fc-accent)}
+        .fc-meme-quiz-opt-wrong{border-color:var(--fc-danger);background:var(--fc-danger)}
+        .fc-meme-quiz-opt-correct{border-color:var(--fc-success);background:var(--fc-accent-soft)}
+        .fc-meme-quiz-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:var(--fc-danger)}
+        .fc-meme-quiz-msg-ok{color:var(--fc-success)}
+        .fc-meme-quiz-row{display:flex;justify-content:center;margin-top:8px}
+        .fc-meme-quiz-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-meme-quiz-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
       </style>
-      <div class="fc-meme-quiz">
+      <div class="fc-meme-quiz" data-theme="${theme}">
         <div class="fc-meme-quiz-title">${t.title}</div>
         <div class="fc-meme-quiz-hint">${t.hint}</div>
         <div class="fc-meme-quiz-q">${current.question}</div>
         <div class="fc-meme-quiz-opts">${buttons}</div>
         <div class="fc-meme-quiz-msg"></div>
+        <div class="fc-meme-quiz-row">
+          <button class="fc-meme-quiz-refresh">${t.refresh}</button>
+        </div>
       </div>
     `;
       const msg = container.querySelector(".fc-meme-quiz-msg");
+      const refreshBtn = container.querySelector(".fc-meme-quiz-refresh");
+      refreshBtn.addEventListener("click", render2);
       container.querySelectorAll(".fc-meme-quiz-opt").forEach((el) => {
         el.addEventListener("click", async () => {
           if (finished) return;
@@ -957,7 +1118,7 @@ var FunnyCaptcha = (() => {
               proof: await hashProof(current.correct),
               duration: Date.now() - startTime
             };
-            msg.style.color = "#2e7d32";
+            msg.classList.add("fc-meme-quiz-msg-ok");
             msg.textContent = t.success;
             config.onVerify?.(result);
             listeners.forEach((cb) => cb(result));
@@ -1014,7 +1175,8 @@ var FunnyCaptcha = (() => {
       time: "\u5269\u4F59",
       sec: "\u79D2",
       success: "\u9A8C\u8BC1\u6210\u529F\uFF01\u4F60\u679C\u7136\u662F\u4EBA\u7C7B",
-      fail: "\u65F6\u95F4\u5230\uFF0C\u6CA1\u8FBE\u5230\u76EE\u6807\u5206\u6570"
+      fail: "\u65F6\u95F4\u5230\uFF0C\u6CA1\u8FBE\u5230\u76EE\u6807\u5206\u6570",
+      restart: "\u91CD\u65B0\u5F00\u59CB"
     },
     en: {
       title: "Whack-a-Mole",
@@ -1023,12 +1185,16 @@ var FunnyCaptcha = (() => {
       time: "Time",
       sec: "s",
       success: "Verified! You are human.",
-      fail: "Time's up, target not reached"
+      fail: "Time's up, target not reached",
+      restart: "Restart"
     }
   };
   var HOLE_COUNT = 9;
+  var MOLE_MIN_DELAY = 600;
+  var MOLE_MAX_DELAY = 1200;
   function createMiniGameInstance(container, config) {
     const t = STR9[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -1045,7 +1211,7 @@ var FunnyCaptcha = (() => {
         countdownTimer = null;
       }
       if (moleTimer) {
-        clearInterval(moleTimer);
+        clearTimeout(moleTimer);
         moleTimer = null;
       }
       if (hideTimer) {
@@ -1093,6 +1259,14 @@ var FunnyCaptcha = (() => {
         if (activeHole === next) activeHole = -1;
       }, 700);
     }
+    function scheduleMole() {
+      if (ended) return;
+      const delay = MOLE_MIN_DELAY + Math.random() * (MOLE_MAX_DELAY - MOLE_MIN_DELAY);
+      moleTimer = setTimeout(() => {
+        showMole();
+        scheduleMole();
+      }, delay);
+    }
     function startGame() {
       clearTimers();
       score = 0;
@@ -1114,8 +1288,8 @@ var FunnyCaptcha = (() => {
           void endGame(verifyScore(current, score));
         }
       }, 100);
-      moleTimer = setInterval(showMole, 850);
       showMole();
+      scheduleMole();
     }
     function render2() {
       current = generateChallenge9();
@@ -1129,19 +1303,25 @@ var FunnyCaptcha = (() => {
       ).join("");
       container.innerHTML = `
       <style>
-        .fc-mini-game{font-family:-apple-system,system-ui,sans-serif;width:340px;padding:16px;box-sizing:border-box}
-        .fc-mini-game-title{font-size:15px;color:#333;margin-bottom:4px;text-align:center;font-weight:600}
-        .fc-mini-game-rule{font-size:12px;color:#888;margin-bottom:10px;text-align:center}
-        .fc-mini-game-hud{display:flex;justify-content:space-between;font-size:13px;color:#555;margin-bottom:10px}
-        .fc-mini-game-hud b{color:#4a90d9}
-        .fc-mini-game-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:300px;height:300px;margin:0 auto;background:#e8f5e9;border:1px solid #c8e6c9;border-radius:10px;padding:8px;box-sizing:border-box}
+        .fc-mini-game{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-mini-game[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-mini-game[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-mini-game{background:var(--fc-bg);border:1px solid var(--fc-border);border-radius:10px;color:var(--fc-text)}
+        .fc-mini-game-title{font-size:15px;color:var(--fc-text);margin-bottom:4px;text-align:center;font-weight:600}
+        .fc-mini-game-rule{font-size:12px;color:var(--fc-text-soft);margin-bottom:10px;text-align:center}
+        .fc-mini-game-hud{display:flex;justify-content:space-between;font-size:13px;color:var(--fc-text-soft);margin-bottom:10px}
+        .fc-mini-game-hud b{color:var(--fc-accent)}
+        .fc-mini-game-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:300px;height:300px;margin:0 auto;background:var(--fc-surface);border:1px solid var(--fc-border);border-radius:10px;padding:8px;box-sizing:border-box}
         .fc-mini-game-hole{position:relative;background:radial-gradient(circle at 50% 60%,#6d4c41,#4e342e);border-radius:50%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;cursor:pointer;user-select:none}
         .fc-mini-game-hole:hover{background:radial-gradient(circle at 50% 60%,#7d5c51,#5e443e)}
         .fc-mini-game-mole{font-size:34px;line-height:1;transform:translateY(120%);transition:transform .12s ease-out;pointer-events:none}
         .fc-mini-game-mole-active .fc-mini-game-mole{transform:translateY(0)}
-        .fc-mini-game-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:#2e7d32}
+        .fc-mini-game-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:var(--fc-success)}
+        .fc-mini-game-row{display:flex;justify-content:center;margin-top:8px}
+        .fc-mini-game-restart{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer}
+        .fc-mini-game-restart:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
       </style>
-      <div class="fc-mini-game">
+      <div class="fc-mini-game" data-theme="${theme}">
         <div class="fc-mini-game-title">${t.title}</div>
         <div class="fc-mini-game-rule">${t.rule}</div>
         <div class="fc-mini-game-hud">
@@ -1150,8 +1330,13 @@ var FunnyCaptcha = (() => {
         </div>
         <div class="fc-mini-game-board">${holes}</div>
         <div class="fc-mini-game-msg"></div>
+        <div class="fc-mini-game-row">
+          <button class="fc-mini-game-restart">${t.restart}</button>
+        </div>
       </div>
     `;
+      const restartBtn = container.querySelector(".fc-mini-game-restart");
+      restartBtn.addEventListener("click", startGame);
       container.querySelectorAll(".fc-mini-game-hole").forEach((el) => {
         el.addEventListener("click", () => {
           if (ended) return;
@@ -1233,6 +1418,7 @@ var FunnyCaptcha = (() => {
   };
   function createAntiBotInstance(container, config) {
     const t = STR10[config.locale];
+    const theme = config.theme ?? "light";
     let current;
     let listeners = [];
     let startTime = Date.now();
@@ -1270,17 +1456,20 @@ var FunnyCaptcha = (() => {
       }
       container.innerHTML = `
       <style>
-        .fc-anti-bot{font-family:-apple-system,system-ui,sans-serif;width:320px;padding:20px;box-sizing:border-box;border:1px solid #e0e0e0;border-radius:10px;background:#fafafa}
-        .fc-anti-bot-title{font-size:18px;color:#333;text-align:center;font-weight:600;margin-bottom:6px}
-        .fc-anti-bot-subtitle{font-size:12px;color:#888;text-align:center;margin-bottom:16px}
-        .fc-anti-bot-btn{display:block;width:100%;padding:12px;font-size:15px;border:1px solid #ccc;background:#fff;border-radius:6px;cursor:pointer;color:#333;transition:background .15s}
-        .fc-anti-bot-btn:hover:not(:disabled){background:#f0f7ff}
-        .fc-anti-bot-btn:disabled{cursor:default;color:#2e7d32;border-color:#2e7d32;background:#e8f5e9}
-        .fc-anti-bot-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:#2e7d32}
-        .fc-anti-bot-hint{font-size:11px;color:#bbb;margin-top:14px;text-align:center;line-height:1.5;font-style:italic}
-        .fc-anti-bot-footer{font-size:10px;color:#ccc;margin-top:8px;text-align:center}
+        .fc-anti-bot{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:20px;box-sizing:border-box;border:1px solid var(--fc-border);border-radius:10px;background:var(--fc-surface)}
+        .fc-anti-bot[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-anti-bot[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-anti-bot{color:var(--fc-text)}
+        .fc-anti-bot-title{font-size:18px;color:var(--fc-text);text-align:center;font-weight:600;margin-bottom:6px}
+        .fc-anti-bot-subtitle{font-size:12px;color:var(--fc-text-soft);text-align:center;margin-bottom:16px}
+        .fc-anti-bot-btn{display:block;width:100%;padding:12px;font-size:15px;border:1px solid var(--fc-border);background:var(--fc-bg);border-radius:6px;cursor:pointer;color:var(--fc-text);transition:background .15s,border-color .15s}
+        .fc-anti-bot-btn:hover:not(:disabled){background:var(--fc-accent-soft);border-color:var(--fc-accent)}
+        .fc-anti-bot-btn:disabled{cursor:default;color:var(--fc-success);border-color:var(--fc-success);background:var(--fc-accent-soft)}
+        .fc-anti-bot-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:var(--fc-success)}
+        .fc-anti-bot-hint{font-size:11px;color:var(--fc-text-soft);margin-top:14px;text-align:center;line-height:1.5;font-style:italic}
+        .fc-anti-bot-footer{font-size:10px;color:var(--fc-text-soft);margin-top:8px;text-align:center;opacity:.7}
       </style>
-      <div class="fc-anti-bot">
+      <div class="fc-anti-bot" data-theme="${theme}">
         <div class="fc-anti-bot-title">${t.title}</div>
         <div class="fc-anti-bot-subtitle">${t.subtitle}</div>
         <button class="fc-anti-bot-btn">${t.btn}</button>
@@ -1330,6 +1519,415 @@ var FunnyCaptcha = (() => {
   };
   defineCaptcha(antiBotPlugin);
 
+  // ../captchas/click-text/dist/index.js
+  var COMMON_CHARS = [
+    "\u7684",
+    "\u4E86",
+    "\u662F",
+    "\u5728",
+    "\u6709",
+    "\u4EBA",
+    "\u8FD9",
+    "\u4E2D",
+    "\u5927",
+    "\u4E3A",
+    "\u4E0A",
+    "\u4E2A",
+    "\u56FD",
+    "\u6211",
+    "\u4EE5",
+    "\u8981",
+    "\u4ED6",
+    "\u65F6",
+    "\u6765",
+    "\u7528",
+    "\u4EEC",
+    "\u5730",
+    "\u5230",
+    "\u53EF"
+  ];
+  var AREA_W2 = 320;
+  var AREA_H2 = 200;
+  var MARGIN = 30;
+  var MIN_DIST2 = 100;
+  function randInt6(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+  function shuffle5(arr) {
+    const a = arr.slice();
+    for (let i = a.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const tmp = a[i];
+      a[i] = a[j];
+      a[j] = tmp;
+    }
+    return a;
+  }
+  function placePositions(count) {
+    const positions = [];
+    let attempts = 0;
+    while (positions.length < count && attempts < 2e3) {
+      attempts++;
+      const x = MARGIN + Math.random() * (AREA_W2 - MARGIN * 2);
+      const y = MARGIN + Math.random() * (AREA_H2 - MARGIN * 2);
+      const ok = positions.every((p) => Math.hypot(p.x - x, p.y - y) >= MIN_DIST2);
+      if (ok) positions.push({ x, y });
+    }
+    return positions;
+  }
+  function generateChallenge11() {
+    const count = randInt6(3, 4);
+    const chars = shuffle5(COMMON_CHARS).slice(0, count);
+    const positions = placePositions(count);
+    return { chars, positions };
+  }
+  function proofInput6(c) {
+    return `${c.chars.join("")}:completed`;
+  }
+  var STR11 = {
+    zh: { title: "\u8BF7\u6309\u987A\u5E8F\u70B9\u51FB", success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u987A\u5E8F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5", refresh: "\u5237\u65B0" },
+    en: { title: "Click in order", success: "Verified", fail: "Wrong order, try again", refresh: "Refresh" }
+  };
+  function createClickTextInstance(container, config) {
+    const t = STR11[config.locale];
+    let current;
+    let listeners = [];
+    let startTime = Date.now();
+    let clicked = [];
+    let finished = false;
+    function render2() {
+      current = generateChallenge11();
+      clicked = [];
+      finished = false;
+      startTime = Date.now();
+      const prompt = current.chars.join("\u3001");
+      const chars = current.chars.map((ch, i) => {
+        const p = current.positions[i];
+        return `<div class="fc-click-text-char" data-ch="${ch}" style="left:${p.x}px;top:${p.y}px;">${ch}</div>`;
+      }).join("");
+      container.innerHTML = `
+      <style>
+        .fc-click-text{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-click-text[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-click-text[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-click-text-title{font-size:14px;color:var(--fc-text);margin-bottom:4px;text-align:center}
+        .fc-click-text-prompt{font-size:15px;color:var(--fc-accent);margin-bottom:12px;text-align:center;font-weight:600}
+        .fc-click-text-area{position:relative;width:320px;height:200px;background:var(--fc-surface);border-radius:8px;border:1px solid var(--fc-border);overflow:hidden}
+        .fc-click-text-char{position:absolute;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:var(--fc-text);background:var(--fc-bg);border:2px solid var(--fc-border);border-radius:8px;cursor:pointer;user-select:none;transition:transform .15s,background .15s,color .15s,border-color .15s}
+        .fc-click-text-char:hover{transform:scale(1.08);border-color:var(--fc-accent)}
+        .fc-click-text-char-done{background:var(--fc-success);border-color:var(--fc-success);color:#fff;cursor:default}
+        .fc-click-text-char-done:hover{transform:none}
+        .fc-click-text-char-wrong{background:var(--fc-danger);border-color:var(--fc-danger);color:#fff}
+        .fc-click-text-msg{font-size:13px;min-height:18px;text-align:center;margin-top:10px;color:var(--fc-success)}
+        .fc-click-text-msg-fail{color:var(--fc-danger)}
+        .fc-click-text-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer;margin-top:8px;display:block;margin-left:auto;margin-right:auto}
+        .fc-click-text-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+      </style>
+      <div class="fc-click-text" data-theme="${config.theme}">
+        <div class="fc-click-text-title">${t.title}</div>
+        <div class="fc-click-text-prompt">${prompt}</div>
+        <div class="fc-click-text-area">${chars}</div>
+        <div class="fc-click-text-msg"></div>
+        <button class="fc-click-text-refresh">${t.refresh}</button>
+      </div>
+    `;
+      const msg = container.querySelector(".fc-click-text-msg");
+      const refreshBtn = container.querySelector(".fc-click-text-refresh");
+      refreshBtn.addEventListener("click", () => render2());
+      container.querySelectorAll(".fc-click-text-char").forEach((el) => {
+        el.addEventListener("click", async () => {
+          if (finished) return;
+          const box = el;
+          if (box.classList.contains("fc-click-text-char-done")) return;
+          const ch = box.dataset.ch;
+          const expected = current.chars[clicked.length];
+          if (ch === expected) {
+            clicked.push(ch);
+            box.classList.add("fc-click-text-char-done");
+            if (clicked.length === current.chars.length) {
+              finished = true;
+              const result = {
+                success: true,
+                proof: await hashProof(proofInput6(current)),
+                duration: Date.now() - startTime
+              };
+              msg.textContent = t.success;
+              config.onVerify?.(result);
+              listeners.forEach((cb) => cb(result));
+            }
+          } else {
+            finished = true;
+            box.classList.add("fc-click-text-char-wrong");
+            msg.classList.add("fc-click-text-msg-fail");
+            msg.textContent = t.fail;
+            setTimeout(render2, 700);
+          }
+        });
+      });
+    }
+    return {
+      mount: () => render2(),
+      reset: () => render2(),
+      destroy: () => {
+        container.innerHTML = "";
+        listeners = [];
+      },
+      onResult: (cb) => listeners.push(cb)
+    };
+  }
+  var clickTextPlugin = {
+    id: "click-text",
+    category: "interactive",
+    create: createClickTextInstance,
+    describe: (locale) => ({
+      name: locale === "zh" ? "\u6587\u5B57\u70B9\u9009" : "Click Text",
+      description: locale === "zh" ? "\u6309\u6307\u5B9A\u987A\u5E8F\u70B9\u51FB\u753B\u5E03\u4E0A\u7684\u6C49\u5B57" : "Click characters on the canvas in the specified order.",
+      tags: ["click", "text", "interactive"]
+    })
+  };
+  defineCaptcha(clickTextPlugin);
+
+  // ../captchas/color-pick/dist/index.js
+  var COLORS = [
+    { name: "red", zh: "\u7EA2\u8272", en: "red", hex: "#ef4444" },
+    { name: "blue", zh: "\u84DD\u8272", en: "blue", hex: "#3b82f6" },
+    { name: "green", zh: "\u7EFF\u8272", en: "green", hex: "#22c55e" },
+    { name: "yellow", zh: "\u9EC4\u8272", en: "yellow", hex: "#eab308" },
+    { name: "purple", zh: "\u7D2B\u8272", en: "purple", hex: "#a855f7" },
+    { name: "orange", zh: "\u6A59\u8272", en: "orange", hex: "#f97316" },
+    { name: "pink", zh: "\u7C89\u8272", en: "pink", hex: "#ec4899" },
+    { name: "cyan", zh: "\u9752\u8272", en: "cyan", hex: "#06b6d4" }
+  ];
+  function randInt7(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+  function shuffle6(arr) {
+    const a = arr.slice();
+    for (let i = a.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const tmp = a[i];
+      a[i] = a[j];
+      a[j] = tmp;
+    }
+    return a;
+  }
+  function colorLabel(name, locale) {
+    const c = COLORS.find((c2) => c2.name === name);
+    return c ? locale === "zh" ? c.zh : c.en : name;
+  }
+  function generateChallenge12() {
+    const target = COLORS[randInt7(0, COLORS.length - 1)];
+    const distractorCount = randInt7(5, 8);
+    const others = COLORS.filter((c) => c.name !== target.name);
+    const distractors = shuffle6(others).slice(0, Math.min(distractorCount, others.length));
+    const options = shuffle6([
+      { name: target.name, hex: target.hex },
+      ...distractors.map((d) => ({ name: d.name, hex: d.hex }))
+    ]);
+    return { targetColor: target.name, targetHex: target.hex, options };
+  }
+  function proofInput7(c) {
+    return `${c.targetColor}:completed`;
+  }
+  function verifyAnswer5(c, userPickHex) {
+    return c.targetHex === userPickHex;
+  }
+  var STR12 = {
+    zh: { success: "\u9A8C\u8BC1\u6210\u529F", fail: "\u9009\u9519\u4E86\uFF0C\u518D\u8BD5\u4E00\u6B21", refresh: "\u5237\u65B0" },
+    en: { success: "Verified", fail: "Wrong, try again", refresh: "Refresh" }
+  };
+  function createColorPickInstance(container, config) {
+    const t = STR12[config.locale];
+    let current;
+    let listeners = [];
+    let startTime = Date.now();
+    let finished = false;
+    function render2() {
+      current = generateChallenge12();
+      finished = false;
+      startTime = Date.now();
+      const label = colorLabel(current.targetColor, config.locale);
+      const prompt = config.locale === "zh" ? `\u8BF7\u70B9\u51FB${label}\u7684\u65B9\u5757` : `Click the ${label} square`;
+      const squares = current.options.map(
+        (o) => `<button class="fc-color-pick-opt" data-hex="${o.hex}" style="background:${o.hex}" aria-label="${o.name}"></button>`
+      ).join("");
+      container.innerHTML = `
+      <style>
+        .fc-color-pick{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-color-pick[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-color-pick[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-color-pick-prompt{font-size:15px;color:var(--fc-text);margin-bottom:12px;text-align:center;font-weight:600}
+        .fc-color-pick-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
+        .fc-color-pick-opt{height:56px;border:2px solid var(--fc-border);border-radius:10px;cursor:pointer;transition:transform .12s,border-color .12s;outline:none;padding:0}
+        .fc-color-pick-opt:hover{transform:scale(1.06);border-color:var(--fc-accent)}
+        .fc-color-pick-opt-correct{border-color:var(--fc-success);transform:scale(1.06)}
+        .fc-color-pick-opt-wrong{border-color:var(--fc-danger)}
+        .fc-color-pick-msg{font-size:13px;min-height:18px;text-align:center;margin-top:12px;color:var(--fc-danger)}
+        .fc-color-pick-msg-success{color:var(--fc-success)}
+        .fc-color-pick-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer;margin-top:8px;display:block;margin-left:auto;margin-right:auto}
+        .fc-color-pick-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+      </style>
+      <div class="fc-color-pick" data-theme="${config.theme}">
+        <div class="fc-color-pick-prompt">${prompt}</div>
+        <div class="fc-color-pick-opts">${squares}</div>
+        <div class="fc-color-pick-msg"></div>
+        <button class="fc-color-pick-refresh">${t.refresh}</button>
+      </div>
+    `;
+      const msg = container.querySelector(".fc-color-pick-msg");
+      const refreshBtn = container.querySelector(".fc-color-pick-refresh");
+      refreshBtn.addEventListener("click", () => render2());
+      container.querySelectorAll(".fc-color-pick-opt").forEach((el) => {
+        el.addEventListener("click", async () => {
+          if (finished) return;
+          const btn = el;
+          const pick2 = btn.dataset.hex;
+          if (verifyAnswer5(current, pick2)) {
+            finished = true;
+            btn.classList.add("fc-color-pick-opt-correct");
+            msg.classList.add("fc-color-pick-msg-success");
+            const result = {
+              success: true,
+              proof: await hashProof(proofInput7(current)),
+              duration: Date.now() - startTime
+            };
+            msg.textContent = t.success;
+            config.onVerify?.(result);
+            listeners.forEach((cb) => cb(result));
+          } else {
+            finished = true;
+            btn.classList.add("fc-color-pick-opt-wrong");
+            msg.textContent = t.fail;
+            setTimeout(render2, 800);
+          }
+        });
+      });
+    }
+    return {
+      mount: () => render2(),
+      reset: () => render2(),
+      destroy: () => {
+        container.innerHTML = "";
+        listeners = [];
+      },
+      onResult: (cb) => listeners.push(cb)
+    };
+  }
+  var colorPickPlugin = {
+    id: "color-pick",
+    category: "recognize",
+    create: createColorPickInstance,
+    describe: (locale) => ({
+      name: locale === "zh" ? "\u989C\u8272\u9009\u62E9" : "Color Pick",
+      description: locale === "zh" ? "\u4ECE\u591A\u4E2A\u5F69\u8272\u65B9\u5757\u4E2D\u70B9\u51FB\u6307\u5B9A\u989C\u8272" : "Pick the square of the specified color.",
+      tags: ["color", "pick", "recognize"]
+    })
+  };
+  defineCaptcha(colorPickPlugin);
+
+  // ../captchas/puzzle/dist/index.js
+  var TOLERANCE = 5;
+  function randInt8(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+  function generateChallenge13() {
+    return { gapPosition: randInt8(10, 90) };
+  }
+  function proofInput8(c) {
+    return `${c.gapPosition}:completed`;
+  }
+  function verifyPosition(c, userPos) {
+    return Math.abs(userPos - c.gapPosition) <= TOLERANCE;
+  }
+  var STR13 = {
+    zh: { title: "\u62D6\u52A8\u6ED1\u5757\u628A\u62FC\u56FE\u5757\u79FB\u5230\u7F3A\u53E3", success: "\u9A8C\u8BC1\u6210\u529F", refresh: "\u5237\u65B0" },
+    en: { title: "Drag the slider to fit the puzzle", success: "Verified", refresh: "Refresh" }
+  };
+  var STAGE_W = 300;
+  var PIECE_W = 50;
+  var MAX_OFFSET = STAGE_W - PIECE_W;
+  function createPuzzleInstance(container, config) {
+    const t = STR13[config.locale];
+    let current;
+    let listeners = [];
+    let startTime = Date.now();
+    let done = false;
+    function render2() {
+      current = generateChallenge13();
+      startTime = Date.now();
+      done = false;
+      const gapLeft = current.gapPosition / 100 * MAX_OFFSET;
+      container.innerHTML = `
+      <style>
+        .fc-puzzle{font-family:-apple-system,system-ui,sans-serif;max-width:360px;width:100%;padding:16px;box-sizing:border-box}
+        .fc-puzzle[data-theme="light"]{--fc-bg:#ffffff;--fc-surface:#f6f7f9;--fc-text:#0f172a;--fc-text-soft:#64748b;--fc-border:#e2e8f0;--fc-accent:#6366f1;--fc-accent-soft:#eef2ff;--fc-success:#16a34a;--fc-danger:#dc2626}
+        .fc-puzzle[data-theme="dark"]{--fc-bg:#1e2544;--fc-surface:#171c36;--fc-text:#e5e9f0;--fc-text-soft:#94a3b8;--fc-border:#2a3358;--fc-accent:#818cf8;--fc-accent-soft:#252b5c;--fc-success:#4ade80;--fc-danger:#f87171}
+        .fc-puzzle-title{font-size:14px;color:var(--fc-text);margin-bottom:12px;text-align:center}
+        .fc-puzzle-stage{position:relative;width:${STAGE_W}px;height:160px;border-radius:8px;overflow:hidden;border:1px solid var(--fc-border);background:linear-gradient(135deg,var(--fc-accent-soft),var(--fc-surface) 60%,var(--fc-accent-soft))}
+        .fc-puzzle-gap{position:absolute;top:55px;width:${PIECE_W}px;height:${PIECE_W}px;background:var(--fc-bg);border:2px dashed var(--fc-text-soft);border-radius:6px;box-shadow:inset 0 0 8px rgba(0,0,0,.15)}
+        .fc-puzzle-piece{position:absolute;top:55px;left:0;width:${PIECE_W}px;height:${PIECE_W}px;border-radius:6px;background:linear-gradient(135deg,var(--fc-accent),var(--fc-accent-soft));border:2px solid var(--fc-bg);box-shadow:0 2px 6px rgba(0,0,0,.25)}
+        .fc-puzzle-range{width:${STAGE_W}px;margin-top:14px;accent-color:var(--fc-accent)}
+        .fc-puzzle-msg{font-size:13px;min-height:18px;text-align:center;margin-top:10px;color:var(--fc-success)}
+        .fc-puzzle-refresh{padding:4px 12px;font-size:12px;border:1px solid var(--fc-border);background:var(--fc-surface);color:var(--fc-text-soft);border-radius:6px;cursor:pointer;margin-top:8px;display:block;margin-left:auto;margin-right:auto}
+        .fc-puzzle-refresh:hover{border-color:var(--fc-accent);color:var(--fc-accent)}
+      </style>
+      <div class="fc-puzzle" data-theme="${config.theme}">
+        <div class="fc-puzzle-title">${t.title}</div>
+        <div class="fc-puzzle-stage">
+          <div class="fc-puzzle-gap" style="left:${gapLeft}px"></div>
+          <div class="fc-puzzle-piece" style="left:0"></div>
+        </div>
+        <input class="fc-puzzle-range" type="range" min="0" max="100" step="1" value="0" />
+        <div class="fc-puzzle-msg"></div>
+        <button class="fc-puzzle-refresh">${t.refresh}</button>
+      </div>
+    `;
+      const piece = container.querySelector(".fc-puzzle-piece");
+      const range = container.querySelector(".fc-puzzle-range");
+      const msg = container.querySelector(".fc-puzzle-msg");
+      const refreshBtn = container.querySelector(".fc-puzzle-refresh");
+      refreshBtn.addEventListener("click", () => render2());
+      range.addEventListener("input", async () => {
+        if (done) return;
+        const v = Number(range.value);
+        piece.style.left = `${v / 100 * MAX_OFFSET}px`;
+        if (verifyPosition(current, v)) {
+          done = true;
+          range.disabled = true;
+          piece.style.left = `${gapLeft}px`;
+          const result = {
+            success: true,
+            proof: await hashProof(proofInput8(current)),
+            duration: Date.now() - startTime
+          };
+          msg.textContent = t.success;
+          config.onVerify?.(result);
+          listeners.forEach((cb) => cb(result));
+        }
+      });
+    }
+    return {
+      mount: () => render2(),
+      reset: () => render2(),
+      destroy: () => {
+        container.innerHTML = "";
+        listeners = [];
+      },
+      onResult: (cb) => listeners.push(cb)
+    };
+  }
+  var puzzlePlugin = {
+    id: "puzzle",
+    category: "interactive",
+    create: createPuzzleInstance,
+    describe: (locale) => ({
+      name: locale === "zh" ? "\u62FC\u56FE\u7F3A\u53E3" : "Puzzle Gap",
+      description: locale === "zh" ? "\u62D6\u52A8\u6ED1\u5757\u628A\u62FC\u56FE\u5757\u79FB\u5230\u7F3A\u53E3\u4F4D\u7F6E" : "Drag the slider to fit the puzzle piece into the gap.",
+      tags: ["puzzle", "drag", "interactive"]
+    })
+  };
+  defineCaptcha(puzzlePlugin);
+
   // src/index.ts
   var instances = /* @__PURE__ */ new Map();
   function render(root = document) {