Deploy pawfoil

.gitattributes

@@ -33,3 +33,5 @@ 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
+og.png filter=lfs diff=lfs merge=lfs -text
+shot-phone.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,26 @@
 ---
-title: Pawfoil
-emoji: 🐨
+title: "Pawfoil: Pet card maker"
+emoji: 🐾
 colorFrom: purple
-colorTo: indigo
+colorTo: yellow
 sdk: static
 pinned: false
+license: other
+short_description: "Make your pet a holo trading card"
+tags:
+- game
+- pets
+- trading-card
+- image-maker
+- html5
+- browser-game
+- pwa
+- cybermax
 ---
+**Pawfoil**: Make your pet a holo trading card. 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://cybermax.cybermax-tools.workers.dev/games/pawfoil/?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://cybermax.cybermax-tools.workers.dev/games/?utm_source=huggingface
+
+More free games: https://cybermax.cybermax-tools.workers.dev/games/ · © 2026 CyberMax. All rights reserved.

cmx.js

@@ -0,0 +1,179 @@
+// 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://cybermax.cybermax-tools.workers.dev';
+export const API = 'https://toys.cybermax-tools.workers.dev';
+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) 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;
+        deferred = null;
+      } else if (ios) {
+        toast('Tap the Share button, then "Add to Home Screen".', 5000);
+        count(game, 'install', 'ios-hint');
+      }
+    });
+  }
+  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,62 @@
+// Pawfoil core: turns a pet's name + kind into a collectible card's stats, moves and rarity (no DOM).
+// Deterministic for a given name, kind and roll number, so a re-roll is reproducible and testable.
+// (c) 2026 CyberMax. All rights reserved.
+import { rng } from './cmx.js';
+
+export const KINDS = {
+  dog: { label: 'Dog', emoji: '🐶', types: ['Zoomies', 'Loyal', 'Snack', 'Chaos'] },
+  cat: { label: 'Cat', emoji: '🐱', types: ['Shadow', 'Royal', 'Chaos', 'Nap'] },
+  bunny: { label: 'Bunny', emoji: '🐰', types: ['Hop', 'Fluff', 'Snack', 'Shadow'] },
+  bird: { label: 'Bird', emoji: '🐦', types: ['Sky', 'Song', 'Chaos', 'Royal'] },
+  other: { label: 'Other', emoji: '🐾', types: ['Mystery', 'Fluff', 'Chaos', 'Nap'] },
+};
+export const STATS = ['Cuteness', 'Chaos', 'Snack drive', 'Nap power', 'Zoomies', 'Loyalty'];
+export const RARITY = [
+  { id: 'common', label: 'Common', p: 0.5, stars: 1 },
+  { id: 'rare', label: 'Rare', p: 0.3, stars: 2 },
+  { id: 'epic', label: 'Epic', p: 0.15, stars: 3 },
+  { id: 'legendary', label: 'Legendary', p: 0.05, stars: 4 },
+];
+const MOVES = {
+  any: [['Puppy Eyes', 'Opponent forgets why they were mad.'], ['Loaf Mode', 'Becomes bread. Immune to chores.'], ['3 AM Zoomies', 'Runs laps. Wakes the house.'],
+    ['Sock Heist', 'Steals one sock. Never returns it.'], ['Treat Radar', 'Detects a wrapper from 3 rooms away.'], ['Lap Claim', 'Sits on you. You can never leave.'],
+    ['Dramatic Sigh', 'Guilt-trips everyone in range.'], ['Zoom Call Cameo', 'Appears on camera at the worst time.'], ['Vet Vanish', 'Disappears when the carrier comes out.'],
+    ['Sunbeam Charge', 'Recharges fully in any sunny spot.'], ['Head Tilt', 'Confuses the enemy with pure cuteness.'], ['Couch Fortress', 'Holds the best seat all day.']],
+  dog: [['Tail Helicopter', 'Knocks everything off the coffee table.'], ['Doorbell Alarm', 'Barks at every delivery, forever.'], ['Fetch Loop', 'Infinite fetch. You tire first.']],
+  cat: [['Desk Sweep', 'Pushes one item off the table, slowly.'], ['Keyboard Nap', 'Types "jjjjjjjjj" into your email.'], ['Box Fit', 'If it fits, it sits.']],
+  bunny: [['Binky Burst', 'A joyful jump that dodges all attacks.'], ['Cable Snip', 'Chews one charger. Critical hit.'], ['Hay Storm', 'Covers the floor in hay.']],
+  bird: [['Morning Concert', 'Sings at sunrise. No snooze.'], ['Shoulder Ride', 'Takes the high ground.'], ['Mimic', 'Copies the microwave beep perfectly.']],
+  other: [['Mystery Stare', 'Nobody knows what it is thinking.'], ['Tiny Speedrun', 'Escapes the enclosure in record time.'], ['Night Shift', 'Most active when you sleep.']],
+};
+
+export function cleanPetName(s) {
+  return String(s || '').normalize('NFKC').replace(/[^\p{L}\p{N} '.-]/gu, '').replace(/\s+/g, ' ').trim().slice(0, 18);
+}
+
+/** Card data for a pet. roll = 0 for the first card, 1, 2, … for re-rolls. pick() chooses rarity unless forced (Fun Pass). */
+export function makeCard(name, kind = 'dog', roll = 0, forceRarity = null) {
+  const k = KINDS[kind] ? kind : 'other';
+  const r = rng(`pawfoil:${cleanPetName(name).toLowerCase()}:${k}:${roll}`);
+  let x = r(), rarity = RARITY[0];
+  for (const t of RARITY) { if (x < t.p) { rarity = t; break; } x -= t.p; }
+  if (forceRarity) rarity = RARITY.find((t) => t.id === forceRarity) || rarity;
+  const boost = { common: 0, rare: 6, epic: 12, legendary: 20 }[rarity.id];
+  const stats = STATS.map((s) => ({ s, v: Math.min(99, 35 + Math.floor(r() * 58) + boost) }));
+  stats[0].v = Math.max(stats[0].v, 88); // every pet is very cute; that is the one fixed fact
+  const pool = [...MOVES[k], ...MOVES.any];
+  const m1 = pool.splice(Math.floor(r() * MOVES[k].length), 1)[0];
+  const m2 = pool.splice(Math.floor(r() * pool.length), 1)[0];
+  const type = KINDS[k].types[Math.floor(r() * KINDS[k].types.length)];
+  const hp = 60 + Math.floor(r() * 9) * 10 + boost * 2;
+  const power = Math.round(stats.reduce((a, b) => a + b.v, 0) / stats.length);
+  const number = 1 + Math.floor(r() * 999);
+  return { name: cleanPetName(name) || 'Mystery Pet', kind: k, kindLabel: KINDS[k].label, emoji: KINDS[k].emoji, type, rarity: rarity.id, rarityLabel: rarity.label, stars: rarity.stars,
+    hp, power, stats, moves: [{ name: m1[0], text: m1[1], dmg: 10 * (2 + Math.floor(r() * 7)) }, { name: m2[0], text: m2[1], dmg: 10 * (3 + Math.floor(r() * 8)) }], number };
+}
+
+export const FRAMES = {
+  common: { a: '#E9E4D8', b: '#C9BFA8', ink: '#11141B', foil: false },
+  rare: { a: '#BFE3FF', b: '#5BA8E8', ink: '#0B2238', foil: false },
+  epic: { a: '#E5C8FF', b: '#9B5BE8', ink: '#1E0B38', foil: true },
+  legendary: { a: '#FFE9A8', b: '#E8A93A', ink: '#2B1A00', foil: true },
+};

fun.css

@@ -0,0 +1,51 @@
+/* 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}}

funpass.js

@@ -0,0 +1,117 @@
+// 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 · Unlock all $4.99 once (Stripe Payment Links, pack revenue/packs/stripe/fun-pass).
+// Buy: counted redirect https://data.cybermax-tools.workers.dev/buy/st-fun-pass-<plan>?s=game-<id> -> Stripe checkout.
+// After checkout Stripe sends the buyer to data.cybermax-tools.workers.dev/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>.
+// Every game on the same site reads the same browser key, so one pass covers them all. The code on the receipt page
+// unlocks any other device or browser. No account, no cookies, nothing personal stored. (c) 2026 CyberMax.
+import { count, store, toast } from './cmx.js';
+
+const DATA = 'https://data.cybermax-tools.workers.dev';
+const KEY = 'cmx-pro:fun-pass';
+const SID = /^cs_(live|test)_[A-Za-z0-9]{10,200}$/;
+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: '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'];
+
+let state = store(KEY);
+const listeners = [];
+let cfg = { game: 'games', name: 'CyberMax games', perks: [] };
+
+export const isPro = () => !!(state && state.code);
+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) {
+  try {
+    const r = await fetch(`${DATA}/unlock/fun-pass?json=1&session_id=${encodeURIComponent(code)}`);
+    const j = await r.json();
+    return j && typeof j.pro === 'boolean' ? j.pro : null;
+  } catch { return null; }
+}
+
+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();
+  } else 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}`;
+
+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;
+}
+
+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()) {
+    d.innerHTML = `<div class="fp"><button class="fp-x" data-close aria-label="Close">×</button><p class="fp-kick">CyberMax Fun Pass</p><h2>You're a supporter. Thank you!</h2>
+      <p>The pass is on in this browser for every CyberMax game: ${perks.map(esc).join(' · ')}.</p>
+      <p class="fp-small">Your code (paste it on another device to turn the pass on there):</p><code class="fp-code">${esc(state.code)}</code>
+      <p class="fp-small">Manage or cancel a subscription any time from the link in your Stripe receipt email.</p></div>`;
+    return;
+  }
+  d.innerHTML = `<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">${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('')}</div>
+    <p class="fp-small">Secure Stripe checkout. Works in every CyberMax game. The free daily games stay free for everyone.</p>
+    <details><summary>Already have a pass?</summary><form class="fp-form"><input aria-label="Pass code" autocomplete="off" placeholder="Code from your receipt page (cs_live_…)"><button class="btn sm" type="submit">Turn on</button></form></details></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. It starts with cs_live_.', 3500);
+  });
+  d.querySelectorAll('[data-plan]').forEach((a) => a.addEventListener('click', () => count(cfg.game, 'cta', `pass-${a.dataset.plan}`)));
+}
+
+/** 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}`);
+}
+
+/** Call once per page: game id, display name and the game's own Pro perks (listed first). */
+export function init(options) {
+  cfg = { ...cfg, ...options };
+  const m = /[#&]cmx-pro=([^&]+)/.exec(location.hash || '');
+  if (m && SID.test(decodeURIComponent(m[1]))) {
+    history.replaceState(null, '', location.pathname + location.search);
+    unlock(decodeURIComponent(m[1]));
+  } else recheck();
+  emit();
+}

game.js

@@ -0,0 +1,171 @@
+// Pawfoil: photo + name -> collectible card on a canvas, holo tilt preview, HD PNG download, share. (c) 2026 CyberMax.
+// The photo is read with createImageBitmap and drawn locally; it is never uploaded.
+import { makeCard, KINDS, RARITY, FRAMES, cleanPetName } from './core.js';
+import { count, store, toast, share, intents, download, canvasBlob, pwa, rr, themeToggle } from './cmx.js';
+import * as pass from './funpass.js';
+
+const GAME = 'pawfoil';
+const PATH = '/games/pawfoil/';
+const $ = (id) => document.getElementById(id);
+const cv = $('card');
+const g = cv.getContext('2d');
+const W = 750, H = 1050, ART = { x: 52, y: 128, w: 646, h: 430 };
+let photo = null, kind = store('pawfoil:kind') || 'dog', roll = 0, forced = null, ox = 0, oy = 0, zoom = 1, made = false;
+
+pass.init({ game: GAME, name: 'Pawfoil', perks: ['Pick any frame: Legendary gold holo on demand', 'Hide the CyberMax line on your cards'] });
+const install = pwa(GAME, $('install'));
+themeToggle($('theme'));
+
+// ------------------------------------------------------------------ controls
+function renderKinds() {
+  const el = $('kinds'); el.innerHTML = '';
+  for (const [id, k] of Object.entries(KINDS)) {
+    const b = document.createElement('button');
+    b.type = 'button'; b.className = 'chip'; b.textContent = `${k.emoji} ${k.label}`; b.setAttribute('aria-pressed', String(id === kind));
+    b.onclick = () => { kind = id; store('pawfoil:kind', id); roll = 0; renderKinds(); draw(); };
+    el.appendChild(b);
+  }
+}
+function renderFrames() {
+  const el = $('frames'); el.innerHTML = '';
+  for (const r of [{ id: null, label: 'Roll' }, ...RARITY]) {
+    const b = document.createElement('button');
+    b.type = 'button'; b.className = 'chip'; b.setAttribute('aria-pressed', String(forced === r.id));
+    b.innerHTML = `${r.label}${r.id && !pass.isPro() ? ' <span class="lock">🔒</span>' : ''}`;
+    b.onclick = () => { if (r.id && !pass.isPro()) { pass.open(`frame-${r.id}`); return; } forced = r.id; renderFrames(); draw(); };
+    el.appendChild(b);
+  }
+  $('clean').disabled = false;
+}
+$('clean').onchange = (e) => { if (e.target.checked && !pass.isPro()) { e.target.checked = false; pass.open('clean'); return; } draw(); };
+$('name').addEventListener('input', () => { roll = 0; draw(); });
+$('zoom').addEventListener('input', (e) => { zoom = Number(e.target.value); draw(); });
+$('roll').onclick = () => {
+  roll++; draw();
+  const c = card();
+  $('rolls').textContent = `Roll ${roll + 1}: ${c.rarityLabel}${c.rarity === 'legendary' ? '! 🌟' : ''}`;
+  if (navigator.vibrate) try { navigator.vibrate(c.rarity === 'legendary' ? [20, 40, 60] : 10); } catch { /* */ }
+};
+async function loadPhoto(blob, from) {
+  try {
+    photo = await createImageBitmap(blob);
+    ox = 0; oy = 0; zoom = 1; $('zoom').value = 1;
+    if (!made) { made = true; count(GAME, 'play', from); }
+    draw();
+  } catch { toast('Could not read that image. Try a JPG or PNG.'); }
+}
+$('file').onchange = (e) => { const f = e.target.files[0]; if (f) loadPhoto(f, 'photo'); };
+$('sample').onclick = async () => { const r = await fetch('sample.jpg'); loadPhoto(await r.blob(), 'sample'); if (!$('name').value) $('name').value = 'Biscuit'; draw(); };
+
+// drag to move the photo inside the art box
+let drag = null;
+cv.addEventListener('pointerdown', (e) => { if (!photo) return; drag = { x: e.clientX, y: e.clientY, ox, oy }; cv.setPointerCapture(e.pointerId); });
+cv.addEventListener('pointermove', (e) => {
+  if (!drag) return;
+  const s = W / cv.getBoundingClientRect().width;
+  ox = drag.ox + (e.clientX - drag.x) * s; oy = drag.oy + (e.clientY - drag.y) * s; draw();
+});
+cv.addEventListener('pointerup', () => { drag = null; });
+
+// holo tilt (mouse or device tilt)
+const tilt = $('tilt');
+function setTilt(rx, ry) { tilt.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg)`; $('holo').style.backgroundPosition = `${50 + ry * 4}% ${50 - rx * 4}%`; }
+tilt.addEventListener('pointermove', (e) => { if (drag) return; const r = tilt.getBoundingClientRect(); setTilt(((e.clientY - r.top) / r.height - 0.5) * -14, ((e.clientX - r.left) / r.width - 0.5) * 14); });
+tilt.addEventListener('pointerleave', () => setTilt(0, 0));
+window.addEventListener('deviceorientation', (e) => { if (e.beta == null) return; setTilt(Math.max(-12, Math.min(12, (e.beta - 40) / 3)), Math.max(-12, Math.min(12, e.gamma / 3))); });
+
+// ------------------------------------------------------------------ drawing
+const card = () => makeCard($('name').value || 'Mystery Pet', kind, roll, forced);
+function wrap(text, x, y, maxW, lh) {
+  const words = text.split(' '); let line = '';
+  for (const w of words) { if (g.measureText(`${line}${w} `).width > maxW && line) { g.fillText(line.trim(), x, y); y += lh; line = ''; } line += `${w} `; }
+  g.fillText(line.trim(), x, y);
+}
+function draw() {
+  const c = card(), F = FRAMES[c.rarity];
+  tilt.classList.toggle('foil', F.foil);
+  g.clearRect(0, 0, W, H);
+  // frame
+  const grd = g.createLinearGradient(0, 0, W, H); grd.addColorStop(0, F.a); grd.addColorStop(1, F.b);
+  g.fillStyle = grd; rr(g, 0, 0, W, H, 40); g.fill();
+  g.fillStyle = 'rgba(255,255,255,.55)'; rr(g, 24, 24, W - 48, H - 48, 28); g.fill();
+  // header
+  g.fillStyle = F.ink; g.font = '900 52px system-ui, sans-serif'; g.textBaseline = 'alphabetic';
+  g.fillText(c.name.slice(0, 16), 52, 96);
+  g.textAlign = 'right'; g.font = '800 26px system-ui, sans-serif'; g.fillText('HP', W - 150, 96);
+  g.font = '900 52px system-ui, sans-serif'; g.fillText(String(c.hp), W - 52, 96); g.textAlign = 'left';
+  // art
+  g.save(); rr(g, ART.x, ART.y, ART.w, ART.h, 18); g.clip();
+  g.fillStyle = '#1B1430'; g.fillRect(ART.x, ART.y, ART.w, ART.h);
+  if (photo) {
+    const s = Math.max(ART.w / photo.width, ART.h / photo.height) * zoom;
+    const dw = photo.width * s, dh = photo.height * s;
+    g.drawImage(photo, ART.x + (ART.w - dw) / 2 + ox, ART.y + (ART.h - dh) / 2 + oy, dw, dh);
+  } else {
+    g.fillStyle = '#ffffff22'; g.font = '200px system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif'; g.textAlign = 'center';
+    g.fillText(KINDS[c.kind].emoji, W / 2, ART.y + 280); g.font = '700 28px system-ui, sans-serif'; g.fillStyle = '#ffffffaa';
+    g.fillText('Add a photo of your pet', W / 2, ART.y + 380); g.textAlign = 'left';
+  }
+  if (F.foil) { // printed holo sheen
+    const h = g.createLinearGradient(ART.x, ART.y, ART.x + ART.w, ART.y + ART.h);
+    ['rgba(255,0,170,0)', 'rgba(255,0,170,.18)', 'rgba(0,255,230,.2)', 'rgba(255,230,0,.18)', 'rgba(255,230,0,0)'].forEach((col, i) => h.addColorStop(i / 4, col));
+    g.globalCompositeOperation = 'screen'; g.fillStyle = h; g.fillRect(ART.x, ART.y, ART.w, ART.h); g.globalCompositeOperation = 'source-over';
+  }
+  g.restore();
+  g.strokeStyle = F.b; g.lineWidth = 6; rr(g, ART.x, ART.y, ART.w, ART.h, 18); g.stroke();
+  // type banner
+  g.fillStyle = F.ink; rr(g, 52, 576, W - 104, 50, 25); g.fill();
+  g.fillStyle = F.a; g.font = '800 26px system-ui, sans-serif';
+  g.fillText(`${c.emoji} ${c.type}-type ${c.kindLabel} · ${'★'.repeat(c.stars)} ${c.rarityLabel}`, 76, 610);
+  // moves
+  g.fillStyle = F.ink;
+  c.moves.forEach((m, i) => {
+    const y = 680 + i * 104;
+    g.font = '900 32px system-ui, sans-serif'; g.fillText(m.name, 60, y);
+    g.textAlign = 'right'; g.fillText(String(m.dmg), W - 60, y); g.textAlign = 'left';
+    g.font = '500 23px system-ui, sans-serif'; g.globalAlpha = 0.85; wrap(m.text, 60, y + 32, W - 140, 28); g.globalAlpha = 1;
+  });
+  // stats
+  c.stats.forEach((st, i) => {
+    const col = i % 3, row = Math.floor(i / 3), x = 60 + col * 214, y = 892 + row * 50;
+    g.font = '700 19px system-ui, sans-serif'; g.fillText(st.s, x, y);
+    g.textAlign = 'right'; g.font = '900 19px system-ui, sans-serif'; g.fillText(String(st.v), x + 180, y); g.textAlign = 'left';
+    g.fillStyle = 'rgba(0,0,0,.12)'; rr(g, x, y + 8, 180, 12, 6); g.fill();
+    g.globalAlpha = 0.8; g.fillStyle = F.ink; rr(g, x, y + 8, 180 * st.v / 99, 12, 6); g.fill(); g.globalAlpha = 1;
+  });
+  // footer
+  g.font = '800 18px system-ui, sans-serif'; g.globalAlpha = 0.75;
+  g.fillText(`#${String(c.number).padStart(3, '0')}/999`, 60, H - 48);
+  g.textAlign = 'right'; g.fillText(`Power ${c.power}`, W - 60, H - 48); g.textAlign = 'left';
+  if (!($('clean').checked && pass.isPro())) { g.font = '600 15px system-ui, sans-serif'; g.textAlign = 'center'; g.fillText('Made with Pawfoil · cybermax.cybermax-tools.workers.dev/games/pawfoil', W / 2, H - 22); g.textAlign = 'left'; }
+  g.globalAlpha = 1;
+  const text = `Meet ${c.name}: a ${c.rarityLabel} ${c.type}-type ${c.kindLabel} with ${c.hp} HP 🐾 Make your pet's card:`;
+  const it = intents(GAME, text, PATH);
+  $('sx').href = it.x; $('sb').href = it.bsky; $('sw').href = it.whatsapp;
+}
+
+const fname = () => `pawfoil-${cleanPetName($('name').value || 'pet').toLowerCase().replace(/\s+/g, '-')}.png`;
+$('dl').onclick = async () => {
+  if (!photo) { toast('Add a photo first (or try the sample pet).'); return; }
+  download(await canvasBlob(cv), fname()); count(GAME, 'win', 'download'); count(GAME, 'share', 'png'); install.offer();
+};
+$('share').onclick = async () => {
+  if (!photo) { toast('Add a photo first (or try the sample pet).'); return; }
+  const c = card();
+  await share(GAME, `Meet ${c.name}: a ${c.rarityLabel} ${c.type}-type ${c.kindLabel} with ${c.hp} HP 🐾`, PATH, await canvasBlob(cv), fname());
+  count(GAME, 'win', 'share'); install.offer();
+};
+['sx', 'sb', 'sw'].forEach((id) => $(id).addEventListener('click', () => count(GAME, 'share', { sx: 'x', sb: 'bsky', sw: 'whatsapp' }[id])));
+$('pass-btn').onclick = () => pass.open('header');
+document.addEventListener('click', (e) => { const b = e.target.closest('[data-pass]'); if (b) pass.open(b.dataset.pass); });
+pass.onChange((pro) => { if (!pro) { forced = null; $('clean').checked = false; } renderFrames(); draw(); });
+
+// Screenshot helper for scripts/games/render_assets.mjs and studio shots (no effect on normal play).
+window.__cmxShot = async (stage = 1) => {
+  await new Promise((ok) => { $('sample').click(); setTimeout(ok, 600); });
+  $('name').value = stage === 2 ? 'Biscuit' : 'Biscuit';
+  roll = 0; forced = stage === 2 ? 'legendary' : null; draw(); forced = null;
+};
+
+renderKinds();
+draw();

index.html

@@ -1,19 +1,63 @@
 <!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>Pawfoil: free pet trading card maker, holo cards in seconds | CyberMax</title>
+<meta name="description" content="Turn your pet's photo into a shiny collectible trading card with funny stats and moves. Free HD download, no sign-up, no watermark grab: your photo never leaves your phone.">
+<link rel="canonical" href="https://cybermax.cybermax-tools.workers.dev/games/pawfoil/">
+<meta property="og:type" content="website"><meta property="og:site_name" content="CyberMax">
+<meta property="og:title" content="Pawfoil: make your pet a holo trading card">
+<meta property="og:description" content="Photo in, collectible card out: stats, two funny moves, a rarity roll. Free HD download.">
+<meta property="og:url" content="https://cybermax.cybermax-tools.workers.dev/games/pawfoil/">
+<meta property="og:image" content="https://cybermax.cybermax-tools.workers.dev/games/pawfoil/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://cybermax.cybermax-tools.workers.dev/games/pawfoil/og.png">
+<meta name="theme-color" content="#1B1430">
+<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="Pawfoil">
+<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":"WebApplication","name":"Pawfoil","url":"https://cybermax.cybermax-tools.workers.dev/games/pawfoil/","image":"https://cybermax.cybermax-tools.workers.dev/games/pawfoil/og.png","description":"Free pet trading card maker: your pet's photo becomes a collectible card with stats, moves and a rarity roll. Runs in the browser; photos never leave the device.","applicationCategory":"MultimediaApplication","operatingSystem":"Any","publisher":{"@type":"Organization","name":"CyberMax","url":"https://cybermax.cybermax-tools.workers.dev/"},"offers":[{"@type":"Offer","price":"0","priceCurrency":"USD","description":"Free HD card"},{"@type":"Offer","price":"2.99","priceCurrency":"USD","description":"CyberMax Fun Pass, monthly"}]}</script>
+</head><body>
+<div class="wrap wide">
+<header class="top"><a class="brand" href="https://cybermax.cybermax-tools.workers.dev/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://cybermax.cybermax-tools.workers.dev/games/">Games</a></nav><button class="icon" id="theme" type="button" aria-label="Switch light or dark">◐</button></header>
+<main>
+<h1>Make your pet a holo trading card <span class="pro-badge">PASS</span></h1>
+<p class="muted lede">Add a photo, type a name, roll for rarity. Stats and moves are made for your pet. Free HD download; your photo never leaves this device.</p>
+<div class="maker">
+  <section class="controls panel">
+    <label class="photo"><input type="file" id="file" accept="image/*"><span class="btn">📷 Choose a photo</span></label>
+    <button class="btn ghost sm" id="sample" type="button">Try a sample pet (AI image)</button>
+    <label class="field">Pet's name <input id="name" maxlength="18" placeholder="e.g. Biscuit" autocomplete="off"></label>
+    <div class="chips" id="kinds" role="group" aria-label="Kind of pet"></div>
+    <div class="row adj"><label>Zoom <input id="zoom" type="range" min="1" max="3" step="0.01" value="1"></label><span class="muted small">Drag the photo on the card to move it.</span></div>
+    <div class="row"><button class="btn" id="roll" type="button">🎲 Roll again</button><span class="muted small" id="rolls"></span></div>
+    <div class="pro-box"><b>Fun Pass extras</b>
+      <div class="chips" id="frames" role="group" aria-label="Pick a frame"></div>
+      <label class="small"><input type="checkbox" id="clean"> Hide the CyberMax line on the card</label>
+    </div>
+  </section>
+  <section class="preview">
+    <div class="tilt" id="tilt"><canvas id="card" width="750" height="1050" aria-label="Your pet's trading card"></canvas><div class="holo" id="holo"></div></div>
+    <div class="row share"><button class="btn" id="dl" type="button">⬇ Download HD card</button><button class="btn ghost" id="share" type="button">Share</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></div>
+    <div class="row"><button class="btn ghost sm" id="install" type="button" hidden>📲 Add to Home Screen</button><button class="btn pass sm" id="pass-btn" type="button">✨ Fun Pass</button></div>
+  </section>
+</div>
+<div class="nudge"><span>Want a Legendary every time? The <b>Fun Pass</b> lets you pick any frame, hides the CyberMax line and works in every CyberMax game.</span><button class="btn pass sm" data-pass="nudge" type="button">See the pass</button></div>
+
+<section class="seo">
+<h2>How Pawfoil works</h2>
+<p>Pick a photo of your dog, cat, bunny, bird or any pet. Pawfoil frames it as a collectible trading card with HP, six stats (Cuteness is always high), a type and two funny moves like <i>Sock Heist</i> or <i>3 AM Zoomies</i>. Each roll draws a rarity: Common, Rare, Epic (holo) or Legendary (gold holo). Roll again until you love it, then download the HD PNG or share it.</p>
+<h3>Private: your photo stays on your device</h3>
+<p>The card is drawn in your browser. Your photo is never uploaded, stored or seen by anyone but you. No account, no email.</p>
+<h3>Free, with an optional Fun Pass</h3>
+<p>Every card is free in full HD. The optional <b>CyberMax Fun Pass</b> ($2.99/month, $19/year, or $4.99 once) lets you pick any frame (Legendary on demand), hides the small CyberMax line on the card, and unlocks extras in every CyberMax game.</p>
+<h3>FAQ</h3>
+<p><b>Can I print it?</b> Yes: the download is 750×1050 px, a standard 2.5×3.5 inch card at 300 dpi. <b>Why not an AI card generator?</b> Pawfoil uses your real photo (no strange AI faces), is instant, works offline and needs no sign-up. <b>Is it really free?</b> Yes, the HD download is free; the pass only adds extras.</p>
+<h2>More free games from CyberMax</h2>
+<div class="more"><a href="https://cybermax.cybermax-tools.workers.dev/games/kenwren/"><b>Kenwren</b><span>How well do your friends know you?</span></a><a href="https://cybermax.cybermax-tools.workers.dev/games/pathmoor/"><b>Pathmoor</b><span>Daily path puzzle</span></a><a href="https://cybermax.cybermax-tools.workers.dev/games/whirlane/"><b>Whirlane</b><span>One-tap orbit dodger</span></a></div>
+</section>
+</main>
+<footer>© 2026 CyberMax · <a href="https://cybermax.cybermax-tools.workers.dev/games/">Games</a> · <a href="https://cybermax.cybermax-tools.workers.dev/toys/">Toys</a> · <a href="https://cybermax.cybermax-tools.workers.dev/store/">Store</a> · <a href="https://cybermax.cybermax-tools.workers.dev/privacy">Privacy</a> · <a href="https://cybermax.cybermax-tools.workers.dev/terms">Terms</a></footer>
+</div>
+<script type="module" src="game.js"></script>
+</body></html>

manifest.webmanifest

@@ -0,0 +1,47 @@
+{
+ "name": "Pawfoil: Make your pet a holo trading card",
+ "short_name": "Pawfoil",
+ "description": "Make your pet a holo trading card. 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": "#1B1430",
+ "theme_color": "#1B1430",
+ "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"
+  }
+ ]
+}

style.css

@@ -1,28 +1,18 @@
-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;
-}
+/* Pawfoil layout. (c) 2026 CyberMax. */
+.wrap.wide{max-width:1040px}
+.lede{font-size:17px;margin:0 0 14px}
+.maker{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
+@media (min-width:860px){.maker{grid-template-columns:minmax(300px,380px) 1fr}.preview{position:sticky;top:12px}}
+.controls{display:flex;flex-direction:column;gap:12px}
+.photo input{position:absolute;width:1px;height:1px;opacity:0}.photo .btn{width:100%}
+.field{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
+.field input{font:inherit;font-size:18px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
+.adj label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}.adj input{width:150px}
+.pro-box{border:1.5px dashed var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
+.preview{display:flex;flex-direction:column;align-items:center;gap:10px}
+.tilt{position:relative;width:min(100%,420px);aspect-ratio:750/1050;border-radius:22px;transform-style:preserve-3d;transition:transform .12s ease-out;will-change:transform;touch-action:none}
+.tilt canvas{width:100%;height:100%;border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.35);cursor:grab;display:block}
+.holo{position:absolute;inset:0;border-radius:22px;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;background:linear-gradient(115deg,transparent 20%,rgba(255,0,170,.35) 35%,rgba(0,255,230,.35) 50%,rgba(255,230,0,.35) 65%,transparent 80%);background-size:250% 250%;transition:opacity .3s}
+.tilt.foil .holo{opacity:.55}
+.share{justify-content:center}
+.controls .chips{flex-wrap:wrap!important;overflow:visible!important;margin:0!important;padding:0!important}

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 = 'pawfoil';
+const CACHE = `cmx-${GAME}-da5d827006`;
+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", "sample.jpg", "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;
+  })));
+});