Deploy sightfern

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+icon-512.png filter=lfs diff=lfs merge=lfs -text
+og.png filter=lfs diff=lfs merge=lfs -text
+shot-phone.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,32 @@
 ---
-title: Sightfern
-emoji: 📈
-colorFrom: pink
-colorTo: red
+title: "Sightfern: Real-world spotting game (camera)"
+emoji: 🎮
+colorFrom: gray
+colorTo: blue
 sdk: static
 pinned: false
+license: other
+thumbnail: https://cybermaxtools.com/games/sightfern/og.png
+short_description: "Spot real cats, dogs and birds with your camera and fill y"
+tags:
+- game
+- html5
+- browser-game
+- pwa
+- cybermax
 ---
+**Sightfern**: Spot real cats, dogs and birds with your camera and fill your field album. 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).
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Play it full screen: https://cybermaxtools.com/games/sightfern/?utm_source=huggingface
+
+![Sightfern](https://cybermaxtools.com/games/sightfern/og.png)
+
+**Embed it free on your site** (works on phones, keeps a small link to CyberMax):
+
+```html
+<iframe src="https://cybermaxtools.com/embed/sightfern/" width="480" height="720" style="border:0;max-width:100%;aspect-ratio:2/3;height:auto" title="Sightfern: 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

@@ -0,0 +1,181 @@
+// CyberMax Fun kit: shared browser helpers for the CyberMax games (copied into each game's web/ folder by
+// scripts/games/sync_kit.py, so every game stays self-contained and sellable on its own).
+// Counter beacon (game + event + channel only: no cookies, no IDs, nothing personal), daily seed, share, PWA install.
+// (c) 2026 CyberMax. All rights reserved.
+
+export const SITE = 'https://cybermaxtools.com';
+export const API = 'https://toys.cybermaxtools.com';
+export const EPOCH = Date.UTC(2026, 9, 2); // 2 Oct 2026 = puzzle #1 for every CyberMax daily game
+
+/** Today's date in the player's own time zone as YYYY-MM-DD (everyone gets a new puzzle at their local midnight). */
+export function today(d = new Date()) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+/** Puzzle number for a YYYY-MM-DD date (#1 = 2026-10-02). */
+export function dayNumber(iso) {
+  const [y, m, d] = iso.split('-').map(Number);
+  return Math.round((Date.UTC(y, m - 1, d) - EPOCH) / 864e5) + 1;
+}
+export function dateOf(n) {
+  const t = new Date(EPOCH + (n - 1) * 864e5);
+  return t.toISOString().slice(0, 10);
+}
+
+/** 32-bit string hash (FNV-1a) and a small fast PRNG (mulberry32): the same seed gives the same game everywhere. */
+export function hash(str) {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 0x01000193); }
+  return h >>> 0;
+}
+export function rng(seed) {
+  let a = typeof seed === 'string' ? hash(seed) : seed >>> 0;
+  return function () {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Count one event (play, win, share, install, pro, cta). Never breaks the page; skipped on localhost and in tests. */
+export function count(game, ev, ch = '') {
+  try {
+    if (typeof location === 'undefined' || /^(localhost|127\.0\.0\.1)$/.test(location.hostname) || navigator.webdriver) return;
+    const u = `${API}/e?t=${encodeURIComponent(game)}&a=${encodeURIComponent(ev)}&c=${encodeURIComponent(String(ch).toLowerCase().replace(/[^a-z0-9-]/g, '').slice(0, 40))}`;
+    if (navigator.sendBeacon && navigator.sendBeacon(u)) return;
+    fetch(u, { method: 'POST', keepalive: true, mode: 'no-cors' }).catch(() => {});
+  } catch { /* never break the game */ }
+}
+
+export function store(key, val) {
+  try {
+    if (val === undefined) return JSON.parse(localStorage.getItem(key) || 'null');
+    localStorage.setItem(key, JSON.stringify(val));
+  } catch { /* private mode */ }
+  return val;
+}
+
+export function toast(msg, ms = 2400) {
+  let t = document.getElementById('toast');
+  if (!t) { t = document.createElement('div'); t.id = 'toast'; t.setAttribute('role', 'status'); document.body.appendChild(t); }
+  t.textContent = msg;
+  t.classList.add('on');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove('on'), ms);
+}
+
+/** The link people share: the canonical game page with UTM tags the site view counter reads. */
+export function shareLink(path, channel, game) {
+  const u = new URL(SITE + path);
+  u.searchParams.set('utm_source', channel);
+  u.searchParams.set('utm_medium', 'share');
+  u.searchParams.set('utm_campaign', `game-${game}`);
+  return u.toString();
+}
+
+/**
+ * Share a result: native share sheet on phones (text + optional PNG card), else copy to clipboard.
+ * text = Wordle-style text block; path = the game's path on the CyberMax site; blob = optional PNG card.
+ */
+export async function share(game, text, path, blob, filename) {
+  const url = shareLink(path, 'share', game);
+  const full = `${text}\n${url}`;
+  if (navigator.share) {
+    try {
+      const file = blob ? new File([blob], filename || `${game}.png`, { type: 'image/png' }) : null;
+      const data = file && navigator.canShare && navigator.canShare({ files: [file] }) ? { files: [file], text: full } : { text: full };
+      await navigator.share(data);
+      count(game, 'share', 'native');
+      return 'shared';
+    } catch (e) {
+      if (e && e.name === 'AbortError') return 'cancelled';
+    }
+  }
+  try { await navigator.clipboard.writeText(full); toast('Result copied. Paste it anywhere.'); } catch { prompt('Copy your result:', full); }
+  count(game, 'share', 'copy');
+  return 'copied';
+}
+
+export function intents(game, text, path) {
+  const u = (ch) => shareLink(path, ch, game);
+  return {
+    x: `https://x.com/intent/post?text=${encodeURIComponent(text)}&url=${encodeURIComponent(u('x'))}`,
+    bsky: `https://bsky.app/intent/compose?text=${encodeURIComponent(`${text}\n${u('bsky')}`)}`,
+    whatsapp: `https://wa.me/?text=${encodeURIComponent(`${text}\n${u('whatsapp')}`)}`,
+  };
+}
+
+export function download(blob, filename) {
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 1500);
+}
+
+/**
+ * Installable app: registers the service worker (offline play) and shows an "Add to Home Screen" button.
+ * Chrome/Edge/Android: the real install prompt. iPhone/iPad Safari: a short Share → Add to Home Screen hint.
+ * The button only appears after the first finished round (offer(): never on first load) and never once installed.
+ */
+export function pwa(game, btn) {
+  if ('serviceWorker' in navigator && (location.protocol === 'https:' || location.hostname === 'localhost')) {
+    navigator.serviceWorker.register('sw.js').catch(() => {});
+  }
+  const standalone = matchMedia('(display-mode: standalone)').matches || navigator.standalone;
+  if (standalone) { count(game, 'play', 'app'); return { offer() {} }; }
+  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 && !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 () => {
+      if (deferred) {
+        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);
+      }
+    });
+  }
+  return {
+    offer() {
+      wanted = true;
+      if (btn && (deferred || ios) && !store(`cmx-install-no:${game}`)) btn.hidden = false;
+    },
+  };
+}
+
+/** Rounded rectangle path for canvas cards. */
+export function rr(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+export const canvasBlob = (canvas) => new Promise((res) => canvas.toBlob(res, 'image/png'));
+
+/** Theme toggle shared by every page (light/dark, remembered). */
+export function themeToggle(btn) {
+  if (!btn) return;
+  btn.addEventListener('click', () => {
+    const r = document.documentElement;
+    const c = r.dataset.theme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    const n = c === 'dark' ? 'light' : 'dark';
+    r.dataset.theme = n;
+    store('cm-theme-v', n);
+    try { localStorage.setItem('cm-theme', n); } catch { /* private mode */ }
+  });
+}

core.js

@@ -0,0 +1,178 @@
+// Sightfern core: the field-journal rules, pure functions (no DOM, no camera), shared by the page and the tests.
+// A sighting = an animal the on-device detector found in the player's own photo (or one they tagged by hand), its
+// coat/plumage colour read from the pixels inside the detection box, and the local time of day.
+// Rarity is a game rule (how hard a colour is to find in everyday streets and parks), not a biological claim.
+// (c) 2026 CyberMax. All rights reserved.
+
+/** Albums. Free: Cats, Dogs, Birds. Fun Pass: Farm and Wild (the other animals the detector knows). */
+export const ALBUMS = {
+  cats:  { name: 'Cats',  icon: '🐈', species: ['cat'],  pro: false },
+  dogs:  { name: 'Dogs',  icon: '🐕', species: ['dog'],  pro: false },
+  birds: { name: 'Birds', icon: '🐦', species: ['bird'], pro: false },
+  farm:  { name: 'Farm',  icon: '🐄', species: ['horse', 'sheep', 'cow'], pro: true },
+  wild:  { name: 'Wild & zoo', icon: '🦒', species: ['bear', 'elephant', 'zebra', 'giraffe'], pro: true },
+};
+export const SPECIES = Object.fromEntries(Object.entries(ALBUMS).flatMap(([album, a]) => a.species.map((s) => [s, album])));
+export const LABEL = { cat: 'Cat', dog: 'Dog', bird: 'Bird', horse: 'Horse', sheep: 'Sheep', cow: 'Cow', bear: 'Bear', elephant: 'Elephant', zebra: 'Zebra', giraffe: 'Giraffe' };
+
+export const COLOURS = {
+  black:   { name: 'Black',   hex: '#1c1c1f' },
+  white:   { name: 'White',   hex: '#f2f0ea' },
+  grey:    { name: 'Grey',    hex: '#8d9097' },
+  brown:   { name: 'Brown',   hex: '#7a4e2d' },
+  ginger:  { name: 'Ginger',  hex: '#d9792b' },
+  golden:  { name: 'Golden',  hex: '#e2b55a' },
+  patched: { name: 'Patched', hex: 'linear-gradient(135deg,#1c1c1f 0 33%,#f2f0ea 33% 66%,#d9792b 66%)' },
+  red:     { name: 'Red',     hex: '#c8352e' },
+  yellow:  { name: 'Yellow',  hex: '#e8c931' },
+  green:   { name: 'Green',   hex: '#4f9a4a' },
+  blue:    { name: 'Blue',    hex: '#3d6fd1' },
+};
+/** Slots per species: which colours can fill the page, and how rare each is (0 common … 3 epic). */
+const MAMMAL = { black: 1, white: 1, grey: 0, brown: 0, ginger: 1, golden: 2, patched: 2 };
+export const SLOTS = {
+  cat: { ...MAMMAL, golden: 3, patched: 2 },
+  dog: { ...MAMMAL, ginger: 2, grey: 1 },
+  bird: { black: 0, grey: 0, brown: 0, white: 1, red: 2, yellow: 2, green: 3, blue: 3 },
+  horse: { brown: 0, black: 1, white: 2, grey: 1, golden: 2, patched: 2 },
+  sheep: { white: 0, grey: 1, brown: 1, black: 2 },
+  cow: { patched: 0, black: 0, brown: 0, white: 1, golden: 2 },
+  bear: { brown: 0, black: 1, white: 3 }, elephant: { grey: 0 }, zebra: { patched: 0 }, giraffe: { patched: 0, golden: 1 },
+};
+export const RARITY = ['Common', 'Uncommon', 'Rare', 'Epic', 'Legendary'];
+export const TIMES = [
+  { id: 'dawn', name: 'Dawn', from: 5, to: 8, icon: '🌅' },
+  { id: 'day', name: 'Day', from: 8, to: 17, icon: '☀️' },
+  { id: 'dusk', name: 'Dusk', from: 17, to: 21, icon: '🌇' },
+  { id: 'night', name: 'Night', from: 21, to: 29, icon: '🌙' }, // 21:00-04:59
+];
+export function timeBand(hour) {
+  const h = hour < 5 ? hour + 24 : hour;
+  return (TIMES.find((t) => h >= t.from && h < t.to) || TIMES[1]).id;
+}
+
+// ------------------------------------------------------------------ colour from pixels
+/** RGB 0-255 -> { h 0-360, s 0-1, l 0-1 } */
+export function hsl(r, g, b) {
+  r /= 255; g /= 255; b /= 255;
+  const mx = Math.max(r, g, b), mn = Math.min(r, g, b), l = (mx + mn) / 2, d = mx - mn;
+  if (!d) return { h: 0, s: 0, l };
+  const s = d / (1 - Math.abs(2 * l - 1));
+  let h = mx === r ? ((g - b) / d) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  h = (h * 60 + 360) % 360;
+  return { h, s, l };
+}
+/** One pixel -> colour bucket. */
+export function bucket(r, g, b) {
+  const { h, s, l } = hsl(r, g, b);
+  if (l < 0.16) return 'black';
+  if (l > 0.82 && s < 0.35) return 'white';
+  if (s < 0.16) return l > 0.62 ? 'white' : l < 0.25 ? 'black' : 'grey';
+  if (h < 12 || h >= 340) return s > 0.45 && l > 0.25 ? 'red' : 'brown';
+  if (h < 40) return l < 0.38 || s < 0.38 ? 'brown' : 'ginger';
+  if (h < 58) return l > 0.55 ? 'golden' : s > 0.55 ? 'yellow' : 'brown';
+  if (h < 70) return 'yellow';
+  if (h < 170) return 'green';
+  if (h < 260) return 'blue';
+  return 'grey';
+}
+/**
+ * The animal's colour from RGBA pixels of the detection box (centre 60%, every 4th pixel): the biggest bucket, or
+ * "patched" when two contrasting buckets each cover 22%+ (calico, piebald, tuxedo). Only colours the species' page
+ * has are chosen; the rest fall back to the nearest neutral.
+ */
+export function coatColour(rgba, w, h, species) {
+  const slots = SLOTS[species] || MAMMAL;
+  const n = {};
+  let total = 0;
+  const x0 = Math.floor(w * 0.2), x1 = Math.ceil(w * 0.8), y0 = Math.floor(h * 0.2), y1 = Math.ceil(h * 0.8);
+  for (let y = y0; y < y1; y += 2) for (let x = x0; x < x1; x += 2) {
+    const i = (y * w + x) * 4;
+    const k = bucket(rgba[i], rgba[i + 1], rgba[i + 2]);
+    n[k] = (n[k] || 0) + 1; total++;
+  }
+  if (!total) return Object.keys(slots)[0];
+  const ranked = Object.entries(n).sort((a, b) => b[1] - a[1]);
+  const share = (k) => (n[k] || 0) / total;
+  const CONTRAST = { black: ['white', 'ginger', 'golden'], white: ['black', 'ginger', 'brown'], ginger: ['black', 'white'], brown: ['white'], golden: ['black', 'white'] };
+  if ('patched' in slots) {
+    const [a, b] = ranked;
+    if (a && b && share(a[0]) >= 0.22 && share(b[0]) >= 0.22 && (CONTRAST[a[0]] || []).includes(b[0])) return 'patched';
+  }
+  for (const [k] of ranked) if (k in slots) return k;
+  const fallback = { red: 'brown', yellow: 'golden', green: 'grey', blue: 'grey', ginger: 'brown', golden: 'brown', patched: 'brown' };
+  for (const [k] of ranked) { const f = fallback[k] || k; if (f in slots) return f; }
+  return Object.keys(slots)[0];
+}
+
+/** Rarity of a sighting: the slot's rarity, +1 at night (night spotters get a moon stamp), capped at Legendary. */
+export function rarityOf(species, colour, time) {
+  const base = (SLOTS[species] || {})[colour] ?? 0;
+  return Math.min(4, base + (time === 'night' ? 1 : 0));
+}
+
+/** A new sighting record (pure; the page adds the photo blob id). */
+export function sighting({ species, colour, at = new Date(), manual = false, score = null, coarse = null }) {
+  const time = timeBand(at.getHours());
+  return {
+    id: `${at.getTime().toString(36)}${Math.floor(Math.random() * 1e6).toString(36)}`,
+    species, album: SPECIES[species], colour, time, rarity: rarityOf(species, colour, time),
+    day: localDay(at), at: at.toISOString(), manual, score: score == null ? null : Math.round(score * 100) / 100,
+    ...(coarse ? { where: coarse } : {}),
+  };
+}
+export const localDay = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+
+/** Opt-in location is rounded to 1 decimal place (about 11 km) before it is ever stored. */
+export const coarsen = (lat, lon) => ({ lat: Math.round(lat * 10) / 10, lon: Math.round(lon * 10) / 10 });
+
+// ------------------------------------------------------------------ album progress, streak, badges
+export function slotsOf(album) {
+  return ALBUMS[album].species.flatMap((sp) => Object.keys(SLOTS[sp]).map((c) => `${sp}:${c}`));
+}
+export function progress(sightings, album) {
+  const have = new Set(sightings.filter((s) => s.album === album).map((s) => `${s.species}:${s.colour}`));
+  const all = slotsOf(album);
+  return { found: all.filter((k) => have.has(k)).length, total: all.length, have };
+}
+export function streak(sightings, today) {
+  const days = new Set(sightings.map((s) => s.day));
+  const d = new Date(`${today}T12:00:00`);
+  if (!days.has(today)) d.setDate(d.getDate() - 1);
+  let k = 0;
+  while (days.has(localDay(d))) { k++; d.setDate(d.getDate() - 1); }
+  return k;
+}
+export const BADGES = [
+  { id: 'first', icon: '👀', name: 'First sighting', test: (s) => s.length >= 1 },
+  { id: 'ten', icon: '📒', name: '10 sightings', test: (s) => s.length >= 10 },
+  { id: 'fifty', icon: '📚', name: '50 sightings', test: (s) => s.length >= 50 },
+  { id: 'trio', icon: '🐾', name: 'A cat, a dog and a bird', test: (s) => ['cat', 'dog', 'bird'].every((sp) => s.some((x) => x.species === sp)) },
+  { id: 'night', icon: '🌙', name: 'Night spotter', test: (s) => s.some((x) => x.time === 'night') },
+  { id: 'dawn', icon: '🌅', name: 'Early bird', test: (s) => s.some((x) => x.time === 'dawn') },
+  { id: 'rare', icon: '💎', name: 'Rare find', test: (s) => s.some((x) => x.rarity >= 2) },
+  { id: 'epic', icon: '🌟', name: 'Epic find', test: (s) => s.some((x) => x.rarity >= 3) },
+  { id: 'streak3', icon: '🔥', name: '3-day streak', test: (s, st) => st >= 3 },
+  { id: 'streak7', icon: '🏅', name: '7-day streak', test: (s, st) => st >= 7 },
+  { id: 'catpage', icon: '🐈', name: 'Full cat page', test: (s) => progress(s, 'cats').found === progress(s, 'cats').total },
+  { id: 'birdpage', icon: '🐦', name: 'Full bird page', test: (s) => progress(s, 'birds').found === progress(s, 'birds').total },
+];
+export function badges(sightings, today) {
+  const st = streak(sightings, today);
+  return BADGES.map((b) => ({ ...b, got: !!b.test(sightings, st) }));
+}
+
+/** Today's quest, the same for everyone on a date: spot a given animal (or colour) today. */
+export function quest(day) {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < day.length; i++) { h ^= day.charCodeAt(i); h = Math.imul(h, 0x01000193); }
+  h >>>= 0;
+  const Q = [
+    { species: 'bird', text: 'Spot any bird' }, { species: 'cat', text: 'Spot any cat' }, { species: 'dog', text: 'Spot any dog' },
+    { species: 'cat', colour: 'black', text: 'Spot a black cat' }, { species: 'dog', colour: 'white', text: 'Spot a white dog' },
+    { species: 'bird', colour: 'black', text: 'Spot a black bird' }, { species: 'cat', colour: 'ginger', text: 'Spot a ginger cat' },
+    { species: 'dog', colour: 'brown', text: 'Spot a brown dog' }, { species: 'bird', colour: 'grey', text: 'Spot a grey bird' },
+  ];
+  return Q[h % Q.length];
+}
+export const questDone = (q, sightings, day) => sightings.some((s) => s.day === day && s.species === q.species && (!q.colour || s.colour === q.colour));

detect.js

@@ -0,0 +1,36 @@
+// Sightfern on-device detector: Google MediaPipe Object Detector (EfficientDet-Lite0, COCO classes, Apache-2.0),
+// loaded only when the player opens the camera or picks a photo. The library and model files are downloaded once
+// (then cached for offline use by sw.js); every image is analysed inside the browser and never uploaded.
+// (c) 2026 CyberMax. All rights reserved. MediaPipe (c) Google LLC, Apache License 2.0.
+import { SPECIES } from './core.js';
+
+export const MP_VERSION = '0.10.14';
+export const MP_BASE = `https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@${MP_VERSION}`;
+export const MODEL = 'https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite0/int8/1/efficientdet_lite0.tflite';
+export const MIN_SCORE = 0.4;
+
+let pending = null;
+/** Load once. Returns { detect(source) -> { ms, items }, delegate }. Rejects when the device cannot run it. */
+export function loadDetector(prefer = 'CPU') { // CPU (WASM) by default: measured fast and exact (tests/detect-speed.mjs); GPU is opt-in
+  if (pending) return pending;
+  pending = (async () => {
+    const vision = await import(/* @vite-ignore */ `${MP_BASE}/vision_bundle.mjs`);
+    const files = await vision.FilesetResolver.forVisionTasks(`${MP_BASE}/wasm`);
+    const opts = (delegate) => ({ baseOptions: { modelAssetPath: MODEL, delegate }, runningMode: 'IMAGE', scoreThreshold: 0.3, maxResults: 5, categoryAllowlist: Object.keys(SPECIES) });
+    let det, delegate = prefer;
+    try { det = await vision.ObjectDetector.createFromOptions(files, opts(prefer)); } catch { delegate = 'CPU'; det = await vision.ObjectDetector.createFromOptions(files, opts('CPU')); }
+    return {
+      delegate,
+      /** source: <canvas>, <img> or ImageBitmap. Boxes are in the source's pixel space. */
+      detect(source) {
+        const t = performance.now();
+        const r = det.detect(source);
+        const items = (r.detections || []).map((d) => ({ species: d.categories[0].categoryName, score: d.categories[0].score, box: { x: d.boundingBox.originX, y: d.boundingBox.originY, w: d.boundingBox.width, h: d.boundingBox.height } }))
+          .filter((d) => d.species in SPECIES).sort((a, b) => b.score - a.score);
+        return { ms: performance.now() - t, items };
+      },
+    };
+  })();
+  pending.catch(() => { pending = null; });
+  return pending;
+}

fun.css

@@ -0,0 +1,54 @@
+/* CyberMax Fun kit: shared look for CyberMax games (copied into each game). Mobile first, light + dark. (c) 2026 CyberMax. */
+:root{--bg:#F6F3EC;--card:#fff;--ink:#11141B;--muted:#565C6B;--line:#E2DCD0;--chip:#ECE6DA;--acc:#FF6A3D;--acc-ink:#11141B;--ok:#0B7F5E;--bad:#C2361B;--shadow:0 1px 2px rgba(17,20,27,.06),0 10px 30px rgba(17,20,27,.08);color-scheme:light}
+@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0F1218;--card:#181C25;--ink:#EDEAE3;--muted:#A6ACB9;--line:#2A303C;--chip:#222734;--ok:#2FD3A0;--bad:#FF7A5C;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3);color-scheme:dark}}
+:root[data-theme=dark]{--bg:#0F1218;--card:#181C25;--ink:#EDEAE3;--muted:#A6ACB9;--line:#2A303C;--chip:#222734;--ok:#2FD3A0;--bad:#FF7A5C;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.3);color-scheme:dark}
+*{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}
+body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
+a{color:inherit}img,canvas{max-width:100%}
+.wrap{max-width:760px;margin:0 auto;padding:0 16px}
+.top{display:flex;align-items:center;gap:6px;padding:12px 0}
+.top .brand{display:flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;font-size:18px;margin-right:auto}.top .brand svg{width:28px;height:28px}
+.top nav a,.top .icon{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;font-size:15px;background:none;border:0;font-family:inherit;cursor:pointer;min-height:40px}
+.top nav a:hover,.top .icon:hover{color:var(--ink);background:var(--chip)}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;border:0;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;touch-action:manipulation}
+.btn:hover{filter:brightness(1.06)}.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn.sm{min-height:40px;padding:6px 14px;font-size:15px}
+.btn.pass{background:linear-gradient(135deg,#FFB547,#FF6A3D);color:#11141B}
+.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+.chips{display:flex;gap:6px;flex-wrap:wrap}
+.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;min-height:36px}
+.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.chip .lock{opacity:.7;font-size:12px}
+.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
+.muted{color:var(--muted)}.small{font-size:14px}
+h1{font-size:clamp(26px,6vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
+h2{font-size:21px;letter-spacing:-.01em;margin:30px 0 8px}
+.seo h3{font-size:17px;margin:18px 0 4px}.seo p,.seo li{color:var(--muted)}
+.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:12px 0}
+.more a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none}.more a b{display:block}.more a span{color:var(--muted);font-size:14px}
+footer{color:var(--muted);font-size:14px;padding:26px 0 40px;border-top:1px solid var(--line);margin-top:36px}
+#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,40px);opacity:0;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;font-weight:700;transition:.25s;z-index:99;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
+#toast.on{transform:translate(-50%,0);opacity:1}
+.nudge{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1.5px dashed var(--line);border-radius:14px;padding:10px 12px;margin-top:12px;font-size:15px}
+html.cmx-pro .nudge{display:none}
+.pro-badge{display:none;font-size:12px;font-weight:800;background:linear-gradient(135deg,#FFB547,#FF6A3D);color:#11141B;border-radius:999px;padding:2px 8px;vertical-align:middle}
+html.cmx-pro .pro-badge{display:inline-block}
+dialog.funpass{border:0;padding:0;border-radius:20px;max-width:min(520px,calc(100% - 24px));width:100%;background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
+dialog.funpass::backdrop{background:rgba(10,12,18,.55)}
+.fp{padding:22px 20px 18px;position:relative}.fp h2{margin:2px 0 10px;font-size:24px}
+.fp-x{position:absolute;right:10px;top:8px;border:0;background:none;color:var(--muted);font-size:28px;cursor:pointer;width:44px;height:44px}
+.fp-kick{margin:0;color:var(--acc);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
+.fp-perks{margin:0 0 14px;padding-left:20px}.fp-perks li{margin:2px 0}
+.fp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
+.fp-plan{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 10px 12px;border:1.5px solid var(--line);border-radius:14px;text-decoration:none;text-align:center;background:var(--bg)}
+.fp-plan:hover{border-color:var(--acc)}.fp-plan.best{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
+.fp-plan i{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--acc);color:#11141B;font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}
+.fp-plan b{font-size:14px}.fp-price{font-size:22px;font-weight:900}.fp-price small{font-size:12px;font-weight:600;color:var(--muted)}.fp-note{font-size:12px;color:var(--muted)}
+.fp-small{font-size:13px;color:var(--muted);margin:10px 0 4px}
+.fp-code{display:block;user-select:all;word-break:break-all;background:var(--chip);padding:8px;border-radius:8px;font-size:12px}
+.fp details{margin-top:6px;font-size:14px}.fp-form{display:flex;gap:6px;margin-top:8px}.fp-form input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
+@media (max-width:420px){.fp-plans{grid-template-columns:1fr}.fp-plan{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;padding:12px}.fp-plan i{left:auto;right:10px;transform:none}}
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+@media (max-width:560px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}.chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto}}
+@media (min-width:760px){dialog.funpass{max-width:720px}.fp-perks{columns:2;column-gap:28px}}
+.fp-after{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line, rgba(127,127,127,.35));border-radius:14px;text-align:left}.fp-after p{margin:0 0 8px}.fp-after .fp-row{display:flex;gap:8px;flex-wrap:wrap}
+.fp-game{border-color:var(--acc);display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;gap:2px 12px;padding:14px 14px 12px;margin:0 0 6px}.fp-game b{font-size:16px}.fp-game .fp-price{grid-row:span 2}.fp-game .fp-note{grid-column:1}
+.fp-or{margin:12px 0 8px;font-size:14px}

funpass.js

@@ -0,0 +1,227 @@
+// CyberMax games checkout: the per-game "full game" unlock + the Fun Pass (every game), copied into each game's web/ folder.
+// Model (games lane GM, 9 Oct 2026; evidence docs/ceo/games-monetization-2026-10-09.md):
+//   - Free demo: every game's daily challenge stays free for everyone, plus the first levels (OFFER.demo once the per-game
+//     unlock is live; levels 1-20 until then). A level the player has opened is never locked again.
+//   - Full game: ONE payment per game (OFFER.price, Stripe pack revenue/packs/stripe/<game>-full) unlocks every level,
+//     mode, the daily archive and themes in that game, for good. Shown only when OFFER.live is true (owner-approved).
+//   - Fun Pass = the all-games bundle: Monthly $2.99 · Yearly $19 · Lifetime $29.99 (pack revenue/packs/stripe/fun-pass).
+//   - Portal builds (scripts/games/portals.py) never show a checkout; where the portal SDK offers rewarded ads, the player
+//     may watch one to open the full game for an hour (shared/portal-adapter/cmx-portal.js CMXPortal.rewarded()).
+// Buy: counted redirect https://data.cybermaxtools.com/buy/st-<pack>-<plan>?s=game-<id> -> Stripe checkout.
+// After checkout the data Worker (/unlock/fun-pass or /unlock/<game>-full) checks the Checkout Session and returns with
+// #cmx-pro=<code> (the full-game return adds ?unlock=full). The code on the receipt page unlocks any other device.
+// No account, no cookies, nothing personal stored. (c) 2026 CyberMax. All rights reserved.
+import { count, store, toast } from './cmx.js';
+import { OFFER } from './offer.js'; // written by scripts/games/sync_kit.py from products/fun-pass/games.json
+export { OFFER };
+
+const DATA = 'https://data.cybermaxtools.com';
+const KEY = 'cmx-pro:fun-pass';
+const SID = /^(cs_(live|test)_[A-Za-z0-9]{10,200}|[A-Z0-9]{8}-[A-Z0-9]{8}-[A-Z0-9]{8}-[A-Z0-9]{8})$/i; // Stripe order code or Gumroad licence key
+const RECHECK = 3 * 864e5; // subscriptions are re-checked every 3 days; a cancelled pass turns off by itself
+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' },
+];
+export const COMMON_PERKS = ['Every level and mode in every CyberMax game', 'The full archive of past dailies', 'Custom colour themes', 'New games included as they launch'];
+const FULL_KEY = `cmx-full:${OFFER.game}`;
+const REWARD_KEY = `cmx-reward:${OFFER.game}`;
+const REWARD_MS = 60 * 60 * 1000; // one rewarded ad on a portal build opens the full game for an hour
+
+let state = store(KEY);
+let full = store(FULL_KEY);
+const listeners = [];
+let cfg = { game: 'games', name: 'CyberMax games', perks: [] };
+
+const passOn = () => !!(state && state.code);
+export const ownsGame = () => !!(full && full.code);
+const rewardOn = () => { const r = store(REWARD_KEY); return !!(r && Date.now() - r.at < REWARD_MS); };
+/** True when this player may use everything in this game: Fun Pass, this game's full unlock, or a portal reward hour. */
+export const isPro = () => passOn() || ownsGame() || rewardOn();
+/** Free levels in this game's demo: OFFER.demo once the per-game unlock is live, else the game's current number. */
+export const freeLevels = (current = 20) => (OFFER.live && OFFER.demo ? Math.min(current, OFFER.demo) : current);
+const portal = () => (typeof window !== 'undefined' && window.CMXPortal && window.CMXPortal.portal) || '';
+export function onChange(fn) { listeners.push(fn); fn(isPro()); }
+function emit() {
+  document.documentElement.classList.toggle('cmx-pro', isPro());
+  listeners.forEach((fn) => { try { fn(isPro()); } catch { /* game hook */ } });
+}
+
+async function check(code, what = 'fun-pass') {
+  try {
+    const r = await fetch(`${DATA}/unlock/${what}?json=1&session_id=${encodeURIComponent(code)}`);
+    const j = await r.json();
+    return j && typeof j.pro === 'boolean' ? j.pro : null;
+  } catch { return null; }
+}
+
+/** Turn on a full-game code for this game (receipt code of the <game>-full Payment Link). */
+export async function unlockGame(code) {
+  const ok = await check(code, `${OFFER.game}-full`);
+  if (ok) {
+    full = store(FULL_KEY, { code, at: new Date().toISOString() });
+    count(cfg.game, 'pro', 'full-unlocked');
+    toast(`${OFFER.name}: the full game is on. Thank you for supporting CyberMax games!`, 3500);
+    emit(); render();
+  } else if (ok === false) toast('That code is not a full-game order for this game.', 3500);
+  else toast('Could not reach the unlock check. Try again in a minute.', 3500);
+  return ok;
+}
+
+/** Turn on a pasted or returned code: a Fun Pass code, or (where this game sells its own unlock) a full-game code. */
+export async function unlock(code) {
+  const ok = await check(code);
+  if (ok) {
+    state = store(KEY, { code, at: new Date().toISOString(), checked: Date.now() });
+    count(cfg.game, 'pro', 'unlocked');
+    toast('Fun Pass is on. Thank you for supporting CyberMax games!', 3500);
+    emit();
+    render();
+    return ok;
+  }
+  if (sellsGame() && (await check(code, `${OFFER.game}-full`))) return unlockGame(code);
+  if (ok === false) toast('That code is not an active Fun Pass.', 3500);
+  else toast('Could not reach the pass check. Try again in a minute.', 3500);
+  return ok;
+}
+
+async function recheck() {
+  if (!isPro() || Date.now() - (state.checked || 0) < RECHECK) return;
+  const ok = await check(state.code);
+  if (ok === false) { state = null; try { localStorage.removeItem(KEY); } catch { /* */ } emit(); render(); toast('Your Fun Pass has ended. Everything free is still here.', 4000); }
+  else if (ok) state = store(KEY, { ...state, checked: Date.now() });
+}
+
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const buyUrl = (plan) => `${DATA}/buy/st-fun-pass-${plan}?s=game-${cfg.game}`;
+const gameUrl = (from = '') => `${DATA}/buy/st-${OFFER.game}-full-unlock?s=game-${cfg.game}${from ? `-${from}` : ''}`;
+const sellsGame = () => !!(OFFER.live && OFFER.price && OFFER.game !== 'games');
+
+function dialog() {
+  let d = document.getElementById('funpass');
+  if (!d) {
+    d = document.createElement('dialog');
+    d.id = 'funpass';
+    d.className = 'funpass';
+    document.body.appendChild(d);
+    d.addEventListener('click', (e) => { if (e.target === d || e.target.closest('[data-close]')) d.close(); });
+  }
+  return d;
+}
+
+const planHtml = () => PLANS.map((p) => `<a class="fp-plan${p.best ? ' best' : ''}" href="${buyUrl(p.id)}" rel="nofollow" data-plan="${p.id}">${p.best ? '<i>Best value</i>' : ''}<b>${p.label}</b><span class="fp-price">${p.price}<small>${p.per}</small></span><span class="fp-note">${p.note}</span></a>`).join('');
+const codeForm = `<details><summary>Already bought?</summary><form class="fp-form"><input aria-label="Order code" autocomplete="off" placeholder="Receipt code (cs_live_…) or Gumroad licence key"><button class="btn sm" type="submit">Turn on</button></form></details>`;
+
+function render() {
+  const d = dialog();
+  const perks = [...(cfg.perks || []), ...COMMON_PERKS.filter((p) => !(cfg.perks || []).some((q) => q.split(' ')[0] === p.split(' ')[0]))].slice(0, 6);
+  if (isPro()) {
+    const what = passOn() ? 'The Fun Pass is on in this browser for every CyberMax game' : ownsGame() ? `You own the full ${esc(OFFER.name)}` : 'The full game is open for the next hour (rewarded ad)';
+    const code = passOn() ? state.code : ownsGame() ? full.code : '';
+    d.innerHTML = `<div class="fp"><button class="fp-x" data-close aria-label="Close">×</button><p class="fp-kick">${passOn() ? 'CyberMax Fun Pass' : esc(OFFER.name)}</p><h2>Everything is open. Thank you!</h2>
+      <p>${what}: ${perks.map(esc).join(' · ')}.</p>
+      ${code ? `<p class="fp-small">Your code (paste it on another device to turn it on there):</p><code class="fp-code">${esc(code)}</code>` : ''}
+      ${passOn() ? '<p class="fp-small">Manage or cancel a subscription any time from the link in your Stripe receipt email.</p>' : ''}</div>`;
+    return;
+  }
+  if (portal()) { // portal build: no outside checkout; a rewarded ad (when the portal offers one) opens the game for an hour
+    d.innerHTML = `<div class="fp"><button class="fp-x" data-close aria-label="Close">×</button><p class="fp-kick">${esc(OFFER.name || 'Full game')}</p>
+      <h2>Open the full game for an hour</h2><ul class="fp-perks">${perks.slice(0, 4).map((p) => `<li>${esc(p)}</li>`).join('')}</ul>
+      <p><button class="btn" type="button" data-reward>▶ Watch a short ad</button></p>
+      <p class="fp-small">Optional. The daily challenge and the free levels stay free without ads.</p></div>`;
+    d.querySelector('[data-reward]').addEventListener('click', async () => {
+      count(cfg.game, 'cta', 'reward-ad');
+      const ok = await window.CMXPortal.rewarded().catch(() => false);
+      if (ok) { store(REWARD_KEY, { at: Date.now() }); count(cfg.game, 'pro', 'reward-hour'); toast('Everything is open for the next hour. Have fun!', 3000); emit(); d.close(); }
+      else toast('No ad is available right now. Try again later.', 3000);
+    });
+    return;
+  }
+  const allGames = `${OFFER.games || 'every'} CyberMax games`;
+  const own = cfg.perks || [];
+  const gamePerks = [...own, ...(own.some((p) => /archive/i.test(p)) ? [] : ['The full archive of past dailies']), 'Every bonus mode in this game'].slice(0, 6);
+  d.innerHTML = sellsGame()
+    ? `<div class="fp"><button class="fp-x" data-close aria-label="Close">×</button><p class="fp-kick">${esc(OFFER.name)} · full game</p>
+    <h2>Unlock the full ${esc(OFFER.name)}</h2>
+    <ul class="fp-perks">${gamePerks.map((p) => `<li>${esc(p)}</li>`).join('')}</ul>
+    <a class="fp-plan fp-game" href="${gameUrl()}" rel="nofollow" data-game><i>This game</i><b>Full ${esc(OFFER.name)}</b><span class="fp-price">${esc(OFFER.price)}<small> once</small></span><span class="fp-note">Pay once, keep it forever. No subscription.</span></a>
+    <p class="fp-or"><b>Or get all ${esc(allGames)}</b> with the Fun Pass:</p>
+    <div class="fp-plans">${planHtml()}</div>
+    <p class="fp-small">Secure Stripe checkout · turns on as soon as you pay · your code works on any device · 14-day promise: if it doesn't work as described, we fix it or refund you. The daily challenge and the first ${OFFER.demo || ''} levels stay free for everyone.</p>
+    ${codeForm}</div>`
+    : `<div class="fp"><button class="fp-x" data-close aria-label="Close">×</button><p class="fp-kick">CyberMax Fun Pass</p>
+    <h2>One pass. Every game. More to play.</h2>
+    <ul class="fp-perks">${perks.map((p) => `<li>${esc(p)}</li>`).join('')}</ul>
+    <div class="fp-plans">${planHtml()}</div>
+    <p class="fp-small">Secure Stripe checkout. Works in every CyberMax game. The daily challenges and the free levels stay free for everyone.</p>
+    ${codeForm}</div>`;
+  d.querySelector('.fp-form').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const c = e.target.querySelector('input').value.trim();
+    if (SID.test(c)) unlock(c); else toast('Paste the code from your receipt page (cs_live_…) or your Gumroad licence key.', 3500);
+  });
+  d.querySelectorAll('[data-plan]').forEach((a) => a.addEventListener('click', () => count(cfg.game, 'cta', `pass-${a.dataset.plan}`)));
+  d.querySelector('[data-game]')?.addEventListener('click', () => count(cfg.game, 'cta', 'full-game'));
+}
+
+/** Open the pass sheet; `from` names the button that opened it (counted as cta). */
+export function open(from = 'button') {
+  render();
+  const d = dialog();
+  if (d.showModal) d.showModal(); else d.setAttribute('open', '');
+  count(cfg.game, 'cta', `pass-open-${from}`);
+}
+
+/** After a finished round (the value moment): one small inline card under the result, never a pop-up. Shows the
+ * pass price, the honest trust line and an optional "email me" weekly reminder (double opt-in).
+ * `host` is the result panel; the card is added once and removed for pass holders. */
+export function afterWin(host, from = 'win') {
+  if (!host) return;
+  if (isPro() || portal()) { host.querySelector('.fp-after')?.remove(); return; }
+  let el = host.querySelector('.fp-after');
+  if (!el) { el = document.createElement('div'); el.className = 'fp-after'; host.appendChild(el); }
+  const best = PLANS.find((p) => p.best) || PLANS[0];
+  const game = sellsGame();
+  const href = game ? gameUrl('after') : `${buyUrl(best.id)}-after`;
+  const label = game ? `Get the full ${OFFER.name}: ${OFFER.price} once` : `Get the Fun Pass: ${best.price}${best.per}`;
+  const line = game ? (cfg.extra || `The full game opens every level, mode, the daily archive and themes in ${OFFER.name}.`)
+    : (cfg.extra || 'The Fun Pass opens every level, mode, the full archive and themes in every CyberMax game.');
+  el.innerHTML = `<p><b>Want more today?</b> ${esc(line)}</p>
+    <p class="fp-row"><a class="btn sm" href="${href}" rel="nofollow" data-after>${esc(label)}</a> <button class="btn sm ghost" type="button" data-plans>${game ? 'All games pass' : 'See all plans'}</button></p>
+    <p class="fp-small">Secure Stripe checkout · turns on as soon as you pay · ${game ? 'one payment, no subscription' : 'cancel any time from your receipt email'} · 14-day promise: if it doesn't work as described, we fix it or refund you (<a href="https://cybermaxtools.com/terms#payments" target="_blank" rel="noopener">terms</a>). Today's daily challenge stays free.</p>
+    <div class="fp-cap"></div>`;
+  el.querySelector('[data-after]').addEventListener('click', () => { count(cfg.game, 'cta', game ? 'full-game-after' : `pass-${best.id}-after`); kit((K) => K.event('upgrade-click', cfg.game)); });
+  el.querySelector('[data-plans]').addEventListener('click', () => open(`after-${from}`));
+  kit((K) => {
+    K.event('result', cfg.game); K.event('upgrade-view', cfg.game);
+    K.capture(el.querySelector('.fp-cap'), { list: `weekly-${cfg.game}`, src: `game-${cfg.game}`, label: cfg.remind || 'Email me a weekly reminder with new puzzles (free)', button: 'Remind me' });
+  });
+}
+
+// Convert kit (funnel beacons + email capture) from the CyberMax site; optional, the game works without it.
+let kitQ = null;
+function kit(fn) {
+  if (window.CMXConvert) return fn(window.CMXConvert);
+  if (kitQ) return kitQ.push(fn);
+  kitQ = [fn];
+  const sc = document.createElement('script');
+  sc.src = 'https://cybermaxtools.com/store/convert.js'; sc.async = true;
+  sc.onload = () => kitQ.splice(0).forEach((f) => { try { f(window.CMXConvert); } catch { /* optional */ } });
+  document.head.appendChild(sc);
+}
+
+/** Call once per page: game id, display name and the game's own perks (listed first). Reads #cmx-pro=<code> after
+ * checkout (?unlock=full marks this game's full-game return). Skin-pack codes are taken first by skins.js capture(). */
+export function init(options) {
+  cfg = { ...cfg, ...options };
+  const m = /[#&]cmx-pro=([^&]+)/.exec(location.hash || '');
+  if (m && SID.test(decodeURIComponent(m[1]))) {
+    const q = new URLSearchParams(location.search);
+    const fullReturn = q.get('unlock') === 'full';
+    q.delete('unlock');
+    history.replaceState(null, '', location.pathname + (q.toString() ? `?${q}` : ''));
+    if (fullReturn) unlockGame(decodeURIComponent(m[1])); else unlock(decodeURIComponent(m[1]));
+  } else recheck();
+  emit();
+}

game.js

@@ -0,0 +1,282 @@
+// Sightfern: camera, photo and manual spotting, the field album (IndexedDB, this device only), badges, streak,
+// quest and sighting cards. Rules: core.js. Recogniser: detect.js (on-device). (c) 2026 CyberMax. All rights reserved.
+import { ALBUMS, SPECIES, LABEL, COLOURS, SLOTS, RARITY, TIMES, coatColour, sighting, coarsen, progress, slotsOf, streak, badges, quest, questDone, localDay } from './core.js';
+import { loadDetector, MIN_SCORE } from './detect.js';
+import { count, store, toast, share, download, pwa, themeToggle } from './cmx.js';
+import * as pass from './funpass.js';
+
+const GAME = 'sightfern', PATH = '/games/sightfern/';
+const $ = (id) => document.getElementById(id);
+pass.init({ game: GAME, name: 'Sightfern', perks: ['Farm and Wild & zoo albums (horses, sheep, cows, bears, elephants, zebras, giraffes)', 'Gold, Film and Holo card frames', 'Extras in every CyberMax game'] });
+pwa(GAME, $('install'));
+themeToggle($('theme'));
+
+// ------------------------------------------------------------------ storage: IndexedDB on this device only
+const DB = new Promise((ok, bad) => {
+  const r = indexedDB.open('sightfern', 1);
+  r.onupgradeneeded = () => { r.result.createObjectStore('sightings', { keyPath: 'id' }); r.result.createObjectStore('photos'); };
+  r.onsuccess = () => ok(r.result); r.onerror = () => bad(r.error);
+});
+const tx = async (st, mode, fn) => { const db = await DB; return new Promise((ok, bad) => { const t = db.transaction(st, mode); const out = fn(t); t.oncomplete = () => ok(out && 'result' in out ? out.result : out); t.onerror = () => bad(t.error); }); };
+const allSightings = () => tx('sightings', 'readonly', (t) => t.objectStore('sightings').getAll());
+const putSighting = (s, blob) => tx(['sightings', 'photos'], 'readwrite', (t) => { t.objectStore('sightings').put(s); if (blob) t.objectStore('photos').put(blob, s.id); });
+const getPhoto = (id) => tx('photos', 'readonly', (t) => t.objectStore('photos').get(id));
+const wipeAll = () => tx(['sightings', 'photos'], 'readwrite', (t) => { t.objectStore('sightings').clear(); t.objectStore('photos').clear(); });
+
+let S = [];
+let tab = 'cats';
+let frame = store('sightfern:frame') || 'field';
+const FRAMES = { field: { name: 'Field journal', pro: false }, plain: { name: 'Plain', pro: false }, gold: { name: 'Gold', pro: true }, film: { name: 'Film', pro: true }, holo: { name: 'Holo', pro: true } };
+const today = () => localDay(new Date());
+
+// ------------------------------------------------------------------ header: quest, streak, totals
+function header() {
+  const q = quest(today());
+  $('quest').textContent = q.text;
+  $('quest-ok').hidden = !questDone(q, S, today());
+  $('streak').textContent = `🔥 ${streak(S, today())}`;
+  $('total').textContent = `📒 ${S.length}`;
+  const free = Object.keys(ALBUMS).filter((a) => !ALBUMS[a].pro || pass.isPro());
+  const f = free.reduce((n, a) => n + progress(S, a).found, 0), t = free.reduce((n, a) => n + progress(S, a).total, 0);
+  $('found').textContent = `${f} / ${t} album slots`;
+}
+
+// ------------------------------------------------------------------ album view
+const urls = new Map();
+async function thumb(id) {
+  if (urls.has(id)) return urls.get(id);
+  const b = await getPhoto(id);
+  const u = b ? URL.createObjectURL(b) : null;
+  urls.set(id, u);
+  return u;
+}
+async function album() {
+  $('tabs').innerHTML = Object.entries(ALBUMS).map(([k, a]) => `<button role="tab" type="button" class="tab${k === tab ? ' on' : ''}" aria-selected="${k === tab}" data-tab="${k}">${a.icon} ${a.name}${a.pro && !pass.isPro() ? ' 🔒' : ''} <small>${progress(S, k).found}/${progress(S, k).total}</small></button>`).join('');
+  const locked = ALBUMS[tab].pro && !pass.isPro();
+  const cells = [];
+  for (const key of slotsOf(tab)) {
+    const [sp, c] = key.split(':');
+    const mine = S.filter((s) => s.species === sp && s.colour === c).sort((a, b) => b.at.localeCompare(a.at));
+    const r = SLOTS[sp][c];
+    const sw = COLOURS[c].hex;
+    if (mine.length && !locked) {
+      const u = await thumb(mine[0].id);
+      cells.push(`<button class="slot got r${r}" type="button" data-id="${mine[0].id}" title="${COLOURS[c].name} ${LABEL[sp]}: ${mine.length} sighting(s)">${u ? `<img src="${u}" alt="">` : `<i style="background:${sw}"></i>`}<span>${COLOURS[c].name} ${LABEL[sp]}</span><em>${RARITY[r]}${mine.length > 1 ? ` · ×${mine.length}` : ''}</em></button>`);
+    } else cells.push(`<div class="slot r${r}"><i style="background:${sw}"></i><span>${COLOURS[c].name} ${LABEL[sp]}</span><em>${locked ? '🔒 Fun Pass' : RARITY[r]}</em></div>`);
+  }
+  $('slots').innerHTML = cells.join('');
+  $('badges').innerHTML = badges(S, today()).map((b) => `<span class="bdg${b.got ? ' got' : ''}" title="${b.name}">${b.icon}<small>${b.name}</small></span>`).join('');
+  $('frames').innerHTML = Object.entries(FRAMES).map(([k, f]) => `<button class="chip${k === frame ? ' on' : ''}" type="button" data-frame="${k}" aria-pressed="${k === frame}">${f.name}${f.pro && !pass.isPro() ? ' 🔒' : ''}</button>`).join('');
+}
+$('tabs').addEventListener('click', (e) => { const b = e.target.closest('[data-tab]'); if (!b) return; tab = b.dataset.tab; if (ALBUMS[tab].pro && !pass.isPro()) pass.open('album'); album(); });
+$('slots').addEventListener('click', async (e) => { const b = e.target.closest('[data-id]'); if (!b) return; const s = S.find((x) => x.id === b.dataset.id); if (s) openCard(s, false); });
+$('frames').addEventListener('click', (e) => { const b = e.target.closest('[data-frame]'); if (!b) return; if (FRAMES[b.dataset.frame].pro && !pass.isPro()) { pass.open('frame'); return; } frame = b.dataset.frame; store('sightfern:frame', frame); album(); });
+async function refresh() { S = await allSightings(); header(); await album(); }
+
+// ------------------------------------------------------------------ the sighting card (canvas)
+const RCOL = ['#6b7a70', '#2f7d4f', '#2f66c9', '#8a3fd1', '#d79a10'];
+async function drawCard(s) {
+  const c = $('card'), x = c.getContext('2d'), W = 1080, H = 1350;
+  const bg = { field: '#f3ead6', plain: '#ffffff', gold: '#2a2214', film: '#121212', holo: '#1b1730' }[frame] || '#f3ead6';
+  const ink = ['gold', 'film', 'holo'].includes(frame) ? '#f6f1e4' : '#1d2a22';
+  x.fillStyle = bg; x.fillRect(0, 0, W, H);
+  if (frame === 'holo') { const g = x.createLinearGradient(0, 0, W, H); ['#ff6ad5', '#c774e8', '#ad8cff', '#8795e8', '#94d0ff'].forEach((col, i) => g.addColorStop(i / 4, col)); x.globalAlpha = 0.35; x.fillStyle = g; x.fillRect(0, 0, W, H); x.globalAlpha = 1; }
+  if (frame === 'gold') { x.strokeStyle = '#e2b55a'; x.lineWidth = 18; x.strokeRect(24, 24, W - 48, H - 48); }
+  if (frame === 'film') { x.fillStyle = '#2b2b2b'; for (let i = 0; i < 14; i++) { x.fillRect(18, 40 + i * 92, 34, 50); x.fillRect(W - 52, 40 + i * 92, 34, 50); } }
+  const blob = await getPhoto(s.id);
+  const px = 90, py = 150, pw = W - 180, ph = 760;
+  x.fillStyle = '#d9d1bf'; x.fillRect(px, py, pw, ph);
+  if (blob) {
+    const im = await createImageBitmap(blob);
+    const sc = Math.max(pw / im.width, ph / im.height), dw = im.width * sc, dh = im.height * sc;
+    x.save(); x.beginPath(); x.rect(px, py, pw, ph); x.clip(); x.drawImage(im, px + (pw - dw) / 2, py + (ph - dh) / 2, dw, dh); x.restore();
+  } else { x.font = '220px system-ui, "Apple Color Emoji", "Segoe UI Emoji"'; x.textAlign = 'center'; x.fillText(ALBUMS[s.album].icon, W / 2, py + ph / 2 + 80); x.textAlign = 'left'; }
+  x.fillStyle = ink; x.font = '900 46px system-ui, sans-serif'; x.fillText('SIGHTFERN', 90, 108);
+  x.font = '600 32px system-ui, sans-serif'; x.globalAlpha = 0.7; x.textAlign = 'right'; x.fillText(`#${S.findIndex((y) => y.id === s.id) + 1 || S.length} in my journal`, W - 90, 108); x.textAlign = 'left'; x.globalAlpha = 1;
+  x.font = '900 82px system-ui, sans-serif'; x.fillText(`${COLOURS[s.colour].name} ${LABEL[s.species]}`, 90, 1020);
+  x.fillStyle = RCOL[s.rarity]; x.beginPath(); x.roundRect(90, 1050, 330, 74, 37); x.fill();
+  x.fillStyle = '#fff'; x.font = '800 40px system-ui, sans-serif'; x.fillText(RARITY[s.rarity], 120, 1100);
+  const t = TIMES.find((y) => y.id === s.time);
+  x.fillStyle = ink; x.font = '600 38px system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif';
+  x.fillText(`${t.icon} ${t.name} · ${new Date(s.at).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' })}${s.manual ? ' · ✍️ self-tagged' : ''}`, 90, 1190);
+  x.globalAlpha = 0.65; x.font = '600 30px system-ui, sans-serif'; x.fillText('Spot your own: cybermaxtools.com/games/sightfern', 90, 1280); x.globalAlpha = 1;
+}
+let shown = null;
+async function openCard(s, fresh) {
+  shown = s;
+  $('sheet-title').textContent = fresh ? (s.rarity >= 2 ? `${RARITY[s.rarity]} find! ✨` : 'New sighting!') : `${COLOURS[s.colour].name} ${LABEL[s.species]}`;
+  await drawCard(s);
+  const where = s.where ? ` · noted near ${s.where.lat}, ${s.where.lon} (on this phone only)` : '';
+  $('sheet-info').textContent = `${s.manual ? 'Tagged by you' : `Recognised on this device (${Math.round((s.score || 0) * 100)}% sure)`}${where}.`;
+  $('sheet').showModal();
+  if (fresh && !pass.isPro() && S.length === 3) pass.afterWin($('sheet-after'), 'win');
+}
+$('sheet-close').onclick = () => $('sheet').close();
+const cardBlob = () => new Promise((ok) => $('card').toBlob(ok, 'image/png'));
+$('share').onclick = async () => { const s = shown; share(GAME, `I spotted a ${COLOURS[s.colour].name.toLowerCase()} ${LABEL[s.species].toLowerCase()} (${RARITY[s.rarity]}) for my Sightfern field album 📒`, PATH, await cardBlob(), `sightfern-${s.species}.png`); };
+$('dl').onclick = async () => { download(await cardBlob(), `sightfern-${shown.species}-${shown.day}.png`); count(GAME, 'share', 'png'); };
+
+// ------------------------------------------------------------------ saving a sighting
+async function where() {
+  if (!store('sightfern:loc') || !navigator.geolocation) return null;
+  return new Promise((ok) => navigator.geolocation.getCurrentPosition((p) => ok(coarsen(p.coords.latitude, p.coords.longitude)), () => ok(null), { enableHighAccuracy: false, timeout: 8000, maximumAge: 600000 }));
+}
+/** Crop around the box (15% margin), at most 720 px, as a JPEG blob. */
+function cropBlob(src, box) {
+  const m = 0.15, x = Math.max(0, box.x - box.w * m), y = Math.max(0, box.y - box.h * m);
+  const w = Math.min(src.width - x, box.w * (1 + 2 * m)), h = Math.min(src.height - y, box.h * (1 + 2 * m));
+  const s = Math.min(1, 720 / Math.max(w, h));
+  const c = document.createElement('canvas'); c.width = Math.round(w * s); c.height = Math.round(h * s);
+  c.getContext('2d').drawImage(src, x, y, w, h, 0, 0, c.width, c.height);
+  return new Promise((ok) => c.toBlob(ok, 'image/jpeg', 0.85));
+}
+async function save(rec, blob) {
+  const loc = await where();
+  if (loc) rec.where = loc;
+  const before = new Set(S.map((s) => `${s.species}:${s.colour}`));
+  await putSighting(rec, blob);
+  await refresh();
+  count(GAME, 'win', `${rec.species}-${RARITY[rec.rarity].toLowerCase()}${rec.manual ? '-manual' : ''}`);
+  if (!before.has(`${rec.species}:${rec.colour}`)) toast(`New album slot: ${COLOURS[rec.colour].name} ${LABEL[rec.species]}!`, 3000);
+  const q = quest(today());
+  if (questDone(q, S, today()) && !questDone(q, S.filter((s) => s.id !== rec.id), today())) toast(`Quest done: ${q.text} ✅`, 3000);
+  await openCard(rec, true);
+}
+let det = null, perf = [];
+async function detector() {
+  if (det) return det;
+  $('cam-note').textContent = 'Loading the on-device recogniser (once, about 14 MB)…';
+  try { det = await loadDetector(); $('cam-note').textContent = 'Recogniser ready. It runs on this device; nothing is uploaded.'; }
+  catch (e) { $('cam-note').textContent = 'This browser could not run the recogniser. Use “Tag it myself” to add sightings by hand.'; throw e; }
+  return det;
+}
+/** Find the best animal in a canvas; returns { item, colour } or null. Detection runs on a 512 px copy. */
+async function analyse(src) {
+  const d = await detector();
+  const s = Math.min(1, 512 / Math.max(src.width, src.height));
+  const small = document.createElement('canvas'); small.width = Math.round(src.width * s); small.height = Math.round(src.height * s);
+  small.getContext('2d').drawImage(src, 0, 0, small.width, small.height);
+  const r = d.detect(small);
+  perf.push(r.ms);
+  const it = r.items.find((i) => i.score >= MIN_SCORE);
+  if (!it) return null;
+  const box = { x: it.box.x / s, y: it.box.y / s, w: it.box.w / s, h: it.box.h / s };
+  const cw = Math.max(1, Math.round(box.w)), ch = Math.max(1, Math.round(box.h));
+  const cc = document.createElement('canvas'); cc.width = Math.min(cw, 256); cc.height = Math.round(ch * (cc.width / cw)) || 1;
+  cc.getContext('2d').drawImage(src, box.x, box.y, box.w, box.h, 0, 0, cc.width, cc.height);
+  const px = cc.getContext('2d').getImageData(0, 0, cc.width, cc.height).data;
+  return { item: { ...it, box }, colour: coatColour(px, cc.width, cc.height, it.species) };
+}
+async function spotFrom(src, how) {
+  let a;
+  try { a = await analyse(src); } catch { openTagger(src); return; }
+  if (!a) { toast('No cat, dog or bird found in that shot. Get a bit closer, or tag it yourself.', 3800); lastShot = src; return; }
+  count(GAME, 'play', how);
+  const rec = sighting({ species: a.item.species, colour: a.colour, score: a.item.score });
+  await save(rec, await cropBlob(src, a.item.box));
+}
+
+// ------------------------------------------------------------------ camera
+let stream = null, looking = false, lastShot = null, lastSeen = null;
+const video = $('video'), boxes = $('boxes');
+async function startCam() {
+  if (stream) { stopCam(); return; }
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false });
+  } catch { toast('Camera not available. Use a photo or tag it yourself.', 3500); return; }
+  video.srcObject = stream; await video.play();
+  $('viewer').hidden = false; $('shutter').hidden = false; $('cam-btn').textContent = '⏹ Stop camera';
+  count(GAME, 'play', 'camera-open');
+  detector().then(() => { looking = true; look(); }).catch(() => {});
+}
+function stopCam() {
+  looking = false;
+  if (stream) stream.getTracks().forEach((t) => t.stop());
+  stream = null; $('viewer').hidden = true; $('shutter').hidden = true; $('cam-btn').textContent = '📷 Start camera';
+}
+function frameCanvas(maxSide) {
+  const s = Math.min(1, maxSide / Math.max(video.videoWidth, video.videoHeight));
+  const c = document.createElement('canvas'); c.width = Math.round(video.videoWidth * s); c.height = Math.round(video.videoHeight * s);
+  c.getContext('2d').drawImage(video, 0, 0, c.width, c.height);
+  return c;
+}
+async function look() {
+  if (!looking || !video.videoWidth) { if (looking) setTimeout(look, 300); return; }
+  const c = frameCanvas(384);
+  const r = det.detect(c);
+  perf.push(r.ms); if (perf.length > 20) perf.shift();
+  const it = r.items.find((i) => i.score >= MIN_SCORE);
+  lastSeen = it || null;
+  const vw = boxes.clientWidth, vh = boxes.clientHeight;
+  boxes.width = vw * devicePixelRatio; boxes.height = vh * devicePixelRatio;
+  const x = boxes.getContext('2d'); x.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0); x.clearRect(0, 0, vw, vh);
+  // video is shown with object-fit: cover; map the detection box onto it
+  const sc = Math.max(vw / c.width, vh / c.height), ox = (vw - c.width * sc) / 2, oy = (vh - c.height * sc) / 2;
+  if (it) { x.strokeStyle = '#7CFFB2'; x.lineWidth = 3; x.setLineDash([10, 6]); x.strokeRect(ox + it.box.x * sc, oy + it.box.y * sc, it.box.w * sc, it.box.h * sc); }
+  $('seen').textContent = it ? `${LABEL[it.species]} in sight (${Math.round(it.score * 100)}%). Tap Spot it!` : 'Looking for a cat, dog or bird…';
+  $('shutter').disabled = !it;
+  const avg = perf.reduce((a, b) => a + b, 0) / perf.length;
+  setTimeout(look, Math.max(250, avg * 2)); // leave the phone breathing room between looks
+}
+$('cam-btn').onclick = startCam;
+$('shutter').onclick = async () => { if (!stream) return; const c = frameCanvas(1280); lastShot = c; await spotFrom(c, 'camera'); };
+$('file').onchange = async (e) => {
+  const f = e.target.files[0]; e.target.value = ''; if (!f) return;
+  const im = await createImageBitmap(f);
+  const s = Math.min(1, 1600 / Math.max(im.width, im.height));
+  const c = document.createElement('canvas'); c.width = Math.round(im.width * s); c.height = Math.round(im.height * s);
+  c.getContext('2d').drawImage(im, 0, 0, c.width, c.height);
+  lastShot = c;
+  $('cam-note').textContent = 'Checking your photo on this device…';
+  await spotFrom(c, 'photo');
+};
+
+// ------------------------------------------------------------------ tag it yourself (manual fallback)
+let tagSp = null, tagCol = null, tagSrc = null;
+function openTagger(src = lastShot) {
+  tagSrc = src; tagSp = null; tagCol = null;
+  $('tag-species').innerHTML = Object.entries(SPECIES).map(([sp, al]) => `<button class="chip" type="button" data-sp="${sp}">${ALBUMS[al].icon} ${LABEL[sp]}${ALBUMS[al].pro && !pass.isPro() ? ' 🔒' : ''}</button>`).join('');
+  $('tag-colour').innerHTML = ''; $('tag-save').disabled = true;
+  $('tag-why').textContent = src ? 'Pick what is in your last photo. Self-tagged sightings get a ✍️ stamp.' : 'Pick what you saw. Self-tagged sightings get a ✍️ stamp.';
+  $('tagger').showModal();
+}
+$('manual-btn').onclick = () => openTagger(lastShot);
+$('tag-species').addEventListener('click', (e) => {
+  const b = e.target.closest('[data-sp]'); if (!b) return;
+  if (ALBUMS[SPECIES[b.dataset.sp]].pro && !pass.isPro()) { pass.open('album'); return; }
+  tagSp = b.dataset.sp; tagCol = null; $('tag-save').disabled = true;
+  $('tag-species').querySelectorAll('.chip').forEach((c) => c.classList.toggle('on', c === b));
+  $('tag-colour').innerHTML = Object.keys(SLOTS[tagSp]).map((c) => `<button class="chip" type="button" data-col="${c}"><i style="background:${COLOURS[c].hex}"></i>${COLOURS[c].name}</button>`).join('');
+});
+$('tag-colour').addEventListener('click', (e) => { const b = e.target.closest('[data-col]'); if (!b) return; tagCol = b.dataset.col; $('tag-colour').querySelectorAll('.chip').forEach((c) => c.classList.toggle('on', c === b)); $('tag-save').disabled = false; });
+$('tag-cancel').onclick = () => $('tagger').close();
+$('tag-save').onclick = async () => {
+  $('tagger').close();
+  const rec = sighting({ species: tagSp, colour: tagCol, manual: true });
+  const blob = tagSrc ? await cropBlob(tagSrc, { x: 0, y: 0, w: tagSrc.width, h: tagSrc.height }) : null;
+  count(GAME, 'play', 'manual');
+  await save(rec, blob);
+};
+
+// ------------------------------------------------------------------ privacy settings
+$('loc').checked = !!store('sightfern:loc');
+$('loc').onchange = (e) => {
+  if (e.target.checked && navigator.geolocation) navigator.geolocation.getCurrentPosition(() => { store('sightfern:loc', true); toast('Rough location on: rounded to about 11 km, kept on this phone only.', 3500); }, () => { e.target.checked = false; store('sightfern:loc', false); toast('Location stays off.'); }, { enableHighAccuracy: false, timeout: 10000 });
+  else store('sightfern:loc', false);
+};
+$('wipe').onclick = async () => {
+  if (!confirm('Delete every sighting and photo in Sightfern on this device? This cannot be undone.')) return;
+  await wipeAll(); urls.forEach((u) => u && URL.revokeObjectURL(u)); urls.clear(); await refresh(); toast('Everything deleted.');
+};
+$('pass-btn').onclick = () => pass.open('button');
+pass.onChange(() => { if (FRAMES[frame].pro && !pass.isPro()) frame = 'field'; refresh(); });
+document.addEventListener('visibilitychange', () => { if (document.hidden && stream) stopCam(); });
+refresh();
+
+// Test + store-screenshot hooks (tests/e2e.mjs, scripts/games/render_assets.mjs)
+window.__sightfern = { spotFrom, openTagger, refresh, perf: () => perf, add: async (recs) => { for (const r of recs) await putSighting(r, null); await refresh(); } };
+window.__cmxShot = async (stage = 1) => {
+  const now = new Date(); const mk = (species, colour, h, d = 0) => { const at = new Date(now); at.setDate(at.getDate() - d); at.setHours(h); return sighting({ species, colour, at, score: 0.9 }); };
+  await window.__sightfern.add([mk('cat', 'ginger', 9), mk('cat', 'black', 22, 1), mk('dog', 'golden', 12, 2), mk('bird', 'blue', 7), mk('cat', 'grey', 15, 3), mk('dog', 'white', 18)]);
+  if (stage === 2) await openCard(S.find((s) => s.species === 'bird') || S[0], true);
+};

index.html

@@ -1,19 +1,99 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>Sightfern: Spot Real Cats, Dogs and Birds With Your Camera, Free Album Game</title>
+<meta name="description" content="Point your phone at a real cat, dog or bird: Sightfern recognises it on your device and adds it to your field album. Rarity, badges, daily streak. Free.">
+<link rel="canonical" href="https://cybermaxtools.com/games/sightfern/">
+<meta property="og:type" content="website"><meta property="og:site_name" content="CyberMax">
+<meta property="og:title" content="Sightfern: Spot Real Cats">
+<meta property="og:description" content="Point your phone at a real cat, dog or bird: Sightfern recognises it on your device and adds it to your field album. Rarity, badges, daily streak. Free.">
+<meta property="og:url" content="https://cybermaxtools.com/games/sightfern/">
+<meta property="og:image" content="https://cybermaxtools.com/games/sightfern/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/sightfern/og.png">
+<meta name="theme-color" content="#14231B">
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="icon" href="icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="icon-192.png">
+<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Sightfern">
+<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>
+<meta name="twitter:title" content="Sightfern: Spot Real Cats">
+<meta name="twitter:description" content="Point your phone at a real cat, dog or bird: Sightfern recognises it on your device and adds it to your field album. Rarity, badges, daily streak. Free.">
+<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/sightfern/#game", "name": "Sightfern", "alternateName": "Spot real animals camera game", "url": "https://cybermaxtools.com/games/sightfern/", "image": "https://cybermaxtools.com/games/sightfern/og.png", "description": "Sightfern turns everyday walks into a collection game. Point your phone's camera at a real cat, dog or bird and an on-device recogniser identifies it, reads its coat or plumage colour and stamps the time of day. Each sighting fills a slot in your field album, with rarity, badges, a daily quest and a streak. Photos, the album and the optional rough location stay on your phone: nothing is uploaded.", "genre": ["Casual", "Collection", "Outdoor", "Photography"], "gamePlatform": ["Web browser", "Android", "iOS", "Windows", "macOS", "ChromeOS"], "applicationCategory": "Game", "operatingSystem": "Any (web browser)", "playMode": "SinglePlayer", "inLanguage": "en", "isAccessibleForFree": true, "offers": [{"@type": "Offer", "name": "Free demo (daily challenge + levels 1-20)", "price": "0", "priceCurrency": "USD"}], "author": {"@type": "Organization", "name": "CyberMax", "url": "https://cybermaxtools.com/"}, "publisher": {"@type": "Organization", "name": "CyberMax"}, "datePublished": "2026-10-09", "keywords": "Spot real animals camera game, free real-world animal spotting game, unblocked, no download, browser game"}, {"@type": "FAQPage", "@id": "https://cybermaxtools.com/games/sightfern/#faq", "mainEntity": [{"@type": "Question", "name": "Is Sightfern free?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. The camera recogniser, the Cats, Dogs and Birds albums, badges, quests and streaks are free, with no ads and no sign-up."}}, {"@type": "Question", "name": "Are my photos uploaded?", "acceptedAnswer": {"@type": "Answer", "text": "No. Recognition runs on your device and the album is stored in your browser. Nothing is sent to us or anyone else."}}, {"@type": "Question", "name": "Does it track my location?", "acceptedAnswer": {"@type": "Answer", "text": "No. Location is off unless you switch it on, and then only a rough position (about 11 km) is kept, on your phone only."}}, {"@type": "Question", "name": "Which animals does it recognise?", "acceptedAnswer": {"@type": "Answer", "text": "Cats, dogs and birds in the free albums; the Fun Pass adds horses, sheep, cows, bears, elephants, zebras and giraffes."}}, {"@type": "Question", "name": "Does it work offline?", "acceptedAnswer": {"@type": "Answer", "text": "After the first load, the albums and cards work offline; the recogniser needs your browser's cached copy from the first use."}}]}]}</script>
+</head><body>
+<div class="wrap wide">
+<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="theme" type="button" aria-label="Switch light or dark">◐</button></header>
+<main>
+<h1>Spot real cats, dogs and birds    <small class="h1kw">Free real-world animal spotting game</small></h1>
+<p class="muted lede">Point your phone at an animal you meet. Sightfern recognises it on your device and adds it to your field album, with its colour, rarity and the time you saw it. Your photos never leave this phone.</p>
+
+<section class="today panel" aria-label="Today">
+  <div><span class="lbl">Today's quest</span><b id="quest"></b> <span id="quest-ok" hidden>✅</span></div>
+  <div class="tstats"><span class="badge" id="streak" title="Daily streak">🔥 0</span><span class="badge" id="total">📒 0</span><span class="badge" id="found">0 / 0 pages</span></div>
+</section>
+
+<section class="cam panel" id="cam-panel" aria-label="Camera">
+  <div class="viewer" id="viewer" hidden><video id="video" playsinline muted></video><canvas id="boxes" aria-hidden="true"></canvas><p class="seen" id="seen" aria-live="polite">Looking…</p></div>
+  <div class="row center"><button class="btn big" id="cam-btn" type="button">📷 Start camera</button><button class="btn shutter" id="shutter" type="button" hidden disabled>📸 Spot it</button>
+    <label class="btn ghost"><input type="file" id="file" accept="image/*" hidden>🖼️ Use a photo</label><button class="btn ghost" id="manual-btn" type="button">✍️ Tag it myself</button></div>
+  <p class="muted small" id="cam-note">The recogniser downloads the first time you use it (about 14 MB; your browser keeps a copy) and runs on this device. No photo, video or location is uploaded.</p>
+</section>
+
+<dialog id="sheet" class="sheet" aria-labelledby="sheet-title">
+  <h2 id="sheet-title">New sighting!</h2>
+  <canvas id="card" width="1080" height="1350" aria-label="Your sighting card"></canvas>
+  <p id="sheet-info" class="muted small"></p>
+  <div class="row center"><button class="btn" id="share" type="button">Share card</button><button class="btn ghost" id="dl" type="button">⬇ Save card</button><button class="btn ghost" id="sheet-close" type="button">Done</button></div>
+  <div id="sheet-after"></div>
+</dialog>
+
+<dialog id="tagger" class="sheet" aria-labelledby="tag-title">
+  <h2 id="tag-title">Tag it yourself</h2>
+  <p class="muted small" id="tag-why">Pick what you saw. Self-tagged sightings get a ✍️ stamp.</p>
+  <div class="chips" id="tag-species" role="group" aria-label="Animal"></div>
+  <div class="chips" id="tag-colour" role="group" aria-label="Colour"></div>
+  <div class="row center"><button class="btn" id="tag-save" type="button" disabled>Add to album</button><button class="btn ghost" id="tag-cancel" type="button">Cancel</button></div>
+</dialog>
+
+<section class="album panel" aria-label="Your field album">
+  <div class="row between"><h2>Your field album</h2><button class="btn pass sm" id="pass-btn" type="button">✨ Fun Pass</button></div>
+  <div class="tabs" role="tablist" id="tabs"></div>
+  <div class="slots" id="slots"></div>
+  <h3>Badges</h3><div class="badges" id="badges"></div>
+  <h3>Card frame</h3><div class="chips" id="frames" role="group" aria-label="Card frame"></div>
+</section>
+
+<section class="panel settings" aria-label="Privacy settings">
+  <h2>Privacy</h2>
+  <label class="toggle"><input type="checkbox" id="loc"> Note roughly where I saw each animal (about 11 km precision, kept only on this phone). Off unless you switch it on.</label>
+  <p class="muted small">Sightfern has no account and no server: photos, the album and the optional rough location are stored in this browser only. Clearing the site's data or the button below deletes them for good.</p>
+  <div class="row"><button class="btn ghost sm" id="wipe" type="button">🗑️ Delete all my sightings</button><button class="btn ghost sm" id="install" type="button" hidden>📲 Add to Home Screen</button></div>
+</section>
+
+<section class="seo" id="guide">
+<h2>Sightfern: spot real animals camera game</h2>
+<p>Sightfern turns everyday walks into a collection game. Point your phone&#x27;s camera at a real cat, dog or bird and an on-device recogniser identifies it, reads its coat or plumage colour and stamps the time of day. Each sighting fills a slot in your field album, with rarity, badges, a daily quest and a streak. Photos, the album and the optional rough location stay on your phone: nothing is uploaded.</p>
+<h2>How to play Sightfern</h2>
+<ol><li>Tap Start camera and point it at a cat, dog or bird you meet (or pick a photo from your gallery).</li><li>When a dashed box appears around the animal, tap Spot it.</li><li>Sightfern reads the animal&#x27;s colour and the time of day and adds a sighting card to your album.</li><li>Fill every colour slot on the Cats, Dogs and Birds pages and collect badges.</li><li>Spot at least one animal a day to keep your streak; complete the daily quest.</li></ol>
+<h3>Controls</h3>
+<p><b>Phone and tablet:</b> Use the back camera: hold the animal in the frame until the dashed box appears, then tap Spot it.</p>
+<p><b>Desktop, laptop and Chromebook:</b> Use a webcam or choose a photo file; the same recogniser runs in your browser.</p>
+<h2>Sightfern tips and strategy</h2>
+<ul><li>Get close enough that the animal fills about a third of the frame.</li><li>Night sightings (after 9 pm) rank one rarity higher.</li><li>Patched (two-colour) cats and dogs are rare: look for tuxedo, calico and piebald coats.</li><li>No animal around? Tag a past photo yourself; it gets a ✍️ stamp.</li></ul>
+<h2>Game modes</h2>
+<ul><li>Cats, Dogs and Birds albums (free): colour slots, rarity, badges, daily quest and streak.</li><li>Tag it myself (free): add a sighting by hand when the camera can&#x27;t see it.</li><li>Fun Pass: Farm and Wild &amp; zoo albums (horses, sheep, cows, bears, elephants, zebras, giraffes) and Gold, Film and Holo card frames.</li></ul>
+<p>Spotting, the Cats, Dogs and Birds albums, badges, quests and streaks are free, with no ads and no sign-up. The Farm and Wild & zoo albums and extra card frames come with the optional <a href="https://cybermaxtools.com/games/#pass">CyberMax Fun Pass</a> ($2.99/month, $19/year or $29.99 for life), which also opens extras in every CyberMax game.</p>
+<h2>Sightfern FAQ</h2>
+<h3>Is Sightfern free?</h3><p>Yes. The camera recogniser, the Cats, Dogs and Birds albums, badges, quests and streaks are free, with no ads and no sign-up.</p>
+<h3>Are my photos uploaded?</h3><p>No. Recognition runs on your device and the album is stored in your browser. Nothing is sent to us or anyone else.</p>
+<h3>Does it track my location?</h3><p>No. Location is off unless you switch it on, and then only a rough position (about 11 km) is kept, on your phone only.</p>
+<h3>Which animals does it recognise?</h3><p>Cats, dogs and birds in the free albums; the Fun Pass adds horses, sheep, cows, bears, elephants, zebras and giraffes.</p>
+<h3>Does it work offline?</h3><p>After the first load, the albums and cards work offline; the recogniser needs your browser&#x27;s cached copy from the first use.</p>
+<h2>Similar free games</h2>
+<div class="more"><a href="https://cybermaxtools.com/games/pawfoil/"><b>Pawfoil</b><span>Make your pet a holo trading card</span></a><a href="https://cybermaxtools.com/games/wreckwren/"><b>Wreckwren</b><span>Wreck any website with a stickman</span></a><a href="https://cybermaxtools.com/games/kenwren/"><b>Kenwren</b><span>How well do your friends know you?</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 class="foot muted small"><a href="https://cybermaxtools.com/games/">More free games</a> · <a href="https://cybermaxtools.com/privacy.html">Privacy</a> · <a href="https://cybermaxtools.com/terms.html">Terms</a> · Animal recognition by Google MediaPipe (Apache-2.0) · © 2026 CyberMax</footer>
+</div>
+<script type="module" src="game.js"></script>
+</body></html>

manifest.webmanifest

@@ -0,0 +1,47 @@
+{
+ "name": "Sightfern",
+ "short_name": "Sightfern",
+ "description": "Spot real cats, dogs and birds with your camera and fill your field album. Free daily game by CyberMax, works offline.",
+ "id": "index.html",
+ "start_url": "index.html?utm_source=pwa-hf",
+ "scope": "./",
+ "display": "standalone",
+ "orientation": "portrait",
+ "background_color": "#14231B",
+ "theme_color": "#14231B",
+ "categories": [
+  "games",
+  "entertainment"
+ ],
+ "icons": [
+  {
+   "src": "icon-192.png",
+   "sizes": "192x192",
+   "type": "image/png"
+  },
+  {
+   "src": "icon-512.png",
+   "sizes": "512x512",
+   "type": "image/png"
+  },
+  {
+   "src": "icon-maskable.png",
+   "sizes": "512x512",
+   "type": "image/png",
+   "purpose": "maskable"
+  },
+  {
+   "src": "icon.svg",
+   "sizes": "any",
+   "type": "image/svg+xml"
+  }
+ ],
+ "screenshots": [
+  {
+   "src": "shot-phone.png",
+   "sizes": "780x1688",
+   "type": "image/png",
+   "form_factor": "narrow"
+  }
+ ]
+}

offer.js

@@ -0,0 +1,2 @@
+// Written by scripts/games/sync_kit.py from products/fun-pass/games.json; do not edit by hand. (c) 2026 CyberMax.
+export const OFFER = {"game": "sightfern", "name": "Sightfern", "price": null, "live": false, "demo": 20, "games": 12};

style.css

@@ -1,28 +1,33 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+/* Sightfern page styles (fun.css = shared CyberMax game kit). (c) 2026 CyberMax. */
+.today{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
+.today .lbl{display:block;font-size:.78em;opacity:.7;text-transform:uppercase;letter-spacing:.05em}
+.tstats{display:flex;gap:6px;flex-wrap:wrap}
+.cam .row{gap:8px;flex-wrap:wrap}.center{justify-content:center}
+.btn.big{font-size:1.15em;padding:14px 22px}
+.btn.shutter{background:#2f9e5b;color:#fff;font-size:1.15em;padding:14px 22px}.btn.shutter:disabled{opacity:.5}
+.viewer{position:relative;width:100%;max-width:720px;margin:0 auto 10px;aspect-ratio:3/4;max-height:70vh;border-radius:16px;overflow:hidden;background:#0b120e}
+.viewer video,.viewer canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.viewer .seen{position:absolute;left:10px;right:10px;bottom:10px;margin:0;background:rgba(10,20,14,.78);color:#e9fff1;padding:8px 12px;border-radius:12px;font-weight:700;text-align:center}
+@media (min-width:760px){.viewer{aspect-ratio:16/9}}
+.sheet{border:0;border-radius:18px;padding:18px;max-width:min(520px,calc(100vw - 24px));width:100%;background:var(--panel,#1c2420);color:inherit}
+.sheet::backdrop{background:rgba(0,0,0,.6)}
+.sheet canvas{width:100%;height:auto;border-radius:12px;display:block;margin:6px 0}
+.sheet h2{margin:0 0 4px}
+.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
+.tab{font:inherit;font-weight:700;border:0;border-radius:999px;padding:8px 12px;background:var(--chip,#ffffff14);color:inherit;cursor:pointer;white-space:nowrap}
+.tab.on{background:#2f9e5b;color:#fff}.tab small{opacity:.75;margin-left:4px}
+.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0}
+.slot{position:relative;display:flex;flex-direction:column;gap:4px;align-items:stretch;padding:8px;border-radius:14px;background:var(--chip,#ffffff10);border:2px dashed #ffffff22;font:inherit;color:inherit;text-align:left}
+.slot.got{border-style:solid;cursor:pointer}
+.slot i,.slot img{display:block;width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover}
+.slot:not(.got) i{opacity:.25;filter:grayscale(.3)}
+.slot span{font-weight:700;font-size:.9em}.slot em{font-style:normal;font-size:.78em;opacity:.8}
+.slot.r1.got{border-color:#2f7d4f}.slot.r2.got{border-color:#2f66c9}.slot.r3.got{border-color:#8a3fd1}.slot.r4.got{border-color:#d79a10}
+.badges{display:flex;flex-wrap:wrap;gap:8px}
+.bdg{display:flex;flex-direction:column;align-items:center;width:84px;font-size:1.6em;opacity:.3;filter:grayscale(1);text-align:center}
+.bdg.got{opacity:1;filter:none}.bdg small{font-size:.42em;line-height:1.2}
+.chip i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid #0004}
+.chip.on{outline:2px solid #2f9e5b}
+.toggle{display:flex;gap:10px;align-items:flex-start}.toggle input{margin-top:4px;transform:scale(1.2)}
+.between{justify-content:space-between;align-items:center}.foot{margin:30px 0 20px}
+@media (max-width:560px){.slots{grid-template-columns:repeat(2,1fr)}.btn.big,.btn.shutter{width:100%}}

sw.js

@@ -0,0 +1,25 @@
+// 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 = 'sightfern';
+const CACHE = `cmx-${GAME}-85ca465435`;
+const FILES = ["index.html", "cmx.js", "core.js", "detect.js", "fun.css", "funpass.js", "game.js", "icon-192.png", "icon-512.png", "icon-maskable.png", "icon.svg", "index.html", "manifest.webmanifest", "offer.js", "style.css"];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(FILES)).then(() => self.skipWaiting()));
+});
+self.addEventListener('activate', (e) => {
+  e.waitUntil(caches.keys().then((keys) => Promise.all(keys.filter((k) => k.startsWith(`cmx-${GAME}-`) && k !== CACHE).map((k) => caches.delete(k)))).then(() => self.clients.claim()));
+});
+self.addEventListener('fetch', (e) => {
+  const u = new URL(e.request.url);
+  if (e.request.method !== 'GET' || u.origin !== location.origin || !u.pathname.startsWith(new URL(self.registration.scope).pathname)) return;
+  if (e.request.mode === 'navigate') {
+    e.respondWith(fetch(e.request).then((r) => { const c = r.clone(); caches.open(CACHE).then((x) => x.put(u.pathname, c)); return r; })
+      .catch(() => caches.match(u.pathname).then((r) => r || caches.match('index.html'))));
+    return;
+  }
+  e.respondWith(caches.match(e.request, { ignoreSearch: true }).then((r) => r || fetch(e.request).then((res) => {
+    if (res.ok) { const c = res.clone(); caches.open(CACHE).then((x) => x.put(e.request, c)); }
+    return res;
+  })));
+});