packing-bingo 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -27,7 +27,8 @@ __export(src_exports, {
   bingoLines: () => bingoLines,
   createPackingBingo: () => createPackingBingo,
   en: () => en,
-  ja: () => ja
+  ja: () => ja,
+  speedBonus: () => speedBonus
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -137,6 +138,27 @@ var ja = {
   shuffle: "\u{1F500} \u30B7\u30E3\u30C3\u30D5\u30EB",
   soundOn: "\u{1F50A} \u97F3\u3042\u308A",
   soundOff: "\u{1F507} \u97F3\u306A\u3057",
+  readyTitle: "Are you ready?",
+  readyPrompt: "",
+  soundHint: "\u7AEF\u672B\u306E\u97F3\u91CF\u3092MAX\u306B",
+  vibrationHint: "\u304A\u3084\u3059\u307F\u30E2\u30FC\u30C9\u3092\u30AA\u30D5",
+  readyTap: "\u30BF\u30C3\u30D7\u3067\u30B9\u30BF\u30FC\u30C8",
+  readyGo: "START!",
+  time: "\u30BF\u30A4\u30E0",
+  statTime: "\u30AF\u30EA\u30A2\u30BF\u30A4\u30E0",
+  modeLabel: "\u30E2\u30FC\u30C9",
+  modeNormal: "\u901A\u5E38",
+  modeInfinite: "\u221E \u7121\u9650",
+  normalTitle: "NORMAL",
+  normalSub: "\u901A\u5E38\u30E2\u30FC\u30C9",
+  infiniteTitle: "INFINITE",
+  infiniteSub: "\u7121\u9650\u30D3\u30F3\u30B4",
+  infiniteRule: "\u305D\u308D\u3063\u305F\u5217\u306F\u6D88\u3048\u3066\u3001\u307E\u305F\u57CB\u3081\u3089\u308C\u308B\u3002\u4F55\u5EA6\u3067\u3082\u30D3\u30F3\u30B4\uFF01",
+  finish: "\u{1F3C1} FINISH",
+  finishTitle: "\u30D5\u30A3\u30CB\u30C3\u30B7\u30E5\uFF01",
+  finishStamp: "\u221E",
+  finishTime: "\u30D7\u30EC\u30A4\u30BF\u30A4\u30E0",
+  again: "\u3082\u3046\u4E00\u5EA6",
   stamp: "OK",
   free: "FREE",
   reachBadge: "\u30EA\u30FC\u30C1",
@@ -147,15 +169,15 @@ var ja = {
   bannerNth: (n) => `${n} \u30E9\u30A4\u30F3\u76EE\uFF01`,
   bannerMulti: (n) => `\u4E00\u6C17\u306B ${n} \u30E9\u30A4\u30F3\uFF01`,
   statusStart: () => "",
-  statusLines: (lines, left) => `\u30D3\u30F3\u30B4 ${lines} \u30E9\u30A4\u30F3\uFF01 \u306E\u3053\u308A ${left} \u3053`,
+  statusLines: () => "",
   statusReach: () => "",
-  statusDone: "\u{1F389} \u30D1\u30FC\u30D5\u30A7\u30AF\u30C8\uFF01\u5FD8\u308C\u7269\u30BC\u30ED\u3067\u51FA\u767A\u3067\u304D\u307E\u3059",
+  statusDone: "",
   perfectTag: "\u{1F3C6} PERFECT",
   perfectStamp: "\u6E96\u5099\n\u5B8C\u4E86",
   perfectTitle: "\u30D1\u30FC\u30D5\u30A7\u30AF\u30C8\uFF01",
-  perfectBody: (n) => `${n}\u3053 \u305C\u3093\u3076\u305D\u308D\u3063\u305F\uFF01
-\u5FD8\u308C\u7269\u30BC\u30ED\u3067\u3001\u3044\u3063\u3066\u3089\u3063\u3057\u3083\u3044\uFF01`,
+  perfectBody: "",
   perfectBonus: (n) => `PERFECT BONUS +${n}`,
+  speedBonus: (n) => `SPEED BONUS +${n.toLocaleString()}`,
   statScore: "SCORE",
   statCombo: "MAX COMBO",
   statLines: "BINGO",
@@ -178,6 +200,27 @@ var en = {
   shuffle: "\u{1F500} Shuffle",
   soundOn: "\u{1F50A} Sound on",
   soundOff: "\u{1F507} Muted",
+  readyTitle: "Are you ready?",
+  readyPrompt: "",
+  soundHint: "Turn your volume to MAX",
+  vibrationHint: "Turn off Do Not Disturb",
+  readyTap: "Tap to start",
+  readyGo: "GO!",
+  time: "Time",
+  statTime: "Time",
+  modeLabel: "Mode",
+  modeNormal: "Normal",
+  modeInfinite: "\u221E Infinite",
+  normalTitle: "NORMAL",
+  normalSub: "Normal mode",
+  infiniteTitle: "INFINITE",
+  infiniteSub: "Infinite bingo",
+  infiniteRule: "Completed lines clear, so you can fill them again. Bingo forever!",
+  finish: "\u{1F3C1} FINISH",
+  finishTitle: "Finish!",
+  finishStamp: "\u221E",
+  finishTime: "Time played",
+  again: "Play again",
   stamp: "OK",
   free: "FREE",
   reachBadge: "REACH",
@@ -188,15 +231,15 @@ var en = {
   bannerNth: (n) => `Line ${n}!`,
   bannerMulti: (n) => `${n} lines at once!`,
   statusStart: () => "",
-  statusLines: (lines, left) => `${lines} bingo line${lines === 1 ? "" : "s"}! ${left} to go`,
+  statusLines: () => "",
   statusReach: () => "",
-  statusDone: "\u{1F389} Perfect! Nothing left behind.",
+  statusDone: "",
   perfectTag: "\u{1F3C6} PERFECT",
   perfectStamp: "ALL\nSET",
   perfectTitle: "Perfect!",
-  perfectBody: (n) => `All ${n} packed!
-Have a great trip!`,
+  perfectBody: "",
   perfectBonus: (n) => `PERFECT BONUS +${n}`,
+  speedBonus: (n) => `SPEED BONUS +${n.toLocaleString()}`,
   statScore: "SCORE",
   statCombo: "MAX COMBO",
   statLines: "BINGO",
@@ -213,8 +256,40 @@ var hz = (semitones) => 523.25 * Math.pow(2, semitones / 12);
 function createSound(isMuted) {
   let ac = null;
   let out = null;
+  const voices = /* @__PURE__ */ new Map();
+  function track(source, gain, start, nodes) {
+    voices.set(source, { gain, start });
+    source.onended = () => {
+      voices.delete(source);
+      source.disconnect();
+      nodes.forEach((n) => n.disconnect());
+    };
+  }
+  function stop() {
+    const now = ac?.currentTime ?? 0;
+    voices.forEach(({ gain, start }, source) => {
+      try {
+        if (start > now) {
+          gain.gain.cancelScheduledValues(now);
+          gain.gain.setValueAtTime(0, now);
+          source.stop(now);
+        } else {
+          if (typeof gain.gain.cancelAndHoldAtTime === "function") gain.gain.cancelAndHoldAtTime(now);
+          else {
+            const value = gain.gain.value;
+            gain.gain.cancelScheduledValues(now);
+            gain.gain.setValueAtTime(value, now);
+          }
+          gain.gain.linearRampToValueAtTime(0, now + 0.01);
+          source.stop(now + 0.01);
+        }
+      } catch {
+      }
+    });
+    voices.clear();
+  }
   function audio() {
-    if (isMuted() || typeof window === "undefined") return null;
+    if (isMuted() || typeof window === "undefined" || document.hidden) return null;
     const ua = navigator.userActivation;
     if (!ac && ua && !ua.hasBeenActive) return null;
     if (!ac) {
@@ -242,6 +317,7 @@ function createSound(isMuted) {
     g.gain.exponentialRampToValueAtTime(vol, t + 0.01);
     g.gain.exponentialRampToValueAtTime(1e-4, t + dur);
     o.connect(g).connect(out);
+    track(o, g, t, [g]);
     o.start(t);
     o.stop(t + dur + 0.05);
   }
@@ -262,15 +338,19 @@ function createSound(isMuted) {
     f.Q.value = 0.7;
     g.gain.value = vol;
     s.connect(f).connect(g).connect(out);
+    track(s, g, t, [f, g]);
     s.start(t);
   }
   const step = (k) => hz(SCALE[Math.min(Math.max(k, 0), SCALE.length - 1)]);
   return {
     pop(k) {
       const f = step(k);
+      const energy = Math.min(3, Math.floor((k + 1) / 3));
       tone(f, 0, 0.16, "triangle", 0.22);
       tone(f * 2, 0, 0.08, "sine", 0.06);
-      tone(150, 0, 0.09, "sine", 0.25, 60);
+      tone(170 + energy * 15, 0, 0.11, "sine", 0.28, 48);
+      noise(0, 0.035, 0.1 + energy * 0.025, 1800);
+      if (energy) tone(f * 1.5, 0.035, 0.11, "triangle", 0.04 + energy * 0.015);
     },
     off: () => tone(392, 0, 0.1, "sine", 0.1, 262),
     reach() {
@@ -300,7 +380,39 @@ function createSound(isMuted) {
       tone(hz(7), 0.34, 0.12, "triangle", 0.14);
       tone(hz(12), 0.42, 0.2, "triangle", 0.14);
     },
+    count(go) {
+      if (go) {
+        tone(hz(12), 0, 0.5, "square", 0.07);
+        tone(hz(24), 0, 0.5, "triangle", 0.14);
+        noise(0, 0.2, 0.12, 3e3);
+      } else {
+        tone(hz(5), 0, 0.14, "square", 0.07);
+        tone(hz(17), 0, 0.14, "triangle", 0.12);
+      }
+    },
+    mode(infinite) {
+      if (infinite) {
+        tone(196, 0, 0.42, "sine", 0.12, 784);
+        [0, 2, 4, 7, 9, 12, 14, 16, 19, 21, 24].forEach((s, i) => tone(hz(s - 12), i * 0.032, 0.16, "triangle", 0.07));
+        [12, 16, 19, 24].forEach((s) => tone(hz(s), 0.38, 1.1, "sine", 0.07));
+        tone(hz(31), 0.38, 0.9, "triangle", 0.03);
+        noise(0, 0.5, 0.07, 6500);
+        noise(0.36, 0.7, 0.05, 9e3);
+      } else {
+        tone(hz(7), 0, 0.1, "square", 0.05);
+        tone(hz(0), 0.1, 0.28, "triangle", 0.14);
+        tone(160, 0.1, 0.2, "sine", 0.26, 55);
+        noise(0.1, 0.12, 0.14, 1400);
+      }
+    },
+    clear(squares) {
+      const n = Math.max(1, Math.min(8, squares));
+      for (let i = 0; i < n; i++) tone(step(SCALE.length - 1 - i * 2), i * 0.035, 0.18, "sine", 0.07);
+      noise(0, 0.3, 0.08, 7e3);
+    },
+    stop,
     close() {
+      stop();
       if (ac) void ac.close().catch(() => {
       });
       ac = null;
@@ -309,6 +421,64 @@ function createSound(isMuted) {
   };
 }
 
+// src/haptics.ts
+var owner = null;
+function createHaptics(enabled) {
+  const token = {};
+  let generation = 0;
+  const stop = () => {
+    generation++;
+    if (owner !== token) return;
+    owner = null;
+    try {
+      navigator.vibrate?.(0);
+    } catch {
+    }
+  };
+  const send = (pattern) => {
+    if (!enabled || document.hidden || typeof navigator.vibrate !== "function") return false;
+    if (navigator.userActivation && !navigator.userActivation.hasBeenActive) return false;
+    try {
+      if (navigator.vibrate(pattern)) {
+        owner = token;
+        return true;
+      }
+    } catch {
+    }
+    return false;
+  };
+  return {
+    play(moment, combo = 1, lines = 1, impactAt = 360) {
+      const current = ++generation;
+      const tier = Math.min(3, Math.floor(combo / 3));
+      const lead = Math.max(80, impactAt - 40);
+      const pattern = moment === "off" ? 35 : moment === "perfect" ? [160, 45, 100] : moment === "bingo" ? lines >= 3 ? [lead, 40, 500, 50, 650, 50, 850] : lines === 2 ? [lead, 40, 500, 50, 650] : [lead, 40, 500] : moment === "reach" ? [140, 40, 240] : moment === "shuffle" ? [90, 35, 90, 35, 220] : moment === "count" ? 60 : moment === "go" ? 260 : (
+        // Switching modes: a quick rising flutter into a hold, or one firm stamp.
+        moment === "infinite" ? [25, 30, 35, 30, 45, 30, 220] : moment === "normal" ? [50, 70, 160] : moment === "finish" ? [120, 40, 120, 40, 320] : tier ? [100 + tier * 20, 15, 80 + tier * 20] : 90
+      );
+      if (!send(pattern)) return;
+      return (beat) => {
+        if (generation === current && owner === token) send([...beat]);
+      };
+    },
+    stop
+  };
+}
+
+// src/celebration.ts
+var PERFECT_REVEAL_MS = 520;
+var PERFECT_STAMP_DELAY_MS = 720;
+var PERFECT_STAMP_BEAT = [260, 45, 160];
+var PERFECT_FIREWORKS = [
+  { at: 1820, beat: [200] },
+  { at: 2170, beat: [100, 35, 160] },
+  { at: 2520, beat: [260] },
+  { at: 3e3, beat: [110, 40, 110] },
+  { at: 3430, beat: [320] },
+  { at: 3950, beat: [140, 40, 200] },
+  { at: 4540, beat: [460] }
+];
+
 // src/storage-key.ts
 function resolveStorageKey(options) {
   if (options.controlled) return null;
@@ -336,13 +506,17 @@ var CSS = `
 .pkb-board.pkb-punch{animation:pkb-punch .4s cubic-bezier(.3,1.6,.5,1)}
 @keyframes pkb-punch{30%{transform:scale(1.018)}}
 .pkb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-bottom:18px}
-.pkb-tags{display:flex;gap:8px;align-items:center}
+.pkb-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
 .pkb-kicker{display:inline-block;background:var(--pk-ink);color:var(--pk-sun);font-weight:800;font-size:11px;letter-spacing:.14em;padding:4px 10px;border-radius:999px}
 .pkb-kicker:empty{display:none}
 .pkb-kicker.pkb-gold{color:#fff;background:linear-gradient(90deg,#E8473B,#FF9F1C,#1FA971,#2F6FED,#E8473B);background-size:200% 100%;animation:pkb-rb 2s linear infinite}
 @keyframes pkb-rb{to{background-position:-200% 0}}
 .pkb button{font-family:var(--pk-body)}
 .pkb-snd{appearance:none;border:2px solid var(--pk-ink);background:var(--pk-paper);border-radius:999px;padding:2px 9px;font-weight:800;font-size:11px;line-height:1.4;color:var(--pk-ink);cursor:pointer}
+.pkb-watch{display:inline-block;min-width:5.4em;padding:3px 10px 2px;border-radius:999px;background:var(--pk-ink);color:var(--pk-paper);font-family:var(--pk-display);font-size:13px;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.03em}
+.pkb-watch::before{content:"\u23F1 ";font-family:var(--pk-body)}
+.pkb-watch.pkb-run{color:var(--pk-sun)}
+.pkb-watch.pkb-done{background:var(--pk-red);color:#fff}
 .pkb-title{font-family:var(--pk-display);font-weight:400;font-size:34px;line-height:1.15;margin-top:8px;letter-spacing:.02em;color:inherit}
 .pkb-sub{font-weight:800;font-size:13px;margin-top:4px;word-break:auto-phrase}
 .pkb-side{display:flex;flex-direction:column;gap:8px;flex:none}
@@ -360,12 +534,12 @@ var CSS = `
 .pkb-combo b{font-family:var(--pk-display);font-weight:400;font-size:13px;color:var(--pk-red);white-space:nowrap}
 .pkb-bar{flex:1;height:9px;border:2px solid var(--pk-ink);border-radius:999px;background:var(--pk-paper);overflow:hidden}
 .pkb-bar i{display:block;height:100%;background:var(--pk-red);transform-origin:left}
-.pkb-combo.pkb-on .pkb-bar i{animation:pkb-drain 2.5s linear forwards}
+.pkb-combo.pkb-on .pkb-bar i.pkb-draining{animation:pkb-drain 2.5s linear forwards}
 @keyframes pkb-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
 .pkb-gw{position:relative}
 .pkb-grid{display:grid;grid-template-columns:repeat(var(--pk-n),minmax(0,1fr));gap:calc(12px*var(--pk-d))}
 .pkb-tile{position:relative;min-width:0;place-self:stretch;aspect-ratio:1/.82;background:var(--pk-paper);border:2.5px solid var(--pk-ink);border-radius:calc(16px*var(--pk-d));box-shadow:4px 4px 0 var(--pk-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6px*var(--pk-d));cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .1s,box-shadow .1s,background-color .25s}
-.pkb-tile:active:not(.pkb-free){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pk-ink)}
+.pkb-tile:active:not(.pkb-free):not(.pkb-lock){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pk-ink)}
 .pkb-tile input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
 .pkb-tile:has(input:focus-visible){outline:3px solid var(--pk-ink);outline-offset:3px}
 .pkb-emo{font-size:max(14px,calc(32px*var(--pk-s)));line-height:1;transition:opacity .2s}
@@ -373,6 +547,7 @@ var CSS = `
 .pkb-stamp{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;border-radius:50%;border:3px solid var(--pk-red);box-shadow:inset 0 0 0 2px var(--pk-paper),inset 0 0 0 4px var(--pk-red);color:var(--pk-red);display:grid;place-items:center;font-family:var(--pk-display);font-size:max(9px,calc(20px*var(--pk-s)));letter-spacing:.04em;opacity:0;transform:translate(-50%,-50%) rotate(-16deg) scale(1.7);transition:transform .25s cubic-bezier(.3,1.5,.5,1),opacity .15s;pointer-events:none}
 .pkb-tile.pkb-on .pkb-stamp{opacity:.9;transform:translate(-50%,-50%) rotate(-16deg) scale(1)}
 .pkb-tile.pkb-on .pkb-emo,.pkb-tile.pkb-on .pkb-lbl{opacity:.35}
+.pkb-tile.pkb-lock{cursor:default}
 .pkb-tile.pkb-free{cursor:default;container-type:inline-size}
 .pkb-tile.pkb-free .pkb-stamp{width:72%;opacity:1;transition:none;font-size:17cqi;letter-spacing:.02em;line-height:1;text-align:center;background:var(--pk-red);color:var(--pk-paper);border-color:var(--pk-red);box-shadow:inset 0 0 0 2px var(--pk-red),inset 0 0 0 4px var(--pk-paper)}
 .pkb-tile.pkb-line{background-color:var(--pk-mint)}
@@ -382,12 +557,14 @@ var CSS = `
 @keyframes pkb-aura{50%{box-shadow:4px 4px 0 var(--pk-ink),0 0 0 7px rgba(232,71,59,.35)}}
 .pkb-tile.pkb-reach::after{content:attr(data-reach);position:absolute;top:-11px;right:-8px;z-index:3;background:var(--pk-red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:2px solid var(--pk-ink);transform:rotate(6deg);animation:pkb-bob 1.1s ease-in-out infinite}
 @keyframes pkb-bob{50%{transform:rotate(6deg) translateY(-4px)}}
-.pkb-tile.pkb-squash{animation:pkb-squash .34s cubic-bezier(.3,1.6,.5,1)}
-@keyframes pkb-squash{0%{transform:scale(.88)}55%{transform:scale(1.05)}}
+.pkb-tile.pkb-squash{z-index:1;animation:pkb-squash .38s cubic-bezier(.16,1,.3,1)}
+@keyframes pkb-squash{0%{transform:translate(3px,4px) scale(calc(.9 - var(--pkb-impact,0)*.018));box-shadow:0 0 0 var(--pk-ink)}38%{transform:translateY(calc(-2px - var(--pkb-impact,0)*1px)) scale(calc(1.045 + var(--pkb-impact,0)*.012))}70%{transform:translateY(1px) scale(.985)}100%{transform:none}}
+.pkb-tile.pkb-on .pkb-stamp.pkb-hit{animation:pkb-stamp-hit .32s cubic-bezier(.16,1,.3,1) both}
+@keyframes pkb-stamp-hit{0%{opacity:0;transform:translate(-50%,-50%) rotate(-26deg) scale(2.1)}28%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(.88)}52%{transform:translate(-50%,-50%) rotate(-18deg) scale(1.08)}100%{opacity:.9;transform:translate(-50%,-50%) rotate(-16deg) scale(1)}}
 .pkb-tile.pkb-hop{animation:pkb-hop .55s cubic-bezier(.3,1.6,.5,1) var(--pkb-d,0ms) both}
 @keyframes pkb-hop{35%{transform:translateY(-14px) scale(1.07)}}
 .pkb-ring{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border:4px solid var(--pk-red);border-radius:50%;pointer-events:none;z-index:4;animation:pkb-ring .5s ease-out forwards}
-@keyframes pkb-ring{from{transform:translate(-50%,-50%) scale(.3);opacity:.9}to{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
+@keyframes pkb-ring{from{transform:translate(-50%,-50%) scale(.3);opacity:.9}to{transform:translate(-50%,-50%) scale(calc(1.9 + var(--pkb-impact,0)*.18));opacity:0}}
 .pkb-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2;transition:opacity .4s}
 .pkb-board.pkb-all .pkb-lines{opacity:0}
 .pkb-lines line{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
@@ -398,10 +575,11 @@ var CSS = `
 .pkb-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;margin-top:18px;font-weight:800;font-size:13px;word-break:auto-phrase}
 .pkb-foot>span{flex:1 1 14em}
 .pkb-foot>span:empty{flex-basis:0}
-.pkb-acts{display:flex;gap:8px;flex:none;margin-left:auto}
+.pkb-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;flex:0 1 auto;max-width:100%;margin-left:auto}
 .pkb-reset,.pkb-shuf{appearance:none;flex:none;border:2px solid var(--pk-ink);background:transparent;border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;line-height:1.4;color:var(--pk-ink);cursor:pointer}
 .pkb-shuf{background:var(--pk-paper);box-shadow:2px 2px 0 var(--pk-ink)}
-.pkb-shuf:active{transform:translate(2px,2px);box-shadow:none}
+.pkb-shuf:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
+.pkb-shuf:disabled{cursor:default;opacity:.4}
 .pkb-flash{position:absolute;inset:0;z-index:7;background:#fff;opacity:0;pointer-events:none}
 .pkb-flash.pkb-go{animation:pkb-flash .4s ease-out}
 @keyframes pkb-flash{0%{opacity:.8}100%{opacity:0}}
@@ -418,15 +596,43 @@ var CSS = `
 .pkb-float.pkb-big{font-size:clamp(14px,5.6cqi,34px);color:#FFE066}
 .pkb-float.pkb-rch{font-size:20px;color:var(--pk-red);-webkit-text-stroke:4px var(--pk-paper)}
 @keyframes pkb-rise{0%{opacity:0;transform:translate(-50%,-20%) scale(.4)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}30%{transform:translate(-50%,-70%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
+.pkb-ready{appearance:none;position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:20px;border:0;border-radius:inherit;background:rgba(42,31,20,.5);color:var(--pk-ink);font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .35s}
+.pkb-ready[hidden]{display:none}
+.pkb-ready:focus-visible{outline:3px solid var(--pk-ink);outline-offset:-6px}
+.pkb-ready.pkb-gone{pointer-events:none;background-color:transparent}
+.pkb-board.pkb-waiting .pkb-snd{position:relative;z-index:13}
+.pkb-ready-in,.pkb-count{grid-area:1/1}
+.pkb-ready-in{display:flex;flex-direction:column;align-items:center;width:min(400px,100%);padding:24px 22px 22px;border:2.5px solid var(--pk-ink);border-radius:22px;background:var(--pk-paper)}
+.pkb-ready.pkb-counting .pkb-ready-in{visibility:hidden}
+.pkb-ready-t{font-family:var(--pk-display);font-weight:400;font-size:clamp(26px,7.5cqi,36px);line-height:1.15;color:var(--pk-red)}
+.pkb-ready-q{margin-top:6px;font-weight:800;font-size:18px;line-height:1.4}
+.pkb-ready-l{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(42,31,20,.07);font-weight:800;font-size:16px;line-height:1.6;text-align:left;overflow-wrap:anywhere;word-break:auto-phrase}
+.pkb-ready-l>span::before{content:"\u30FB"}
+.pkb-ready-go{margin-top:18px;padding:10px 30px;border:2.5px solid var(--pk-ink);border-radius:999px;background:var(--pk-sun);font-weight:800;font-size:16px;line-height:1.4;box-shadow:3px 3px 0 var(--pk-ink);animation:pkb-beat 1.2s ease-in-out infinite}
+@keyframes pkb-beat{50%{transform:scale(1.06)}}
+.pkb-count{font-family:var(--pk-display);font-weight:400;line-height:1.1;paint-order:stroke fill;font-size:clamp(90px,34cqi,200px);color:var(--pk-sun);-webkit-text-stroke:5px var(--pk-ink);text-shadow:7px 7px 0 var(--pk-ink);opacity:0;pointer-events:none}
+.pkb-count.pkb-go{font-size:clamp(48px,17cqi,120px);color:var(--pk-red);white-space:nowrap}
+.pkb-count.pkb-tick{animation:pkb-cnt 1s cubic-bezier(.2,1.4,.4,1) forwards}
+.pkb-count.pkb-go.pkb-tick{animation:pkb-cnt-go .75s cubic-bezier(.2,1.4,.4,1) forwards}
+@keyframes pkb-cnt{0%{opacity:0;transform:scale(2.2)}18%{opacity:1;transform:scale(.92)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(.8)}}
+@keyframes pkb-cnt-go{0%{opacity:0;transform:scale(.4) rotate(-8deg)}25%{opacity:1;transform:scale(1.12) rotate(-5deg)}40%{transform:scale(1) rotate(-5deg)}70%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(-5deg)}}
+.pkb-ptime{display:inline-flex;align-items:baseline;gap:8px;margin:-4px 0 14px;padding:5px 16px 4px;border-radius:999px;background:var(--pk-ink);color:var(--pk-sun)}
+.pkb-ptime[hidden]{display:none}
+.pkb-ptime small{font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff}
+.pkb-ptime b{font-family:var(--pk-display);font-weight:400;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
 .pkb-perfect{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:20px;background:rgba(42,31,20,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
-.pkb-perfect.pkb-show{opacity:1;visibility:visible}
+/* Visible at once when opening (focus can't land on a hidden dialog); hidden only after the fade when closing. */
+.pkb-perfect.pkb-show{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
 .pkb-card{width:min(400px,100%);background:var(--pk-paper);border:2.5px solid var(--pk-ink);border-radius:22px;box-shadow:6px 6px 0 var(--pk-ink);padding:26px 22px 20px;text-align:center;transform:scale(.6) translateY(30px);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
 .pkb-perfect.pkb-show .pkb-card{transform:none}
 .pkb-medal{width:124px;height:124px;margin:0 auto 12px;border-radius:50%;border:5px solid var(--pk-red);box-shadow:inset 0 0 0 4px var(--pk-paper),inset 0 0 0 7px var(--pk-red);color:var(--pk-red);display:grid;place-content:center;font-family:var(--pk-display);font-size:26px;line-height:1.15;white-space:pre-line;opacity:0;transform:rotate(-14deg) scale(2.6)}
 .pkb-perfect.pkb-show .pkb-medal{animation:pkb-slam .38s cubic-bezier(.5,0,.75,0) .35s forwards}
+.pkb-perfect.pkb-settled,.pkb-perfect.pkb-settled .pkb-card{transition:none}
+.pkb-perfect.pkb-settled .pkb-medal{animation:none;opacity:1;transform:rotate(-14deg) scale(1)}
 @keyframes pkb-slam{to{opacity:1;transform:rotate(-14deg) scale(1)}}
 .pkb-ptitle{font-family:var(--pk-display);font-weight:400;font-size:30px;line-height:1.3;color:inherit}
 .pkb-pbody{font-weight:800;font-size:13.5px;line-height:1.6;margin:6px 0 14px;white-space:pre-line;word-break:auto-phrase}
+.pkb-pbody:empty{margin:0 0 14px}
 .pkb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
 .pkb-stats>div{border:2px solid var(--pk-ink);border-radius:12px;padding:6px 4px 5px;background:#fff}
 .pkb-stats small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em}
@@ -436,10 +642,72 @@ var CSS = `
 .pkb-fx{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}
 .pkb-demo{max-width:720px;margin:12px auto 4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--pk-body);font-size:12px;color:#666}
 .pkb-demo button{appearance:none;border:1px solid #ccc;background:#f3f3f3;color:#222;border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer}
-@container (max-width:560px){.pkb-board{padding:18px 14px 16px}.pkb-head{flex-direction:column;align-items:stretch;gap:12px}.pkb-score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pkb-pill,.pkb-pill.pkb-sc{min-width:0;padding:5px 4px 4px}.pkb-pill b{font-size:19px}.pkb-title{font-size:26px}.pkb-grid{gap:max(3px,calc(8px*var(--pk-d)))}.pkb-tile{border-radius:calc(12px*var(--pk-d));box-shadow:3px 3px 0 var(--pk-ink);gap:calc(3px*var(--pk-d));aspect-ratio:1/1}.pkb-emo{font-size:max(13px,calc(24px*var(--pk-s)))}.pkb-lbl{font-size:max(8.5px,calc(10.5px*var(--pk-s)));padding:0 calc(2px*var(--pk-d))}.pkb-stamp{font-size:max(9px,calc(14px*var(--pk-s)))}.pkb-tile.pkb-reach::after{font-size:9px;padding:2px 5px;top:-9px;right:-5px}.pkb-lines .pkb-u{stroke-width:calc(10px*var(--pk-d))}.pkb-lines .pkb-o{stroke-width:calc(5px*var(--pk-d))}.pkb-banner::before{width:380px;height:380px;margin:-190px 0 0 -190px}.pkb-banner span{font-size:12px}.pkb-medal{width:96px;height:96px;font-size:20px}.pkb-card{padding:20px 14px 16px}.pkb-ptitle{font-size:24px}.pkb-stats b{font-size:17px}.pkb-float.pkb-pt{font-size:17px}.pkb-float.pkb-cmb{font-size:13px}}
-@container (max-width:400px){.pkb-board{padding:16px 10px 14px}.pkb-grid{gap:max(3px,calc(6px*var(--pk-d)))}.pkb-lbl{font-size:max(8.5px,calc(10px*var(--pk-s)));padding:0 calc(1px*var(--pk-d))}.pkb-emo{font-size:max(12px,calc(22px*var(--pk-s)))}.pkb-stamp{font-size:max(9px,calc(13px*var(--pk-s)))}.pkb-foot{margin-top:14px;font-size:12px}.pkb-perfect{padding:12px}.pkb-stats{gap:6px}.pkb-stats>div{padding:6px 2px 5px}.pkb-stats small{letter-spacing:.02em}}
+.pkb-mode{position:relative;isolation:isolate;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:2px;border-radius:999px;background:var(--pk-ink);transition:box-shadow .4s}
+.pkb-mode::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%) no-repeat;background-size:250% 100%;background-position:200% 0;opacity:0}
+.pkb-mode button{appearance:none;position:relative;z-index:1;border:0;background:none;border-radius:999px;padding:3px 11px 2px;font-weight:800;font-size:11px;line-height:1.4;letter-spacing:.04em;white-space:nowrap;color:var(--pk-paper);opacity:.72;cursor:pointer;transition:color .3s,opacity .3s;-webkit-tap-highlight-color:transparent}
+.pkb-mode button[aria-checked="true"]{opacity:1;color:var(--pk-ink);cursor:default}
+.pkb-mode button:focus-visible{outline:2px solid var(--pk-paper);outline-offset:-4px}
+.pkb-mode-th{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:999px;background:var(--pk-sun);transition:transform .55s cubic-bezier(.3,1.45,.45,1)}
+.pkb.pkb-inf .pkb-mode{box-shadow:0 0 14px 1px rgba(155,93,229,.6)}
+.pkb.pkb-inf .pkb-mode::after{opacity:1;animation:pkb-glint 3.2s ease-in-out infinite}
+.pkb.pkb-inf .pkb-mode-th{transform:translateX(100%);background:linear-gradient(90deg,#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FF9F1C) 0 0/200% 100%;animation:pkb-rb 2.4s linear infinite}
+.pkb.pkb-inf .pkb-mode button[data-m="infinite"]{color:#fff;text-shadow:0 1px 1px rgba(42,31,20,.55)}
+.pkb-board.pkb-waiting .pkb-mode,.pkb-board.pkb-switching .pkb-mode{z-index:15}
+.pkb-board.pkb-switching .pkb-fx{z-index:16}
+.pkb.pkb-inf .pkb-board{border-color:transparent;background:radial-gradient(rgba(42,31,20,.12) 1.3px,transparent 1.6px) 0 0/16px 16px padding-box,linear-gradient(var(--pk-sun),var(--pk-sun)) padding-box,linear-gradient(120deg,#FF9F1C,#E8473B 22%,#9B5DE5 45%,#2F6FED 68%,#1FA971 88%,#FF9F1C) border-box;box-shadow:0 0 0 2px var(--pk-ink),0 10px 34px -10px rgba(155,93,229,.7)}
+.pkb.pkb-inf .pkb-demo [data-r="dP"],.pkb.pkb-inf .pkb-demo [data-r="dR"]{display:none}
+.pkb-ready-b,.pkb-ready-r{display:none}
+.pkb.pkb-inf .pkb-ready-in{border-color:transparent;background:linear-gradient(var(--pk-paper),var(--pk-paper)) padding-box,linear-gradient(120deg,#FF9F1C,#E8473B 22%,#9B5DE5 45%,#2F6FED 68%,#1FA971 88%,#FF9F1C) border-box;box-shadow:0 0 0 2px var(--pk-ink),0 0 32px rgba(155,93,229,.5)}
+.pkb.pkb-inf .pkb-ready-b{display:inline-block;margin-bottom:10px;padding:4px 14px 3px;border-radius:999px;background:linear-gradient(90deg,#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FF9F1C) 0 0/200% 100%;color:#fff;font-weight:800;font-size:13px;line-height:1.4;letter-spacing:.08em;text-shadow:0 1px 1px rgba(42,31,20,.5);box-shadow:0 0 14px rgba(155,93,229,.55);animation:pkb-rb 2.4s linear infinite}
+.pkb.pkb-inf .pkb-ready-r{display:block;margin-top:8px;font-weight:800;font-size:15px;line-height:1.5;word-break:auto-phrase}
+.pkb-tile.pkb-clr{animation:pkb-clr .62s var(--pkb-cd,0ms) both}
+@keyframes pkb-clr{0%{transform:perspective(600px) rotateY(0);animation-timing-function:cubic-bezier(.55,0,.9,.45)}42%{transform:perspective(600px) rotateY(90deg) scale(.9)}42.01%{transform:perspective(600px) rotateY(-90deg) scale(.9);animation-timing-function:cubic-bezier(.2,1.45,.4,1)}100%{transform:perspective(600px) rotateY(0)}}
+.pkb-mfx{position:absolute;inset:0;z-index:14;display:grid;place-items:center;overflow:hidden;border-radius:inherit;pointer-events:none;visibility:hidden;opacity:0;text-align:center}
+.pkb-mfx.pkb-show{visibility:visible;animation:pkb-mfx 1.7s ease-out forwards}
+@keyframes pkb-mfx{0%{opacity:0}9%{opacity:1}72%{opacity:1}100%{opacity:0}}
+.pkb-mfx-inf{background:radial-gradient(120% 95% at 50% 42%,#33205c 0%,#170f2e 52%,#08060f 100%)}
+.pkb-mfx-n{background:var(--pk-sun) radial-gradient(rgba(42,31,20,.16) 1.3px,transparent 1.6px) 0 0/16px 16px}
+.pkb-mfx::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-50%;width:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
+.pkb-mfx.pkb-show::after{animation:pkb-beam 1s cubic-bezier(.4,0,.2,1) .22s both}
+@keyframes pkb-beam{0%{opacity:1;transform:skewX(-18deg) translateX(0)}100%{opacity:1;transform:skewX(-18deg) translateX(400%)}}
+.pkb-mfx-glow{position:absolute;left:50%;top:46%;width:min(150cqi,1000px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FF9F1C);-webkit-mask:radial-gradient(circle,transparent 14%,#000 30%,rgba(0,0,0,.4) 48%,transparent 68%);mask:radial-gradient(circle,transparent 14%,#000 30%,rgba(0,0,0,.4) 48%,transparent 68%);filter:blur(28px);opacity:0}
+.pkb-mfx.pkb-show .pkb-mfx-glow{animation:pkb-spin 3s linear infinite,pkb-glow 1.7s ease-out both}
+@keyframes pkb-glow{0%{opacity:0;scale:.35}30%{opacity:.8;scale:1}100%{opacity:.5;scale:1.12}}
+.pkb-mfx i{position:absolute;left:var(--x);top:var(--y);width:calc(20px*var(--s));aspect-ratio:1;background:var(--c);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
+.pkb-mfx.pkb-show i{animation:pkb-twk .85s ease-in-out var(--t) both}
+@keyframes pkb-twk{0%{opacity:0;scale:0;rotate:0deg}45%{opacity:1;scale:1;rotate:70deg}100%{opacity:0;scale:.2;rotate:160deg}}
+.pkb-mfx-in{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 16px}
+.pkb-mfx-sym{display:block;font-family:var(--pk-display);font-weight:400;line-height:1}
+.pkb-mfx-inf .pkb-mfx-sym{font-size:clamp(110px,36cqi,230px);line-height:.9;padding:0 .06em;background:linear-gradient(90deg,#FFE066,#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FFE066) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(155,93,229,.9)) drop-shadow(0 0 3px rgba(255,255,255,.8))}
+.pkb-mfx.pkb-show.pkb-mfx-inf .pkb-mfx-sym{animation:pkb-sym 1.7s cubic-bezier(.2,1.25,.35,1) both,pkb-rb 1.7s linear both}
+@keyframes pkb-sym{0%{opacity:0;transform:scale(.25) rotate(-30deg)}26%{opacity:1;transform:scale(1.1) rotate(4deg)}38%{transform:scale(1) rotate(0)}100%{opacity:1;transform:scale(1.06)}}
+.pkb-mfx-n .pkb-mfx-sym{display:grid;place-items:center;width:clamp(110px,30cqi,170px);aspect-ratio:1;border-radius:50%;border:5px solid var(--pk-red);box-shadow:inset 0 0 0 4px var(--pk-sun),inset 0 0 0 7px var(--pk-red);color:var(--pk-red);font-size:clamp(34px,10cqi,56px);letter-spacing:.04em;transform:rotate(-14deg)}
+.pkb-mfx.pkb-show.pkb-mfx-n .pkb-mfx-sym{animation:pkb-mslam .42s cubic-bezier(.5,0,.75,0) .08s both}
+@keyframes pkb-mslam{from{opacity:0;transform:rotate(-14deg) scale(2.6)}to{opacity:1;transform:rotate(-14deg) scale(1)}}
+.pkb-mfx-t{display:block;margin-top:6px;font-family:var(--pk-display);font-weight:400;font-size:clamp(24px,8.5cqi,52px);line-height:1.1;letter-spacing:.2em;margin-right:-.2em;white-space:nowrap}
+.pkb-mfx-inf .pkb-mfx-t{color:#fff;text-shadow:0 0 18px rgba(155,93,229,.95),0 0 4px rgba(255,255,255,.9)}
+.pkb-mfx-n .pkb-mfx-t{margin-top:16px;color:var(--pk-ink)}
+.pkb-mfx.pkb-show .pkb-mfx-t{animation:pkb-track 1.7s cubic-bezier(.16,1,.3,1) .12s both}
+@keyframes pkb-track{0%{opacity:0;letter-spacing:.9em;margin-right:-.9em;filter:blur(8px)}40%{opacity:1;letter-spacing:.2em;margin-right:-.2em;filter:blur(0)}100%{opacity:1;letter-spacing:.24em;margin-right:-.24em}}
+.pkb-mfx-s{display:inline-block;margin-top:12px;padding:5px 16px 4px;border-radius:999px;font-weight:800;font-size:14px;line-height:1.4;letter-spacing:.06em}
+.pkb-mfx-inf .pkb-mfx-s{color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4)}
+.pkb-mfx-n .pkb-mfx-s{background:var(--pk-ink);color:var(--pk-sun)}
+.pkb-mfx.pkb-show .pkb-mfx-s{animation:pkb-up .6s cubic-bezier(.2,1.3,.4,1) .4s both}
+@keyframes pkb-up{from{opacity:0;transform:translateY(12px)}}
+.pkb-finbtn{display:none;appearance:none;flex:none;border:2px solid var(--pk-ink);border-radius:999px;padding:5px 14px;font-weight:800;font-size:12px;line-height:1.4;letter-spacing:.04em;color:#fff;text-shadow:0 1px 1px rgba(42,31,20,.55);background:linear-gradient(90deg,#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FF9F1C) 0 0/200% 100%;box-shadow:2px 2px 0 var(--pk-ink),0 0 12px rgba(155,93,229,.45);cursor:pointer;animation:pkb-rb 2.4s linear infinite}
+.pkb.pkb-inf .pkb-finbtn{display:inline-block}
+.pkb-finbtn:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
+.pkb-finbtn:disabled{cursor:default;opacity:.4;animation:none;box-shadow:2px 2px 0 var(--pk-ink)}
+.pkb-board.pkb-over .pkb-grid{opacity:.55;filter:saturate(.5);transition:opacity .4s,filter .4s}
+.pkb-pbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
+.pkb-perfect.pkb-fin .pkb-card{border-color:transparent;background:linear-gradient(var(--pk-paper),var(--pk-paper)) padding-box,linear-gradient(120deg,#FF9F1C,#E8473B 22%,#9B5DE5 45%,#2F6FED 68%,#1FA971 88%,#FF9F1C) border-box;box-shadow:0 0 0 2px var(--pk-ink),6px 6px 0 2px var(--pk-ink),0 0 40px rgba(155,93,229,.5)}
+.pkb-perfect.pkb-fin .pkb-medal{border-color:transparent;background:linear-gradient(var(--pk-paper),var(--pk-paper)) padding-box,conic-gradient(#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FF9F1C) border-box;box-shadow:0 0 18px rgba(155,93,229,.55);color:#7B3FD0;font-size:clamp(44px,14cqi,64px);line-height:1;text-shadow:0 0 12px rgba(155,93,229,.45)}
+.pkb-perfect.pkb-fin .pkb-again{background:linear-gradient(90deg,#FF9F1C,#E8473B,#9B5DE5,#2F6FED,#1FA971,#FF9F1C) 0 0/200% 100%;color:#fff;text-shadow:0 1px 1px rgba(42,31,20,.55);animation:pkb-rb 2.4s linear infinite}
+.pkb-perfect.pkb-fin .pkb-close:not(.pkb-again){background:var(--pk-paper)}
+@container (max-width:560px){.pkb-board{padding:18px 14px 16px}.pkb-head{flex-direction:column;align-items:stretch;gap:12px}.pkb-score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pkb-pill,.pkb-pill.pkb-sc{min-width:0;padding:5px 4px 4px}.pkb-pill b{font-size:19px}.pkb-title{font-size:26px}.pkb-grid{gap:max(3px,calc(8px*var(--pk-d)))}.pkb-tile{border-radius:calc(12px*var(--pk-d));box-shadow:3px 3px 0 var(--pk-ink);gap:calc(3px*var(--pk-d));aspect-ratio:1/1}.pkb-emo{font-size:max(13px,calc(24px*var(--pk-s)))}.pkb-lbl{font-size:max(8.5px,calc(10.5px*var(--pk-s)));padding:0 calc(2px*var(--pk-d))}.pkb-stamp{font-size:max(9px,calc(14px*var(--pk-s)))}.pkb-tile.pkb-reach::after{font-size:9px;padding:2px 5px;top:-9px;right:-5px}.pkb-lines .pkb-u{stroke-width:calc(10px*var(--pk-d))}.pkb-lines .pkb-o{stroke-width:calc(5px*var(--pk-d))}.pkb-banner::before{width:380px;height:380px;margin:-190px 0 0 -190px}.pkb-banner span{font-size:12px}.pkb-medal{width:96px;height:96px;font-size:20px}.pkb-card{padding:20px 14px 16px}.pkb-ptitle{font-size:24px}.pkb-stats b{font-size:17px}.pkb-float.pkb-pt{font-size:17px}.pkb-float.pkb-cmb{font-size:13px}.pkb-ready-in{padding:20px 16px 18px}.pkb-ready-l{font-size:15px;padding:10px 12px}.pkb-ready-go{font-size:15px}.pkb-ptime b{font-size:19px}}
+@container (max-width:400px){.pkb-board{padding:16px 10px 14px}.pkb-mode button{padding:3px 8px 2px}.pkb-grid{gap:max(3px,calc(6px*var(--pk-d)))}.pkb-lbl{font-size:max(8.5px,calc(10px*var(--pk-s)));padding:0 calc(1px*var(--pk-d))}.pkb-emo{font-size:max(12px,calc(22px*var(--pk-s)))}.pkb-stamp{font-size:max(9px,calc(13px*var(--pk-s)))}.pkb-foot{margin-top:14px;font-size:12px}.pkb-perfect,.pkb-ready{padding:12px}.pkb-stats{gap:6px}.pkb-stats>div{padding:6px 2px 5px}.pkb-stats small{letter-spacing:.02em}}
 @container (max-width:320px){.pkb-board{padding-inline:8px}.pkb-grid{gap:max(3px,calc(5px*var(--pk-d)))}.pkb-lbl{font-size:max(8.5px,calc(9.5px*var(--pk-s)));padding:0}}
-@media (prefers-reduced-motion:reduce){.pkb-board.pkb-shake,.pkb-board.pkb-punch,.pkb-flash.pkb-go,.pkb-tile.pkb-hop,.pkb-tile.pkb-squash,.pkb-tile.pkb-reach,.pkb-tile.pkb-line::before,.pkb-pill.pkb-hot,.pkb-bump,.pkb-tile.pkb-reach::after,.pkb-banner::before,.pkb-lines .pkb-draw line,.pkb-kicker.pkb-gold{animation:none}.pkb-banner.pkb-show{animation:pkb-fade 1.8s forwards}.pkb-float{animation:pkb-fade 1s both}.pkb-perfect.pkb-show .pkb-medal{animation:none;opacity:1;transform:rotate(-14deg)}.pkb-card{transition:none}}
+@media (prefers-reduced-motion:reduce){.pkb-board.pkb-shake,.pkb-board.pkb-punch,.pkb-flash.pkb-go,.pkb-tile.pkb-hop,.pkb-tile.pkb-squash,.pkb-tile.pkb-on .pkb-stamp.pkb-hit,.pkb-tile.pkb-reach,.pkb-tile.pkb-line::before,.pkb-pill.pkb-hot,.pkb-bump,.pkb-tile.pkb-reach::after,.pkb-banner::before,.pkb-lines .pkb-draw line,.pkb-kicker.pkb-gold,.pkb-ready-go,.pkb.pkb-inf .pkb-mode-th,.pkb.pkb-inf .pkb-mode::after,.pkb.pkb-inf .pkb-ready-b,.pkb-tile.pkb-clr,.pkb-finbtn,.pkb-perfect.pkb-fin .pkb-again,.pkb-mfx.pkb-show.pkb-mfx-inf .pkb-mfx-sym,.pkb-mfx.pkb-show.pkb-mfx-n .pkb-mfx-sym,.pkb-mfx.pkb-show .pkb-mfx-t,.pkb-mfx.pkb-show .pkb-mfx-s,.pkb-mfx.pkb-show .pkb-mfx-glow,.pkb-mfx.pkb-show::after{animation:none}.pkb-count.pkb-tick,.pkb-count.pkb-go.pkb-tick{animation:pkb-fade 1s forwards}.pkb-mfx.pkb-show{animation:pkb-fade 1.4s forwards}.pkb-mode-th{transition:none}.pkb-ready{transition:none}.pkb-banner.pkb-show{animation:pkb-fade 1.8s forwards}.pkb-float{animation:pkb-fade 1s both}.pkb-perfect.pkb-show .pkb-medal{animation:none;opacity:1;transform:rotate(-14deg)}.pkb-card,.pkb-tile,.pkb-stamp{transition:none}}
 @keyframes pkb-fade{0%,100%{opacity:0}15%,80%{opacity:1}}
 `;
 
@@ -466,7 +734,22 @@ function writeStore(key, value) {
 }
 var glintDelay = (c, n) => `${+((Math.floor(c / n) + c % n) * 0.36 / Math.max(1, n - 1)).toFixed(3)}s`;
 var lineKey = (l) => l.slice().sort((a, b) => a - b).join(",");
+var COUNT_MS = 1e3;
+var GO_MS = 750;
+function formatTime(ms, digits = 1) {
+  const unit = 10 ** digits;
+  const t = Math.floor(Math.max(0, ms) / (1e3 / unit));
+  const frac = digits ? "." + String(t % unit).padStart(digits, "0") : "";
+  const sec = Math.floor(t / unit), s = sec % 60, m = Math.floor(sec / 60) % 60, h = Math.floor(sec / 3600);
+  const pad = (v) => String(v).padStart(2, "0");
+  return (h ? `${h}:${pad(m)}` : String(m)) + `:${pad(s)}${frac}`;
+}
+function speedBonus(items, ms) {
+  return Math.round(items * 1e6 / Math.max(ms, 1));
+}
 var FLY_MS = 560;
+var CLEAR_MS = 1e3;
+var SPARK = ["#FFFFFF", "#FFE066", "#FF9F1C", "#E8473B", "#9B5DE5", "#2F6FED", "#1FA971"];
 function ensureStyles() {
   if (document.getElementById("pkb-styles")) return;
   const s = document.createElement("style");
@@ -474,7 +757,8 @@ function ensureStyles() {
   s.textContent = CSS;
   document.head.appendChild(s);
 }
-function template(L, M, { demo, shuffle, vibrate }) {
+var opt = (v, fallback) => v ?? fallback ?? "";
+function template(L, M, { demo, shuffle, vibrate, ready, modes }) {
   const n = L.size;
   const input = vibrate ? `<input type="checkbox" switch role="checkbox">` : `<input type="checkbox">`;
   const tiles = Array.from({ length: n * n }, (_, c) => {
@@ -486,9 +770,15 @@ function template(L, M, { demo, shuffle, vibrate }) {
   }).join("");
   const scale = `--pk-n:${n};--pk-s:${+Math.min(1.35, 4 / n).toFixed(3)};--pk-d:${+Math.min(1, 4 / n).toFixed(3)}`;
   const demoBar = demo ? `<div class="pkb-demo"><span>${esc(M.demoLabel)}</span><button type="button" data-r="dB">${esc(M.demoBingo)}</button><button type="button" data-r="dP">${esc(M.demoPerfect)}</button><button type="button" data-r="dR">${esc(M.demoRestore)}</button></div>` : "";
+  const hints = [opt(M.soundHint, ja.soundHint), vibrate ? opt(M.vibrationHint, ja.vibrationHint) : ""].filter((h) => h.trim());
+  const prompt = opt(M.readyPrompt, ja.readyPrompt);
+  const rule = opt(M.infiniteRule, ja.infiniteRule);
+  const readyScreen = ready ? `<button type="button" class="pkb-ready" data-r="ready"><span class="pkb-ready-in"><span class="pkb-ready-b">\u221E ${esc(M.infiniteSub?.trim() || ja.infiniteSub)}</span><b class="pkb-ready-t">${esc(M.readyTitle?.trim() || ja.readyTitle)}</b>` + (prompt.trim() ? `<span class="pkb-ready-q">${esc(prompt)}</span>` : "") + (rule.trim() ? `<span class="pkb-ready-r">${esc(rule)}</span>` : "") + (hints.length ? `<span class="pkb-ready-l">${hints.map((h) => `<span>${esc(h)}</span>`).join("")}</span>` : "") + `<span class="pkb-ready-go">${esc(M.readyTap?.trim() || ja.readyTap)}</span></span><b class="pkb-count" data-r="count" aria-live="assertive"></b></button>` : "";
+  const timeLabel = M.time?.trim() || ja.time;
+  const modeSwitch = modes ? `<span class="pkb-mode" data-r="mode" role="radiogroup" aria-label="${esc(M.modeLabel?.trim() || ja.modeLabel)}"><i class="pkb-mode-th" data-r="modeTh"></i><button type="button" role="radio" data-m="normal">${esc(M.modeNormal?.trim() || ja.modeNormal)}</button><button type="button" role="radio" data-m="infinite">${esc(M.modeInfinite?.trim() || ja.modeInfinite)}</button></span>` : "";
   return `<div class="pkb" style="${scale}"><div class="pkb-board">
 <div class="pkb-head"><div>
-<div class="pkb-tags"><span class="pkb-kicker" data-r="kick">${esc(M.tag)}</span><button type="button" class="pkb-snd" data-r="snd"></button></div>
+<div class="pkb-tags"><span class="pkb-kicker" data-r="kick">${esc(M.tag)}</span>${modeSwitch}<button type="button" class="pkb-snd" data-r="snd"></button><span class="pkb-watch" data-r="watch" role="timer" aria-label="${esc(timeLabel)}">${formatTime(0)}</span></div>
 <h2 class="pkb-title">${esc(M.title)}</h2>${M.subtitle ? `<p class="pkb-sub">${esc(M.subtitle)}</p>` : ""}</div>
 <div class="pkb-side"><div class="pkb-score">
 <div class="pkb-pill"><small>${esc(M.packed)}</small><b data-r="cnt"></b></div>
@@ -497,13 +787,14 @@ function template(L, M, { demo, shuffle, vibrate }) {
 <div class="pkb-combo" data-r="combo"><b data-r="cmbN"></b><span class="pkb-bar"><i data-r="cbar"></i></span></div></div></div>
 <div class="pkb-gw"><div class="pkb-grid">${tiles}</div><svg class="pkb-lines" aria-hidden="true"></svg>
 <div class="pkb-banner" data-r="banner" aria-hidden="true"><b data-r="bT"></b><span data-r="bS"></span></div></div>
-<div class="pkb-foot"><span data-r="msg" aria-live="polite"></span><div class="pkb-acts">${shuffle ? `<button type="button" class="pkb-shuf" data-r="shuf">${esc(M.shuffle)}</button>` : ""}<button type="button" class="pkb-reset" data-r="reset">${esc(M.reset)}</button></div></div>
+<div class="pkb-foot"><span data-r="msg" aria-live="polite"></span><div class="pkb-acts"><button type="button" class="pkb-finbtn" data-r="fin" disabled>${esc(M.finish?.trim() || ja.finish)}</button>${shuffle ? `<button type="button" class="pkb-shuf" data-r="shuf">${esc(M.shuffle)}</button>` : ""}<button type="button" class="pkb-reset" data-r="reset">${esc(M.reset)}</button></div></div>
 <div class="pkb-flash" data-r="flash"></div>
-<div class="pkb-perfect" data-r="perfect"><div class="pkb-card" role="dialog" aria-label="${esc(M.perfectTitle)}">
-<div class="pkb-medal">${esc(M.perfectStamp)}</div><h3 class="pkb-ptitle">${esc(M.perfectTitle)}</h3><p class="pkb-pbody" data-r="pbody">${esc(perfectText(M, L.items.length))}</p>
+<div class="pkb-perfect" data-r="perfect"><div class="pkb-card" data-r="pcard" role="dialog" aria-label="${esc(M.perfectTitle)}">
+<div class="pkb-medal" data-r="medal">${esc(M.perfectStamp)}</div><h3 class="pkb-ptitle" data-r="ptitle">${esc(M.perfectTitle)}</h3><p class="pkb-pbody" data-r="pbody">${esc(perfectText(M, L.items.length))}</p>
+<p class="pkb-ptime" data-r="ptime" hidden><small data-r="pTl">${esc(M.statTime?.trim() || ja.statTime)}</small><b data-r="pT"></b></p>
 <div class="pkb-stats"><div><small>${esc(M.statScore)}</small><b data-r="sScore">0</b></div><div><small>${esc(M.statCombo)}</small><b data-r="sCombo">\xD70</b></div><div><small>${esc(M.statLines)}</small><b data-r="sBingo">0</b></div></div>
-<button type="button" class="pkb-close" data-r="close">${esc(M.close)}</button></div></div>
-<canvas class="pkb-fx"></canvas></div>${demoBar}</div>`;
+<div class="pkb-pbtns"><button type="button" class="pkb-close pkb-again" data-r="again" hidden>${esc(M.again?.trim() || ja.again)}</button><button type="button" class="pkb-close" data-r="close">${esc(M.close)}</button></div></div></div>
+<canvas class="pkb-fx"></canvas>${readyScreen}<div class="pkb-mfx" data-r="mfx" aria-hidden="true"></div></div>${demoBar}</div>`;
 }
 var perfectText = (M, total) => typeof M.perfectBody === "function" ? M.perfectBody(total) : M.perfectBody;
 function createPackingBingo(container, options = {}) {
@@ -535,7 +826,15 @@ function createPackingBingo(container, options = {}) {
   const orderKey = storageKey && ORDER_PREFIX + storageKey;
   const demo = !!options.demo;
   const vibrate = options.vibrate !== false;
+  const uncheck = options.uncheck === true;
   const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const haptics = createHaptics(vibrate);
+  let mode = options.mode === "infinite" ? "infinite" : "normal";
+  const inf = () => mode === "infinite";
+  let packing = null;
+  let cleared = 0;
+  const pending = /* @__PURE__ */ new Set();
+  let clearTimer = 0, clearAt = 0;
   let dead = false;
   const timers = /* @__PURE__ */ new Set();
   const later = (fn, ms) => {
@@ -548,12 +847,19 @@ function createPackingBingo(container, options = {}) {
   const wait = (ms) => new Promise((r) => window.setTimeout(r, ms));
   let gen = 0;
   ensureStyles();
-  container.innerHTML = template(L, M, { demo, shuffle: options.shuffle !== false, vibrate });
+  container.innerHTML = template(L, M, {
+    demo,
+    shuffle: options.shuffle !== false,
+    vibrate,
+    ready: options.ready !== false,
+    modes: options.modeSwitch !== false
+  });
   const $ = (r) => {
     const el = container.querySelector(`[data-r="${r}"]`);
     if (!el) throw new Error(`[packing-bingo] internal: missing element "${r}"`);
     return el;
   };
+  const root = container.querySelector(".pkb");
   const board = container.querySelector(".pkb-board");
   const gw = container.querySelector(".pkb-gw");
   const grid = container.querySelector(".pkb-grid");
@@ -564,12 +870,15 @@ function createPackingBingo(container, options = {}) {
   const tiles = L.itemCell.map((c) => cellTiles[c]);
   const freeTile = L.center >= 0 ? cellTiles[L.center] : null;
   const ins = tiles.map((t) => t.querySelector("input"));
-  const kick = $("kick"), snd = $("snd"), perfectEl = $("perfect");
+  const stamps = tiles.map((t) => t.querySelector(".pkb-stamp"));
+  const kick = $("kick"), snd = $("snd"), perfectEl = $("perfect"), mfx = $("mfx");
   let checked = normalize(void 0);
   let cur = [];
   let prevLines = /* @__PURE__ */ new Set();
   let prevReach = /* @__PURE__ */ new Set();
   let prevAll = false;
+  let perfectPending = false, restorePerfectFocus = false;
+  let perfectBeat;
   let lastN = 0;
   let score = 0, shown = 0, combo = 0, maxCombo = 0, lastT = 0, gotP = false;
   const got = /* @__PURE__ */ new Set(), gotL = /* @__PURE__ */ new Set();
@@ -583,6 +892,7 @@ function createPackingBingo(container, options = {}) {
   snd.addEventListener("click", () => {
     muted = !muted;
     writeStore(MUTE_KEY, muted ? "1" : "0");
+    if (muted) sfx.stop();
     setSnd();
     if (!muted) sfx.pop(4);
   });
@@ -597,7 +907,7 @@ function createPackingBingo(container, options = {}) {
     cv.width = Math.round(BW * dpr);
     cv.height = Math.round(BH * dpr);
   };
-  const piece = (x, y, vx, vy, g, s, life, shape2) => ({
+  const piece = (x, y, vx, vy, g, s, life, shape2, colors = CONFETTI) => ({
     x,
     y,
     vx,
@@ -609,7 +919,7 @@ function createPackingBingo(container, options = {}) {
     h: (3 + Math.random() * 5) * s,
     r: Math.random() * 6,
     vr: (Math.random() - 0.5) * 0.35,
-    c: CONFETTI[Math.random() * CONFETTI.length | 0]
+    c: colors[Math.random() * colors.length | 0]
   });
   const go = () => {
     if (!raf && ctx) raf = requestAnimationFrame(tick);
@@ -620,7 +930,7 @@ function createPackingBingo(container, options = {}) {
       const a = (o.angle ?? -Math.PI / 2) + (Math.random() - 0.5) * (o.spread ?? Math.PI * 2);
       const v = (o.speed ?? 10) * (0.35 + Math.random() * 0.85);
       const sh = Math.random() < (o.star ?? 0.15) ? "star" : Math.random() < 0.3 ? "round" : "rect";
-      P.push(piece(x, y, Math.cos(a) * v, Math.sin(a) * v, o.g ?? 0.28, o.size ?? 1, (o.life ?? 110) + Math.random() * 40, sh));
+      P.push(piece(x, y, Math.cos(a) * v, Math.sin(a) * v, o.g ?? 0.28, o.size ?? 1, (o.life ?? 110) + Math.random() * 40, sh, o.colors));
     }
     go();
   }
@@ -715,8 +1025,10 @@ function createPackingBingo(container, options = {}) {
   };
   grid.addEventListener("animationend", (e) => {
     const t = e.target;
+    if (e.animationName === "pkb-stamp-hit") t.classList.remove("pkb-hit");
     if (t.classList.contains("pkb-tile") && (e.animationName === "pkb-hop" || e.animationName === "pkb-squash"))
       t.classList.remove(e.animationName);
+    if (t.classList.contains("pkb-tile") && e.animationName === "pkb-clr") t.classList.remove("pkb-clr");
   });
   const ring = (t) => {
     const r = document.createElement("span");
@@ -724,15 +1036,6 @@ function createPackingBingo(container, options = {}) {
     t.appendChild(r);
     r.addEventListener("animationend", () => r.remove());
   };
-  const buzz = (pattern) => {
-    if (!vibrate) return;
-    const ua = navigator.userActivation;
-    if (ua && !ua.hasBeenActive) return;
-    try {
-      navigator.vibrate?.(pattern);
-    } catch {
-    }
-  };
   const floatText = (txt, x, y, cls, delay = 0, color) => {
     const el = document.createElement("div");
     el.className = "pkb-float pkb-" + cls;
@@ -744,20 +1047,20 @@ function createPackingBingo(container, options = {}) {
     board.appendChild(el);
     el.addEventListener("animationend", () => el.remove());
   };
-  const prog = (t, t0, d) => Math.max(0, Math.min(1, (t - t0) / d));
+  const prog = (t, t02, d) => Math.max(0, Math.min(1, (t - t02) / d));
   const ease = (k) => 1 - Math.pow(1 - k, 3);
   let tw = 0;
   function countScore() {
     cancelAnimationFrame(tw);
-    const a = shown, b = score, t0 = performance.now();
+    const a = shown, b = score, t02 = performance.now();
     const st = (t) => {
       if (dead) return;
-      const k = prog(t, t0, 450);
+      const k = prog(t, t02, 450);
       shown = Math.round(a + (b - a) * ease(k));
       $("sc").textContent = shown.toLocaleString();
       if (k < 1) tw = requestAnimationFrame(st);
     };
-    st(t0);
+    st(t02);
     if (!calm) replay($("sp"), "pkb-bump");
   }
   const showGain = (pts, x, y, cls = "pt") => {
@@ -765,12 +1068,12 @@ function createPackingBingo(container, options = {}) {
     countScore();
   };
   function countUp(el, a, b, d, fmt, ticks = false) {
-    const t0 = performance.now();
+    const t02 = performance.now();
     const g = gen;
     let lt = 0;
     const st = (t) => {
       if (dead || g !== gen) return;
-      const k = prog(t, t0, d);
+      const k = prog(t, t02, d);
       el.textContent = fmt(Math.round(a + (b - a) * ease(k)));
       if (ticks && k < 1 && t - lt > 55) {
         sfx.tick();
@@ -779,7 +1082,7 @@ function createPackingBingo(container, options = {}) {
       if (k < 1) requestAnimationFrame(st);
       else if (!calm) replay(el, "pkb-bump");
     };
-    st(t0);
+    st(t02);
   }
   const ctr = (t) => {
     return { x: t.offsetLeft + t.offsetWidth / 2, y: t.offsetTop + t.offsetHeight / 2 };
@@ -798,25 +1101,147 @@ function createPackingBingo(container, options = {}) {
       return `<g${fresh.includes(k) ? ' class="pkb-draw"' : ""}><line class="pkb-u" ${at}/><line class="pkb-o" ${at}/></g>`;
     }).join("");
   }
-  function tapFx(i, on) {
+  const readyEl = container.querySelector('[data-r="ready"]');
+  const watch = $("watch");
+  let phase = "idle";
+  let t0 = 0, watchTimer = 0;
+  let finalMs = null;
+  const cdTimers = /* @__PURE__ */ new Set();
+  const cd = (fn, ms) => {
+    const id = window.setTimeout(() => {
+      cdTimers.delete(id);
+      if (!dead) fn();
+    }, ms);
+    cdTimers.add(id);
+  };
+  const stopTimers = () => {
+    cdTimers.forEach((id) => clearTimeout(id));
+    cdTimers.clear();
+    clearInterval(watchTimer);
+  };
+  const elapsed = () => phase === "play" ? performance.now() - t0 : finalMs ?? 0;
+  const showWatch = () => {
+    watch.textContent = formatTime(elapsed());
+  };
+  function startWatch() {
+    phase = "play";
+    t0 = performance.now();
+    finalMs = null;
+    clearInterval(watchTimer);
+    watchTimer = window.setInterval(showWatch, 100);
+    watch.classList.remove("pkb-done");
+    watch.classList.add("pkb-run");
+    showWatch();
+    syncFin();
+  }
+  const finBtn = $("fin");
+  const shufBtn = container.querySelector('[data-r="shuf"]');
+  const syncFin = () => {
+    finBtn.disabled = !(inf() && phase === "play");
+    if (shufBtn) shufBtn.disabled = inf() && phase === "done";
+  };
+  function finish() {
+    if (phase === "play") {
+      finalMs = performance.now() - t0;
+      watch.classList.replace("pkb-run", "pkb-done");
+    } else if (phase !== "done") {
+      stopTimers();
+      openGrid(false);
+    }
+    phase = "done";
+    clearInterval(watchTimer);
+    showWatch();
+  }
+  function openGrid(fade) {
+    grid.removeAttribute("inert");
+    if (!readyEl || readyEl.hidden) return;
+    const focused = document.activeElement === readyEl;
+    readyEl.classList.add("pkb-gone");
+    board.classList.remove("pkb-waiting");
+    readyEl.tabIndex = -1;
+    if (focused) grid.querySelector("input")?.focus({ preventScroll: true });
+    if (fade) cd(() => readyEl.hidden = true, GO_MS);
+    else readyEl.hidden = true;
+  }
+  function toReady() {
+    stopTimers();
+    finalMs = null;
+    watch.classList.remove("pkb-run", "pkb-done");
+    phase = readyEl ? "ready" : "idle";
+    showWatch();
+    syncFin();
+    board.classList.remove("pkb-over");
+    grid.removeAttribute("inert");
+    if (!readyEl) return;
+    readyEl.hidden = false;
+    readyEl.removeAttribute("tabindex");
+    readyEl.classList.remove("pkb-gone", "pkb-counting");
+    board.classList.add("pkb-waiting");
+    $("count").textContent = "";
+    grid.setAttribute("inert", "");
+  }
+  let resetAsked = false;
+  const restartGame = () => {
+    if (!controlled || !checked.some(Boolean)) toReady();
+    else resetAsked = true;
+  };
+  function skipReady() {
+    if (phase === "play" || phase === "done") return;
+    stopTimers();
+    openGrid(false);
+    startWatch();
+  }
+  function countdown() {
+    if (phase !== "ready") return;
+    phase = "count";
+    readyEl.classList.add("pkb-counting");
+    const count = $("count");
+    const words = ["3", "2", "1", M.readyGo?.trim() || ja.readyGo];
+    words.forEach((word, k) => {
+      const go2 = k === words.length - 1;
+      const step = () => {
+        count.textContent = word;
+        count.classList.toggle("pkb-go", go2);
+        replay(count, "pkb-tick");
+        sfx.count(go2);
+        haptics.play(go2 ? "go" : "count");
+        if (go2) {
+          startWatch();
+          openGrid(true);
+        }
+      };
+      if (k) cd(step, k * COUNT_MS);
+      else step();
+    });
+  }
+  readyEl?.addEventListener("click", countdown);
+  function tapFx(i, on, moment, fresh) {
     const p = rel(tiles[i]);
     if (!on) {
+      stamps[i].classList.remove("pkb-hit");
       combo = 0;
       $("combo").classList.remove("pkb-on");
       sfx.off();
-      buzz(8);
+      haptics.play("off");
       return;
     }
     const now = performance.now();
     combo = now - lastT < COMBO_MS ? combo + 1 : 1;
     lastT = now;
     maxCombo = Math.max(maxCombo, combo);
+    const seqLength = new Set(fresh.flatMap((k) => cellLines[k])).size;
+    const impactAt = Math.min(70 * seqLength, 300) + 60;
+    const beat = haptics.play(moment, combo, fresh.length, impactAt);
+    perfectBeat = moment === "perfect" ? beat : void 0;
+    const energy = Math.min(3, Math.floor(combo / 3));
     sfx.pop(combo - 1);
     if (!calm) {
+      tiles[i].style.setProperty("--pkb-impact", String(energy));
       replay(tiles[i], "pkb-squash");
+      replay(stamps[i], "pkb-hit");
       ring(tiles[i]);
     }
-    burst(p.x, p.y, 18, { speed: 6, g: 0.2, life: 30, size: 0.6, star: 0.5 });
+    burst(p.x, p.y, 18 + energy * 6, { speed: 6 + energy, g: 0.2, life: 30, size: 0.6, star: 0.5 });
     if (!got.has(i)) {
       got.add(i);
       score += 10 * combo;
@@ -825,9 +1250,10 @@ function createPackingBingo(container, options = {}) {
     if (combo >= 2) {
       floatText(M.comboPop(combo), p.x, p.y + 22, "cmb", 90, COMBO_COLORS[(combo - 2) % COMBO_COLORS.length]);
       $("cmbN").textContent = M.combo(combo);
-      replay($("combo"), "pkb-on");
+      $("combo").classList.add("pkb-on");
+      replay($("cbar"), "pkb-draining");
+      if (!calm) replay($("cmbN"), "pkb-bump");
     }
-    buzz(18);
   }
   $("cbar").addEventListener("animationend", () => {
     $("combo").classList.remove("pkb-on");
@@ -840,7 +1266,7 @@ function createPackingBingo(container, options = {}) {
     });
     later(() => sfx.reach(), 150);
   }
-  function bingo(fresh, pts) {
+  function bingo(fresh, pts, total) {
     const nl = fresh.length;
     const seq = [...new Set(fresh.flatMap((k) => cellLines[k]))].map((c) => cellTiles[c]);
     const step = Math.min(70, 300 / seq.length);
@@ -854,7 +1280,7 @@ function createPackingBingo(container, options = {}) {
     );
     later(() => {
       $("bT").textContent = nl >= 3 ? M.bannerTriple : nl === 2 ? M.bannerDouble : M.bannerSingle;
-      $("bS").textContent = nl > 1 ? M.bannerMulti(nl) : M.bannerNth(cur.length);
+      $("bS").textContent = nl > 1 ? M.bannerMulti(nl) : M.bannerNth(total);
       replay($("banner"), "pkb-show");
       if (!calm) {
         replay($("flash"), "pkb-go");
@@ -863,54 +1289,126 @@ function createPackingBingo(container, options = {}) {
       const c = rel(gw);
       burst(c.x, c.y, nl > 1 ? 180 : 110, { speed: nl > 1 ? 16 : 13, star: 0.3 });
       sfx.bingo(nl);
-      buzz(nl > 1 ? [40, 60, 40, 60, 90] : [40, 60, 40]);
       if (pts) later(() => showGain(pts, c.x, c.y + 105, "big"), 350);
     }, seq.length * step + 60);
   }
   function perfect(events) {
+    const beat = perfectBeat;
+    perfectPending = true;
+    perfectEl.classList.remove("pkb-settled");
     const bonus = gotP ? 0 : 1e3;
+    const speed = gotP || finalMs == null ? 0 : speedBonus(N, finalMs);
     gotP = true;
-    score += bonus;
+    score += bonus + speed;
     cellTiles.forEach((t, c) => hop(t, far(c) * 180 / Math.max(1, n - 1)));
     sfx.perfect();
     if (!calm) replay($("flash"), "pkb-go");
+    setResult(false);
     $("pbody").textContent = perfectText(M, N);
+    $("ptime").hidden = finalMs == null;
+    $("pT").textContent = formatTime(finalMs ?? 0, 2);
     $("sScore").textContent = "0";
     $("sCombo").textContent = "\xD70";
     $("sBingo").textContent = "0";
     later(() => {
+      perfectPending = false;
       replay(perfectEl, "pkb-show");
       $("close").focus({ preventScroll: true });
       later(() => {
         if (!calm) replay(board, "pkb-shake");
         sfx.boom();
+        beat?.(PERFECT_STAMP_BEAT);
         burst(0, BH, 90, { angle: -Math.PI / 3, spread: 0.8, speed: 22, g: 0.32, star: 0.3 });
         burst(BW, BH, 90, { angle: -Math.PI * 2 / 3, spread: 0.8, speed: 22, g: 0.32, star: 0.3 });
         rain(3500);
-        buzz([60, 80, 60, 80, 200]);
         if (bonus) floatText(M.perfectBonus(bonus), BW / 2, BH * 0.16, "big");
+        const gap = Math.min(34, Math.max(14, BW * 0.056)) * 1.3 + 6;
+        if (speed) floatText((M.speedBonus ?? ja.speedBonus)(speed), BW / 2, Math.max(gap / 2 + 4, BH * 0.16 - gap), "big");
         countUp($("sScore"), 0, score, 1300, (v) => v.toLocaleString(), true);
         countUp($("sCombo"), 0, maxCombo, 700, (v) => "\xD7" + v);
-        countUp($("sBingo"), 0, cur.length, 700, String);
+        countUp($("sBingo"), 0, resultLines(), 700, String);
         countScore();
-      }, 720);
-      [1300, 1650, 2e3, 2350, 2700].forEach(
-        (t) => later(() => firework(BW * (0.15 + Math.random() * 0.7), BH * (0.12 + Math.random() * 0.3)), t)
-      );
+      }, PERFECT_STAMP_DELAY_MS);
       later(() => emojiRain(3e3), 1500);
-    }, 520);
-    const e = { score, maxCombo };
+    }, PERFECT_REVEAL_MS);
+    PERFECT_FIREWORKS.forEach(
+      ({ at, beat: pulse }) => later(() => {
+        firework(BW * (0.15 + Math.random() * 0.7), BH * (0.12 + Math.random() * 0.3));
+        beat?.(pulse);
+      }, at)
+    );
+    const e = { score, maxCombo, time: finalMs == null ? null : Math.round(finalMs), speedBonus: speed };
     events.push(() => options.onPerfect?.(e));
   }
+  function clearNow(animate) {
+    clearTimeout(clearTimer);
+    clearTimer = 0;
+    if (!pending.size) return;
+    const gone = [...pending].filter((i) => checked[i]);
+    pending.clear();
+    checked = checked.slice();
+    gone.forEach((i) => {
+      checked[i] = false;
+      ins[i].checked = false;
+      got.delete(i);
+    });
+    gotL.clear();
+    const left = completeLines();
+    left.forEach((k) => gotL.add(lineKey(lines[k])));
+    prevLines = new Set(left);
+    render(null, true);
+    if (!animate || !gone.length) return;
+    sfx.clear(gone.length);
+    gone.forEach((i, j) => {
+      const t = tiles[i];
+      if (!calm) {
+        t.style.setProperty("--pkb-cd", Math.min(j * 28, 280) + "ms");
+        t.classList.remove("pkb-squash", "pkb-hop");
+        replay(t, "pkb-clr");
+      }
+      const p = rel(t);
+      burst(p.x, p.y, 9, { speed: 4.5, g: 0.06, life: 45, size: 0.75, star: 1, colors: SPARK.slice(1) });
+    });
+  }
+  function scheduleClear(ms) {
+    const at = performance.now() + ms;
+    if (clearTimer && at <= clearAt) return;
+    clearTimeout(clearTimer);
+    clearAt = at;
+    clearTimer = window.setTimeout(() => {
+      clearTimer = 0;
+      if (!dead) clearNow(true);
+    }, ms);
+  }
+  const dropClear = () => {
+    clearTimeout(clearTimer);
+    clearTimer = 0;
+    pending.clear();
+  };
+  function setResult(fin) {
+    const title = fin ? M.finishTitle?.trim() || ja.finishTitle : M.perfectTitle;
+    perfectEl.classList.toggle("pkb-fin", fin);
+    $("pcard").setAttribute("aria-label", title);
+    $("medal").textContent = fin ? M.finishStamp?.trim() || ja.finishStamp : M.perfectStamp;
+    $("ptitle").textContent = title;
+    $("pTl").textContent = fin ? M.finishTime?.trim() || ja.finishTime : M.statTime?.trim() || ja.statTime;
+    $("again").hidden = !fin;
+  }
+  const resultLines = () => inf() ? cleared : cur.length;
+  const resultFocus = () => $(perfectEl.classList.contains("pkb-fin") ? "again" : "close");
   function cancelFx() {
+    if (pending.size) clearNow(false);
     gen++;
+    perfectPending = false;
     timers.forEach((id) => clearTimeout(id));
     timers.clear();
+    haptics.stop();
+    sfx.stop();
     cancelAnimationFrame(tw);
     shown = score;
     $("sc").textContent = score.toLocaleString();
   }
-  function clearVisuals() {
+  function clearVisuals(keepPerfect = false) {
     P = [];
     cancelAnimationFrame(raf);
     raf = 0;
@@ -919,18 +1417,33 @@ function createPackingBingo(container, options = {}) {
     $("banner").classList.remove("pkb-show");
     $("flash").classList.remove("pkb-go");
     $("combo").classList.remove("pkb-on");
-    perfectEl.classList.remove("pkb-show");
+    $("cbar").classList.remove("pkb-draining");
+    cellTiles.forEach((t) => t.classList.remove("pkb-squash", "pkb-hop", "pkb-clr"));
+    stamps.forEach((s) => s.classList.remove("pkb-hit"));
+    board.classList.remove("pkb-punch", "pkb-shake", "pkb-switching");
+    mfx.classList.remove("pkb-show");
+    if (!keepPerfect) perfectEl.classList.remove("pkb-show", "pkb-settled");
   }
   const completeLines = () => lines.flatMap((l, k) => l.every((i) => checked[i]) ? [k] : []);
   function render(src, quiet) {
     const events = [];
     const on = checked, c = on.filter(Boolean).length;
+    const endless = inf();
+    const all = c === N && !endless;
     cur = completeLines();
     const fresh = cur.filter((k) => !prevLines.has(k));
     if ([...prevLines].some((k) => !cur.includes(k))) {
       cancelFx();
       if (c < N) perfectEl.classList.remove("pkb-show");
     }
+    if (endless) {
+      if (!quiet) cleared += fresh.length;
+      if (cur.length) {
+        const known = pending.size;
+        cur.forEach((k) => lines[k].forEach((i) => pending.add(i)));
+        if (pending.size > known || !clearTimer) scheduleClear(!quiet && fresh.length ? CLEAR_MS : FLY_MS + 200);
+      }
+    }
     const hit = new Set(cur.flatMap((k) => cellLines[k]));
     const reach = /* @__PURE__ */ new Set();
     for (const l of lines) {
@@ -939,34 +1452,43 @@ function createPackingBingo(container, options = {}) {
     }
     tiles.forEach((t, i) => {
       t.classList.toggle("pkb-on", on[i]);
+      const lock = on[i] && (!uncheck || pending.has(i));
+      t.classList.toggle("pkb-lock", lock);
+      if (lock) ins[i].setAttribute("aria-readonly", "true");
+      else ins[i].removeAttribute("aria-readonly");
       t.classList.toggle("pkb-line", hit.has(L.itemCell[slotOf[i]]));
       t.classList.toggle("pkb-reach", reach.has(i));
     });
     freeTile?.classList.toggle("pkb-line", hit.has(L.center));
-    board.classList.toggle("pkb-all", c === N);
-    kick.classList.toggle("pkb-gold", c === N);
-    kick.textContent = c === N ? M.perfectTag : M.tag;
+    board.classList.toggle("pkb-all", all);
+    kick.classList.toggle("pkb-gold", all);
+    kick.textContent = all ? M.perfectTag : M.tag;
     $("cnt").textContent = `${c}/${N}`;
-    $("bng").textContent = String(cur.length);
+    const total = endless ? cleared : cur.length;
+    $("bng").textContent = String(total);
     const bp = $("bp");
-    if (cur.length > lastN) {
+    if (total > lastN) {
       bp.classList.remove("pkb-hot");
       void bp.offsetWidth;
     }
-    bp.classList.toggle("pkb-hot", cur.length > 0);
-    lastN = cur.length;
+    bp.classList.toggle("pkb-hot", total > 0);
+    lastN = total;
     drawLines(fresh);
-    if (src !== null) tapFx(src, on[src]);
+    if (src !== null) {
+      const newReach = [...reach].some((i) => !prevReach.has(i));
+      const moment = !quiet && all && !prevAll ? "perfect" : !quiet && fresh.length ? "bingo" : !quiet && newReach ? "reach" : "tap";
+      tapFx(src, on[src], moment, fresh);
+    }
     const newL = fresh.map((k) => lineKey(lines[k])).filter((key) => !gotL.has(key));
     newL.forEach((key) => gotL.add(key));
     const linePts = 100 * newL.length * newL.length;
     score += linePts;
     if (quiet) {
       if (linePts) countScore();
-    } else if (c === N && !prevAll) perfect(events);
+    } else if (all && !prevAll) perfect(events);
     else if (fresh.length) {
-      bingo(fresh, linePts);
-      const e = { newLines: fresh, totalLines: cur.length, score };
+      bingo(fresh, linePts, total);
+      const e = { newLines: fresh, totalLines: total, score, mode };
       events.push(() => options.onBingo?.(e));
     } else if (src !== null && on[src]) {
       const nr = [...reach].filter((i) => !prevReach.has(i));
@@ -974,9 +1496,9 @@ function createPackingBingo(container, options = {}) {
     }
     prevLines = new Set(cur);
     prevReach = reach;
-    prevAll = c === N;
+    prevAll = all;
     const labels = [...reach].map((i) => items[i].label);
-    $("msg").textContent = c === N ? M.statusDone : labels.length ? M.statusReach(labels) : cur.length ? M.statusLines(cur.length, N - c) : M.statusStart(N - c);
+    $("msg").textContent = all ? M.statusDone : labels.length ? M.statusReach(labels) : cur.length ? M.statusLines(cur.length, N - c) : M.statusStart(N - c);
     return events;
   }
   const flush = (events) => {
@@ -986,9 +1508,11 @@ function createPackingBingo(container, options = {}) {
     }
   };
   const save = () => {
-    if (storageKey) writeStore(storageKey, JSON.stringify(checked));
+    if (storageKey && !inf()) writeStore(storageKey, JSON.stringify(checked));
   };
   function apply(next, src, quiet) {
+    if (phase === "idle" && src !== null && next[src]) startWatch();
+    if (!inf() && next.every(Boolean)) finish();
     checked = next;
     ins.forEach((x, i) => x.checked = checked[i]);
     const events = render(src, quiet);
@@ -996,8 +1520,12 @@ function createPackingBingo(container, options = {}) {
     return events;
   }
   function baseline(next) {
+    dropClear();
+    cleared = 0;
     cancelFx();
     clearVisuals();
+    if (!inf() && next.every(Boolean)) finish();
+    else if ((phase === "play" || phase === "done") && !next.some(Boolean)) toReady();
     checked = next;
     ins.forEach((x, i) => x.checked = checked[i]);
     got.clear();
@@ -1007,7 +1535,7 @@ function createPackingBingo(container, options = {}) {
     done.forEach((k) => gotL.add(lineKey(lines[k])));
     prevLines = new Set(done);
     prevReach = /* @__PURE__ */ new Set();
-    prevAll = checked.every(Boolean);
+    prevAll = !inf() && checked.every(Boolean);
     gotP = prevAll;
     score = shown = got.size * 10 + gotL.size * 100;
     combo = 0;
@@ -1017,7 +1545,9 @@ function createPackingBingo(container, options = {}) {
     save();
   }
   function request(next, src, opts = {}) {
-    if (controlled) {
+    const game = inf();
+    if (controlled && !game) {
+      resetAsked = !!opts.reset && resetAsked;
       ins.forEach((x, i) => x.checked = checked[i]);
       options.onChange?.(next.slice());
       return;
@@ -1025,7 +1555,7 @@ function createPackingBingo(container, options = {}) {
     let events = [];
     if (opts.reset) baseline(next);
     else events = apply(next, src, !!opts.quiet);
-    options.onChange?.(checked.slice());
+    if (!game) options.onChange?.(checked.slice());
     flush(events);
   }
   function place(next) {
@@ -1044,12 +1574,12 @@ function createPackingBingo(container, options = {}) {
       focused.focus({ preventScroll: true });
   }
   const saveOrder = () => {
-    if (!orderKey) return;
+    if (!orderKey || inf()) return;
     writeStore(orderKey, JSON.stringify(order));
   };
   let flights = [];
   function arrange(next) {
-    if (!checked.every(Boolean)) cancelFx();
+    if (inf() || !checked.every(Boolean)) cancelFx();
     const from = calm ? null : tiles.map((t) => t.getBoundingClientRect());
     flights.forEach((a) => a.cancel());
     flights = [];
@@ -1085,6 +1615,7 @@ function createPackingBingo(container, options = {}) {
     svg.innerHTML = "";
   }
   function shuffleCard() {
+    if (inf() && phase === "done") return;
     let next = order.slice();
     do {
       for (let s = N - 1; s > 0; s--) {
@@ -1094,31 +1625,98 @@ function createPackingBingo(container, options = {}) {
     } while (next.every((v, s) => v === order[s]));
     arrange(next);
     sfx.shuffle();
-    buzz([10, 40, 10, 40, 10, 40, 24]);
+    haptics.play("shuffle");
   }
   const unshuffle = () => {
     if (!isIdentity(order)) arrange(identity());
   };
+  const locked = (i) => checked[i] && (!uncheck || pending.has(i));
+  grid.addEventListener("click", (e) => {
+    const i = ins.indexOf(e.target);
+    if (i >= 0 && locked(i)) e.preventDefault();
+  });
   grid.addEventListener("change", (e) => {
     const i = ins.indexOf(e.target);
     if (i < 0) return;
+    if (locked(i)) {
+      ins[i].checked = true;
+      return;
+    }
     const next = checked.slice();
     next[i] = !next[i];
     request(next, i);
   });
   container.querySelector('[data-r="shuf"]')?.addEventListener("click", shuffleCard);
+  const restartInfinite = () => {
+    baseline(normalize(void 0));
+    toReady();
+  };
   $("reset").addEventListener("click", () => {
+    if (inf()) return restartInfinite();
     unshuffle();
+    restartGame();
     request(normalize(void 0), null, { reset: true });
   });
   $("close").addEventListener("click", () => perfectEl.classList.remove("pkb-show"));
+  $("again").addEventListener("click", () => {
+    if (!inf()) return;
+    restartInfinite();
+    (readyEl && !readyEl.hidden ? readyEl : grid.querySelector("input"))?.focus({ preventScroll: true });
+  });
+  function finishGame() {
+    if (dead || !inf() || phase !== "play") return;
+    cancelFx();
+    clearVisuals();
+    finalMs = performance.now() - t0;
+    phase = "done";
+    clearInterval(watchTimer);
+    watch.classList.replace("pkb-run", "pkb-done");
+    showWatch();
+    syncFin();
+    combo = 0;
+    grid.setAttribute("inert", "");
+    board.classList.add("pkb-over");
+    setResult(true);
+    $("pbody").textContent = "";
+    $("ptime").hidden = false;
+    $("pT").textContent = formatTime(finalMs, 2);
+    $("sScore").textContent = "0";
+    $("sCombo").textContent = "\xD70";
+    $("sBingo").textContent = "0";
+    perfectEl.classList.remove("pkb-settled");
+    replay(perfectEl, "pkb-show");
+    resultFocus().focus({ preventScroll: true });
+    sfx.perfect();
+    const beat = haptics.play("finish");
+    if (!calm) replay($("flash"), "pkb-go");
+    later(() => {
+      if (!calm) replay(board, "pkb-shake");
+      sfx.boom();
+      beat?.(PERFECT_STAMP_BEAT);
+      burst(0, BH, 80, { angle: -Math.PI / 3, spread: 0.8, speed: 21, g: 0.32, star: 0.5, colors: SPARK });
+      burst(BW, BH, 80, { angle: -Math.PI * 2 / 3, spread: 0.8, speed: 21, g: 0.32, star: 0.5, colors: SPARK });
+      rain(2500);
+      countUp($("sScore"), 0, score, 1300, (v) => v.toLocaleString(), true);
+      countUp($("sCombo"), 0, maxCombo, 700, (v) => "\xD7" + v);
+      countUp($("sBingo"), 0, cleared, 700, String);
+    }, PERFECT_STAMP_DELAY_MS);
+    [1250, 1700, 2200].forEach(
+      (at, k) => later(() => {
+        firework(BW * (0.15 + Math.random() * 0.7), BH * (0.12 + Math.random() * 0.3));
+        beat?.(PERFECT_FIREWORKS[k * 2].beat);
+      }, at)
+    );
+    const e = { score, maxCombo, lines: cleared, time: Math.round(finalMs) };
+    options.onFinish?.(e);
+  }
+  finBtn.addEventListener("click", finishGame);
   perfectEl.addEventListener("click", (e) => {
     if (e.target === perfectEl) perfectEl.classList.remove("pkb-show");
   });
   if (demo) {
     let busy = false;
     const prepare = () => {
-      if (checked.every(Boolean)) request(normalize(void 0), null, { reset: true });
+      if (!inf() && checked.every(Boolean)) request(normalize(void 0), null, { reset: true });
       else perfectEl.classList.remove("pkb-show");
     };
     const run = async (steps) => {
@@ -1126,6 +1724,7 @@ function createPackingBingo(container, options = {}) {
       busy = true;
       try {
         prepare();
+        skipReady();
         const g = gen;
         for (const s of steps) {
           await wait(s.delay);
@@ -1139,21 +1738,100 @@ function createPackingBingo(container, options = {}) {
       }
     };
     $("dB").addEventListener("click", () => {
+      if (inf() && phase === "done") return;
       const open = () => lines.map((l) => l.filter((i) => !checked[i])).filter((m) => m.length).sort((a, b) => a.length - b.length)[0] ?? [];
-      const pick = checked.every(Boolean) ? [...lines[0]] : open();
+      const pick = !inf() && checked.every(Boolean) ? [...lines[0]] : open();
       void run(pick.map((i) => ({ i, delay: 320 })));
     });
     $("dP").addEventListener("click", () => {
+      if (inf()) return;
       const all = items.map((_, i) => i);
       const miss = checked.every(Boolean) ? all : all.filter((i) => !checked[i]);
       void run(miss.map((i, k) => k < miss.length - 1 ? { i, delay: 170, quiet: true } : { i, delay: 450 }));
     });
     $("dR").addEventListener("click", () => {
-      if (busy) return;
+      if (busy || inf()) return;
       unshuffle();
+      restartGame();
       request(demoStart(), null, { reset: true });
     });
   }
+  const modeEl = container.querySelector('[data-r="mode"]');
+  const radios = modeEl ? Array.from(modeEl.querySelectorAll("button[data-m]")) : [];
+  const syncMode = () => {
+    root.classList.toggle("pkb-inf", inf());
+    radios.forEach((b) => {
+      const on = b.dataset.m === mode;
+      b.setAttribute("aria-checked", String(on));
+      b.tabIndex = on ? 0 : -1;
+    });
+  };
+  function modeFx() {
+    const endless = inf();
+    const title = endless ? M.infiniteTitle?.trim() || ja.infiniteTitle : M.normalTitle?.trim() || ja.normalTitle;
+    const sub = endless ? M.infiniteSub?.trim() || ja.infiniteSub : M.normalSub?.trim() || ja.normalSub;
+    const sparks = endless && !calm ? Array.from({ length: 18 }, (_, k) => {
+      const x = (5 + Math.random() * 90).toFixed(1), y = (6 + Math.random() * 88).toFixed(1);
+      const s = (0.45 + Math.random() * 0.95).toFixed(2), t = Math.round(100 + Math.random() * 950);
+      return `<i style="--x:${x}%;--y:${y}%;--s:${s};--t:${t}ms;--c:${SPARK[k % SPARK.length]}"></i>`;
+    }).join("") : "";
+    mfx.className = "pkb-mfx " + (endless ? "pkb-mfx-inf" : "pkb-mfx-n");
+    mfx.innerHTML = (endless ? `<span class="pkb-mfx-glow"></span>` : "") + sparks + `<span class="pkb-mfx-in"><b class="pkb-mfx-sym">${endless ? "\u221E" : esc(M.stamp)}</b><b class="pkb-mfx-t">${esc(title)}</b><span class="pkb-mfx-s">${esc(sub)}</span></span>`;
+    replay(mfx, "pkb-show");
+    board.classList.add("pkb-switching");
+    if (modeEl && !calm) replay(modeEl, "pkb-bump");
+    sfx.mode(endless);
+    haptics.play(endless ? "infinite" : "normal");
+    const picked = radios.find((b) => b.dataset.m === mode);
+    if (picked) {
+      const p = rel(picked);
+      burst(p.x, p.y, endless ? 46 : 24, { speed: endless ? 7 : 5, g: 0.1, life: 55, size: 0.8, star: endless ? 0.9 : 0.3, colors: endless ? SPARK : void 0 });
+    }
+    later(() => {
+      const c = rel(gw);
+      if (endless) burst(c.x, c.y, 90, { speed: 12, g: 0.07, life: 90, star: 0.75, colors: SPARK });
+      else {
+        if (!calm) replay(board, "pkb-punch");
+        burst(c.x, c.y, 70, { speed: 11, star: 0.2 });
+      }
+    }, endless ? 260 : 430);
+  }
+  mfx.addEventListener("animationend", (e) => {
+    if (e.target !== mfx) return;
+    mfx.classList.remove("pkb-show");
+    board.classList.remove("pkb-switching");
+    mfx.innerHTML = "";
+  });
+  function setMode(next) {
+    if (dead || next === mode || next !== "normal" && next !== "infinite") return;
+    const back = packing;
+    if (next === "infinite") packing = { checked: checked.slice(), order: order.slice() };
+    else packing = null;
+    mode = next;
+    resetAsked = false;
+    if (back && back.order.some((v, s) => v !== order[s])) {
+      flights.forEach((a) => a.cancel());
+      flights = [];
+      clearTimeout(landing);
+      landing = 0;
+      place(back.order);
+    }
+    syncMode();
+    toReady();
+    baseline(back ? back.checked : normalize(void 0));
+    modeFx();
+    options.onModeChange?.(mode);
+  }
+  modeEl?.addEventListener("click", (e) => {
+    const b = e.target.closest("button[data-m]");
+    if (b) setMode(b.dataset.m);
+  });
+  modeEl?.addEventListener("keydown", (e) => {
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+    e.preventDefault();
+    setMode(inf() ? "normal" : "infinite");
+    radios.find((b) => b.dataset.m === mode)?.focus();
+  });
   let startOrder = null;
   if (orderKey) {
     try {
@@ -1175,17 +1853,47 @@ function createPackingBingo(container, options = {}) {
   if (!initial && options.defaultChecked) initial = normalize(options.defaultChecked);
   if (!initial && demo) initial = demoStart();
   fit();
-  baseline(initial ?? normalize(void 0));
+  if (inf()) packing = { checked: initial ?? normalize(void 0), order: order.slice() };
+  syncMode();
+  baseline(inf() ? normalize(void 0) : initial ?? normalize(void 0));
+  if (phase !== "done") toReady();
   const ro = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
     fit();
     drawLines();
   }) : null;
   ro?.observe(board);
   ro?.observe(gw);
+  const onVisibility = () => {
+    if (!document.hidden) {
+      if (restorePerfectFocus && perfectEl.classList.contains("pkb-show")) resultFocus().focus({ preventScroll: true });
+      restorePerfectFocus = false;
+      return;
+    }
+    const keepPerfect = perfectPending || perfectEl.classList.contains("pkb-show");
+    restorePerfectFocus = keepPerfect;
+    cancelFx();
+    clearVisuals(keepPerfect);
+    if (keepPerfect) {
+      $("sScore").textContent = score.toLocaleString();
+      $("sCombo").textContent = "\xD7" + maxCombo;
+      $("sBingo").textContent = String(resultLines());
+      perfectEl.classList.add("pkb-show", "pkb-settled");
+    }
+    combo = 0;
+  };
+  document.addEventListener("visibilitychange", onVisibility);
   return {
     setChecked(next, opts = {}) {
       if (dead) return;
       const n2 = normalize(next);
+      if (packing) {
+        packing.checked = n2;
+        resetAsked = false;
+        if (storageKey) writeStore(storageKey, JSON.stringify(n2));
+        return;
+      }
+      if (resetAsked && !n2.some(Boolean)) toReady();
+      resetAsked = false;
       const changed = n2.flatMap((v, i) => v !== checked[i] ? [i] : []);
       if (!changed.length) return;
       if (!opts.animate || changed.length !== 1) {
@@ -1196,12 +1904,20 @@ function createPackingBingo(container, options = {}) {
     },
     reset() {
       if (dead) return;
+      if (inf()) return restartInfinite();
       unshuffle();
+      restartGame();
       request(normalize(void 0), null, { reset: true });
     },
     shuffle() {
       if (!dead) shuffleCard();
     },
+    setMode(next) {
+      setMode(next);
+    },
+    finish() {
+      finishGame();
+    },
     refresh() {
       if (!dead) render(null, true);
     },
@@ -1211,22 +1927,31 @@ function createPackingBingo(container, options = {}) {
         lines: cur.slice(),
         score,
         maxCombo,
-        complete: checked.every(Boolean),
+        complete: !inf() && checked.every(Boolean),
+        mode,
+        cleared,
+        finished: inf() && phase === "done",
+        packing: packing && { checked: packing.checked.slice(), order: packing.order.slice() },
         size: n,
         free: L.free,
-        order: order.slice()
+        order: order.slice(),
+        time: Math.round(elapsed())
       };
     },
     destroy() {
       if (dead) return;
       dead = true;
+      stopTimers();
       timers.forEach((id) => clearTimeout(id));
       timers.clear();
       clearTimeout(landing);
+      clearTimeout(clearTimer);
       flights.forEach((a) => a.cancel());
       cancelAnimationFrame(raf);
       cancelAnimationFrame(tw);
       ro?.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      haptics.stop();
       sfx.close();
       container.innerHTML = "";
     }
@@ -1236,11 +1961,12 @@ function createPackingBingo(container, options = {}) {
 // src/react.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, ref) {
-  const { checked, defaultChecked, defaultOrder, className, style, onChange, onBingo, onPerfect, messages, fonts: _fonts, ...config } = props;
+  const { checked, defaultChecked, defaultOrder, className, style, onChange, onBingo, onPerfect, onModeChange, onFinish, mode, messages, fonts: _fonts, ...config } = props;
   const host = (0, import_react.useRef)(null);
   const inst = (0, import_react.useRef)(null);
-  const callbacks = (0, import_react.useRef)({ onChange, onBingo, onPerfect });
-  callbacks.current = { onChange, onBingo, onPerfect };
+  const callbacks = (0, import_react.useRef)({ onChange, onBingo, onPerfect, onModeChange, onFinish });
+  callbacks.current = { onChange, onBingo, onPerfect, onModeChange, onFinish };
+  const latestMode = (0, import_react.useRef)(mode);
   const messagesRef = (0, import_react.useRef)(messages);
   messagesRef.current = messages;
   const controlled = checked !== void 0;
@@ -1270,13 +1996,20 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
         callbacks.current.onChange?.(next);
       },
       onBingo: (e) => callbacks.current.onBingo?.(e),
-      onPerfect: (e) => callbacks.current.onPerfect?.(e)
+      onPerfect: (e) => callbacks.current.onPerfect?.(e),
+      onFinish: (e) => callbacks.current.onFinish?.(e),
+      mode: latestMode.current,
+      onModeChange: (m) => {
+        latestMode.current = m;
+        callbacks.current.onModeChange?.(m);
+      }
     });
     inst.current = instance;
     return () => {
       const state = instance.getState();
-      if (!controlled) latest.current = state.checked;
-      latestOrder.current = state.order;
+      const packed = state.packing ?? state;
+      if (!controlled) latest.current = packed.checked;
+      latestOrder.current = packed.order;
       latestKey.current = storageKey;
       instance.destroy();
       if (inst.current === instance) inst.current = null;
@@ -1288,11 +2021,16 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
   (0, import_react.useEffect)(() => {
     if (controlled && checked) inst.current?.setChecked(checked, { animate: true });
   }, [controlled, checked]);
+  (0, import_react.useEffect)(() => {
+    if (mode) inst.current?.setMode(mode);
+  }, [mode]);
   (0, import_react.useImperativeHandle)(
     ref,
     () => ({
       reset: () => inst.current?.reset(),
       shuffle: () => inst.current?.shuffle(),
+      setMode: (m) => inst.current?.setMode(m),
+      finish: () => inst.current?.finish(),
       setChecked: (next) => inst.current?.setChecked(next, { animate: true }),
       getState: () => inst.current?.getState() ?? null
     }),
@@ -1308,5 +2046,6 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
   bingoLines,
   createPackingBingo,
   en,
-  ja
+  ja,
+  speedBonus
 });