@funpixel/tools 0.0.0-stage → 0.1.1

package/dist/vendor/verify/src/page/hud.js

@@ -0,0 +1,261 @@
+// The HUD as painted this instant (`funtools look --hud`): every floating DOM
+// piece that paints over the play (fixed, absolute or sticky; a background,
+// an image, an svg or its own text) and every text node a Pixi stage draws
+// (a canvas HUD, a "×3" pop over the play), with its box in CSS px, its text,
+// size and colour, and whether it looks transient (a toast, a banner, a pop:
+// animating, or named or worded like one). Read-only; the caller
+// samples it several times during play and judges cover, contrast, overlap
+// with the actors and pile-ups from the frames.
+//
+// Part of @funpixel/verify: one function expression of one argument. See
+// mechanic_check.js for the calling convention.
+//
+// a = { max: pieces per layer }
+//
+// Answers JSON: viewport { w, h }, play (the largest canvas's rect or null),
+// pieces [{ layer: dom | canvas, name, x, y, w, h, text, px, colour: [r,g,b] | null,
+// outline: [r,g,b] | null (a text stroke, or a tight text shadow: the designer's own
+// contrast partner), transient, control, and on DOM pieces font (the computed family
+// stack, texts only), fade (its opacity multiplied down the tree, 0–1: a notice caught mid
+// fade-in or fade-out reads below 1) and plate ({ rgb, alpha, image, drawn } | null: the piece's own fill, image
+// true when a background or border image dresses it, drawn when that image is a picture, not only a
+// gradient) and glyph (an svg's path data, so a
+// stock icon set can be recognised) and fade_ms (texts only: how long the text stays before it is
+// gone, from its data-fpx-ms or the shortest finite animation on it or an ancestor that ends at
+// opacity 0; null when it stays) }], engine (pixi | none for the canvas layer),
+// board ({ x, y, w, h, source: declared | gesture | scene } | null: the play itself, not the
+// screen: an element marked data-fpx-play, else the element a swipe moves (data-fpx-gesture)
+// when it is smaller than the screen, else the Pixi container holding the player up to the
+// largest one still smaller than the screen), pad ([{ key, x, y, w, h }]: on-screen direction
+// controls, data-fpx-touch = an arrow or WASD), gestures ([{ keys, x, y, w, h }]) and touch_controls
+// ([{ name, x, y, w, h }]: every visible on-screen play control, a stick, a pad, an action button:
+// data-fpx-gesture, .touch-only, a stick/joystick/dpad class, or data-fpx-touch on a key that is not
+// the sound, pause or menu button; on a desktop with no touch these should not show).
+async (a) => {
+  const MAX = a.max || 60;
+  const W = innerWidth, H = innerHeight;
+  const out = { viewport: { w: W, h: H }, play: null, pieces: [], engine: 'none', board: null, pad: [], gestures: [], touch_controls: [] };
+  const TRANSIENT = /toast|banner|popup|pop\b|pops|combo|float|flash|notice|alert|chain|streak|bonus|achoo|burst|callout|tag/i;
+  const WORDED = /[×x]\s?\d|\+\d|!$/;
+  const rgb = (c) => {
+    const m = String(c || '').match(/rgba?\(([^)]+)\)/);
+    if (!m) return null;
+    const p = m[1].split(/[ ,/]+/).filter(Boolean).map(Number);
+    return p.length >= 3 && (p[3] === undefined || p[3] > 0.05) ? [p[0], p[1], p[2]].map(Math.round) : null;
+  };
+  const plateOf = (s) => {
+    const m = String(s.backgroundColor || '').match(/rgba?\(([^)]+)\)/);
+    const p = m ? m[1].split(/[ ,/]+/).filter(Boolean).map(Number) : [];
+    const alpha = p.length >= 3 ? (p[3] === undefined ? 1 : p[3]) : 0;
+    const image = (s.backgroundImage && s.backgroundImage !== 'none') || (s.borderImageSource && s.borderImageSource !== 'none');
+    if (alpha <= 0.05 && !image) return null;
+    // drawn: a picture (url()) dresses it, not only a gradient: a gradient clipped to system text is still system text (one game's round-4 title).
+    const drawn = /url\(/.test(`${s.backgroundImage} ${s.borderImageSource}`);
+    return { rgb: alpha > 0.05 ? [p[0], p[1], p[2]].map(Math.round) : null, alpha: Math.round(alpha * 100) / 100, image: !!image, drawn };
+  };
+  // A stroke of a pixel or more, else the first shadow blurred 4 px or less: the ink's own edge.
+  const outlineOf = (s) => {
+    if (parseFloat(s.webkitTextStrokeWidth) >= 1) { const c = rgb(s.webkitTextStrokeColor); if (c) return c; }
+    for (const sh of String(s.textShadow || '').split(/,(?![^(]*\))/)) {
+      const c = rgb(sh), px = (sh.replace(/rgba?\([^)]*\)/, '').match(/-?[\d.]+px/g) || []).map(parseFloat);
+      if (c && (px[2] ?? 0) <= 4) return c;
+    }
+    return null;
+  };
+  // Seen by a player: laid out, on the screen, and hidden by neither itself nor
+  // an ancestor. Opacity multiplies down the tree and visibility inherits, so a
+  // faded screen's children are faded too (one game: a chapter card at
+  // opacity 0 counted as HUD all chapter, a hidden title's text was flagged in
+  // every play view; another: a label inside a faded-out button).
+  // checkVisibility answers where the browser has it; the
+  // walk up the ancestors is the fallback, and also catches a stack of
+  // part-faded layers that multiplies to nothing.
+  const fadeOf = (el) => {
+    let alpha = 1;
+    for (let e = el; e && e.nodeType === 1 && alpha > 0.05; e = e.parentElement) {
+      const s = getComputedStyle(e);
+      alpha *= s.display === 'none' ? 0 : Number(s.opacity);
+    }
+    return alpha;
+  };
+  const shown = (el) => {
+    if (typeof el.checkVisibility === 'function' && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return false;
+    const v = getComputedStyle(el).visibility;
+    if (v === 'hidden' || v === 'collapse') return false;
+    return fadeOf(el) > 0.05;
+  };
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) return false;
+    const s = getComputedStyle(el);
+    return s.display !== 'none' && shown(el) && r.bottom > 0 && r.right > 0 && r.top < H && r.left < W;
+  };
+  const nameOf = (el, text) => {
+    const tag = el.id ? `#${el.id}` : (typeof el.className === 'string' && el.className.trim()
+      ? `${el.tagName.toLowerCase()}.${el.className.trim().split(/\s+/)[0]}` : el.tagName.toLowerCase());
+    const label = (el.getAttribute('aria-label') || text || '').replace(/\s+/g, ' ').slice(0, 40);
+    return label ? `${tag} "${label}"` : tag;
+  };
+
+  let canvas = null, area = 0;
+  for (const c of document.querySelectorAll('canvas')) {
+    const r = c.getBoundingClientRect();
+    if (visible(c) && r.width * r.height > area) { area = r.width * r.height; canvas = c; }
+  }
+  if (canvas) { const r = canvas.getBoundingClientRect(); out.play = { x: r.left, y: r.top, w: r.width, h: r.height }; }
+
+  // --- DOM pieces --------------------------------------------------------------
+  const ownText = (el) => [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join(' ').replace(/\s+/g, ' ').trim();
+  const floating = (el) => { for (let e = el; e && e !== document.body; e = e.parentElement) { const p = getComputedStyle(e).position; if (p === 'fixed' || p === 'absolute' || p === 'sticky') return true; } return false; };
+  const paints = (el, text) => {
+    const s = getComputedStyle(el);
+    return !!text || (rgb(s.backgroundColor) !== null) || s.backgroundImage !== 'none' || el.tagName === 'IMG' || el.tagName.toLowerCase() === 'svg';
+  };
+  // How long a text stays: a declared life (data-fpx-ms, the scaffold's toasts) or a fade-out animation.
+  const lifeOf = (el) => {
+    let best = null;
+    for (let e = el; e && e !== document.body; e = e.parentElement) {
+      const said = e.getAttribute && Number(e.getAttribute('data-fpx-ms'));
+      if (said > 0) best = best === null ? said : Math.min(best, said);
+      if (typeof e.getAnimations !== 'function') continue;
+      for (const an of e.getAnimations()) {
+        const fx = an.effect;
+        if (!fx || typeof fx.getComputedTiming !== 'function' || typeof fx.getKeyframes !== 'function') continue;
+        const t = fx.getComputedTiming(), kf = fx.getKeyframes(), last = kf[kf.length - 1];
+        if (!Number.isFinite(t.endTime) || !last || last.opacity === undefined || Number(last.opacity) > 0.05) continue;
+        best = best === null ? t.endTime : Math.min(best, t.endTime);
+      }
+    }
+    return best === null ? null : Math.round(best);
+  };
+  let dom = 0;
+  const letters = new Map(); // a word set one span per letter (an animated title) is one piece
+  for (const el of document.querySelectorAll('body *')) {
+    if (dom >= MAX) break;
+    if (el === canvas || (canvas && el.contains(canvas)) || el.closest('svg') !== null && el.tagName.toLowerCase() !== 'svg') continue;
+    if (!visible(el) || !floating(el)) continue;
+    const text = ownText(el);
+    if (!paints(el, text)) continue;
+    const r = el.getBoundingClientRect();
+    // A large full-screen layer (a card's dimmer) is a screen, not a HUD piece.
+    if (r.width * r.height > 0.6 * W * H && !text) continue;
+    const s = getComputedStyle(el);
+    const named = `${el.id} ${typeof el.className === 'string' ? el.className : ''}`;
+    const moving = typeof el.getAnimations === 'function' && el.getAnimations().some((x) => x.playState === 'running');
+    const control = el.matches('button, a[href], [role="button"], [data-fpx-touch], input, select');
+    const piece = {
+      layer: 'dom', name: nameOf(el, text), x: r.left, y: r.top, w: r.width, h: r.height, text: text.slice(0, 60),
+      px: text ? Math.round(parseFloat(s.fontSize) * 10) / 10 : 0, colour: text ? rgb(s.color) : null, outline: text ? outlineOf(s) : null,
+      transient: !control && (TRANSIENT.test(named) || WORDED.test(text) || moving), control,
+      font: text ? String(s.fontFamily || '').slice(0, 120) : '', plate: plateOf(s), fade: Math.round(fadeOf(el) * 100) / 100,
+      glyph: el.tagName.toLowerCase() === 'svg' ? [...el.querySelectorAll('path')].map((q) => q.getAttribute('d') || '').join(' ').slice(0, 400) : '',
+      fade_ms: text ? lifeOf(el) : null,
+    };
+    // Letters flow inside their word; a pop that places itself (fixed, absolute) stays its own piece.
+    const flows = s.position === 'static' || s.position === 'relative';
+    if (text && text.length <= 2 && flows && el.parentElement && el.parentElement !== document.body) {
+      const group = letters.get(el.parentElement) || [];
+      group.push(piece);
+      letters.set(el.parentElement, group);
+      continue;
+    }
+    out.pieces.push(piece);
+    dom++;
+  }
+  for (const [parent, group] of letters) {
+    if (group.length === 1) { out.pieces.push(group[0]); continue; }
+    const r = parent.getBoundingClientRect();
+    const text = (parent.textContent || '').replace(/\s+/g, ' ').trim();
+    out.pieces.push({ ...group[0], name: nameOf(parent, text), x: r.left, y: r.top, w: r.width, h: r.height, text: text.slice(0, 60), transient: group.some((g) => g.transient) });
+  }
+
+  // --- The board, the pad and the swipe -------------------------------------------
+  const DIRECTION = /^(Arrow(Up|Down|Left|Right)|Key[WASD])$/;
+  const rectOf = (el) => { const r = el.getBoundingClientRect(); return { x: r.left, y: r.top, w: r.width, h: r.height }; };
+  for (const el of document.querySelectorAll('[data-fpx-touch]')) {
+    const key = el.getAttribute('data-fpx-touch') || '';
+    if (DIRECTION.test(key) && visible(el)) out.pad.push({ key, ...rectOf(el) });
+  }
+  for (const el of document.querySelectorAll('[data-fpx-gesture]')) {
+    if (visible(el)) out.gestures.push({ keys: String(el.getAttribute('data-fpx-gesture') || '').split(/[\s,]+/).filter(Boolean), ...rectOf(el) });
+  }
+  // Play controls drawn for a thumb; the sound, pause and menu buttons (and Enter, a start) belong on every screen.
+  const UI_KEY = /^(KeyM|KeyP|Escape|Enter|Tab|F\d+)$/;
+  const PLAY_CONTROL = '[data-fpx-gesture], [data-fpx-touch], .touch-only, [class~="stick"], [class*="joystick"], [class~="dpad"], [class~="pad"]';
+  const seen = new Set();
+  for (const el of document.querySelectorAll(PLAY_CONTROL)) {
+    if (out.touch_controls.length >= 12) break;
+    if (el.matches('[data-fpx-touch]') && !el.matches('[data-fpx-gesture], .touch-only') && UI_KEY.test(el.getAttribute('data-fpx-touch') || '')) continue;
+    // Count a group once: a control inside one already listed is part of it.
+    if ([...seen].some((p) => p.contains(el))) continue;
+    if (!visible(el)) continue;
+    seen.add(el);
+    out.touch_controls.push({ name: nameOf(el, ''), ...rectOf(el) });
+  }
+  const marked = [...document.querySelectorAll('[data-fpx-play]')].find(visible);
+  if (marked) out.board = { ...rectOf(marked), source: 'declared' };
+  const swiped = out.gestures.find((g) => g.w * g.h < 0.9 * W * H);
+  if (!out.board && swiped) out.board = { x: swiped.x, y: swiped.y, w: swiped.w, h: swiped.h, source: 'gesture' };
+
+  // --- Pixi text (a HUD drawn in the canvas, pops over the play) ----------------
+  const app = window.__PIXI_APP__ || (window.__PIXI_DEVTOOLS__ && window.__PIXI_DEVTOOLS__.app) || null;
+  const stage = (app && app.stage) || window.__PIXI_STAGE__ || null;
+  if (stage && Array.isArray(stage.children) && canvas) {
+    out.engine = 'pixi';
+    const screen = (app && (app.screen || (app.renderer && app.renderer.screen))) || { x: 0, y: 0, width: W, height: H };
+    const rect = canvas.getBoundingClientRect();
+    const sx = rect.width / (screen.width || rect.width || 1), sy = rect.height / (screen.height || rect.height || 1);
+    const hex = (v) => (typeof v === 'number' ? [(v >> 16) & 255, (v >> 8) & 255, v & 255] : typeof v === 'string' && /^#[0-9a-f]{6}$/i.test(v) ? [1, 3, 5].map((i) => parseInt(v.slice(i, i + 2), 16)) : null);
+    let n = 0;
+    const walk = (o, alpha) => {
+      if (n >= MAX) return;
+      const al = alpha * (o.alpha ?? 1);
+      if (o.visible === false || o.renderable === false || al <= 0.05) return;
+      if (typeof o.text === 'string' && o.text.trim()) {
+        try {
+          const b = o.getBounds();
+          const bx = b.x ?? b.minX, by = b.y ?? b.minY, bw = b.width ?? (b.maxX - b.minX), bh = b.height ?? (b.maxY - b.minY);
+          const st = o.style || {};
+          const fill = hex(st.fill && typeof st.fill === 'object' && !Array.isArray(st.fill) ? st.fill.color : Array.isArray(st.fill) ? st.fill[0] : st.fill);
+          const scale = Math.abs((o.worldTransform && o.worldTransform.d) || 1) * sy;
+          const stroke = st.stroke && typeof st.stroke === 'object' ? st.stroke : { color: st.stroke, width: st.strokeThickness };
+          const outline = (Number(stroke.width) || 0) >= 1 ? hex(stroke.color) : null;
+          const text = o.text.replace(/\s+/g, ' ').trim();
+          const name = o.label || o.name || '';
+          out.pieces.push({
+            layer: 'canvas', name: `${name || 'text'} "${text.slice(0, 40)}"`, x: rect.left + (bx - screen.x) * sx, y: rect.top + (by - screen.y) * sy, w: bw * sx, h: bh * sy,
+            text: text.slice(0, 60), px: Math.round((Number(st.fontSize) || 0) * scale * 10) / 10, colour: fill, outline,
+            transient: TRANSIENT.test(name) || WORDED.test(text), control: false,
+          });
+          n++;
+        } catch (e) { /* a node that cannot measure itself */ }
+        return;
+      }
+      for (const c of o.children || []) walk(c, al);
+    };
+    walk(stage, 1);
+    // The board from the scene: the player's containers, up to the largest still under 90% of the screen.
+    if (!out.board) {
+      const PREFIX = /^player(?:$|[-_:.#\s])/i;
+      const nm = (o) => String(o.label || o.name || '');
+      let player = null, loose = null;
+      const find = (o, depth) => {
+        if (player || depth > 40) return;
+        const role = o.userData && typeof o.userData.role === 'string' ? o.userData.role.toLowerCase() : '';
+        if (role === 'player' || PREFIX.test(nm(o))) { player = o; return; }
+        if (!loose && /player|hero|avatar/i.test(nm(o))) loose = o;
+        for (const c of o.children || []) find(c, depth + 1);
+      };
+      find(stage, 0);
+      const box = (o) => { try { const b = o.getBounds(); return { x: b.x ?? b.minX, y: b.y ?? b.minY, w: b.width ?? (b.maxX - b.minX), h: b.height ?? (b.maxY - b.minY) }; } catch (e) { return null; } };
+      let best = null;
+      for (let p = (player || loose) && (player || loose).parent; p && p !== stage; p = p.parent) {
+        const b = box(p);
+        if (!b || b.w * sx * b.h * sy >= 0.9 * W * H) break;
+        best = b;
+      }
+      if (best) out.board = { x: rect.left + (best.x - screen.x) * sx, y: rect.top + (best.y - screen.y) * sy, w: best.w * sx, h: best.h * sy, source: 'scene' };
+    }
+  }
+  return JSON.stringify(out);
+}

package/dist/vendor/verify/src/page/inventory.js

@@ -0,0 +1,15 @@
+// What the game declares: its verbs (window.__FPX_VERBS__) and the fields of its
+// state (window.__FPX_STATE__()). 'none' when it declares neither.
+//
+// Part of @funpixel/verify: one function expression of one argument, loaded by
+// funpixel-browser (include_str!) and by local `funtools verify`. See
+// mechanic_check.js for the calling convention.
+(a) => {
+  const v = window.__FPX_VERBS__;
+  const s = window.__FPX_STATE__;
+  if (!v && typeof s !== 'function') return 'none';
+  let fields = [];
+  try { fields = Object.keys(s ? s() : {}); } catch (e) { fields = []; }
+  const verbs = v ? Object.keys(v) : [];
+  return JSON.stringify({ verbs, fields });
+}

package/dist/vendor/verify/src/page/layout.js

@@ -0,0 +1,378 @@
+// Layout metrics of the screen on show (plan m10 `audit_screens`): run on each
+// declared view after capture_view.js entered and held it. Nothing is pressed.
+// Hit areas and the HUD-over-play grid are phone_check.js's rules (the same
+// control selector, the same 5x5 grid over the middle of the play area), so a
+// view reads the way mobile_check reads the first one.
+//
+// Part of @funpixel/verify: one function expression of one argument. See
+// mechanic_check.js for the calling convention.
+//
+// a = { min_text_px, min_target, safe: { top, right, bottom, left }, max_items, pieces? }
+//   pieces — what is measured against what: 'hud' (the default, and all the
+//          hosted audit sends) or 'text' (funtools motion, a title card or a
+//          loop): `overlaps` pairs every element with text of its own, in flow
+//          or not (a title card's lines moved onto each other by a transform),
+//          and only text and controls count as `clipped` (a decorative shape
+//          bleeding off the frame is a design, not a cut)
+//   safe — the insets a phone keeps clear (notch, home bar); the larger of
+//          these and the page's own env(safe-area-inset-*) is used.
+//          capture_view.js emulates the same insets first, so the page's
+//          env() reports them and a game that pads with it is measured as
+//          laid out (emulated: true in the answer)
+//
+// Answers JSON, each list capped at max_items with a total beside it:
+//   viewport, safe (the insets used), emulated, play (the play canvas's rect
+//   or null),
+//   letterbox — the bars around a play area that does not fill the viewport
+//   small_text   — visible text under min_text_px: { name, px }
+//   small_targets — controls under min_target on a side: { name, w, h }
+//   overlaps     — HUD elements whose PAINT covers another's: { a, b, px }.
+//                  Measured by points over the boxes' intersection: a point
+//                  counts when both are hit there (clip-path and rounded
+//                  corners respected) and both paint there (a background, an
+//                  image's opaque pixel, a glyph line), so four clip-path
+//                  wedges of a d-pad whose boxes cross do not overlap;
+//                  nor do one widget's layers (absolute siblings in a parent
+//                  that clips them, no control, no text: a meter's fill and trail)
+//   clipped      — HUD, controls or text cut by the viewport edge: { name, side };
+//                  not what a scroll container (or the page) scrolls to on that
+//                  side: below-the-fold content is reached by scrolling;
+//                  and a control cut by what it sits in (a clip-path, overflow
+//                  hidden, a mask), under 80% of it shown: { name, side: 'clip',
+//                  shown (%), by (the ancestor) } — its own shape set aside
+//   unsafe       — controls or text inside the safe-area insets: { name, side },
+//                  with the same scroll exemption
+//   outside_play — HUD or controls in the letterbox bars, off the play area
+//   hud          — { observed, points, covered, by }: the play area covered
+async (a) => {
+  const W = innerWidth, H = innerHeight;
+  const max = a.max_items || 12;
+  const HIT = 'button, a[href], [role="button"], [data-fpx-touch], input, select';
+  // Seen by a player: laid out, on the screen, and hidden by neither itself nor
+  // an ancestor. Opacity multiplies down the tree and visibility inherits, so a
+  // faded screen's children are faded too (one game: a chapter card at
+  // opacity 0 counted as HUD all chapter, a hidden title's text was flagged in
+  // every play view; another: a label inside a faded-out button).
+  // checkVisibility answers where the browser has it; the
+  // walk up the ancestors is the fallback, and also catches a stack of
+  // part-faded layers that multiplies to nothing.
+  const shown = (el) => {
+    if (typeof el.checkVisibility === 'function' && !el.checkVisibility({ opacityProperty: true, visibilityProperty: true })) return false;
+    const v = getComputedStyle(el).visibility;
+    if (v === 'hidden' || v === 'collapse') return false;
+    let alpha = 1;
+    for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+      const s = getComputedStyle(e);
+      alpha *= s.display === 'none' ? 0 : Number(s.opacity);
+      if (alpha <= 0.05) return false;
+    }
+    return true;
+  };
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) return false;
+    const s = getComputedStyle(el);
+    return s.display !== 'none' && shown(el)
+      && r.bottom > 0 && r.right > 0 && r.top < H && r.left < W;
+  };
+  const nameOf = (el) => {
+    const n = el.getAttribute('aria-label') || el.getAttribute('data-fpx-touch') || el.getAttribute('title')
+      || (el.textContent || '').trim() || el.getAttribute('value') || '';
+    const label = n.replace(/\s+/g, ' ').slice(0, 40);
+    const tag = el.id ? `#${el.id}` : (typeof el.className === 'string' && el.className.trim()
+      ? `${el.tagName.toLowerCase()}.${el.className.trim().split(/\s+/)[0]}` : el.tagName.toLowerCase());
+    return label ? `${tag} "${label}"` : tag;
+  };
+  const list = () => ({ total: 0, items: [] });
+  const add = (l, item) => { l.total++; if (l.items.length < max) l.items.push(item); };
+
+  // The safe area: the caller's phone insets, or the page's own when larger.
+  const probe = document.createElement('div');
+  probe.style.cssText = 'position:fixed;visibility:hidden;pointer-events:none;'
+    + 'padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)';
+  document.body.appendChild(probe);
+  const ps = getComputedStyle(probe);
+  const own = { top: parseFloat(ps.paddingTop) || 0, right: parseFloat(ps.paddingRight) || 0, bottom: parseFloat(ps.paddingBottom) || 0, left: parseFloat(ps.paddingLeft) || 0 };
+  probe.remove();
+  const given = a.safe || {};
+  const safe = {};
+  for (const k of ['top', 'right', 'bottom', 'left']) safe[k] = Math.max(own[k], Number(given[k]) || 0);
+
+  let canvas = null, area = 0;
+  for (const c of document.querySelectorAll('canvas')) {
+    const r = c.getBoundingClientRect();
+    if (visible(c) && r.width * r.height > area) { area = r.width * r.height; canvas = c; }
+  }
+  const pr = canvas ? canvas.getBoundingClientRect() : null;
+  const play = pr ? { x: Math.round(pr.left), y: Math.round(pr.top), w: Math.round(pr.width), h: Math.round(pr.height) } : null;
+  const letterbox = pr ? {
+    top: Math.max(0, Math.round(pr.top)), bottom: Math.max(0, Math.round(H - pr.bottom)),
+    left: Math.max(0, Math.round(pr.left)), right: Math.max(0, Math.round(W - pr.right)),
+  } : null;
+
+  const ownText = (el) => [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim());
+  const floating = (el) => { const p = getComputedStyle(el).position; return p === 'fixed' || p === 'absolute' || p === 'sticky'; };
+  // A full-screen opaque layer on top (a "turn your phone sideways" card, a modal backdrop) hides
+  // what is under it: a player cannot see those, so they are not measured against it or each other.
+  const opaque = (el) => {
+    const m = getComputedStyle(el).backgroundColor.match(/rgba?\(([^)]+)\)/);
+    return !!m && Number((m[1].split(',')[3] ?? '1').trim()) >= 0.85;
+  };
+  const onPage = [...document.querySelectorAll('body *')].filter((el) => el !== canvas && !el.contains(canvas) && visible(el));
+  const veils = onPage.filter((el) => {
+    const r = el.getBoundingClientRect();
+    return floating(el) && opaque(el) && r.width >= 0.95 * W && r.height >= 0.95 * H;
+  });
+  const veiled = (el) => {
+    if (!veils.length) return false;
+    const r = el.getBoundingClientRect();
+    const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
+    return !!hit && veils.some((v) => v !== el && !v.contains(el) && !el.contains(v) && v.contains(hit));
+  };
+  const all = onPage.filter((el) => !veiled(el));
+  // Where text sits is its glyphs, not its box: a full-bleed card's centred line is not in the notch.
+  const textBox = (el) => {
+    const range = document.createRange();
+    let box = null;
+    for (const n of el.childNodes) {
+      if (n.nodeType !== 3 || !n.textContent.trim()) continue;
+      range.selectNodeContents(n);
+      const r = range.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) continue;
+      box = box ? { top: Math.min(box.top, r.top), left: Math.min(box.left, r.left), bottom: Math.max(box.bottom, r.bottom), right: Math.max(box.right, r.right) } : { top: r.top, left: r.left, bottom: r.bottom, right: r.right };
+    }
+    return box;
+  };
+  const paints = (el) => {
+    const s = getComputedStyle(el);
+    const bg = s.backgroundColor.match(/rgba?\(([^)]+)\)/);
+    const alpha = bg ? Number((bg[1].split(',')[3] ?? '1').trim()) : 0;
+    return alpha > 0.1 || s.backgroundImage !== 'none' || el.tagName === 'IMG' || el.tagName.toLowerCase() === 'svg' || ownText(el);
+  };
+  const controls = all.filter((el) => el.matches(HIT));
+  const texts = all.filter((el) => ownText(el) && !el.closest('svg'));
+  const hud = all.filter((el) => floating(el) && paints(el));
+
+  const small_text = list(), small_targets = list(), overlaps = list(), clipped = list(), unsafe = list(), outside_play = list();
+  for (const el of texts) {
+    const px = parseFloat(getComputedStyle(el).fontSize) || 0;
+    if (px > 0 && px < a.min_text_px) add(small_text, { name: nameOf(el), px: Math.round(px * 10) / 10 });
+  }
+  for (const el of controls) {
+    const r = el.getBoundingClientRect();
+    if (r.width < a.min_target || r.height < a.min_target) add(small_targets, { name: nameOf(el), w: Math.round(r.width), h: Math.round(r.height) });
+  }
+  // Where an element paints: its box when it has a background, border or is
+  // an svg; an image's opaque pixels (its box when they cannot be read); its
+  // glyph lines when it is text on nothing.
+  const glyphRects = (el) => {
+    const out = [];
+    const range = document.createRange();
+    for (const n of el.childNodes) {
+      if (n.nodeType !== 3 || !n.textContent.trim()) continue;
+      range.selectNodeContents(n);
+      for (const r of range.getClientRects()) if (r.width > 0 && r.height > 0) out.push(r);
+    }
+    return out;
+  };
+  const alphaOf = new Map();
+  const imageAlpha = (img) => {
+    if (alphaOf.has(img)) return alphaOf.get(img);
+    let read = null;
+    try {
+      const b = img.getBoundingClientRect();
+      const w = Math.max(1, Math.min(128, Math.round(b.width))), h = Math.max(1, Math.min(128, Math.round(b.height)));
+      const c = document.createElement('canvas');
+      c.width = w; c.height = h;
+      const ctx = c.getContext('2d');
+      ctx.drawImage(img, 0, 0, w, h);
+      const d = ctx.getImageData(0, 0, w, h).data;
+      read = { w, h, d };
+    } catch (e) { read = null; } // another origin's image: its box stands for it
+    alphaOf.set(img, read);
+    return read;
+  };
+  const boxPaint = (el) => {
+    const s = getComputedStyle(el);
+    const bg = s.backgroundColor.match(/rgba?\(([^)]+)\)/);
+    const alpha = bg ? Number((bg[1].split(',')[3] ?? '1').trim()) : 0;
+    const border = ['Top', 'Right', 'Bottom', 'Left'].some((k) => parseFloat(s[`border${k}Width`]) > 0 && !/rgba\([^)]*,\s*0\)|transparent/.test(s[`border${k}Color`]));
+    return alpha > 0.1 || s.backgroundImage !== 'none' || border || el.tagName.toLowerCase() === 'svg';
+  };
+  const paintOf = (el) => {
+    if (boxPaint(el)) return { kind: 'box' };
+    if (el.tagName === 'IMG') return { kind: 'img' };
+    const rects = glyphRects(el);
+    return rects.length ? { kind: 'text', rects } : { kind: 'box' };
+  };
+  const paintsAt = (el, paint, x, y) => {
+    if (paint.kind === 'text') return paint.rects.some((r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+    if (paint.kind === 'img') {
+      const px = imageAlpha(el);
+      if (!px) return true;
+      const b = el.getBoundingClientRect();
+      const i = Math.min(px.w - 1, Math.max(0, Math.floor(((x - b.left) / b.width) * px.w)));
+      const j = Math.min(px.h - 1, Math.max(0, Math.floor(((y - b.top) / b.height) * px.h)));
+      return px.d[(j * px.w + i) * 4 + 3] > 25;
+    }
+    return true;
+  };
+  const paintedArea = (el, paint) => {
+    if (paint.kind === 'text') return paint.rects.reduce((s, r) => s + r.width * r.height, 0);
+    const b = el.getBoundingClientRect();
+    return b.width * b.height;
+  };
+  // Hit-testing honours clip-path and rounded corners; HUD layers are often
+  // pointer-events: none, so every element is made hittable while we look.
+  const hittable = document.createElement('style');
+  hittable.textContent = '* { pointer-events: auto !important; }';
+  // Two HUD pieces overlap when neither holds the other and the area where
+  // both paint is more than a sliver (16 px², a tenth of the smaller paint).
+  const textOnly = a.pieces === 'text';
+  const pairs = textOnly ? texts : hud;
+  if (pairs.length > 1) document.head.appendChild(hittable);
+  try {
+    const paintMap = new Map(pairs.map((el) => [el, paintOf(el)]));
+    const hits = (el, stack) => stack.some((s) => s === el || el.contains(s));
+    // Layers of one widget (a meter's fill over its lagging trail, the starter's kit-bar): siblings set absolute
+    // inside a parent that clips them, neither a control nor holding any text. They are drawn to sit on each other;
+    // two controls or two labels that collide in such a parent still count.
+    const layer = (el) => getComputedStyle(el).position === 'absolute' && !el.matches(HIT) && !el.querySelector(HIT) && !(el.textContent || '').trim();
+    const clips = (el) => { const s = getComputedStyle(el); return s.overflowX !== 'visible' || s.overflowY !== 'visible' || s.clipPath !== 'none'; };
+    const layers = (x, y) => !!x.parentElement && x.parentElement === y.parentElement && layer(x) && layer(y) && clips(x.parentElement);
+    for (let i = 0; i < pairs.length; i++) {
+      for (let j = i + 1; j < pairs.length; j++) {
+        const x = pairs[i], y = pairs[j];
+        if (x.contains(y) || y.contains(x) || layers(x, y)) continue;
+        const p = x.getBoundingClientRect(), q = y.getBoundingClientRect();
+        const left = Math.max(p.left, q.left, 0), top = Math.max(p.top, q.top, 0);
+        const ox = Math.min(p.right, q.right, W) - left, oy = Math.min(p.bottom, q.bottom, H) - top;
+        if (ox <= 4 || oy <= 4) continue;
+        const px = paintMap.get(x), py = paintMap.get(y);
+        const nx = Math.min(16, Math.ceil(ox / 2)), ny = Math.min(16, Math.ceil(oy / 2));
+        let both = 0;
+        for (let u = 0; u < nx; u++) {
+          for (let v = 0; v < ny; v++) {
+            const sx = left + ((u + 0.5) * ox) / nx, sy = top + ((v + 0.5) * oy) / ny;
+            if (!paintsAt(x, px, sx, sy) || !paintsAt(y, py, sx, sy)) continue;
+            const stack = document.elementsFromPoint(sx, sy);
+            if (hits(x, stack) && hits(y, stack)) both++;
+          }
+        }
+        const area = (both / (nx * ny)) * ox * oy;
+        const smaller = Math.min(paintedArea(x, px), paintedArea(y, py));
+        if (area > 16 && area > 0.1 * smaller) add(overlaps, { a: nameOf(x), b: nameOf(y), px: Math.round(area) });
+      }
+    }
+  } finally {
+    hittable.remove();
+  }
+  // A side the player can scroll to: a scroll container (or the page) that
+  // scrolls on that axis holds the element, and nothing fixed sits between.
+  const scrollsTo = (el, side) => {
+    const vertical = side === 'top' || side === 'bottom';
+    const scrolls = (p) => {
+      const s = getComputedStyle(p);
+      const o = vertical ? s.overflowY : s.overflowX;
+      return /auto|scroll/.test(o) && (vertical ? p.scrollHeight > p.clientHeight + 1 : p.scrollWidth > p.clientWidth + 1);
+    };
+    for (let p = el; p && p !== document.body && p !== document.documentElement; p = p.parentElement) {
+      if (p !== el && scrolls(p)) return true;
+      if (getComputedStyle(p).position === 'fixed') return false;
+    }
+    const root = document.scrollingElement || document.documentElement;
+    const hidden = [document.documentElement, document.body].some((e) => e && /hidden|clip/.test(getComputedStyle(e)[vertical ? 'overflowY' : 'overflowX']));
+    return !hidden && (vertical ? root.scrollHeight > innerHeight + 1 : root.scrollWidth > innerWidth + 1);
+  };
+  const edges = (r) => ({ top: r.top, left: r.left, bottom: H - r.bottom, right: W - r.right });
+  const seen = new Set();
+  for (const el of textOnly ? [...controls, ...texts] : [...controls, ...texts, ...hud]) {
+    if (seen.has(el)) continue;
+    seen.add(el);
+    const box = el.matches(HIT) ? el.getBoundingClientRect() : ownText(el) ? textBox(el) || el.getBoundingClientRect() : el.getBoundingClientRect();
+    const e = edges(box);
+    const cut = Object.keys(e).find((k) => e[k] < -1 && !scrollsTo(el, k));
+    if (cut) { add(clipped, { name: nameOf(el), side: cut }); continue; }
+    if (!el.matches(HIT) && !ownText(el)) continue;
+    const inset = Object.keys(e).find((k) => safe[k] > 0 && e[k] < safe[k] - 1 && !scrollsTo(el, k));
+    if (inset) add(unsafe, { name: nameOf(el), side: inset });
+  }
+  // A control cut by an ancestor (one game, 9 Oct: a clip-path on the end card's paper tag cut its
+  // "Title" button half off on a tall card, and every check passed it): points over the part of the
+  // control on the screen are hit-tested with its OWN clip-path and corners set aside (its shape is
+  // its design), so a point that misses it was cut by something it sits in (a clip-path, overflow
+  // hidden or clip, a mask). Under 80% of it shown is clipped, side 'clip', with the share shown
+  // and the ancestor that cut it.
+  const cutStyle = document.createElement('style');
+  cutStyle.textContent = '* { pointer-events: auto !important; } '
+    + HIT.split(',').map((s) => s.trim()).join(', ') + ' { clip-path: none !important; border-radius: 0 !important; -webkit-mask: none !important; mask: none !important; }';
+  const cutter = (el) => {
+    for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+      const s = getComputedStyle(p);
+      if ((s.clipPath && s.clipPath !== 'none') || /hidden|clip/.test(s.overflow + s.overflowX + s.overflowY)
+        || (s.maskImage && s.maskImage !== 'none') || (s.webkitMaskImage && s.webkitMaskImage !== 'none')) {
+        // The card by its tag and classes (its text is the control's own words and more).
+        const cls = typeof p.className === 'string' ? p.className.trim().split(/\s+/).filter(Boolean).slice(0, 2) : [];
+        return p.id ? `#${p.id}` : `${p.tagName.toLowerCase()}${cls.map((c) => `.${c}`).join('')}`;
+      }
+    }
+    return null;
+  };
+  const cutCandidates = controls.filter((el) => !clipped.items.some((i) => i.name === nameOf(el)));
+  if (cutCandidates.length) document.head.appendChild(cutStyle);
+  try {
+    for (const el of cutCandidates) {
+      const r = el.getBoundingClientRect();
+      const left = Math.max(r.left, 0) + 1, top = Math.max(r.top, 0) + 1;
+      const w = Math.min(r.right, W) - 1 - left, h = Math.min(r.bottom, H) - 1 - top;
+      if (w < 4 || h < 4) continue;
+      const N = 6;
+      let hit = 0, all = 0;
+      for (let u = 0; u < N; u++) {
+        for (let v = 0; v < N; v++) {
+          const sx = left + ((u + 0.5) * w) / N, sy = top + ((v + 0.5) * h) / N;
+          all++;
+          if (document.elementsFromPoint(sx, sy).some((s) => s === el || el.contains(s))) hit++;
+        }
+      }
+      const shown = all ? hit / all : 1;
+      // Cut only by what hides it for good (a clip-path, overflow hidden or clip, a mask): a scroller shows the rest.
+      const by = shown < 0.8 ? cutter(el) : null;
+      if (by) add(clipped, { name: nameOf(el), side: 'clip', shown: Math.round(shown * 100), by });
+    }
+  } finally {
+    cutStyle.remove();
+  }
+  if (pr && letterbox && (letterbox.top + letterbox.bottom + letterbox.left + letterbox.right) > 8) {
+    for (const el of new Set([...controls, ...hud])) {
+      const r = el.getBoundingClientRect();
+      const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
+      if (cx < pr.left || cx > pr.right || cy < pr.top || cy > pr.bottom) add(outside_play, { name: nameOf(el) });
+    }
+  }
+
+  const cover = { observed: false, points: 0, covered: 0, by: [] };
+  if (pr) {
+    cover.observed = true;
+    const layers = hud.filter((el) => !el.matches(HIT) && !el.closest(HIT));
+    const grid = [0.2, 0.35, 0.5, 0.65, 0.8];
+    for (const fx of grid) {
+      for (const fy of grid) {
+        const x = pr.left + pr.width * fx, y = pr.top + pr.height * fy;
+        cover.points++;
+        const over = layers.find((el) => { const b = el.getBoundingClientRect(); return x >= b.left && x <= b.right && y >= b.top && y <= b.bottom; });
+        if (over) {
+          cover.covered++;
+          const n = nameOf(over);
+          if (cover.by.length < 6 && !cover.by.includes(n)) cover.by.push(n);
+        }
+      }
+    }
+  }
+
+  return JSON.stringify({
+    viewport: { w: W, h: H }, safe, emulated: !!window.__FPX_SAFE_AREA__, play, letterbox,
+    counts: { controls: controls.length, texts: texts.length, hud: hud.length },
+    small_text, small_targets, overlaps, clipped, unsafe, outside_play, hud: cover,
+  });
+}