@popcraft/kit 0.53.14 → 0.53.16

package/dist/chunks/chunk-CXHET46X.js

@@ -0,0 +1,1309 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  arc,
+  back,
+  box,
+  close,
+  drift,
+  focusColumn,
+  focusRow,
+  gameKit,
+  gameVar,
+  glow,
+  go,
+  keys,
+  label,
+  onAll,
+  overlay,
+  poly,
+  readout,
+  rebindListener,
+  screen,
+  sector,
+  set,
+  spin,
+  when
+} from "./chunk-JX362DPK.js";
+import {
+  defineTemplate
+} from "./chunk-PSRXSY3J.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-63KP74KB.js";
+
+// templates/src/game/blossom-bash-puzzle.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var W = 402;
+var H = 874;
+var BOARD = ["TDBSDT", "SBTDBS", "DSBTSD", "BTDSTB", "TSBDST", "DBTBDS"];
+var KINDS = { T: "Tulip", D: "Daisy", B: "Bluebell", S: "Sunflower" };
+var NODES = [[112, 708], [236, 672], [306, 606], [206, 560], [96, 506], [152, 444], [274, 410], [318, 344], [206, 302], [104, 250]];
+var START_STARS = [3, 2, 3, 0, 0, 0, 0, 0, 0, 0];
+var SHOP = [
+  { name: "Garden hammer", blurb: "Smash one flower", price: 300, cur: "coins", give: "hammer", n: 1 },
+  { name: "Petal shuffle", blurb: "Spin the whole board", price: 250, cur: "coins", give: "shuffle", n: 1 },
+  { name: "Hammer trio", blurb: "Three in a bow", price: 18, cur: "gems", give: "hammer", n: 3 },
+  { name: "Heart refill", blurb: "All five hearts now", price: 12, cur: "gems", give: "lives", n: 5 },
+  { name: "Golden watering can", blurb: "+3 moves every level", price: 9999, cur: "coins", give: "can", n: 1 }
+];
+var LANGS = ["English", "Espa\xF1ol", "Fran\xE7ais", "Deutsch", "Portugu\xEAs"];
+var DAYS = [["DAY 1", "coin"], ["DAY 2", "gem"], ["DAY 3", "coin"], ["DAY 4", "hammer"], ["DAY 5", "coin"], ["DAY 6", "gem"], ["DAY 7", "chest"]];
+var F = (p) => `(${p} - floor(${p}))`;
+var bump = (p) => `(4 * ${F(p)} * (1 - ${F(p)}))`;
+var shake = (p, amp) => `(${bump(p)} * ${amp} * ((floor(${F(p)} * 10) % 2) * 2 - 1))`;
+var pick = (i, arr) => `(${arr.slice(0, -1).map((v, j) => `${i} == ${j + 1} ? ${v}`).join(" : ")} : ${arr[arr.length - 1]})`;
+function cr(p0, p1, p2, p3, t) {
+  const t2 = t * t, t3 = t2 * t;
+  const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
+  return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+}
+var along = (seg, t) => {
+  const p = (i) => NODES[Math.max(0, Math.min(NODES.length - 1, i))];
+  return cr(p(seg - 1), p(seg), p(seg + 1), p(seg + 2), t);
+};
+var blossom_bash_puzzle_default = defineTemplate({
+  id: "game-blossom-bash-puzzle",
+  meta: {
+    name: "BLOSSOM BASH \u2014 mobile match-3 puzzle UI",
+    description: "A playable candy-glossy mobile puzzle game for phone portrait: bouncing-flower splash, tap-to-play title, a winding level map with stars, locked levels and a petal path that fills as you progress, a level start card with boosters, a 6 \xD7 6 flower board where every tap matches (moves, goal pops, combo cascades, hammer and shuffle boosters that charge), level complete stars, out of moves, a coins-and-gems shop, a three-tap daily chest with a streak calendar, settings, pause and a lives screen",
+    category: "game-ui",
+    tags: ["game", "game ui", "puzzle", "match-3", "casual", "mobile game", "level map", "boosters", "daily reward", "interactive", "variables", "touch", "present mode"],
+    platforms: ["ios", "android"],
+    formats: ["screen"],
+    useCases: ["launch", "pitch"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  build() {
+    const k = gameKit("BLOSSOM BASH", "iphone-17");
+    k.brand({
+      cream: "#FFF4E8",
+      petal: "#FFE1EC",
+      sky: "#C4E8FF",
+      skyTop: "#94D2FF",
+      cloud: "#FFFFFF",
+      card: "#FFFFFF",
+      gloss: "#FFFFFF",
+      mint: "#A6ECCF",
+      mintDeep: "#3DB88A",
+      pink: "#FF9DC3",
+      pinkDeep: "#E95C94",
+      sun: "#FFD95A",
+      sunDeep: "#F2A31B",
+      lilac: "#D9C6FF",
+      lilacDeep: "#9474E4",
+      skySoft: "#D8EEFF",
+      sunSoft: "#FFF0B3",
+      lilacSoft: "#EDE3FF",
+      gem: "#5EC6FF",
+      gemDeep: "#2A8AD6",
+      coin: "#FFC933",
+      coinDeep: "#DD8B14",
+      heart: "#FF5C8A",
+      grass: "#8FDC7E",
+      grassDeep: "#55B35C",
+      hill: "#BDEEA0",
+      stem: "#3F9E50",
+      soil: "#F5D9AE",
+      soilDeep: "#DDAE72",
+      locked: "#DCD5E4",
+      lockedDeep: "#B3A8C2",
+      plum: "#4B1B47",
+      onPlum: "#FFF4E8",
+      danger: "#C81F58",
+      onDanger: "#FFFFFF",
+      scrim: "#3A1238",
+      primary: "#FF5FA2",
+      onPrimary: "#3B0A26",
+      accent: "#FFC928",
+      onAccent: "#3A2200",
+      secondary: "#5ECCA2",
+      onSecondary: "#0D3324",
+      background: "#FFF4E8",
+      text: "#4B1B47"
+    }, { title: "BLOSSOM BASH", studio: "Petalpop", tagline: "Match the meadow. Bloom the world." });
+    const playerName = gameVar(k, "Player", "name", "STRING", "Juniper Bloom");
+    const coins = gameVar(k, "Player", "coins", "FLOAT", 1250);
+    const gems = gameVar(k, "Player", "gems", "FLOAT", 40);
+    const lives = gameVar(k, "Player", "lives", "FLOAT", 5);
+    const maxLives = gameVar(k, "Player", "maxLives", "FLOAT", 5);
+    const matched = gameVar(k, "Player", "flowersMatched", "FLOAT", 1284);
+    const bestCombo = gameVar(k, "Player", "bestCombo", "FLOAT", 4);
+    const invHammer = gameVar(k, "Bag", "hammers", "FLOAT", 1);
+    const invShuffle = gameVar(k, "Bag", "shuffles", "FLOAT", 1);
+    const hasCan = gameVar(k, "Bag", "wateringCan", "FLOAT", 0);
+    const current = gameVar(k, "Map", "current", "FLOAT", 4);
+    const progress = gameVar(k, "Map", "progress", "FLOAT", 4);
+    const mapFocus = gameVar(k, "Map", "focus", "FLOAT", 4);
+    const selected = gameVar(k, "Map", "selected", "FLOAT", 4);
+    const lockTap = gameVar(k, "Map", "lockedTapped", "FLOAT", 0);
+    const lockPulse = gameVar(k, "Map", "lockPulse", "FLOAT", 0);
+    const stars = START_STARS.map((s, i) => gameVar(k, "Map", `stars${i + 1}`, "FLOAT", s));
+    const moves = gameVar(k, "Game", "moves", "FLOAT", 18);
+    const maxMoves = gameVar(k, "Game", "maxMoves", "FLOAT", 18);
+    const goal = gameVar(k, "Game", "goal", "FLOAT", 20);
+    const goalMax = gameVar(k, "Game", "goalMax", "FLOAT", 20);
+    const score = gameVar(k, "Game", "score", "FLOAT", 0);
+    const combo = gameVar(k, "Game", "combo", "FLOAT", 0);
+    const hammerCharge = gameVar(k, "Game", "hammerCharge", "FLOAT", 0);
+    const shuffleCharge = gameVar(k, "Game", "shuffleCharge", "FLOAT", 0);
+    const armed = gameVar(k, "Game", "hammerArmed", "FLOAT", 0);
+    const turn = gameVar(k, "Game", "boardTurn", "FLOAT", 0);
+    const cursor = gameVar(k, "Game", "cursor", "FLOAT", 14);
+    const kbd = gameVar(k, "Game", "keyboard", "FLOAT", 0);
+    const earnedStars = gameVar(k, "Game", "stars", "FLOAT", 0);
+    const earned = gameVar(k, "Game", "coinsEarned", "FLOAT", 0);
+    const goalPulse = gameVar(k, "Game", "goalPulse", "FLOAT", 0);
+    const comboPulse = gameVar(k, "Game", "comboPulse", "FLOAT", 0);
+    const boostPulse = gameVar(k, "Game", "boosterPulse", "FLOAT", 0);
+    const pickHammer = gameVar(k, "Start", "pickHammer", "FLOAT", 0);
+    const pickShuffle = gameVar(k, "Start", "pickShuffle", "FLOAT", 0);
+    const startPulse = gameVar(k, "Start", "emptyPulse", "FLOAT", 0);
+    const shopFocus = gameVar(k, "Shop", "focus", "FLOAT", 0);
+    const poorRow = gameVar(k, "Shop", "poorRow", "FLOAT", -1);
+    const poorPulse = gameVar(k, "Shop", "poorPulse", "FLOAT", 0);
+    const poorCur = gameVar(k, "Shop", "poorCurrency", "STRING", "coins");
+    const boughtPulse = gameVar(k, "Shop", "boughtPulse", "FLOAT", 0);
+    const shopResult = gameVar(k, "Shop", "lastResult", "STRING", "");
+    const oomPoor = gameVar(k, "UI", "notEnoughGems", "FLOAT", 0);
+    const chestTaps = gameVar(k, "Daily", "chestTaps", "FLOAT", 0);
+    const reward = gameVar(k, "Daily", "reward", "FLOAT", 0);
+    const streak = gameVar(k, "Daily", "streak", "FLOAT", 3);
+    const revealPulse = gameVar(k, "Daily", "revealPulse", "FLOAT", 0);
+    const livesPulse = gameVar(k, "Lives", "notePulse", "FLOAT", 0);
+    const livesNote = gameVar(k, "Lives", "note", "STRING", "");
+    const gemPulse = gameVar(k, "UI", "gemPulse", "FLOAT", 0);
+    const pauseFocus = gameVar(k, "UI", "pauseFocus", "FLOAT", 0);
+    const oomFocus = gameVar(k, "UI", "outOfMovesFocus", "FLOAT", 0);
+    const doneFocus = gameVar(k, "UI", "completeFocus", "FLOAT", 0);
+    const setFocus = gameVar(k, "UI", "settingsFocus", "FLOAT", 0);
+    const rebind = gameVar(k, "UI", "rebinding", "STRING", "");
+    const music = gameVar(k, "Settings", "music", "FLOAT", 70);
+    const sfx = gameVar(k, "Settings", "soundEffects", "FLOAT", 80);
+    const vibration = gameVar(k, "Settings", "vibration", "FLOAT", 1);
+    const notify = gameVar(k, "Settings", "notifications", "FLOAT", 0);
+    const lang = gameVar(k, "Settings", "language", "FLOAT", 0);
+    const keyHammer = gameVar(k, "Keys", "hammer", "STRING", "H");
+    const keyShuffle = gameVar(k, "Keys", "shuffle", "STRING", "X");
+    k.textStyle("Logo 50", { size: 50, fontWeight: 900, lineHeight: 52, letterSpacing: -1.5, textAlign: "CENTER" });
+    k.textStyle("Studio 18", { size: 18, fontWeight: 900, lineHeight: 24, letterSpacing: 5, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Display 32", { size: 32, fontWeight: 900, lineHeight: 36, letterSpacing: -0.5, textAlign: "CENTER" });
+    k.textStyle("Heading 24", { size: 24, fontWeight: 900, lineHeight: 30, letterSpacing: -0.3 });
+    k.textStyle("Button 20", { size: 20, fontWeight: 900, lineHeight: 26, letterSpacing: 0.4, textAlign: "CENTER" });
+    k.textStyle("Label 16", { size: 16, fontWeight: 800, lineHeight: 22 });
+    k.textStyle("Body 15", { size: 15, fontWeight: 600, lineHeight: 21 });
+    k.textStyle("Small 13", { size: 13, fontWeight: 800, lineHeight: 18, letterSpacing: 1, textCase: "UPPER" });
+    k.textStyle("Tab 13", { size: 13, fontWeight: 900, lineHeight: 16, letterSpacing: 0.2, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Moves 34", { size: 34, fontWeight: 900, lineHeight: 36, letterSpacing: -1, textAlign: "CENTER" });
+    k.textStyle("Count 18", { size: 18, fontWeight: 900, lineHeight: 22 });
+    k.textStyle("Combo 30", { size: 30, fontWeight: 900, lineHeight: 34, fontStyle: "italic", letterSpacing: -0.5, textAlign: "CENTER", textCase: "UPPER" });
+    k.textStyle("Node 18", { size: 18, fontWeight: 900, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Prompt 20", { size: 20, fontWeight: 900, lineHeight: 26, letterSpacing: 3, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Reward 44", { size: 44, fontWeight: 900, lineHeight: 48, letterSpacing: -1, textAlign: "CENTER" });
+    const E = { back: (s = 1.8) => ({ kind: "ease", name: "back-out", param: s }), out: { kind: "ease", name: "cubic-out" }, inOut: { kind: "ease", name: "cubic-in-out" }, bounce: { kind: "ease", name: "bounce-out" }, hold: { kind: "hold" }, lin: { kind: "linear" } };
+    const pulse = (v, ms = 650) => set(v.id, { expression: `${v.n} + 1`, glide: ms, easing: "LINEAR" });
+    const pill = (parent, x, y, w, h, color, o = {}) => {
+      const id = k.rect(parent, w, h, color === "gloss" ? k.tint("gloss", o.opacity ?? 0.6) : color, { name: o.name ?? "Gloss", radius: h / 2, absolute: { x, y } });
+      if (o.rotation) k.patch(id, { rotation: o.rotation });
+      return id;
+    };
+    const sparkle = (parent, x, y, s, phase, color = "card") => {
+      const id = k.star(parent, s, color, { name: "Sparkle", absolute: { x, y } });
+      drift(k, id, "opacity", 0.45, 0.6 + phase * 0.3, phase);
+      drift(k, id, "scaleX", 0.25, 0.6 + phase * 0.3, phase);
+      drift(k, id, "scaleY", 0.25, 0.6 + phase * 0.3, phase);
+      spin(k, id, 20 + phase * 30);
+      return id;
+    };
+    const flower = (parent, x, y, s, petalColor, center, name = "Flower") => {
+      const g = box(k, parent, x, y, s, s, { name });
+      const r = s * 0.3, pr = s * 0.36;
+      for (let i = 0; i < 5; i++) {
+        const a = -Math.PI / 2 + i * 2 * Math.PI / 5;
+        k.ellipse(g, pr, petalColor, { name: "Petal", absolute: { x: s / 2 + Math.cos(a) * r - pr / 2, y: s / 2 + Math.sin(a) * r - pr / 2 } });
+      }
+      k.ellipse(g, s * 0.34, center, { name: "Flower centre", absolute: { x: s * 0.33, y: s * 0.33 } });
+      pill(g, s * 0.38, s * 0.37, s * 0.14, s * 0.08, "gloss", { opacity: 0.7 });
+      return g;
+    };
+    const cloud = (parent, x, y, s, speed) => {
+      const g = box(k, parent, x, y, 120 * s, 50 * s, { name: "Cloud" });
+      k.rect(g, 120 * s, 28 * s, "cloud", { name: "Cloud base", radius: 14 * s, absolute: { x: 0, y: 22 * s } });
+      k.ellipse(g, 44 * s, "cloud", { name: "Puff", absolute: { x: 18 * s, y: 6 * s } });
+      k.ellipse(g, 56 * s, "cloud", { name: "Puff", absolute: { x: 50 * s, y: -6 * s } });
+      drift(k, g, "translateX", 14, speed);
+      return g;
+    };
+    const heartPts = (cx, cy, s) => {
+      const out = [];
+      for (let i = 0; i < 40; i++) {
+        const t = i / 40 * Math.PI * 2;
+        out.push([cx + 16 * Math.sin(t) ** 3 * s / 34, cy - (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)) * s / 34]);
+      }
+      return out;
+    };
+    const heart = (parent, x, y, s, color = "heart", name = "Heart") => {
+      const g = box(k, parent, x, y, s, s, { name });
+      poly(k, g, heartPts(s / 2, s / 2 + s * 0.04, s), color, { name: "Heart shape" });
+      pill(g, s * 0.2, s * 0.2, s * 0.22, s * 0.12, "gloss", { opacity: 0.6, rotation: -30 });
+      return g;
+    };
+    const coinIcon = (parent, x, y, s) => {
+      const g = box(k, parent, x, y, s, s, { name: "Coin" });
+      k.ellipse(g, s, "coinDeep", { name: "Coin rim", absolute: { x: 0, y: 0 } });
+      k.ellipse(g, s * 0.8, "coin", { name: "Coin face", absolute: { x: s * 0.1, y: s * 0.06 } });
+      k.star(g, s * 0.42, "sunSoft", { name: "Coin mark", absolute: { x: s * 0.29, y: s * 0.24 } });
+      return g;
+    };
+    const gemIcon = (parent, x, y, s) => {
+      const g = box(k, parent, x, y, s, s, { name: "Gem" });
+      poly(k, g, [[s * 0.2, s * 0.12], [s * 0.8, s * 0.12], [s, s * 0.4], [s / 2, s * 0.95], [0, s * 0.4]], "gemDeep", { name: "Gem body" });
+      poly(k, g, [[s * 0.26, s * 0.2], [s * 0.74, s * 0.2], [s * 0.86, s * 0.4], [s / 2, s * 0.8], [s * 0.14, s * 0.4]], "gem", { name: "Gem face" });
+      poly(k, g, [[s * 0.3, s * 0.24], [s * 0.5, s * 0.24], [s * 0.4, s * 0.38]], k.tint("gloss", 0.8), { name: "Gem gloss" });
+      return g;
+    };
+    const hammerIcon = (parent, x, y, s) => {
+      const g = box(k, parent, x, y, s, s, { name: "Hammer icon" });
+      const handle = k.rect(g, s * 0.16, s * 0.62, "soilDeep", { name: "Handle", radius: s * 0.08, absolute: { x: s * 0.46, y: s * 0.32 } });
+      const head = k.rect(g, s * 0.66, s * 0.3, "pinkDeep", { name: "Hammer head", radius: s * 0.12, absolute: { x: s * 0.2, y: s * 0.1 } });
+      pill(g, s * 0.26, s * 0.13, s * 0.3, s * 0.08, "gloss");
+      k.patch(handle, { rotation: 22 });
+      k.patch(head, { rotation: 22 });
+      return g;
+    };
+    const shuffleIcon = (parent, x, y, s) => {
+      const g = box(k, parent, x, y, s, s, { name: "Shuffle icon" });
+      arc(k, g, s / 2, s / 2, s * 0.32, -Math.PI * 0.95, -Math.PI * 0.15, "gemDeep", s * 0.12, { name: "Swirl" });
+      arc(k, g, s / 2, s / 2, s * 0.32, Math.PI * 0.05, Math.PI * 0.85, "mintDeep", s * 0.12, { name: "Swirl" });
+      poly(k, g, [[s * 0.72, s * 0.14], [s * 0.94, s * 0.38], [s * 0.64, s * 0.42]], "gemDeep", { name: "Arrow head" });
+      poly(k, g, [[s * 0.28, s * 0.86], [s * 0.06, s * 0.62], [s * 0.36, s * 0.58]], "mintDeep", { name: "Arrow head" });
+      return g;
+    };
+    const tulipIcon = (parent, x, y, s, name = "Tulip icon") => {
+      const g = box(k, parent, x, y, s, s, { name });
+      k.rect(g, s * 0.1, s * 0.42, "stem", { name: "Stem", radius: s * 0.05, absolute: { x: s * 0.45, y: s * 0.55 } });
+      poly(k, g, [[s * 0.5, s * 0.72], [s * 0.2, s * 0.62], [s * 0.3, s * 0.9]], "grassDeep", { name: "Leaf" });
+      poly(k, g, [[s * 0.14, s * 0.12], [s * 0.32, s * 0.3], [s * 0.5, s * 0.06], [s * 0.68, s * 0.3], [s * 0.86, s * 0.12], [s * 0.84, s * 0.46], [s * 0.66, s * 0.64], [s * 0.34, s * 0.64], [s * 0.16, s * 0.46]], "pinkDeep", { name: "Tulip cup" });
+      poly(k, g, [[s * 0.36, s * 0.34], [s * 0.5, s * 0.14], [s * 0.64, s * 0.34], [s * 0.6, s * 0.56], [s * 0.4, s * 0.56]], "pink", { name: "Tulip heart" });
+      pill(g, s * 0.24, s * 0.22, s * 0.08, s * 0.2, "gloss", { opacity: 0.6 });
+      return g;
+    };
+    const check = (parent, x, y, s, color = "mintDeep") => poly(k, parent, [[x, y + s * 0.5], [x + s * 0.38, y + s * 0.88], [x + s, y + s * 0.1]], color, { name: "Check", stroke: s * 0.2, closed: false });
+    const hint = (parent, text, y, expression) => {
+      const plate = box(k, parent, 16, y, W - 32, 30, { name: "Key hints", fill: k.tint("card", 0.92), radius: 15, align: "CENTER", justify: "CENTER" });
+      const t = k.text(plate, text, { style: "Small 13", color: "plum", width: W - 48, align: "CENTER", name: "Hints" });
+      if (expression) k.bindExpression(t, "characters", expression);
+      return plate;
+    };
+    const garden = (parent, top) => {
+      const g = box(k, parent, 0, top, W, H - top, { name: "Garden" });
+      k.ellipse(g, 520, "hill", { name: "Far hill", absolute: { x: -210, y: 30 } });
+      k.ellipse(g, 560, "grass", { name: "Near hill", absolute: { x: 90, y: 60 } });
+      const cols = [["pink", "sun"], ["card", "sun"], ["lilac", "sunSoft"], ["sun", "soilDeep"]];
+      [[26, 56], [86, 30], [300, 44], [352, 80], [196, 70]].forEach(([x, y], i) => {
+        const f = flower(g, x, y, 30, cols[i % 4][0], cols[i % 4][1], "Garden flower");
+        drift(k, f, "rotation", 8, 0.35 + i * 0.07, i * 0.2);
+      });
+      return g;
+    };
+    const wallet = (parent) => {
+      const row = box(k, parent, 16, 56, W - 32, 40, { name: "Wallet" });
+      const cell = (x, name) => box(k, row, x, 0, 116, 40, { name, fill: "card", radius: 20, stroke: { color: "petal", width: 2, align: "INSIDE" } });
+      const a = cell(0, "Lives pill");
+      heart(a, 6, 7, 26);
+      readout(k, a, `${lives.n} >= ${maxLives.n} ? ${lives.n} + " FULL" : ${lives.n} + " / " + ${maxLives.n}`, "5 FULL", "Count 18", "plum", 38, 9, { w: 74, name: "Lives count" });
+      const b = cell(127, "Coins pill");
+      coinIcon(b, 7, 7, 26);
+      readout(k, b, `group(${coins.n})`, "1,250", "Count 18", "plum", 38, 9, { w: 74, name: "Coins count" });
+      const c = cell(254, "Gems pill");
+      gemIcon(c, 7, 7, 26);
+      readout(k, c, `group(${gems.n})`, "40", "Count 18", "plum", 38, 9, { w: 74, name: "Gems count" });
+      k.bindExpression(c, "translateX", shake(gemPulse.n, 6));
+      return row;
+    };
+    const sky = (parent, o = {}) => {
+      k.rect(parent, W, H, [k.gradient({ from: "skyTop", to: "cream", angle: 90 })], { name: "Sky", absolute: { x: 0, y: 0 } });
+      if (o.sun !== false) {
+        const s = box(k, parent, 276, 120, 120, 120, { name: "Sun" });
+        const rays = box(k, s, 0, 0, 120, 120, { name: "Sun rays" });
+        for (let i = 0; i < 10; i++) sector(k, rays, 60, 60, 60, 36, i * Math.PI / 5, i * Math.PI / 5 + 0.22, k.tint("sun", 0.55), { name: "Ray" });
+        spin(k, rays, 12);
+        k.ellipse(s, 64, "sun", { name: "Sun disc", absolute: { x: 28, y: 28 } });
+        pill(s, 42, 38, 20, 9, "gloss", { opacity: 0.6 });
+      }
+      cloud(parent, 18, o.cloudY ?? 150, 0.8, 0.07);
+      cloud(parent, 250, (o.cloudY ?? 150) + 100, 0.6, 0.09);
+    };
+    const squash = (jelly, label2) => {
+      keys(k, jelly, "translateY", [{ t: 0, v: 0, ease: E.out }, { t: 70, v: 5, ease: E.back(2.6) }, { t: 340, v: 0 }]);
+      keys(k, jelly, "scaleX", [{ t: 0, v: 1, ease: E.out }, { t: 70, v: 1.05, ease: E.back(2.6) }, { t: 200, v: 0.97, ease: E.inOut }, { t: 340, v: 1 }]);
+      keys(k, jelly, "scaleY", [{ t: 0, v: 1, ease: E.out }, { t: 70, v: 0.84, ease: E.back(2.6) }, { t: 200, v: 1.05, ease: E.inOut }, { t: 340, v: 1 }]);
+      void label2;
+    };
+    const buttonSet = (name, w, h, body, shade, ink, hover, style, lh) => {
+      k.variantSet(name, "State", ["Idle", "Hover", "Pressed"], { width: w, height: h + 6, props: { Label: "Play" }, description: `A squishy ${name.toLowerCase()}: hover brightens it, a tap squashes it onto its shadow and springs it back.` }, (state, id) => {
+        k.rect(id, w, h, shade, { name: "Shade", radius: h / 2, absolute: { x: 0, y: 6 } });
+        const jelly = box(k, id, 0, 0, w, h, { name: "Jelly" });
+        k.rect(jelly, w, h, state === "Hover" ? hover : body, { name: "Body", radius: h / 2, absolute: { x: 0, y: 0 } });
+        pill(jelly, Math.round(h * 0.4), 5, state === "Hover" ? Math.round(w * 0.3) : Math.round(w * 0.2), 8, "gloss", { opacity: 0.55 });
+        const t = k.propText(jelly, "Label", { style, color: ink, width: w, align: "CENTER", absolute: { x: 0, y: Math.round((h - lh) / 2) + 1 } });
+        if (state === "Pressed") squash(jelly, t);
+      }, (s) => s === "Pressed" ? { timeline: { duration: 360 } } : {});
+      k.changeTo(`${name}/Idle`, "ON_HOVER", `${name}/Hover`, 120, "SPRING");
+    };
+    buttonSet("Candy button", 300, 58, "primary", "pinkDeep", "onPrimary", "primary", "Button 20", 26);
+    buttonSet("Soft button", 300, 52, "card", "lilac", "plum", "petal", "Button 20", 26);
+    buttonSet("Price chip", 92, 42, "sun", "sunDeep", "plum", "sunSoft", "Label 16", 22);
+    const tapButton = (id, set2, actions) => onAll(k, id, [k.changeAction(`${set2}/Pressed`, 0), ...actions]);
+    k.variantSet("Switch", "State", ["Off", "On"], { width: 76, height: 44, description: "A jelly switch: the knob springs across." }, (state, id) => {
+      const on = state === "On";
+      k.rect(id, 64, 36, on ? "mintDeep" : "lockedDeep", { name: "Track", radius: 18, absolute: { x: 6, y: 4 } });
+      k.ellipse(id, 28, "card", { name: "Knob", absolute: { x: on ? 38 : 10, y: 8 } });
+      pill(id, on ? 44 : 16, 11, 12, 6, "gloss", { name: "Knob gloss", opacity: 0.9 });
+    });
+    const drawFlowerOf = (kind, g) => {
+      if (kind === "Tulip") {
+        k.rect(g, 4, 12, "stem", { name: "Stem", radius: 2, absolute: { x: 18, y: 28 } });
+        poly(k, g, [[20, 36], [9, 30], [13, 40]], "grassDeep", { name: "Leaf" });
+        poly(k, g, [[6, 4], [13, 12], [20, 2], [27, 12], [34, 4], [33, 19], [26, 27], [14, 27], [7, 19]], "pinkDeep", { name: "Tulip cup" });
+        poly(k, g, [[15, 13], [20, 5], [25, 13], [24, 23], [16, 23]], "pink", { name: "Tulip heart" });
+        pill(g, 10, 9, 4, 9, "gloss", { opacity: 0.7 });
+      } else if (kind === "Daisy") {
+        for (let i = 0; i < 6; i++) {
+          const a = i * Math.PI / 3;
+          const p = k.rect(g, 10, 17, "card", { name: "Petal", radius: 5, absolute: { x: 15 + Math.cos(a) * 11, y: 11.5 + Math.sin(a) * 11 } });
+          k.patch(p, { rotation: a * 180 / Math.PI + 90 });
+        }
+        k.ellipse(g, 14, "sun", { name: "Daisy centre", absolute: { x: 13, y: 13 } });
+        pill(g, 15, 15, 6, 3, "gloss", { opacity: 0.8 });
+      } else if (kind === "Bluebell") {
+        k.rect(g, 4, 10, "stem", { name: "Stem", radius: 2, absolute: { x: 18, y: 0 } });
+        poly(k, g, [[20, 6], [30, 12], [32, 26], [37, 34], [3, 34], [8, 26], [10, 12]], "gemDeep", { name: "Bell" });
+        poly(k, g, [[20, 10], [27, 15], [28, 27], [12, 27], [13, 15]], "gem", { name: "Bell face" });
+        k.ellipse(g, 8, "sun", { name: "Clapper", absolute: { x: 16, y: 32 } });
+        pill(g, 14, 13, 4, 10, "gloss", { opacity: 0.7 });
+      } else {
+        k.star(g, 40, "sunDeep", { name: "Sun petals", absolute: { x: 0, y: 0 } });
+        const back2 = k.star(g, 40, "sunDeep", { name: "Sun petals back", absolute: { x: 0, y: 0 } });
+        k.patch(back2, { rotation: 36 });
+        k.star(g, 32, "sun", { name: "Sun petals inner", absolute: { x: 4, y: 5 } });
+        k.ellipse(g, 15, "soilDeep", { name: "Seed head", absolute: { x: 12.5, y: 13 } });
+        pill(g, 15, 15, 5, 3, "gloss", { opacity: 0.7 });
+      }
+    };
+    const TILE_GROUND = { Tulip: ["petal", "pink"], Daisy: ["lilacSoft", "lilac"], Bluebell: ["skySoft", "sky"], Sunflower: ["sunSoft", "sun"] };
+    const tileStates = Object.values(KINDS).flatMap((kd) => [kd, `${kd} pop`]);
+    k.variantSet("Tile", "State", tileStates, { width: 58, height: 58, description: 'A jelly flower tile. Change to "<kind> pop" on a tap: the flower bursts, the tile squashes, a new flower drops in.' }, (state, id) => {
+      const kind = state.replace(" pop", "");
+      const popping = state.endsWith(" pop");
+      const [ground, shade] = TILE_GROUND[kind];
+      const tile = box(k, id, 0, 0, 58, 58, { name: "Tile jelly" });
+      k.rect(tile, 58, 58, shade, { name: "Tile shade", radius: 18, absolute: { x: 0, y: 0 } });
+      k.rect(tile, 58, 53, ground, { name: "Tile body", radius: 18, absolute: { x: 0, y: 0 } });
+      pill(tile, 9, 5, 24, 7, "gloss", { opacity: 0.75 });
+      const fl = box(k, tile, 9, 8, 40, 40, { name: "Flower" });
+      drawFlowerOf(kind, fl);
+      const ring = k.ellipse(id, 50, [], { name: "Pop ring", stroke: { color: "card", width: 4 }, absolute: { x: 4, y: 4 }, opacity: 0 });
+      const sparks = [[-1, -1], [1, -1], [-1, 1], [1, 1]].map(([dx, dy], i) => {
+        const s = k.star(id, 12, i % 2 ? "sun" : "card", { name: "Pop spark", absolute: { x: 23, y: 23 }, opacity: 0 });
+        if (popping) {
+          keys(k, s, "opacity", [{ t: 60, v: 1, ease: E.hold }, { t: 300, v: 1, ease: E.out }, { t: 460, v: 0 }]);
+          keys(k, s, "translateX", [{ t: 60, v: 0, ease: E.out }, { t: 460, v: dx * 30 }]);
+          keys(k, s, "translateY", [{ t: 60, v: 0, ease: E.out }, { t: 460, v: dy * 30 }]);
+        }
+        return s;
+      });
+      void sparks;
+      if (!popping) return;
+      keys(k, fl, "scaleX", [{ t: 0, v: 1, ease: E.back() }, { t: 120, v: 1.45, ease: E.out }, { t: 230, v: 0.1, ease: E.hold }, { t: 260, v: 1 }]);
+      keys(k, fl, "scaleY", [{ t: 0, v: 1, ease: E.back() }, { t: 120, v: 1.45, ease: E.out }, { t: 230, v: 0.1, ease: E.hold }, { t: 260, v: 1 }]);
+      keys(k, fl, "opacity", [{ t: 0, v: 1, ease: E.hold }, { t: 120, v: 1, ease: E.out }, { t: 230, v: 0, ease: E.hold }, { t: 260, v: 0, ease: E.out }, { t: 360, v: 1 }]);
+      keys(k, fl, "translateY", [{ t: 0, v: 0, ease: E.hold }, { t: 260, v: -46, ease: E.bounce }, { t: 620, v: 0 }]);
+      keys(k, tile, "scaleY", [{ t: 0, v: 1, ease: E.out }, { t: 90, v: 0.84, ease: E.back(3) }, { t: 250, v: 1.06, ease: E.inOut }, { t: 400, v: 1 }]);
+      keys(k, tile, "scaleX", [{ t: 0, v: 1, ease: E.out }, { t: 90, v: 1.1, ease: E.back(3) }, { t: 250, v: 0.96, ease: E.inOut }, { t: 400, v: 1 }]);
+      keys(k, ring, "opacity", [{ t: 40, v: 1, ease: E.out }, { t: 380, v: 0 }]);
+      keys(k, ring, "scaleX", [{ t: 40, v: 0.4, ease: E.out }, { t: 380, v: 1.5 }]);
+      keys(k, ring, "scaleY", [{ t: 40, v: 0.4, ease: E.out }, { t: 380, v: 1.5 }]);
+    }, (s) => s.endsWith(" pop") ? { timeline: { duration: 640 } } : {});
+    k.variantSet("Chest", "State", ["Closed", "Wobble", "Cracked", "Open"], { width: 220, height: 220, description: "The daily chest: change to Wobble, Cracked, then Open on three taps." }, (state, id) => {
+      const stage = ["Closed", "Wobble", "Cracked", "Open"].indexOf(state);
+      const glowL = k.ellipse(id, 200, "sun", { name: "Glow", absolute: { x: 10, y: 20 }, opacity: stage >= 2 ? 0.55 : 0, effects: [glow(k, "sun", 40, 0.9)] });
+      const burst = k.ellipse(id, 210, [], { name: "Burst", stroke: { color: "card", width: 8 }, absolute: { x: 5, y: 5 }, opacity: 0 });
+      const chest = box(k, id, 0, 0, 220, 220, { name: "Chest body group" });
+      k.patch(chest, { anchorY: 0.85 });
+      k.rect(chest, 170, 98, "pinkDeep", { name: "Chest shade", radius: 24, absolute: { x: 25, y: 112 } });
+      k.rect(chest, 170, 90, "pink", { name: "Chest front", radius: 24, absolute: { x: 25, y: 112 } });
+      k.rect(chest, 28, 98, "sunDeep", { name: "Chest band", radius: 6, absolute: { x: 96, y: 112 } });
+      pill(chest, 40, 122, 44, 10, "gloss", { opacity: 0.55 });
+      const lid = box(k, chest, 18, 66, 184, 62, { name: "Lid" });
+      k.rect(lid, 184, 62, "pinkDeep", { name: "Lid shade", radius: 30, absolute: { x: 0, y: 0 } });
+      k.rect(lid, 184, 54, "pink", { name: "Lid top", radius: 28, absolute: { x: 0, y: 0 } });
+      k.rect(lid, 28, 62, "sun", { name: "Lid band", radius: 6, absolute: { x: 78, y: 0 } });
+      pill(lid, 22, 8, 60, 12, "gloss", { opacity: 0.6 });
+      const lock = box(k, chest, 92, 110, 36, 40, { name: "Lock" });
+      k.rect(lock, 36, 40, "sun", { name: "Lock plate", radius: 12, absolute: { x: 0, y: 0 } });
+      k.rect(lock, 6, 14, "plum", { name: "Keyhole", radius: 3, absolute: { x: 15, y: 12 } });
+      const cracks = box(k, chest, 0, 0, 220, 220, { name: "Cracks" });
+      k.patch(cracks, { opacity: stage >= 2 ? 1 : 0 });
+      poly(k, cracks, [[48, 118], [62, 140], [56, 156], [72, 176]], "card", { name: "Crack", stroke: 3 });
+      poly(k, cracks, [[168, 124], [154, 146], [164, 164]], "card", { name: "Crack", stroke: 3 });
+      poly(k, cracks, [[70, 72], [82, 88], [76, 104]], "card", { name: "Crack", stroke: 3 });
+      const coinsOut = [[-58, -96], [0, -128], [58, -96]].map(([dx, dy], i) => {
+        const c = k.ellipse(id, 30, "coin", { name: "Flying coin", absolute: { x: 95, y: 100 }, opacity: stage === 3 ? 1 : 0, stroke: { color: "coinDeep", width: 4 } });
+        if (stage === 3) {
+          keys(k, c, "opacity", [{ t: 200, v: 0, ease: E.hold }, { t: 240, v: 1 }]);
+          keys(k, c, "translateX", [{ t: 240, v: 0, ease: E.out }, { t: 700, v: dx }]);
+          keys(k, c, "translateY", [{ t: 240, v: 0, ease: E.back(2.4) }, { t: 700, v: dy - 30, ease: E.bounce }, { t: 1200, v: dy }]);
+          void i;
+        }
+        return c;
+      });
+      void coinsOut;
+      if (stage === 1) {
+        keys(k, chest, "rotation", [{ t: 0, v: 0, ease: E.inOut }, { t: 90, v: -7, ease: E.inOut }, { t: 200, v: 7, ease: E.inOut }, { t: 310, v: -5, ease: E.inOut }, { t: 420, v: 3, ease: E.inOut }, { t: 560, v: 0 }]);
+        keys(k, chest, "scaleY", [{ t: 0, v: 1, ease: E.out }, { t: 80, v: 0.93, ease: E.back(3) }, { t: 260, v: 1 }]);
+      }
+      if (stage === 2) {
+        keys(k, chest, "rotation", [{ t: 0, v: 0, ease: E.lin }, { t: 60, v: -12, ease: E.lin }, { t: 130, v: 12, ease: E.lin }, { t: 200, v: -10, ease: E.lin }, { t: 270, v: 10, ease: E.lin }, { t: 340, v: -6, ease: E.lin }, { t: 420, v: 4, ease: E.inOut }, { t: 560, v: 0 }]);
+        keys(k, cracks, "opacity", [{ t: 120, v: 0, ease: E.hold }, { t: 140, v: 1 }]);
+        keys(k, glowL, "opacity", [{ t: 100, v: 0, ease: E.out }, { t: 500, v: 0.85, ease: E.inOut }, { t: 900, v: 0.55 }]);
+        keys(k, lid, "translateY", [{ t: 0, v: 0, ease: E.back(3) }, { t: 400, v: -8 }]);
+        k.patch(lid, { translateY: -8 });
+      }
+      if (stage === 3) {
+        k.patch(lid, { translateY: -170, rotation: -24, opacity: 0 });
+        keys(k, chest, "scaleY", [{ t: 0, v: 1, ease: E.out }, { t: 140, v: 0.82, ease: E.back(3) }, { t: 320, v: 1.08, ease: E.inOut }, { t: 520, v: 1 }]);
+        keys(k, lid, "translateY", [{ t: 140, v: -8, ease: E.out }, { t: 600, v: -170 }]);
+        keys(k, lid, "rotation", [{ t: 140, v: 0, ease: E.out }, { t: 600, v: -24 }]);
+        keys(k, lid, "opacity", [{ t: 140, v: 1, ease: E.hold }, { t: 380, v: 1, ease: E.out }, { t: 600, v: 0 }]);
+        keys(k, burst, "opacity", [{ t: 140, v: 1, ease: E.out }, { t: 800, v: 0 }]);
+        keys(k, burst, "scaleX", [{ t: 140, v: 0.3, ease: E.out }, { t: 800, v: 1.7 }]);
+        keys(k, burst, "scaleY", [{ t: 140, v: 0.3, ease: E.out }, { t: 800, v: 1.7 }]);
+        keys(k, glowL, "opacity", [{ t: 0, v: 0.55, ease: E.out }, { t: 200, v: 1, ease: E.inOut }, { t: 1200, v: 0.6 }]);
+        k.patch(glowL, { opacity: 0.6 });
+      }
+    }, (s) => s === "Wobble" ? { timeline: { duration: 600 } } : s === "Cracked" ? { timeline: { duration: 920 } } : s === "Open" ? { timeline: { duration: 1240 } } : {});
+    const boot = screen(k, "Boot", { ground: "cream", first: true, duration: 3800 });
+    const title = screen(k, "Title", { ground: "sky" });
+    const map = screen(k, "Level map", { ground: "sky" });
+    const start = screen(k, "Level start", { ground: "scrim", fills: k.tint("scrim", 0.55) });
+    const game = screen(k, "Gameplay", { ground: "mint" });
+    const pause = screen(k, "Pause", { ground: "scrim", fills: k.tint("scrim", 0.6) });
+    const complete = screen(k, "Level complete", { ground: "petal", duration: 4e3 });
+    const oom = screen(k, "Out of moves", { ground: "scrim", fills: k.tint("scrim", 0.62) });
+    const shop = screen(k, "Shop", { ground: "cream" });
+    const daily = screen(k, "Daily reward", { ground: "lilacSoft" });
+    const livesScreen = screen(k, "Lives", { ground: "petal" });
+    const settings = screen(k, "Settings", { ground: "cream" });
+    k.flowStart(boot, "Play BLOSSOM BASH");
+    const resetRun = [
+      set(moves.id, { expression: `${maxMoves.n} + ${hasCan.n} * 3` }),
+      set(goal.id, { expression: goalMax.n }),
+      set(score.id, { value: 0 }),
+      set(combo.id, { value: 0 }),
+      set(armed.id, { value: 0 }),
+      set(cursor.id, { value: 14 }),
+      set(kbd.id, { value: 0 }),
+      set(earned.id, { value: 0 })
+    ];
+    const toMap = (t = "DISSOLVE") => go(map, t, { duration: 380 });
+    const buttonColumn = (parent, items, o) => {
+      const pitch = o.pitch ?? 74;
+      const list = box(k, parent, o.x, o.y, 316, pitch * items.length, { name: "Button list" });
+      items.forEach((it, i) => {
+        const slot = box(k, list, 0, i * pitch, 316, pitch - 6, { name: "Button slot" });
+        const ring = k.rect(slot, 316, it.set === "Candy button" ? 74 : 68, [], { name: "Focus ring", radius: 37, stroke: { color: "sunDeep", width: 4 }, absolute: { x: 0, y: -4 } });
+        k.bindExpression(ring, "visible", `${o.focus.n} == ${i}`);
+        const b = k.instance(slot, it.set, { Label: it.label }, { name: it.name, absolute: { x: 8, y: 2 } });
+        tapButton(b, it.set, it.actions);
+        k.on(slot, set(o.focus.id, { value: i }), { trigger: "MOUSE_ENTER" });
+      });
+      const n = items.length, f = o.focus.n;
+      for (const key of ["ArrowDown", "s"]) k.on(list, set(o.focus.id, { expression: `(${f} + 1) % ${n}` }), { key });
+      for (const key of ["ArrowUp", "w"]) k.on(list, set(o.focus.id, { expression: `(${f} + ${n - 1}) % ${n}` }), { key });
+      const choose = when(items.map((it, i) => ({ if: `${f} == ${i}`, then: it.actions })));
+      for (const key of ["Enter", " "]) k.on(list, choose, { key });
+      if (o.escape) for (const a of o.escape) k.on(list, a, { key: "Escape" });
+      return list;
+    };
+    const card = (parent, x, y, w, h, name) => {
+      const c = box(k, parent, x, y, w, h + 8, { name });
+      k.rect(c, w, h, "lilac", { name: "Card shade", radius: 34, absolute: { x: 0, y: 8 } });
+      k.rect(c, w, h, "card", { name: "Card face", radius: 34, absolute: { x: 0, y: 0 } });
+      return c;
+    };
+    const roundButton = (parent, x, y, kind, name) => {
+      const b = box(k, parent, x, y, 48, 52, { name });
+      k.ellipse(b, 48, "lilac", { name: "Round shade", absolute: { x: 0, y: 4 } });
+      k.ellipse(b, 48, "card", { name: "Round face", absolute: { x: 0, y: 0 } });
+      if (kind === "back") poly(k, b, [[28, 14], [18, 24], [28, 34]], "plum", { name: "Chevron", stroke: 5, closed: false });
+      if (kind === "close") {
+        poly(k, b, [[16, 16], [32, 32]], "plum", { name: "Cross", stroke: 5 });
+        poly(k, b, [[32, 16], [16, 32]], "plum", { name: "Cross", stroke: 5 });
+      }
+      if (kind === "pause") {
+        k.rect(b, 7, 20, "plum", { name: "Pause bar", radius: 3.5, absolute: { x: 15, y: 14 } });
+        k.rect(b, 7, 20, "plum", { name: "Pause bar", radius: 3.5, absolute: { x: 26, y: 14 } });
+      }
+      return b;
+    };
+    const TABS = [["Map", map], ["Shop", shop], ["Daily", daily], ["Lives", livesScreen], ["Options", settings]];
+    const tabBar = (parent, active) => {
+      const bar = box(k, parent, 12, 770, W - 24, 68, { name: "Tab bar" });
+      k.rect(bar, W - 24, 68, "lilac", { name: "Tab shade", radius: 34, absolute: { x: 0, y: 4 } });
+      k.rect(bar, W - 24, 64, "card", { name: "Tab face", radius: 32, absolute: { x: 0, y: 0 } });
+      TABS.forEach(([name, dest], i) => {
+        const t = box(k, bar, 4 + i * 74, 4, 74, 56, { name: `${name} tab` });
+        if (name === active) k.rect(t, 70, 56, "petal", { name: "Tab active", radius: 28, absolute: { x: 2, y: 0 } });
+        const ic = box(k, t, 24, 5, 26, 26, { name: "Tab icon" });
+        if (name === "Map") {
+          k.ellipse(ic, 20, "pinkDeep", { name: "Pin", absolute: { x: 3, y: 0 } });
+          poly(k, ic, [[5, 14], [13, 26], [21, 14]], "pinkDeep", { name: "Pin tip" });
+          k.ellipse(ic, 8, "card", { name: "Pin dot", absolute: { x: 9, y: 6 } });
+        }
+        if (name === "Shop") {
+          k.rect(ic, 22, 18, "mintDeep", { name: "Bag", radius: 6, absolute: { x: 2, y: 8 } });
+          arc(k, ic, 13, 9, 6, Math.PI, Math.PI * 2, "mintDeep", 3, { name: "Bag handle" });
+        }
+        if (name === "Daily") {
+          k.rect(ic, 22, 16, "sunDeep", { name: "Gift", radius: 4, absolute: { x: 2, y: 10 } });
+          k.rect(ic, 24, 7, "pinkDeep", { name: "Gift lid", radius: 3, absolute: { x: 1, y: 5 } });
+          k.rect(ic, 4, 21, "pinkDeep", { name: "Ribbon", absolute: { x: 11, y: 5 } });
+        }
+        if (name === "Lives") heart(ic, 0, 0, 26);
+        if (name === "Options") {
+          k.star(ic, 26, "lilacDeep", { name: "Cog", absolute: { x: 0, y: 0 } });
+          k.ellipse(ic, 10, "card", { name: "Cog hole", absolute: { x: 8, y: 9 } });
+        }
+        k.text(t, name, { style: "Tab 13", color: "plum", width: 74, align: "CENTER", absolute: { x: 0, y: 35 }, name: "Tab label" });
+        const reset = name === "Shop" ? [set(shopResult.id, { value: "" }), set(poorRow.id, { value: -1 })] : name === "Lives" ? [set(livesNote.id, { value: "" })] : name === "Daily" ? [] : [];
+        if (name !== active) onAll(k, t, [...reset, name === "Options" ? go(dest, "SLIDE_FROM_RIGHT", { duration: 320 }) : go(dest, "DISSOLVE", { duration: 300 })]);
+      });
+      return bar;
+    };
+    {
+      k.rect(boot, W, H, [k.gradient({ from: "petal", to: "cream", kind: "RADIAL", handles: [{ x: 0.5, y: 0.4 }, { x: 1.1, y: 0.4 }, { x: 0.5, y: 1.1 }] })], { name: "Glow ground", absolute: { x: 0, y: 0 } });
+      const plate = box(k, boot, 131, 178, 140, 146, { name: "Logo jelly" });
+      k.rect(plate, 140, 140, "pinkDeep", { name: "Jelly shade", radius: 44, absolute: { x: 0, y: 6 } });
+      k.rect(plate, 140, 140, "pink", { name: "Jelly", radius: 44, absolute: { x: 0, y: 0 } });
+      pill(plate, 20, 12, 44, 12, "gloss", { opacity: 0.6, rotation: -12 });
+      k.logo(boot, 96, 96, { absolute: { x: 153, y: 200 } });
+      label(k, boot, "{{brand.studio}}", "Studio 18", "plum", 16, 344, { w: W - 32, align: "CENTER", name: "Studio" });
+      const hop = box(k, boot, 141, 420, 120, 150, { name: "Bouncing flower" });
+      const shadow = k.rect(hop, 70, 14, k.tint("lilacDeep", 0.25), { name: "Hop shadow", radius: 7, absolute: { x: 25, y: 134 } });
+      const bud = box(k, hop, 20, 20, 80, 110, { name: "Bud" });
+      k.rect(bud, 8, 40, "stem", { name: "Stem", radius: 4, absolute: { x: 36, y: 66 } });
+      flower(bud, 0, 0, 80, "pink", "sun", "Bloom");
+      k.behave(bud, "translateY", [{ kind: "bounce", amp: -40, freq: 1.6, decay: 0, start: 0 }]);
+      drift(k, shadow, "scaleX", 0.2, 1.6, 0.25);
+      for (const [x, y, s, p] of [[70, 440, 16, 0], [310, 470, 12, 0.4], [96, 560, 10, 0.7], [290, 580, 16, 0.2]]) sparkle(boot, x, y, s, p, "sunDeep");
+      const vine = box(k, boot, 81, 640, 240, 18, { name: "Loading vine", fill: "petal", radius: 9, clip: true });
+      const fill = k.rect(vine, 240, 18, "mintDeep", { name: "Vine fill", radius: 9, absolute: { x: 0, y: 0 } });
+      keys(k, fill, "width", [{ t: 200, v: 18, ease: E.inOut }, { t: 2800, v: 240 }]);
+      label(k, boot, "Watering the garden...", "Body 15", "plum", 16, 670, { w: W - 32, align: "CENTER", name: "Loading line" });
+      k.cues(boot, [
+        { layer: "Logo jelly", preset: "pop-in", at: 0 },
+        { layer: "{{brand.logo}}", preset: "pop-in", at: 120 },
+        { layer: "Studio", preset: "rise-in", at: 250 },
+        { layer: "Bouncing flower", preset: "pop-in", at: 500 }
+      ]);
+      k.link(boot, title, "DISSOLVE", { trigger: "AFTER_TIMEOUT", delay: 3600, duration: 500 });
+      k.link(boot, title, "DISSOLVE", { key: "*", duration: 350 });
+      k.link(boot, title, "DISSOLVE", { duration: 350 });
+    }
+    {
+      sky(title);
+      garden(title, 640);
+      const lock = box(k, title, 21, 132, 360, 230, { name: "Title lockup" });
+      k.rect(lock, 360, 222, "pinkDeep", { name: "Plaque shade", radius: 40, absolute: { x: 0, y: 8 } });
+      k.rect(lock, 360, 222, "card", { name: "Plaque", radius: 40, absolute: { x: 0, y: 0 } });
+      label(k, lock, "{{brand.title}}", "Logo 50", "plum", 16, 22, { w: 328, align: "CENTER", name: "Title" });
+      label(k, lock, "{{brand.tagline}}", "Body 15", "plum", 24, 150, { w: 312, align: "CENTER", name: "Tagline" });
+      drift(k, lock, "rotation", 1.5, 0.25);
+      const hero = box(k, title, 101, 392, 200, 200, { name: "Hero bloom" });
+      const petals = box(k, hero, 0, 0, 200, 200, { name: "Hero petals" });
+      for (let i = 0; i < 6; i++) {
+        const a = i * Math.PI / 3;
+        const p = k.rect(petals, 70, 100, i % 2 ? "pink" : "pinkDeep", { name: "Hero petal", radius: 35, absolute: { x: 65 + Math.cos(a) * 52, y: 50 + Math.sin(a) * 52 } });
+        k.patch(p, { rotation: a * 180 / Math.PI + 90 });
+      }
+      spin(k, petals, 14);
+      k.ellipse(hero, 86, "sun", { name: "Hero centre", absolute: { x: 57, y: 57 } });
+      pill(hero, 76, 70, 26, 12, "gloss", { opacity: 0.7 });
+      drift(k, hero, "translateY", 8, 0.5);
+      for (const [x, y, s, p] of [[40, 400, 18, 0], [340, 380, 14, 0.5], [60, 590, 12, 0.3], [330, 600, 18, 0.8], [196, 370, 10, 0.1]]) sparkle(title, x, y, s, p, p > 0.4 ? "sun" : "card");
+      const prompt = box(k, title, 81, 700, 240, 48, { name: "Tap prompt", fill: "card", radius: 24, align: "CENTER", justify: "CENTER", stroke: { color: "pink", width: 3, align: "INSIDE" } });
+      k.text(prompt, "Tap to play", { style: "Prompt 20", color: "plum", autoWidth: true, name: "Prompt" });
+      drift(k, prompt, "scaleX", 0.05, 0.9);
+      drift(k, prompt, "scaleY", 0.05, 0.9);
+      label(k, title, "\xA9 2026 {{brand.studio}} \xB7 v1.4 Meadow", "Small 13", "plum", 16, 806, { w: W - 32, align: "CENTER", name: "Legal" });
+      k.cues(title, [{ layer: "Title lockup", preset: "drop-in", at: 0, params: { ease: E.back(2) } }, { layer: "Hero bloom", preset: "pop-in", at: 350 }, { layer: "Tap prompt", preset: "rise-in", at: 800 }]);
+      k.link(title, map, "CIRCLE_WIPE", { key: "*", duration: 600 });
+      k.link(title, map, "CIRCLE_WIPE", { duration: 600 });
+    }
+    {
+      sky(map, { cloudY: 190 });
+      k.ellipse(map, 900, "hill", { name: "Back hill", absolute: { x: -250, y: 200 } });
+      k.ellipse(map, 820, "grass", { name: "Front hill", absolute: { x: -80, y: 420 } });
+      const deco = box(k, map, 0, 0, W, H, { name: "Hill flowers" });
+      const cols = [["pink", "sun"], ["card", "sun"], ["lilac", "sunSoft"], ["sun", "soilDeep"]];
+      [[30, 420], [340, 470], [20, 610], [350, 700], [260, 740], [40, 300], [360, 250], [160, 620], [180, 350]].forEach(([x, y], i) => {
+        const f = flower(deco, x, y, 22 + i % 3 * 5, cols[i % 4][0], cols[i % 4][1], "Hill flower");
+        drift(k, f, "rotation", 10, 0.3 + i * 0.05, i * 0.13);
+      });
+      const pts = [];
+      for (let s = 0; s < NODES.length - 1; s++) for (let j = 0; j < 12; j++) pts.push(along(s, j / 12));
+      pts.push(NODES[NODES.length - 1]);
+      poly(k, map, pts, "soilDeep", { name: "Path edge", stroke: 26, closed: false });
+      poly(k, map, pts, "soil", { name: "Path", stroke: 18, closed: false });
+      const petals = box(k, map, 0, 0, W, H, { name: "Petal trail" });
+      const pc = ["pink", "card", "sun", "pinkDeep", "lilac"];
+      for (let s = 0; s < NODES.length - 1; s++) for (let j = 1; j <= 5; j++) {
+        const [x, y] = along(s, j / 6);
+        const p = k.rect(petals, 12, 8, pc[(s + j) % 5], { name: "Trail petal", radius: 4, absolute: { x: x - 6, y: y - 4 } });
+        k.patch(p, { rotation: (s * 53 + j * 71) % 180 });
+        k.bindExpression(p, "visible", `${progress.n} >= ${s + 1 + j / 6 - 1e-3}`);
+      }
+      const banner = box(k, map, 16, 106, W - 32, 56, { name: "Region banner" });
+      k.rect(banner, W - 32, 56, "pinkDeep", { name: "Banner shade", radius: 28, absolute: { x: 0, y: 5 } });
+      k.rect(banner, W - 32, 56, "card", { name: "Banner face", radius: 28, absolute: { x: 0, y: 0 } });
+      label(k, banner, "Meadowmere Hill", "Heading 24", "plum", 22, 13, { name: "Region name" });
+      readout(k, banner, `"LEVEL " + ${current.n} + " OF 10"`, "LEVEL 4 OF 10", "Small 13", "plum", 200, 19, { w: 148, align: "RIGHT", name: "Region progress" });
+      NODES.forEach(([cx, cy], i) => {
+        const N = i + 1;
+        const pulseRing = k.ellipse(map, 76, [], { name: "Current pulse", stroke: { color: "sunDeep", width: 5 }, absolute: { x: cx - 38, y: cy - 38 } });
+        k.bindExpression(pulseRing, "visible", `${current.n} == ${N}`);
+        drift(k, pulseRing, "scaleX", 0.12, 1.1);
+        drift(k, pulseRing, "scaleY", 0.12, 1.1);
+        drift(k, pulseRing, "opacity", 0.35, 1.1);
+        const focusRing = k.ellipse(map, 68, [], { name: "Focus ring", stroke: { color: "plum", width: 3 }, absolute: { x: cx - 34, y: cy - 34 } });
+        k.bindExpression(focusRing, "visible", `${mapFocus.n} == ${N}`);
+        const node = box(k, map, cx - 28, cy - 28, 56, 62, { name: `Level ${N}` });
+        k.bindExpression(node, "translateX", `${lockTap.n} == ${N} ? ${shake(lockPulse.n, 7)} : 0`);
+        const layer = (cond, shade, body, nm) => {
+          const g = box(k, node, 0, 0, 56, 62, { name: nm });
+          k.ellipse(g, 56, shade, { name: "Node shade", absolute: { x: 0, y: 6 } });
+          k.ellipse(g, 56, body, { name: "Node body", absolute: { x: 0, y: 0 } });
+          pill(g, 13, 8, 22, 9, "gloss", { opacity: 0.6, rotation: -20 });
+          k.bindExpression(g, "visible", cond);
+        };
+        layer(`${N} < ${current.n}`, "pinkDeep", "pink", "Played node");
+        layer(`${N} == ${current.n}`, "sunDeep", "sun", "Current node");
+        layer(`${N} > ${current.n}`, "lockedDeep", "locked", "Locked node");
+        label(k, node, String(N), "Node 18", "plum", 0, 17, { w: 56, align: "CENTER", name: "Node number" });
+        const lk = box(k, node, 38, 36, 22, 22, { name: "Padlock" });
+        arc(k, lk, 11, 9, 6, Math.PI, Math.PI * 2, "plum", 3, { name: "Shackle" });
+        k.rect(lk, 18, 13, "plum", { name: "Lock body", radius: 4, absolute: { x: 2, y: 9 } });
+        k.bindExpression(lk, "visible", `${N} > ${current.n}`);
+        const row = box(k, map, cx - 26, cy + 32, 52, 16, { name: "Node stars" });
+        for (let j = 0; j < 3; j++) {
+          const st = k.star(row, 16, "sunDeep", { name: "Node star", absolute: { x: j * 18, y: j === 1 ? 2 : 0 } });
+          k.bindExpression(st, "opacity", `${stars[i].n} >= ${j + 1} ? 1 : 0.28`);
+        }
+        k.bindExpression(row, "visible", `${N} <= ${current.n}`);
+        k.on(node, when([
+          { if: `${N} <= ${current.n}`, then: [set(selected.id, { value: N }), set(mapFocus.id, { value: N }), overlay(start)] },
+          { then: [set(lockTap.id, { value: N }), pulse(lockPulse, 600)] }
+        ]));
+      });
+      const P = progress.n, I = `floor(${P})`, T = `(${P} - floor(${P}))`;
+      const xs = NODES.map((n) => n[0]), ys = NODES.map((n) => n[1]);
+      const nx = [...xs.slice(1), xs[xs.length - 1]], ny = [...ys.slice(1), ys[ys.length - 1]];
+      const bee = box(k, map, xs[3] - 20, ys[3] - 76, 40, 34, { name: "Bee buddy" });
+      const beeBody = box(k, bee, 0, 0, 40, 34, { name: "Bee" });
+      k.ellipse(beeBody, 18, k.tint("card", 0.85), { name: "Wing", absolute: { x: 6, y: 0 } });
+      k.ellipse(beeBody, 18, k.tint("card", 0.85), { name: "Wing", absolute: { x: 18, y: 0 } });
+      k.rect(beeBody, 36, 24, "sun", { name: "Bee body", radius: 12, absolute: { x: 2, y: 9 } });
+      k.rect(beeBody, 5, 24, "plum", { name: "Stripe", absolute: { x: 14, y: 9 } });
+      k.rect(beeBody, 5, 24, "plum", { name: "Stripe", absolute: { x: 23, y: 9 } });
+      k.ellipse(beeBody, 5, "plum", { name: "Eye", absolute: { x: 30, y: 16 } });
+      drift(k, beeBody, "translateY", 4, 1.3);
+      drift(k, beeBody, "rotation", 6, 0.9);
+      k.bindExpression(bee, "x", `${pick(I, xs)} + (${pick(I, nx)} - ${pick(I, xs)}) * ${T} - 20`);
+      k.bindExpression(bee, "y", `${pick(I, ys)} + (${pick(I, ny)} - ${pick(I, ys)}) * ${T} - 78`);
+      wallet(map);
+      tabBar(map, "Map");
+      const keysBox = box(k, map, 0, 0, 1, 1, { name: "Map keys" });
+      k.on(keysBox, set(mapFocus.id, { expression: `min(${current.n}, ${mapFocus.n} + 1)` }), { key: "ArrowUp" });
+      k.on(keysBox, set(mapFocus.id, { expression: `max(1, ${mapFocus.n} - 1)` }), { key: "ArrowDown" });
+      onAll(k, keysBox, [set(selected.id, { expression: mapFocus.n }), overlay(start)], { key: "Enter" });
+      k.on(keysBox, go(title, "DISSOLVE", { duration: 350 }), { key: "Escape" });
+      k.cues(map, [{ layer: "Region banner", preset: "drop-in", at: 0 }, { layer: "Tab bar", preset: "rise-in", at: 100 }, { layer: ["Level 1", "Level 2", "Level 3", "Level 4", "Level 5", "Level 6", "Level 7", "Level 8", "Level 9", "Level 10"], preset: "pop-in", at: 150, stagger: { delay: 55 } }]);
+    }
+    {
+      const c = card(start, 26, 190, 350, 500, "Start card");
+      const ribbon = box(k, c, 55, -22, 240, 52, { name: "Level ribbon", fill: "primary", radius: 26, align: "CENTER", justify: "CENTER" });
+      readout(k, ribbon, `"Level " + ${selected.n}`, "Level 4", "Button 20", "onPrimary", 0, 13, { w: 240, align: "CENTER", name: "Level title" });
+      label(k, c, "Goal", "Small 13", "plum", 0, 48, { w: 350, align: "CENTER", name: "Goal label" });
+      const goalRow = box(k, c, 25, 72, 300, 88, { name: "Goal row", fill: "petal", radius: 24 });
+      tulipIcon(goalRow, 14, 14, 60);
+      readout(k, goalRow, `"Collect " + ${goalMax.n} + " tulips in " + (${maxMoves.n} + ${hasCan.n} * 3) + " moves"`, "Collect 20 tulips in 18 moves", "Label 16", "plum", 86, 22, { w: 200, name: "Goal text" });
+      label(k, c, "Bring boosters", "Small 13", "plum", 0, 180, { w: 350, align: "CENTER", name: "Booster label" });
+      const pickBox = (x2, nm, pickV, inv, icon) => {
+        const b = box(k, c, x2, 204, 140, 116, { name: nm });
+        k.rect(b, 140, 116, "lilacSoft", { name: "Pick face", radius: 26, absolute: { x: 0, y: 0 } });
+        const ring = k.rect(b, 140, 116, [], { name: "Picked ring", radius: 26, stroke: { color: "mintDeep", width: 5 }, absolute: { x: 0, y: 0 } });
+        k.bindExpression(ring, "visible", `${pickV.n} == 1`);
+        icon(b, 44, 12, 52);
+        readout(k, b, `${pickV.n} == 1 ? "PICKED" : ${inv.n} > 0 ? "YOU HAVE " + ${inv.n} : "NONE LEFT"`, "YOU HAVE 1", "Small 13", "plum", 0, 76, { w: 140, align: "CENTER", name: "Pick state" });
+        const tick = box(k, b, 104, 8, 28, 28, { name: "Picked tick" });
+        k.ellipse(tick, 28, "mintDeep", { name: "Tick disc", absolute: { x: 0, y: 0 } });
+        check(tick, 7, 7, 14, "card");
+        k.bindExpression(tick, "visible", `${pickV.n} == 1`);
+        k.bindExpression(b, "translateX", shake(startPulse.n, 6));
+        const toggleIt = when([{ if: `${pickV.n} == 1`, then: [set(pickV.id, { value: 0 })] }, { if: `${inv.n} > 0`, then: [set(pickV.id, { value: 1 })] }, { then: [pulse(startPulse, 500)] }]);
+        k.on(b, toggleIt);
+        return toggleIt;
+      };
+      const th = pickBox(25, "Pick hammer", pickHammer, invHammer, hammerIcon);
+      const ts = pickBox(185, "Pick shuffle", pickShuffle, invShuffle, shuffleIcon);
+      const play = [
+        ...resetRun,
+        set(hammerCharge.id, { expression: `${pickHammer.n} * 3` }),
+        set(shuffleCharge.id, { expression: `${pickShuffle.n} * 3` }),
+        set(invHammer.id, { expression: `${invHammer.n} - ${pickHammer.n}` }),
+        set(invShuffle.id, { expression: `${invShuffle.n} - ${pickShuffle.n}` }),
+        set(pickHammer.id, { value: 0 }),
+        set(pickShuffle.id, { value: 0 })
+      ];
+      const goPlay = when([{ if: `${lives.n} > 0`, then: [...play, go(game, "CIRCLE_WIPE", { duration: 550 })] }, { then: [go(livesScreen, "DISSOLVE", { duration: 350 })] }]);
+      const pb = k.instance(c, "Candy button", { Label: "Play" }, { name: "Play", absolute: { x: 25, y: 348 } });
+      tapButton(pb, "Candy button", [goPlay]);
+      readout(k, c, `${lives.n} > 0 ? "Uses a heart only if you lose" : "Out of hearts: refill first"`, "Uses a heart only if you lose", "Body 15", "plum", 25, 424, { w: 300, align: "CENTER", name: "Heart note" });
+      const x = roundButton(c, 298, -14, "close", "Close");
+      k.on(x, close());
+      hint(start, "LEFT / RIGHT PICK \xB7 ENTER PLAY \xB7 ESC CLOSE", 726);
+      const keysBox = box(k, start, 0, 0, 1, 1, { name: "Start keys" });
+      k.on(keysBox, th, { key: "ArrowLeft" });
+      k.on(keysBox, ts, { key: "ArrowRight" });
+      k.on(keysBox, goPlay, { key: "Enter" });
+      k.on(keysBox, close(), { key: "Escape" });
+      k.cues(start, [{ layer: "Start card", preset: "pop-in", at: 0, params: { ease: E.back(2) } }]);
+    }
+    {
+      k.rect(game, W, H, [k.gradient({ from: "mint", to: "cream", angle: 90 })], { name: "Meadow", absolute: { x: 0, y: 0 } });
+      const sunset = k.rect(game, W, H, [k.gradient({ from: "sunDeep", to: "pinkDeep", angle: 90, fromOpacity: 0.9, toOpacity: 0.9 })], { name: "Sunset", absolute: { x: 0, y: 0 } });
+      k.bindExpression(sunset, "opacity", `${moves.n} <= 5 ? (6 - ${moves.n}) * 0.08 : 0`);
+      garden(game, 700);
+      for (const [x, y, s, p] of [[20, 180, 12, 0], [370, 200, 14, 0.5], [24, 620, 12, 0.3], [366, 616, 12, 0.8]]) sparkle(game, x, y, s, p, "card");
+      const pb = roundButton(game, 12, 62, "pause", "Pause button");
+      k.on(pb, overlay(pause));
+      const goalCard = box(k, game, 68, 56, 112, 92, { name: "Goal card", fill: "card", radius: 26 });
+      label(k, goalCard, "Goal", "Small 13", "plum", 0, 8, { w: 112, align: "CENTER", name: "Goal label" });
+      const gi = tulipIcon(goalCard, 8, 30, 38, "Goal tulip");
+      k.bindExpression(gi, "scaleX", `1 + ${bump(goalPulse.n)} * 0.45`);
+      k.bindExpression(gi, "scaleY", `1 + ${bump(goalPulse.n)} * 0.45`);
+      const gc = readout(k, goalCard, `${goal.n}`, "20", "Moves 34", "plum", 44, 30, { w: 60, align: "CENTER", name: "Goal count" });
+      k.bindExpression(gc, "scaleY", `1 - ${bump(goalPulse.n)} * 0.2`);
+      k.bindExpression(gc, "scaleX", `1 + ${bump(goalPulse.n)} * 0.25`);
+      const gbar = box(k, goalCard, 12, 76, 88, 8, { name: "Goal bar", fill: "petal", radius: 4, clip: true });
+      const gfill = k.rect(gbar, 88, 8, "pinkDeep", { name: "Goal bar fill", radius: 4, absolute: { x: 0, y: 0 } });
+      k.bindExpression(gfill, "width", `clamp(${goal.n} / ${goalMax.n}, 0, 1) * 88`);
+      const bubble = (nm, fill, shade, cond) => {
+        const b = box(k, game, 188, 52, 100, 104, { name: nm });
+        k.ellipse(b, 100, shade, { name: "Bubble shade", absolute: { x: 0, y: 4 } });
+        k.ellipse(b, 100, fill, { name: "Bubble body", absolute: { x: 0, y: 0 } });
+        pill(b, 22, 12, 30, 12, "gloss", { opacity: 0.6, rotation: -24 });
+        label(k, b, "Moves", "Small 13", "plum", 0, 22, { w: 100, align: "CENTER", name: "Moves label" });
+        readout(k, b, `${moves.n}`, "18", "Moves 34", "plum", 0, 42, { w: 100, align: "CENTER", name: "Moves count" });
+        k.bindExpression(b, "visible", cond);
+        return b;
+      };
+      bubble("Moves bubble", "sun", "sunDeep", `${moves.n} > 5`);
+      const low = bubble("Low moves bubble", "pink", "pinkDeep", `${moves.n} <= 5`);
+      k.behave(low, "translateX", [{ kind: "noise", amp: 2.5, freq: 14, seed: 5 }]);
+      k.behave(low, "rotation", [{ kind: "noise", amp: 4, freq: 11, seed: 9 }]);
+      const scoreCard = box(k, game, 296, 56, 94, 92, { name: "Score card", fill: "card", radius: 26 });
+      label(k, scoreCard, "Score", "Small 13", "plum", 0, 8, { w: 94, align: "CENTER", name: "Score label" });
+      readout(k, scoreCard, `group(${score.n})`, "0", "Count 18", "plum", 0, 32, { w: 94, align: "CENTER", name: "Score" });
+      const meter = box(k, scoreCard, 10, 62, 74, 10, { name: "Star meter", fill: "sunSoft", radius: 5, clip: true });
+      const mf = k.rect(meter, 74, 10, "sunDeep", { name: "Star meter fill", radius: 5, absolute: { x: 0, y: 0 } });
+      k.bindExpression(mf, "width", `clamp(${score.n} / 2400, 0, 1) * 74`);
+      for (let j = 0; j < 3; j++) {
+        const st = k.star(scoreCard, 14, "sunDeep", { name: "Meter star", absolute: { x: 16 + j * 24, y: 74 } });
+        k.bindExpression(st, "opacity", `${score.n} >= ${(j + 1) * 800} ? 1 : 0.3`);
+      }
+      const warn = box(k, game, 71, 164, 260, 40, { name: "Low moves banner", fill: "danger", radius: 20, align: "CENTER", justify: "CENTER" });
+      readout(k, warn, `${moves.n} == 1 ? "Last move!" : ${moves.n} + " moves left!"`, "5 moves left!", "Label 16", "onDanger", 0, 9, { w: 260, align: "CENTER", name: "Low moves words" });
+      k.bindExpression(warn, "visible", `${moves.n} <= 5 && ${moves.n} > 0`);
+      drift(k, warn, "scaleX", 0.06, 1.8);
+      drift(k, warn, "scaleY", 0.06, 1.8);
+      const comboPlate = box(k, game, 51, 158, 300, 54, { name: "Combo", fill: "card", radius: 27, stroke: { color: "pink", width: 3, align: "INSIDE" } });
+      readout(k, comboPlate, `${combo.n} >= 5 ? "Garden party! x" + ${combo.n} : ${combo.n} >= 4 ? "Petal-tastic! x4" : ${combo.n} >= 3 ? "Blooming! x3" : "Sweet! x2"`, "Sweet! x2", "Combo 30", "plum", 0, 10, { w: 300, align: "CENTER", name: "Combo word" });
+      k.bindExpression(comboPlate, "visible", `${combo.n} >= 2 && ${armed.n} == 0`);
+      k.bindExpression(comboPlate, "scaleX", `1 + ${bump(comboPulse.n)} * 0.25`);
+      k.bindExpression(comboPlate, "scaleY", `1 + ${bump(comboPulse.n)} * 0.25`);
+      k.bindExpression(comboPlate, "translateY", `(0 - ${bump(comboPulse.n)}) * 8`);
+      const armHint = box(k, game, 51, 162, 300, 44, { name: "Hammer hint", fill: "card", radius: 22, align: "CENTER", justify: "CENTER", stroke: { color: "pinkDeep", width: 3, align: "INSIDE" } });
+      k.text(armHint, "Tap a flower to smash it!", { style: "Label 16", color: "plum", autoWidth: true, name: "Hammer hint words" });
+      k.bindExpression(armHint, "visible", `${armed.n} == 1`);
+      drift(k, armHint, "translateY", 3, 1.4);
+      const board = box(k, game, 14, 228, 374, 374, { name: "Board" });
+      k.rect(board, 374, 374, "lilac", { name: "Board shade", radius: 30, absolute: { x: 0, y: 6 } });
+      k.rect(board, 374, 374, k.tint("card", 0.8), { name: "Board plate", radius: 30, absolute: { x: 0, y: 0 } });
+      const tiles = box(k, board, 0, 0, 374, 374, { name: "Board tiles" });
+      k.bindExpression(tiles, "rotation", `${turn.n} * 90`);
+      const cur = k.rect(tiles, 68, 68, "plum", { name: "Tile cursor", radius: 22, absolute: { x: 3, y: 3 } });
+      k.bindExpression(cur, "x", `3 + (${cursor.n} % 6) * 60`);
+      k.bindExpression(cur, "y", `3 + floor(${cursor.n} / 6) * 60`);
+      k.bindExpression(cur, "visible", `${kbd.n} == 1`);
+      const tileIds = [];
+      const tap = (kind) => {
+        const tulip = kind === "Tulip";
+        const common = [pulse(goalPulse, 520), set(matched.id, { expression: `${matched.n} + 1` })];
+        return [
+          when([
+            { if: `${armed.n} == 1`, then: [set(goal.id, { expression: `max(0, ${goal.n} - 4)` }), set(armed.id, { value: 0 }), set(hammerCharge.id, { value: 0 }), set(score.id, { expression: `${score.n} + 400`, glide: 600 }), ...common] },
+            tulip ? { then: [
+              set(combo.id, { expression: `${combo.n} + 1` }),
+              set(bestCombo.id, { expression: `max(${bestCombo.n}, ${combo.n})` }),
+              set(goal.id, { expression: `max(0, ${goal.n} - (2 + ${combo.n}))` }),
+              set(moves.id, { expression: `${moves.n} - 1` }),
+              set(score.id, { expression: `${score.n} + 120 * ${combo.n}`, glide: 650 }),
+              set(hammerCharge.id, { expression: `min(3, ${hammerCharge.n} + 1)`, glide: 300 }),
+              set(shuffleCharge.id, { expression: `min(3, ${shuffleCharge.n} + 1)`, glide: 300 }),
+              pulse(comboPulse, 900),
+              ...common
+            ] } : { then: [set(combo.id, { value: 0 }), set(moves.id, { expression: `${moves.n} - 1` }), set(score.id, { expression: `${score.n} + 30`, glide: 400 }), set(matched.id, { expression: `${matched.n} + 1` })] }
+          ]),
+          k.changeAction(`Tile/${kind} pop`, 0),
+          when([
+            { if: `${goal.n} <= 0`, then: [
+              set(earnedStars.id, { expression: `${moves.n} >= 10 ? 3 : ${moves.n} >= 5 ? 2 : 1` }),
+              set(earned.id, { value: 0 }),
+              set(earned.id, { expression: `40 + ${moves.n} * 10`, glide: 1800 }),
+              set(coins.id, { expression: `${coins.n} + 40 + ${moves.n} * 10`, glide: 1800 }),
+              when(stars.map((s, i) => ({ if: `${selected.n} == ${i + 1}`, then: [set(s.id, { expression: `max(${s.n}, ${earnedStars.n})` })] }))),
+              set(doneFocus.id, { value: 0 }),
+              go(complete, "CIRCLE_WIPE", { duration: 650 })
+            ] },
+            { if: `${moves.n} <= 0`, then: [set(oomFocus.id, { value: 0 }), set(oomPoor.id, { value: 0 }), overlay(oom)] }
+          ])
+        ];
+      };
+      BOARD.forEach((row, r) => [...row].forEach((ch, c2) => {
+        const i = r * 6 + c2;
+        const kind = KINDS[ch];
+        const t = k.instance(tiles, `Tile/${kind}`, {}, { name: "Tile", absolute: { x: 8 + c2 * 60, y: 8 + r * 60 } });
+        k.bindExpression(t, "rotation", `0 - ${turn.n} * 90`);
+        const acts = tap(kind);
+        onAll(k, t, acts);
+        k.on(t, when([{ if: `${cursor.n} == ${i}`, then: [set(kbd.id, { value: 1 }), ...acts] }]), { key: "Enter" });
+        tileIds.push(t);
+      }));
+      const booster = (x, nm, what, charge, icon, use) => {
+        const b = box(k, game, x, 620, 170, 80, { name: nm });
+        k.rect(b, 170, 76, "lilac", { name: "Booster shade", radius: 26, absolute: { x: 0, y: 4 } });
+        k.rect(b, 170, 76, "card", { name: "Booster face", radius: 26, absolute: { x: 0, y: 0 } });
+        const plate = box(k, b, 10, 10, 56, 56, { name: "Charge plate", fill: "lilacSoft", radius: 18, clip: true });
+        const fill = k.rect(plate, 56, 56, "sun", { name: "Charge fill", absolute: { x: 0, y: 0 } });
+        k.bindExpression(fill, "height", `clamp(${charge.n} / 3, 0, 1) * 56`);
+        k.bindExpression(fill, "y", `56 - clamp(${charge.n} / 3, 0, 1) * 56`);
+        const ic = icon(plate, 6, 6, 44);
+        k.behave(ic, "rotation", [{ kind: "sine", amp: 6, freq: 0.8 }]);
+        label(k, b, what, "Label 16", "plum", 76, 12, { name: "Booster name" });
+        readout(k, b, `${charge.n} >= 3 ? "READY" : round(${charge.n}) + " / 3"`, "0 / 3", "Small 13", "plum", 76, 36, { w: 90, name: "Booster state" });
+        for (let j = 0; j < 3; j++) {
+          const pip = k.ellipse(b, 10, "sunDeep", { name: "Charge pip", absolute: { x: 78 + j * 16, y: 58 } });
+          k.bindExpression(pip, "opacity", `${charge.n} >= ${j + 1} ? 1 : 0.25`);
+        }
+        const ready = k.rect(b, 170, 76, [], { name: "Ready ring", radius: 26, stroke: { color: "sunDeep", width: 4 }, absolute: { x: 0, y: 0 } });
+        k.bindExpression(ready, "visible", `${charge.n} >= 3`);
+        drift(k, ready, "opacity", 0.35, 1.5);
+        k.bindExpression(b, "translateX", `${boostPulse.n} > 0 ? ${shake(boostPulse.n, 5)} : 0`);
+        k.on(b, use);
+        return b;
+      };
+      const useHammer = when([{ if: `${armed.n} == 1`, then: [set(armed.id, { value: 0 })] }, { if: `${hammerCharge.n} >= 3`, then: [set(armed.id, { value: 1 })] }, { then: [pulse(boostPulse, 500)] }]);
+      const useShuffle = when([{ if: `${shuffleCharge.n} >= 3`, then: [set(turn.id, { expression: `${turn.n} + 1`, glide: 800, easing: "EASE_IN_OUT" }), set(shuffleCharge.id, { value: 0, glide: 400 })] }, { then: [pulse(boostPulse, 500)] }]);
+      const hb = booster(20, "Hammer booster", "Hammer", hammerCharge, hammerIcon, useHammer);
+      const armedRing = k.rect(hb, 178, 84, [], { name: "Armed ring", radius: 30, stroke: { color: "pinkDeep", width: 4 }, absolute: { x: -4, y: -4 } });
+      k.bindExpression(armedRing, "visible", `${armed.n} == 1`);
+      booster(212, "Shuffle booster", "Shuffle", shuffleCharge, shuffleIcon, useShuffle);
+      hint(game, "", 716, `"ARROWS + ENTER TAP \xB7 " + ${keyHammer.n} + " HAMMER \xB7 " + ${keyShuffle.n} + " SHUFFLE"`);
+      const logic = box(k, game, 0, 0, 1, 1, { name: "Game logic" });
+      const c = cursor.n;
+      k.on(logic, when([
+        { if: '$key == "ArrowRight"', then: [set(kbd.id, { value: 1 }), set(cursor.id, { expression: `${c} % 6 == 5 ? ${c} : ${c} + 1` })] },
+        { if: '$key == "ArrowLeft"', then: [set(kbd.id, { value: 1 }), set(cursor.id, { expression: `${c} % 6 == 0 ? ${c} : ${c} - 1` })] },
+        { if: '$key == "ArrowDown"', then: [set(kbd.id, { value: 1 }), set(cursor.id, { expression: `${c} >= 30 ? ${c} : ${c} + 6` })] },
+        { if: '$key == "ArrowUp"', then: [set(kbd.id, { value: 1 }), set(cursor.id, { expression: `${c} < 6 ? ${c} : ${c} - 6` })] },
+        { if: `upper($key) == ${keyHammer.n}`, then: [useHammer] },
+        { if: `upper($key) == ${keyShuffle.n}`, then: [useShuffle] }
+      ]), { key: "*" });
+      onAll(k, logic, [set(pauseFocus.id, { value: 0 }), overlay(pause)], { key: "Escape" });
+      const order = tileIds.map((id, i) => ({ id, d: Math.floor(i / 6) + i % 6 })).sort((a, b) => a.d - b.d).map((t) => t.id);
+      k.cues(game, [
+        { layer: "Tile", preset: "pop-in", at: 100, stagger: { delay: 22, order: { ids: order } } },
+        { layer: "Tile", preset: "bounce", at: 1200, params: { distance: 10 }, stagger: { delay: 22, order: { ids: order } } },
+        { layer: "Goal card", preset: "drop-in", at: 0 },
+        { layer: "Score card", preset: "drop-in", at: 80 }
+      ]);
+    }
+    {
+      const c = card(pause, 36, 196, 330, 480, "Pause card");
+      label(k, c, "Paused", "Display 32", "plum", 0, 28, { w: 330, align: "CENTER", name: "Screen title" });
+      readout(k, c, `"Level " + ${selected.n} + " \xB7 " + ${goal.n} + " tulips to go \xB7 " + ${moves.n} + " moves"`, "Level 4 \xB7 20 tulips to go \xB7 18 moves", "Body 15", "plum", 20, 72, { w: 290, align: "CENTER", name: "Run status" });
+      buttonColumn(c, [
+        { name: "Resume", set: "Candy button", label: "Resume", actions: [close()] },
+        { name: "Restart", set: "Soft button", label: "Restart level", actions: [...resetRun, go(game, "CIRCLE_WIPE", { duration: 500 })] },
+        { name: "Pause settings", set: "Soft button", label: "Settings", actions: [set(setFocus.id, { value: 0 }), go(settings, "SLIDE_FROM_RIGHT", { duration: 320 })] },
+        { name: "Quit level", set: "Soft button", label: "Quit (lose a heart)", actions: [set(lives.id, { expression: `max(0, ${lives.n} - 1)` }), toMap()] }
+      ], { x: 7, y: 130, focus: pauseFocus, escape: [close()] });
+      label(k, c, "{{brand.title}}", "Small 13", "plum", 20, 440, { w: 290, align: "CENTER", name: "Pause brand" });
+      hint(pause, "UP / DOWN \xB7 ENTER CHOOSE \xB7 ESC RESUME", 716);
+      k.cues(pause, [{ layer: "Pause card", preset: "pop-in", at: 0 }]);
+    }
+    {
+      k.rect(complete, W, H, [k.gradient({ from: "sun", to: "petal", kind: "RADIAL", fromOpacity: 0.9, toOpacity: 0, handles: [{ x: 0.5, y: 0.3 }, { x: 1.1, y: 0.3 }, { x: 0.5, y: 0.9 }] })], { name: "Glow", absolute: { x: 0, y: 0 } });
+      const rays = box(k, complete, -99, 20, 600, 600, { name: "Victory rays" });
+      for (let i = 0; i < 12; i++) sector(k, rays, 300, 300, 300, 40, i * Math.PI / 6, i * Math.PI / 6 + 0.26, k.tint("card", 0.5), { name: "Ray" });
+      spin(k, rays, 10);
+      garden(complete, 700);
+      for (const [x, y, s, p] of [[40, 140, 16, 0], [350, 170, 14, 0.4], [30, 470, 12, 0.7], [360, 500, 16, 0.2], [200, 110, 12, 0.9]]) sparkle(complete, x, y, s, p, "sunDeep");
+      readout(k, complete, `"Level " + ${selected.n} + " complete!"`, "Level 4 complete!", "Display 32", "plum", 16, 96, { w: W - 32, align: "CENTER", name: "Screen title" });
+      const starRow = box(k, complete, 41, 150, 320, 130, { name: "Stars" });
+      [[0, 30, 90], [105, 0, 110], [230, 30, 90]].forEach(([x, y, s], j) => {
+        k.star(starRow, s, k.tint("plum", 0.14), { name: "Star socket", absolute: { x, y } });
+        const f = box(k, starRow, x, y, s, s, { name: "Won star" });
+        k.star(f, s, "sunDeep", { name: "Star rim", absolute: { x: 0, y: 0 } });
+        k.star(f, s * 0.78, "sun", { name: "Star face", absolute: { x: s * 0.11, y: s * 0.13 } });
+        pill(f, s * 0.36, s * 0.3, s * 0.18, s * 0.08, "gloss", { opacity: 0.8, rotation: -20 });
+        k.bindExpression(f, "visible", `${earnedStars.n} >= ${j + 1}`);
+      });
+      const tally = card(complete, 41, 300, 320, 176, "Tally");
+      label(k, tally, "Score", "Small 13", "plum", 24, 22, { name: "Tally label" });
+      readout(k, tally, `group(${score.n})`, "0", "Heading 24", "plum", 120, 16, { w: 176, align: "RIGHT", name: "Tally score" });
+      label(k, tally, "Moves kept", "Small 13", "plum", 24, 62, { name: "Tally label" });
+      readout(k, tally, `${moves.n}`, "14", "Heading 24", "plum", 120, 56, { w: 176, align: "RIGHT", name: "Tally moves" });
+      const coinLine = box(k, tally, 20, 100, 280, 64, { name: "Coins earned", fill: "sunSoft", radius: 24 });
+      coinIcon(coinLine, 14, 12, 40);
+      readout(k, coinLine, `"+" + ${earned.n}`, "+180", "Reward 44", "plum", 64, 8, { w: 200, align: "CENTER", name: "Coins earned count" });
+      const next = [
+        when([{ if: `${selected.n} == ${current.n} && ${current.n} < 10`, then: [set(current.id, { expression: `${current.n} + 1` }), set(progress.id, { expression: current.n, glide: 2200, easing: "EASE_IN_OUT" })] }]),
+        set(mapFocus.id, { expression: current.n }),
+        go(map, "SLIDE_FROM_TOP", { duration: 450 })
+      ];
+      buttonColumn(complete, [
+        { name: "Next level", set: "Candy button", label: "Next level", actions: next },
+        { name: "Replay", set: "Soft button", label: "Play again", actions: [...resetRun, go(game, "CIRCLE_WIPE", { duration: 500 })] }
+      ], { x: 43, y: 520, focus: doneFocus, escape: next });
+      k.cues(complete, [
+        { layer: "Screen title", preset: "drop-in", at: 0, params: { ease: E.back(2) } },
+        { layer: "Won star", preset: "pop-in", at: 450, params: { ease: E.back(3), duration: 420 }, stagger: { delay: 380 } },
+        { layer: "Tally", preset: "rise-in", at: 300 },
+        { layer: "Button slot", preset: "rise-in", at: 1500, stagger: { delay: 100 } }
+      ]);
+    }
+    {
+      const c = card(oom, 36, 180, 330, 490, "Out of moves card");
+      const wilt = box(k, c, 115, 26, 100, 110, { name: "Wilted tulip" });
+      k.rect(wilt, 6, 60, "stem", { name: "Stem", radius: 3, absolute: { x: 48, y: 48 } });
+      const head = tulipIcon(wilt, 26, 8, 56, "Drooping head");
+      k.patch(head, { rotation: 70 });
+      drift(k, head, "rotation", 6, 0.4);
+      label(k, c, "Out of moves!", "Display 32", "plum", 0, 146, { w: 330, align: "CENTER", name: "Screen title" });
+      readout(k, c, `"So close: only " + ${goal.n} + " tulips to go."`, "So close: only 2 tulips to go.", "Body 15", "plum", 20, 190, { w: 290, align: "CENTER", name: "Close call" });
+      const offer = box(k, c, 40, 226, 250, 44, { name: "Offer", fill: "skySoft", radius: 22 });
+      gemIcon(offer, 16, 9, 26);
+      readout(k, offer, `"You have " + ${gems.n} + " gems"`, "You have 40 gems", "Label 16", "plum", 50, 11, { w: 190, name: "Gem balance" });
+      k.bindExpression(offer, "translateX", shake(gemPulse.n, 8));
+      const poor = box(k, c, 40, 276, 250, 30, { name: "Not enough gems", fill: "danger", radius: 15, align: "CENTER", justify: "CENTER" });
+      k.text(poor, "Not enough gems!", { style: "Small 13", color: "onDanger", autoWidth: true, name: "Poor words" });
+      k.bindExpression(poor, "visible", `${oomPoor.n} == 1`);
+      k.bindExpression(poor, "translateX", shake(gemPulse.n, 6));
+      buttonColumn(c, [
+        { name: "Plus five moves", set: "Candy button", label: "+5 moves for 9 gems", actions: [when([{ if: `${gems.n} >= 9`, then: [set(gems.id, { expression: `${gems.n} - 9`, glide: 500 }), set(moves.id, { value: 5 }), close()] }, { then: [set(oomPoor.id, { value: 1 }), pulse(gemPulse, 700)] }])] },
+        { name: "Give up", set: "Soft button", label: "Give up (lose a heart)", actions: [set(lives.id, { expression: `max(0, ${lives.n} - 1)` }), set(combo.id, { value: 0 }), toMap()] }
+      ], { x: 7, y: 324, focus: oomFocus, escape: [set(lives.id, { expression: `max(0, ${lives.n} - 1)` }), toMap()] });
+      hint(oom, "UP / DOWN \xB7 ENTER CHOOSE \xB7 ESC GIVE UP", 716);
+      k.cues(oom, [{ layer: "Out of moves card", preset: "drop-in", at: 0, params: { ease: E.back(1.6) } }]);
+    }
+    {
+      k.rect(shop, W, H, [k.gradient({ from: "petal", to: "cream", angle: 90 })], { name: "Wash", absolute: { x: 0, y: 0 } });
+      garden(shop, 720);
+      wallet(shop);
+      label(k, shop, "Petal Shop", "Display 32", "plum", 16, 108, { w: W - 32, align: "CENTER", name: "Screen title" });
+      label(k, shop, "Spend the coins and gems you earn in the garden. No real money here, ever.", "Body 15", "plum", 30, 148, { w: W - 60, align: "CENTER", name: "Shop lead" });
+      const shopFocusRing = k.rect(shop, 378, 88, [], { name: "Shop focus", radius: 30, stroke: { color: "sunDeep", width: 4 }, absolute: { x: 12, y: 194 } });
+      k.bindExpression(shopFocusRing, "y", `194 + ${shopFocus.n} * 92`);
+      const buy = (i) => {
+        const it = SHOP[i];
+        const purse = it.cur === "coins" ? coins : gems;
+        const give = it.give === "hammer" ? [set(invHammer.id, { expression: `${invHammer.n} + ${it.n}` })] : it.give === "shuffle" ? [set(invShuffle.id, { expression: `${invShuffle.n} + ${it.n}` })] : it.give === "lives" ? [set(lives.id, { expression: maxLives.n })] : [set(hasCan.id, { value: 1 })];
+        return when([
+          { if: `${purse.n} >= ${it.price}`, then: [set(purse.id, { expression: `${purse.n} - ${it.price}`, glide: 600 }), ...give, set(shopResult.id, { value: "bought" }), set(poorRow.id, { value: -1 }), pulse(boughtPulse, 1100)] },
+          { then: [set(poorRow.id, { value: i }), set(poorCur.id, { value: it.cur }), set(shopResult.id, { value: "poor" }), pulse(poorPulse, 800)] }
+        ]);
+      };
+      SHOP.forEach((it, i) => {
+        const row = box(k, shop, 16, 198 + i * 92, 370, 80, { name: "Shop item" });
+        k.bindExpression(row, "translateX", `${poorRow.n} == ${i} ? ${shake(poorPulse.n, 9)} : 0`);
+        k.rect(row, 370, 76, "lilac", { name: "Item shade", radius: 26, absolute: { x: 0, y: 4 } });
+        k.rect(row, 370, 76, "card", { name: "Item face", radius: 26, absolute: { x: 0, y: 0 } });
+        const poorRing = k.rect(row, 370, 76, [], { name: "Too pricey ring", radius: 26, stroke: { color: "danger", width: 3 }, absolute: { x: 0, y: 0 } });
+        k.bindExpression(poorRing, "visible", `${poorRow.n} == ${i} && ${shopResult.n} == "poor"`);
+        const ic = box(k, row, 10, 10, 56, 56, { name: "Item icon", fill: "lilacSoft", radius: 18 });
+        if (it.give === "hammer") hammerIcon(ic, 6, 6, 44);
+        if (it.give === "shuffle") shuffleIcon(ic, 6, 6, 44);
+        if (it.give === "lives") heart(ic, 8, 8, 40);
+        if (it.give === "can") {
+          k.rect(ic, 30, 24, "sunDeep", { name: "Can body", radius: 8, absolute: { x: 8, y: 20 } });
+          poly(k, ic, [[36, 28], [50, 14], [52, 18], [38, 34]], "sunDeep", { name: "Spout" });
+          k.star(ic, 16, "sun", { name: "Can shine", absolute: { x: 16, y: 24 } });
+        }
+        if (i === 2) k.text(ic, "\xD73", { style: "Small 13", color: "plum", autoWidth: true, absolute: { x: 34, y: 36 }, name: "Bundle count" });
+        label(k, row, it.name, "Label 16", "plum", 76, 14, { w: 166, name: "Item name" });
+        label(k, row, it.blurb, "Body 15", "plum", 76, 40, { w: 166, name: "Item blurb" });
+        if (it.cur === "coins") coinIcon(row, 244, 27, 22);
+        else gemIcon(row, 244, 27, 22);
+        const chip = k.instance(row, "Price chip", { Label: it.price >= 1e3 ? it.price.toLocaleString("en-US") : String(it.price) }, { name: "Buy button", absolute: { x: 272, y: 14 } });
+        tapButton(chip, "Price chip", [buy(i)]);
+        k.on(row, set(shopFocus.id, { value: i }), { trigger: "MOUSE_ENTER" });
+      });
+      readout(k, shop, `"In your bag: " + ${invHammer.n} + " hammers \xB7 " + ${invShuffle.n} + " shuffles"`, "In your bag: 1 hammers \xB7 1 shuffles", "Body 15", "plum", 16, 662, { w: W - 32, align: "CENTER", name: "Bag" });
+      const ok = box(k, shop, 71, 690, 260, 40, { name: "Bought toast", fill: "mintDeep", radius: 20, align: "CENTER", justify: "CENTER" });
+      k.text(ok, "Added to your bag!", { style: "Label 16", color: "plum", autoWidth: true, name: "Bought words" });
+      k.bindExpression(ok, "visible", `${shopResult.n} == "bought"`);
+      k.bindExpression(ok, "translateY", `(0 - ${bump(boughtPulse.n)}) * 12`);
+      k.bindExpression(ok, "scaleX", `1 + ${bump(boughtPulse.n)} * 0.2`);
+      k.bindExpression(ok, "scaleY", `1 + ${bump(boughtPulse.n)} * 0.2`);
+      const no = box(k, shop, 71, 690, 260, 40, { name: "Not enough toast", fill: "danger", radius: 20, align: "CENTER", justify: "CENTER" });
+      readout(k, no, `"Not enough " + ${poorCur.n} + "!"`, "Not enough coins!", "Label 16", "onDanger", 0, 9, { w: 260, align: "CENTER", name: "Poor words" });
+      k.bindExpression(no, "visible", `${shopResult.n} == "poor"`);
+      k.bindExpression(no, "translateX", shake(poorPulse.n, 6));
+      tabBar(shop, "Shop");
+      const keysBox = box(k, shop, 0, 0, 1, 1, { name: "Shop keys" });
+      k.on(keysBox, set(shopFocus.id, { expression: `(${shopFocus.n} + 1) % ${SHOP.length}` }), { key: "ArrowDown" });
+      k.on(keysBox, set(shopFocus.id, { expression: `(${shopFocus.n} + ${SHOP.length - 1}) % ${SHOP.length}` }), { key: "ArrowUp" });
+      k.on(keysBox, when(SHOP.map((_, i) => ({ if: `${shopFocus.n} == ${i}`, then: [buy(i)] }))), { key: "Enter" });
+      k.on(keysBox, toMap(), { key: "Escape" });
+      k.cues(shop, [{ layer: "Shop item", preset: "slide-in", at: 0, params: { direction: "right" }, stagger: { delay: 70 } }]);
+    }
+    {
+      k.rect(daily, W, H, [k.gradient({ from: "lilac", to: "petal", angle: 90 })], { name: "Wash", absolute: { x: 0, y: 0 } });
+      garden(daily, 720);
+      wallet(daily);
+      label(k, daily, "Daily chest", "Display 32", "plum", 16, 108, { w: W - 32, align: "CENTER", name: "Screen title" });
+      readout(k, daily, `"Streak: " + ${streak.n} + " days in a row"`, "Streak: 3 days in a row", "Body 15", "plum", 16, 148, { w: W - 32, align: "CENTER", name: "Streak line" });
+      const cal = box(k, daily, 16, 178, 370, 72, { name: "Streak calendar" });
+      DAYS.forEach(([d, what], i) => {
+        const cell = box(k, cal, i * 53, 0, 48, 72, { name: "Day" });
+        const face = (cond, fill, nm) => {
+          const f = k.rect(cell, 48, 72, fill, { name: nm, radius: 16, absolute: { x: 0, y: 0 } });
+          k.bindExpression(f, "visible", cond);
+        };
+        face(`${streak.n} >= ${i + 1}`, "mint", "Claimed face");
+        face(`${streak.n} == ${i}`, "sunSoft", "Today face");
+        face(`${streak.n} < ${i}`, "card", "Later face");
+        const today = k.rect(cell, 48, 72, [], { name: "Today ring", radius: 16, stroke: { color: "pinkDeep", width: 3 }, absolute: { x: 0, y: 0 } });
+        k.bindExpression(today, "visible", `${streak.n} == ${i}`);
+        drift(k, today, "opacity", 0.4, 1.2);
+        k.text(cell, d.replace("DAY ", "D"), { style: "Small 13", color: "plum", width: 48, align: "CENTER", absolute: { x: 0, y: 6 }, name: "Day name" });
+        if (what === "coin") coinIcon(cell, 12, 30, 24);
+        if (what === "gem") gemIcon(cell, 12, 30, 24);
+        if (what === "hammer") hammerIcon(cell, 10, 28, 28);
+        if (what === "chest") {
+          k.rect(cell, 26, 18, "pink", { name: "Mini chest", radius: 6, absolute: { x: 11, y: 36 } });
+          k.rect(cell, 28, 10, "pinkDeep", { name: "Mini lid", radius: 5, absolute: { x: 10, y: 30 } });
+        }
+        const tick = box(k, cell, 28, 50, 18, 18, { name: "Claimed tick" });
+        k.ellipse(tick, 18, "mintDeep", { name: "Tick disc", absolute: { x: 0, y: 0 } });
+        check(tick, 4, 4, 10, "card");
+        k.bindExpression(tick, "visible", `${streak.n} >= ${i + 1}`);
+      });
+      const rays = box(k, daily, -49, 216, 500, 500, { name: "Chest rays" });
+      for (let i = 0; i < 10; i++) sector(k, rays, 250, 250, 250, 30, i * Math.PI / 5, i * Math.PI / 5 + 0.3, k.tint("sun", 0.5), { name: "Ray" });
+      spin(k, rays, 18);
+      k.bindExpression(rays, "visible", `${chestTaps.n} >= 3`);
+      const chest = k.instance(daily, "Chest/Closed", {}, { name: "Chest", absolute: { x: 91, y: 300 } });
+      drift(k, chest, "translateY", 4, 0.6);
+      for (const [x, y, s, p] of [[60, 320, 14, 0], [330, 350, 16, 0.5], [80, 500, 12, 0.3], [320, 520, 12, 0.8]]) sparkle(daily, x, y, s, p, "card");
+      const REWARDS = ["+250 coins", "+8 gems", "+1 hammer", "+1 shuffle"];
+      const openIt = [
+        set(chestTaps.id, { value: 3 }),
+        set(reward.id, { expression: "random(1, 4)" }),
+        when([
+          { if: `${reward.n} == 1`, then: [set(coins.id, { expression: `${coins.n} + 250`, glide: 1200 })] },
+          { if: `${reward.n} == 2`, then: [set(gems.id, { expression: `${gems.n} + 8`, glide: 1200 })] },
+          { if: `${reward.n} == 3`, then: [set(invHammer.id, { expression: `${invHammer.n} + 1` })] },
+          { then: [set(invShuffle.id, { expression: `${invShuffle.n} + 1` })] }
+        ]),
+        set(streak.id, { expression: `min(7, ${streak.n} + 1)` }),
+        pulse(revealPulse, 900),
+        k.changeAction("Chest/Open", 120)
+      ];
+      const tapChest = when([
+        { if: `${chestTaps.n} == 0`, then: [set(chestTaps.id, { value: 1 }), k.changeAction("Chest/Wobble", 120)] },
+        { if: `${chestTaps.n} == 1`, then: [set(chestTaps.id, { value: 2 }), k.changeAction("Chest/Cracked", 120)] },
+        { if: `${chestTaps.n} == 2`, then: openIt }
+      ]);
+      k.on(chest, tapChest);
+      for (const key of ["Enter", " "]) k.on(chest, tapChest, { key });
+      const prompt = box(k, daily, 51, 546, 300, 48, { name: "Chest prompt", fill: "card", radius: 24, align: "CENTER", justify: "CENTER" });
+      readout(k, prompt, `${chestTaps.n} == 0 ? "Tap the chest!" : ${chestTaps.n} == 1 ? "It wiggled... tap again!" : ${chestTaps.n} == 2 ? "It's cracking! One more!" : "Come back tomorrow"`, "Tap the chest!", "Label 16", "plum", 0, 13, { w: 300, align: "CENTER", name: "Chest prompt words" });
+      k.bindExpression(prompt, "scaleX", `1 + ${bump(revealPulse.n)} * 0.1`);
+      const prize = box(k, daily, 61, 606, 280, 96, { name: "Prize" });
+      k.rect(prize, 280, 92, "sunDeep", { name: "Prize shade", radius: 30, absolute: { x: 0, y: 6 } });
+      k.rect(prize, 280, 92, "sunSoft", { name: "Prize face", radius: 30, absolute: { x: 0, y: 0 } });
+      label(k, prize, "You got", "Small 13", "plum", 0, 12, { w: 280, align: "CENTER", name: "Prize label" });
+      readout(k, prize, pick(reward.n, REWARDS.map((r) => `"${r}"`)), REWARDS[3], "Reward 44", "plum", 0, 32, { w: 280, align: "CENTER", name: "Prize words" });
+      k.bindExpression(prize, "visible", `${chestTaps.n} >= 3`);
+      k.bindExpression(prize, "scaleX", `1 + ${bump(revealPulse.n)} * 0.25`);
+      k.bindExpression(prize, "scaleY", `1 + ${bump(revealPulse.n)} * 0.25`);
+      tabBar(daily, "Daily");
+      const keysBox = box(k, daily, 0, 0, 1, 1, { name: "Daily keys" });
+      k.on(keysBox, toMap(), { key: "Escape" });
+      k.cues(daily, [{ layer: "Day", preset: "pop-in", at: 0, stagger: { delay: 60 } }, { layer: "Chest", preset: "drop-in", at: 300, params: { ease: E.back(2) } }]);
+    }
+    {
+      k.rect(livesScreen, W, H, [k.gradient({ from: "pink", to: "petal", angle: 90, fromOpacity: 0.7 })], { name: "Wash", absolute: { x: 0, y: 0 } });
+      garden(livesScreen, 720);
+      wallet(livesScreen);
+      const prof = card(livesScreen, 26, 112, 350, 190, "Profile card");
+      const av = box(k, prof, 20, 22, 84, 84, { name: "Avatar" });
+      k.ellipse(av, 84, "mint", { name: "Avatar disc", absolute: { x: 0, y: 0 } });
+      flower(av, 12, 10, 60, "pink", "sun", "Avatar bloom");
+      readout(k, prof, playerName.n, "Juniper Bloom", "Heading 24", "plum", 118, 30, { w: 216, name: "Player name" });
+      readout(k, prof, `"Head gardener \xB7 level " + ${current.n}`, "Head gardener \xB7 level 4", "Body 15", "plum", 118, 64, { w: 216, name: "Player rank" });
+      const statsRow = box(k, prof, 20, 118, 310, 60, { name: "Stats" });
+      [["Stars", stars.map((s) => s.n).join(" + ")], ["Matched", `group(${matched.n})`], ["Best combo", `"x" + ${bestCombo.n}`]].forEach(([nm, e], i) => {
+        const s = box(k, statsRow, i * 106, 0, 98, 60, { name: "Stat", fill: "petal", radius: 18 });
+        label(k, s, nm, "Small 13", "plum", 0, 8, { w: 98, align: "CENTER", name: "Stat name" });
+        readout(k, s, e, i === 0 ? "8" : i === 1 ? "1,284" : "x4", "Count 18", "plum", 0, 30, { w: 98, align: "CENTER", name: "Stat value" });
+      });
+      label(k, livesScreen, "Your hearts", "Heading 24", "plum", 16, 328, { w: W - 32, align: "CENTER", name: "Hearts title" });
+      const row = box(k, livesScreen, 31, 368, 340, 72, { name: "Hearts" });
+      for (let i = 0; i < 5; i++) {
+        const slot = box(k, row, i * 68, 0, 64, 64, { name: "Heart slot" });
+        heart(slot, 0, 0, 64, "locked", "Empty heart");
+        const full = heart(slot, 0, 0, 64, "heart", "Full heart");
+        k.bindExpression(full, "visible", `${lives.n} >= ${i + 1}`);
+        drift(k, full, "scaleX", 0.06, 1.2, i * 0.12);
+        drift(k, full, "scaleY", 0.06, 1.2, i * 0.12);
+      }
+      readout(k, livesScreen, `${lives.n} >= ${maxLives.n} ? "All hearts full. Go bloom something!" : "Next heart in 18:24 \xB7 full in " + (${maxLives.n} - ${lives.n}) * 30 + " min"`, "All hearts full. Go bloom something!", "Body 15", "plum", 16, 452, { w: W - 32, align: "CENTER", name: "Refill timer" });
+      const note = box(k, livesScreen, 61, 486, 280, 36, { name: "Lives note", fill: "card", radius: 18, align: "CENTER", justify: "CENTER" });
+      readout(k, note, livesNote.n, "Hearts are full!", "Label 16", "plum", 0, 7, { w: 280, align: "CENTER", name: "Lives note words" });
+      k.bindExpression(note, "visible", `${livesNote.n} != ""`);
+      k.bindExpression(note, "translateX", shake(livesPulse.n, 8));
+      const refill = when([
+        { if: `${lives.n} >= ${maxLives.n}`, then: [set(livesNote.id, { value: "Hearts are already full!" }), pulse(livesPulse, 900)] },
+        { if: `${gems.n} >= 12`, then: [set(gems.id, { expression: `${gems.n} - 12`, glide: 600 }), set(lives.id, { expression: maxLives.n }), set(livesNote.id, { value: "Hearts refilled!" }), pulse(livesPulse, 900)] },
+        { then: [set(livesNote.id, { value: "Not enough gems!" }), pulse(livesPulse, 900), pulse(gemPulse, 700)] }
+      ]);
+      const rb = k.instance(livesScreen, "Candy button", { Label: "Refill for 12 gems" }, { name: "Refill hearts", absolute: { x: 51, y: 536 } });
+      tapButton(rb, "Candy button", [refill]);
+      label(k, livesScreen, "Hearts come back on their own, one every 30 minutes. A heart is only spent when a level is lost.", "Body 15", "plum", 36, 612, { w: W - 72, align: "CENTER", name: "Hearts rule" });
+      hint(livesScreen, "ENTER REFILL \xB7 ESC MAP", 686);
+      tabBar(livesScreen, "Lives");
+      const keysBox = box(k, livesScreen, 0, 0, 1, 1, { name: "Lives keys" });
+      k.on(keysBox, refill, { key: "Enter" });
+      k.on(keysBox, toMap(), { key: "Escape" });
+      k.cues(livesScreen, [{ layer: "Full heart", preset: "pop-in", at: 200, stagger: { delay: 90 } }, { layer: "Profile card", preset: "drop-in", at: 0 }]);
+    }
+    {
+      k.rect(settings, W, H, [k.gradient({ from: "sky", to: "cream", angle: 90 })], { name: "Wash", absolute: { x: 0, y: 0 } });
+      const bk = roundButton(settings, 16, 56, "back", "Back");
+      k.on(bk, back());
+      label(k, settings, "Settings", "Display 32", "plum", 72, 62, { w: 260, name: "Screen title" });
+      const ROWS = 7, PITCH = 76, Y0 = 130;
+      const panel = box(k, settings, 12, Y0 - 10, W - 24, ROWS * PITCH + 12, { name: "Settings panel", fill: "card", radius: 30 });
+      void panel;
+      focusColumn(k, settings, { focus: setFocus, count: ROWS, x: 20, y: Y0 - 4, w: W - 40, pitch: PITCH, plate: "petal", guard: `${rebind.n} == ""`, escape: [back()], radius: 22 });
+      const list = box(k, settings, 16, Y0, W - 32, ROWS * PITCH, { name: "Settings list" });
+      const here = (i) => `${setFocus.n} == ${i}`;
+      const sliderRow = (i, name, v) => {
+        const row = box(k, list, 0, i * PITCH, W - 32, 68, { name: `${name} slider` });
+        label(k, row, name, "Label 16", "plum", 12, 6, { name: "Setting name" });
+        readout(k, row, `round(${v.n}) + "%"`, `${k.doc.variables[v.id].valuesByMode["Mode 1"]}%`, "Label 16", "plum", 250, 6, { w: 100, align: "RIGHT", name: "Value" });
+        const step = (dx) => set(v.id, { expression: dx > 0 ? `min(100, ${v.n} + 10)` : `max(0, ${v.n} - 10)`, glide: 180 });
+        const minus = box(k, row, 4, 26, 44, 44, { name: "Step down" });
+        k.ellipse(minus, 34, "lilac", { name: "Step face", absolute: { x: 5, y: 5 } });
+        k.rect(minus, 14, 4, "plum", { name: "Minus", radius: 2, absolute: { x: 15, y: 20 } });
+        const plus = box(k, row, 322, 26, 44, 44, { name: "Step up" });
+        k.ellipse(plus, 34, "lilac", { name: "Step face", absolute: { x: 5, y: 5 } });
+        k.rect(plus, 14, 4, "plum", { name: "Plus", radius: 2, absolute: { x: 15, y: 20 } });
+        k.rect(plus, 4, 14, "plum", { name: "Plus", radius: 2, absolute: { x: 20, y: 15 } });
+        const tw = 256, tx = 58;
+        const track = box(k, row, tx, 42, tw, 12, { name: "Track", fill: "lilacSoft", radius: 6 });
+        const fill = k.rect(track, tw, 12, "pinkDeep", { name: "Fill", radius: 6, absolute: { x: 0, y: 0 } });
+        k.bindExpression(fill, "width", `clamp(${v.n} / 100, 0, 1) * ${tw}`);
+        const knob = box(k, row, tx - 14, 34, 28, 30, { name: "Knob" });
+        k.ellipse(knob, 28, "pinkDeep", { name: "Knob shade", absolute: { x: 0, y: 2 } });
+        k.ellipse(knob, 28, "pink", { name: "Knob face", absolute: { x: 0, y: 0 } });
+        pill(knob, 7, 5, 10, 5, "gloss", { opacity: 0.8 });
+        k.bindExpression(knob, "x", `${tx - 14} + clamp(${v.n} / 100, 0, 1) * ${tw}`);
+        for (let n = 0; n <= 10; n++) {
+          const hit = box(k, row, tx + n / 10 * tw - tw / 20, 30, tw / 10, 36, { name: "Notch" });
+          k.on(hit, set(v.id, { value: n * 10, glide: 180 }));
+        }
+        k.on(minus, step(-1));
+        k.on(plus, step(1));
+        for (const key of ["ArrowLeft", "a"]) k.on(row, when([{ if: here(i), then: [step(-1)] }]), { key });
+        for (const key of ["ArrowRight", "d"]) k.on(row, when([{ if: here(i), then: [step(1)] }]), { key });
+        focusRow(k, row, setFocus, i);
+      };
+      const toggleRow = (i, name, v, sub) => {
+        const row = box(k, list, 0, i * PITCH, W - 32, 68, { name: `${name} toggle` });
+        label(k, row, name, "Label 16", "plum", 12, 12, { name: "Setting name" });
+        label(k, row, sub, "Body 15", "plum", 12, 36, { w: 260, name: "Setting detail" });
+        const on = k.doc.variables?.[v.id]?.valuesByMode["Mode 1"] === 1;
+        const sw = k.instance(row, on ? "Switch/On" : "Switch/Off", {}, { name: "Switch", absolute: { x: 286, y: 12 } });
+        const flip = [set(v.id, { expression: `1 - ${v.n}` }), when([{ if: `${v.n} == 1`, then: [k.changeAction("Switch/On", 260, "SPRING")] }, { then: [k.changeAction("Switch/Off", 260, "SPRING")] }])];
+        onAll(k, sw, flip);
+        k.on(sw, when([{ if: here(i), then: flip }]), { key: "Enter" });
+        focusRow(k, row, setFocus, i);
+      };
+      const keyRow = (i, name, slot, v) => {
+        const row = box(k, list, 0, i * PITCH, W - 32, 68, { name: `${name} binding` });
+        label(k, row, name, "Label 16", "plum", 12, 12, { name: "Action name" });
+        label(k, row, "Keyboard play", "Body 15", "plum", 12, 36, { name: "Setting detail" });
+        const cap = box(k, row, 216, 10, 140, 48, { name: "Key cap", fill: "lilacSoft", radius: 16, align: "CENTER", justify: "CENTER" });
+        const key = k.text(cap, String(k.doc.variables[v.id].valuesByMode["Mode 1"]), { style: "Label 16", color: "plum", width: 132, align: "CENTER", name: "Key" });
+        k.bindExpression(key, "characters", `${rebind.n} == "${slot}" ? "PRESS A KEY" : ${v.n}`);
+        const ring = k.rect(row, 148, 56, [], { name: "Listening ring", radius: 20, stroke: { color: "pinkDeep", width: 4 }, absolute: { x: 212, y: 6 } });
+        k.bindExpression(ring, "visible", `${rebind.n} == "${slot}"`);
+        drift(k, ring, "opacity", 0.35, 2);
+        k.on(row, set(rebind.id, { value: slot }));
+        k.on(row, when([{ if: `${here(i)} && ${rebind.n} == ""`, then: [set(rebind.id, { value: slot })] }]), { key: "Enter" });
+        focusRow(k, row, setFocus, i);
+      };
+      sliderRow(0, "Music", music);
+      sliderRow(1, "Sound effects", sfx);
+      toggleRow(2, "Vibration", vibration, "A little buzz on every match");
+      toggleRow(3, "Notifications", notify, "Hearts refilled, chest ready");
+      {
+        const i = 4;
+        const row = box(k, list, 0, i * PITCH, W - 32, 68, { name: "Language row" });
+        label(k, row, "Language", "Label 16", "plum", 12, 12, { name: "Setting name" });
+        label(k, row, "Tap to change", "Body 15", "plum", 12, 36, { name: "Setting detail" });
+        const chipB = box(k, row, 196, 10, 160, 48, { name: "Language chip", fill: "sunSoft", radius: 24, align: "CENTER", justify: "CENTER" });
+        readout(k, chipB, pick(`(${lang.n} + 1)`, LANGS.map((l) => `"${l}"`)), LANGS[0], "Label 16", "plum", 0, 13, { w: 160, align: "CENTER", name: "Language" });
+        const nextL = set(lang.id, { expression: `(${lang.n} + 1) % ${LANGS.length}` });
+        const prevL = set(lang.id, { expression: `(${lang.n} + ${LANGS.length - 1}) % ${LANGS.length}` });
+        k.on(row, nextL);
+        for (const key of ["ArrowRight", "Enter"]) k.on(row, when([{ if: here(i), then: [nextL] }]), { key });
+        k.on(row, when([{ if: here(i), then: [prevL] }]), { key: "ArrowLeft" });
+        focusRow(k, row, setFocus, i);
+      }
+      keyRow(5, "Hammer key", "hammer", keyHammer);
+      keyRow(6, "Shuffle key", "shuffle", keyShuffle);
+      rebindListener(k, settings, rebind, [{ slot: "hammer", variable: keyHammer }, { slot: "shuffle", variable: keyShuffle }]);
+      label(k, settings, "Made with sunshine by {{brand.studio}} \xB7 v1.4", "Small 13", "plum", 16, 682, { w: W - 32, align: "CENTER", name: "Credits line" });
+      hint(settings, "UP / DOWN \xB7 LEFT / RIGHT \xB7 ENTER \xB7 ESC BACK", 716);
+      garden(settings, 770);
+      k.cues(settings, [{ layer: ["Music slider", "Sound effects slider", "Vibration toggle", "Notifications toggle", "Language row", "Hammer key binding", "Shuffle key binding"], preset: "slide-in", at: 0, params: { direction: "right" }, stagger: { delay: 50 } }]);
+    }
+    return k.finish();
+  }
+});
+
+export {
+  blossom_bash_puzzle_default
+};