packing-bingo 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(src_exports, {
   DEFAULT_ITEMS: () => DEFAULT_ITEMS,
   LINES: () => LINES,
   PackingBingo: () => PackingBingo,
+  bingoLines: () => bingoLines,
   createPackingBingo: () => createPackingBingo,
   en: () => en,
   ja: () => ja
@@ -35,38 +36,109 @@ var import_react = require("react");
 
 // src/items.ts
 var DEFAULT_ITEMS = [
-  { emoji: "\u{1F4D6}", label: "\u65C5\u306E\u3057\u304A\u308A" },
-  { emoji: "\u{1FAAA}", label: "\u751F\u5F92\u624B\u5E33" },
-  { emoji: "\u{1F3E5}", label: "\u4FDD\u967A\u8A3C\u30B3\u30D4\u30FC" },
-  { emoji: "\u{1F45B}", label: "\u304A\u3053\u3065\u304B\u3044" },
-  { emoji: "\u{1F455}", label: "\u7740\u66FF\u3048" },
-  { emoji: "\u{1F319}", label: "\u30D1\u30B8\u30E3\u30DE" },
-  { emoji: "\u{1F9E5}", label: "\u4E0A\u7740" },
-  { emoji: "\u{1FAA5}", label: "\u6D17\u9762\u7528\u5177" },
-  { emoji: "\u{1F6C1}", label: "\u30BF\u30AA\u30EB" },
-  { emoji: "\u{1F927}", label: "\u30CF\u30F3\u30AB\u30C1\u30FB\u30C6\u30A3\u30C3\u30B7\u30E5" },
+  { emoji: "\u{1F45B}", label: "\u8CA1\u5E03" },
+  { emoji: "\u{1F4F1}", label: "\u30B9\u30DE\u30DB" },
+  { emoji: "\u{1F50B}", label: "\u30E2\u30D0\u30A4\u30EB\u200B\u5145\u96FB\u5668" },
+  { emoji: "\u{1F4CB}", label: "\u5065\u5EB7\u8ABF\u67FB\u7968" },
+  { emoji: "\u{1FAAA}", label: "\u30DE\u30A4\u30CA\u30AB\u30FC\u30C9\u200B\u307E\u305F\u306F\u4FDD\u967A\u8A3C" },
+  { emoji: "\u{1F4D6}", label: "\u3057\u304A\u308A" },
   { emoji: "\u{1F637}", label: "\u30DE\u30B9\u30AF" },
-  { emoji: "\u{1F48A}", label: "\u5E38\u5099\u85AC\u30FB\u9154\u3044\u6B62\u3081" },
-  { emoji: "\u2602\uFE0F", label: "\u6298\u308A\u305F\u305F\u307F\u5098" },
-  { emoji: "\u270F\uFE0F", label: "\u7B46\u8A18\u7528\u5177" },
+  { emoji: "\u{1F927}", label: "\u30CF\u30F3\u30AB\u30C1" },
+  { emoji: "\u{1F48A}", label: "\u5E38\u5099\u85AC" },
   { emoji: "\u{1F6CD}\uFE0F", label: "\u30D3\u30CB\u30FC\u30EB\u888B" },
-  { emoji: "\u{1F4F1}", label: "\u30B9\u30DE\u30DB\u30FB\u5145\u96FB\u5668" }
+  { emoji: "\u{1F9E4}", label: "\u8ECD\u624B\uFF08\u5B66\u6821\u652F\u7D66\uFF09" },
+  { emoji: "\u{1F526}", label: "\u30D8\u30C3\u30C9\u30E9\u30A4\u30C8" },
+  { emoji: "\u{1F455}", label: "\u30B8\u30E3\u30FC\u30B8" },
+  { emoji: "\u2614", label: "\u96E8\u5177" },
+  { emoji: "\u{1F6C1}", label: "\u30BF\u30AA\u30EB" },
+  { emoji: "\u{1F9F4}", label: "\u65E5\u713C\u3051\u6B62\u3081" }
 ];
 
+// src/layout.ts
+var MIN_SIZE = 2;
+var MAX_SIZE = 10;
+var fail = (msg) => {
+  throw new Error(`[packing-bingo] ${msg}`);
+};
+function layoutItems(options) {
+  if (options.items) return options.items;
+  const n = options.size;
+  if (n == null || !Number.isInteger(n) || n < MIN_SIZE) return DEFAULT_ITEMS;
+  return DEFAULT_ITEMS.slice(0, n * n - (options.free ? 1 : 0));
+}
+function checkSize(size, free) {
+  if (!Number.isInteger(size) || size < MIN_SIZE || size > MAX_SIZE)
+    fail(`"size" must be a whole number from ${MIN_SIZE} to ${MAX_SIZE} (got ${size}).`);
+  if (free && size % 2 === 0) fail(`"free" needs an odd size such as 3 or 5, so that the card has a center (got ${size}).`);
+}
+function shape(n, free) {
+  const seq = (f) => Array.from({ length: n }, (_, k) => f(k));
+  const cellLines = [
+    ...seq((r) => seq((c) => r * n + c)),
+    // rows
+    ...seq((c) => seq((r) => r * n + c)),
+    // columns
+    seq((k) => k * (n + 1)),
+    // top left to bottom right
+    seq((k) => (k + 1) * (n - 1))
+    // top right to bottom left
+  ];
+  const center = free ? (n * n - 1) / 2 : -1;
+  const toItem = (c) => free && c > center ? c - 1 : c;
+  return { center, cellLines, lines: cellLines.map((l) => l.filter((c) => c !== center).map(toItem)) };
+}
+function resolveLayout(options) {
+  const items = layoutItems(options);
+  const free = !!options.free;
+  let size = options.size;
+  if (size == null) {
+    const len = items.length;
+    const sideOf = (cells) => {
+      const r = Math.round(Math.sqrt(cells));
+      return r * r === cells && r >= MIN_SIZE && r <= MAX_SIZE ? r : 0;
+    };
+    size = sideOf(len + (free ? 1 : 0));
+    if (!size) {
+      const other = sideOf(len + (free ? 0 : 1));
+      const hint = free ? other ? `; ${len} items fill a ${other}\xD7${other} card without "free"` : "" : other % 2 ? `, or set "free" for a ${other}\xD7${other} card with a FREE center` : "";
+      fail(
+        free ? `With "free", "items" must have one less than an odd square number of entries (8, 24, 48, 80)${hint} (got ${len}).` : `"items" must have a square number of entries (4, 9, 16, 25, \u2026, 100)${hint} (got ${len}).`
+      );
+    }
+  }
+  checkSize(size, free);
+  const want = size * size - (free ? 1 : 0);
+  if (items.length !== want) {
+    const card = `a ${size}\xD7${size} card${free ? " with a FREE center" : ""}`;
+    fail(
+      options.items ? `"items" must have exactly ${want} entries for ${card} (got ${items.length}).` : `A ${card.slice(2)} needs ${want} items, but DEFAULT_ITEMS has only ${DEFAULT_ITEMS.length}. Pass "items".`
+    );
+  }
+  const { center, cellLines, lines } = shape(size, free);
+  const itemCell = items.map((_, i) => free && i >= center ? i + 1 : i);
+  return { size, free, items, itemCell, center, cellLines, lines };
+}
+function bingoLines(size, free = false) {
+  checkSize(size, free);
+  return shape(size, free).lines;
+}
+
 // src/messages.ts
 var ja = {
   title: "\u6301\u3061\u3082\u306E\u30D3\u30F3\u30B4",
-  tag: "\u4FEE\u5B66\u65C5\u884C",
-  subtitle: "\u30BF\u30C3\u30D7\u3067\u30B9\u30BF\u30F3\u30D7\u3002\u30BF\u30C6\u30FB\u30E8\u30B3\u30FB\u30CA\u30CA\u30E1\u3067\u30D3\u30F3\u30B4\uFF01",
+  tag: "",
+  subtitle: "",
   packed: "\u305D\u308D\u3063\u305F",
   bingo: "BINGO",
   score: "SCORE",
   combo: (n) => `${n} COMBO`,
   comboPop: (n) => `${n} COMBO!`,
   reset: "\u30EA\u30BB\u30C3\u30C8",
+  shuffle: "\u{1F500} \u30B7\u30E3\u30C3\u30D5\u30EB",
   soundOn: "\u{1F50A} \u97F3\u3042\u308A",
   soundOff: "\u{1F507} \u97F3\u306A\u3057",
   stamp: "OK",
+  free: "FREE",
   reachBadge: "\u30EA\u30FC\u30C1",
   reachPop: "\u30EA\u30FC\u30C1!",
   bannerSingle: "BINGO!",
@@ -74,14 +146,15 @@ var ja = {
   bannerTriple: "\u30C8\u30EA\u30D7\u30EB\u30D3\u30F3\u30B4!",
   bannerNth: (n) => `${n} \u30E9\u30A4\u30F3\u76EE\uFF01`,
   bannerMulti: (n) => `\u4E00\u6C17\u306B ${n} \u30E9\u30A4\u30F3\uFF01`,
-  statusStart: (left) => `\u306E\u3053\u308A ${left} \u3053\u3002\u307E\u305A\u306F1\u30E9\u30A4\u30F3\u305D\u308D\u3048\u3088\u3046`,
+  statusStart: () => "",
   statusLines: (lines, left) => `\u30D3\u30F3\u30B4 ${lines} \u30E9\u30A4\u30F3\uFF01 \u306E\u3053\u308A ${left} \u3053`,
-  statusReach: (labels) => `\u30EA\u30FC\u30C1\uFF01 \u3042\u3068${labels.slice(0, 2).map((l) => `\u300C${l}\u300D`).join("\u304B")}${labels.length > 2 ? "\u306A\u3069" : ""}\u3067\u30D3\u30F3\u30B4`,
+  statusReach: () => "",
   statusDone: "\u{1F389} \u30D1\u30FC\u30D5\u30A7\u30AF\u30C8\uFF01\u5FD8\u308C\u7269\u30BC\u30ED\u3067\u51FA\u767A\u3067\u304D\u307E\u3059",
   perfectTag: "\u{1F3C6} PERFECT",
   perfectStamp: "\u6E96\u5099\n\u5B8C\u4E86",
   perfectTitle: "\u30D1\u30FC\u30D5\u30A7\u30AF\u30C8\uFF01",
-  perfectBody: "16\u3053 \u305C\u3093\u3076\u305D\u308D\u3063\u305F\uFF01\n\u5FD8\u308C\u7269\u30BC\u30ED\u3067\u3001\u3044\u3063\u3066\u3089\u3063\u3057\u3083\u3044\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`,
   perfectBonus: (n) => `PERFECT BONUS +${n}`,
   statScore: "SCORE",
   statCombo: "MAX COMBO",
@@ -94,17 +167,19 @@ var ja = {
 };
 var en = {
   title: "Packing Bingo",
-  tag: "School trip",
-  subtitle: "Tap to stamp. Rows, columns and diagonals all count!",
+  tag: "",
+  subtitle: "",
   packed: "PACKED",
   bingo: "BINGO",
   score: "SCORE",
   combo: (n) => `${n} COMBO`,
   comboPop: (n) => `${n} COMBO!`,
   reset: "Reset",
+  shuffle: "\u{1F500} Shuffle",
   soundOn: "\u{1F50A} Sound on",
   soundOff: "\u{1F507} Muted",
   stamp: "OK",
+  free: "FREE",
   reachBadge: "REACH",
   reachPop: "Reach!",
   bannerSingle: "BINGO!",
@@ -112,14 +187,15 @@ var en = {
   bannerTriple: "TRIPLE BINGO!",
   bannerNth: (n) => `Line ${n}!`,
   bannerMulti: (n) => `${n} lines at once!`,
-  statusStart: (left) => `${left} to go. Finish a line first!`,
+  statusStart: () => "",
   statusLines: (lines, left) => `${lines} bingo line${lines === 1 ? "" : "s"}! ${left} to go`,
-  statusReach: (labels) => `Reach! Pack ${labels.slice(0, 2).join(" or ")}${labels.length > 2 ? " (or more)" : ""} for a bingo`,
+  statusReach: () => "",
   statusDone: "\u{1F389} Perfect! Nothing left behind.",
   perfectTag: "\u{1F3C6} PERFECT",
   perfectStamp: "ALL\nSET",
   perfectTitle: "Perfect!",
-  perfectBody: "All 16 packed!\nHave a great trip!",
+  perfectBody: (n) => `All ${n} packed!
+Have a great trip!`,
   perfectBonus: (n) => `PERFECT BONUS +${n}`,
   statScore: "SCORE",
   statCombo: "MAX COMBO",
@@ -219,6 +295,11 @@ function createSound(isMuted) {
     },
     tick: () => tone(1760, 0, 0.03, "square", 0.03),
     note: (k, at = 0) => tone(step(k), at, 0.12, "square", 0.05),
+    shuffle() {
+      for (let i = 0; i < 7; i++) noise(i * 0.042, 0.05, 0.16, 1600 + i * 260);
+      tone(hz(7), 0.34, 0.12, "triangle", 0.14);
+      tone(hz(12), 0.42, 0.2, "triangle", 0.14);
+    },
     close() {
       if (ac) void ac.close().catch(() => {
       });
@@ -233,7 +314,7 @@ function resolveStorageKey(options) {
   if (options.controlled) return null;
   if (options.storageKey !== void 0) return options.storageKey || null;
   if (options.demo) return null;
-  return itemsKey(options.items ?? DEFAULT_ITEMS);
+  return itemsKey(layoutItems(options));
 }
 function itemsKey(items) {
   const text = items.map((it) => `${it.emoji}\0${it.label}`).join("
");
@@ -246,24 +327,24 @@ function itemsKey(items) {
 }
 
 // src/styles.ts
-var FONT_URL = "https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+Rounded+1c:wght@500;800&display=swap";
 var CSS = `
-.pkb{--pk-sun:var(--pkb-sun,#FFD54F);--pk-ink:var(--pkb-ink,#2A1F14);--pk-paper:var(--pkb-paper,#FFFDF6);--pk-red:var(--pkb-red,#E8473B);--pk-mint:var(--pkb-mint,#BDEBD2);--pk-display:"Dela Gothic One",var(--pkb-font-fallback,sans-serif);--pk-body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",var(--pkb-font-fallback,sans-serif);container-type:inline-size;isolation:isolate;width:100%}
+.pkb{--pk-sun:var(--pkb-sun,#FFD54F);--pk-ink:var(--pkb-ink,#2A1F14);--pk-paper:var(--pkb-paper,#FFFDF6);--pk-red:var(--pkb-red,#E8473B);--pk-mint:var(--pkb-mint,#BDEBD2);--pk-display:"Dela Gothic One",var(--pkb-font-fallback,sans-serif);--pk-body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",var(--pkb-font-fallback,sans-serif);--pk-n:4;--pk-s:1;--pk-d:1;container-type:inline-size;isolation:isolate;width:100%}
 .pkb,.pkb *{box-sizing:border-box;margin:0;padding:0}
 .pkb-board{position:relative;overflow:hidden;max-width:720px;margin:0 auto;padding:22px 26px 20px;border-radius:24px;background-color:var(--pk-sun);background-image:radial-gradient(rgba(42,31,20,.12) 1.3px,transparent 1.6px);background-size:16px 16px;border:2.5px solid var(--pk-ink);color:var(--pk-ink);font-family:var(--pk-body);line-height:1.4;text-align:left}
 .pkb-board.pkb-shake{animation:pkb-shake .45s cubic-bezier(.36,.07,.19,.97)}
 @keyframes pkb-shake{10%,90%{transform:translate(-1px,1px)}20%,80%{transform:translate(3px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}
 .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;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
+.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-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-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}
+.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}
 .pkb-score{display:flex;gap:10px}
 .pkb-pill{min-width:78px;background:var(--pk-paper);border:2.5px solid var(--pk-ink);border-radius:14px;padding:6px 10px 5px;text-align:center;box-shadow:3px 3px 0 var(--pk-ink)}
@@ -282,16 +363,18 @@ var CSS = `
 .pkb-combo.pkb-on .pkb-bar i{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(4,1fr);gap:12px}
-.pkb-tile{position:relative;aspect-ratio:1/.82;background:var(--pk-paper);border:2.5px solid var(--pk-ink);border-radius:16px;box-shadow:4px 4px 0 var(--pk-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .1s,box-shadow .1s,background-color .25s}
-.pkb-tile:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--pk-ink)}
+.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 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:32px;line-height:1;transition:opacity .2s}
-.pkb-lbl{font-weight:800;font-size:13px;line-height:1.25;text-align:center;padding:0 6px;transition:opacity .2s;word-break:keep-all;overflow-wrap:anywhere}
-.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:20px;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-emo{font-size:max(14px,calc(32px*var(--pk-s)));line-height:1;transition:opacity .2s}
+.pkb-lbl{font-weight:800;font-size:max(9px,calc(13px*var(--pk-s)));line-height:1.25;text-align:center;padding:0 calc(6px*var(--pk-d));transition:opacity .2s;word-break:keep-all;overflow-wrap:anywhere}
+.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-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)}
 .pkb-tile.pkb-line::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.9) 45%,transparent 60%) no-repeat;background-size:250% 100%;background-position:200% 0;animation:pkb-glint 3.2s ease-in-out var(--pkb-gd,0s) infinite}
 @keyframes pkb-glint{0%{background-position:200% 0}30%,100%{background-position:-100% 0}}
@@ -308,12 +391,17 @@ var CSS = `
 .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}
-.pkb-lines .pkb-u{stroke:var(--pk-paper);stroke-width:13}
-.pkb-lines .pkb-o{stroke:var(--pk-ink);stroke-width:6}
+.pkb-lines .pkb-u{stroke:var(--pk-paper);stroke-width:calc(13px*var(--pk-d))}
+.pkb-lines .pkb-o{stroke:var(--pk-ink);stroke-width:calc(6px*var(--pk-d))}
 .pkb-lines .pkb-draw line{animation:pkb-draw .45s ease-out .3s both}
 @keyframes pkb-draw{from{stroke-dashoffset:1}}
-.pkb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;font-weight:800;font-size:13px}
-.pkb-reset{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-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-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-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}}
@@ -327,7 +415,7 @@ var CSS = `
 .pkb-float{position:absolute;z-index:11;pointer-events:none;white-space:nowrap;font-family:var(--pk-display);font-weight:400;line-height:1;-webkit-text-stroke:4px var(--pk-ink);paint-order:stroke fill;transform:translate(-50%,-50%);animation:pkb-rise .95s cubic-bezier(.2,.9,.3,1) both}
 .pkb-float.pkb-pt{font-size:22px;color:var(--pk-paper)}
 .pkb-float.pkb-cmb{font-size:17px}
-.pkb-float.pkb-big{font-size:clamp(20px,6cqi,34px);color:#FFE066}
+.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-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}
@@ -338,7 +426,7 @@ var CSS = `
 .pkb-perfect.pkb-show .pkb-medal{animation:pkb-slam .38s cubic-bezier(.5,0,.75,0) .35s forwards}
 @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}
+.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-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}
@@ -348,32 +436,21 @@ 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:8px}.pkb-tile{border-radius:12px;box-shadow:3px 3px 0 var(--pk-ink);gap:3px;aspect-ratio:1/1}.pkb-emo{font-size:24px}.pkb-lbl{font-size:10.5px;padding:0 2px}.pkb-stamp{font-size:14px}.pkb-tile.pkb-reach::after{font-size:9px;padding:2px 5px;top:-9px;right:-5px}.pkb-lines .pkb-u{stroke-width:10}.pkb-lines .pkb-o{stroke-width:5}.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: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}}
+@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}}
 @keyframes pkb-fade{0%,100%{opacity:0}15%,80%{opacity:1}}
 `;
 
 // src/core.ts
-var LINES = [
-  [0, 1, 2, 3],
-  [4, 5, 6, 7],
-  [8, 9, 10, 11],
-  [12, 13, 14, 15],
-  [0, 4, 8, 12],
-  [1, 5, 9, 13],
-  [2, 6, 10, 14],
-  [3, 7, 11, 15],
-  [0, 5, 10, 15],
-  [3, 6, 9, 12]
-];
-var DEMO_START = [0, 1, 2, 3, 5, 10];
+var LINES = bingoLines(4);
 var CONFETTI = ["#E8473B", "#2F6FED", "#1FA971", "#FFFDF6", "#2A1F14", "#FF9F1C"];
 var COMBO_COLORS = ["#FF9F1C", "#1FA971", "#2F6FED", "#9B5DE5", "#E8473B"];
 var COMBO_MS = 2500;
 var MUTE_KEY = "packing-bingo-muted";
+var ORDER_PREFIX = "packing-bingo-order:";
 var esc = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-var normalize = (v) => Array.from({ length: 16 }, (_, i) => !!v?.[i]);
-var demoStart = () => Array.from({ length: 16 }, (_, i) => DEMO_START.includes(i));
 function readStore(key) {
   try {
     return localStorage.getItem(key);
@@ -387,30 +464,32 @@ function writeStore(key, value) {
   } catch {
   }
 }
-function ensureAssets(fonts) {
-  if (!document.getElementById("pkb-styles")) {
-    const s = document.createElement("style");
-    s.id = "pkb-styles";
-    s.textContent = CSS;
-    document.head.appendChild(s);
-  }
-  if (fonts && !document.getElementById("pkb-fonts")) {
-    const l = document.createElement("link");
-    l.id = "pkb-fonts";
-    l.rel = "stylesheet";
-    l.href = FONT_URL;
-    document.head.appendChild(l);
-  }
+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 FLY_MS = 560;
+function ensureStyles() {
+  if (document.getElementById("pkb-styles")) return;
+  const s = document.createElement("style");
+  s.id = "pkb-styles";
+  s.textContent = CSS;
+  document.head.appendChild(s);
 }
-function template(items, M, demo) {
-  const tiles = items.map(
-    (it, i) => `<label class="pkb-tile" data-reach="${esc(M.reachBadge)}" style="--pkb-gd:${((i >> 2) + (i & 3)) * 0.12}s"><input type="checkbox"><span class="pkb-emo" aria-hidden="true">${esc(it.emoji)}</span><span class="pkb-lbl">${esc(it.label).replace(/・/g, "\u30FB<wbr>")}</span><span class="pkb-stamp" aria-hidden="true">${esc(M.stamp)}</span></label>`
-  ).join("");
+function template(L, M, { demo, shuffle, vibrate }) {
+  const n = L.size;
+  const input = vibrate ? `<input type="checkbox" switch role="checkbox">` : `<input type="checkbox">`;
+  const tiles = Array.from({ length: n * n }, (_, c) => {
+    const gd = `--pkb-gd:${glintDelay(c, n)}`;
+    if (c === L.center)
+      return `<div class="pkb-tile pkb-free pkb-on" style="${gd}"><span class="pkb-stamp">${esc(M.free)}</span></div>`;
+    const it = L.items[L.itemCell.indexOf(c)];
+    return `<label class="pkb-tile" data-reach="${esc(M.reachBadge)}" style="${gd}">${input}<span class="pkb-emo" aria-hidden="true">${esc(it.emoji)}</span><span class="pkb-lbl">${esc(it.label).replace(/・/g, "\u30FB<wbr>")}</span><span class="pkb-stamp" aria-hidden="true">${esc(M.stamp)}</span></label>`;
+  }).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>` : "";
-  return `<div class="pkb"><div class="pkb-board">
+  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>
-<h2 class="pkb-title">${esc(M.title)}</h2><p class="pkb-sub">${esc(M.subtitle)}</p></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>
 <div class="pkb-pill" data-r="bp"><small>${esc(M.bingo)}</small><b data-r="bng"></b></div>
@@ -418,24 +497,44 @@ function template(items, M, demo) {
 <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><button type="button" class="pkb-reset" data-r="reset">${esc(M.reset)}</button></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-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">${esc(M.perfectBody)}</p>
+<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-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>`;
 }
+var perfectText = (M, total) => typeof M.perfectBody === "function" ? M.perfectBody(total) : M.perfectBody;
 function createPackingBingo(container, options = {}) {
-  const items = options.items ?? DEFAULT_ITEMS;
-  if (items.length !== 16) throw new Error(`[packing-bingo] "items" must have exactly 16 entries (got ${items.length}).`);
+  const L = resolveLayout(options);
+  const { items, cellLines } = L;
+  const n = L.size, N = items.length;
+  const normalize = (v) => Array.from({ length: N }, (_, i) => !!v?.[i]);
+  const identity = () => Array.from({ length: N }, (_, s) => s);
+  const isIdentity = (o) => o.every((v, s) => v === s);
+  const validOrder = (o) => Array.isArray(o) && o.length === N && o.every((v) => Number.isInteger(v) && v >= 0 && v < N) && new Set(o).size === N;
+  let order = identity();
+  const slotOf = identity();
+  let lines = L.lines;
+  const demoCells = [...cellLines[0], ...cellLines[2 * n].slice(1, -1)];
+  const demoSlots = L.itemCell.flatMap((c, s) => demoCells.includes(c) ? [s] : []);
+  const demoStart = () => {
+    const on = normalize(void 0);
+    demoSlots.forEach((s) => on[order[s]] = true);
+    return on;
+  };
+  const far = (c) => Math.floor(c / n) + c % n;
+  const dScale = Math.min(1, 4 / n);
   const M = { ...ja, ...options.messages };
   if (options.title != null) M.title = options.title;
   if (options.tag != null) M.tag = options.tag;
   if (options.subtitle != null) M.subtitle = options.subtitle;
   const controlled = !!options.controlled;
   const storageKey = resolveStorageKey(options);
+  const orderKey = storageKey && ORDER_PREFIX + storageKey;
   const demo = !!options.demo;
+  const vibrate = options.vibrate !== false;
   const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
   let dead = false;
   const timers = /* @__PURE__ */ new Set();
@@ -448,8 +547,8 @@ function createPackingBingo(container, options = {}) {
   };
   const wait = (ms) => new Promise((r) => window.setTimeout(r, ms));
   let gen = 0;
-  ensureAssets(options.fonts !== false);
-  container.innerHTML = template(items, M, demo);
+  ensureStyles();
+  container.innerHTML = template(L, M, { demo, shuffle: options.shuffle !== false, vibrate });
   const $ = (r) => {
     const el = container.querySelector(`[data-r="${r}"]`);
     if (!el) throw new Error(`[packing-bingo] internal: missing element "${r}"`);
@@ -461,7 +560,9 @@ function createPackingBingo(container, options = {}) {
   const svg = container.querySelector(".pkb-lines");
   const cv = container.querySelector(".pkb-fx");
   const ctx = cv.getContext("2d");
-  const tiles = Array.from(grid.children);
+  const cellTiles = Array.from(grid.children);
+  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");
   let checked = normalize(void 0);
@@ -496,14 +597,14 @@ 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, shape) => ({
+  const piece = (x, y, vx, vy, g, s, life, shape2) => ({
     x,
     y,
     vx,
     vy,
     g,
     life,
-    shape,
+    shape: shape2,
     w: (5 + Math.random() * 6) * s,
     h: (3 + Math.random() * 5) * s,
     r: Math.random() * 6,
@@ -513,9 +614,9 @@ function createPackingBingo(container, options = {}) {
   const go = () => {
     if (!raf && ctx) raf = requestAnimationFrame(tick);
   };
-  function burst(x, y, n, o = {}) {
+  function burst(x, y, n2, o = {}) {
     if (calm) return;
-    for (let i = 0; i < n; i++) {
+    for (let i = 0; i < n2; i++) {
       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";
@@ -606,11 +707,11 @@ function createPackingBingo(container, options = {}) {
     void el.offsetWidth;
     el.classList.add(cls);
   };
-  const hop = (i, d) => {
+  const hop = (t, d) => {
     if (calm) return;
-    tiles[i].classList.remove("pkb-squash");
-    tiles[i].style.setProperty("--pkb-d", d + "ms");
-    replay(tiles[i], "pkb-hop");
+    t.classList.remove("pkb-squash");
+    t.style.setProperty("--pkb-d", d + "ms");
+    replay(t, "pkb-hop");
   };
   grid.addEventListener("animationend", (e) => {
     const t = e.target;
@@ -624,6 +725,7 @@ function createPackingBingo(container, options = {}) {
     r.addEventListener("animationend", () => r.remove());
   };
   const buzz = (pattern) => {
+    if (!vibrate) return;
     const ua = navigator.userActivation;
     if (ua && !ua.hasBeenActive) return;
     try {
@@ -658,8 +760,8 @@ function createPackingBingo(container, options = {}) {
     st(t0);
     if (!calm) replay($("sp"), "pkb-bump");
   }
-  const showGain = (n, x, y, cls = "pt") => {
-    floatText(`+${n}`, x, y, cls);
+  const showGain = (pts, x, y, cls = "pt") => {
+    floatText(`+${pts}`, x, y, cls);
     countScore();
   };
   function countUp(el, a, b, d, fmt, ticks = false) {
@@ -679,15 +781,19 @@ function createPackingBingo(container, options = {}) {
     };
     st(t0);
   }
-  const ctr = (i) => {
-    const t = tiles[i];
+  const ctr = (t) => {
     return { x: t.offsetLeft + t.offsetWidth / 2, y: t.offsetTop + t.offsetHeight / 2 };
   };
+  let landing = 0;
   function drawLines(fresh = []) {
+    if (landing) {
+      svg.innerHTML = "";
+      return;
+    }
     svg.setAttribute("viewBox", `0 0 ${gw.clientWidth} ${gw.clientHeight}`);
     svg.innerHTML = cur.map((k) => {
-      const a = ctr(LINES[k][0]), b = ctr(LINES[k][3]);
-      const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1, ex = dx / d * 26, ey = dy / d * 26;
+      const a = ctr(cellTiles[cellLines[k][0]]), b = ctr(cellTiles[cellLines[k][n - 1]]);
+      const dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1, r = 26 * dScale, ex = dx / d * r, ey = dy / d * r;
       const at = `x1="${a.x - ex}" y1="${a.y - ey}" x2="${b.x + ex}" y2="${b.y + ey}" pathLength="1"`;
       return `<g${fresh.includes(k) ? ' class="pkb-draw"' : ""}><line class="pkb-u" ${at}/><line class="pkb-o" ${at}/></g>`;
     }).join("");
@@ -698,6 +804,7 @@ function createPackingBingo(container, options = {}) {
       combo = 0;
       $("combo").classList.remove("pkb-on");
       sfx.off();
+      buzz(8);
       return;
     }
     const now = performance.now();
@@ -720,7 +827,7 @@ function createPackingBingo(container, options = {}) {
       $("cmbN").textContent = M.combo(combo);
       replay($("combo"), "pkb-on");
     }
-    buzz(12);
+    buzz(18);
   }
   $("cbar").addEventListener("animationend", () => {
     $("combo").classList.remove("pkb-on");
@@ -734,29 +841,29 @@ function createPackingBingo(container, options = {}) {
     later(() => sfx.reach(), 150);
   }
   function bingo(fresh, pts) {
-    const n = fresh.length;
-    const seq = [...new Set(fresh.flatMap((k) => LINES[k]))];
+    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);
     seq.forEach(
-      (i, j) => later(() => {
-        hop(i, 0);
-        const p = rel(tiles[i]);
+      (t, j) => later(() => {
+        hop(t, 0);
+        const p = rel(t);
         burst(p.x, p.y, 14, { speed: 5, g: 0.15, life: 30, size: 0.7, star: 0.8 });
         sfx.note(j + 3);
       }, j * step)
     );
     later(() => {
-      $("bT").textContent = n >= 3 ? M.bannerTriple : n === 2 ? M.bannerDouble : M.bannerSingle;
-      $("bS").textContent = n > 1 ? M.bannerMulti(n) : M.bannerNth(cur.length);
+      $("bT").textContent = nl >= 3 ? M.bannerTriple : nl === 2 ? M.bannerDouble : M.bannerSingle;
+      $("bS").textContent = nl > 1 ? M.bannerMulti(nl) : M.bannerNth(cur.length);
       replay($("banner"), "pkb-show");
       if (!calm) {
         replay($("flash"), "pkb-go");
         replay(board, "pkb-punch");
       }
       const c = rel(gw);
-      burst(c.x, c.y, n > 1 ? 180 : 110, { speed: n > 1 ? 16 : 13, star: 0.3 });
-      sfx.bingo(n);
-      buzz(n > 1 ? [40, 60, 40, 60, 90] : [40, 60, 40]);
+      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);
   }
@@ -764,9 +871,10 @@ function createPackingBingo(container, options = {}) {
     const bonus = gotP ? 0 : 1e3;
     gotP = true;
     score += bonus;
-    tiles.forEach((_, i) => hop(i, ((i >> 2) + (i & 3)) * 60));
+    cellTiles.forEach((t, c) => hop(t, far(c) * 180 / Math.max(1, n - 1)));
     sfx.perfect();
     if (!calm) replay($("flash"), "pkb-go");
+    $("pbody").textContent = perfectText(M, N);
     $("sScore").textContent = "0";
     $("sCombo").textContent = "\xD70";
     $("sBingo").textContent = "0";
@@ -813,30 +921,32 @@ function createPackingBingo(container, options = {}) {
     $("combo").classList.remove("pkb-on");
     perfectEl.classList.remove("pkb-show");
   }
+  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;
-    cur = LINES.flatMap((l, k) => l.every((i) => on[i]) ? [k] : []);
+    cur = completeLines();
     const fresh = cur.filter((k) => !prevLines.has(k));
     if ([...prevLines].some((k) => !cur.includes(k))) {
       cancelFx();
-      if (c < 16) perfectEl.classList.remove("pkb-show");
+      if (c < N) perfectEl.classList.remove("pkb-show");
     }
-    const hit = new Set(cur.flatMap((k) => LINES[k]));
+    const hit = new Set(cur.flatMap((k) => cellLines[k]));
     const reach = /* @__PURE__ */ new Set();
-    for (const l of LINES) {
+    for (const l of lines) {
       const m = l.filter((i) => !on[i]);
       if (m.length === 1) reach.add(m[0]);
     }
     tiles.forEach((t, i) => {
       t.classList.toggle("pkb-on", on[i]);
-      t.classList.toggle("pkb-line", hit.has(i));
+      t.classList.toggle("pkb-line", hit.has(L.itemCell[slotOf[i]]));
       t.classList.toggle("pkb-reach", reach.has(i));
     });
-    board.classList.toggle("pkb-all", c === 16);
-    kick.classList.toggle("pkb-gold", c === 16);
-    kick.textContent = c === 16 ? M.perfectTag : M.tag;
-    $("cnt").textContent = `${c}/16`;
+    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;
+    $("cnt").textContent = `${c}/${N}`;
     $("bng").textContent = String(cur.length);
     const bp = $("bp");
     if (cur.length > lastN) {
@@ -847,13 +957,13 @@ function createPackingBingo(container, options = {}) {
     lastN = cur.length;
     drawLines(fresh);
     if (src !== null) tapFx(src, on[src]);
-    const newL = fresh.filter((k) => !gotL.has(k));
-    newL.forEach((k) => gotL.add(k));
+    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 === 16 && !prevAll) perfect(events);
+    } else if (c === N && !prevAll) perfect(events);
     else if (fresh.length) {
       bingo(fresh, linePts);
       const e = { newLines: fresh, totalLines: cur.length, score };
@@ -864,9 +974,9 @@ function createPackingBingo(container, options = {}) {
     }
     prevLines = new Set(cur);
     prevReach = reach;
-    prevAll = c === 16;
+    prevAll = c === N;
     const labels = [...reach].map((i) => items[i].label);
-    $("msg").textContent = c === 16 ? M.statusDone : labels.length ? M.statusReach(labels) : cur.length ? M.statusLines(cur.length, 16 - c) : M.statusStart(16 - c);
+    $("msg").textContent = c === N ? M.statusDone : labels.length ? M.statusReach(labels) : cur.length ? M.statusLines(cur.length, N - c) : M.statusStart(N - c);
     return events;
   }
   const flush = (events) => {
@@ -893,8 +1003,9 @@ function createPackingBingo(container, options = {}) {
     got.clear();
     gotL.clear();
     checked.forEach((v, i) => v && got.add(i));
-    LINES.forEach((l, k) => l.every((i) => checked[i]) && gotL.add(k));
-    prevLines = new Set(gotL);
+    const done = completeLines();
+    done.forEach((k) => gotL.add(lineKey(lines[k])));
+    prevLines = new Set(done);
     prevReach = /* @__PURE__ */ new Set();
     prevAll = checked.every(Boolean);
     gotP = prevAll;
@@ -917,6 +1028,77 @@ function createPackingBingo(container, options = {}) {
     options.onChange?.(checked.slice());
     flush(events);
   }
+  function place(next) {
+    order = next;
+    order.forEach((i, s) => {
+      slotOf[i] = s;
+      cellTiles[L.itemCell[s]] = tiles[i];
+    });
+    lines = L.lines.map((l) => l.map((s) => order[s]));
+    const focused = document.activeElement;
+    cellTiles.forEach((t, c) => {
+      t.style.setProperty("--pkb-gd", glintDelay(c, n));
+      grid.appendChild(t);
+    });
+    if (focused instanceof HTMLElement && grid.contains(focused) && document.activeElement !== focused)
+      focused.focus({ preventScroll: true });
+  }
+  const saveOrder = () => {
+    if (!orderKey) return;
+    writeStore(orderKey, JSON.stringify(order));
+  };
+  let flights = [];
+  function arrange(next) {
+    if (!checked.every(Boolean)) cancelFx();
+    const from = calm ? null : tiles.map((t) => t.getBoundingClientRect());
+    flights.forEach((a) => a.cancel());
+    flights = [];
+    place(next);
+    lines.forEach((l) => {
+      if (l.every((i) => got.has(i))) gotL.add(lineKey(l));
+    });
+    const done = completeLines();
+    done.forEach((k) => gotL.add(lineKey(lines[k])));
+    prevLines = new Set(done);
+    render(null, true);
+    saveOrder();
+    if (!from || typeof Element.prototype.animate !== "function") return;
+    tiles.forEach((t, i) => {
+      const a = from[i], b = t.getBoundingClientRect();
+      const dx = a.left - b.left, dy = a.top - b.top;
+      if (Math.abs(dx) + Math.abs(dy) < 1) return;
+      flights.push(
+        t.animate([{ transform: `translate(${dx}px,${dy}px)` }, { transform: "none" }], {
+          duration: FLY_MS - 140,
+          delay: Math.random() * 140,
+          easing: "cubic-bezier(.3,1.25,.5,1)",
+          fill: "backwards"
+        })
+      );
+    });
+    clearTimeout(landing);
+    landing = window.setTimeout(() => {
+      landing = 0;
+      flights = [];
+      if (!dead) drawLines(cur);
+    }, FLY_MS);
+    svg.innerHTML = "";
+  }
+  function shuffleCard() {
+    let next = order.slice();
+    do {
+      for (let s = N - 1; s > 0; s--) {
+        const r = Math.floor(Math.random() * (s + 1));
+        [next[s], next[r]] = [next[r], next[s]];
+      }
+    } while (next.every((v, s) => v === order[s]));
+    arrange(next);
+    sfx.shuffle();
+    buzz([10, 40, 10, 40, 10, 40, 24]);
+  }
+  const unshuffle = () => {
+    if (!isIdentity(order)) arrange(identity());
+  };
   grid.addEventListener("change", (e) => {
     const i = ins.indexOf(e.target);
     if (i < 0) return;
@@ -924,7 +1106,11 @@ function createPackingBingo(container, options = {}) {
     next[i] = !next[i];
     request(next, i);
   });
-  $("reset").addEventListener("click", () => request(normalize(void 0), null, { reset: true }));
+  container.querySelector('[data-r="shuf"]')?.addEventListener("click", shuffleCard);
+  $("reset").addEventListener("click", () => {
+    unshuffle();
+    request(normalize(void 0), null, { reset: true });
+  });
   $("close").addEventListener("click", () => perfectEl.classList.remove("pkb-show"));
   perfectEl.addEventListener("click", (e) => {
     if (e.target === perfectEl) perfectEl.classList.remove("pkb-show");
@@ -953,18 +1139,31 @@ function createPackingBingo(container, options = {}) {
       }
     };
     $("dB").addEventListener("click", () => {
-      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 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();
       void run(pick.map((i) => ({ i, delay: 320 })));
     });
     $("dP").addEventListener("click", () => {
-      const miss = checked.every(Boolean) ? tiles.map((_, i) => i) : tiles.map((_, i) => i).filter((i) => !checked[i]);
+      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) request(demoStart(), null, { reset: true });
+      if (busy) return;
+      unshuffle();
+      request(demoStart(), null, { reset: true });
     });
   }
+  let startOrder = null;
+  if (orderKey) {
+    try {
+      const saved = JSON.parse(readStore(orderKey) ?? "null");
+      if (validOrder(saved)) startOrder = saved;
+    } catch {
+    }
+  }
+  if (!startOrder && validOrder(options.defaultOrder)) startOrder = options.defaultOrder.slice();
+  if (startOrder && !isIdentity(startOrder)) place(startOrder);
   let initial = null;
   if (storageKey) {
     try {
@@ -986,29 +1185,45 @@ function createPackingBingo(container, options = {}) {
   return {
     setChecked(next, opts = {}) {
       if (dead) return;
-      const n = normalize(next);
-      const changed = n.flatMap((v, i) => v !== checked[i] ? [i] : []);
+      const n2 = normalize(next);
+      const changed = n2.flatMap((v, i) => v !== checked[i] ? [i] : []);
       if (!changed.length) return;
       if (!opts.animate || changed.length !== 1) {
-        baseline(n);
+        baseline(n2);
         return;
       }
-      flush(apply(n, changed[0], false));
+      flush(apply(n2, changed[0], false));
     },
     reset() {
-      if (!dead) request(normalize(void 0), null, { reset: true });
+      if (dead) return;
+      unshuffle();
+      request(normalize(void 0), null, { reset: true });
+    },
+    shuffle() {
+      if (!dead) shuffleCard();
     },
     refresh() {
       if (!dead) render(null, true);
     },
     getState() {
-      return { checked: checked.slice(), lines: cur.slice(), score, maxCombo, complete: checked.every(Boolean) };
+      return {
+        checked: checked.slice(),
+        lines: cur.slice(),
+        score,
+        maxCombo,
+        complete: checked.every(Boolean),
+        size: n,
+        free: L.free,
+        order: order.slice()
+      };
     },
     destroy() {
       if (dead) return;
       dead = true;
       timers.forEach((id) => clearTimeout(id));
       timers.clear();
+      clearTimeout(landing);
+      flights.forEach((a) => a.cancel());
       cancelAnimationFrame(raf);
       cancelAnimationFrame(tw);
       ro?.disconnect();
@@ -1021,7 +1236,7 @@ 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, className, style, onChange, onBingo, onPerfect, messages, ...config } = props;
+  const { checked, defaultChecked, defaultOrder, className, style, onChange, onBingo, onPerfect, 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 });
@@ -1033,6 +1248,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
   const storageKey = resolveStorageKey({ ...config, controlled });
   const latestKey = (0, import_react.useRef)(storageKey);
   if (controlled) latest.current = checked;
+  const latestOrder = (0, import_react.useRef)(defaultOrder);
   const messageShape = messages ? Object.fromEntries(Object.entries(messages).map(([k, v]) => [k, typeof v === "function" ? "\u0192" : v])) : null;
   const key = JSON.stringify({ ...config, messageShape, controlled });
   (0, import_react.useEffect)(() => {
@@ -1048,6 +1264,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
       messages: liveMessages,
       controlled,
       defaultChecked: controlled || latestKey.current === storageKey ? latest.current : defaultChecked,
+      defaultOrder: latestKey.current === storageKey ? latestOrder.current : defaultOrder,
       onChange: (next) => {
         if (!controlled) latest.current = next;
         callbacks.current.onChange?.(next);
@@ -1057,7 +1274,9 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
     });
     inst.current = instance;
     return () => {
-      if (!controlled) latest.current = instance.getState().checked;
+      const state = instance.getState();
+      if (!controlled) latest.current = state.checked;
+      latestOrder.current = state.order;
       latestKey.current = storageKey;
       instance.destroy();
       if (inst.current === instance) inst.current = null;
@@ -1073,6 +1292,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
     ref,
     () => ({
       reset: () => inst.current?.reset(),
+      shuffle: () => inst.current?.shuffle(),
       setChecked: (next) => inst.current?.setChecked(next, { animate: true }),
       getState: () => inst.current?.getState() ?? null
     }),
@@ -1085,6 +1305,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
   DEFAULT_ITEMS,
   LINES,
   PackingBingo,
+  bingoLines,
   createPackingBingo,
   en,
   ja