gamekit777 0.1.0

package/dev-host/table-server.ts

@@ -0,0 +1,194 @@
+/* 表模型的本地服务端：按权重从建好的表里抽一行，再 restore() 还原。
+ *
+ * 这就是真平台的开奖方式。能在本地跑它，才能在发布前抓到 restore 契约违反
+ * （「玩家看到连成三条线，余额却没动」那一类）——以前的假服务端现算 round()，
+ * restore 一次都不跑，作者第一次发现问题是在发布之后。
+ *
+ * 抽行链路照抄 packages/backend/src/services/bet.ts 的 recompute()：
+ *   createRng(seed, `gklt/v1/${contentHash}`) → sampleBelow(rng, totalWeight) → 定位行 → winCents
+ * 四道校验照抄 remote.ts。种子链是本地的反向哈希链，承诺语义与平台一致。 */
+import { HEADER_BYTES, ROW_BYTES, decodeHeader, fromBase64, readRow, type LutRow } from '../lut/index.ts';
+import { SAMPLER_ID, winCents } from '../protocol/index.ts';
+import {
+  Sha256, createRng, locateRow, randomSeed, sampleBelow, seedHash, sha256, toHex, utf8,
+  type GameDefinition, type RestoreInput, type RngSeed,
+} from '../sdk/index.ts';
+import {
+  DEFAULT_BALANCE, DEFAULT_LIMITS, type Check, type PlaceResult, type PlatformServer, type PlayInput, type WalletRef, type WalletState,
+} from './platform-server.ts';
+
+export interface LoadedTable {
+  mode: string;
+  contentHash: string;
+  totalWeight: bigint;
+  betCostCenti: number;
+  declaredRtpPpm: number;
+  rows: LutRow[];
+  /** cumulative[i] = Σ weight[0..i]，抽行用二分 */
+  cumulative: bigint[];
+  books: Map<number, Uint8Array> | null;
+  /** 从字节推的统计，面板显示用 */
+  stats: { computedRtpPpm: number; hitRatePpm: number; maxPayoutCenti: number; distinctPayouts: number };
+}
+
+export interface TableServerOptions<C, O> {
+  spec: Pick<GameDefinition<C, O>, 'restore' | 'modeOf' | 'normalize' | 'validate'>;
+  /** 闭包持有可变引用：换表时换 Map 内容，接口不动 */
+  tables: () => ReadonlyMap<string, LoadedTable>;
+  /** 表还没有时怎么办。不给就报错 */
+  ensure?: (mode: string) => Promise<void>;
+  reload?: () => Promise<void>;
+  wallet?: WalletRef;
+  chainLength?: number;
+}
+
+const next = (s: string): string => toHex(sha256(utf8(s)));
+
+/** 本地反向哈希链。s_{k-1} = sha256(s_k)，揭示 s_n 就是对 s_{n+1} 的承诺 */
+function makeChain(length: number): string[] {
+  const seeds = new Array<string>(length + 1);
+  seeds[length] = randomSeed(32);
+  for (let k = length; k > 0; k--) seeds[k - 1] = next(seeds[k]!);
+  return seeds;
+}
+
+export function parseTable(
+  mode: string, bytes: Uint8Array, books: readonly { simId: number; frames: string }[] | null,
+): LoadedTable {
+  const h = decodeHeader(bytes);
+  if ('problem' in h) throw new Error(`${mode} 的表头坏了：${h.problem.message}`);
+  const dv = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const rows: LutRow[] = [];
+  const cumulative: bigint[] = [];
+  let acc = 0n;
+  let hit = 0n, maxP = 0;
+  let weighted = 0n;
+  const distinct = new Set<number>();
+  for (let i = 0; i < h.header.rowCount; i++) {
+    const r = readRow(dv, HEADER_BYTES + i * ROW_BYTES, { simId: 0, payoutCenti: 0, weight: 0 });
+    rows.push({ ...r });
+    acc += BigInt(r.weight);
+    cumulative.push(acc);
+    if (r.payoutCenti > 0) hit += BigInt(r.weight);
+    if (r.payoutCenti > maxP) maxP = r.payoutCenti;
+    weighted += BigInt(r.weight) * BigInt(r.payoutCenti);
+    distinct.add(r.payoutCenti);
+  }
+  const total = BigInt(h.header.totalWeight);
+  const den = total * BigInt(h.header.betCostCenti);
+  return {
+    mode, contentHash: new Sha256().update(bytes).hex(), totalWeight: total, betCostCenti: h.header.betCostCenti,
+    declaredRtpPpm: h.header.declaredRtpPpm, rows, cumulative,
+    books: books ? new Map(books.map((b) => [b.simId, fromBase64(b.frames)])) : null,
+    stats: {
+      computedRtpPpm: den > 0n ? Number((2n * weighted * 1_000_000n + den) / (2n * den)) : 0,
+      hitRatePpm: total > 0n ? Number((2n * hit * 1_000_000n + total) / (2n * total)) : 0,
+      maxPayoutCenti: maxP, distinctPayouts: distinct.size,
+    },
+  };
+}
+
+/** 二分定位：第一个 cumulative > r 的行。<5000 行时对着 sdk 的规范实现断言 */
+function locate(t: LoadedTable, r: bigint): number {
+  let lo = 0, hi = t.cumulative.length - 1;
+  while (lo < hi) { const mid = (lo + hi) >> 1; if (t.cumulative[mid]! > r) hi = mid; else lo = mid + 1; }
+  if (t.rows.length < 5_000) {
+    const ref = locateRow(t.rows.map((x) => x.weight), r);
+    if (ref !== lo) throw new Error(`二分定位 ${lo} 与规范实现 ${ref} 不一致——这是 dev-host 的 bug`);
+  }
+  return lo;
+}
+
+export function tableServer<C, O>(o: TableServerOptions<C, O>): PlatformServer<C, O> {
+  const { spec } = o;
+  const wallet = o.wallet ?? { balance: DEFAULT_BALANCE };
+  const chain = makeChain(o.chainLength ?? 2_000);
+  let nonce = 0;
+  const state = (): WalletState => ({ balance: wallet.balance, currency: 'CNY', decimals: 2, jackpot: null });
+
+  const play = async (input: PlayInput<C>): Promise<PlaceResult<C, O>> => {
+    const fail = (error: string): PlaceResult<C, O> => ({ ok: false, error });
+    const config = spec.normalize(input.config);
+    const issues = spec.validate(config);
+    if (issues.length) return fail(Object.values(issues[0]!.message)[0] ?? '参数不合法');
+    if (input.bet <= 0 || input.bet % 100 !== 0) return fail('注额必须是 100 分（1 元）的整数倍——那是平台记账的前提');
+    if (input.bet > wallet.balance) return fail('余额不足');
+
+    let mode: string;
+    try { mode = spec.modeOf(config); } catch (e) { return fail(e instanceof Error ? e.message : String(e)); }
+    if (!o.tables().has(mode) && o.ensure) {
+      try { await o.ensure(mode); } catch (e) { return fail(`建表失败：${e instanceof Error ? e.message : String(e)}`); }
+    }
+    const t = o.tables().get(mode);
+    if (!t) return fail(`mode ${mode} 还没建表（已有：${[...o.tables().keys()].join('、') || '无'}）`);
+
+    const checks: Check[] = [];
+    let rowIndex: number;
+    let seed: RngSeed;
+    let draw: { target: string; words: string[] } | null = null;
+
+    if (input.simId !== undefined) {
+      rowIndex = t.rows.findIndex((r) => r.simId === input.simId);
+      if (rowIndex < 0) return fail(`表 ${mode} 里没有 simId ${input.simId}`);
+      seed = { server: chain[nonce + 1]!, client: input.clientSeed, nonce };
+      // 不伪造一条通过的校验：定点复现没走抽样，就说没走
+      checks.push({ label: '定点复现，本局未走抽样', ok: true, detail: `simId ${input.simId} → 第 ${rowIndex} 行` });
+    } else {
+      if (nonce + 1 >= chain.length) return fail('本地种子链用完了，刷新页面重开一条');
+      const serverSeed = chain[nonce + 1]!;
+      const commitment = chain[nonce]!;
+      seed = { server: serverSeed, client: input.clientSeed, nonce };
+      const rng = createRng(seed, `${SAMPLER_ID}/${t.contentHash}`);
+      const d = sampleBelow(rng, t.totalWeight);
+      rowIndex = locate(t, d.value);
+      draw = { target: d.value.toString(), words: d.words };
+
+      const revealed = seedHash(serverSeed);
+      if (revealed !== commitment) return fail(`承诺链断了：sha256(种子)=${revealed.slice(0, 16)}… ≠ 承诺 ${commitment.slice(0, 16)}…`);
+      checks.push({ label: '揭示的种子哈希得上一局公布的承诺', ok: true, detail: `${revealed.slice(0, 16)}…` });
+      const before = rowIndex === 0 ? 0n : t.cumulative[rowIndex - 1]!;
+      const after = t.cumulative[rowIndex]!;
+      if (!(before <= d.value && d.value < after)) return fail(`靶点 ${d.value} 不在中奖行 [${before}, ${after}) 内`);
+      checks.push({ label: '靶点落在中奖行的累积权重区间内', ok: true, detail: `${before} ≤ ${d.value} < ${after}` });
+    }
+    nonce++;
+
+    const row = t.rows[rowIndex]!;
+    const payout = winCents(input.bet, row.payoutCenti);
+    checks.push({ label: '赔付 = 注额/100 × 表里那一行的倍数', ok: true, detail: `${input.bet}/100 × ${row.payoutCenti} = ${payout} 分` });
+
+    const restoreInput: RestoreInput<C> = { config, bet: input.bet, payoutCenti: row.payoutCenti, frames: t.books?.get(row.simId) ?? null, mode, seed };
+    // 钱先记：这一注在「平台」已经发生，后面的还原无论成败都不该回滚
+    wallet.balance += payout - input.bet;
+
+    let result;
+    try {
+      result = spec.restore(restoreInput);
+    } catch (e) {
+      return fail(`演出数据还原失败（表 ${mode} 第 ${rowIndex} 行，simId ${row.simId}）：${e instanceof Error ? e.message : String(e)}`);
+    }
+    if (result.payout !== payout) {
+      return fail(`还原出的赔付 ${result.payout} 与平台记账的 ${payout} 不符，本局不演出——这正是 restore 契约要拦的那类 bug`);
+    }
+    checks.push({ label: '还原出的演出与平台记账一致', ok: true, detail: `${result.payout} 分` });
+
+    const proof = {
+      algorithm: SAMPLER_ID, mode, tableContentHash: t.contentHash,
+      serverSeed: seed.server, serverSeedHash: seedHash(seed.server), clientSeed: seed.client, nonce: seed.nonce,
+      drawTarget: draw?.target ?? null, drawWords: draw?.words ?? [],
+      totalWeight: t.totalWeight.toString(), rowIndex, simId: row.simId, payoutCenti: row.payoutCenti,
+      cumulativeBefore: (rowIndex === 0 ? 0n : t.cumulative[rowIndex - 1]!).toString(), cumulativeAfter: t.cumulative[rowIndex]!.toString(),
+    };
+    return { ok: true, round: { result, row: restoreInput, wallet: state(), checks, proof } };
+  };
+
+  return {
+    kind: 'local',
+    init: async () => state(),
+    limits: () => DEFAULT_LIMITS,
+    refill: () => { wallet.balance = DEFAULT_BALANCE; return state(); },
+    place: (i) => play(i),
+    play,
+    reload: async () => { await o.reload?.(); return { modes: [...o.tables().keys()] }; },
+  };
+}

package/dev-host/theme.css

@@ -0,0 +1,344 @@
+/* 平台的视觉语言，玩家站点、参考平台、studio 三处共用同一份。
+   取自 Coco 那台机器：香蕉黄的底、奶油色的机身、酒红的舞台。
+   面板是「立在桌上的塑料机台」而不是「浮在暗色里的卡片」——所以阴影是硬的
+   （0 10px 0，没有模糊），按下去会真的沉下去 4px。
+
+   这份文件只由 apps/web 的 main.ts、dev-host 的 run.ts 和 studio 的 main.ts import，
+   改了任何一处三边一起变——这正是它存在的理由。 */
+
+:root {
+  --page: #FFD21F;
+  --cab: #FFF6DA;
+  --field: #FFFFFF;
+  --line: #E6CF94;
+  --ink: #2A0F12;
+  --dim: #80605A;
+  --accent-ink: #A8231A;
+  --focus: #2A0F12;
+  --cab-shadow: 0 10px 0 #D9A900;
+
+  /* 舞台：游戏画面所在的那块深色区域 */
+  --stage: #1A0B11;
+  --tile: #2C161F;
+  --s-ink: #FFF1DC;
+  --s-dim: #A3858C;
+
+  --coco: #F0402E;
+  --coco-d: #A8231A;
+  --banana: #FFD21F;
+  --banana-d: #B98F00;
+  --cream: #FFF1DC;
+  --ok: #2E9E5B;
+
+  --num: "Lilita One", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --txt: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
+  --fun: "ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --page: #12070B;
+    --cab: #211017;
+    --field: #2E1821;
+    --line: #4A2A35;
+    --ink: #FFF1DC;
+    --dim: #B4959A;
+    --accent-ink: #FFD21F;
+    --focus: #FFD21F;
+    --cab-shadow: 0 10px 0 #090305;
+  }
+}
+:root[data-theme="dark"] {
+  --page: #12070B;
+  --cab: #211017;
+  --field: #2E1821;
+  --line: #4A2A35;
+  --ink: #FFF1DC;
+  --dim: #B4959A;
+  --accent-ink: #FFD21F;
+  --focus: #FFD21F;
+  --cab-shadow: 0 10px 0 #090305;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--page);
+  color: var(--ink);
+  font-family: var(--txt);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 游戏容器：CSS 尺寸恒为逻辑分辨率（sdk 的 STAGE_W/STAGE_H），由平台按舞台宽度整体 scale。
+   玩家站点里它是 sandbox iframe，参考平台里是直接挂载游戏的 div，缩放规则是同一条。
+   放在 @scope 外面，因为它自己就是下面那道边界。 */
+.stage > .gameframe {
+  position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: 0 0;
+}
+
+/* 下面所有带类名的规则都止步于 .gameframe：参考平台和 studio 预览里游戏和平台在同一个
+   document 里，而游戏自己就有 .coin / .stage / .win / .gold 这些类——不设边界的话，
+   平台的 .coin{width:18px} 会把 coin-flip 的硬币压成一个小圆点。
+   玩家站点里 .gameframe 是 iframe，没有子节点，这条边界在那边是空操作。 */
+@scope (:root) to (.gameframe) {
+
+a { color: var(--accent-ink); text-decoration: none; font-weight: 700; }
+a:hover { text-decoration: underline; text-underline-offset: 3px; }
+
+button, input, select, output { font: inherit; color: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: not-allowed; }
+:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+
+h1 { font-family: var(--fun); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 22px 0 6px; }
+h2 { font-family: var(--fun); font-weight: 400; font-size: 20px; line-height: 1.2; margin: 0 0 12px; }
+h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
+
+/* 内容宽度固定 1200：机台要的是「一台机器」的稳定尺寸，不是随窗口伸缩的流式布局。
+   窄屏收到 calc(100% - 32px)，否则整页会横向溢出——机台本身不会变窄，
+   被推出去的是页眉、大厅和下面的说明卡片 */
+.wrap { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 48px; }
+
+/* ---------- 机台与面板 ---------- */
+.panel {
+  background: var(--cab);
+  border-radius: 22px;
+  box-shadow: var(--cab-shadow);
+  padding: 18px;
+}
+
+/* 机台：左参数、右画布、底部一条横跨整机的设置栏。
+   宽屏下整机的高度是确定的——它由画布的黄金比例算出来，不由游戏或参数条数决定 */
+.cab {
+  display: grid;
+  grid-template-columns: 304px minmax(0, 1fr);
+  grid-template-areas: "panel stage" "bar bar";
+  background: var(--cab);
+  border-radius: 22px;
+  box-shadow: var(--cab-shadow);
+  overflow: hidden;
+}
+/* 参数区里那一层是绝对定位的：机台这一行的高度必须只由画布的黄金比例决定，
+   而 grid 的 auto 行高会取到 item 的 max-content——参数多一条机台就高一截。
+   脱离文档流之后它对行高的贡献是 0，装不下就自己滚。
+   （用 `min-height:0` 只能让它被压扁，压不掉它对行高的贡献。） */
+.panel-col { grid-area: panel; position: relative; min-height: 0; }
+.panel-inner {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column; gap: 16px; padding: 20px;
+  overflow: hidden;
+}
+.panel-inner > * { flex: none; }
+.panel-inner hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0 0; }
+/* 盖在参数区上。跟着 .panel-col 定位，所以窄屏重排后它依然盖的是同一块 */
+.veil {
+  position: absolute; inset: 0; z-index: 3;
+  background: color-mix(in srgb, var(--cab) 92%, transparent);
+  backdrop-filter: blur(2px);
+  display: grid; place-items: center; padding: 20px;
+}
+.vbox { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 264px; text-align: center; }
+.vbox h3 { font-family: var(--fun); font-weight: 400; font-size: 20px; margin: 0; }
+.vbox p { margin: 0; }
+.vbox b { font-family: var(--num); font-weight: 400; font-size: 17px; }
+.vbox .hint { margin-bottom: 4px; }
+
+/* min-height:0 是 flex 子项能滚起来的前提：默认 min-height:auto 会让它撑到内容高度，
+   于是溢出的是整个面板，而不是这一块自己滚 */
+.params {
+  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  display: flex; flex-direction: column; gap: 16px; padding-right: 4px;
+  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
+}
+.params::-webkit-scrollbar { width: 8px; }
+.params::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
+
+/* 形状来自 --ratio，而 --ratio 由调用方用 STAGE_W/STAGE_H 写进 style——容器的缩放倍率算的是
+   同一组数。写成 CSS 字面量的话，改了那边忘了这边，画面会被裁掉一条边 */
+.stage {
+  grid-area: stage; background: var(--stage); color: var(--s-ink);
+  min-width: 0; aspect-ratio: var(--ratio); position: relative; overflow: hidden;
+}
+.stage .loading {
+  position: absolute; inset: 0; margin: 0;
+  display: grid; place-items: center; color: var(--s-dim); font-family: var(--fun); font-size: 18px;
+}
+
+.bar {
+  grid-area: bar; display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line);
+}
+.bar .tg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+.bar button {
+  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
+  border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 500; color: var(--dim);
+}
+.bar button:hover:not(:disabled) { background: var(--field); }
+.bar button[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
+.bar button:disabled { opacity: .45; }
+.bar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.bar .fairbtn { text-decoration: underline; text-underline-offset: 3px; }
+.brand { font-family: var(--fun); font-size: 17px; color: var(--dim); }
+.bal { font-family: var(--num); font-weight: 400; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
+
+/* 窄屏：画布在上，操作区在中，工具条在底。整机高度改为自适应——
+   画布仍按黄金比例跟着宽度走，参数区不再滚动而是整个摊开 */
+@media (max-width: 1000px) {
+  .cab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "panel" "bar"; }
+  .panel-col { min-height: auto; }
+  .panel-inner { position: static; overflow: visible; }
+  .params { flex: none; min-height: auto; overflow-y: visible; padding-right: 0; }
+}
+
+/* ---------- 按钮 ---------- */
+.cta {
+  border: 0;
+  border-radius: 14px;
+  min-height: 56px;
+  padding: 0 14px;
+  font-weight: 700;
+  font-size: 17px;
+  background: var(--coco);
+  color: #FFF6EA;
+  box-shadow: 0 5px 0 var(--coco-d);
+  transition: transform .06s, box-shadow .06s;
+}
+.cta:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--coco-d); }
+.cta.cash { background: var(--banana); color: #2A0F12; box-shadow: 0 5px 0 var(--banana-d); }
+.cta.cash:active:not(:disabled) { box-shadow: 0 1px 0 var(--banana-d); }
+.cta:disabled { background: var(--line); color: var(--dim); box-shadow: 0 5px 0 rgba(0, 0, 0, .12); }
+.cta .n { font-family: var(--num); font-weight: 400; font-size: 19px; letter-spacing: .01em; }
+
+.ghostbtn {
+  border: 1px solid var(--line);
+  background: none;
+  border-radius: 12px;
+  min-height: 42px;
+  padding: 0 14px;
+  font-weight: 700;
+  font-size: 14px;
+}
+.ghostbtn:hover:not(:disabled) { background: var(--field); }
+.ghostbtn:disabled { opacity: .45; }
+
+/* ---------- 表单 ---------- */
+.field { display: flex; flex-direction: column; gap: 6px; }
+.lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; }
+.lab > :last-child { font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
+.lab .acc { font-family: var(--num); font-size: 15px; color: var(--accent-ink); font-weight: 400; }
+
+.inp {
+  display: flex; align-items: center; gap: 6px;
+  background: var(--field); border: 1px solid var(--line);
+  border-radius: 12px; padding: 6px 6px 6px 12px; min-height: 46px;
+}
+.inp:focus-within { border-color: var(--ink); }
+.inp input, .inp output, .inp select {
+  flex: 1; min-width: 0; border: 0; background: none; outline: 0;
+  font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums;
+}
+.inp button {
+  border: 0; border-radius: 8px; background: var(--cab);
+  min-width: 38px; height: 32px; font-weight: 700; font-size: 13px;
+}
+.inp button:hover:not(:disabled) { background: var(--line); }
+.inp button:disabled, .inp input:disabled, .inp select:disabled { opacity: .5; }
+.coin {
+  flex: none; width: 18px; height: 18px; border-radius: 50%;
+  background: var(--banana);
+  box-shadow: inset 0 0 0 2px var(--banana-d), inset 0 0 0 4px var(--banana);
+}
+.hint { margin: 0; font-size: 12px; color: var(--dim); }
+
+.switch {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  width: 100%; text-align: left;
+  border: 1px solid var(--line); background: var(--field);
+  border-radius: 12px; padding: 8px 12px;
+}
+.switch b { display: block; font-size: 14px; }
+.switch small { display: block; font-size: 12px; color: var(--dim); font-weight: 400; }
+.switch i {
+  flex: none; position: relative; width: 40px; height: 24px;
+  border-radius: 99px; background: var(--line); transition: background .15s;
+}
+.switch i::after {
+  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
+  border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .15s;
+}
+.switch[aria-checked="true"] i { background: #E0A800; }
+.switch[aria-checked="true"] i::after { transform: translateX(16px); }
+.switch:disabled { opacity: .55; }
+
+.chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.chips button {
+  border: 1px solid var(--line); background: var(--field);
+  border-radius: 8px; padding: 3px 9px; font-size: 13px; font-weight: 700;
+}
+.chips button.on { background: var(--ink); color: var(--cab); border-color: var(--ink); }
+.chips button:disabled { opacity: .5; }
+
+.seg { display: grid; grid-auto-flow: column; gap: 6px; }
+.seg button {
+  border: 1px solid var(--line); background: var(--field); border-radius: 12px;
+  padding: 8px 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.25;
+}
+.seg button b { font-size: 14px; }
+.seg button small { font-size: 12px; color: var(--dim); }
+.seg button[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
+.seg button:disabled { opacity: .55; }
+
+.tabs {
+  display: grid; grid-auto-flow: column; gap: 4px; padding: 4px;
+  background: var(--field); border: 1px solid var(--line); border-radius: 14px;
+}
+.tabs button { border: 0; background: none; border-radius: 10px; padding: 8px 0; font-weight: 700; color: var(--dim); }
+.tabs button[aria-selected="true"] { background: var(--ink); color: var(--cab); }
+.tabs button:disabled:not([aria-selected="true"]) { opacity: .45; }
+
+/* ---------- 文字工具 ---------- */
+.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
+.grow { flex: 1; min-width: 0; }
+.dim { color: var(--dim); }
+.mono { font-family: var(--mono); font-size: 13px; }
+.num { font-family: var(--num); font-weight: 400; font-variant-numeric: tabular-nums; }
+.small { font-size: 13px; }
+.win { color: var(--ok); }
+.lose { color: var(--dim); }
+.bad { color: var(--coco-d); }
+.gold { color: var(--accent-ink); }
+:root[data-theme="dark"] .bad { color: #FF8F82; }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bad { color: #FF8F82; } }
+
+/* ---------- 表格 ---------- */
+table { width: 100%; border-collapse: collapse; }
+th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
+th { color: var(--dim); font-weight: 700; font-size: 12px; }
+td.num, th.num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
+
+.err {
+  background: color-mix(in srgb, var(--coco) 14%, var(--field));
+  border: 1px solid color-mix(in srgb, var(--coco) 45%, var(--line));
+  color: var(--accent-ink);
+  border-radius: 12px;
+  padding: 10px 12px;
+  font-weight: 700;
+}
+
+.step {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 12px 14px;
+  margin-bottom: 10px;
+  background: var(--field);
+}
+.step.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
+.step.no { border-color: color-mix(in srgb, var(--coco) 55%, var(--line)); }
+.step h3 { margin: 0 0 6px; font-size: 14px; }
+.step .v { word-break: break-all; }
+
+}

package/lut/book.ts

@@ -0,0 +1,97 @@
+/* GKBK1：演出数据的紧凑编码。
+ *
+ * 存的是盘面序列，不是事件流。winInfo / setWin / setTotalWin / finalWin 这些
+ * 全都能从盘面 + 赔付表算出来——它们不是信息，是中间结果。
+ *
+ * 实测（0_0_lines bonus 模式 10 万局）：Stake 的 JSON 平均 10,382 B/局，
+ * 这里 95 B/局，109 倍。不压的话 D1 的 10GB 只装得下 8 个游戏，压完能装 500 个。 */
+
+export const BOOK_VERSION = 1;
+export const FLAG_WIDE_SYMBOLS = 1; // 符号超过 16 种时每格 8 bit
+
+export interface BookFrame {
+  gameType: number;
+  /** 行优先的符号下标，长度 = reels × rows */
+  cells: number[];
+}
+
+export interface Book {
+  payoutCenti: number;
+  frames: BookFrame[];
+}
+
+export const bookByteLength = (frameCount: number, cells: number, wide: boolean): number =>
+  8 + frameCount * (1 + (wide ? cells : Math.ceil(cells / 2)));
+
+export function encodeBook(book: Book, cells: number, symbolCount: number): Uint8Array {
+  const wide = symbolCount > 16;
+  const out = new Uint8Array(bookByteLength(book.frames.length, cells, wide));
+  const dv = new DataView(out.buffer);
+  dv.setUint8(0, BOOK_VERSION);
+  dv.setUint8(1, book.frames.length);
+  dv.setUint16(2, wide ? FLAG_WIDE_SYMBOLS : 0, true);
+  dv.setUint32(4, book.payoutCenti, true);
+
+  let o = 8;
+  for (const f of book.frames) {
+    if (f.cells.length !== cells) {
+      throw new RangeError(`盘面格数 ${f.cells.length} 与声明的 ${cells} 不符`);
+    }
+    out[o++] = f.gameType;
+    if (wide) {
+      for (const c of f.cells) out[o++] = c;
+    } else {
+      // 每格 4 bit，低半字节在前
+      for (let i = 0; i < cells; i += 2) {
+        out[o++] = (f.cells[i]! & 0xf) | (((f.cells[i + 1] ?? 0) & 0xf) << 4);
+      }
+    }
+  }
+  return out;
+}
+
+export function decodeBook(bytes: Uint8Array, cells: number): Book {
+  if (bytes.length < 8) throw new RangeError('GKBK1 至少 8 字节');
+  const dv = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const version = dv.getUint8(0);
+  if (version !== BOOK_VERSION) throw new RangeError(`不支持的 GKBK1 版本 ${version}`);
+  const frameCount = dv.getUint8(1);
+  const wide = (dv.getUint16(2, true) & FLAG_WIDE_SYMBOLS) !== 0;
+  const payoutCenti = dv.getUint32(4, true);
+
+  const stride = 1 + (wide ? cells : Math.ceil(cells / 2));
+  if (bytes.length !== 8 + frameCount * stride) {
+    throw new RangeError(`GKBK1 长度 ${bytes.length} 与 frameCount=${frameCount} 不符`);
+  }
+
+  const frames: BookFrame[] = [];
+  let o = 8;
+  for (let f = 0; f < frameCount; f++) {
+    const gameType = bytes[o++]!;
+    const cellsOut: number[] = new Array(cells);
+    if (wide) {
+      for (let i = 0; i < cells; i++) cellsOut[i] = bytes[o++]!;
+    } else {
+      for (let i = 0; i < cells; i += 2) {
+        const b = bytes[o++]!;
+        cellsOut[i] = b & 0xf;
+        if (i + 1 < cells) cellsOut[i + 1] = (b >> 4) & 0xf;
+      }
+    }
+    frames.push({ gameType, cells: cellsOut });
+  }
+  return { payoutCenti, frames };
+}
+
+export const toBase64 = (b: Uint8Array): string => {
+  let s = '';
+  for (const x of b) s += String.fromCharCode(x);
+  return btoa(s);
+};
+
+export const fromBase64 = (s: string): Uint8Array => {
+  const bin = atob(s);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+};

package/lut/csv.ts

@@ -0,0 +1,37 @@
+/* 把 math-sdk 的 lookUpTable CSV 转成 GKLT1。迁移既有产物用。
+   CSV 三列：simId, weight, payoutCenti（第三列本来就是 ×100 的整数） */
+import { type Gklt1Header, type LutRow, encode } from './format.ts';
+
+export interface CsvResult { header: Gklt1Header; rows: LutRow[]; bytes: Uint8Array }
+
+export function fromCsv(
+  text: string,
+  opts: { betCostCenti: number; declaredRtpPpm: number },
+): CsvResult {
+  const rows: LutRow[] = [];
+  let totalWeight = 0;
+
+  for (const line of text.split('\n')) {
+    const s = line.trim();
+    if (!s) continue;
+    const parts = s.split(',');
+    if (parts.length !== 3) throw new RangeError(`CSV 行必须是 3 列：${s}`);
+    const simId = Number(parts[0]);
+    const weight = Number(parts[1]);
+    const payoutCenti = Number(parts[2]);
+    if (!Number.isSafeInteger(simId) || !Number.isSafeInteger(weight) || !Number.isSafeInteger(payoutCenti)) {
+      throw new RangeError(`CSV 行含非整数：${s}`);
+    }
+    rows.push({ simId, payoutCenti, weight });
+    totalWeight += weight;
+  }
+
+  rows.sort((a, b) => a.simId - b.simId);
+  const header: Gklt1Header = {
+    rowCount: rows.length,
+    betCostCenti: opts.betCostCenti,
+    totalWeight,
+    declaredRtpPpm: opts.declaredRtpPpm,
+  };
+  return { header, rows, bytes: encode(header, rows) };
+}