hbengine 0.2.3

package/engine-shell/host/fair.js

@@ -0,0 +1,285 @@
+/**
+ * What the shell's Provably Fair dialog (page.js) decides without a browser:
+ * the receipt as the verdict reads it, the verdict of a recomputation against
+ * the receipt (a cashed-out ladder included), the commitment a revealed seed
+ * and a rotation are held to, the words of the result line (in the player's
+ * language, strings.js) and the revealed pairs kept across rotations. Pure,
+ * so every rule is tested here; the dialog only puts the words on screen.
+ */
+import { fmtFixed, fmtView, viewUnit } from '../../engine-sdk/kit/wallet-format.js';
+import { STRINGS, counted, fill } from './strings.js';
+
+// The states a closed round has (housegames-backend internal/models/engine.go):
+// a table round and an auto-advance ladder settle at the bet; a cash-out
+// ladder is cashed out at a step, busted past one, or settled at the top.
+const STATE = /^(settled|cashed_out|busted)$/;
+const RAW = /^(0|[1-9]\d{0,19})$/;
+const HEX64 = /^[0-9a-f]{64}$/;
+export const CLIENT_SEED_MAX = 64;
+// The Seeds tab lists this many revealed pairs, newest first (the Dice modal's count).
+export const REVEALED_PAIRS_MAX = 5;
+
+// Characters, as the dialog and the server count a client seed (1–64), not
+// UTF-16 units: a seed of emoji is as long as it looks.
+export const chars = (s) => [...s].length;
+
+/** A multiplier in basis points as the game shows it: 1.97×, 12.50×, 1.2345×. */
+export function times(multBp) {
+    const n = Number(multBp) / 10000;
+    let s = (Number.isFinite(n) ? n : 0).toFixed(4).replace(/0+$/, '');
+    const dot = s.indexOf('.');
+    if (dot < 0) s += '.00';
+    else if (s.length - dot - 1 < 2) s = s.padEnd(dot + 3, '0');
+    return s + '×';
+}
+
+/**
+ * The receipt (GET /engine/v1/fairness/:roundId) as compare() reads it. A
+ * field of the wrong shape is dropped, never compared; one bad draw drops
+ * them all, since a half comparison would mislead — and says so
+ * (`unreadable`), since a comparison of nothing is not a verdict. The
+ * server seed hash is kept when it is one, to hold the revealed seed to.
+ */
+export function expectation(r) {
+    const draws = [];
+    let unreadable = !Array.isArray(r.draws);
+    for (const d of Array.isArray(r.draws) ? r.draws : []) {
+        const raw = typeof d.raw === 'string' ? d.raw : typeof d.raw === 'number' && Number.isSafeInteger(d.raw) ? String(d.raw) : null;
+        if (raw === null || !RAW.test(raw) || !Number.isInteger(d.index) || d.index < 0) {
+            draws.length = 0;
+            unreadable = true;
+            break;
+        }
+        draws.push({ raw, index: d.index, rejected: Number.isInteger(d.rejected) && d.rejected > 0 ? d.rejected : 0 });
+    }
+    return {
+        expect: draws,
+        unreadable,
+        multBp: Number.isInteger(r.multBp) && r.multBp >= 0 ? r.multBp : null,
+        kind: r.kind === 'ladder' || r.kind === 'table' ? r.kind : null,
+        state: typeof r.state === 'string' && STATE.test(r.state) ? r.state : null,
+        step: Number.isInteger(r.step) && r.step >= 0 ? r.step : null,
+        serverSeedHash: typeof r.serverSeedHash === 'string' && HEX64.test(r.serverSeedHash) ? r.serverSeedHash : null,
+    };
+}
+
+/**
+ * The bet a recomputation pays by: the receipt's when the receipt is this
+ * mode's, the mode's only bet, else its first — and then the multiplier is
+ * not the player's and is not shown (`known` false).
+ */
+export function betFor(pack, modeId, receipt) {
+    const mode = pack.manifest.modes.find((m) => m.id === modeId);
+    const bets = mode && Array.isArray(mode.bets) ? mode.bets : [];
+    if (receipt && receipt.mode === modeId && bets.some((b) => b.id === receipt.bet)) return { id: receipt.bet, known: true };
+    if (bets.length === 1) return { id: bets[0].id, known: true };
+    return { id: bets.length ? bets[0].id : null, known: false };
+}
+
+const plain = (v) => typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean';
+
+/**
+ * What a drawn row says, as the pack names it: the row's JSON when it is a
+ * string, a number or a boolean; an object of plain values as its one value
+ * (`{"hand":"paper"}` is `paper`) or as `key: value` pairs; the JSON text
+ * itself otherwise; and `row N` when the row carries no data.
+ */
+export function rowLabel(pack, draw, w = STRINGS.en) {
+    const table = pack.tables[draw.table];
+    const row = table && table.rows[draw.index];
+    const fallback = fill(w.row, { n: draw.index });
+    if (!row || row.data === null || row.data === undefined) return fallback;
+    let v;
+    try {
+        v = JSON.parse(row.data);
+    } catch {
+        return row.data;
+    }
+    if (typeof v === 'string') return v.trim() === '' ? fallback : v;
+    if (plain(v)) return String(v);
+    // A list of plain values (a slot's reel stops) reads as the values, spaced.
+    const listed = (x) => (Array.isArray(x) && x.length && x.every(plain) ? x.join(' ') : null);
+    if (listed(v) !== null) return listed(v);
+    if (v && typeof v === 'object' && !Array.isArray(v)) {
+        const entries = Object.entries(v);
+        const named = (x) => (plain(x) ? String(x) : listed(x));
+        if (entries.length && entries.every(([, x]) => named(x) !== null)) {
+            return entries.length === 1 ? named(entries[0][1]) : entries.map(([k, x]) => `${k}: ${named(x)}`).join(', ');
+        }
+    }
+    return row.data;
+}
+
+const steps = (n, w) => counted(w, n, 'step');
+
+/**
+ * The computed result, as the result line names it. A table round: its row
+ * as the pack names it, with the multiplier when the bet is known. A ladder:
+ * the rung of the step the player cashed out at (the receipt's `cashed_out`
+ * step, when the drawn path survives that far), else where the path busts,
+ * else the top rung; when the bet is not known the survival rule is not the
+ * player's, so only the number of draws is named (the draws are listed).
+ */
+export function outcome(pack, got, receipt, betKnown, w = STRINGS.en) {
+    if (got.kind !== 'ladder') {
+        const label = rowLabel(pack, got.draws[0], w);
+        return betKnown ? `${label} · ${times(got.multBp)}` : label;
+    }
+    const n = got.draws.length;
+    if (!betKnown) return counted(w, n, 'draw');
+    const rungs = Array.isArray(got.ladderBp) ? got.ladderBp : [];
+    const step = receipt && receipt.state === 'cashed_out' && Number.isInteger(receipt.step) ? receipt.step : null;
+    if (step !== null && step >= 1 && step <= got.survived && step <= rungs.length) return `${times(rungs[step - 1])} · ${fill(w.cashedOutAfter, { n: step, steps: steps(step, w) })}`;
+    if (got.busted) return `${times(0)} · ${fill(w.bustsAtStep, { n: got.survived + 1 })}`;
+    return `${times(rungs[n - 1] ?? 0)} · ${fill(w.survivesAll, { n, steps: steps(n, w) })}`;
+}
+
+/** The draws of a round in order, one line each, as the result lists them under the result line. */
+export function drawLines(pack, got, w = STRINGS.en) {
+    return got.draws.map((d, k) => `#${k + 1} → ${rowLabel(pack, d, w)}`);
+}
+
+/**
+ * The line above a round's result: its nonce, and what went in and came out,
+ * as money is shown everywhere else on the page (the Originals' wallet rule,
+ * kit/wallet-format.js): the coin at the wallet's precision with its code,
+ * or the fiat amount at the fiat's precision in a fiat display; never a bare
+ * number, never exponent notation. Without a wallet, eight decimals.
+ */
+export function roundLine(r, wallet, w = STRINGS.en) {
+    const money = (n) => (wallet ? fmtView(n, wallet) + ' ' + viewUnit(wallet) : fmtFixed(n, 8));
+    return `${fill(w.roundNonce, { n: r.nonce })} · ${money(r.amount)} → ${money(r.payout)}`;
+}
+
+/**
+ * The revealed pairs with one more: the server's `previous` on first load,
+ * then each rotation's. Newest first, never the same seed twice, at most
+ * REVEALED_PAIRS_MAX. A pair without a seed in the clear is not revealed. The
+ * maths versions its rounds were drawn on come along when the server names
+ * them (`mathHashes`, newest first), so a round of the pair verified by hand
+ * is computed against the tables it was played on.
+ */
+export function withRevealed(list, pair) {
+    if (!pair || typeof pair.serverSeed !== 'string' || !pair.serverSeed) return list;
+    if (list.some((p) => p.serverSeed === pair.serverSeed)) return list;
+    return [{
+        serverSeed: pair.serverSeed,
+        serverSeedHash: typeof pair.serverSeedHash === 'string' ? pair.serverSeedHash : '',
+        clientSeed: typeof pair.clientSeed === 'string' ? pair.clientSeed : '',
+        nonce: Number.isInteger(pair.nonce) && pair.nonce >= 0 ? pair.nonce : 0,
+        mathHashes: Array.isArray(pair.mathHashes) ? pair.mathHashes.filter((h) => typeof h === 'string' && HEX64.test(h)) : [],
+    }, ...list].slice(0, REVEALED_PAIRS_MAX);
+}
+
+/**
+ * A rotation held to the commitment shown before it: `before` the pair as
+ * the dialog showed it, `after` the server's answer, `previousSeedHash` the
+ * sha256 of the seed the answer reveals. The retired pair must be the one
+ * shown (else nothing else can be held: another window rotated first, or
+ * the server retired a pair the player never saw); then the new hash must
+ * be the next hash promised, and the revealed seed must hash to the hash it
+ * was played under. The differences are word keys (strings.js); none means
+ * the house honoured what it showed. Nothing shown before: nothing to hold.
+ */
+export function rotationDifferences(before, after, previousSeedHash) {
+    const d = [];
+    if (!before || typeof before.serverSeedHash !== 'string' || !HEX64.test(before.serverSeedHash)) return d;
+    const prev = after && after.previous;
+    if (!prev || prev.serverSeedHash !== before.serverSeedHash) {
+        d.push('pairNotShown');
+        return d;
+    }
+    if (typeof before.nextServerSeedHash === 'string' && HEX64.test(before.nextServerSeedHash) && after.serverSeedHash !== before.nextServerSeedHash) d.push('nextHashBroken');
+    if (typeof prev.serverSeed === 'string' && previousSeedHash && previousSeedHash !== before.serverSeedHash) d.push('previousHashBroken');
+    return d;
+}
+
+// A ladder's multiplier against the receipt's state and step. The draws fix
+// the hidden path (how many steps survive) but not where the player stopped:
+// `cashed_out` pays the rung of the step cashed out at, which must be one
+// the path survives; `busted` pays nothing and happens at the first step
+// past the survived ones; `settled` is the top rung (or nothing, for an
+// auto-advance ladder that busted). A receipt without a state (handed over
+// by an older server) is held to the weaker rule: what the draws give, or
+// any rung within the survived steps.
+function ladderDifferences(expect, got, differences) {
+    const rungs = Array.isArray(got.ladderBp) ? got.ladderBp : [];
+    const top = got.draws.length;
+    const want = expect.multBp;
+    const step = typeof expect.step === 'number' ? expect.step : null;
+    const en = STRINGS.en;
+    const rungWithin = (bp) => bp !== 0 && rungs.indexOf(bp) >= 0 && rungs.indexOf(bp) + 1 <= got.survived;
+    if (expect.state === 'cashed_out') {
+        if (step === null) {
+            if (!rungWithin(want)) differences.push(`multiplier ${times(want)} on the receipt is not a rung within the ${steps(got.survived, en)} survived`);
+        } else if (step < 1 || step > got.survived) {
+            differences.push(`cashed out at step ${step} on the receipt, but these draws survive ${steps(got.survived, en)}`);
+        } else if (rungs[step - 1] !== want) {
+            differences.push(`rung ${step} of the ladder pays ${times(rungs[step - 1])}, the receipt says ${times(want)}`);
+        }
+        return;
+    }
+    if (expect.state === 'busted') {
+        if (want !== 0) differences.push(`a busted ladder pays ${times(0)}, the receipt says ${times(want)}`);
+        if (!got.busted) differences.push(`these draws survive every step; the receipt says the ladder busted`);
+        else if (step !== null && step !== got.survived + 1) differences.push(`busted at step ${step} on the receipt; these draws bust at step ${got.survived + 1}`);
+        return;
+    }
+    if (expect.state === 'settled') {
+        const give = got.busted ? 0 : rungs[top - 1];
+        if (want !== give) differences.push(`multiplier ${times(give)} here, ${times(want)} on the receipt`);
+        if (step !== null && step !== top) differences.push(`settled at step ${step} on the receipt; the ladder has ${steps(top, en)}`);
+        return;
+    }
+    if (got.multBp !== want && !rungWithin(want)) {
+        differences.push(`multiplier ${times(want)} on the receipt is neither what these draws give (${times(got.multBp)}) nor a rung within the ${steps(got.survived, en)} survived`);
+    }
+}
+
+/**
+ * A recomputation against the receipt: `expect` as expectation() read it (the
+ * draws, and the multiplier, kind, state and step when the receipt named
+ * them), `got` as play() returned it, `pack` the maths pack as the dialog
+ * fetched it ({version, recomputed}: the version the receipt names and the
+ * hash of the bytes the server actually served), and `seedHash` the sha256
+ * of the server seed the draws were computed from. Every difference is
+ * named; none means the receipt is right. A pack that does not hash to the
+ * receipt's version is the first difference: the draws below it are then
+ * checked against tables nobody committed to. A seed that does not hash to
+ * the receipt's commitment is the next: the draws then follow from a seed
+ * the house never committed to. A receipt whose draws or multiplier could
+ * not be read is `unreadable`: nothing was compared, so there is no verdict
+ * either way, and the dialog says it could not verify rather than that the
+ * round does not match.
+ */
+export function compare(expect, got, pack, seedHash) {
+    const differences = [];
+    let unreadable = false;
+    if (pack && pack.version && pack.recomputed !== pack.version) {
+        differences.push(`the maths pack served does not hash to the version on the receipt (${pack.version}): its bytes hash to ${pack.recomputed || 'nothing'}`);
+    }
+    if (expect.serverSeedHash && seedHash && seedHash !== expect.serverSeedHash) {
+        differences.push('the revealed server seed does not hash to the commitment on the receipt');
+    }
+    if (expect.unreadable) {
+        differences.push("the receipt's draws could not be read");
+        unreadable = true;
+    }
+    const draws = expect.expect || [];
+    if (draws.length && draws.length !== got.draws.length) differences.push(`the receipt has ${draws.length} draw${draws.length === 1 ? '' : 's'}, the maths gives ${got.draws.length}`);
+    draws.forEach((w, k) => {
+        const g = got.draws[k];
+        if (!g) return;
+        if (g.raw.toString() !== w.raw) differences.push(`draw ${k + 1}: raw ${g.raw} here, ${w.raw} on the receipt`);
+        if (g.index !== w.index) differences.push(`draw ${k + 1}: row ${g.index} here, ${w.index} on the receipt`);
+        if ((g.rejected || 0) !== w.rejected) differences.push(`draw ${k + 1}: ${g.rejected || 0} rejected here, ${w.rejected} on the receipt`);
+    });
+    if (expect.multBp === null) {
+        differences.push('the receipt names no multiplier');
+        unreadable = true;
+    } else if (expect.multBp !== undefined) {
+        if (got.kind === 'ladder') ladderDifferences(expect, got, differences);
+        else if (got.multBp !== expect.multBp) differences.push(`multiplier ${times(got.multBp)} here, ${times(expect.multBp)} on the receipt`);
+    }
+    return { ok: differences.length === 0, differences, unreadable };
+}

package/engine-shell/host/fonts/SOURCE.json

@@ -0,0 +1,11 @@
+{
+  "repo": "housegames-platform",
+  "path": "packages/dice-frontend/src/styles/00-fonts.css",
+  "commit": "80f074b6881cd6cd0ebfa29a3178031891b60589",
+  "files": {
+    "figtree-400.woff2": "d67327996a1af9b9f4f11a699e3ad0cf438ee92ba7e8413e4f76cc359036e9af",
+    "figtree-500.woff2": "4e53f9b5fedc06f18833c414eddbd25b9a4ed0205b0ba8785826bf1280b3e011",
+    "figtree-600.woff2": "d6341d9bc5546efde18285bbef8263824853fb2cd1f057e1057dbe2a9e1a05a5",
+    "red-hat-display-700.woff2": "3e118e963b677cf0f6eea25a0c06eb00a05afd975f886cd86b8f85419a345bf8"
+  }
+}

package/engine-shell/host/index.html

@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
+<title>House Engine</title>
+<style>
+  /* The brand faces, the ones every House Original ships (dice-frontend
+     00-fonts.css, subset by the Originals' gen-assets.mjs), served from this
+     origin: the site's fonts do not cross into the shell's frame, and the
+     shell's policy allows no data: font. */
+  @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(./fonts/figtree-400.woff2) format('woff2'); }
+  @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(./fonts/figtree-500.woff2) format('woff2'); }
+  @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(./fonts/figtree-600.woff2) format('woff2'); }
+  @font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(./fonts/red-hat-display-700.woff2) format('woff2'); }
+  :root { color-scheme: dark; --bg:#041015; --s1:#0B1920; --s3:#0D2A38; --b:#0D2531; --b2:#113A4C; --t1:#F9F9FB; --t2:#8F96A8; --brand:#02F8F8; --brand6:#0AD4D4; --primary:#C4F4F1; --ok:#47D496; --err:#F41F50; }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--t1); font: 400 14px/20px Figtree, system-ui, sans-serif; touch-action: pan-x pan-y; overscroll-behavior: none; }
+  #stage { position: relative; height: 100%; min-height: 560px; }
+  #game { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
+  .over { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); }
+  .over[hidden] { display: none; }
+  .loader { display: grid; gap: 14px; justify-items: center; width: min(320px, 80vw); }
+  .h { width: 44px; height: 44px; border-radius: 10px; background: var(--s1); border: 1px solid var(--b2); display: grid; place-items: center; font: 700 26px/1 'Red Hat Display', system-ui, sans-serif; color: var(--brand); animation: pulse 1.4s ease-in-out infinite; }
+  @keyframes pulse { 50% { opacity: .55; } }
+  @media (prefers-reduced-motion: reduce) { .h { animation: none; } }
+  .bar { width: 100%; height: 4px; border-radius: 999px; background: var(--s1); overflow: hidden; }
+  .bar i { display: block; height: 100%; width: 0; background: var(--brand6); transition: width .2s; }
+  .muted { color: var(--t2); font-size: 12px; line-height: 18px; }
+  .panel { background: var(--s1); border: 1px solid var(--b); border-radius: 12px; padding: 20px; max-width: 420px; display: grid; gap: 10px; }
+  .panel h2 { margin: 0; font: 700 18px/24px 'Red Hat Display', system-ui, sans-serif; }
+  .panel p { margin: 0; color: var(--t2); }
+  dialog { background: var(--s1); color: var(--t1); border: 1px solid var(--b2); border-radius: 12px; padding: 20px; width: min(480px, 92vw); max-height: 92vh; overflow: auto; }
+  dialog::backdrop { background: rgba(4,16,21,.7); }
+  dialog h2 { margin: 0 0 12px; font: 700 18px/24px 'Red Hat Display', system-ui, sans-serif; }
+  dialog h3 { margin: 0; font: 700 14px/20px 'Red Hat Display', system-ui, sans-serif; }
+  dialog p { margin: 0 0 10px; }
+  button { appearance: none; border: 0; background: var(--primary); color: #041015; font: 600 14px/20px Figtree, system-ui, sans-serif; padding: 8px 16px; border-radius: 8px; cursor: pointer; margin-top: 14px; }
+  button:disabled { opacity: .5; cursor: default; }
+  button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+  /* The Provably Fair dialog: the House Originals' modal, frame included
+     (dice-frontend Modal.svelte, 12-shell.css .hd-s-modal): 420 px at most
+     with 16 px gutters, a head row with the title and an X, the body
+     scrolling inside, a dimmed blurred backdrop that closes it on a press
+     and release outside. Full-width stacked fields with the label above,
+     monospace values that scroll inside their field (a 64-character seed
+     never widens the window), 48 px primary buttons, 44 px tap targets;
+     colour means something only on the result line (green matched, red
+     not). Fits a 360 px phone. */
+  #fair { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: hidden; display: none; flex-direction: column; border: 1px solid var(--b2); border-radius: 12px; box-shadow: 0 32px 96px rgba(0,0,0,.6); }
+  #fair[open] { display: flex; }
+  /* The dialog itself takes initial focus (tabindex=-1, as Dice's modal), so
+     no control lights its focus ring on open; the dialog shows none. */
+  #fair:focus, #fair:focus-visible { outline: none; }
+  #fair::backdrop { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
+  .fr-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 16px; flex: 0 0 auto; }
+  .fr-head h2 { flex: 1 1 auto; margin: 0; font: 700 16px/24px 'Red Hat Display', system-ui, sans-serif; }
+  .fr-x { flex: 0 0 auto; margin: 0; width: 44px; height: 44px; padding: 0; background: none; color: var(--t2); border-radius: 8px; display: grid; place-items: center; }
+  .fr-x:hover { background: var(--s3); color: var(--t1); }
+  .fr-x svg { width: 18px; height: 18px; display: block; }
+  .fr-body { padding: 0 16px 16px; overflow-y: auto; min-height: 0; }
+  .fr-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--b); margin-bottom: 14px; }
+  .fr-tab { flex: 1 1 0; position: relative; margin: 0; min-height: 44px; padding: 12px 16px; background: none; border: 0; border-radius: 0; color: var(--t2); font: 500 14px/20px Figtree, system-ui, sans-serif; }
+  .fr-tab:hover { color: var(--t1); }
+  .fr-tab[aria-selected="true"] { color: var(--t1); }
+  .fr-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); border-radius: 1px; }
+  .fr-pane { display: flex; flex-direction: column; gap: 12px; }
+  .fr-pane[hidden] { display: none; }
+  .fr-field { display: flex; flex-direction: column; gap: 6px; }
+  .fr-field[hidden] { display: none; }
+  .fr-label { font: 600 14px/20px Figtree, system-ui, sans-serif; color: var(--t1); }
+  .fr-field input, .fr-field select { width: 100%; min-width: 0; height: 48px; padding: 0 12px; background: var(--bg); color: var(--t1); border: 1px solid var(--b2); border-radius: 8px; font: 400 13px/20px ui-monospace, Menlo, monospace; }
+  .fr-field input:read-only { color: var(--t2); }
+  .fr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .fr-nonce { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+  .fr-nonce b { font: 700 14px/20px ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
+  .fr-primary { margin: 0; height: 48px; padding: 0 18px; flex: 0 0 auto; }
+  .fr-primary.wide { width: 100%; }
+  /* The Originals' secondary button (blackjack7 90-ds-components.css
+     .hl-btn-secondary): the one action on a pane that is not the primary. */
+  .fr-secondary { margin: 0; height: 48px; padding: 0 16px; width: 100%; background: var(--b2); border: 1px solid rgba(9,102,125,.15); border-radius: 8px; color: var(--t1); font: 700 14px/20px Figtree, system-ui, sans-serif; }
+  .fr-secondary:hover:not(:disabled) { background: var(--b); }
+  .fr-secondary:active:not(:disabled) { background: #0E202A; }
+  .fr-secondary:disabled { background: rgba(9,102,125,.15); border-color: transparent; color: var(--t2); opacity: 1; }
+  .fr-secondary[hidden] { display: none; }
+  .fr-note { margin: 0; color: var(--t2); font-size: 12px; line-height: 18px; }
+  .fr-note:empty { display: none; }
+  .fr-revealed { display: flex; flex-direction: column; gap: 8px; }
+  .fr-rev { display: flex; flex-direction: column; gap: 2px; min-height: 44px; margin: 0; padding: 10px 12px; background: var(--bg); color: var(--t1); border: 1px solid var(--b2); border-radius: 10px; text-align: left; font: inherit; }
+  .fr-rev:hover, .fr-rev:focus-visible { border-color: var(--brand); }
+  .fr-rev-seed { font: 400 13px/18px ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .fr-rev-meta { color: var(--t2); font-size: 12px; line-height: 18px; }
+  .fr-round { margin: 0; font: 600 14px/20px Figtree, system-ui, sans-serif; overflow-wrap: anywhere; }
+  .fr-round[hidden] { display: none; }
+  .fr-result { min-height: 20px; color: var(--t2); overflow-wrap: anywhere; }
+  .fr-result.ok { color: var(--ok); }
+  .fr-result.bad { color: var(--err); }
+  .fr-draws { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 400 13px/18px ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
+  .fr-draws:empty { display: none; }
+  #fair-open { position: fixed; right: 12px; bottom: 12px; margin: 0; min-height: 44px; padding: 6px 12px; font-size: 12px; background: var(--s3); color: var(--t1); border: 1px solid var(--b2); z-index: 2; }
+  #fair-open[hidden] { display: none; }
+  /* The shell's autoplay control: rounds left and Stop, in this document over
+     the game frame, where the game can neither cover it nor press it. A pill at
+     the top, so it sits over no game's own bet row; a 44 px Stop. */
+  .auto { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 16px; background: rgba(4,16,21,.92); border: 1px solid var(--b2); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.45); color: var(--t1); font: 600 13px/20px Figtree, system-ui, sans-serif; white-space: nowrap; }
+  .auto[hidden] { display: none; }
+  .auto-stop { margin: 0; min-height: 44px; min-width: 72px; padding: 0 16px; border-radius: 999px; background: var(--primary); color: #041015; font: 600 14px/20px Figtree, system-ui, sans-serif; }
+  /* The autoplay confirmation: the shell's own dialog, outside the game frame.
+     A session of bets is never one in-game click away — the player approves
+     exactly these terms here, on the shell's own Start, which the game cannot
+     reach, cover or pre-fill, and which is armed only a moment after the
+     dialog appears (page.js). Same modal frame as the reality check. */
+  #ap { width: min(400px, calc(100vw - 32px)); }
+  #ap:focus, #ap:focus-visible { outline: none; }
+  #ap h2 { margin: 0 0 4px; }
+  .ap-sub { margin: 0 0 14px; color: var(--t2); font-size: 13px; line-height: 18px; }
+  .ap-terms { margin: 0 0 18px; display: grid; gap: 0; }
+  .ap-terms > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--b); }
+  .ap-terms > div[hidden] { display: none; }
+  .ap-terms > div:last-child { border-bottom: 0; }
+  .ap-terms dt { color: var(--t2); font-size: 14px; }
+  .ap-terms dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
+  .ap-actions { display: flex; gap: 10px; }
+  .ap-actions button { flex: 1; margin: 0; min-height: 48px; }
+  .ap-secondary { background: var(--b2); color: var(--t1); }
+  .ap-secondary:hover { background: var(--b); }
+  .ap-primary { background: var(--primary); color: #041015; }
+  .sandbox-test-toggle { position: absolute; top: 10px; right: 10px; z-index: 4; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--b2); border-radius: 10px; background: rgba(4,16,21,.92); color: var(--t1); }
+  .sandbox-test-panel { position: absolute; top: 60px; right: 10px; z-index: 4; width: min(320px, calc(100vw - 20px)); max-height: calc(100vh - 70px); overflow: auto; display: grid; gap: 10px; padding: 14px; background: rgba(11,25,32,.98); border: 1px solid var(--b2); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
+  .sandbox-test-panel[hidden] { display: none; }
+  .sandbox-test-panel h2, .sandbox-test-panel h3 { margin: 0; font: 700 16px/22px 'Red Hat Display', system-ui, sans-serif; }
+  .sandbox-test-panel h3 { font-size: 13px; }
+  .sandbox-test-section { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--b); }
+  .sandbox-test-panel button { margin: 0; min-height: 36px; padding: 6px 10px; font-size: 12px; }
+  .sandbox-test-tiers, .sandbox-test-fault { display: grid; gap: 6px; }
+  .sandbox-test-scenarios, .sandbox-test-scenario-group { display: grid; gap: 6px; }
+  .sandbox-test-scenario-group { padding-top: 4px; }
+  .sandbox-test-scenario-group strong { color: var(--t2); font-size: 12px; }
+  .sandbox-test-summary { margin: 4px 0 0; padding-left: 18px; color: var(--t2); font-size: 12px; }
+  .sandbox-test-fault { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
+  .sandbox-test-fault small { grid-column: 1 / -1; grid-row: 2; }
+  .sandbox-test-fault span { color: var(--t2); text-transform: capitalize; }
+  .sandbox-test-fault button { white-space: nowrap; }
+  .sandbox-test-panel input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; background: var(--bg); color: var(--t1); border: 1px solid var(--b2); border-radius: 8px; }
+  .sandbox-test-status { margin: 0; min-height: 20px; color: var(--t2); font-size: 12px; overflow-wrap: anywhere; }
+  .sandbox-test-instruction { margin: 0; min-height: 20px; color: var(--t1); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+  @media (max-width: 420px) {
+    .sandbox-test-running .sandbox-test-panel { top: 60px; bottom: auto; max-height: none; }
+    .sandbox-test-running .sandbox-test-panel h2,
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-scenarios-section > h3,
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-section:not(.sandbox-test-scenarios-section),
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-scenarios-section > .sandbox-test-scenarios,
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-scenarios-section > button:first-of-type,
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-summary,
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-status,
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-reload { display: none; }
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-instruction { display: block; }
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-scenarios-section { display: flex; flex-direction: row; gap: 6px; border-top: 0; padding-top: 0; }
+    .sandbox-test-running .sandbox-test-panel .sandbox-test-scenarios-section > button { flex: 1; }
+  }
+  @media (max-width: 390px) {
+    .sandbox-test-fault { gap: 4px; }
+    .sandbox-test-fault button { padding-left: 6px; padding-right: 6px; }
+  }
+</style>
+</head>
+<body>
+<div id="stage">
+  <iframe id="game" title="game" sandbox="allow-scripts allow-same-origin" allow="autoplay" referrerpolicy="no-referrer" hidden></iframe>
+  <div class="over" id="loading"><div class="loader"><div class="h">H</div><div class="bar"><i id="progress"></i></div><div class="muted" id="loading-text">Starting</div></div></div>
+  <div class="over" id="failed" hidden><div class="panel"><h2>Game unavailable</h2><p id="failed-text"></p></div></div>
+  <div class="auto" id="auto" hidden><span id="auto-text" role="status" aria-live="polite"></span><button type="button" class="auto-stop" id="auto-stop">Stop</button></div>
+</div>
+<dialog id="fair" aria-labelledby="fair-title" tabindex="-1">
+  <div class="fr-head">
+    <h2 id="fair-title">Provably Fair</h2>
+    <button type="button" class="fr-x" id="fair-x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
+  </div>
+  <div class="fr-body">
+    <div class="fr-tabs" role="tablist" id="fair-tabs" aria-label="Provably Fair">
+      <button type="button" class="fr-tab" id="fair-tab-seeds" role="tab" aria-selected="true" aria-controls="fair-seeds">Seeds</button>
+      <button type="button" class="fr-tab" id="fair-tab-verify" role="tab" aria-selected="false" aria-controls="fair-verify">Verify</button>
+    </div>
+    <section class="fr-pane" id="fair-seeds" role="tabpanel" aria-labelledby="fair-tab-seeds">
+      <label class="fr-field"><span class="fr-label" id="fair-l-client">Client Seed</span><input id="fair-client" maxlength="64" autocomplete="off" spellcheck="false"></label>
+      <label class="fr-field"><span class="fr-label" id="fair-l-hash">Server Seed (Hashed)</span><input id="fair-hash" readonly spellcheck="false"></label>
+      <label class="fr-field"><span class="fr-label" id="fair-l-next">Next Server Seed (Hashed)</span><input id="fair-next" readonly spellcheck="false"></label>
+      <div class="fr-row">
+        <span class="fr-nonce"><span class="fr-label" id="fair-l-nonce">Nonce</span> <b id="fair-nonce">0</b></span>
+        <button type="button" class="fr-primary" id="fair-rotate" disabled>Rotate seed pair</button>
+      </div>
+      <p class="fr-note" id="fair-seeds-note">The active server seed stays hidden until the pair rotates — its hash is the commitment.</p>
+      <p class="fr-note" id="fair-status" role="status" aria-live="polite"></p>
+      <div class="fr-revealed" id="fair-revealed"><p class="fr-note">No revealed pairs yet</p></div>
+    </section>
+    <section class="fr-pane" id="fair-verify" role="tabpanel" aria-labelledby="fair-tab-verify" hidden>
+      <p class="fr-round" id="fair-round" hidden></p>
+      <label class="fr-field"><span class="fr-label" id="fair-l-v-server">Server Seed (Revealed)</span><input id="fair-v-server" autocomplete="off" spellcheck="false"></label>
+      <label class="fr-field"><span class="fr-label" id="fair-l-v-client">Client Seed</span><input id="fair-v-client" autocomplete="off" spellcheck="false"></label>
+      <label class="fr-field"><span class="fr-label" id="fair-l-v-nonce">Nonce</span><input id="fair-v-nonce" inputmode="numeric" autocomplete="off"></label>
+      <label class="fr-field" id="fair-v-mode-field" hidden><span class="fr-label" id="fair-l-v-mode">Mode</span><select id="fair-v-mode"></select></label>
+      <button type="button" class="fr-primary wide" id="fair-verify-run">Verify</button>
+      <div class="fr-result" id="fair-result" aria-live="polite"></div>
+      <ol class="fr-draws" id="fair-draws"></ol>
+      <p class="fr-note" id="fair-v-note"></p>
+      <button type="button" class="fr-secondary" id="fair-reveal" hidden>Rotate seed pair</button>
+    </section>
+  </div>
+</dialog>
+<button type="button" id="fair-open" hidden>Provably Fair</button>
+<dialog id="rc"><h2>Reality check</h2><p id="rc-text"></p><form method="dialog"><button>Continue playing</button></form></dialog>
+<dialog id="ap" aria-labelledby="ap-title" tabindex="-1">
+  <h2 id="ap-title">Start autoplay?</h2>
+  <p class="ap-sub" id="ap-sub">The game asked to play rounds on its own. It runs only if you start it here, and you can Stop any time.</p>
+  <dl class="ap-terms">
+    <div><dt id="ap-l-bet">Bet</dt><dd id="ap-bet"></dd></div>
+    <div><dt id="ap-l-rounds">Rounds</dt><dd id="ap-rounds"></dd></div>
+    <div><dt id="ap-l-stake">Stake each round</dt><dd id="ap-stake"></dd></div>
+    <div><dt id="ap-l-total">Total staked, up to</dt><dd id="ap-total"></dd></div>
+    <div id="ap-profit-row" hidden><dt id="ap-l-profit">Stop at profit</dt><dd id="ap-profit"></dd></div>
+    <div><dt id="ap-l-loss">Stop at loss</dt><dd id="ap-loss"></dd></div>
+  </dl>
+  <div class="ap-actions">
+    <button type="button" id="ap-cancel" class="ap-secondary">Cancel</button>
+    <button type="button" id="ap-start" class="ap-primary" disabled>Start</button>
+  </div>
+</dialog>
+<script type="module" src="./page.js"></script>
+</body>
+</html>