Deploy brimbloom

README.md

@@ -1,24 +1,37 @@
 ---
 title: "Brimbloom: One-tap timing game"
-emoji: 🎮
-colorFrom: gray
-colorTo: blue
+emoji: 🌸
+colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
 license: other
+thumbnail: https://cybermaxtools.com/games/brimbloom/og.png
 short_description: "One-tap timing: stop the bloom on the brim"
 tags:
 - game
+- arcade
+- one-tap
+- timing
 - html5
 - browser-game
 - pwa
 - cybermax
-thumbnail: https://huggingface.co/spaces/CyberMax-tools/brimbloom/resolve/main/thumbnail.png
 ---
 **Brimbloom**: One-tap timing: stop the bloom on the brim. A free daily game from CyberMax: the same challenge for everyone each day, a shareable result, works offline and installs on your phone (no app store, no sign-up).
 
 Play it full screen: https://cybermaxtools.com/games/brimbloom/?utm_source=huggingface
 
-The optional **CyberMax Fun Pass** ($2.99/month, $19/year or $4.99 once) adds extra packs, the full archive of past dailies and colour themes in every CyberMax game: https://cybermaxtools.com/games/?utm_source=huggingface
+**Watch the real gameplay demo:** https://cybermaxtools.com/media/demos/brimbloom/demo-16x9.mp4
+
+![Brimbloom gameplay](https://cybermaxtools.com/media/demos/brimbloom/poster.jpg)
+
+**Embed it free on your site** (works on phones, keeps a small link to CyberMax):
+
+```html
+<iframe src="https://cybermaxtools.com/embed/brimbloom/" width="480" height="720" style="border:0;max-width:100%;aspect-ratio:2/3;height:auto" title="Brimbloom: free game by CyberMax" loading="lazy" allowfullscreen></iframe>
+```
+
+The optional **CyberMax Fun Pass** ($2.99/month, $19/year or $29.99 for life) adds extra packs, the full archive of past dailies and colour themes in every CyberMax game: https://cybermaxtools.com/games/?utm_source=huggingface
 
 More free games: https://cybermaxtools.com/games/ · © 2026 CyberMax. All rights reserved.

cmx.js

@@ -129,7 +129,7 @@ export function pwa(game, btn) {
   let deferred = null;
   let wanted = false;
   const ios = /iphone|ipad|ipod/i.test(navigator.userAgent) && !/crios|fxios/i.test(navigator.userAgent);
-  window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferred = e; if (wanted && btn) btn.hidden = false; });
+  window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferred = e; if (wanted && btn && !store(`cmx-install-no:${game}`)) btn.hidden = false; });
   window.addEventListener('appinstalled', () => { count(game, 'install', 'prompt'); if (btn) btn.hidden = true; });
   if (btn) {
     btn.addEventListener('click', async () => {
@@ -137,10 +137,12 @@ export function pwa(game, btn) {
         deferred.prompt();
         const r = await deferred.userChoice.catch(() => null);
         if (r && r.outcome === 'accepted') btn.hidden = true;
+        else if (r && r.outcome === 'dismissed') { store(`cmx-install-no:${game}`, 1); btn.hidden = true; } // "Not now" is remembered
         deferred = null;
       } else if (ios) {
         toast('Tap the Share button, then "Add to Home Screen".', 5000);
         count(game, 'install', 'ios-hint');
+        store(`cmx-install-no:${game}`, 1);
       }
     });
   }

core.js

@@ -79,3 +79,124 @@ export function grid(marks) {
   for (let i = 0; i < e.length; i += 10) rows.push(e.slice(i, i + 10).join(''));
   return rows.join('\n');
 }
+
+// ------------------------------------------------------------------ 30 levels (own seed space: the daily is untouched)
+// Each level is a finite goal: bloom `goal` flowers before you run out of `lives` (a miss costs a life and the next
+// flower comes). Speeds s and widths w are [min, max] ranges; pulse = surge amplitude range, breathe = ring drift,
+// two = chance a flower has two brims (stop it twice), fade = the ring fades as the bloom nears it, decoy = a false
+// ring in a warning colour. Bosses (every 10th) give one life. (c) 2026 CyberMax.
+export const HOLD = 14;          // ticks a two-brim flower rests after its first stop
+const L = (name, goal, s, w, o = {}) => ({ name, goal, s, w, lives: o.lives ?? 3, ...o });
+export const LEVELS = [
+  L('First bud', 5, [0.36, 0.4], [0.2, 0.22]),
+  L('Petal pond', 6, [0.4, 0.46], [0.18, 0.2]),
+  L('Quickening', 7, [0.45, 0.52], [0.16, 0.18]),
+  L('Narrow brim', 8, [0.48, 0.56], [0.14, 0.16]),
+  L('Surge', 8, [0.46, 0.52], [0.16, 0.18], { pulse: [0.2, 0.35], twist: 'Surging blooms rush, then ease' }),
+  L('Rush hour', 8, [0.5, 0.58], [0.15, 0.17], { pulse: [0.25, 0.4] }),
+  L('Tide pool', 9, [0.54, 0.62], [0.14, 0.16], { pulse: [0.25, 0.45] }),
+  L('Quick petals', 10, [0.58, 0.66], [0.13, 0.15], { pulse: [0.3, 0.5], lives: 2 }),
+  L('Thin water', 10, [0.6, 0.68], [0.12, 0.14], { pulse: [0.3, 0.5], lives: 2 }),
+  L('Garden gauntlet', 12, [0.6, 0.72], [0.12, 0.14], { pulse: [0.2, 0.5], lives: 1, boss: true }),
+  L('Breathing ring', 8, [0.5, 0.56], [0.15, 0.17], { breathe: [0.02, 0.03], twist: 'Breathing rings drift in and out' }),
+  L('Low tide', 9, [0.54, 0.6], [0.14, 0.16], { breathe: [0.02, 0.035] }),
+  L('Swell', 9, [0.54, 0.62], [0.14, 0.16], { breathe: [0.02, 0.035], pulse: [0.2, 0.35] }),
+  L('Ripples', 10, [0.58, 0.66], [0.13, 0.15], { breathe: [0.025, 0.04], pulse: [0.2, 0.4], lives: 2 }),
+  L('Moon pond', 10, [0.62, 0.7], [0.12, 0.14], { breathe: [0.025, 0.04], pulse: [0.25, 0.45], lives: 2 }),
+  L('Two brims', 6, [0.46, 0.52], [0.16, 0.18], { two: 1, twist: 'Two brims: stop each flower twice' }),
+  L('Double take', 7, [0.5, 0.56], [0.15, 0.17], { two: 0.7 }),
+  L('Second wind', 8, [0.52, 0.6], [0.14, 0.16], { two: 0.6, pulse: [0.2, 0.35] }),
+  L('Echo bloom', 8, [0.56, 0.62], [0.13, 0.15], { two: 0.6, breathe: [0.02, 0.03], lives: 2 }),
+  L('Twin gauntlet', 10, [0.58, 0.66], [0.12, 0.14], { two: 0.6, pulse: [0.2, 0.4], breathe: [0.02, 0.03], lives: 1, boss: true }),
+  L('Fading brim', 8, [0.5, 0.56], [0.15, 0.17], { fade: true, twist: 'Fading rings vanish as the bloom nears' }),
+  L('Mist', 9, [0.54, 0.6], [0.14, 0.16], { fade: true, pulse: [0.2, 0.35] }),
+  L('Ghost pond', 9, [0.56, 0.62], [0.14, 0.16], { fade: true, breathe: [0.02, 0.03] }),
+  L('Fog bank', 10, [0.58, 0.66], [0.13, 0.15], { fade: true, two: 0.4, lives: 2 }),
+  L('Night bloom', 10, [0.6, 0.68], [0.12, 0.14], { fade: true, pulse: [0.25, 0.45], lives: 2 }),
+  L('Thorn ring', 8, [0.52, 0.58], [0.14, 0.16], { decoy: true, twist: 'Thorn rings: only the bright ring counts' }),
+  L('Bramble', 9, [0.56, 0.62], [0.13, 0.15], { decoy: true, pulse: [0.2, 0.4] }),
+  L('Briar patch', 10, [0.58, 0.66], [0.13, 0.15], { decoy: true, breathe: [0.02, 0.03], two: 0.3, lives: 2 }),
+  L('Thornfall', 10, [0.62, 0.7], [0.12, 0.14], { decoy: true, fade: true, pulse: [0.2, 0.4], lives: 2 }),
+  L('Full bloom', 14, [0.6, 0.72], [0.11, 0.13], { pulse: [0.2, 0.45], breathe: [0.02, 0.03], two: 0.4, fade: true, decoy: true, lives: 1, boss: true }),
+];
+
+const pick = (r, [a, b]) => a + r() * (b - a);
+
+/** Flower i of level num (1-based): same shape as bloom() plus rings (one or two brims), fade and decoy. */
+export function levelBloom(num, i) {
+  const D = LEVELS[num - 1], r = rng(`brimbloom:lv:${num}:${i}`);
+  const easeIn = Math.min(1, i / Math.max(1, D.goal - 1)); // speed climbs across the level
+  const s = D.s[0] + (D.s[1] - D.s[0]) * (0.6 * easeIn + 0.4 * r());
+  const w = pick(r, D.w);
+  const p = D.pulse && i > 0 ? pick(r, D.pulse) : 0;
+  const b = D.breathe && i > 0 ? pick(r, D.breathe) : 0;
+  const two = D.two && r() < D.two && (D.two >= 1 || i > 0);
+  let rings;
+  if (two) {
+    const c1 = 0.34 + r() * 0.1;
+    rings = [{ c: c1, w }, { c: Math.min(0.88, c1 + 0.34 + r() * 0.08), w }];
+  } else rings = [{ c: 0.5 + r() * 0.36, w }];
+  const out = { c: rings[0].c, w, s, p, b, n: 5 + Math.floor(r() * 4), hue: Math.floor(r() * 360), rings, k: 0, fade: !!D.fade };
+  if (D.decoy) {
+    // a thorn ring well clear of every real brim (inside the first brim when there is room, else outside)
+    const c0 = rings[0].c, last = rings[rings.length - 1].c;
+    const dc = c0 - 0.28 >= 0.2 ? c0 - 0.24 - r() * 0.04 : last + 0.24;
+    if (dc <= 0.98) out.decoy = { c: dc, w };
+  }
+  return out;
+}
+
+/** Stops a level asks for (two-brim flowers count twice). */
+export function levelStops(num) {
+  let n = 0;
+  for (let i = 0; i < LEVELS[num - 1].goal; i++) n += levelBloom(num, i).rings.length;
+  return n;
+}
+/** Level score: 2 per perfect stop, 1 per good stop. Star thresholds [1 clear, 2, 3] in score points. */
+export function levelThresholds(num) {
+  const max = 2 * levelStops(num);
+  return [1, Math.ceil(max * 0.7), Math.ceil(max * 0.86)];
+}
+/** Stars for a finished level: 0 if failed, else 1-3 by score. */
+export function levelStars(num, score, won = true) {
+  if (!won) return 0;
+  const t = levelThresholds(num);
+  return score >= t[2] ? 3 : score >= t[1] ? 2 : 1;
+}
+
+/** A level run: same step(tap) contract as makeSim; ends with dead=true and won=true/false. */
+export function makeLevelSim(num) {
+  const D = LEVELS[num - 1];
+  const s = {
+    level: num, goal: D.goal, lives: D.lives, i: 0, t: 0, wait: 0, hold: 0, cur: levelBloom(num, 0), r: 0, marks: [],
+    score: 0, points: 0, perfect: 0, cleared: 0, dead: false, won: false, last: '', missed: 0,
+    busy() { return this.wait > 0 || this.hold > 0; },
+    step(tap) {
+      if (this.dead) return '';
+      if (this.wait > 0) { if (--this.wait === 0) { this.i++; this.cur = levelBloom(num, this.i); this.t = 0; this.r = 0; } return ''; }
+      if (this.hold > 0) { this.hold--; return ''; }
+      this.t++;
+      const nr = radius(this.cur, this.t);
+      this.r = nr > this.r ? nr : this.r;
+      let res = '';
+      if (tap) res = judge(this.cur, this.r, this.t);
+      else if (this.r > LIMIT || this.r > this.cur.c + this.cur.w / 2 + 0.12 && this.cur.k < this.cur.rings.length - 1) res = 'miss';
+      if (!res) return '';
+      this.marks.push(res); this.last = res;
+      if (res === 'miss') {
+        this.missed++; this.lives--;
+        if (this.lives <= 0) { this.dead = true; return res; }
+        this.wait = GAP + 6;
+        return res;
+      }
+      this.score++; this.points += res === 'perfect' ? 2 : 1; if (res === 'perfect') this.perfect++;
+      const b = this.cur;
+      if (b.k < b.rings.length - 1) { b.k++; b.c = b.rings[b.k].c; b.w = b.rings[b.k].w; this.hold = HOLD; return res; }
+      this.cleared++;
+      if (this.cleared >= this.goal) { this.dead = true; this.won = true; return res; }
+      this.wait = GAP;
+      return res;
+    },
+  };
+  return s;
+}

funpass.js

@@ -1,6 +1,6 @@
 // CyberMax Fun Pass: ONE optional supporter pass for every CyberMax game (copied into each game's web/ folder).
 // Free games stay free. The pass removes the supporter nudges and unlocks extra packs, the full archive and themes.
-//   Monthly $2.99 · Yearly $19 · Lifetime $29.99 once (Stripe Payment Links, pack revenue/packs/stripe/fun-pass).
+//   Monthly $2.99 · Yearly $19 · Unlock all $4.99 once (Stripe Payment Links, pack revenue/packs/stripe/fun-pass).
 // Buy: counted redirect https://data.cybermaxtools.com/buy/st-fun-pass-<plan>?s=game-<id> -> Stripe checkout.
 // After checkout Stripe sends the buyer to data.cybermaxtools.com/unlock/fun-pass?session_id=..., which checks
 // the Checkout Session (and, for a subscription, that it is still active) and returns to /games/ with #cmx-pro=<code>.
@@ -15,7 +15,7 @@ const RECHECK = 3 * 864e5; // subscriptions are re-checked every 3 days; a cance
 export const PLANS = [
   { id: 'monthly', label: 'Monthly', price: '$2.99', per: '/month', note: 'Cancel any time' },
   { id: 'yearly', label: 'Yearly', price: '$19', per: '/year', note: 'Save 47%', best: true },
-  { id: 'unlock', label: 'Lifetime', price: '$29.99', per: ' once', note: 'Pay once, keep forever' },
+  { id: 'unlock', label: 'Unlock all', price: '$4.99', per: ' once', note: 'Pay once, keep forever' },
 ];
 export const COMMON_PERKS = ['No supporter nudges, ever', 'Extra puzzle packs in every game', 'The full archive of past dailies', 'Custom colour themes'];
 

game.js

@@ -1,12 +1,14 @@
-// Brimbloom: game screen (fixed-tick loop, canvas, sound, daily/practice/archive, share grid, Fun Pass, Skin Pack). (c) 2026 CyberMax.
-import { makeSim, grid, ringC, judge, radius, HZ, LIMIT } from './core.js';
-import { dayNumber, dateOf, count, store, toast, share, intents, download, canvasBlob, pwa, themeToggle } from './cmx.js';
+// Brimbloom: game screen (fixed-tick loop, canvas, sound, 30 levels, daily/practice/archive, streak, share grid,
+// beat-my-score links, Fun Pass, Skin Pack). (c) 2026 CyberMax.
+import { makeSim, grid, ringC, judge, radius, HZ, LIMIT, LEVELS, makeLevelSim, levelStars, levelThresholds } from './core.js';
+import * as lv from './levels.js';
+import { dayNumber, dateOf, count, store, toast, intents, download, canvasBlob, pwa, themeToggle } from './cmx.js';
 import * as skins from './skins.js';
 import * as pass from './funpass.js';
 
 const GAME = 'brimbloom';
 const PATH = '/games/brimbloom/';
-const GUMROAD = 'https://cybermax1.gumroad.com/l/cybermax-brimbloom-skins';
+const GUMROAD = 'https://cybermaxtools.gumroad.com/l/cybermax-brimbloom-skins';
 const $ = (id) => document.getElementById(id);
 const cv = $('c');
 const g = cv.getContext('2d');
@@ -25,44 +27,56 @@ const SKINS = {
 const PACK = Object.values(SKINS).filter((s) => s.tier === 'pack');
 const todayIso = new Date().toISOString().slice(0, 10); // UTC day: the same blooms for everyone on Earth
 const todayNum = dayNumber(todayIso);
+const NL = LEVELS.length;
+const MAP = LEVELS.map((l, i) => ({ n: i + 1, name: l.name, twist: l.twist, boss: l.boss }));
+const WORLDS = ['Spring pond', 'Summer pond', 'Night garden (Fun Pass)'];
 
 skins.capture({ game: GAME, name: 'Brimbloom', skins: PACK.length, price: '$1.99', gumroad: GUMROAD, preview: PACK.map((s) => (s.petals === 'hue' ? 'conic-gradient(red,yellow,lime,cyan,blue,magenta,red)' : s.petals[0])),
   perks: [`${PACK.length} flowers with their own pond and petals: ${PACK.map((s) => s.name).join(', ')}`, 'Every skin also on your share card'] });
-pass.init({ game: GAME, name: 'Brimbloom', perks: ['Every past daily garden in the archive', 'Night and Linen themes'] });
+pass.init({ game: GAME, name: 'Brimbloom', perks: ['Levels 21-30: fading rings, thorn rings and the Full bloom finale', 'Every past daily garden in the archive', 'Night and Linen themes'] });
 const canUse = (s) => s.tier === 'free' || (s.tier === 'pass' && pass.isPro()) || (s.tier === 'pack' && skins.owned());
 let skin = SKINS[store('brimbloom:skin')] && canUse(SKINS[store('brimbloom:skin')]) ? store('brimbloom:skin') : 'pond';
 let muted = !!store('brimbloom:mute');
+const sfx = lv.sfx(() => muted);
+const prog = lv.progress(GAME, { total: NL, free: 20, isPro: () => pass.isPro() });
+const chal = lv.readChallenge(); // ?seed=L7&score=12 or ?seed=2026-10-08&score=9 ("beat my score")
 let mode = { kind: 'daily', date: todayIso };
-let sim, state = 'ready', pending = false, acc = 0, last = 0, deadAt = 0, flash = 0, shake = 0, burst = 0, lastRun = null;
+let sim, state = 'ready', pending = false, acc = 0, last = 0, deadAt = 0, flash = 0, shakeAmt = 0, burst = 0, lastRun = null, pop = null;
+lv.css();
 const install = pwa(GAME, $('install'));
 themeToggle($('theme'));
 
-// ------------------------------------------------------------------ sound
-let ac;
-function blip(f, d = 0.06, type = 'sine', vol = 0.08) {
-  if (muted) return;
-  try {
-    ac = ac || new (window.AudioContext || window.webkitAudioContext)();
-    const o = ac.createOscillator(), v = ac.createGain();
-    o.type = type; o.frequency.setValueAtTime(f, ac.currentTime);
-    o.frequency.exponentialRampToValueAtTime(f * (type === 'sawtooth' ? 0.3 : 1.5), ac.currentTime + d);
-    v.gain.setValueAtTime(vol, ac.currentTime); v.gain.exponentialRampToValueAtTime(0.0001, ac.currentTime + d);
-    o.connect(v); v.connect(ac.destination); o.start(); o.stop(ac.currentTime + d + 0.02);
-  } catch { /* no audio */ }
-}
+function setMute(v) { muted = v; store('brimbloom:mute', muted); $('mute').textContent = muted ? '🔇' : '🔊'; }
 $('mute').textContent = muted ? '🔇' : '🔊';
-$('mute').onclick = () => { muted = !muted; store('brimbloom:mute', muted); $('mute').textContent = muted ? '🔇' : '🔊'; };
+$('mute').onclick = () => setMute(!muted);
 
-// ------------------------------------------------------------------ modes + stats
+// ------------------------------------------------------------------ modes, stats, streak
 const seedOf = (m) => (m.kind === 'practice' ? m.seed : m.date);
 const dayKey = (m) => `brimbloom:day:${m.date}`;
 const dayStats = (m) => store(dayKey(m)) || { best: 0, tries: 0, marks: [] };
+const played = (n) => { const s = n >= 1 && store(`brimbloom:day:${dateOf(n)}`); return !!(s && s.tries > 0); };
+/** Days in a row with at least one daily run (counting from today, or from yesterday while today is unplayed). */
+function streakNow() {
+  let d = played(todayNum) ? todayNum : todayNum - 1, n = 0;
+  while (played(d)) { n++; d--; }
+  return n;
+}
+function anyDaily() {
+  try { for (let i = 0; i < localStorage.length; i++) if (localStorage.key(i).startsWith('brimbloom:day:')) return true; } catch { /* */ }
+  return false;
+}
+const isLv = () => mode.kind === 'level';
+const LD = () => LEVELS[mode.level - 1];
+
 function renderModes() {
   const el = $('modes'); el.innerHTML = '';
+  const st = streakNow();
   const items = [
-    { t: `Daily #${todayNum}`, on: mode.kind === 'daily' && mode.date === todayIso, go: () => setMode({ kind: 'daily', date: todayIso }) },
-    { t: 'Practice', on: mode.kind === 'practice', go: () => setMode({ kind: 'practice', seed: `p${Date.now()}` }) },
+    { t: `Daily #${todayNum}${st ? ` 🔥${st}` : ''}`, on: mode.kind === 'daily' && mode.date === todayIso, go: () => load({ kind: 'daily', date: todayIso }, true) },
+    { t: 'Practice', on: mode.kind === 'practice', go: () => load({ kind: 'practice', seed: `p${Date.now()}` }, true) },
     { t: 'Archive', on: mode.kind === 'daily' && mode.date !== todayIso, lock: !pass.isPro(), go: archive },
+    // after Practice/Archive so their positions stay where the shared latchkite/brimbloom e2e expects them
+    { t: `Levels ${prog.cleared()}/${NL} ⭐${prog.totalStars()}`, on: isLv(), go: showMap },
   ];
   for (const it of items) {
     const b = document.createElement('button');
@@ -76,44 +90,132 @@ function archive() {
   const n = todayNum - 1;
   if (n < 1) { toast('The archive fills up day by day; the first archived garden arrives tomorrow.', 4000); return; }
   const k = Number(prompt(`Play a past daily garden: enter a number from 1 to ${n}`, String(n)));
-  if (k >= 1 && k <= n) setMode({ kind: 'daily', date: dateOf(k) });
+  if (k >= 1 && k <= n) load({ kind: 'daily', date: dateOf(k) }, true);
+}
+function showMap() {
+  const el = $('levels');
+  if (!el.hidden) { el.hidden = true; return; }
+  lv.renderMap($('lvmap'), prog, MAP, {
+    current: isLv() ? mode.level : 0, worlds: WORLDS,
+    onPick: (k) => { load({ kind: 'level', level: k }, true); cv.scrollIntoView({ behavior: 'smooth', block: 'center' }); },
+    onLocked: (k, why) => (why === 'pass' ? pass.open('level') : toast(`Clear level ${prog.reached()} to open level ${k}.`)),
+  });
+  el.hidden = false;
+  el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 }
-function setMode(m) {
+
+function fromUrl() {
+  const q = new URLSearchParams(location.search);
+  if (chal && chal.level >= 1 && chal.level <= NL) return { kind: 'level', level: chal.level, challenge: true };
+  if (chal && chal.date) return { kind: 'daily', date: chal.date <= todayIso && (pass.isPro() || chal.date === todayIso) ? chal.date : todayIso };
+  const l = Number(q.get('lv'));
+  if (l >= 1 && l <= NL) return { kind: 'level', level: l };
+  // first visit: level 1 with the 2-second tutorial; returning players land on today's daily garden
+  if (!anyDaily() && !prog.cleared()) return { kind: 'level', level: 1 };
+  return { kind: 'daily', date: todayIso };
+}
+
+function load(m, push = false) {
+  if (m.kind === 'level') {
+    const lk = prog.lock(m.level, { challenge: !!m.challenge });
+    if (lk === 'progress') { toast(`Clear level ${prog.reached()} first.`); return false; }
+    if (lk) { pass.open('level'); return false; }
+    prog.open(m.level);
+  }
   mode = m;
-  $('num').textContent = m.kind === 'practice' ? 'practice' : `#${dayNumber(m.date)}`;
-  $('over').hidden = true;
-  renderModes(); reset(); hud();
+  $('num').textContent = isLv() ? `Level ${m.level}` : m.kind === 'practice' ? 'practice' : `#${dayNumber(m.date)}`;
+  $('over').hidden = true; $('levels').hidden = true;
+  if (push) {
+    const u = new URL(location.href);
+    u.search = isLv() ? `?lv=${m.level}` : '';
+    history.replaceState(null, '', u.pathname + u.search);
+  }
+  renderModes(); reset(); hud(); goal(); banner();
+  if (isLv() && m.level === 1 && !prog.stars(1)) setTimeout(() => lv.tutorial(GAME, cv, { fx: 0.5, fy: 0.62 }), 250);
+  if (isLv() && LD().boss) sfx.boss();
+  return true;
+}
+
+/** The goal line: what this run asks for, with live progress. */
+function goal() {
+  const bits = [];
+  if (isLv()) {
+    const D = LD(), t = levelThresholds(mode.level);
+    if (D.boss) bits.push('👑 Challenge level');
+    bits.push(`🎯 Bloom <b id="gp">${sim.cleared}/${D.goal}</b> flowers`);
+    bits.push(`⭐⭐⭐ at <b>${t[2]}</b> pts`);
+    if (D.twist) bits.push(`<span class="new-twist">NEW: ${D.twist}</span>`);
+  } else {
+    bits.push(`🎯 Bloom as many as you can, one miss ends the run · <b id="gp">${sim.score}</b>`);
+    if (mode.kind === 'daily' && mode.date === todayIso && streakNow()) bits.push(`🔥 ${streakNow()}-day streak`);
+  }
+  $('goal').innerHTML = `<span>${bits.join(' · ')}</span>`;
+  liveGoal();
+}
+function liveGoal() {
+  const gp = $('gp'); if (gp) gp.textContent = isLv() ? `${sim.cleared}/${sim.goal}` : sim.score;
+}
+function banner() {
+  const el = $('challenge');
+  const same = chal && chal.score !== null && ((chal.level && isLv() && mode.level === chal.level) || (chal.date && mode.kind === 'daily' && mode.date === chal.date));
+  el.hidden = !same;
+  if (same) el.innerHTML = `<span>��� A friend scored <b>${chal.score}</b> ${isLv() ? `points on level ${chal.level}` : `blooms on daily #${dayNumber(chal.date)}`}. Beat it!</span>`;
 }
 function hud() {
-  const s = mode.kind === 'daily' ? dayStats(mode) : { best: store('brimbloom:practice-best') || 0, tries: 0 };
-  $('best').textContent = s.best; $('tries').textContent = s.tries || 0;
+  if (isLv()) {
+    const b = prog.best(mode.level), st = prog.stars(mode.level);
+    $('stat').innerHTML = `${LD().name} · best <b>${b ?? '–'}</b> pts ${lv.starText(st)}`;
+  } else if (mode.kind === 'daily') {
+    const s = dayStats(mode);
+    $('stat').innerHTML = `Today's best <b id="best">${s.best}</b> · tries <b id="tries">${s.tries || 0}</b>`;
+  } else $('stat').innerHTML = `Practice best <b>${store('brimbloom:practice-best') || 0}</b>`;
 }
 
 // ------------------------------------------------------------------ loop
-function reset() { sim = makeSim(seedOf(mode)); state = 'ready'; pending = false; acc = 0; flash = 0; shake = 0; burst = 0; }
+function reset() {
+  sim = isLv() ? makeLevelSim(mode.level) : makeSim(seedOf(mode));
+  state = 'ready'; pending = false; acc = 0; flash = 0; shakeAmt = 0; burst = 0; pop = null;
+}
 function start() {
   if (mode.kind === 'practice') mode.seed = `p${Date.now()}`;
   reset(); state = 'run'; last = performance.now();
-  count(GAME, 'play', mode.kind === 'daily' ? (mode.date === todayIso ? 'daily' : 'archive') : 'practice');
+  count(GAME, 'play', isLv() ? `level-${mode.level}` : mode.kind === 'daily' ? (mode.date === todayIso ? 'daily' : 'archive') : 'practice');
   $('over').hidden = true;
+  goal();
 }
+/** Instant restart (R key, Retry button, or a tap after the run): straight into a fresh run. */
+function restart() { sfx.tap(); start(); }
 function input() {
-  if (state === 'ready') { start(); return; }
+  if (state === 'ready') { sfx.tap(); start(); return; }
   if (state === 'run') { pending = true; return; }
-  if (state === 'dead' && performance.now() - deadAt > 300) start();
+  if (state === 'dead' && performance.now() - deadAt > (sim.won ? 600 : 250)) restart();
 }
+const flowerY = () => (cv.width / 2 + 20) / cv.width;
+function petalCols() { const S = SKINS[skin]; return S.petals === 'hue' ? ['#FF5A5A', '#FFD84D', '#5CF2FF', '#C37CFF'] : [...S.petals, S.core, '#FFFFFF']; }
 function die() {
-  state = 'dead'; deadAt = performance.now(); flash = 1; shake = 12;
-  lastRun = { score: sim.score, perfect: sim.perfect, marks: sim.marks.slice() };
-  blip(150, 0.32, 'sawtooth', 0.11);
-  if (navigator.vibrate) try { navigator.vibrate([30, 40, 30]); } catch { /* */ }
-  let newBest = false;
-  if (mode.kind === 'daily') {
-    const s = dayStats(mode); s.tries = (s.tries || 0) + 1;
-    if (sim.score > (s.best || 0) || (sim.score === s.best && sim.perfect > (s.perfect || 0))) { s.best = sim.score; s.perfect = sim.perfect; s.marks = lastRun.marks; newBest = sim.score > 0; }
-    store(dayKey(mode), s);
-  } else if (sim.score > (store('brimbloom:practice-best') || 0)) { store('brimbloom:practice-best', sim.score); newBest = true; }
-  hud(); showOver(newBest);
+  state = 'dead'; deadAt = performance.now();
+  lastRun = { score: sim.score, perfect: sim.perfect, marks: sim.marks.slice(), points: sim.points, won: !!sim.won, cleared: sim.cleared };
+  let newBest = false, res = null;
+  if (isLv()) {
+    const st = levelStars(mode.level, sim.points, sim.won);
+    res = prog.record(mode.level, st, sim.points);
+    res.got = st;
+    if (sim.won) {
+      sfx.win(); for (let k = 0; k < st; k++) sfx.star(k + 1);
+      lv.burstAt(cv, 0.5, flowerY(), { n: 70, speed: 10, colors: petalCols() });
+      count(GAME, 'win', `level-${mode.level}`);
+    } else { flash = 1; shakeAmt = 12; sfx.lose(); lv.shake(cv, 10, 320); }
+    newBest = res.improved;
+  } else {
+    flash = 1; shakeAmt = 12; sfx.hit(); lv.shake(cv, 10, 320);
+    if (navigator.vibrate) try { navigator.vibrate([30, 40, 30]); } catch { /* */ }
+    if (mode.kind === 'daily') {
+      const s = dayStats(mode); s.tries = (s.tries || 0) + 1;
+      if (sim.score > (s.best || 0) || (sim.score === s.best && sim.perfect > (s.perfect || 0))) { s.best = sim.score; s.perfect = sim.perfect; s.marks = lastRun.marks; newBest = sim.score > 0; }
+      store(dayKey(mode), s);
+    } else if (sim.score > (store('brimbloom:practice-best') || 0)) { store('brimbloom:practice-best', sim.score); newBest = true; }
+  }
+  renderModes(); hud(); goal(); showOver(newBest, res);
   if (sim.score >= 5) install.offer();
 }
 function frame(now) {
@@ -123,15 +225,23 @@ function frame(now) {
     let n = 0;
     while (acc >= 1 / HZ && n++ < 8) {
       acc -= 1 / HZ;
-      const tap = pending && sim.wait === 0; pending = false;
-      const ev = sim.step(tap);
-      if (ev === 'perfect') { blip(880 + Math.min(sim.score, 30) * 20, 0.09, 'sine', 0.08); burst = 1; }
-      else if (ev === 'good') { blip(560 + Math.min(sim.score, 30) * 14, 0.07, 'triangle', 0.07); burst = 0.6; }
+      const busy = sim.busy ? sim.busy() : sim.wait > 0;
+      const tap = pending && !busy; pending = false;
+      const rAt = sim.r, ev = sim.step(tap);
+      if (ev) onEvent(ev, rAt);
       if (sim.dead) { die(); break; }
     }
   } else last = now;
   draw(now);
 }
+function onEvent(ev, rAt) {
+  const k = sim.score;
+  const fy = flowerY() - Math.min(rAt, 1) * 0.43 * 0.7;
+  if (ev === 'perfect') { sfx.good(k); burst = 1; lv.burstAt(cv, 0.5, fy, { n: 18, speed: 5, colors: petalCols(), life: 500 }); pop = { t: performance.now(), txt: 'PERFECT', c: '#3DDC84' }; }
+  else if (ev === 'good') { sfx.tone(560 + Math.min(k, 30) * 14, 0.07, 'triangle', 0.06, 1.4); burst = 0.6; pop = { t: performance.now(), txt: 'GOOD', c: '#FFC93C' }; }
+  else if (ev === 'miss' && !sim.dead) { sfx.hit(); flash = 0.8; shakeAmt = 10; lv.shake(cv, 8, 260); pop = { t: performance.now(), txt: sim.r > LIMIT ? 'OVERFLOW' : 'MISS', c: '#FF6B6B' }; }
+  liveGoal();
+}
 
 // ------------------------------------------------------------------ drawing
 const TAU = Math.PI * 2;
@@ -155,62 +265,130 @@ function flower(ctx, x, y, R, n, S, hue, spinA) {
   ctx.fillStyle = S.core; ctx.beginPath(); ctx.arc(0, 0, Math.max(5, R * 0.16), 0, TAU); ctx.fill();
   ctx.restore();
 }
-function ring(ctx, x, y, Rmax, c, w, S) {
+function ring(ctx, x, y, Rmax, c, w, S, lit = false) {
   ctx.fillStyle = S.band; ctx.beginPath(); ctx.arc(x, y, (c + w / 2) * Rmax, 0, TAU); ctx.arc(x, y, Math.max(0, c - w / 2) * Rmax, 0, TAU, true); ctx.fill();
-  ctx.fillStyle = S.sweet; ctx.beginPath(); ctx.arc(x, y, (c + w * 0.25) * Rmax, 0, TAU); ctx.arc(x, y, (c - w * 0.25) * Rmax, 0, TAU, true); ctx.fill();
-  ctx.strokeStyle = S.edge; ctx.lineWidth = 3; ctx.globalAlpha = 0.7;
+  ctx.fillStyle = S.sweet; ctx.beginPath(); ctx.arc(x, y, (c + w * 0.25) * Rmax, 0, TAU); ctx.arc(x, y, Math.max(0, c - w * 0.25) * Rmax, 0, TAU, true); ctx.fill();
+  const a0 = ctx.globalAlpha;
+  ctx.strokeStyle = S.edge; ctx.lineWidth = lit ? 6 : 3; ctx.globalAlpha = a0 * (lit ? 1 : 0.7);
+  for (const r of [c - w / 2, c + w / 2]) { ctx.beginPath(); ctx.arc(x, y, Math.max(0, r) * Rmax, 0, TAU); ctx.stroke(); }
+  ctx.globalAlpha = a0;
+}
+/** A thorn ring (decoy): a red dashed band that looks like a brim but never counts. */
+function thorns(ctx, x, y, Rmax, c, w) {
+  ctx.save();
+  ctx.fillStyle = 'rgba(255,90,90,.13)'; ctx.beginPath(); ctx.arc(x, y, (c + w / 2) * Rmax, 0, TAU); ctx.arc(x, y, (c - w / 2) * Rmax, 0, TAU, true); ctx.fill();
+  ctx.strokeStyle = '#FF6B6B'; ctx.lineWidth = 3; ctx.setLineDash([10, 9]); ctx.globalAlpha = 0.85;
   for (const r of [c - w / 2, c + w / 2]) { ctx.beginPath(); ctx.arc(x, y, r * Rmax, 0, TAU); ctx.stroke(); }
-  ctx.globalAlpha = 1;
+  ctx.restore();
+}
+function hearts(n, of, x, y) {
+  g.font = '26px system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif'; g.textAlign = 'left';
+  for (let i = 0; i < of; i++) { g.globalAlpha = i < n ? 1 : 0.3; g.fillText(i < n ? '❤️' : '🖤', x + i * 32, y); }
+  g.globalAlpha = 1;
 }
 function draw(now) {
   const S = SKINS[skin], Wc = cv.width, cx = Wc / 2, cy = Wc / 2 + 20, Rmax = Wc * 0.43;
   g.save();
-  if (shake > 0) { g.translate((Math.random() - 0.5) * shake, (Math.random() - 0.5) * shake); shake *= 0.85; if (shake < 0.5) shake = 0; }
+  if (shakeAmt > 0) { g.translate((Math.random() - 0.5) * shakeAmt, (Math.random() - 0.5) * shakeAmt); shakeAmt *= 0.85; if (shakeAmt < 0.5) shakeAmt = 0; }
   g.fillStyle = S.bg; g.fillRect(-20, -20, Wc + 40, Wc + 40);
-  // ripples
   g.strokeStyle = S.band; g.lineWidth = 2;
   for (let i = 0; i < 3; i++) { const r = ((now / 30 + i * 120) % 360); g.globalAlpha = 1 - r / 360; g.beginPath(); g.arc(cx, cy, r + 20, 0, TAU); g.stroke(); }
   g.globalAlpha = 1;
-  const b = sim.cur;
-  ring(g, cx, cy, Rmax, ringC(b, sim.t), b.w, S);
-  const R = (state === 'ready' ? 0.18 + Math.sin(now / 300) * 0.02 : Math.min(sim.r, LIMIT)) * Rmax;
+  const b = sim.cur, rNow = state === 'ready' ? 0 : Math.min(sim.r, LIMIT);
+  if (b.decoy) thorns(g, cx, cy, Rmax, b.decoy.c, b.decoy.w);
+  if (b.rings && b.rings.length > 1) {
+    b.rings.forEach((rg, k) => {
+      if (k === b.k) return;
+      g.globalAlpha = k < b.k ? 0.25 : 0.55; ring(g, cx, cy, Rmax, rg.c, rg.w, S); g.globalAlpha = 1;
+    });
+  }
+  const c0 = ringC(b, sim.t), inside = state === 'run' && Math.abs(rNow - c0) <= b.w / 2;
+  g.globalAlpha = b.fade && state !== 'ready' ? Math.max(0.06, Math.min(1, (c0 - rNow - 0.06) / 0.2)) : 1;
+  ring(g, cx, cy, Rmax, c0, b.w, S, inside);
+  g.globalAlpha = 1;
+  const R = (state === 'ready' ? 0.18 + Math.sin(now / 300) * 0.02 : rNow) * Rmax;
   flower(g, cx, cy, R * (1 + burst * 0.06), b.n, S, b.hue, now / 4000);
   burst *= 0.88;
   // marks row (this run)
   const marks = sim.marks.slice(-14);
   marks.forEach((m, i) => { g.fillStyle = m === 'perfect' ? '#3DDC84' : m === 'good' ? '#FFC93C' : '#FF4D4D'; g.beginPath(); g.arc(cx - (marks.length - 1) * 13 + i * 26, Wc - 26, 8, 0, TAU); g.fill(); });
   g.fillStyle = S.text; g.textAlign = 'center'; g.textBaseline = 'middle';
+  if (isLv()) {
+    // goal progress: one dot per flower, hearts top-left, level top-right
+    const D = LD(), n = D.goal, w = Math.min(34, 420 / n), x0 = cx - (n * w) / 2;
+    for (let i = 0; i < n; i++) { g.fillStyle = i < sim.cleared ? '#3DDC84' : S.band; g.beginPath(); g.arc(x0 + w * i + w / 2, 124, Math.min(9, w * 0.32), 0, TAU); g.fill(); }
+    g.fillStyle = S.text; hearts(sim.lives, D.lives, 22, 34);
+    g.textAlign = 'right'; g.font = '800 24px system-ui, sans-serif'; g.fillText(`${D.boss ? '👑 ' : ''}Lv ${mode.level}`, Wc - 22, 34); g.textAlign = 'center';
+  }
   if (state === 'ready') {
-    g.font = '900 60px system-ui, sans-serif'; g.fillText('TAP', cx, 64);
-    g.font = '700 24px system-ui, sans-serif'; g.globalAlpha = 0.85; g.fillText('then tap again when the bloom fills the ring', cx, 112); g.globalAlpha = 1;
+    g.font = '900 60px system-ui, sans-serif'; g.fillText('TAP', cx, 60);
+    g.font = '700 24px system-ui, sans-serif'; g.globalAlpha = 0.85; g.fillText('then tap again when the petals reach the ring', cx, isLv() ? 162 : 108); g.globalAlpha = 1;
   } else {
-    g.font = '900 72px system-ui, sans-serif'; g.fillText(String(sim.score), cx, 56);
-    if (sim.wait > 0) { g.font = '900 34px system-ui, sans-serif'; g.fillStyle = sim.last === 'perfect' ? '#3DDC84' : '#FFC93C'; g.fillText(sim.last === 'perfect' ? 'PERFECT' : 'GOOD', cx, 112); }
-    if (state === 'dead') { g.font = '800 28px system-ui, sans-serif'; g.fillStyle = S.text; g.fillText(sim.r > LIMIT ? 'it overflowed · tap to retry' : 'off the brim · tap to retry', cx, 112); }
+    g.font = '900 64px system-ui, sans-serif'; g.fillText(isLv() ? `${sim.cleared}/${sim.goal}` : String(sim.score), cx, 64);
+    const age = pop ? now - pop.t : 1e9;
+    if (pop && age < 700 && state === 'run') { g.globalAlpha = 1 - age / 700; g.font = `900 ${34 + (1 - age / 700) * 8}px system-ui, sans-serif`; g.fillStyle = pop.c; g.fillText(pop.txt, cx, isLv() ? 166 : 118); g.globalAlpha = 1; }
+    if (state === 'dead') {
+      g.fillStyle = 'rgba(0,0,0,.5)'; g.fillRect(-20, cy - 70, Wc + 40, 140);
+      g.fillStyle = '#FFFFFF'; g.font = '900 44px system-ui, sans-serif';
+      const won = isLv() && sim.won;
+      g.fillText(won ? `LEVEL ${mode.level} CLEAR` : isLv() ? 'OUT OF HEARTS' : sim.r > LIMIT ? 'IT OVERFLOWED' : 'OFF THE BRIM', cx, cy - 22);
+      g.font = '700 26px system-ui, sans-serif';
+      g.fillText(won ? `${lv.starText(levelStars(mode.level, sim.points))}  ${sim.points} pts · tap to replay` : 'tap or press R to retry', cx, cy + 26);
+    }
   }
-  if (flash > 0) { g.fillStyle = `rgba(255,77,77,${flash * 0.3})`; g.fillRect(0, 0, Wc, Wc); flash *= 0.88; if (flash < 0.02) flash = 0; }
+  if (flash > 0) { g.fillStyle = `rgba(255,77,77,${flash * 0.3})`; g.fillRect(-20, -20, Wc + 40, Wc + 40); flash *= 0.88; if (flash < 0.02) flash = 0; }
   g.restore();
 }
 
 // ------------------------------------------------------------------ results, share, card
 function result() {
   if (mode.kind === 'daily') { const s = dayStats(mode); return { best: s.best, perfect: s.perfect || 0, marks: s.marks || [], tries: s.tries }; }
-  return { best: lastRun ? lastRun.score : 0, perfect: lastRun ? lastRun.perfect : 0, marks: lastRun ? lastRun.marks : [] };
+  return { best: lastRun ? (isLv() ? lastRun.points : lastRun.score) : 0, perfect: lastRun ? lastRun.perfect : 0, marks: lastRun ? lastRun.marks : [] };
 }
 function shareText() {
   const r = result();
+  if (isLv()) return `Brimbloom level ${mode.level} 🌸 ${lv.starText(prog.stars(mode.level))}\n${lastRun.points} points, ${lastRun.perfect} perfect\n${grid(lastRun.marks)}\nCan you beat my ${lastRun.points}?`;
+  const st = mode.kind === 'daily' && mode.date === todayIso && streakNow() > 1 ? ` · 🔥${streakNow()}` : '';
   const head = mode.kind === 'practice' ? 'Brimbloom practice 🌸' : `Brimbloom #${dayNumber(mode.date)} 🌸`;
-  return `${head} ${r.best} blooms, ${r.perfect} perfect${r.tries ? ` (${r.tries} tries)` : ''}\n${grid(r.marks)}\nCan you stop on the brim?`;
+  return `${head} ${r.best} blooms, ${r.perfect} perfect${r.tries ? ` (${r.tries} tries)` : ''}${st}\n${grid(r.marks)}\nCan you stop on the brim?`;
 }
-function showOver(newBest) {
-  const s = mode.kind === 'daily' ? dayStats(mode) : null;
-  $('over-title').textContent = newBest ? `New best: ${lastRun.score}!` : `${lastRun.score} bloom${lastRun.score === 1 ? '' : 's'}, ${lastRun.perfect} perfect`;
-  $('over-line').textContent = s ? `Today's best ${s.best} after ${s.tries} tries. Tap the game to go again.` : 'Practice garden. Tap the game to go again.';
+/** The "beat my score" link: the same level or daily garden, with my score to beat. */
+function beatLink() {
+  if (isLv()) return lv.challengeLink(PATH, GAME, { level: mode.level, score: lastRun ? lastRun.points : 0 });
+  if (mode.kind === 'daily') return lv.challengeLink(PATH, GAME, { date: mode.date, score: result().best });
+  return `https://cybermaxtools.com${PATH}`;
+}
+function showOver(newBest, res) {
+  const lvl = isLv(), won = lvl && lastRun.won;
+  const st = mode.kind === 'daily' ? dayStats(mode) : null;
+  $('win-stars').hidden = !won;
+  if (lvl) {
+    $('win-stars').innerHTML = lv.starsHtml(res.got);
+    $('over-title').textContent = won ? (res.got === 3 ? `Level ${mode.level}: perfect bloom!` : `Level ${mode.level} cleared!`) : `Out of hearts on level ${mode.level}`;
+    const t = levelThresholds(mode.level);
+    $('over-line').textContent = won
+      ? `${lastRun.points} points, ${lastRun.perfect} perfect${newBest ? ' · new best' : ''}.${res.got < 3 ? ` ${t[res.got]} points for the next star.` : ''}`
+      : `${lastRun.cleared}/${LD().goal} flowers. Tap the game or press R to retry.`;
+  } else {
+    $('over-title').textContent = newBest ? `New best: ${lastRun.score}!` : `${lastRun.score} bloom${lastRun.score === 1 ? '' : 's'}, ${lastRun.perfect} perfect`;
+    $('over-line').textContent = st ? `Today's best ${st.best} after ${st.tries} tries${streakNow() > 1 ? ` · 🔥 ${streakNow()}-day streak` : ''}. Tap the game to go again.` : 'Practice garden. Tap the game to go again.';
+  }
+  if (chal && chal.score !== null && !$('challenge').hidden) {
+    const mine = lvl ? lastRun.points : lastRun.score;
+    $('over-line').textContent += mine > chal.score ? ` 🎯 You beat your friend's ${chal.score}!` : mine === chal.score ? ` 🎯 Tied with your friend (${chal.score}).` : ` 🎯 ${chal.score - mine} short of your friend's ${chal.score}. Retry?`;
+  }
   $('over-grid').textContent = grid(lastRun.marks);
-  const it = intents(GAME, shareText(), PATH);
+  const next = lvl && mode.level < NL ? mode.level + 1 : 0;
+  $('next-lv').hidden = !(won && next);
+  if (next) $('next-lv').textContent = prog.lock(next) === 'pass' ? `Level ${next} 🔒 Fun Pass` : `Next: level ${next} ▶`;
+  $('beat').hidden = lvl && !won;
+  $('share-row').hidden = lvl && !won;
+  const it = intents(GAME, `${shareText()}\n🎯 ${beatLink()}`, PATH);
   $('sx').href = it.x; $('sb').href = it.bsky; $('sw').href = it.whatsapp;
   $('over').hidden = false;
-  pass.afterWin($('over'), 'over');
+  const value = won || newBest;
+  if (value) pass.afterWin($('over'), lvl ? 'level' : 'over');
+  const fa = $('over').querySelector('.fp-after'); if (fa) fa.hidden = !value;
 }
 function card() {
   const S = SKINS[skin], c = document.createElement('canvas');
@@ -219,28 +397,47 @@ function card() {
   x.fillStyle = S.bg; x.fillRect(0, 0, 1080, 1350);
   ring(x, 540, 700, 330, 0.7, 0.16, S);
   flower(x, 540, 700, 0.7 * 330, 7, S, 330, 0.2);
-  const r = result();
+  const r = result(), lvl = isLv();
   x.fillStyle = S.text; x.textAlign = 'left';
   x.font = '900 66px system-ui, sans-serif'; x.fillText('BRIMBLOOM', 80, 130);
   x.globalAlpha = 0.85; x.font = '700 40px system-ui, sans-serif';
-  x.fillText(mode.kind === 'daily' ? `Daily garden #${dayNumber(mode.date)} · ${mode.date}` : 'Practice garden', 80, 190);
-  x.globalAlpha = 1; x.textAlign = 'right'; x.font = '900 120px system-ui, sans-serif'; x.fillText(String(r.best), 1000, 150);
-  x.font = '700 34px system-ui, sans-serif'; x.fillText(`blooms · ${r.perfect} perfect`, 1000, 195);
+  x.fillText(lvl ? `Level ${mode.level} · ${LD().name} ${lv.starText(prog.stars(mode.level))}` : mode.kind === 'daily' ? `Daily garden #${dayNumber(mode.date)} · ${mode.date}` : 'Practice garden', 80, 190);
+  x.globalAlpha = 1; x.textAlign = 'right'; x.font = '900 120px system-ui, sans-serif'; x.fillText(String(r.best), 1000, lvl ? 330 : 150);
+  x.font = '700 34px system-ui, sans-serif'; x.fillText(lvl ? `points · ${r.perfect} perfect` : `blooms · ${r.perfect} perfect`, 1000, lvl ? 375 : 195);
   x.textAlign = 'left';
   const ms = r.marks.slice(0, 30);
   ms.forEach((m, i) => { x.fillStyle = m === 'perfect' ? '#3DDC84' : m === 'good' ? '#FFC93C' : '#FF4D4D'; x.fillRect(80 + (i % 10) * 92, 990 + Math.floor(i / 10) * 52, 76, 40); });
-  x.fillStyle = S.text; x.font = '800 48px system-ui, sans-serif'; x.fillText('Can you stop on the brim?', 80, 1200);
+  x.fillStyle = S.text; x.font = '800 48px system-ui, sans-serif'; x.fillText(lvl ? 'Can you beat my score?' : 'Can you stop on the brim?', 80, 1200);
   x.globalAlpha = 0.75; x.font = '600 32px system-ui, sans-serif'; x.fillText('Play free: cybermaxtools.com/games/brimbloom', 80, 1290);
   return c;
 }
-$('share').onclick = async () => share(GAME, shareText(), PATH, await canvasBlob(card()), `brimbloom-${mode.date || 'practice'}.png`);
+const fname = () => `brimbloom-${isLv() ? `level-${mode.level}` : mode.date || 'practice'}.png`;
+$('share').onclick = async () => {
+  const r = await lv.shareChallenge(shareText(), beatLink(), await canvasBlob(card()), fname());
+  if (r === 'copied') toast('Result and link copied. Paste it anywhere.');
+  if (r !== 'cancelled') count(GAME, 'share', r === 'shared' ? 'native' : 'copy');
+};
+$('beat').onclick = async () => {
+  const mine = isLv() ? lastRun.points : result().best;
+  const what = isLv() ? `${mine} points on Brimbloom level ${mode.level}` : `${mine} blooms on Brimbloom #${dayNumber(mode.date || todayIso)}`;
+  const r = await lv.shareChallenge(`I scored ${what}. Can you beat me? 🌸`, beatLink());
+  if (r === 'copied') toast('Challenge link copied. Send it to a friend!');
+  if (r !== 'cancelled') count(GAME, 'share', 'challenge');
+};
 ['sx', 'sb', 'sw'].forEach((id) => $(id).addEventListener('click', () => count(GAME, 'share', { sx: 'x', sb: 'bsky', sw: 'whatsapp' }[id])));
-$('card').onclick = async () => { download(await canvasBlob(card()), `brimbloom-${mode.date || 'practice'}.png`); count(GAME, 'share', 'png'); };
+$('card').onclick = async () => { download(await canvasBlob(card()), fname()); count(GAME, 'share', 'png'); };
+$('retry').onclick = () => { restart(); cv.scrollIntoView({ behavior: 'smooth', block: 'center' }); };
+$('next-lv').onclick = () => { if (load({ kind: 'level', level: mode.level + 1 }, true)) cv.scrollIntoView({ behavior: 'smooth', block: 'center' }); };
 
 // ------------------------------------------------------------------ input, skins, start
 cv.addEventListener('pointerdown', (e) => { e.preventDefault(); input(); });
 cv.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); input(); } });
-document.addEventListener('keydown', (e) => { if (e.key === ' ' && document.activeElement === document.body) { e.preventDefault(); input(); } });
+document.addEventListener('keydown', (e) => {
+  if (e.target && /INPUT|TEXTAREA|SELECT/.test(e.target.tagName)) return;
+  if (e.key === ' ' && document.activeElement === document.body) { e.preventDefault(); input(); }
+  else if ((e.key === 'r' || e.key === 'R') && !e.ctrlKey && !e.metaKey) { e.preventDefault(); restart(); }
+  else if ((e.key === 'm' || e.key === 'M') && !e.ctrlKey && !e.metaKey) setMute(!muted);
+});
 $('pass-btn').onclick = () => pass.open('header');
 $('skins-btn').onclick = () => skins.open('header');
 document.addEventListener('click', (e) => {
@@ -265,12 +462,13 @@ function renderSkins() {
   }
   $('skins-btn').textContent = skins.owned() ? '🌸 Skins' : '🌸 Skin Pack $1.99';
 }
-const refresh = () => { if (!canUse(SKINS[skin])) { skin = 'pond'; store('brimbloom:skin', 'pond'); } renderSkins(); renderModes(); };
+const refresh = () => { if (!canUse(SKINS[skin])) { skin = 'pond'; store('brimbloom:skin', 'pond'); } renderSkins(); if (sim) renderModes(); };
 pass.onChange(refresh);
 skins.onChange(refresh);
 
 // Screenshot helper for scripts/games/render_assets.mjs: a mid-run frame on today's garden (no effect on normal play).
 window.__cmxShot = async (stage = 1) => {
+  if (mode.kind !== 'daily') load({ kind: 'daily', date: todayIso });
   start();
   const s = makeSim(todayIso);
   while (s.score < 4 && !s.dead) { const t = s.t + 1; s.step(s.wait === 0 && judge(s.cur, Math.max(s.r, radius(s.cur, t)), t) === 'perfect'); }
@@ -280,17 +478,20 @@ window.__cmxShot = async (stage = 1) => {
   if (stage === 2) { s.marks.push('miss'); s.dead = true; die(); }
 };
 
-// Demo recorder helper (scripts/studio/demo_video.mjs): real taps (pointer events) on perfect moments for n blooms,
-// then one early tap so the run ends on screen. Cosmetic games only; there is no leaderboard to game.
+// Demo recorder helper (scripts/studio/demo_video.mjs) and e2e hook: real taps (pointer events) on perfect moments for
+// n stops, then one early tap so a daily run ends on screen (a level run ends by itself when its goal is met).
 window.__cmxDemo = (n = 6) => {
   const tap = () => cv.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));
   if (state !== 'run') tap();
   const iv = setInterval(() => {
     if (state === 'dead') { clearInterval(iv); return; }
-    if (state !== 'run' || sim.wait > 0 || pending) return;
+    if (state !== 'run' || (sim.busy ? sim.busy() : sim.wait > 0) || pending) return;
     const t = sim.t + 1;
     if (sim.score >= n ? sim.t > 12 : judge(sim.cur, Math.max(sim.r, radius(sim.cur, t)), t) === 'perfect') tap();
   }, 4);
 };
-setMode(mode);
+window.__cmxTest = { state: () => ({ state, kind: mode.kind, level: mode.level || 0, score: sim.score, cleared: sim.cleared || 0, lives: sim.lives, won: !!sim.won }) };
+
+// a locked link (pass level, level not reached yet) falls back to the next open level, then today's daily
+load(fromUrl()) || (!prog.lock(prog.reached()) && load({ kind: 'level', level: prog.reached() })) || load({ kind: 'daily', date: todayIso });
 requestAnimationFrame(frame);

index.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
-<title>Brimbloom: one-tap timing game, stop the bloom on the brim | CyberMax</title>
-<meta name="description" content="Brimbloom is a free one-tap timing game: a flower blooms outward, tap to stop it inside the ring. Same blooms for everyone each day, rounds of seconds and a Wordle-style share grid. Works offline, installs on your phone.">
+<title>Brimbloom: Free One-Tap Timing Game Online, Daily Challenge</title>
+<meta name="description" content="Play Brimbloom free: a one-tap timing game with 30 levels and a daily garden. Stop the bloom on the brim of the ring, earn stars, beat a friend&#x27;s score.">
 <link rel="canonical" href="https://cybermaxtools.com/games/brimbloom/">
 <meta property="og:type" content="website"><meta property="og:site_name" content="CyberMax">
-<meta property="og:title" content="Brimbloom: stop on the brim">
-<meta property="og:description" content="One tap stops the bloom. Inside the ring and it scores; miss once and it's over. Everyone gets the same garden today.">
+<meta property="og:title" content="Brimbloom: Free One-Tap Timing Game Online">
+<meta property="og:description" content="Play Brimbloom free: a one-tap timing game with 30 levels and a daily garden. Stop the bloom on the brim of the ring, earn stars, beat a friend&#x27;s score.">
 <meta property="og:url" content="https://cybermaxtools.com/games/brimbloom/">
 <meta property="og:image" content="https://cybermaxtools.com/games/brimbloom/og.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">
 <meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://cybermaxtools.com/games/brimbloom/og.png">
@@ -15,42 +15,61 @@
 <meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Brimbloom">
 <link rel="stylesheet" href="fun.css"><link rel="stylesheet" href="style.css">
 <script>try{var t=localStorage.getItem('cm-theme');if(t)document.documentElement.dataset.theme=t}catch(e){}</script>
-<script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoGame","name":"Brimbloom","url":"https://cybermaxtools.com/games/brimbloom/","image":"https://cybermaxtools.com/games/brimbloom/og.png","description":"A free one-tap timing game: stop the growing flower inside the ring. Same blooms for everyone each day.","genre":["Arcade","Casual","Timing"],"gamePlatform":["Web browser","Android","iOS"],"applicationCategory":"Game","operatingSystem":"Any","playMode":"SinglePlayer","publisher":{"@type":"Organization","name":"CyberMax","url":"https://cybermaxtools.com/"},"offers":[{"@type":"Offer","price":"0","priceCurrency":"USD","description":"Free to play"},{"@type":"Offer","price":"1.99","priceCurrency":"USD","description":"Brimbloom Skin Pack (6 flowers, one-time)"},{"@type":"Offer","price":"2.99","priceCurrency":"USD","description":"CyberMax Fun Pass, monthly"}]}</script>
+<meta name="twitter:title" content="Brimbloom: Free One-Tap Timing Game Online">
+<meta name="twitter:description" content="Play Brimbloom free: a one-tap timing game with 30 levels and a daily garden. Stop the bloom on the brim of the ring, earn stars, beat a friend&#x27;s score.">
+<style>.h1kw{display:block;font-size:.42em;font-weight:600;opacity:.75;letter-spacing:.01em;margin-top:.15em}.seo ol,.seo ul{padding-left:1.2em}.seo li{margin:.25em 0}</style>
+<script type="application/ld+json">{"@context": "https://schema.org", "@graph": [{"@type": "VideoGame", "@id": "https://cybermaxtools.com/games/brimbloom/#game", "name": "Brimbloom", "alternateName": "Timing game online free", "url": "https://cybermaxtools.com/games/brimbloom/", "image": "https://cybermaxtools.com/games/brimbloom/og.png", "description": "Brimbloom is a free one-tap timing game for your browser. A flower blooms outward from the middle of the pond; tap to stop it with the petal tips inside the ring, in the brighter middle for a perfect. 30 levels ask you to bloom a set number of flowers before your hearts run out, adding surging blooms, breathing rings, two brims, fading rings and thorn rings, with a one-heart challenge level every 10. Earn up to 3 stars, play the same daily garden as everyone else, keep a streak and send a friend a link to beat your score.", "genre": ["Arcade", "Casual", "Timing", "One-tap"], "gamePlatform": ["Web browser", "Android", "iOS", "Windows", "macOS", "ChromeOS"], "applicationCategory": "Game", "operatingSystem": "Any (web browser)", "playMode": "SinglePlayer", "inLanguage": "en", "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}, "author": {"@type": "Organization", "name": "CyberMax", "url": "https://cybermaxtools.com/"}, "publisher": {"@type": "Organization", "name": "CyberMax"}, "datePublished": "2026-10-03", "keywords": "Timing game online free, free one-tap timing game, unblocked, no download, browser game", "trailer": {"@id": "https://cybermaxtools.com/games/brimbloom/#video"}}, {"@type": "FAQPage", "@id": "https://cybermaxtools.com/games/brimbloom/#faq", "mainEntity": [{"@type": "Question", "name": "Is Brimbloom free?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Levels 1-20, the daily garden and practice are free; levels 21-30 come with the CyberMax Fun Pass and skins are cosmetic extras."}}, {"@type": "Question", "name": "How many levels are there?", "acceptedAnswer": {"@type": "Answer", "text": "30, with a new twist about every 5 levels and a one-heart challenge level every 10."}}, {"@type": "Question", "name": "How do I get 3 stars?", "acceptedAnswer": {"@type": "Answer", "text": "Stop most flowers in the brighter middle of the ring: a perfect is worth 2 points, a good stop 1."}}, {"@type": "Question", "name": "Can I challenge a friend?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. After a run, tap Challenge a friend to send a link to the same level or daily garden with your score."}}, {"@type": "Question", "name": "Can I play offline?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, after the first visit, and you can install it like an app."}}, {"@type": "Question", "name": "Why is everyone's game the same today?", "acceptedAnswer": {"@type": "Answer", "text": "Each UTC day has one seed, so daily scores are directly comparable with friends."}}]}, {"@type": "VideoObject", "name": "Brimbloom demo: Stop the bloom on the brim", "description": "A 16-second screen recording of the live Brimbloom page: One tap stops the bloom; Inside the ring scores, centre is perfect; Share your grid, retry in one tap. Real result, no voice.", "thumbnailUrl": ["https://cybermax.cybermax-tools.workers.dev/media/demos/brimbloom/poster.jpg"], "uploadDate": "2026-10-03T15:52:14+00:00", "duration": "PT16S", "contentUrl": "https://cybermax.cybermax-tools.workers.dev/media/demos/brimbloom/demo-16x9.mp4", "embedUrl": "https://cybermaxtools.com/games/brimbloom/", "inLanguage": "en", "publisher": {"@type": "Organization", "name": "CyberMax", "logo": {"@type": "ImageObject", "url": "https://cybermax.cybermax-tools.workers.dev/store/img/favicon.webp"}}, "@id": "https://cybermaxtools.com/games/brimbloom/#video"}]}</script>
 </head><body>
 <div class="wrap">
 <header class="top"><a class="brand" href="https://cybermaxtools.com/games/"><svg viewBox="0 0 512 512" aria-hidden="true"><clipPath id="lg"><rect width="512" height="512" rx="116"/></clipPath><g clip-path="url(#lg)"><rect width="512" height="512" fill="#FF6A3D"/><path d="M512 250V512H250Z" fill="#D9481F"/></g><g transform="translate(86 86) scale(3.4)"><path d="M66 27 A27 27 0 1 0 66 73" fill="none" stroke="#11141B" stroke-width="17" stroke-linecap="round"/><rect x="66" y="41" width="20" height="18" rx="4" fill="#11141B"/></g></svg>CyberMax</a>
 <nav><a href="https://cybermaxtools.com/games/">Games</a></nav><button class="icon" id="mute" type="button" aria-label="Sound on or off">🔊</button><button class="icon" id="theme" type="button" aria-label="Switch light or dark">◐</button></header>
 <main>
 <section class="game">
-  <div class="headline"><h1>Brimbloom <span id="num" class="num"></span> <span class="pro-badge">PASS</span></h1>
-  <p class="muted tag">Tap to stop the bloom inside the ring. One miss ends the run. Same garden for everyone today.</p></div>
+  <div class="headline"><h1>Brimbloom <span id="num" class="num"></span> <span class="pro-badge">PASS</span>  <small class="h1kw">Free one-tap timing game</small></h1>
+  <p class="muted tag">Tap to stop the bloom inside the ring. 30 levels, plus one daily garden for everyone.</p></div>
   <div class="chips" id="modes" role="group" aria-label="Mode"></div>
+  <div class="lv-banner" id="challenge" hidden></div>
+  <section class="panel lvmap" id="levels" hidden aria-label="Levels"><div id="lvmap"></div></section>
+  <p class="lv-goal" id="goal"></p>
   <div class="stage"><canvas id="c" width="720" height="720" aria-label="Brimbloom game. Tap, click or press Space to stop the bloom." tabindex="0"></canvas></div>
-  <div class="row under"><span class="muted small">Today's best <b id="best">0</b> · tries <b id="tries">0</b></span><button class="btn ghost sm" id="install" type="button" hidden>📲 Add to Home Screen</button><button class="btn ghost sm" id="skins-btn" type="button">🌸 Skin Pack $1.99</button><button class="btn pass sm" id="pass-btn" type="button">✨ Fun Pass</button></div>
+  <div class="row under"><span class="muted small" id="stat"></span><button class="btn ghost sm" id="install" type="button" hidden>📲 Add to Home Screen</button><button class="btn ghost sm" id="skins-btn" type="button">🌸 Skin Pack $1.99</button><button class="btn pass sm" id="pass-btn" type="button">✨ Fun Pass</button></div>
   <section class="panel over" id="over" hidden aria-live="polite">
     <h2 id="over-title"></h2>
+    <div class="lv-stars" id="win-stars" hidden></div>
     <p id="over-line" class="muted"></p>
     <p id="over-grid" class="grid" aria-label="Your run"></p>
-    <div class="row"><button class="btn" id="share" type="button">Share score</button><a class="btn ghost sm" id="sx" target="_blank" rel="noopener">X</a><a class="btn ghost sm" id="sb" target="_blank" rel="noopener">Bluesky</a><a class="btn ghost sm" id="sw" target="_blank" rel="noopener">WhatsApp</a><button class="btn ghost sm" id="card" type="button">Save card</button></div>
+    <div class="row"><button class="btn" id="next-lv" type="button" hidden>Next level ▶</button><button class="btn ghost" id="retry" type="button">↻ Retry (R)</button><button class="btn ghost" id="beat" type="button">🎯 Challenge a friend</button></div>
+    <div class="row" id="share-row"><button class="btn" id="share" type="button">Share score</button><a class="btn ghost sm" id="sx" target="_blank" rel="noopener">X</a><a class="btn ghost sm" id="sb" target="_blank" rel="noopener">Bluesky</a><a class="btn ghost sm" id="sw" target="_blank" rel="noopener">WhatsApp</a><button class="btn ghost sm" id="card" type="button">Save card</button></div>
     <div class="nudge"><span>New look? The <b>Skin Pack</b> adds 6 flowers with their own ponds and petals, $1.99 once.</span><button class="btn ghost sm" data-skins="over" type="button">See the skins</button></div>
   </section>
   <div class="row skins" id="skins" aria-label="Flower skin"></div>
 </section>
 
-<section class="seo">
+<section class="seo" id="guide">
+<h2>Brimbloom: timing game online free</h2>
+<p>Brimbloom is a free one-tap timing game for your browser. A flower blooms outward from the middle of the pond; tap to stop it with the petal tips inside the ring, in the brighter middle for a perfect. 30 levels ask you to bloom a set number of flowers before your hearts run out, adding surging blooms, breathing rings, two brims, fading rings and thorn rings, with a one-heart challenge level every 10. Earn up to 3 stars, play the same daily garden as everyone else, keep a streak and send a friend a link to beat your score.</p>
 <h2>How to play Brimbloom</h2>
-<p>A flower blooms outward from the middle of the pond. <b>Tap anywhere (or press Space) to stop it.</b> If the tips of the petals stop inside the ring (the brim), the bloom counts; stop in the brighter middle half of the ring for a <b>perfect</b>. Stop short, or let it grow past the ring, and the run is over. Each bloom is faster and its ring thinner; later blooms surge and ease, and some rings breathe in and out.</p>
-<h3>One garden a day</h3>
-<p>Everyone gets the same blooms each UTC day, so scores are directly comparable. Your best run is shared as a grid: 🟩 perfect, 🟨 good, 🟥 the bloom that ended it. Practice gives a fresh random garden every try.</p>
-<h3>Free, with optional extras</h3>
-<p>Brimbloom is free to play, including the daily garden and unlimited practice. The <b>Brimbloom Skin Pack</b> ($1.99 once) adds 6 flowers (Sakura, Lotus, Sunflower, Prism, Frost, Ember), each with its own pond and petal shape; skins are cosmetic only. The <b>CyberMax Fun Pass</b> ($2.99/month, $19/year or $29.99 for life) unlocks every past daily garden and the Night and Linen themes, in every CyberMax game.</p>
-<h3>FAQ</h3>
-<p><b>Is it fair?</b> The game runs on fixed 60 Hz ticks, and every bloom is checked so its ring opens at least 0.3 s in and stays open for at least 4 frames. <b>Does it work offline?</b> Yes, after the first visit; install it from your browser menu or the Add to Home Screen button. <b>Do skins change the game?</b> No, they only change how it looks.</p>
-<h2>More free games from CyberMax</h2>
-<div class="more"><a href="https://cybermaxtools.com/games/latchkite/"><b>Latchkite</b><span>Let go at the right moment, catch the next peg</span></a><a href="https://cybermaxtools.com/games/whirlane/"><b>Whirlane</b><span>One-tap orbit dodger with a daily leaderboard</span></a><a href="https://cybermaxtools.com/games/pathmoor/"><b>Pathmoor</b><span>Daily path puzzle: light every stone</span></a></div>
+<ol><li>A flower grows outward from the centre.</li><li>Tap anywhere (or press Space) to stop it.</li><li>Petal tips inside the ring score; the bright middle of the ring is a perfect.</li><li>In a level, bloom the target number of flowers before your hearts run out; a miss costs a heart.</li><li>In the daily garden, one miss ends the run. Press R to retry at once.</li></ol>
+<h3>Controls</h3>
+<p><b>Phone and tablet:</b> Tap anywhere to stop the bloom.</p>
+<p><b>Desktop, laptop and Chromebook:</b> Space or click to stop the bloom. M mutes.</p>
+<h2>Brimbloom tips and strategy</h2>
+<ul><li>Watch the rhythm of each bloom for a moment before committing; surging blooms slow down near the end.</li><li>Aim for the inner edge of the bright band, since reaction delay carries you outward.</li><li>On breathing rings, tap when the ring is at its widest.</li><li>Play with sound on: the rising tone helps timing.</li></ul>
+<h2>Game modes</h2>
+<ul><li>30 levels: surging blooms, breathing rings, two brims, fading rings and thorn rings, plus a one-heart challenge level every 10. Levels 1-20 are free.</li><li>Daily garden: the same blooms for everyone today, with a streak and a shareable emoji grid.</li><li>Beat-my-score links: send a friend the same level or daily garden with your score.</li><li>Practice: a random garden every try. Fun Pass: levels 21-30, past dailies and extra themes; Skin Pack adds six flowers.</li></ul>
+<p>Free to play with no ads and no sign-up. The optional <a href="https://cybermaxtools.com/games/#pass">CyberMax Fun Pass</a> ($2.99/month, $19/year or $29.99 for life) adds cosmetic extras and bonus modes in every CyberMax game.</p>
+<h2>Brimbloom FAQ</h2>
+<h3>Is Brimbloom free?</h3><p>Yes. Levels 1-20, the daily garden and practice are free; levels 21-30 come with the CyberMax Fun Pass and skins are cosmetic extras.</p>
+<h3>How many levels are there?</h3><p>30, with a new twist about every 5 levels and a one-heart challenge level every 10.</p>
+<h3>How do I get 3 stars?</h3><p>Stop most flowers in the brighter middle of the ring: a perfect is worth 2 points, a good stop 1.</p>
+<h3>Can I challenge a friend?</h3><p>Yes. After a run, tap Challenge a friend to send a link to the same level or daily garden with your score.</p>
+<h3>Can I play offline?</h3><p>Yes, after the first visit, and you can install it like an app.</p>
+<h3>Why is everyone&#x27;s game the same today?</h3><p>Each UTC day has one seed, so daily scores are directly comparable with friends.</p>
+<h2>Similar free games</h2>
+<div class="more"><a href="https://cybermaxtools.com/games/latchkite/"><b>Latchkite</b><span>Let go at the right moment, catch the next peg</span></a><a href="https://cybermaxtools.com/games/pathmoor/"><b>Pathmoor</b><span>Turn stones until every path glows</span></a><a href="https://cybermaxtools.com/games/whirlane/"><b>Whirlane</b><span>Hop orbits, dodge blades, top today&#x27;s board</span></a><a href="https://cybermaxtools.com/games/"><b>All CyberMax games</b><span>Free browser games, no download</span></a></div>
 </section>
 </main>
 <footer>© 2026 CyberMax · <a href="https://cybermaxtools.com/games/">Games</a> · <a href="https://cybermaxtools.com/toys/">Toys</a> · <a href="https://cybermaxtools.com/store/">Store</a> · <a href="https://cybermaxtools.com/privacy">Privacy</a> · <a href="https://cybermaxtools.com/terms">Terms</a></footer>
 </div>
 <script type="module" src="game.js"></script>
-<!-- cybermax-count:start --><script>(function(){try{var u="https://data.cybermaxtools.com/v?p="+encodeURIComponent(location.host+location.pathname)+"&r="+encodeURIComponent((document.referrer||"").split("/")[2]||"")+(function(){var q=new URLSearchParams(location.search),s=q.get("utm_source");return s?"&us="+encodeURIComponent(s)+"&uc="+encodeURIComponent(q.get("utm_campaign")||""):""})();navigator.sendBeacon?navigator.sendBeacon(u):(new Image).src=u}catch(e){}})()</script><!-- cybermax-count:end --></body></html>
+</body></html>

levels.js

@@ -0,0 +1,341 @@
+// CyberMax Fun kit: levels, daily challenge, streaks, "beat my score" links and game juice (copied into each game's
+// web/ folder by scripts/games/sync_kit.py when the game has "levels": true in products/fun-pass/games.json).
+// Everything is saved in this browser only (localStorage). No new assets: sounds are WebAudio blips, particles are
+// drawn on one overlay canvas. Levels 1..free are free; later levels need the CyberMax Fun Pass, but a level the player
+// has already opened is never locked again. (c) 2026 CyberMax. All rights reserved.
+import { SITE, today, dayNumber, dateOf, store, rr } from './cmx.js';
+
+export const TOTAL = 30;
+export const FREE = 20;
+
+// ------------------------------------------------------------------ progress (pure logic, testable in node)
+
+/**
+ * Level progress for one game. Higher score is better unless `lower` is set (e.g. taps or time).
+ * opts: { total, free, isPro: () => bool, lower }
+ */
+export function progress(game, opts = {}) {
+  const total = opts.total || TOTAL, free = opts.free ?? FREE, isPro = opts.isPro || (() => false), lower = !!opts.lower;
+  const KEY = `${game}:levels`;
+  const read = () => {
+    const d = store(KEY) || {};
+    return { stars: d.stars || {}, best: d.best || {}, opened: d.opened || [] };
+  };
+  const api = {
+    total, free, lower,
+    data: read,
+    stars: (n) => read().stars[n] || 0,
+    best: (n) => read().best[n],
+    totalStars: () => Object.values(read().stars).reduce((a, b) => a + b, 0),
+    cleared: () => Object.keys(read().stars).filter((k) => read().stars[k] > 0).length,
+    /** The furthest level the player may open: one past the highest cleared level. */
+    reached() {
+      const s = read().stars;
+      let hi = 0;
+      for (const k of Object.keys(s)) if (s[k] > 0) hi = Math.max(hi, Number(k));
+      return Math.min(total, hi + 1);
+    },
+    /** null when playable, else 'progress' (clear the level before) or 'pass' (Fun Pass level). */
+    lock(n, { challenge = false } = {}) {
+      if (!(n >= 1 && n <= total)) return 'progress';
+      const d = read();
+      if (d.opened.includes(n) || n <= free && challenge) return null;
+      if (n > api.reached() && !challenge) return 'progress';
+      if (n > free && !isPro()) return 'pass';
+      return null;
+    },
+    /** Remember that a level was opened, so it stays open even if the pass ends later. */
+    open(n) {
+      const d = read();
+      if (!d.opened.includes(n)) { d.opened.push(n); store(KEY, d); }
+    },
+    /** Save a finished level. Returns { stars, best, improved, first, next } (next = the newly reachable level or 0). */
+    record(n, stars, score) {
+      const d = read();
+      const before = api.reached();
+      const first = !(d.stars[n] > 0);
+      const prev = d.best[n];
+      const improved = prev === undefined || (lower ? score < prev : score > prev);
+      if (improved && stars > 0) d.best[n] = score;
+      if (stars > (d.stars[n] || 0)) d.stars[n] = stars;
+      store(KEY, d);
+      const after = api.reached();
+      return { stars: d.stars[n] || 0, best: d.best[n], improved: improved && stars > 0, first: first && stars > 0, next: after > before ? after : 0 };
+    },
+  };
+  return api;
+}
+
+/** Stars from a score and three thresholds [one, two, three] (for `lower`, smaller scores are better). */
+export function starsFor(score, t, lower = false) {
+  let s = 0;
+  for (const v of t) if (lower ? score <= v : score >= v) s++;
+  return s;
+}
+export const starText = (n, of = 3) => '⭐'.repeat(n) + '☆'.repeat(Math.max(0, of - n));
+
+// ------------------------------------------------------------------ daily challenge + streak
+
+/** The daily challenge: one seed for everyone today. record() keeps the best score and the day streak. */
+export function daily(game, { lower = false } = {}) {
+  const KEY = `${game}:daily`;
+  const iso = today();
+  const read = () => store(KEY) || { days: {}, streak: 0, bestStreak: 0 };
+  return {
+    seed: iso, num: dayNumber(iso), date: iso,
+    best: () => read().days[iso],
+    streak() {
+      const d = read();
+      return d.days[iso] !== undefined || d.days[dateOf(dayNumber(iso) - 1)] !== undefined ? d.streak || 0 : 0;
+    },
+    bestStreak: () => read().bestStreak || 0,
+    played: () => Object.keys(read().days).length,
+    record(score) {
+      const d = read();
+      const prev = d.days[iso];
+      if (prev === undefined) {
+        d.streak = d.days[dateOf(dayNumber(iso) - 1)] !== undefined ? (d.streak || 0) + 1 : 1;
+        d.bestStreak = Math.max(d.bestStreak || 0, d.streak);
+      }
+      const improved = prev === undefined || (lower ? score < prev : score > prev);
+      if (improved) d.days[iso] = score;
+      store(KEY, d);
+      return { best: d.days[iso], improved, streak: d.streak };
+    },
+  };
+}
+
+// ------------------------------------------------------------------ "beat my score" links
+
+/** Read ?seed=&score= from the page URL. seed is a YYYY-MM-DD daily or L<n> for level n. */
+export function readChallenge(search = typeof location !== 'undefined' ? location.search : '') {
+  const q = new URLSearchParams(search);
+  const seed = (q.get('seed') || '').trim();
+  const score = Number(q.get('score'));
+  if (!seed) return null;
+  const out = { seed, score: Number.isFinite(score) && q.get('score') !== null && q.get('score') !== '' ? score : null };
+  const lv = /^L(\d{1,3})$/i.exec(seed);
+  if (lv) out.level = Number(lv[1]);
+  else if (/^\d{4}-\d{2}-\d{2}$/.test(seed) && dayNumber(seed) >= 1 && seed <= today()) out.date = seed;
+  else return null;
+  return out;
+}
+/** The link a player shares: opens the same level (or daily) with their score to beat. */
+export function challengeLink(path, game, { level, date, score }) {
+  const u = new URL(SITE + path);
+  u.searchParams.set('seed', level ? `L${level}` : date);
+  if (score !== undefined && score !== null) u.searchParams.set('score', String(score));
+  u.searchParams.set('utm_source', 'challenge');
+  u.searchParams.set('utm_medium', 'share');
+  u.searchParams.set('utm_campaign', `game-${game}`);
+  return u.toString();
+}
+
+/** Share text + link via the native sheet (with an optional PNG), else copy. Returns 'shared'|'copied'|'cancelled'. */
+export async function shareChallenge(text, url, blob, filename) {
+  const full = `${text}\n${url}`;
+  if (typeof navigator !== 'undefined' && navigator.share) {
+    try {
+      const file = blob ? new File([blob], filename || 'score.png', { type: 'image/png' }) : null;
+      await navigator.share(file && navigator.canShare && navigator.canShare({ files: [file] }) ? { files: [file], text: full } : { text: full });
+      return 'shared';
+    } catch (e) { if (e && e.name === 'AbortError') return 'cancelled'; }
+  }
+  try { await navigator.clipboard.writeText(full); } catch { prompt('Copy your challenge link:', full); }
+  return 'copied';
+}
+
+// ------------------------------------------------------------------ juice: sound, shake, particles, tutorial
+
+let ac = null;
+/** WebAudio blips. muted() is checked on every sound. */
+export function sfx(muted = () => false) {
+  const tone = (f, d = 0.07, type = 'sine', vol = 0.07, slide = 1.5, at = 0) => {
+    if (muted()) return;
+    try {
+      ac = ac || new (window.AudioContext || window.webkitAudioContext)();
+      if (ac.state === 'suspended') ac.resume();
+      const t = ac.currentTime + at, o = ac.createOscillator(), v = ac.createGain();
+      o.type = type; o.frequency.setValueAtTime(f, t); o.frequency.exponentialRampToValueAtTime(Math.max(30, f * slide), t + d);
+      v.gain.setValueAtTime(vol, t); v.gain.exponentialRampToValueAtTime(0.0001, t + d);
+      o.connect(v); v.connect(ac.destination); o.start(t); o.stop(t + d + 0.02);
+    } catch { /* no audio */ }
+  };
+  return {
+    tone,
+    tap: () => tone(660, 0.04, 'triangle', 0.05, 1.3),
+    good: (k = 0) => tone(880 + Math.min(k, 30) * 22, 0.06, 'sine', 0.06, 1.4),
+    hit: () => { tone(160, 0.3, 'sawtooth', 0.11, 0.3); tone(90, 0.25, 'square', 0.05, 0.5, 0.02); },
+    lose: () => { tone(330, 0.16, 'triangle', 0.08, 0.7); tone(220, 0.3, 'triangle', 0.08, 0.6, 0.15); },
+    star: (i = 0) => tone(990 * (1 + i * 0.26), 0.12, 'sine', 0.07, 1.25, i * 0.14),
+    win: () => [523, 659, 784, 1046].forEach((f, i) => tone(f, 0.16, 'triangle', 0.07, 1.02, i * 0.09)),
+    boss: () => [196, 233, 262].forEach((f, i) => tone(f, 0.22, 'square', 0.04, 1, i * 0.12)),
+  };
+}
+
+const reduced = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/** Shake an element for ms (skipped when the player prefers reduced motion). */
+export function shake(el, mag = 8, ms = 260) {
+  if (!el || !el.animate || reduced()) return;
+  const k = [];
+  for (let i = 0; i <= 6; i++) { const m = mag * (1 - i / 6); k.push({ transform: `translate(${(i % 2 ? 1 : -1) * m}px, ${(i % 3 - 1) * m * 0.5}px)` }); }
+  el.animate(k, { duration: ms, easing: 'ease-out' });
+}
+
+let fx = null, parts = [], fxRaf = 0;
+/** Particle burst at a page point (clientX/clientY). colors = array of CSS colours. */
+export function burst(x, y, { colors = ['#FFC857', '#FF6A3D', '#5CF2FF', '#FFFFFF'], n = 26, speed = 6, life = 700 } = {}) {
+  if (typeof document === 'undefined' || reduced()) return;
+  if (!fx) {
+    fx = document.createElement('canvas');
+    fx.className = 'cmx-fx';
+    fx.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(fx);
+  }
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  if (fx.width !== innerWidth * dpr || fx.height !== innerHeight * dpr) { fx.width = innerWidth * dpr; fx.height = innerHeight * dpr; }
+  const t0 = performance.now();
+  for (let i = 0; i < n; i++) {
+    const a = Math.random() * Math.PI * 2, v = speed * (0.4 + Math.random());
+    parts.push({ x: x * dpr, y: y * dpr, vx: Math.cos(a) * v * dpr, vy: Math.sin(a) * v * dpr - 2 * dpr, c: colors[i % colors.length], t0, life: life * (0.6 + Math.random() * 0.6), r: (2 + Math.random() * 3.5) * dpr });
+  }
+  if (!fxRaf) fxRaf = requestAnimationFrame(fxStep);
+}
+function fxStep(now) {
+  const c = fx.getContext('2d');
+  c.clearRect(0, 0, fx.width, fx.height);
+  parts = parts.filter((p) => now - p.t0 < p.life);
+  for (const p of parts) {
+    p.x += p.vx; p.y += p.vy; p.vy += 0.25; p.vx *= 0.98;
+    c.globalAlpha = 1 - (now - p.t0) / p.life;
+    c.fillStyle = p.c; c.fillRect(p.x - p.r / 2, p.y - p.r / 2, p.r, p.r);
+  }
+  c.globalAlpha = 1;
+  fxRaf = parts.length ? requestAnimationFrame(fxStep) : 0;
+}
+/** Burst from the centre of an element (or a point inside it given as 0..1 fractions). */
+export function burstAt(el, fx = 0.5, fy = 0.5, opts) {
+  if (!el) return;
+  const r = el.getBoundingClientRect();
+  burst(r.left + r.width * fx, r.top + r.height * fy, opts);
+}
+
+/**
+ * The 2-second no-text tutorial: a pulsing hand over a spot of `el` (fractions fx, fy). gesture: 'tap' (default),
+ * 'hold' or 'swipe'. Shown once per game (key `<game>:tut`) unless force is set; any tap hides it.
+ */
+export function tutorial(game, el, { fx = 0.5, fy = 0.6, gesture = 'tap', force = false, ms = 2200 } = {}) {
+  if (!el || (!force && store(`${game}:tut`))) return;
+  store(`${game}:tut`, 1);
+  const host = el.parentElement;
+  if (getComputedStyle(host).position === 'static') host.style.position = 'relative';
+  const h = document.createElement('div');
+  h.className = `cmx-tut cmx-tut-${gesture}`;
+  h.setAttribute('aria-hidden', 'true');
+  h.innerHTML = '<i></i><b>👆</b>';
+  const r = el.getBoundingClientRect(), hr = host.getBoundingClientRect();
+  h.style.left = `${r.left - hr.left + r.width * fx}px`;
+  h.style.top = `${r.top - hr.top + r.height * fy}px`;
+  host.appendChild(h);
+  const off = () => { h.remove(); window.removeEventListener('pointerdown', off, true); };
+  setTimeout(off, ms);
+  window.addEventListener('pointerdown', off, true);
+}
+
+// ------------------------------------------------------------------ level-select map
+
+/**
+ * Render the level map into `host`. levels = [{ n, name, twist?, boss? }] (twist = short text for the first level
+ * of a new mechanic). onPick(n) runs for a playable level; onLocked(n, reason) for a locked one.
+ */
+export function renderMap(host, prog, levels, { current = 0, onPick, onLocked, worlds = [] } = {}) {
+  css();
+  const d = prog.data();
+  const reached = prog.reached();
+  let html = `<div class="lv-head"><b>${prog.cleared()}/${prog.total}</b> levels · <b>${prog.totalStars()}/${prog.total * 3}</b> ⭐</div>`;
+  for (let w = 0; w < Math.ceil(levels.length / 10); w++) {
+    const set = levels.slice(w * 10, w * 10 + 10);
+    const twists = set.filter((l) => l.twist).map((l) => `<span>Lv ${l.n}: ${esc(l.twist)}</span>`).join('');
+    html += `<section class="lv-world"><h3>${esc(worlds[w] || `World ${w + 1}`)}</h3>${twists ? `<p class="lv-twists">${twists}</p>` : ''}<ol class="lv-grid">`;
+    set.forEach((l, i) => {
+      const lock = prog.lock(l.n);
+      const passLv = !!lock && prog.lock(l.n, { challenge: true }) === 'pass'; // Fun Pass level: show the lock even before it is reached
+      const st = d.stars[l.n] || 0;
+      const cls = ['lv', l.boss ? 'boss' : '', lock ? `locked ${lock}` : '', st ? 'done' : '', l.n === reached && !st ? 'next' : '', l.n === current ? 'cur' : '', Math.floor(i / 5) % 2 ? 'rev' : ''].filter(Boolean).join(' ');
+      const label = `Level ${l.n}${l.name ? `: ${l.name}` : ''}${l.boss ? ' (challenge level)' : ''}${passLv ? ', Fun Pass' : lock ? ', locked' : st ? `, ${st} of 3 stars` : ''}`;
+      html += `<li><button type="button" class="${cls}" data-lv="${l.n}" aria-label="${esc(label)}" title="${esc(label)}">${l.boss ? '<i class="crown">👑</i>' : ''}<span class="n">${passLv ? '🔒' : l.n}</span><span class="st">${lock === 'progress' ? '' : starText(st).replace(/☆/g, '<s>☆</s>')}</span>${l.twist ? '<i class="new">NEW</i>' : ''}</button></li>`;
+    });
+    html += '</ol></section>';
+  }
+  if (prog.free < prog.total) html += `<p class="lv-note">Levels 1-${prog.free} are free. Levels ${prog.free + 1}-${prog.total} come with the CyberMax Fun Pass; a level you have opened always stays open.</p>`;
+  host.innerHTML = html;
+  host.querySelectorAll('[data-lv]').forEach((b) => b.addEventListener('click', () => {
+    const n = Number(b.dataset.lv), lock = prog.lock(n);
+    if (lock) onLocked && onLocked(n, lock); else onPick && onPick(n);
+  }));
+}
+
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+
+// ------------------------------------------------------------------ score card (1080×1350 PNG for stories)
+
+/** A share card: { title, sub, big, unit, line, stars, bg, fg, accent, foot } -> canvas. draw(ctx) adds game art. */
+export function scoreCard(o, draw) {
+  const c = document.createElement('canvas');
+  c.width = 1080; c.height = 1350;
+  const x = c.getContext('2d');
+  x.fillStyle = o.bg || '#11141B'; x.fillRect(0, 0, 1080, 1350);
+  if (draw) { x.save(); draw(x); x.restore(); }
+  x.textAlign = 'left'; x.fillStyle = o.accent || '#FF6A3D'; x.font = '900 64px system-ui, sans-serif'; x.fillText(String(o.title || '').toUpperCase(), 80, 130);
+  x.fillStyle = o.fg || '#fff'; x.globalAlpha = 0.85; x.font = '700 40px system-ui, sans-serif'; x.fillText(o.sub || '', 80, 190); x.globalAlpha = 1;
+  x.fillStyle = 'rgba(0,0,0,.35)'; rr(x, 60, 930, 960, 300, 36); x.fill();
+  x.textAlign = 'center'; x.fillStyle = o.fg || '#fff';
+  x.font = '900 150px system-ui, sans-serif'; x.fillText(String(o.big ?? ''), 540, 1080);
+  x.font = '700 44px system-ui, sans-serif'; x.fillText(o.unit || '', 540, 1140);
+  if (o.stars !== undefined) { x.font = '64px system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif'; x.fillText(starText(o.stars), 540, 1205); }
+  x.fillStyle = o.accent || '#FF6A3D'; x.font = '800 46px system-ui, sans-serif'; x.fillText(o.line || 'Can you beat it?', 540, 880);
+  x.fillStyle = o.fg || '#fff'; x.globalAlpha = 0.75; x.font = '600 32px system-ui, sans-serif'; x.fillText(o.foot || 'cybermaxtools.com/games', 540, 1300);
+  return c;
+}
+
+// ------------------------------------------------------------------ styles (injected once; no extra file)
+
+let cssDone = false;
+export function css() {
+  if (cssDone || typeof document === 'undefined') return;
+  cssDone = true;
+  const s = document.createElement('style');
+  s.textContent = `.cmx-fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60}
+.lv-head{font-size:15px;color:var(--muted);margin:4px 0 8px}.lv-head b{color:var(--ink)}
+.lv-world h3{margin:14px 0 4px;font-size:16px}.lv-twists{margin:0 0 8px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
+.lv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
+.lv{position:relative;width:100%;aspect-ratio:1;max-width:72px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:900;font-size:18px;cursor:pointer;touch-action:manipulation;padding:0}
+.lv .n{line-height:1}.lv .st{font-size:9px;letter-spacing:-1px;line-height:1.2;min-height:11px}.lv .st s{text-decoration:none;opacity:.35}
+.lv.done{border-color:var(--ok)}.lv.boss{border-radius:18px;border-width:3px}.lv.boss.done{border-color:#E0A400}
+.lv.next{border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent);animation:lvp 1.4s ease-in-out infinite}
+.lv.cur{outline:3px solid var(--ink);outline-offset:2px}
+.lv.locked.progress{opacity:.38;cursor:default}.lv.locked.pass{opacity:.75;border-style:dashed}
+.lv .crown{position:absolute;top:-10px;font-style:normal;font-size:16px}.lv .new{position:absolute;bottom:-8px;font-style:normal;font-size:9px;background:var(--acc);color:var(--acc-ink);padding:1px 5px;border-radius:6px;font-weight:900}
+.lv-note{font-size:13px;color:var(--muted);margin:14px 0 0}
+@keyframes lvp{50%{transform:scale(1.07)}}
+.cmx-tut{position:absolute;width:0;height:0;pointer-events:none;z-index:20}
+.cmx-tut i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;border:4px solid #fff;opacity:0;animation:tutring 1s ease-out infinite}
+.cmx-tut b{position:absolute;left:-18px;top:-2px;font-size:44px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:tuttap 1s ease-in-out infinite}
+.cmx-tut-hold b{animation:tuthold 1.1s ease-in-out infinite}.cmx-tut-swipe b{animation:tutswipe 1.1s ease-in-out infinite}
+@keyframes tutring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
+@keyframes tuttap{0%,100%{transform:translateY(8px)}50%{transform:translateY(0) scale(.9)}}
+@keyframes tuthold{0%{transform:translateY(8px)}30%,80%{transform:translateY(0) scale(.85)}100%{transform:translateY(8px)}}
+@keyframes tutswipe{0%{transform:translateX(-40px)}100%{transform:translateX(40px)}}
+.lv-banner{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1.5px solid var(--acc);border-radius:14px;padding:8px 12px;margin:8px 0;font-weight:700}
+.lv-goal{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:15px;margin:8px 0}.lv-goal b{font-variant-numeric:tabular-nums}
+.lv-stars{font-size:30px;letter-spacing:4px;margin:4px 0}.lv-stars span{display:inline-block;animation:lvstar .45s cubic-bezier(.2,1.6,.4,1) both}
+@keyframes lvstar{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1)}}
+@media (prefers-reduced-motion:reduce){.lv.next,.cmx-tut i,.cmx-tut b,.lv-stars span{animation:none}}`;
+  document.head.appendChild(s);
+}
+
+/** Animated star row HTML for result panels. */
+export function starsHtml(n) {
+  return [0, 1, 2].map((i) => `<span style="animation-delay:${i * 0.14}s${i < n ? '' : ';opacity:.3'}">${i < n ? '⭐' : '☆'}</span>`).join('');
+}

style.css

@@ -12,3 +12,8 @@
 .sp-row{display:flex;gap:6px;margin:0 0 10px}.sp-dot{width:26px;height:26px;border-radius:50%;display:inline-block;border:2px solid var(--line)}
 .fp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
 .grid{font-size:22px;letter-spacing:2px;margin:4px 0 10px;white-space:pre-line;line-height:1.3}
+.over .row{margin-top:8px}.lvmap{margin:10px 0}
+.lv-goal{min-height:24px;justify-content:center;text-align:center}.new-twist{color:var(--acc);font-weight:800}
+.skins{gap:6px}.skins button{width:32px;height:32px}
+.lv-goal{display:block}
+@media (max-width:420px){.chips .chip{padding:5px 9px;font-size:13px}}

sw.js

@@ -1,8 +1,8 @@
 // CyberMax game service worker: the game works offline after the first visit. Cache-first for the game's own files,
 // network-first for the page itself (so updates arrive), never caches API calls or other sites. (c) 2026 CyberMax.
 const GAME = 'brimbloom';
-const CACHE = `cmx-${GAME}-8716f0739d`;
-const FILES = ["index.html", "cmx.js", "core.js", "fun.css", "funpass.js", "game.js", "icon-192.png", "icon-512.png", "icon-maskable.png", "icon.svg", "index.html", "manifest.webmanifest", "skins.js", "style.css"];
+const CACHE = `cmx-${GAME}-510a600419`;
+const FILES = ["index.html", "cmx.js", "core.js", "fun.css", "funpass.js", "game.js", "icon-192.png", "icon-512.png", "icon-maskable.png", "icon.svg", "index.html", "levels.js", "manifest.webmanifest", "skins.js", "style.css"];
 
 self.addEventListener('install', (e) => {
   e.waitUntil(caches.open(CACHE).then((c) => c.addAll(FILES)).then(() => self.skipWaiting()));