Spaces:

RemiFabre
/

faience

Running

App Files Files Community

RemiFabre commited on 7 days ago

Commit

5d90ebb

1 Parent(s): c60cebf

Deploy browser player — run4/ckpt-037888 elo 2361.0

Browse files

Files changed (37) hide show

.gitattributes +1 -0
README.md +31 -6
css/style.css +417 -0
index.html +201 -18
js/analytics.js +65 -0
js/app.js +1509 -0
js/engine.js +788 -0
js/game.js +243 -0
js/mcts.js +583 -0
js/net.js +210 -0
js/record.js +170 -0
js/report.js +200 -0
js/upload.js +140 -0
js/worker.js +335 -0
model/model.onnx +3 -0
model/model_meta.json +45 -0
social.png +3 -0
style.css +0 -28
ui/PORTING.md +111 -0
ui/THEMING.md +120 -0
ui/animate.js +200 -0
ui/board.css +848 -0
ui/board.js +340 -0
ui/confirm.js +52 -0
ui/dom.js +93 -0
ui/history.js +176 -0
ui/layout.js +58 -0
ui/log.js +143 -0
ui/popups.js +78 -0
ui/scoring.js +193 -0
ui/settings.js +211 -0
ui/status.js +96 -0
ui/theme.css +246 -0
vendor/onnxruntime-web/ort-wasm-simd-threaded.jspi.wasm +3 -0
vendor/onnxruntime-web/ort-wasm-simd-threaded.wasm +3 -0
vendor/onnxruntime-web/ort.jspi.bundle.min.mjs +0 -0
vendor/onnxruntime-web/ort.wasm.bundle.min.mjs +9 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,10 +1,35 @@
 ---
-title: Faience
-emoji: 🌖
-colorFrom: gray
-colorTo: red
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: "Faïence"
+emoji: "🀄"
+colorFrom: blue
+colorTo: yellow
 sdk: static
+pinned: true
+thumbnail: https://remifabre-faience.static.hf.space/social.png
+short_description: "Azul rules vs a self-play neural net, all in your browser"
 ---
+<!-- The card for the Faïence Space. This file lives in the ludometer repo at
+     web/player/space/README.md; scripts/deploy_player.sh copies it to the
+     Space root at deploy time (the space/ directory itself is never shipped
+     to visitors). -->
+Faïence is a free, open-source implementation of the rules of *Azul*, the
+tile-laying game by Michael Kiesling: a fan project for research, with its own
+code and artwork, not affiliated with or endorsed by the game's publishers.
+Your opponent is a neural network that learned the game from scratch by
+self-play. The net and its tree search run entirely in your browser: your
+browser downloads the model once and everything after that is local. No
+server plays for it, no account, no ads, nothing to buy.
+It began as a machine-learning experiment: Ludometer, a research framework
+that measures how good a board game is from the shape of an AI's learning
+curve. The games people play here are the research material: when a game
+ends, the page sends an anonymous record (moves, deals, net, score; sharing
+can be switched off in Settings) to the public dataset
+[RemiFabre/faience-games](https://huggingface.co/datasets/RemiFabre/faience-games),
+where it becomes training data.
+Code, training logs and methodology:
+[RemiFabre/ludometer](https://github.com/RemiFabre/ludometer) (MIT).

css/style.css ADDED Viewed

	@@ -0,0 +1,417 @@

+/* Page shell for the in-browser player.
+ *
+ * The table itself — tiles, the two boards, the status band, the log, the inline
+ * scoring panels and the tile flights — lives in ui/board.css, which is a copy of
+ * web/play/ui/board.css (see web/play/ui/PORTING.md). The hosted player and the
+ * local GUI therefore draw the *same* table from two different back ends: a Flask
+ * server there, a Web Worker running ONNX in the tab here.
+ *
+ * This file is only what belongs to *this* page: the linen ground, the header and
+ * its setup bar, the engine (model download) strip, the column layout, the supply
+ * and "how this works" boxes, and a harder look at small screens — this one is
+ * meant to be playable on a phone.
+ *
+ * Layout, top to bottom: header · engine strip · status band · the playfield
+ * (the factories on the left, the two identical boards — you above, AI below —
+ * beside them; <body data-boards="stack">, the + in settings, restores the big
+ * boards under the factories) · inline scoring · the move log and the about
+ * box · the bottom bar (the AI's clock and the tile totals). Nothing is ever
+ * covered by anything: there is no overlay and no toast on this page.
+ */
+@import url("../ui/board.css");
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  font: 15px/1.5 var(--font-body);
+  background-color: var(--linen);
+  /* woven linen: two hairline threads plus a warm vignette */
+  background-image:
+    linear-gradient(var(--linen-thread) 1px, rgba(0, 0, 0, 0) 1px),
+    linear-gradient(90deg, var(--linen-thread) 1px, rgba(0, 0, 0, 0) 1px),
+    radial-gradient(120% 90% at 50% 0%, var(--linen-warm) 0%, var(--linen) 55%, var(--linen-dark) 100%);
+  background-size: 7px 7px, 7px 7px, 100% 100%;
+}
+h1, h2, h3 { margin: 0; font-weight: 400; }
+button, input, select { font: inherit; color: inherit; }
+/* ------------------------------------------------------------------ top bar */
+.topbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 24px;
+  padding: 12px clamp(14px, 3vw, 34px);
+  background: linear-gradient(var(--topbar-top), var(--topbar-bottom));
+  border-bottom: 1px solid var(--grout);
+  box-shadow: 0 6px 18px -14px rgba(60, 44, 20, .6);
+}
+.brand { display: flex; align-items: baseline; gap: 12px; margin-right: auto; }
+.brand-name {
+  font-family: var(--font-display);
+  font-size: 28px;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  /* the title is glazed like a tile: cobalt with a highlight along the top */
+  background: linear-gradient(var(--c0-hi), var(--c0) 55%, var(--c0-lo));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.brand-sub { font-family: var(--font-label); font-size: 12.5px; letter-spacing: .08em; color: var(--ink-soft); }
+.setup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field-label {
+  font-family: var(--font-label);
+  font-size: 11px;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.field select, .field input {
+  padding: 6px 9px;
+  min-width: 132px;
+  background: var(--field-bg);
+  border: 1px solid var(--grout);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+}
+.field-narrow input { min-width: 78px; width: 88px; }
+.field-narrow select { min-width: 132px; }
+.check { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; font-size: 14px; }
+.check.coach { padding: 5px 10px 5px 8px; border: 1px solid var(--grout); border-radius: 2px; background: var(--field-bg); }
+.check.coach.off { opacity: .55; }
+.btn {
+  padding: 7px 15px;
+  border: 1px solid var(--grout);
+  border-radius: 2px;
+  background: linear-gradient(var(--btn-top), var(--btn-bottom));
+  cursor: pointer;
+  font-family: var(--font-label);
+  font-size: 13px;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
+}
+.btn:hover { background: linear-gradient(var(--btn-top-hover), var(--btn-bottom-hover)); }
+.btn:active { transform: translateY(1px); }
+.btn-primary {
+  color: var(--btn-primary-ink);
+  border-color: var(--c0-lo);
+  background: linear-gradient(var(--btn-primary-top), var(--c0) 60%, var(--btn-primary-bottom));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 2px 6px -3px rgba(20, 40, 80, .8);
+}
+.btn-primary:hover { background: linear-gradient(var(--btn-primary-top-hover), var(--btn-primary-bottom-hover)); }
+.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
+:where(a, button, input, select, [tabindex]):focus-visible {
+  outline: 2px solid var(--c4-lo);
+  outline-offset: 2px;
+}
+/* ------------------------------------------------------- engine status bar */
+/* The net is a 13 MB download, so its state is not a detail to hide in a corner:
+ * it gets its own strip under the header, and the Deal button stays disabled
+ * until the worker says it is ready. */
+.engine-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px clamp(14px, 3vw, 34px);
+  background: linear-gradient(var(--engine-top), var(--engine-bottom));
+  border-bottom: 1px solid var(--grout);
+  font-family: var(--font-label);
+  font-size: 12px;
+  letter-spacing: .06em;
+  color: var(--ink-soft);
+}
+.engine-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--c1);
+  box-shadow: 0 0 0 3px var(--c1-wash);
+  animation: kiln 1.2s ease-in-out infinite;
+}
+@keyframes kiln {
+  0%, 100% { opacity: .35; }
+  50% { opacity: 1; }
+}
+.engine-bar.ready .engine-dot { background: var(--c4); box-shadow: 0 0 0 3px var(--c4-wash); animation: none; }
+.engine-bar.failed .engine-dot { background: var(--c2); box-shadow: 0 0 0 3px var(--c2-wash); animation: none; }
+.engine-text { flex: 1 1 auto; min-width: 200px; }
+.engine-badge {
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--badge-bg);
+  border: 1px solid var(--badge-edge);
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  font-size: 11px;
+  color: var(--c0-ink);
+  white-space: nowrap;
+}
+/* -------------------------------------------------------------------- table */
+.table {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 1.4vw, 18px);
+  padding: clamp(12px, 1.8vw, 22px) clamp(12px, 3vw, 34px) 44px;
+  max-width: 1560px;
+  margin: 0 auto;
+}
+.middle-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+/* The playfield. Two ways to draw it, picked in the settings panel and
+ * defaulted per device (see ui/layout.js):
+ *   stack (the +, a desktop's default) — the classic table: big boards, side
+ *     by side below the factories;
+ *   side (the −, a phone's default) — the whole game on one screen: the
+ *     factories on the left, both boards, smaller, stacked beside them.
+ * The base rules below are the stack look, so a desktop paints correctly
+ * before any script runs; the phone media query flips its own default. */
+.playfield {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: clamp(10px, 1.4vw, 18px);
+  align-items: start;
+}
+.boards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: clamp(10px, 1.4vw, 18px);
+  align-items: start;
+}
+body[data-boards="side"] .playfield {
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
+}
+body[data-boards="side"] .boards {
+  grid-template-columns: minmax(0, 1fr);
+  gap: clamp(8px, 1vw, 14px);
+}
+/* side layout: both boards must fit beside the factories, so they shrink */
+body[data-boards="side"] .board { --tile: clamp(13px, 2.1vw, 36px); }
+.below {
+  display: grid;
+  grid-template-columns: minmax(0, 1.7fr) minmax(240px, .8fr);
+  gap: clamp(10px, 1.4vw, 18px);
+  align-items: start;
+}
+.below-side { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); }
+/* ------------------------------------------------------------- game record */
+/* Shown only once a game is over: the finished game, offered as a file. Quiet
+ * by construction, because it is an invitation and not a demand. */
+.record-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 18px;
+}
+.record-bar[hidden] { display: none; }
+.record-note {
+  flex: 1 1 320px;
+  margin: 0;
+  font-size: 13.5px;
+  color: var(--ink-soft);
+}
+.record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+.record-link {
+  font-family: var(--font-label);
+  font-size: 12px;
+  letter-spacing: .06em;
+  color: var(--c0);
+}
+.record-bar.done .record-note { color: var(--ink); }
+/* --------------------------------------------------------------- bottom bar */
+/* The quiet end of the page: the AI's clock lives here (moved off the top bar,
+ * where it crowded a phone), next to one line of totals. #lid-row inside the
+ * totals is where discarded tiles fly — a target, so it keeps a real box. */
+.bottom-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px 22px;
+}
+.counts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 16px;
+  padding-bottom: 8px;
+  font-family: var(--font-label);
+  font-size: 12px;
+  letter-spacing: .06em;
+  color: var(--ink-soft);
+}
+#lid-row { border-radius: 3px; padding: 2px 4px; transition: background .3s ease; }
+#lid-row.receiving { background: var(--lid-receiving); }
+/* --------------------------------------------------------------- about box */
+.about p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); }
+.about p:last-child { margin-bottom: 0; }
+.about a { color: var(--c0); }
+.about-meta {
+  font-family: var(--font-label);
+  font-size: 11.5px;
+  letter-spacing: .04em;
+  color: var(--ink-faint);
+}
+body.locked .board-grid, body.locked .factories, body.locked .center-dish { cursor: progress; }
+.hidden { display: none !important; }
+/* -------------------------------------------------------------- responsive */
+@media (max-width: 1080px) {
+  .below { grid-template-columns: minmax(0, 1fr); }
+  .status { flex-wrap: wrap; }
+}
+@media (max-width: 720px) {
+  /* Phone layout: the boards are the page, one above the other so neither of
+   * them has to shrink below a playable tile. Every control keeps a 44px target. */
+  .topbar { gap: 6px 10px; padding: 8px 10px; }
+  .brand { width: 100%; margin-right: 0; gap: 8px; }
+  .brand-name { font-size: 19px; }
+  .brand-sub { font-size: 11px; }
+  /* seed, "you go first" and Deal share one row: the band, smaller */
+  .setup { width: 100%; gap: 6px 8px; align-items: center; flex-wrap: nowrap; }
+  .setup .btn { flex: 0 0 auto; padding: 10px 11px; white-space: nowrap; }
+  .setup .field { flex: 0 1 100px; }
+  .setup .field .field-label { display: none; }
+  .setup .check { flex: 0 0 auto; }
+  .field select, .field input { min-width: 0; padding: 9px 8px; }
+  .field-narrow select, .field-narrow input { width: auto; min-width: 0; }
+  .btn { padding: 10px 14px; min-height: 44px; }
+  .engine-bar { padding: 5px 10px; font-size: 11px; gap: 4px 10px; }
+  .engine-text { min-width: 0; }
+  /* the settings and the navigator are controls, so they get a tap target too */
+  .gear, .speed, .nav-btn { min-height: 44px; }
+  .settings-panel { gap: 8px 12px; }
+  .check { padding-bottom: 0; min-height: 44px; }
+  .check input { width: 20px; height: 20px; }
+  .table { padding: 8px 8px 32px; gap: 8px; }
+  .panel { padding: 11px 11px 13px; }
+  .scoring-grid { grid-template-columns: minmax(0, 1fr); }
+  .log { max-height: 190px; }
+  /* the status band earns its keep in one small line, not a headline */
+  .status { padding: 8px 12px 10px; gap: 10px; }
+  .status-headline { font-size: 15px; }
+  .status-detail { font-size: 10.5px; margin-top: 2px; min-height: 0; }
+  .status-side { min-width: 40px; }
+  .status-side-score { font-size: 19px; }
+  .status-dash { font-size: 15px; }
+  /* stack (+): the old phone table — one big board under the other */
+  body[data-boards="stack"] .boards { grid-template-columns: minmax(0, 1fr); }
+  body[data-boards="stack"] .board { --tile: clamp(26px, 9vw, 38px); }
+  body[data-boards="stack"] .factories { gap: 10px 12px; }
+  body[data-boards="stack"] .factory { --dish-size: calc(var(--tile) * 2 + 22px); }
+  body[data-boards="stack"] .middle-table { --tile: clamp(24px, 8vw, 32px); }
+  body[data-boards="stack"] .board-grid { column-gap: 8px; }
+  body[data-boards="stack"] .line { padding: 0 2px; }
+  body[data-boards="stack"] .line .row-note { font-size: 10.5px; line-height: 1.15; }
+  /* side (−, the default): factories left, both boards beside them. Small
+   * tiles are the accepted price of seeing the whole game at once. */
+  body:not([data-boards="stack"]) .playfield {
+    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
+    gap: 6px;
+  }
+  body:not([data-boards="stack"]) .boards { grid-template-columns: minmax(0, 1fr); gap: 6px; }
+  body:not([data-boards="stack"]) .board {
+    --tile: clamp(11px, calc((48vw - 50px) / 10), 38px);
+    padding: 7px 6px 8px;
+    gap: 6px;
+  }
+  body:not([data-boards="stack"]) .board-grid { column-gap: 3px; }
+  body:not([data-boards="stack"]) .line { padding: 0 1px; gap: 2px; }
+  body:not([data-boards="stack"]) .line .row-note { display: none; }
+  body:not([data-boards="stack"]) .wall-row { gap: 2px; padding: 0 3px; }
+  body:not([data-boards="stack"]) .board-head { column-gap: 6px; padding-bottom: 5px; }
+  body:not([data-boards="stack"]) .board-who { font-size: 10px; letter-spacing: .1em; }
+  body:not([data-boards="stack"]) .board-score { font-size: 18px; }
+  body:not([data-boards="stack"]) .board-notes { font-size: 9.5px; min-height: 12px; }
+  body:not([data-boards="stack"]) .floor { padding: 3px 2px; gap: 2px; }
+  body:not([data-boards="stack"]) .floor .pen { font-size: 8.5px; }
+  body:not([data-boards="stack"]) .middle-panel { padding: 8px 6px 10px; }
+  body:not([data-boards="stack"]) .middle-table { --tile: clamp(17px, 5.6vw, 32px); }
+  body:not([data-boards="stack"]) .factories { gap: 8px 8px; }
+  body:not([data-boards="stack"]) .factory { --dish-size: calc(var(--tile) * 2 + 16px); }
+  body:not([data-boards="stack"]) .center-dish { padding: 8px 10px; margin-top: 8px; }
+}
+@media (max-width: 420px) {
+  body[data-boards="stack"] .board { --tile: clamp(23px, 10vw, 34px); }
+  body[data-boards="stack"] .middle-table { --tile: clamp(21px, 8.5vw, 28px); }
+  .engine-badge { font-size: 10px; letter-spacing: .08em; }
+  .status { gap: 8px; }
+}
+/* A coarse pointer never hovers, so the hover lift just makes taps feel laggy. */
+@media (hover: none) {
+  button.tile:hover { transform: none; }
+  button.line.open:hover { background: var(--c4-wash); filter: none; }
+}
+/* ========================================================== corner buttons ==
+ * Two small round buttons pinned to the bottom-right, the way every board-game
+ * site pins its "?" — one scrolls to the What-this-is panel, one opens the
+ * public tally. Fixed, but tiny: they float over the linen, never the table. */
+.corner {
+  position: fixed;
+  right: 14px;
+  bottom: 14px;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.corner-btn {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--grout);
+  border-radius: 50%;
+  background: linear-gradient(var(--btn-top), var(--btn-bottom));
+  box-shadow: var(--shadow-tile);
+  cursor: pointer;
+  color: var(--ink-soft);
+  font-family: var(--font-display);
+  font-size: 21px;
+  line-height: 1;
+  text-decoration: none;
+}
+.corner-btn:hover {
+  background: linear-gradient(var(--btn-top-hover), var(--btn-bottom-hover));
+  color: var(--ink);
+}
+.corner-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
+/* the "?" button's landing: the panel it scrolled to glows for a breath */
+.about.lit { box-shadow: var(--shadow-panel), 0 0 0 3px var(--c4-wash); }
+.about { transition: box-shadow .5s ease; }

index.html CHANGED Viewed

@@ -1,19 +1,202 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Faïence: a tile game against a neural net, in your browser</title>
+<meta name="description" content="Faïence is a free, open-source implementation of the rules of Azul (Michael Kiesling). Play against a neural net trained by self-play. It runs entirely in your browser, no server, no install.">
+<!-- the card a shared link unfolds into -->
+<meta property="og:type" content="website">
+<meta property="og:title" content="Faïence: a tile game against a neural net">
+<meta property="og:description" content="A free, open-source implementation of the rules of Azul. The net and its tree search run entirely in your browser: no server, no install, no account.">
+<meta property="og:url" content="https://remifabre-faience.static.hf.space/">
+<meta property="og:image" content="https://remifabre-faience.static.hf.space/social.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="color-scheme" content="light">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%2317509e'/%3E%3Crect x='6' y='6' width='9' height='9' rx='1.5' fill='%2331b8d1'/%3E%3Crect x='17' y='6' width='9' height='9' rx='1.5' fill='%23d99a12'/%3E%3Crect x='6' y='17' width='9' height='9' rx='1.5' fill='%23b23a26'/%3E%3Crect x='17' y='17' width='9' height='9' rx='1.5' fill='%23faf6ec'/%3E%3C/svg%3E">
+<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<header class="topbar">
+  <div class="brand">
+    <span class="brand-name">Faïence</span>
+    <span class="brand-sub" id="matchup">a tile game for two</span>
+  </div>
+  <form class="setup" id="setup" autocomplete="off">
+    <label class="field field-narrow">
+      <span class="field-label">Seed</span>
+      <input type="text" id="seed" inputmode="numeric" placeholder="random">
+    </label>
+    <label class="check">
+      <input type="checkbox" id="first" checked>
+      <span>You go first</span>
+    </label>
+    <button type="submit" class="btn btn-primary" id="deal" disabled>Deal tiles</button>
+  </form>
+</header>
+<!-- the net is a 13 MB download: its state gets its own strip, never a pop-up -->
+<div class="engine-bar" id="engine-bar">
+  <span class="engine-dot" id="engine-dot" aria-hidden="true"></span>
+  <span class="engine-text" id="engine-text">Loading the net…</span>
+  <span class="engine-badge">runs entirely in your browser</span>
+</div>
+<main class="table">
+  <!-- one glance = whole game state; nothing on this page ever covers the board -->
+  <section id="status"></section>
+  <!-- the panel opens inline and pushes the table down; this page has no pop-ups -->
+  <section id="settings" aria-label="Settings"></section>
+  <!-- the playfield, drawn two ways (settings − / +, defaulted per device in
+       ui/layout.js): "stack" = big boards below the factories, a desktop's
+       default; "side" = factories left, both boards beside them, a phone's. -->
+  <div class="playfield">
+  <section class="panel middle-panel">
+    <h2 class="panel-title">The middle of the table</h2>
+    <!-- the tiles you are holding while you choose a row; a picture of the
+         selection, gone the moment you change your mind -->
+    <div class="hand" id="hand" hidden aria-hidden="true">
+      <span class="hand-label">In hand</span>
+      <div class="hand-tiles" id="hand-tiles"></div>
+    </div>
+    <div id="middle"></div>
+    <div class="middle-actions">
+      <span class="brand-sub" id="prompt">Loading the net. The tiles will be dealt in a moment.</span>
+      <!-- move navigation: pure replay of positions the page already has -->
+      <div id="nav" aria-label="Move navigation"></div>
+      <button type="button" class="btn" id="hint" disabled>Suggest a move</button>
+      <button type="button" class="btn hidden" id="cancel">Clear selection</button>
+      <!-- confirm mode: while a move is placed, this row's usual controls make
+           way for the banner — same row, same height, nothing on the page moves -->
+      <div class="confirm-bar" id="confirm-bar" hidden aria-live="polite">
+        <strong class="confirm-title">Validate this move</strong>
+        <span class="confirm-detail" id="confirm-detail"></span>
+        <button type="button" class="btn btn-primary" id="confirm">Play this move</button>
+        <button type="button" class="btn" id="confirm-cancel">Cancel</button>
+      </div>
+    </div>
+  </section>
+  <div class="boards">
+    <section id="board-human" aria-label="Your board"></section>
+    <section id="board-ai" aria-label="The AI's board"></section>
+  </div>
+  </div><!-- /.playfield -->
+  <section id="scoring" hidden aria-live="polite"></section>
+  <!-- Appears when a game ends. With sharing on (the default, and the switch
+       is in Settings) the game was just sent to the training pile by
+       js/upload.js; app.js writes the note accordingly. The buttons offer the
+       same record as a file, for the curious and for players who share
+       nothing. -->
+  <section class="panel record-bar" id="record" hidden>
+    <p class="record-note" id="record-note">Finished, and shared: the moves,
+    the tiles that were dealt, and which net you played are on their way to
+    the public training pile. Thank you. You can keep a copy too, or turn
+    sharing off in Settings.</p>
+    <div class="record-actions">
+      <button type="button" class="btn" id="record-save">Save this game</button>
+      <button type="button" class="btn" id="record-copy">Copy as text</button>
+      <a class="record-link" id="record-dataset"
+         href="https://huggingface.co/datasets/RemiFabre/faience-games"
+         target="_blank" rel="noopener">See the public pile</a>
+    </div>
+  </section>
+  <div class="below">
+    <section class="panel">
+      <div class="board-head">
+        <h2 class="panel-title" id="log-title">Move log</h2>
+        <label class="check coach off" id="coach-field" title="Score your moves with the AI's own search">
+          <input type="checkbox" id="coach">
+          <span>Coach mode</span>
+        </label>
+      </div>
+      <p class="coach-legend" id="coach-legend" hidden></p>
+      <ol class="log" id="log" aria-labelledby="log-title"></ol>
+    </section>
+    <div class="below-side">
+      <section class="panel about" id="about" aria-labelledby="about-title">
+        <h2 class="panel-title" id="about-title">What this is</h2>
+        <p>Faïence is a free, open-source implementation of the rules of
+        <em>Azul</em>, the tile-laying game by Michael Kiesling. It is a fan
+        project for research, with its own code and artwork, not affiliated
+        with or endorsed by the game's publishers.</p>
+        <p>All of it is open source (MIT):
+        <a href="https://github.com/RemiFabre/ludometer">code and training logs on GitHub</a>.
+        If you like this work, a star on the repo (or a hello in the issues)
+        is always appreciated.</p>
+        <p>Faïence began as a machine-learning experiment: Ludometer, a research
+        framework that measures how good a board game is from the shape of an
+        AI's learning curve. Somewhere along the way the experiment turned into
+        a pleasant opponent, so we are sharing it, playable and free. Nobody
+        earns a cent from this page: no ads, no account, nothing to buy.</p>
+        <p>The opponent is a neural network that learned the game from scratch
+        by playing against itself. Your browser downloads it once and runs it
+        locally.</p>
+        <p id="share-note">This is a research project, and the games are the
+        research material: when you play, you help the net train. So when a
+        game ends (or is abandoned), the page sends an anonymous record of it
+        to be used as training data: the moves, the tiles that were dealt,
+        which net you played, and the score. No name, no account, no
+        location. This is experimental, and there is a switch in Settings if
+        you would rather not.
+        <a href="https://huggingface.co/datasets/RemiFabre/faience-games"
+        target="_blank" rel="noopener">Every record is public</a>, so you can
+        read everything we collect.</p>
+        <p id="tally-note">Beyond that, the only thing that leaves your
+        browser is an anonymous, cookie-free tally of visits, games dealt,
+        and how finished games went. <a href="https://faience.goatcounter.com"
+        target="_blank" rel="noopener">It is public too</a>.</p>
+        <p class="about-meta" id="about-meta"></p>
+      </section>
+    </div>
+  </div>
+  <!-- the quiet end of the page: where discarded tiles go. #counts keeps only
+       totals (never per-colour counts) and holds #lid-row, the landing target
+       for every tile that melts into the lid. The "AI thinks for" clock is
+       parsed here, then seated in the settings panel by app.js. -->
+  <section class="panel bottom-bar" aria-label="Tile counts">
+    <label class="field field-narrow" id="think-field">
+      <span class="field-label">AI thinks for</span>
+      <select id="think">
+        <option value="0">Instant (no search)</option>
+        <option value="3">3 seconds</option>
+        <option value="5" selected>5 seconds</option>
+        <option value="10">10 seconds</option>
+      </select>
+    </label>
+    <div class="counts" id="counts"></div>
+  </section>
+</main>
+<!-- the two round corner buttons: what is this, and the public tally -->
+<nav class="corner" aria-label="About and statistics">
+  <a class="corner-btn" id="corner-stats" href="https://faience.goatcounter.com"
+     target="_blank" rel="noopener" title="Public play statistics: everything this page records">
+    <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="10" width="3.4" height="7" rx="1"/><rect x="8.3" y="6" width="3.4" height="11" rx="1"/><rect x="13.6" y="3" width="3.4" height="14" rx="1"/></svg>
+  </a>
+  <button type="button" class="corner-btn" id="corner-about" title="What is this?">?</button>
+</nav>
+<div class="fly-layer" id="fly" aria-hidden="true"></div>
+<!-- score pop-ups get their own layer: a number is not a tile, and nothing that
+     counts tile flights should ever count these -->
+<div class="pop-layer" id="pops" aria-hidden="true"></div>
+<script type="module" src="js/app.js"></script>
+</body>
 </html>

js/analytics.js ADDED Viewed

	@@ -0,0 +1,65 @@

+/* An honest, cookie-free tally of who plays.
+ *
+ * GoatCounter is built for exactly this arrangement: no cookies, no
+ * fingerprinting, no personal data, nothing stored in the visitor's browser —
+ * so no consent banner is needed — and the dashboard is public, so a player
+ * can read everything the page records; the About panel links straight to it.
+ * The pings go to GoatCounter's /count endpoint directly (their count.js is
+ * never loaded: this page ships every byte it runs). Empty COUNT_URL and the
+ * module produces zero network traffic; app.js then also removes the About
+ * panel's tally note and the stats button, so the page never points at a
+ * tally it does not keep.
+ *
+ * What gets counted (each a single GET of a 1×1 gif, fired and forgotten):
+ *   pageview                              the page was opened
+ *   game-start                            tiles were dealt
+ *   game-end/<model>/<result>             how a finished game went, per net —
+ *                                         result is human-wins | net-wins | draw,
+ *                                         with the score line as the hit's title
+ *
+ * The dashboard should be made PUBLIC in GoatCounter's settings: the page links
+ * to it, so every player can see exactly what is recorded. That link appears
+ * automatically once COUNT_URL is set.
+ */
+export const COUNT_URL = "https://faience.goatcounter.com/count";
+/** Whether the tally is on at all — the About panel reads this. */
+export const analyticsOn = () => !!COUNT_URL;
+/** The public dashboard the About panel links to — the /count host itself. */
+export function statsUrl() {
+  if (!COUNT_URL) return "";
+  try {
+    return new URL(COUNT_URL).origin;
+  } catch (err) {
+    return "";
+  }
+}
+/**
+ * Count one event. Never throws, never waits, does nothing while COUNT_URL is
+ * empty. `pageview` is special-cased to count as a visit rather than an event;
+ * `extra.title` becomes the hit's title (detail on the dashboard, e.g. a score
+ * line), while the path stays coarse so the counts aggregate.
+ */
+export function track(name, extra) {
+  if (!COUNT_URL) return;
+  try {
+    // development and the headless test suite play thousands of games; none of
+    // them are players, and none of them may touch the public tally
+    const host = location.hostname;
+    if (host === "localhost" || host === "127.0.0.1" || host === "") return;
+    const page = name === "pageview";
+    const path = page ? location.pathname : name;
+    const url =
+      COUNT_URL +
+      "?p=" + encodeURIComponent(path) +
+      (page ? "" : "&e=true") +
+      (extra && extra.title ? "&t=" + encodeURIComponent(extra.title) : "") +
+      "&rnd=" + Date.now().toString(36);
+    new Image().src = url; // a GET the browser fires and forgets; no reply is read
+  } catch (err) {
+    /* an ad blocker or a locked-down browser; the game plays on */
+  }
+}

js/app.js ADDED Viewed

	@@ -0,0 +1,1509 @@

+/* Azul against the net — the table, in your browser.
+ *
+ * The reusable half of this page lives in ../ui/: the boards, the status band,
+ * the move log, the inline scoring panels and the tile flights are the same
+ * framework-free modules the local GUI uses (a copy of web/play/ui/, see its
+ * PORTING.md). This file is the part that is specific to *this* page — the part
+ * the local GUI hands to a Flask server: it owns the game (`GameSession`, a port
+ * of the server's session object), asks a Web Worker running ONNX for the AI's
+ * moves, and decides what the status band says.
+ *
+ * How a turn plays out — and why there is no overlay, sheet or toast anywhere on
+ * this page:
+ *
+ *   1. you click a colour and the selection is acted out at once: your tiles fly
+ *      to a small "hand" tray on the middle panel and the dish's leftovers fly to
+ *      the centre — a preview of the move, undone the instant you change your
+ *      mind (Escape, the Clear button, or another colour);
+ *   2. you click a row and the held tiles continue from the hand to your board.
+ *      With confirm mode on (the default) the page simply draws the position the
+ *      move would leave — real tiles in their real places, the new ones glowing —
+ *      and a banner under the middle asks for the word: "Play this move" commits
+ *      it, Cancel goes all the way back to before the pick. The page is never
+ *      *between* positions: every view is a fully drawn state, and the flights
+ *      are transient garnish over it (a lesson learned from floating clones that
+ *      scrolled apart from the table). Nothing ever waits for the coach — with
+ *      coach mode on, the rating runs in the background *after* the turn and
+ *      fills in on the move's log entry;
+ *   3. if that ended the round, full pattern lines fly to the wall — each tile
+ *      popping the points it earns as it lands, the floor line popping its cost —
+ *      and the round's scoring appears *inline* under the boards;
+ *   4. the AI thinks against the clock in the status band (on your CPU, so the
+ *      band also counts the positions it has visited), then its move plays out on
+ *      the right-hand board exactly the same way.
+ *
+ * Input is locked from the moment a move is played until the last tile lands, and
+ * for no longer than that.
+ *
+ * When the AI moves twice in a row across a round boundary, both moves are
+ * animated: each move carries the position it was played from (`state_before`),
+ * so the refilled table the second move starts on is drawn before it plays.
+ *
+ * ← and → walk back through the game — pure replay of positions this page has
+ * already produced (see ../ui/history.js), with no re-search and no effect on
+ * the live game.
+ */
+"use strict";
+import { animated, flyTiles, initSpeed, scaled, sleep } from "../ui/animate.js";
+import { createBoard, createMiddle } from "../ui/board.js";
+import { confirmOn } from "../ui/confirm.js";
+import {
+  CENTER,
+  COLORS,
+  CUM_PENALTY,
+  FLOOR,
+  markerChip,
+  node,
+  poolCount,
+  tileEl,
+} from "../ui/dom.js";
+import { bindHistoryKeys, createHistory } from "../ui/history.js";
+import { renderLog } from "../ui/log.js";
+import { popScore } from "../ui/popups.js";
+import { clearScoring, renderFinalPanel, renderRoundPanel } from "../ui/scoring.js";
+import { buildRecord, copyRecord, downloadRecord } from "./record.js";
+import { setSharing, shareOnLeave, shareRecord, sharingOn, warmCollector } from "./upload.js";
+import { createSettings } from "../ui/settings.js";
+import { createStatus } from "../ui/status.js";
+import { analyticsOn, statsUrl, track } from "./analytics.js";
+import { GameSession } from "./game.js";
+import { BACKENDS } from "./net.js";
+import { describeAction } from "./report.js";
+const el = (id) => document.getElementById(id);
+const ui = {
+  matchup: el("matchup"), setup: el("setup"), seed: el("seed"), first: el("first"),
+  think: el("think"), deal: el("deal"), engineBar: el("engine-bar"),
+  engineText: el("engine-text"), aboutMeta: el("about-meta"), middle: el("middle"),
+  prompt: el("prompt"), hint: el("hint"), cancel: el("cancel"), fly: el("fly"),
+  scoring: el("scoring"), log: el("log"), coach: el("coach"),
+  coachField: el("coach-field"), coachLegend: el("coach-legend"), counts: el("counts"),
+  record: el("record"), recordNote: el("record-note"),
+  recordSave: el("record-save"), recordCopy: el("record-copy"),
+  settings: el("settings"), nav: el("nav"),
+  hand: el("hand"), handTiles: el("hand-tiles"), pops: el("pops"),
+  confirm: el("confirm"), confirmBar: el("confirm-bar"),
+  confirmDetail: el("confirm-detail"), confirmCancel: el("confirm-cancel"),
+};
+let session = null;    // the GameSession that owns the rules
+let S = null;          // its last snapshot, what the page draws from
+let sel = null;        // {source, color} — tiles you are holding
+let suggestion = null; // {source, color, dest} from the policy head
+let busy = false;      // a move is being computed, or is still playing out
+let meta = null;       // model/model_meta.json
+let backend = null;    // {name, batch, margin, rate} — what the worker settled on
+let engineReady = false;
+let liveSims = 0;      // positions the current search has visited
+let coachOn = false;   // rate my moves with the AI's own search
+let notice = "";       // a passing message, shown in the band, never over the board
+let noticeTimer = null;
+let proposal = null;   // {id, move} — a placed move waiting for "Play this move"
+let committing = null; // the move whose held view stays up while its tiles fly
+let analysis = null;   // the coach reading the position while you think (see below)
+let navToken = 0;      // invalidates a history-step animation when another step lands
+initSpeed(); // before anything can animate: the stored speed, or 1×
+const status = createStatus(el("status"));
+const settings = createSettings(ui.settings, { popups: true, confirm: true, boards: true });
+// the AI's clock is a setting like any other, so it sits with the other knobs
+settings.panel.append(node("i", "settings-gap"), el("think-field"));
+/* Sharing games sits with the other knobs too. On by default, and the About
+ * panel says so: this is a research project, and finished (or abandoned)
+ * games are the research material. The switch is honoured by js/upload.js
+ * everywhere a record could leave the page. */
+settings.panel.append(
+  node("i", "settings-gap"),
+  node("span", "settings-label", "Share played games")
+);
+const shareGroup = node("div", "speeds");
+shareGroup.setAttribute("role", "group");
+shareGroup.setAttribute("aria-label", "Share played games");
+const shareButtons = [true, false].map((value) => {
+  const b = node("button", "flag", value ? "On" : "Off");
+  b.type = "button";
+  b.title = value
+    ? "When a game ends it is sent, anonymously, to the public training pile: " +
+      "the moves, the tiles that were dealt, which net played, and the score. Nothing else."
+    : "Nothing is sent. Games stay in this tab unless you save them yourself.";
+  b.addEventListener("click", () => {
+    setSharing(value);
+    syncShare();
+    say(value ? "sharing on: played games become training data" : "sharing off: nothing is sent");
+  });
+  shareGroup.appendChild(b);
+  return b;
+});
+settings.panel.append(shareGroup);
+function syncShare() {
+  shareButtons.forEach((b, i) => {
+    b.setAttribute("aria-pressed", String((i === 0) === sharingOn()));
+  });
+}
+syncShare();
+const middle = createMiddle(ui.middle, { onPick: pick });
+const boards = {
+  human: createBoard(el("board-human"), { seat: 0, interactive: true, onPlay: route }),
+  ai: createBoard(el("board-ai"), { seat: 1 }),
+};
+const nav = createHistory(ui.nav, {
+  log: () => (S && S.log) || [],
+  enabled: () => !busy,
+  onChange: onNavChange,
+});
+/* The coach's own clock, as in ludometer/gui/coach.py — but unlike the Python
+ * GUI it runs *after* the turn, in the background, so your move lands the
+ * moment you click it. It is still kept shorter than the opponent's budget. */
+const COACH_THINK_S = 2;
+const COACH_MAX_THINK_S = 3;
+const COACH_LEGEND =
+  "Coach mode rates your move with the AI's own search: 0.00 = the move it would " +
+  "have played, −1 ≈ a whole win thrown away. The coach reads the position while " +
+  "you think, so the verdict usually lands with your move.";
+/* ------------------------------------------------------------------ plumbing */
+/** A passing message. It goes in the status band's detail line — never a pop-up. */
+function say(message) {
+  notice = message || "";
+  if (noticeTimer) clearTimeout(noticeTimer);
+  if (notice) {
+    noticeTimer = setTimeout(() => {
+      notice = "";
+      if (S) renderStatus(nav.frame());
+    }, 6000);
+  }
+  if (S) renderStatus(nav.frame());
+}
+function setBusy(on) {
+  const changed = busy !== on;
+  busy = on;
+  document.body.classList.toggle("locked", on);
+  ui.deal.disabled = on || !engineReady;
+  ui.hint.disabled = on || !engineReady || !S || !S.your_turn;
+  nav.draw(); // browsing the history is off while tiles are in the air
+  // the tiles you may pick up depend on this, and unlocking has to give them
+  // back — safe here because tiles only ever fly while busy
+  if (changed && S) render();
+}
+/* ---------------------------------------------------------------- the worker */
+/* One worker, kept for the life of the page: it holds the 13 MB session, which
+ * is far too expensive to rebuild per move. Requests are matched by id. */
+const worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" });
+let nextId = 1;
+const pending = new Map();
+worker.onmessage = (event) => {
+  const msg = event.data;
+  const entry = pending.get(msg.id);
+  if (!entry) return;
+  if (msg.type === "loading" || msg.type === "progress") {
+    if (entry.onProgress) entry.onProgress(msg);
+    return;
+  }
+  pending.delete(msg.id);
+  if (msg.type === "error") entry.reject(new Error(msg.message));
+  else entry.resolve(msg);
+};
+worker.onerror = (event) => {
+  engineFailed(event.message || "the worker crashed");
+};
+function ask(message, onProgress) {
+  const id = nextId++;
+  return new Promise((resolve, reject) => {
+    pending.set(id, { resolve, reject, onProgress });
+    worker.postMessage({ ...message, id });
+  });
+}
+function engineFailed(reason) {
+  engineReady = false;
+  ui.engineBar.classList.remove("ready");
+  ui.engineBar.classList.add("failed");
+  ui.engineText.textContent = "The net could not be loaded: " + reason;
+  ui.deal.disabled = true;
+  ui.hint.disabled = true;
+  status.set({
+    headline: "The net could not be loaded",
+    detail: reason + ". Reload the page to try again.",
+    tone: "end",
+  });
+}
+async function bootEngine() {
+  status.set({ headline: "Loading the net", detail: "it runs in this tab, so it downloads once", tone: "idle" });
+  try {
+    meta = await (await fetch("model/model_meta.json", { cache: "no-cache" })).json();
+  } catch (err) {
+    meta = null;
+  }
+  describeModel();
+  const sizeMB = meta && meta.onnx_bytes ? (meta.onnx_bytes / 1e6).toFixed(1) : "13";
+  ui.engineText.textContent = `Downloading the net (${sizeMB} MB, cached after the first visit)…`;
+  let ready = null;
+  try {
+    ready = await ask(
+      {
+        type: "init",
+        // In preference order. The worker takes the first one that actually
+        // works in this browser and tells us which that was; a browser with no
+        // WebGPU never downloads the WebGPU runtime at all.
+        backends: ["webgpu", "wasm"].map((name) => ({
+          name,
+          ep: BACKENDS[name].ep,
+          module: new URL(BACKENDS[name].module, import.meta.url).href,
+          wasm: new URL(BACKENDS[name].wasm, import.meta.url).href,
+        })),
+        modelUrl: new URL("../model/model.onnx", import.meta.url).href,
+      },
+      (msg) => {
+        if (msg.type !== "loading") return;
+        // GitHub Pages gzips the .onnx, so content-length is the *compressed*
+        // size while `received` counts decompressed bytes: prefer the true size
+        // from the metadata, and never show more than 100%.
+        const total = (meta && meta.onnx_bytes) || msg.total;
+        if (!total) return;
+        const pct = Math.min(100, Math.round((msg.received / total) * 100));
+        ui.engineText.textContent = `Downloading the net: ${pct}% of ${(total / 1e6).toFixed(1)} MB`;
+        status.set({
+          headline: `Downloading the net: ${pct}%`,
+          detail: "nothing is sent anywhere; the net plays from your own machine",
+          tone: "idle",
+        });
+      }
+    );
+  } catch (err) {
+    engineFailed(err.message);
+    return;
+  }
+  engineReady = true;
+  backend = { name: ready.backend, batch: ready.batch, margin: !!ready.margin, rate: null };
+  ui.engineBar.classList.add("ready");
+  ui.engineText.textContent = engineLine();
+  describeModel();
+  ui.deal.disabled = false;
+  newGame();
+}
+/** Where the net is running, in the words a player would use. */
+function backendLabel() {
+  if (!backend) return "your CPU";
+  return backend.name === "webgpu" ? "your GPU (WebGPU)" : "your CPU (WebAssembly)";
+}
+function engineLine() {
+  const where = `searching on ${backendLabel()}`;
+  if (!meta) return `Net ready: ${where}.`;
+  const elo = typeof meta.elo === "number" ? `${meta.elo >= 0 ? "+" : ""}${Math.round(meta.elo)} Elo` : "unrated";
+  const params = meta.num_params ? `${(meta.num_params / 1e6).toFixed(1)}M parameters` : "";
+  const rate =
+    backend && backend.rate ? ` · ${Math.round(backend.rate).toLocaleString()} positions/s` : "";
+  return `${meta.run}/${meta.checkpoint} · ${elo} on our internal ladder · ${params} · ${where}${rate}`;
+}
+function describeModel() {
+  if (!meta) {
+    ui.aboutMeta.textContent = "";
+    return;
+  }
+  const bits = [
+    `${meta.run}/${meta.checkpoint}`,
+    meta.games ? `${Number(meta.games).toLocaleString()} self-play games` : null,
+    meta.num_params ? `${meta.num_params.toLocaleString()} parameters` : null,
+    meta.onnx_bytes ? `${(meta.onnx_bytes / 1e6).toFixed(1)} MB ONNX` : null,
+    meta.exported_at ? `exported ${meta.exported_at.slice(0, 10)}` : null,
+    // What the search is actually running on, and how hard: this is the number
+    // the thinking-time selector is really spending, so it belongs on the page
+    // rather than in a console log.
+    backend
+      ? `${backend.name === "webgpu" ? "WebGPU" : "WebAssembly"}, ${backend.batch} positions per pass`
+      : null,
+    backend && backend.rate ? `${Math.round(backend.rate).toLocaleString()} positions/s here` : null,
+    backend && backend.margin ? "margin head: decisive play" : null,
+  ].filter(Boolean);
+  ui.aboutMeta.textContent = bits.join(" · ");
+}
+/* ---------------------------------------------------------------- the boards */
+function aiLabel() {
+  return S && S.agent_name ? "AI · " + S.agent_name : "AI";
+}
+/** Fix the two boards' seats to this game's seating (you are always on the left). */
+function seatBoards() {
+  boards.human = createBoard(el("board-human"), {
+    seat: S.human_seat, interactive: true, onPlay: route,
+  });
+  boards.ai = createBoard(el("board-ai"), { seat: S.ai_seat });
+}
+/**
+ * Draw the page.
+ *
+ * There are two things it can be showing: the live game, or a position out of
+ * the history. Browsing is read-only by construction — the board is drawn from
+ * the frame with no legal actions and no selection, so there is nothing to
+ * click even before the buttons are disabled.
+ */
+/**
+ * Draw the page. The page is *always* a fully drawn position — never a limbo of
+ * floating clones (those scrolled apart from the table and collided with real
+ * tiles; see the hand tray and confirm mode below). Three positions can be on
+ * show: the live game; the live game with the selection lifted into the hand
+ * tray (`heldView`); or, in confirm mode, the position the placed move would
+ * leave (`placedView`), its new tiles glowing until you validate or cancel.
+ * Browsing the history is read-only by construction, as before.
+ */
+function render() {
+  if (!S) return;
+  const frame = nav.frame();
+  const live = !frame;
+  if (!live && proposal) proposal = null; // browsing abandons a placed move
+  const placed = live && proposal ? proposal.move : null;
+  const heldInfo = placed || !live ? null : sel ? pickInfo(sel.source, sel.color) : committing;
+  const base = live ? S.state : frame.state;
+  const st = placed ? placedView(placed) : base;
+  const mid = placed ? st : heldInfo ? heldView(heldInfo) : base;
+  renderStatus(frame);
+  syncBanner();
+  middle.render({
+    state: mid,
+    legalActions: live && !placed ? S.human_legal_actions : [],
+    canPick: live && S.your_turn && !base.is_terminal && !busy && !placed,
+    selection: null, // the hand tray *is* the selection; dimming forty tiles says less
+  });
+  renderHand(heldInfo);
+  boards.human.render({
+    state: st,
+    legalActions: live && !placed ? S.human_legal_actions : [],
+    selection: live && !placed ? sel : null,
+    title: "You",
+    toMove: live && !base.is_terminal && base.current_player === S.human_seat,
+    highlightRow: live && suggestion ? suggestion.dest : undefined,
+  });
+  if (placed) glowPlacement(placed);
+  boards.ai.render({
+    state: st,
+    title: aiLabel(),
+    toMove: live && !base.is_terminal && base.current_player === S.ai_seat,
+  });
+  renderCounts(st);
+  renderLog(ui.log, (live ? S.log : frame.log) || []);
+  ui.cancel.classList.toggle("hidden", !live || !sel || !!placed);
+  ui.hint.disabled = busy || !engineReady || !live || !S.your_turn || !!placed;
+  syncCoach();
+  if (live && !placed && suggestion) {
+    const dish = middle.sourceEl(suggestion.source);
+    if (dish) {
+      dish.classList.add("picked");
+      setTimeout(() => dish.classList.remove("picked"), 1600);
+    }
+  }
+  startAnalysis(); // with coach mode on and your turn, the coach starts reading
+}
+/** Draw one position and nothing else — a history frame, or a step in a turn. */
+function drawPosition(st) {
+  if (!st) return;
+  middle.render({ state: st, legalActions: [], canPick: false, selection: null });
+  boards.human.render({ state: st, title: "You", toMove: false });
+  boards.ai.render({ state: st, title: aiLabel(), toMove: false });
+  renderCounts(st);
+}
+function renderStatus(frame) {
+  const st = frame ? frame.state : S.state;
+  const info = S.opponent_info || {};
+  const rating = typeof info.elo === "number" ? " (" + Math.round(info.elo) + " Elo)" : "";
+  ui.matchup.textContent = "you versus " + S.agent_name + rating + " · seed " + S.seed;
+  status.setScore(st.scores[S.human_seat], st.scores[S.ai_seat], "You", "AI");
+  if (frame) {
+    status.set({
+      headline: "Viewing move " + frame.ply + " of " + frame.of,
+      detail: "← and → step through the game · End, or Latest, returns to play",
+      tone: "history",
+    });
+    ui.prompt.textContent = "This is a recorded position. The live game is untouched.";
+    return;
+  }
+  if (st.is_terminal) {
+    const mine = st.scores[S.human_seat];
+    const theirs = st.scores[S.ai_seat];
+    const verb = mine > theirs ? "You won " : theirs > mine ? "The AI won " : "A draw, ";
+    status.set({
+      headline: verb + mine + "–" + theirs,
+      detail: "The final scoring is below; the board stays exactly as it ended.",
+      tone: "end",
+    });
+    ui.prompt.textContent = "Deal again for another game.";
+    return;
+  }
+  if (S.your_turn) {
+    if (proposal) {
+      status.set({
+        headline: "Your move is placed",
+        detail: "This is the position it would leave. Validate or cancel below.",
+        tone: "you",
+      });
+      ui.prompt.textContent = "";
+      return;
+    }
+    status.set({
+      headline: sel
+        ? "Your turn: pick a row for your " + COLORS[sel.color] + " tiles"
+        : "Your turn: pick a colour",
+      detail: turnDetail(),
+      tone: "you",
+    });
+    ui.prompt.textContent = sel
+      ? "Or press Escape to put them back."
+      : "Take every tile of one colour from a factory, or from the middle.";
+  } else {
+    status.set({ headline: "The AI is choosing a move", detail: turnDetail(), tone: "ai" });
+    ui.prompt.textContent = "";
+  }
+}
+/** The line under the headline: where the game is, and what the AI just did. */
+function turnDetail() {
+  const st = S.state;
+  const bits = ["Round " + (st.round + 1), st.tiles_left + " tiles left on the table"];
+  const last = S.last_ai_move;
+  if (last) {
+    bits.push("AI " + last.text);
+    if (last.search_text) bits.push(last.search_text);
+  }
+  if (notice) bits.push(notice);
+  return bits.join(" · ");
+}
+/* One quiet line of totals — never per-colour counts, Rémi retired those. The
+ * lid keeps a real element (#lid-row) because discarded tiles fly to it. */
+function renderCounts(st) {
+  const sum = (counts) => counts.reduce((a, b) => a + b, 0);
+  ui.counts.innerHTML = "";
+  ui.counts.appendChild(node("span", "count", "Bag " + sum(st.bag)));
+  const lid = node("span", "count", "Lid " + sum(st.lid));
+  lid.id = "lid-row";
+  ui.counts.appendChild(lid);
+  ui.counts.appendChild(node("span", "count", st.tiles_left + " on the table"));
+}
+/* -------------------------------------------------------------- game control */
+/** Seconds the AI may think per move — 0 means "policy head, no search". */
+function currentThinkTime() {
+  const seconds = Number(ui.think.value);
+  return Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
+}
+/** The coach's budget for an opponent that thinks for `thinkTimeS` seconds. */
+function coachBudget() {
+  return Math.min(currentThinkTime() || COACH_THINK_S, COACH_MAX_THINK_S);
+}
+/** The AI's brain, handed to the session: one search request to the worker. */
+async function think(state, onThinking) {
+  const budgetS = session ? session.thinkTimeS : 0;
+  liveSims = 0;
+  const reply = await ask(
+    { type: budgetS > 0 ? "search" : "policy", setup: state.toSetup(), budgetS },
+    (msg) => {
+      if (msg.type !== "progress") return;
+      liveSims = msg.sims;
+      if (onThinking) onThinking(msg);
+    }
+  );
+  // The worker measures its own rate; the first real search is the first honest
+  // positions/s this machine has produced, so the page stops guessing at it.
+  if (backend && reply.search && reply.search.rate && !backend.rate) {
+    backend.rate = reply.search.rate;
+    ui.engineText.textContent = engineLine();
+    describeModel();
+  }
+  return { action: reply.action, search: reply.search };
+}
+function newGame(event) {
+  if (event) event.preventDefault();
+  if (!engineReady) {
+    say("the net is still loading");
+    return;
+  }
+  let seed = Math.floor(Math.random() * (1 << 30));
+  const typed = ui.seed.value.trim();
+  if (typed) {
+    if (!/^-?\d+$/.test(typed)) {
+      say("the seed must be a whole number");
+      return;
+    }
+    seed = Number(typed) >>> 0;
+  }
+  clearScoring(ui.scoring);
+  hideRecord();
+  // dealing over a live game abandons it; an abandoned game is position data
+  // worth keeping too, flagged unfinished (docs/HUGGINGFACE.md D5)
+  if (session && !session.state.isTerminal) shareRecord(currentRecord());
+  session = new GameSession({
+    seed,
+    humanPlaysFirst: ui.first.checked,
+    agentName: meta ? meta.checkpoint : "the net",
+    opponentInfo: meta ? { checkpoint: meta.checkpoint, elo: meta.elo, run: meta.run } : {},
+    thinkTimeS: currentThinkTime(),
+    think,
+  });
+  adopt({ reseat: true });
+  say("new tiles dealt");
+  track("game-start");
+  // the AI opens when you took the second seat
+  if (session.aiTurn) resumeIfPending();
+}
+function adopt(options) {
+  const first = !S || (options && options.reseat);
+  S = session.snapshot();
+  sel = null;
+  suggestion = null;
+  proposal = null;
+  committing = null; // the real position takes over from any derived view
+  if (first) {
+    seatBoards();
+    nav.reset();
+  }
+  noteFrames((options && options.moves) || []);
+  render();
+}
+/**
+ * File these moves' positions into the move history.
+ *
+ * Every move carries the position it was played from, and the position a move
+ * was played from is the position *after* the move before it — so ply k's frame
+ * is ply k+1's `state_before`, and the tail of the list is the live position.
+ * Nothing is recomputed and nothing is searched again.
+ */
+function noteFrames(moves) {
+  moves.forEach((m) => {
+    if (m && m.state_before && typeof m.ply === "number") nav.note(m.ply - 1, m.state_before);
+  });
+  nav.note(S.ply, S.state);
+}
+function pick(source, color) {
+  if (busy || !S || !S.your_turn || nav.browsing() || proposal) return;
+  suggestion = null;
+  if (sel && sel.source === source && sel.color === color) {
+    sel = null; // putting tiles back is instant and unambiguous
+    render();
+    return;
+  }
+  // capture the outgoing dish before the held view replaces it
+  const takenRects = middle.sourceTiles(source, color).map((t) => t.getBoundingClientRect());
+  const chip =
+    source === CENTER && S.state.marker_in_center
+      ? middle.centerEl().querySelector(".marker")
+      : null;
+  const markerRect = chip ? chip.getBoundingClientRect() : null;
+  const restRects = {};
+  if (source !== CENTER) {
+    middle.remainderTiles(source, color).forEach((t) => {
+      (restRects[t.dataset.color] = restRects[t.dataset.color] || []).push(
+        t.getBoundingClientRect()
+      );
+    });
+  }
+  sel = { source, color };
+  flyInto(() => {
+    const plan = [];
+    const handTiles = [].slice.call(ui.handTiles.querySelectorAll(".tile"));
+    takenRects.forEach((r, i) => plan.push([r, handTiles[i], color]));
+    if (markerRect) plan.push([markerRect, ui.handTiles.querySelector(".marker"), "marker"]);
+    Object.keys(restRects).forEach((c) => {
+      const now = middle.centerEl().querySelectorAll('.tile[data-color="' + c + '"]');
+      const olds = restRects[c];
+      olds.forEach((r, i) => plan.push([r, now[now.length - olds.length + i], Number(c)]));
+    });
+    return plan;
+  });
+}
+/* ---------------------------------------------------------- derived positions */
+/** What a pick moves, before it has a destination. */
+function pickInfo(source, color) {
+  return {
+    source,
+    color,
+    count: poolCount(S.state, source, color),
+    took_marker: source === CENTER && S.state.marker_in_center,
+  };
+}
+/** The live position with the selection lifted into the hand: the source pool
+ * emptied, a factory's leftovers pushed to the middle, a taken marker in hand. */
+function heldView(info) {
+  const st = structuredClone(S.state);
+  if (info.source === CENTER) {
+    st.center[info.color] = 0;
+    if (info.took_marker) st.marker_in_center = false;
+  } else {
+    const dish = st.factories[info.source];
+    dish[info.color] = 0;
+    for (let c = 0; c < COLORS.length; c++) {
+      st.center[c] += dish[c];
+      dish[c] = 0;
+    }
+  }
+  return st;
+}
+/** The position `move` would leave — what confirm mode draws while it waits. */
+function placedView(move) {
+  const st = heldView(move);
+  const me = st.players[S.human_seat];
+  if (move.dest !== FLOOR && move.placed) {
+    const line = me.pattern_lines[move.dest];
+    line.color = move.color;
+    line.count += move.placed;
+  }
+  if (move.to_floor) me.floor[move.color] += move.to_floor;
+  if (move.to_lid) st.lid[move.color] += move.to_lid;
+  if (move.took_marker) me.floor_marker = true;
+  const occupied =
+    me.floor.reduce((a, b) => a + b, 0) + (me.floor_marker ? 1 : 0);
+  me.floor_penalty = CUM_PENALTY[Math.min(7, occupied)];
+  st.tiles_left -= move.count;
+  return st;
+}
+/** The hand tray: the selection as real tiles, in the page, scrolling with it. */
+function renderHand(info) {
+  ui.handTiles.innerHTML = "";
+  if (!info || !info.count) {
+    ui.hand.hidden = true;
+    return;
+  }
+  for (let k = 0; k < info.count; k++) ui.handTiles.appendChild(tileEl(info.color));
+  if (info.took_marker) ui.handTiles.appendChild(markerChip(true));
+  ui.hand.hidden = false;
+}
+/** A soft light around the tiles a placed move just put down. */
+function glowPlacement(move) {
+  placedTiles(move).forEach((t) => t.classList.add("proposed"));
+}
+/** The placed move's own tiles on the freshly drawn board, in take order. */
+function placedTiles(move) {
+  const board = boards.human;
+  const out = [];
+  if (move.dest !== FLOOR && move.placed) {
+    out.push.apply(out, board.lineTiles(move.dest).slice(-move.placed));
+  }
+  if (move.to_floor) {
+    const mine = board.floorTiles().filter((t) => Number(t.dataset.color) === move.color);
+    out.push.apply(out, mine.slice(-move.to_floor));
+  }
+  if (move.took_marker) {
+    const floor = board.floorEl();
+    const chip = floor && floor.querySelector(".marker");
+    if (chip) out.push(chip);
+  }
+  return out;
+}
+/**
+ * Redraw, then fly clones from rectangles captured off the outgoing page to the
+ * elements `find()` names on the new one. The page is never *between* positions:
+ * the new position is drawn at once, and the pieces that moved are briefly
+ * covered while their clones travel. With animation off, the redraw is all.
+ */
+async function flyInto(find) {
+  render();
+  if (!animated()) return;
+  const plan = find() || [];
+  const flights = [];
+  const covered = [];
+  plan.forEach(([rect, target, color]) => {
+    if (!rect || !target) return;
+    if (target.style) {
+      target.style.visibility = "hidden";
+      covered.push(target);
+    }
+    flights.push({ from: rect, to: target, color, hide: false });
+  });
+  await flyTiles(flights, { layer: ui.fly });
+  covered.forEach((elm) => {
+    elm.style.visibility = "";
+  });
+}
+/* ------------------------------------------------------------- confirm mode */
+/**
+ * A row was clicked. With confirm mode off this *is* the move; with it on (the
+ * default) the page draws the position the move would leave — real tiles in
+ * their real places, the new ones glowing — and the banner under the middle
+ * asks for the word. Cancel goes all the way back to before the pick.
+ */
+function route(id) {
+  if (busy || !session || !S || !S.your_turn || nav.browsing() || proposal) return;
+  if (!confirmOn()) {
+    play(id);
+    return;
+  }
+  propose(id);
+}
+/** The banner a placed move answers to. It swaps in for the action row's usual
+ * controls (see board.css), so showing it never moves the page. */
+function syncBanner() {
+  const on = !!proposal && !busy;
+  ui.confirmBar.hidden = !on;
+  ui.confirmBar.parentElement.classList.toggle("placing", on);
+  if (on) {
+    ui.confirmDetail.textContent =
+      "You " + proposal.move.text + ". Nothing is final until you play it.";
+  }
+}
+/** Place the move: draw its position, glow its tiles, and wait for the word. */
+function propose(id) {
+  const move = describeAction(session.state, id);
+  // take-off points: the hand tray the selection is sitting in
+  const rects = [].slice
+    .call(ui.handTiles.querySelectorAll(".tile"))
+    .map((t) => t.getBoundingClientRect());
+  const chip = ui.handTiles.querySelector(".marker");
+  const markerRect = chip ? chip.getBoundingClientRect() : null;
+  proposal = { id, move };
+  sel = null; // a placed move is validated or cancelled whole
+  flyInto(() => {
+    const landed = placedTiles(move);
+    const lidRect =
+      move.to_lid > 0 ? lidTarget().getBoundingClientRect() : null;
+    const plan = [];
+    rects.forEach((r, i) => {
+      // in take order: the row, then the floor; overflow melts into the lid
+      const target = landed[i] || lidRect;
+      plan.push([r, target, move.color]);
+    });
+    if (markerRect) {
+      const floor = boards.human.floorEl();
+      plan.push([markerRect, floor && floor.querySelector(".marker"), "marker"]);
+    }
+    return plan;
+  });
+}
+/** The banner's Cancel: all the way back, as if nothing had been picked. */
+function cancelMove() {
+  proposal = null;
+  sel = null;
+  suggestion = null;
+  render();
+}
+/**
+ * One turn: your move — applied and animated at once — then the AI's reply.
+ *
+ * The tiles are animated from the *current* DOM, before the new state is drawn,
+ * so what you see leaving the dish is what actually left it. With coach mode on
+ * the position is snapshotted first and the rating is queued: it runs on the
+ * worker *after* the AI has replied, and fills in on the move's log entry —
+ * nothing about your move, the board or the animations ever waits for it.
+ */
+async function play(id) {
+  if (busy || !session || !S || !S.your_turn || nav.browsing()) return;
+  const move = describeAction(session.state, id);
+  const committed = !!(proposal && proposal.id === id); // a validated placement
+  // the direct path takes off from the hand the selection is sitting in
+  const fromHand = !committed && !ui.hand.hidden;
+  const handRects = fromHand
+    ? [].slice.call(ui.handTiles.querySelectorAll(".tile")).map((t) => t.getBoundingClientRect())
+    : null;
+  const handChip = fromHand ? ui.handTiles.querySelector(".marker") : null;
+  const markerRect = handChip ? handChip.getBoundingClientRect() : null;
+  if (!committed) committing = move; // keeps the held view up while the tiles fly
+  sel = null;
+  suggestion = null;
+  setBusy(true);
+  clearScoring(ui.scoring);
+  try {
+    const setupBefore = coachOn ? session.state.toSetup() : null;
+    // the coach's head start covers exactly this position: stop it where it
+    // stands (the opponent needs the worker) and grade from what it read.
+    // Cancelled even if coach mode was switched off meanwhile — a stale
+    // analysis must never keep the opponent waiting.
+    const reading =
+      analysis && analysis.forSession === session && analysis.ply === S.ply
+        ? analysis
+        : null;
+    if (reading) worker.postMessage({ type: "cancel" });
+    const headStart = coachOn ? reading : null;
+    const { move: applied, reports } = session.playHuman(id);
+    const entry = session.log[applied.log_n];
+    if (setupBefore && entry) {
+      if (headStart) {
+        entry.coach = { pending: true };
+        finishFromAnalysis(headStart, id, entry, setupBefore);
+      } else {
+        queueRating(setupBefore, id, entry);
+      }
+    }
+    const takeoff = committed
+      ? { skip: true }
+      : handRects
+        ? { fromRects: handRects, markerRect }
+        : null;
+    await settle([applied], boards.human, reports, "human", takeoff);
+    if (session.aiTurn) await runAiTurn();
+  } catch (err) {
+    status.stopClock();
+    say(err.message);
+    adopt();
+  } finally {
+    committing = null;
+    setBusy(false);
+    resumeIfPending(); // a failed search leaves the AI owing a move
+    flushRatings(); // now the table is quiet, let the coach think
+  }
+}
+/** If the position says the AI still owes a move, let it move. */
+async function resumeIfPending() {
+  if (busy || !session || !session.aiTurn) return;
+  setBusy(true);
+  try {
+    await runAiTurn();
+  } catch (err) {
+    status.stopClock();
+    say(err.message);
+    adopt();
+  } finally {
+    setBusy(false);
+  }
+}
+/** The AI's turn: the clock runs in the status band, then its move plays out. */
+async function runAiTurn() {
+  const firstReport = session.roundReports.length;
+  const budget = session.thinkTimeS;
+  liveSims = 0;
+  const thinking = session.aiReplies();
+  status.set({ headline: "The AI is thinking", detail: turnDetail(), tone: "ai", keepClock: true });
+  status.startClock({
+    budget,
+    label: (spent, cap) => {
+      // it is your CPU doing the work, so the band says how much work that is
+      const counted = liveSims ? " · " + liveSims.toLocaleString() + " positions" : "";
+      return cap
+        ? "AI is thinking: " + spent.toFixed(1) + "s of " + cap + "s" + counted
+        : "AI is picking a move";
+    },
+  });
+  let moves;
+  try {
+    moves = await thinking;
+  } finally {
+    status.stopClock();
+  }
+  await settle(moves, boards.ai, session.reportsSince(firstReport), "ai");
+}
+/**
+ * Play a list of moves out on the table, one after another.
+ *
+ * The AI can move twice in a row — a round boundary is resolved inside the
+ * engine's `apply`, and the next round is opened by whoever holds the marker.
+ * Its second move is therefore played on a table that was scored and refilled
+ * inside the first one, and which this page had never drawn. Each move carries
+ * the position it was played from, so we draw that first and then animate: both
+ * moves are shown, in order, from the right board.
+ */
+async function playMoves(moves, board, reports, mover, takeoff) {
+  let taken = 0;
+  for (let i = 0; i < moves.length; i++) {
+    const move = moves[i];
+    if (i > 0 && move.state_before) {
+      drawPosition(move.state_before);
+      await sleep(420); // a beat, so the refilled table registers as a new one
+    }
+    if (mover === "ai") {
+      status.set({
+        headline: "AI " + move.text,
+        detail: move.search_text || turnDetail(),
+        tone: "ai",
+      });
+    }
+    await animateTake(move, board, middle, i === 0 ? takeoff : null);
+    // an observability hook, so a test can prove that *every* move animates —
+    // including the second of the AI's double move across a round boundary
+    document.dispatchEvent(
+      new CustomEvent("azul:animated", { detail: { ply: move.ply, side: move.side } })
+    );
+    if (move.ended_round && reports[taken]) {
+      const report = reports[taken++];
+      status.set({
+        headline: "Round " + (report.round + 1) + " scoring",
+        detail: "full lines move to the wall, the floor line goes to the lid",
+        tone: "scoring",
+      });
+      await animateTiling(report);
+    }
+  }
+}
+/** Play out `moves`, then show the position they led to and the round's scoring. */
+async function settle(moves, board, reports, mover, takeoff) {
+  await playMoves(moves, board, reports, mover, takeoff);
+  adopt({ moves });
+  if (reports.length) {
+    const last = reports[reports.length - 1];
+    flashWall(last);
+    if (!last.game_over) renderRoundPanel(ui.scoring, last, sides());
+  }
+  if (S.state.is_terminal && S.final) {
+    renderFinalPanel(ui.scoring, S.final, sides());
+    showRecord();
+    // the research bargain, honoured at the moment it matters: the finished
+    // game goes to the training pile (unless Settings says no), fire and forget
+    shareRecord(currentRecord());
+    // one coarse path per net and outcome (so the dashboard can show win
+    // rates per model), with the score line as the hit's detail
+    const model = meta ? meta.run + "-" + meta.checkpoint : "unknown";
+    const result =
+      S.final.winner_side === "human"
+        ? "human-wins"
+        : S.final.winner_side === "ai"
+          ? "net-wins"
+          : "draw";
+    track("game-end/" + model + "/" + result, {
+      title:
+        S.state.scores[S.human_seat] + "–" + S.state.scores[S.ai_seat] +
+        " in " + S.final.rounds_played + " rounds",
+    });
+  } else if (mover === "ai" && S.last_ai_move) {
+    // let the AI's own move stand as the headline for a beat before your turn
+    status.set({ headline: "AI " + S.last_ai_move.text, detail: turnDetail(), tone: "ai" });
+    await sleep(500);
+  }
+  render();
+}
+function sides() {
+  return [[S.human_seat, "You"], [S.ai_seat, aiLabel()]];
+}
+/* ---------------------------------------------------------------- coach mode */
+/* Same definition as the local GUI (ludometer/gui/coach.py): the search runs on
+ * the position *before* your move was applied — snapshotted at the moment you
+ * clicked — and the verdict is the gap between your move's Q at the root and
+ * the best explored child's. The difference is *when*: the rating is queued and
+ * runs on the worker after the opponent has replied, so your move, the flights
+ * and the AI's answer never wait for it. Until it lands, the move's log entry
+ * says "rating…". */
+const ratings = []; // {setup, actionId, entry, forSession} still to be rated
+let ratingNow = false;
+function queueRating(setup, actionId, entry) {
+  if (!entry) return;
+  entry.coach = { pending: true };
+  ratings.push({ setup, actionId, entry, forSession: session });
+}
+/** Work the rating queue, one search at a time. Reentry-safe; never throws. */
+async function flushRatings() {
+  if (ratingNow) return;
+  ratingNow = true;
+  try {
+    while (ratings.length) {
+      const job = ratings.shift();
+      let verdict;
+      try {
+        const reply = await ask({
+          type: "rate",
+          setup: job.setup,
+          actionId: job.actionId,
+          budgetS: coachBudget(),
+        });
+        verdict = reply.coach;
+      } catch (err) {
+        verdict = { unrated: true, reason: err.message };
+      }
+      job.entry.coach = verdict;
+      // the entry lives in the session's own log, so any later redraw shows the
+      // verdict; redraw now only if the table is quiet and still this game's
+      if (job.forSession === session && S && !busy) render();
+    }
+  } finally {
+    ratingNow = false;
+  }
+}
+/* The coach's head start. The rating search runs on the position *before* your
+ * move and only reads the played move out of the finished tree afterwards — so
+ * it can run while you are still choosing. `startAnalysis` kicks it off the
+ * moment it is your turn (idempotent per position); when you move, the search
+ * is cancelled where it stands, the opponent gets the worker back, and the
+ * verdict is read from whatever tree had grown. A tree too thin to be honest
+ * (you moved within a fraction of a second) falls back to the old post-move
+ * rating, so the verdict is never worse than it used to be. */
+const ANALYSIS_MIN_SIMS = 400;
+function startAnalysis() {
+  if (!coachOn || !engineReady || busy || !session || !S || !S.your_turn) return;
+  if (analysis && analysis.forSession === session && analysis.ply === S.ply) return;
+  const job = { forSession: session, ply: S.ply, budgetS: coachBudget() };
+  job.promise = ask({ type: "analyze", setup: session.state.toSetup(), budgetS: job.budgetS })
+    .then((reply) => reply.analysis)
+    .catch(() => null);
+  analysis = job;
+}
+/** The verdict `rate` would have given, read out of an analyzed tree. */
+function verdictFrom(a, budgetS, actionId) {
+  const base = { budgetS, legal: a.legal, sims: a.sims, elapsedS: a.elapsedS };
+  if (a.forced) return { ...base, delta: 0, forced: true };
+  const explored = a.children || [];
+  if (!explored.length) {
+    return { ...base, unrated: true, reason: "the search had no time to explore this position" };
+  }
+  const best = explored.reduce((x, y) => (y.q > x.q ? y : x));
+  const mine = explored.find((c) => c.action === actionId);
+  if (!mine) {
+    return { ...base, unrated: true, reason: "the search never explored this move" };
+  }
+  return {
+    ...base,
+    delta: Math.min(0, mine.q - best.q),
+    your_q: mine.q,
+    best_q: best.q,
+    visits: mine.visits,
+    best_visits: best.visits,
+    best_text: a.best_text,
+    explored: explored.length,
+  };
+}
+/** Settle a move's verdict from the head-start analysis — or fall back. */
+async function finishFromAnalysis(job, actionId, entry, setup) {
+  const a = await job.promise;
+  if (!a || (!a.forced && a.sims < ANALYSIS_MIN_SIMS)) {
+    // the move came faster than the coach could read: judge it the old way
+    queueRating(setup, actionId, entry);
+    flushRatings();
+    return;
+  }
+  entry.coach = verdictFrom(a, job.budgetS, actionId);
+  if (job.forSession === session && S && !busy) render();
+}
+function syncCoach() {
+  ui.coach.checked = coachOn;
+  ui.coach.disabled = !engineReady;
+  ui.coachField.classList.toggle("off", !coachOn);
+  ui.coachLegend.textContent = COACH_LEGEND;
+  ui.coachLegend.hidden = !coachOn;
+}
+/* --------------------------------------------------------------------- hints */
+/** The policy head's own pick, shown as a suggestion (one forward pass). */
+async function askHint() {
+  if (!session || !S || !S.your_turn || busy || nav.browsing() || proposal) return;
+  setBusy(true);
+  try {
+    const reply = await ask({ type: "policy", setup: session.state.toSetup() });
+    const move = describeAction(session.state, reply.action);
+    suggestion = { source: move.source, color: move.color, dest: move.dest };
+    sel = { source: move.source, color: move.color };
+    render();
+    say("the policy head would " + move.text);
+  } catch (err) {
+    say(err.message);
+  } finally {
+    setBusy(false);
+  }
+}
+/* ----------------------------------------------------------------- animation */
+function lidTarget() {
+  return document.getElementById("lid-row") || ui.counts;
+}
+/** Where a move's tiles are going, in landing order: line, then floor, then lid. */
+function travelTargets(board, move) {
+  const targets = [];
+  if (move.dest !== FLOOR && move.placed) {
+    const slots = board.lineSlots(move.dest);
+    targets.push.apply(targets, slots.slice(Math.max(0, slots.length - move.placed)));
+  }
+  const floorSlots = board.floorSlots();
+  let taken = move.took_marker ? 1 : 0; // the marker claims the first free slot
+  while (targets.length < move.count && taken < floorSlots.length) {
+    targets.push(floorSlots[taken++]);
+  }
+  const lid = lidTarget();
+  while (targets.length < move.count) targets.push(lid); // the rest overflow to the lid
+  return targets;
+}
+/**
+ * Tiles leave a dish; everything else in that dish is pushed into the middle.
+ *
+ * Both halves matter: the tiles you took travel to your board, and the dish's
+ * *remainder* travels to the centre. Watching the leftovers arrive in the
+ * middle is how you learn what the next player can take.
+ *
+ * `takeoff` says where this story already got to. `{skip: true}` is a validated
+ * placement — the board has shown the final position since the tiles were
+ * placed, so nothing moves. `{fromRects, markerRect}` is a selection sitting in
+ * the hand tray — the tiles continue from there, and the leftovers, already
+ * drawn in the middle by the held view, stay put. `null` is the AI (or a bare
+ * page): everything flies from the dish, as it always has.
+ */
+async function animateTake(move, board, table, takeoff) {
+  if (takeoff && takeoff.skip) {
+    // a validated placement: the board has been showing exactly this position
+    // since the tiles were placed, so there is nothing left to move
+    popFloorCost(move, board);
+    return;
+  }
+  const dish = table.sourceEl(move.source);
+  const row = board.lineRow(move.dest);
+  if (dish) dish.classList.add("picked");
+  if (row) row.classList.add("incoming");
+  const targets = travelTargets(board, move);
+  let flights;
+  if (takeoff && takeoff.fromRects) {
+    // the selection was sitting in the hand tray; it continues from there, and
+    // the tray empties the moment the tiles push off
+    ui.hand.hidden = true;
+    ui.handTiles.innerHTML = "";
+    flights = takeoff.fromRects.map((r, i) => ({ from: r, to: targets[i], color: move.color }));
+    if (move.took_marker && takeoff.markerRect) {
+      const slot = board.floorSlots()[0];
+      if (slot) flights.push({ from: takeoff.markerRect, to: slot, color: "marker" });
+    }
+  } else {
+    // the AI's move (or a hintless page state): straight from the dish
+    const taken = table.sourceTiles(move.source, move.color, move.count);
+    flights = taken.map((from, i) => ({ from, to: targets[i], color: move.color }));
+    const centreEl = table.centerEl();
+    table.remainderTiles(move.source, move.color).forEach((from) => {
+      flights.push({ from, to: centreEl, color: Number(from.dataset.color) });
+    });
+    if (move.took_marker) {
+      const chip = centreEl.querySelector(".marker");
+      const slot = board.floorSlots()[0];
+      if (chip && slot) flights.push({ from: chip, to: slot, color: "marker" });
+    }
+  }
+  await flyTiles(flights, { layer: ui.fly });
+  popFloorCost(move, board);
+  if (dish) dish.classList.remove("picked");
+  if (row) row.classList.remove("incoming");
+}
+/** What this move just added to the floor bill, popped off the floor line. */
+function popFloorCost(move, board) {
+  const dropped = (move.to_floor || 0) + (move.took_marker ? 1 : 0);
+  if (!dropped || !move.state_before) return;
+  const me = move.state_before.players[move.player];
+  if (!me) return;
+  const occupied = me.floor.reduce((a, b) => a + b, 0) + (me.floor_marker ? 1 : 0);
+  const cost =
+    CUM_PENALTY[Math.min(7, occupied + dropped)] - CUM_PENALTY[Math.min(7, occupied)];
+  if (!cost) return;
+  popScore(ui.pops, board.floorEl(), String(cost).replace("-", "−"), "loss");
+}
+/* ------------------------------------------------- animated history steps */
+/**
+ * A step through the history plays its move — forwards, or in reverse.
+ *
+ * The plan is read from the *outgoing* frame's DOM before the target frame is
+ * drawn; the target is then rendered immediately (browsing must never feel
+ * slower than the keypress), and the moved tiles fly over the finished board
+ * from where they were to where they now are. A step that crosses a round
+ * boundary just redraws — half the board changes there, and a lone flight
+ * would tell less of the story than the scoring panel already did.
+ */
+function onNavChange(change) {
+  const token = ++navToken;
+  const plan = change ? planNavStep(change) : null;
+  render();
+  if (plan) flyNavStep(plan, token);
+}
+function planNavStep(change) {
+  if (!animated() || !S) return null;
+  const delta = change.to - change.from;
+  if (Math.abs(delta) !== 1) return null;
+  const ply = Math.max(change.from, change.to); // the move between the two frames
+  const entry = (S.log || []).find((e) => e.kind === "move" && e.ply === ply);
+  if (!entry || typeof entry.color !== "number") return null;
+  const a = nav.stateAt(change.from);
+  const b = nav.stateAt(change.to) || (change.to === nav.latest() ? S.state : null);
+  if (!a || !b || a.round !== b.round) return null;
+  const board = entry.side === "human" ? boards.human : boards.ai;
+  const placed = Math.max(0, entry.count - (entry.overflow || 0));
+  const floorCount = entry.dest === FLOOR ? entry.count : entry.overflow || 0;
+  let from;
+  if (delta > 0) {
+    // forwards: the tiles leave the dish they were taken from
+    from = middle.sourceTiles(entry.source, entry.color, entry.count);
+  } else {
+    // backwards: they leave the row (and the floor) they had landed on
+    const rowTiles = entry.dest !== FLOOR ? board.lineTiles(entry.dest).slice(-placed) : [];
+    from = rowTiles.concat(floorCount ? board.floorTiles().slice(-floorCount) : []);
+  }
+  const rects = from.map((elm) => elm.getBoundingClientRect());
+  return { dir: delta, entry, board, placed, floorCount, rects };
+}
+/** Fly a planned step over the already-rendered target frame. */
+async function flyNavStep(plan, token) {
+  if (token !== navToken) return;
+  const { entry, board } = plan;
+  let dests;
+  if (plan.dir > 0) {
+    const rowTiles =
+      entry.dest !== FLOOR ? board.lineTiles(entry.dest).slice(-plan.placed) : [];
+    dests = rowTiles.concat(
+      plan.floorCount ? board.floorTiles().slice(-plan.floorCount) : []
+    );
+  } else {
+    dests = middle.sourceTiles(entry.source, entry.color, entry.count);
+  }
+  const flights = [];
+  const covered = [];
+  dests.forEach((elm, i) => {
+    const from = plan.rects[i];
+    if (!from || !elm) return;
+    elm.style.visibility = "hidden"; // the flight is this tile, mid-journey
+    covered.push(elm);
+    flights.push({ from, to: elm, color: entry.color, hide: false });
+  });
+  await flyTiles(flights, { layer: ui.fly, duration: 300, stagger: 35 });
+  covered.forEach((elm) => {
+    elm.style.visibility = "";
+  });
+}
+/** Round end: full lines travel to the wall, the floor line travels to the lid —
+ * each wall tile popping its points as it lands, each floor line its bill.
+ * One player is scored completely — wall, floor bill, lid — before the other
+ * starts, the way a table is counted in real life, so you can follow along. */
+async function animateTiling(report) {
+  if (!report) return;
+  const lidEl = lidTarget();
+  // with the tiles not animating, the pops still tell the arithmetic one step
+  // at a time — this offset keeps the second player's count after the first's
+  let beatOffset = 0;
+  for (const [seat, board] of [[S.human_seat, boards.human], [S.ai_seat, boards.ai]]) {
+    const player = report.players[seat];
+    if (!player) continue;
+    const wall = [];
+    const pops = [];
+    player.tiles.forEach((t) => {
+      const tiles = board.lineTiles(t.row);
+      const from = tiles[tiles.length - 1] || board.lineRow(t.row);
+      const to = board.wallCell(t.row, t.col);
+      if (from && to) {
+        wall.push({ from, to, color: t.color, hide: false });
+        // a rect, not the element: the pop may outlive this render of the cell
+        pops.push({ at: to.getBoundingClientRect(), text: "+" + t.points });
+      }
+    });
+    const lid = board.floorTiles().map((from) => ({
+      from, to: lidEl, color: Number(from.dataset.color),
+    }));
+    // each "+N" appears as its tile touches down — or on a steady beat when
+    // the tiles are not animating
+    const land = scaled(520);
+    const beat = scaled(70);
+    pops.forEach((p, i) => {
+      setTimeout(
+        () => popScore(ui.pops, p.at, p.text),
+        land ? land + i * beat : beatOffset + i * 240
+      );
+    });
+    beatOffset += pops.length * 240;
+    await flyTiles(wall, { layer: ui.fly, duration: 520, stagger: 70 });
+    if (player.floor.penalty) {
+      popScore(ui.pops, board.floorEl(), String(player.floor.penalty).replace("-", "−"), "loss");
+    }
+    if (lid.length) {
+      lidEl.classList.add("receiving");
+      await flyTiles(lid, { layer: ui.fly, duration: 420, stagger: 40 });
+      setTimeout(() => lidEl.classList.remove("receiving"), 400);
+    }
+  }
+}
+/** The tiles that just reached the wall glaze over as they land. */
+function flashWall(report) {
+  [[S.human_seat, boards.human], [S.ai_seat, boards.ai]].forEach(([seat, board]) => {
+    const player = report.players[seat];
+    if (!player) return;
+    player.tiles.forEach((t, i) => {
+      const cell = board.wallTile(t.row, t.col);
+      if (!cell) return;
+      cell.style.animationDelay = i * 70 + "ms";
+      cell.classList.add("landing");
+    });
+  });
+}
+/* ------------------------------------------------------------- game records */
+/* A finished game is data worth keeping, so the page offers it as a file. It is
+ * offered, never sent: see js/record.js for why that distinction is load-bearing.
+ * The record is built on demand, so it always describes the position as it
+ * stands, and browsing the history does not change it (the navigator replays,
+ * it never mutates the session). */
+/** The current game as a record, or null before the first deal. */
+function currentRecord() {
+  if (!session) return null;
+  return buildRecord(session, { net: meta || {}, backend: backend ? backend.name : null });
+}
+/** What the row under a finished game says depends on the sharing switch. */
+function recordInvite() {
+  return sharingOn()
+    ? "Finished, and shared: the moves, the tiles that were dealt, and which " +
+        "net you played are on their way to the public training pile. Thank " +
+        "you. You can keep a copy too, or turn sharing off in Settings."
+    : "Finished. Sharing is off, so nothing was sent. If you would like this " +
+        "game to help train the net, you can save it and send it to me, or " +
+        "turn sharing on in Settings.";
+}
+function showRecord() {
+  ui.recordNote.textContent = recordInvite();
+  ui.record.classList.remove("done");
+  ui.record.hidden = false;
+}
+function hideRecord() {
+  ui.record.hidden = true;
+  ui.record.classList.remove("done");
+}
+/** Say what happened, in the row itself — this page has no toasts. */
+function recordSaid(message) {
+  ui.recordNote.textContent = message;
+  ui.record.classList.add("done");
+}
+/* A tiny public handle. It exists so the browser tests can pull the record out
+ * of a real game and replay it, and it costs a curious player nothing to find. */
+window.faience = { record: currentRecord, log: () => (session ? session.log : []) };
+/* -------------------------------------------------------------------- wiring */
+ui.recordSave.addEventListener("click", () => {
+  const record = currentRecord();
+  if (!record) return;
+  recordSaid(
+    downloadRecord(record)
+      ? "Saved. A copy of the game is yours to keep, or to send to me if sharing is off."
+      : "This browser would not save the file. Try Copy as text instead."
+  );
+});
+ui.recordCopy.addEventListener("click", async () => {
+  const record = currentRecord();
+  if (!record) return;
+  const ok = await copyRecord(record);
+  recordSaid(
+    ok
+      ? "Copied. Paste it anywhere; a GitHub issue on the repo still reaches me."
+      : "This browser would not let the page copy. Use Save this game instead."
+  );
+});
+/* The way out: a tab closed or navigated away mid-game still counts. The game
+ * has no outcome, so it goes flagged unfinished, by beacon (built for exactly
+ * this moment), and never blocks the navigation. A finished game was already
+ * shared when it ended, so terminal positions send nothing here. */
+window.addEventListener("pagehide", () => {
+  if (session && !session.state.isTerminal) shareOnLeave(currentRecord());
+});
+// wake the collector while the first game is still being dealt, and deliver
+// any game a previous visit could not (the Space may have been asleep)
+warmCollector();
+ui.setup.addEventListener("submit", newGame);
+ui.think.addEventListener("change", () => {
+  if (session) session.thinkTimeS = currentThinkTime();
+  if (S) render();
+});
+ui.hint.addEventListener("click", askHint);
+ui.confirm.addEventListener("click", () => {
+  if (!proposal || busy) return;
+  play(proposal.id); // play() reads the proposal itself; it stays up until the
+  // real position takes over, so the board never flashes back
+});
+ui.confirmCancel.addEventListener("click", cancelMove);
+ui.cancel.addEventListener("click", () => {
+  sel = null;
+  suggestion = null;
+  render();
+});
+ui.coach.addEventListener("change", () => {
+  coachOn = ui.coach.checked;
+  syncCoach();
+  startAnalysis(); // switched on mid-turn: start reading this position now
+  say(
+    coachOn
+      ? "coach mode on: your moves are scored by the AI's own search"
+      : "coach mode off"
+  );
+});
+document.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") return;
+  if (nav.browsing()) {
+    nav.toLatest();
+    return;
+  }
+  if (proposal && !busy) {
+    cancelMove(); // all the way back, same as the banner's Cancel
+    return;
+  }
+  if (sel) {
+    sel = null;
+    suggestion = null;
+    render();
+  }
+});
+// ← / → / End walk the game, exactly as they do in a chess client
+bindHistoryKeys(nav, { enabled: () => !busy });
+// The corner buttons: "?" walks you to the What-this-is panel; the bars open
+// the public tally. If the tally is ever switched off (COUNT_URL emptied), the
+// page stops pointing at it — it never claims a transparency it does not keep.
+el("corner-about").addEventListener("click", () => {
+  const about = el("about");
+  about.scrollIntoView({ behavior: "smooth", block: "start" });
+  about.classList.add("lit");
+  setTimeout(() => about.classList.remove("lit"), 1600);
+});
+if (analyticsOn()) {
+  el("corner-stats").href = statsUrl();
+  track("pageview");
+} else {
+  el("corner-stats").remove();
+  const note = el("tally-note");
+  if (note) note.remove();
+}
+syncCoach();
+bootEngine();

js/engine.js ADDED Viewed

	@@ -0,0 +1,788 @@

+/* Azul rules engine — a line-by-line port of ludometer/azul/engine.py.
+ *
+ * Official 2-player rules (docs/DESIGN.md). Same action encoding
+ * (`action_id = source * 30 + color * 6 + dest`) and, crucially, the same
+ * 182-float observation layout, because the ONNX net in ../model/ was trained on
+ * exactly those numbers: a single misplaced offset would leave the search
+ * evaluating garbage while still looking like it works.
+ *
+ * The port is proven, not asserted: scripts/dump_fixtures.py plays seeded games
+ * with the Python engine and records every state, legal-action list, encoding and
+ * outcome; test/engine.test.mjs replays them here and demands an exact match.
+ *
+ * Chance. The Python engine keeps all randomness in one `random.Random` that is
+ * only consumed at a round refill. Here the RNG is an injected object with
+ * `shuffle` / `clone`, which is what lets three callers coexist: the page uses a
+ * seeded PRNG, MCTS reshuffles a clone's bag to determinize a refill, and the
+ * fixture test replays Python's own shuffles so the two engines see identical
+ * deals (JS cannot reproduce the Mersenne Twister, and it does not need to —
+ * only the rules are under test).
+ *
+ * Colors are 0..4 = blue, yellow, red, black, teal.
+ */
+export const NUM_COLORS = 5;
+export const TILES_PER_COLOR = 20;
+export const NUM_FACTORIES = 5; // 2-player count
+export const FACTORY_SIZE = 4;
+export const NUM_ROWS = 5;
+export const CENTER = 5; // action `source` value for the center
+export const FLOOR = 5; // action `dest` value for the floor line
+export const ACTION_SPACE = 180; // source (6) * color (5) * dest (6)
+export const ENCODED_SIZE = 182;
+export const FLOOR_PENALTIES = [-1, -1, -2, -2, -2, -3, -3];
+export const FLOOR_SLOTS = FLOOR_PENALTIES.length;
+export const CUM_PENALTY = (() => {
+  const out = [0];
+  for (const p of FLOOR_PENALTIES) out.push(out[out.length - 1] + p);
+  return out;
+})();
+export const COLOR_NAMES = ["blue", "yellow", "red", "black", "teal"];
+export const ROW_BONUS = 2;
+export const COL_BONUS = 7;
+export const COLOR_BONUS = 10;
+/** Flat wall lookup: WALL_IDX[color * 5 + row] -> index into the 25-cell wall. */
+export const WALL_IDX = (() => {
+  const out = new Int32Array(NUM_COLORS * NUM_ROWS);
+  for (let c = 0; c < NUM_COLORS; c++) {
+    for (let r = 0; r < NUM_ROWS; r++) out[c * 5 + r] = r * 5 + ((c + r) % 5);
+  }
+  return out;
+})();
+export function wallCol(color, row) {
+  return (color + row) % NUM_COLORS;
+}
+export function encodeAction(source, color, dest) {
+  return source * 30 + color * 6 + dest;
+}
+export function decodeAction(actionId) {
+  const source = Math.floor(actionId / 30);
+  const rest = actionId - source * 30;
+  const color = Math.floor(rest / 6);
+  return [source, color, rest - color * 6];
+}
+/* ------------------------------------------------------------ lookup tables */
+/* _ACTION_TABLE[source][color][open_mask] -> the ready-made action ids (pattern
+ * rows in ascending order, floor last), mirroring the Python hot path so the
+ * legal-action *order* matches too, not just the set. */
+const _ALL_ROWS = (1 << NUM_ROWS) - 1;
+const _ACTION_TABLE = [];
+for (let src = 0; src < 6; src++) {
+  const perSource = [];
+  for (let c = 0; c < NUM_COLORS; c++) {
+    const perColor = [];
+    for (let mask = 0; mask < 1 << NUM_ROWS; mask++) {
+      const ids = [];
+      for (let r = 0; r < NUM_ROWS; r++) if ((mask >> r) & 1) ids.push(src * 30 + c * 6 + r);
+      ids.push(src * 30 + c * 6 + FLOOR);
+      perColor.push(ids);
+    }
+    perSource.push(perColor);
+  }
+  _ACTION_TABLE.push(perSource);
+}
+/* _AND_KEEP[color][row]: AND-masks closing `row` for every color but `color`. */
+const _AND_KEEP = [];
+for (let c = 0; c < NUM_COLORS; c++) {
+  const perColor = [];
+  for (let r = 0; r < NUM_ROWS; r++) {
+    const masks = [];
+    for (let c2 = 0; c2 < NUM_COLORS; c2++) masks.push(c2 === c ? _ALL_ROWS : _ALL_ROWS ^ (1 << r));
+    perColor.push(masks);
+  }
+  _AND_KEEP.push(perColor);
+}
+/* _AND_CLOSE[row]: closes `row` for every color (the line is full / tiled). */
+const _AND_CLOSE = [];
+for (let r = 0; r < NUM_ROWS; r++) {
+  const masks = [];
+  for (let c = 0; c < NUM_COLORS; c++) masks.push(_ALL_ROWS ^ (1 << r));
+  _AND_CLOSE.push(masks);
+}
+/* --------------------------------------------------------------------- RNG */
+/**
+ * Small seeded PRNG (mulberry32) with the bits the engine needs.
+ *
+ * It is *not* Python's Mersenne Twister — the two engines deal different tiles
+ * from the same seed, which is fine: reproducibility is per-engine, and the
+ * fixture test hands the JS side Python's recorded shuffles instead.
+ */
+export class Rng {
+  constructor(seed = 0) {
+    this.seed(seed);
+  }
+  seed(n) {
+    this.state = (Number(n) >>> 0) || 0x9e3779b9;
+    return this;
+  }
+  /** uint32 */
+  next() {
+    this.state = (this.state + 0x6d2b79f5) >>> 0;
+    let t = this.state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return (t ^ (t >>> 14)) >>> 0;
+  }
+  /** float in [0, 1) */
+  random() {
+    return this.next() / 4294967296;
+  }
+  /** int in [0, n) */
+  randrange(n) {
+    return this.next() % n;
+  }
+  /** Fisher-Yates, in place (same loop shape as random.shuffle). */
+  shuffle(arr) {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = this.randrange(i + 1);
+      const tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+    }
+    return arr;
+  }
+  clone() {
+    const other = new Rng(0);
+    other.state = this.state;
+    return other;
+  }
+}
+/**
+ * An RNG that replays a recorded list of shuffle *results* (fixtures only).
+ *
+ * `shuffle(bag)` overwrites the bag with the next recorded ordering, so the JS
+ * engine deals exactly what Python dealt without owning Python's RNG.
+ */
+export class ScriptedRng {
+  constructor(shuffles) {
+    this.shuffles = shuffles;
+    this.index = 0;
+  }
+  seed() {
+    return this;
+  }
+  shuffle(arr) {
+    if (this.index >= this.shuffles.length) {
+      throw new Error(`ScriptedRng ran out of recorded shuffles (${this.index})`);
+    }
+    const next = this.shuffles[this.index++];
+    if (next.length !== arr.length) {
+      throw new Error(`recorded shuffle #${this.index - 1} has ${next.length} tiles, bag has ${arr.length}`);
+    }
+    for (let i = 0; i < next.length; i++) arr[i] = next[i];
+    return arr;
+  }
+  clone() {
+    const other = new ScriptedRng(this.shuffles);
+    other.index = this.index;
+    return other;
+  }
+}
+/* ------------------------------------------------------------------- state */
+export class AzulState {
+  /** Deal a new 2-player game. `rng` defaults to a fresh seeded `Rng`. */
+  static newGame(seed = 0, rng = null) {
+    const self = new AzulState();
+    self.numPlayers = 2;
+    self.rng = rng || new Rng(seed);
+    self.bag = [];
+    for (let c = 0; c < NUM_COLORS; c++) {
+      for (let i = 0; i < TILES_PER_COLOR; i++) self.bag.push(c);
+    }
+    self.rng.shuffle(self.bag);
+    self.lid = [0, 0, 0, 0, 0];
+    self.factories = [];
+    for (let i = 0; i < NUM_FACTORIES; i++) self.factories.push([0, 0, 0, 0, 0]);
+    self.center = [0, 0, 0, 0, 0];
+    self.markerInCenter = true;
+    self.walls = [new Array(25).fill(0), new Array(25).fill(0)];
+    self.plColor = [new Array(NUM_ROWS).fill(-1), new Array(NUM_ROWS).fill(-1)];
+    self.plCount = [new Array(NUM_ROWS).fill(0), new Array(NUM_ROWS).fill(0)];
+    self.floor = [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];
+    self.floorMarker = [false, false];
+    self.openMask = [new Array(NUM_COLORS).fill(_ALL_ROWS), new Array(NUM_COLORS).fill(_ALL_ROWS)];
+    self.scores = [0, 0];
+    self.currentPlayer = 0;
+    self.firstPlayer = 0;
+    self.roundIndex = 0;
+    self.isTerminal = false;
+    self.exhausted = false;
+    self.tilesLeft = 0;
+    self._refill();
+    return self;
+  }
+  /**
+   * Build a state from an explicit field dump (fixtures and tests only).
+   *
+   * The Python engine lets tests hand-edit `factories` / `center` / `pl_*` /
+   * `walls` and then call `recount()`; this is the same door, so a fixture can
+   * put the engine in a position random play would essentially never reach
+   * (an all-monochrome round end, a bag that runs dry, a wall one tile short).
+   */
+  static fromSetup(setup, rng = null) {
+    const self = new AzulState();
+    self.numPlayers = 2;
+    self.rng = rng || new Rng(0);
+    self.bag = setup.bag.slice();
+    self.lid = setup.lid.slice();
+    self.factories = setup.factories.map((f) => f.slice());
+    self.center = setup.center.slice();
+    self.markerInCenter = setup.marker_in_center;
+    self.walls = setup.walls.map((w) => w.slice());
+    self.plColor = setup.pl_color.map((x) => x.slice());
+    self.plCount = setup.pl_count.map((x) => x.slice());
+    self.floor = setup.floor.map((f) => f.slice());
+    self.floorMarker = setup.floor_marker.slice();
+    self.openMask = [new Array(NUM_COLORS).fill(_ALL_ROWS), new Array(NUM_COLORS).fill(_ALL_ROWS)];
+    self.scores = setup.scores.slice();
+    self.currentPlayer = setup.current_player;
+    self.firstPlayer = setup.first_player;
+    self.roundIndex = setup.round_index;
+    self.isTerminal = Boolean(setup.is_terminal);
+    self.exhausted = Boolean(setup.exhausted);
+    self.tilesLeft = 0;
+    self.recount();
+    return self;
+  }
+  /** The inverse of `fromSetup`: a structured-clone-safe field dump. */
+  toSetup() {
+    return {
+      bag: this.bag.slice(),
+      lid: this.lid.slice(),
+      factories: this.factories.map((f) => f.slice()),
+      center: this.center.slice(),
+      marker_in_center: this.markerInCenter,
+      walls: this.walls.map((w) => w.slice()),
+      pl_color: this.plColor.map((x) => x.slice()),
+      pl_count: this.plCount.map((x) => x.slice()),
+      floor: this.floor.map((f) => f.slice()),
+      floor_marker: this.floorMarker.slice(),
+      scores: this.scores.slice(),
+      current_player: this.currentPlayer,
+      first_player: this.firstPlayer,
+      round_index: this.roundIndex,
+      is_terminal: this.isTerminal,
+      exhausted: this.exhausted,
+    };
+  }
+  /** Rebuild the derived caches (`tilesLeft` and the placement masks). */
+  recount() {
+    let total = this.center[0] + this.center[1] + this.center[2] + this.center[3] + this.center[4];
+    for (const f of this.factories) total += f[0] + f[1] + f[2] + f[3] + f[4];
+    this.tilesLeft = total;
+    for (let p = 0; p < this.numPlayers; p++) this._rebuildMask(p);
+  }
+  /** Deep-enough copy: every mutable container is duplicated. */
+  clone() {
+    const other = new AzulState();
+    other.numPlayers = this.numPlayers;
+    other.rng = this.rng.clone();
+    other.bag = this.bag.slice();
+    other.lid = this.lid.slice();
+    other.factories = this.factories.map((f) => f.slice());
+    other.center = this.center.slice();
+    other.markerInCenter = this.markerInCenter;
+    other.walls = this.walls.map((w) => w.slice());
+    other.plColor = this.plColor.map((x) => x.slice());
+    other.plCount = this.plCount.map((x) => x.slice());
+    other.floor = this.floor.map((f) => f.slice());
+    other.floorMarker = this.floorMarker.slice();
+    other.openMask = this.openMask.map((m) => m.slice());
+    other.scores = this.scores.slice();
+    other.currentPlayer = this.currentPlayer;
+    other.firstPlayer = this.firstPlayer;
+    other.roundIndex = this.roundIndex;
+    other.isTerminal = this.isTerminal;
+    other.exhausted = this.exhausted;
+    other.tilesLeft = this.tilesLeft;
+    return other;
+  }
+  _rebuildMask(player) {
+    const wall = this.walls[player];
+    const plc = this.plColor[player];
+    const pln = this.plCount[player];
+    const masks = this.openMask[player];
+    for (let c = 0; c < NUM_COLORS; c++) {
+      const base = c * 5;
+      let m = 0;
+      for (let r = 0; r < NUM_ROWS; r++) {
+        const n = pln[r];
+        if (n <= r && (n === 0 || plc[r] === c) && !wall[WALL_IDX[base + r]]) m |= 1 << r;
+      }
+      masks[c] = m;
+    }
+  }
+  /* ---------------------------------------------------------- legal moves */
+  legalActions() {
+    if (this.isTerminal) return [];
+    const masks = this.openMask[this.currentPlayer];
+    const out = [];
+    for (let src = 0; src < NUM_FACTORIES; src++) {
+      const pool = this.factories[src];
+      const table = _ACTION_TABLE[src];
+      for (let c = 0; c < NUM_COLORS; c++) {
+        if (pool[c]) {
+          const ids = table[c][masks[c]];
+          for (let i = 0; i < ids.length; i++) out.push(ids[i]);
+        }
+      }
+    }
+    const pool = this.center;
+    const table = _ACTION_TABLE[CENTER];
+    for (let c = 0; c < NUM_COLORS; c++) {
+      if (pool[c]) {
+        const ids = table[c][masks[c]];
+        for (let i = 0; i < ids.length; i++) out.push(ids[i]);
+      }
+    }
+    return out;
+  }
+  isLegal(actionId) {
+    if (this.isTerminal || !(actionId >= 0 && actionId < ACTION_SPACE)) return false;
+    const [src, color, dest] = decodeAction(actionId);
+    const pool = src === CENTER ? this.center : this.factories[src];
+    if (pool[color] === 0) return false;
+    if (dest === FLOOR) return true;
+    const p = this.currentPlayer;
+    const n = this.plCount[p][dest];
+    if (n > dest) return false;
+    if (n && this.plColor[p][dest] !== color) return false;
+    return !this.walls[p][WALL_IDX[color * 5 + dest]];
+  }
+  /* ---------------------------------------------------------------- moves */
+  /** Play `actionId`, then resolve round end / refill / game end as needed. */
+  apply(actionId) {
+    if (this.isTerminal) throw new Error("game is over");
+    if (!(actionId >= 0 && actionId < ACTION_SPACE)) throw new Error(`action ${actionId} out of range`);
+    const src = Math.floor(actionId / 30);
+    const rest = actionId - src * 30;
+    const color = Math.floor(rest / 6);
+    const dest = rest - color * 6;
+    const p = this.currentPlayer;
+    const pool = src === CENTER ? this.center : this.factories[src];
+    const count = pool[color];
+    if (count === 0) throw new Error(`no color ${color} at source ${src}`);
+    if (dest !== FLOOR) {
+      const held = this.plCount[p][dest];
+      if (held > dest) throw new Error(`pattern line ${dest} is full`);
+      if (held && this.plColor[p][dest] !== color) throw new Error(`pattern line ${dest} holds another color`);
+      if (this.walls[p][WALL_IDX[color * 5 + dest]]) throw new Error(`color ${color} already on wall row ${dest}`);
+    }
+    // --- take the tiles
+    pool[color] = 0;
+    if (src === CENTER) {
+      if (this.markerInCenter) {
+        this.markerInCenter = false;
+        this.floorMarker[p] = true;
+      }
+    } else {
+      const cen = this.center;
+      for (let c = 0; c < NUM_COLORS; c++) {
+        const n = pool[c];
+        if (n) {
+          cen[c] += n;
+          pool[c] = 0;
+        }
+      }
+    }
+    this.tilesLeft -= count;
+    // --- place them
+    let overflow;
+    if (dest !== FLOOR) {
+      const pln = this.plCount[p];
+      const room = dest + 1 - pln[dest];
+      this.plColor[p][dest] = color;
+      let keep;
+      if (count < room) {
+        pln[dest] += count;
+        overflow = 0;
+        keep = _AND_KEEP[color][dest];
+      } else {
+        pln[dest] = dest + 1;
+        overflow = count - room;
+        keep = _AND_CLOSE[dest];
+      }
+      const masks = this.openMask[p];
+      masks[0] &= keep[0];
+      masks[1] &= keep[1];
+      masks[2] &= keep[2];
+      masks[3] &= keep[3];
+      masks[4] &= keep[4];
+    } else {
+      overflow = count;
+    }
+    if (overflow) {
+      const fl = this.floor[p];
+      let occupied = fl[0] + fl[1] + fl[2] + fl[3] + fl[4];
+      if (this.floorMarker[p]) occupied += 1;
+      const room = FLOOR_SLOTS - occupied;
+      if (overflow <= room) {
+        fl[color] += overflow;
+      } else if (room > 0) {
+        fl[color] += room;
+        this.lid[color] += overflow - room;
+      } else {
+        this.lid[color] += overflow;
+      }
+    }
+    // --- round / game transitions
+    if (this.tilesLeft) this.currentPlayer = 1 - p;
+    else this._endRound(p);
+  }
+  /* --------------------------------------------------------- round logic */
+  _endRound(lastMover) {
+    const lid = this.lid;
+    for (let q = 0; q < this.numPlayers; q++) {
+      const wall = this.walls[q];
+      const plc = this.plColor[q];
+      const pln = this.plCount[q];
+      let gain = 0;
+      for (let r = 0; r < NUM_ROWS; r++) {
+        if (pln[r] !== r + 1) continue;
+        const c = plc[r];
+        const idx = WALL_IDX[c * 5 + r];
+        wall[idx] = 1;
+        const rowBase = r * 5;
+        const col = idx - rowBase;
+        let h = 1;
+        for (let i = col - 1; i >= 0 && wall[rowBase + i]; i--) h += 1;
+        for (let i = col + 1; i < 5 && wall[rowBase + i]; i++) h += 1;
+        let v = 1;
+        for (let i = r - 1; i >= 0 && wall[i * 5 + col]; i--) v += 1;
+        for (let i = r + 1; i < 5 && wall[i * 5 + col]; i++) v += 1;
+        if (h > 1 || v > 1) gain += (h > 1 ? h : 0) + (v > 1 ? v : 0);
+        else gain += 1;
+        lid[c] += r; // the r leftover tiles of the line
+        plc[r] = -1;
+        pln[r] = 0;
+      }
+      const fl = this.floor[q];
+      let occupied = fl[0] + fl[1] + fl[2] + fl[3] + fl[4];
+      if (this.floorMarker[q]) occupied += 1;
+      gain += CUM_PENALTY[Math.min(FLOOR_SLOTS, occupied)];
+      for (let c = 0; c < NUM_COLORS; c++) {
+        const n = fl[c];
+        if (n) {
+          lid[c] += n;
+          fl[c] = 0;
+        }
+      }
+      const total = this.scores[q] + gain;
+      this.scores[q] = Math.max(0, total);
+      this._rebuildMask(q);
+    }
+    // who starts next round: the marker holder (marker goes back to the center)
+    let holder = null;
+    for (let q = 0; q < this.numPlayers; q++) {
+      if (this.floorMarker[q]) {
+        this.floorMarker[q] = false;
+        holder = q;
+      }
+    }
+    if (holder === null) holder = 1 - lastMover;
+    this.firstPlayer = holder;
+    this.markerInCenter = true;
+    this.currentPlayer = holder;
+    if (this._anyRowComplete()) {
+      this._finish();
+      return;
+    }
+    this.roundIndex += 1;
+    this._refill();
+    if (this.tilesLeft === 0) {
+      // No tiles anywhere: cannot deal another round, stop the game.
+      this.exhausted = true;
+      this._finish();
+    }
+  }
+  _anyRowComplete() {
+    for (const wall of this.walls) {
+      for (const base of [0, 5, 10, 15, 20]) {
+        if (wall[base] && wall[base + 1] && wall[base + 2] && wall[base + 3] && wall[base + 4]) return true;
+      }
+    }
+    return false;
+  }
+  _finish() {
+    for (let q = 0; q < this.numPlayers; q++) {
+      this.scores[q] +=
+        ROW_BONUS * this.completedRows(q) + COL_BONUS * this.completedCols(q) + COLOR_BONUS * this.completedColors(q);
+    }
+    this.isTerminal = true;
+  }
+  _refill() {
+    const bag = this.bag;
+    const lid = this.lid;
+    let total = 0;
+    for (const f of this.factories) {
+      for (let k = 0; k < FACTORY_SIZE; k++) {
+        if (!bag.length) {
+          for (let c = 0; c < NUM_COLORS; c++) {
+            const n = lid[c];
+            if (n) {
+              for (let i = 0; i < n; i++) bag.push(c);
+              lid[c] = 0;
+            }
+          }
+          if (!bag.length) {
+            this.tilesLeft = total;
+            return;
+          }
+          this.rng.shuffle(bag);
+        }
+        f[bag.pop()] += 1;
+        total += 1;
+      }
+    }
+    this.tilesLeft = total;
+  }
+  /* ---------------------------------------------------------- inspection */
+  floorOccupied(player) {
+    const fl = this.floor[player];
+    return fl[0] + fl[1] + fl[2] + fl[3] + fl[4] + (this.floorMarker[player] ? 1 : 0);
+  }
+  floorPenalty(player) {
+    return CUM_PENALTY[Math.min(FLOOR_SLOTS, this.floorOccupied(player))];
+  }
+  completedRows(player) {
+    const wall = this.walls[player];
+    let n = 0;
+    for (const base of [0, 5, 10, 15, 20]) {
+      if (wall[base] && wall[base + 1] && wall[base + 2] && wall[base + 3] && wall[base + 4]) n += 1;
+    }
+    return n;
+  }
+  completedCols(player) {
+    const wall = this.walls[player];
+    let n = 0;
+    for (let col = 0; col < 5; col++) {
+      if (wall[col] && wall[col + 5] && wall[col + 10] && wall[col + 15] && wall[col + 20]) n += 1;
+    }
+    return n;
+  }
+  completedColors(player) {
+    const wall = this.walls[player];
+    let done = 0;
+    for (let c = 0; c < NUM_COLORS; c++) {
+      const base = c * 5;
+      let all = true;
+      for (let r = 0; r < NUM_ROWS; r++) {
+        if (!wall[WALL_IDX[base + r]]) {
+          all = false;
+          break;
+        }
+      }
+      if (all) done += 1;
+    }
+    return done;
+  }
+  /** +1 if player 0 wins, -1 if player 1 wins, 0 for a draw, null if unfinished. */
+  outcome() {
+    if (!this.isTerminal) return null;
+    const s0 = this.scores[0];
+    const s1 = this.scores[1];
+    if (s0 !== s1) return s0 > s1 ? 1.0 : -1.0;
+    const r0 = this.completedRows(0);
+    const r1 = this.completedRows(1);
+    if (r0 !== r1) return r0 > r1 ? 1.0 : -1.0;
+    return 0.0;
+  }
+  bagCounts() {
+    const counts = [0, 0, 0, 0, 0];
+    for (const c of this.bag) counts[c] += 1;
+    return counts;
+  }
+  /* ------------------------------------------------------------ encoding */
+  /**
+   * Fixed-size float32 observation from the current player's perspective.
+   *
+   * The offsets below are the OFF_* constants of ludometer/azul/engine.py and
+   * must never drift from them — the exported net reads this vector verbatim.
+   *
+   *   [  0:  25)  my wall, row-major 5x5           [126: 151)  factories /4
+   *   [ 25:  50)  their wall                       [151: 156)  factory non-empty
+   *   [ 50:  80)  my pattern lines (one-hot, fill)  [156: 161)  center counts /10
+   *   [ 80: 110)  their pattern lines               [161: 162)  center total /20
+   *   [110: 117)  my floor (counts /7, slots, mark) [162: 163)  marker in center
+   *   [117: 124)  their floor                       [163: 168)  bag counts /20
+   *   [124: 126)  scores /100                       [168: 173)  lid counts /20
+   *                                                 [173: 174)  tiles left /20
+   *                                                 [174: 175)  I start next round
+   *                                                 [175: 176)  round /10
+   *                                                 [176: 179)  my rows/cols/colors /5
+   *                                                 [179: 182)  theirs
+   */
+  encode(out = null) {
+    const v = out || new Float32Array(ENCODED_SIZE);
+    if (out) v.fill(0);
+    const me = this.currentPlayer;
+    const op = 1 - me;
+    const myWall = this.walls[me];
+    const opWall = this.walls[op];
+    for (let i = 0; i < 25; i++) {
+      v[i] = myWall[i];
+      v[25 + i] = opWall[i];
+    }
+    for (const [off, p] of [[50, me], [80, op]]) {
+      const plc = this.plColor[p];
+      const pln = this.plCount[p];
+      for (let r = 0; r < NUM_ROWS; r++) {
+        const n = pln[r];
+        if (n) {
+          const base = off + r * 6;
+          v[base + plc[r]] = 1.0;
+          v[base + 5] = n / (r + 1);
+        }
+      }
+    }
+    for (const [off, p] of [[110, me], [117, op]]) {
+      const fl = this.floor[p];
+      for (let c = 0; c < NUM_COLORS; c++) {
+        if (fl[c]) v[off + c] = fl[c] / FLOOR_SLOTS;
+      }
+      v[off + 5] = Math.min(this.floorOccupied(p), FLOOR_SLOTS) / FLOOR_SLOTS;
+      v[off + 6] = this.floorMarker[p] ? 1.0 : 0.0;
+    }
+    v[124] = this.scores[me] / 100.0;
+    v[125] = this.scores[op] / 100.0;
+    for (let i = 0; i < NUM_FACTORIES; i++) {
+      const f = this.factories[i];
+      const base = 126 + i * 5;
+      let total = 0;
+      for (let c = 0; c < NUM_COLORS; c++) {
+        const n = f[c];
+        if (n) {
+          v[base + c] = n / FACTORY_SIZE;
+          total += n;
+        }
+      }
+      if (total) v[151 + i] = 1.0;
+    }
+    let cenTotal = 0;
+    for (let c = 0; c < NUM_COLORS; c++) {
+      const n = this.center[c];
+      if (n) {
+        v[156 + c] = n / 10.0;
+        cenTotal += n;
+      }
+    }
+    v[161] = cenTotal / 20.0;
+    v[162] = this.markerInCenter ? 1.0 : 0.0;
+    const bag = this.bagCounts();
+    for (let c = 0; c < NUM_COLORS; c++) {
+      v[163 + c] = bag[c] / TILES_PER_COLOR;
+      v[168 + c] = this.lid[c] / TILES_PER_COLOR;
+    }
+    v[173] = this.tilesLeft / 20.0;
+    v[174] = this.floorMarker[me] || this.firstPlayer === me ? 1.0 : 0.0;
+    v[175] = Math.min(this.roundIndex, 10) / 10.0;
+    for (const [off, p] of [[176, me], [179, op]]) {
+      v[off] = this.completedRows(p) / 5.0;
+      v[off + 1] = this.completedCols(p) / 5.0;
+      v[off + 2] = this.completedColors(p) / 5.0;
+    }
+    return v;
+  }
+  /* -------------------------------------------------------------- display */
+  /** Full state as plain data — the shape the old server's /api/state sent. */
+  toJSON() {
+    const players = [];
+    for (let p = 0; p < this.numPlayers; p++) {
+      const wall = [];
+      for (let r = 0; r < NUM_ROWS; r++) wall.push(this.walls[p].slice(r * 5, r * 5 + 5));
+      const patternLines = [];
+      for (let r = 0; r < NUM_ROWS; r++) {
+        patternLines.push({ capacity: r + 1, color: this.plColor[p][r], count: this.plCount[p][r] });
+      }
+      players.push({
+        score: this.scores[p],
+        wall,
+        pattern_lines: patternLines,
+        floor: this.floor[p].slice(),
+        floor_marker: this.floorMarker[p],
+        floor_penalty: this.floorPenalty(p),
+        completed_rows: this.completedRows(p),
+        completed_cols: this.completedCols(p),
+        completed_colors: this.completedColors(p),
+      });
+    }
+    return {
+      round: this.roundIndex,
+      current_player: this.currentPlayer,
+      first_player: this.firstPlayer,
+      factories: this.factories.map((f) => f.slice()),
+      center: this.center.slice(),
+      marker_in_center: this.markerInCenter,
+      bag: this.bagCounts(),
+      lid: this.lid.slice(),
+      tiles_left: this.tilesLeft,
+      scores: this.scores.slice(),
+      is_terminal: this.isTerminal,
+      exhausted: this.exhausted,
+      outcome: this.outcome(),
+      legal_actions: this.legalActions(),
+      color_names: COLOR_NAMES.slice(),
+      players,
+    };
+  }
+}

js/game.js ADDED Viewed

	@@ -0,0 +1,243 @@

+/* One human-vs-AI game, held in the page — a port of ludometer/gui/session.py.
+ *
+ * The Python GUI kept this object on a Flask server and shipped snapshots over
+ * /api/state. Here it lives in the tab: same state, same log, same round-end
+ * reports, no network. The only real difference is that the AI's move is awaited
+ * from a Web Worker instead of an HTTP request, which is why `aiReply` takes
+ * callbacks rather than returning everything at once.
+ *
+ * Turn flow: the human plays one action, then the AI replies. Players alternate
+ * *within* a round, but a round boundary is resolved inside `apply`, and the next
+ * round is started by whoever holds the first-player marker — which can be the AI
+ * twice in a row. Hence the AI reply is a loop, not a single move.
+ */
+import { AzulState, Rng, ACTION_SPACE } from "./engine.js";
+import { describeAction, finalReport, roundReport } from "./report.js";
+const MAX_AI_REPLIES = 12; // safety net; 2 is already unusual
+export class IllegalMove extends Error {}
+export class GameSession {
+  /**
+   * @param {object} opts
+   * @param {number} opts.seed
+   * @param {boolean} opts.humanPlaysFirst
+   * @param {string} opts.agentName
+   * @param {object} opts.opponentInfo  {checkpoint, elo, run, ...} for the blurb
+   * @param {number} opts.thinkTimeS
+   * @param {(state) => Promise<number>} opts.think  asks the AI for one action
+   */
+  constructor(opts) {
+    this.seed = opts.seed >>> 0;
+    this.agentName = opts.agentName || "the net";
+    this.opponentInfo = opts.opponentInfo || {};
+    this.thinkTimeS = Number(opts.thinkTimeS) || 0;
+    this.think = opts.think;
+    this.humanPlaysFirst = opts.humanPlaysFirst !== false;
+    this.humanSeat = this.humanPlaysFirst ? 0 : 1;
+    this.aiSeat = 1 - this.humanSeat;
+    this.state = AzulState.newGame(this.seed, new Rng(this.seed));
+    this.ply = 0;
+    this.log = [];
+    this.roundReports = [];
+    this.lastAiMoves = [];
+    /* Every round's deal, written down as it happens. This page shuffles with
+     * mulberry32 and Python shuffles with the Mersenne Twister, so a seed alone
+     * does not carry a game across; the deals do. See js/record.js. */
+    this.deals = [];
+    this._recordDeal();
+    this._logEntry(
+      "start",
+      `New game: you are player ${this.humanSeat + 1}, the AI (${this.agentName}) is player ${this.aiSeat + 1}. ` +
+        `${this.humanPlaysFirst ? "You" : "The AI"} start${this.humanPlaysFirst ? "" : "s"}.`
+    );
+    if (this.opponentBlurb) this._logEntry("start", this.opponentBlurb);
+  }
+  /* -------------------------------------------------------------- helpers */
+  _logEntry(kind, text, extra = {}) {
+    const entry = { n: this.log.length, kind, text, ...extra };
+    this.log.push(entry);
+    return entry;
+  }
+  /** One line naming the checkpoint behind the opponent. */
+  get opponentBlurb() {
+    const info = this.opponentInfo;
+    if (!info || !info.checkpoint) return "";
+    const elo = typeof info.elo === "number" ? `, rated ${info.elo >= 0 ? "+" : ""}${Math.round(info.elo)} on our internal ladder` : "";
+    const thinking = this.thinkTimeS ? ` It thinks for ${this.thinkTimeS}s per move, in this tab.` : " It replies from the policy head, with no search.";
+    return `You're facing ${info.checkpoint}${elo}.${thinking}`;
+  }
+  /** Snapshot the tiles this round was dealt, with the bag and lid behind it. */
+  _recordDeal() {
+    const state = this.state;
+    if (state.isTerminal) return;
+    if (this.deals.some((d) => d.round === state.roundIndex)) return;
+    this.deals.push({
+      round: state.roundIndex,
+      factories: state.factories.map((f) => f.slice()),
+      // per colour, not the shuffled tile list: a converter checks conservation
+      bag: state.bagCounts(),
+      lid: state.lid.slice(),
+    });
+  }
+  sideOf(player) {
+    return player === this.humanSeat ? "human" : "ai";
+  }
+  labelOf(player) {
+    return player === this.humanSeat ? "You" : "AI";
+  }
+  get humanTurn() {
+    return !this.state.isTerminal && this.state.currentPlayer === this.humanSeat;
+  }
+  get aiTurn() {
+    return !this.state.isTerminal && this.state.currentPlayer === this.aiSeat;
+  }
+  legalForHuman() {
+    return this.humanTurn ? this.state.legalActions() : [];
+  }
+  /* ---------------------------------------------------------------- moves */
+  _apply(actionId) {
+    const state = this.state;
+    const player = state.currentPlayer;
+    if (!state.isLegal(actionId)) throw new IllegalMove(`action ${actionId} is not legal right now`);
+    const move = describeAction(state, actionId);
+    move.side = this.sideOf(player);
+    move.label = this.labelOf(player);
+    const before = state.clone();
+    const roundBefore = state.roundIndex;
+    // The position this move was played from — the page animates from it. When
+    // the AI moves twice across a round boundary, its second move starts from a
+    // refilled table that `apply` produced inside the first and that nothing
+    // ever drew; this is how both moves get animated. It doubles as the move
+    // history the ← / → navigator replays.
+    move.state_before = before.toJSON();
+    state.apply(actionId);
+    this.ply += 1;
+    move.ply = this.ply;
+    const entry = this._logEntry("move", `${move.label} ${move.text}`, {
+      side: move.side,
+      player,
+      action_id: actionId,
+      ply: this.ply,
+      // what the log draws as little tiles instead of colour words
+      color: move.color,
+      count: move.count,
+      source: move.source,
+      dest: move.dest,
+      overflow: move.overflow,
+      took_marker: move.took_marker,
+    });
+    move.log_n = entry.n;
+    move.ended_round = state.roundIndex !== roundBefore || state.isTerminal;
+    if (move.ended_round) {
+      const report = roundReport(before, move);
+      report.game_over = state.isTerminal;
+      report.next_first_player = state.firstPlayer;
+      report.scores_after = state.scores.slice();
+      report.labels = [this.labelOf(0), this.labelOf(1)];
+      report.sides = [this.sideOf(0), this.sideOf(1)];
+      this.roundReports.push(report);
+      const you = report.players[this.humanSeat];
+      const ai = report.players[this.aiSeat];
+      const sign = (n) => (n >= 0 ? `+${n}` : String(n));
+      this._logEntry(
+        "round",
+        `End of round ${report.round + 1}: you ${sign(you.delta)} → ${you.score_after}, AI ${sign(ai.delta)} → ${ai.score_after}.`,
+        // every entry carries its ply, so the move navigator can show the log as
+        // it stood at any point in the game
+        { round: report.round, report_n: this.roundReports.length - 1, ply: this.ply }
+      );
+      // a fresh round was dealt inside `apply`; write it down before it is played
+      this._recordDeal();
+      if (state.isTerminal) {
+        const final = finalReport(state, this.humanSeat) || {};
+        this._logEntry(
+          "end",
+          `${final.headline || "Game over."} Final score ${state.scores[this.humanSeat]}–${state.scores[this.aiSeat]}.`,
+          { ply: this.ply }
+        );
+      }
+    }
+    return move;
+  }
+  /** One AI move, with what the search cost attached. */
+  async _aiMove(onThinking) {
+    const { action, search } = await this.think(this.state, onThinking);
+    const move = this._apply(action);
+    if (search && search.sims) {
+      move.search = search;
+      move.search_text = `searched ${search.sims.toLocaleString()} positions in ${(search.elapsedS || 0).toFixed(1)}s`;
+      // sims and the root value ride on the log entry, not just on `move`:
+      // `lastAiMoves` only holds the current batch, and the game record needs
+      // every move's numbers at the end of the game (see js/record.js)
+      this._logEntry("think", `AI ${move.search_text}.`, {
+        ply: move.ply,
+        sims: search.sims,
+        ...(Number.isFinite(search.value) ? { value: search.value } : {}),
+      });
+    }
+    return move;
+  }
+  /** Let the AI move until it is the human's turn again (or the game ends). */
+  async aiReplies(onThinking) {
+    const moves = [];
+    for (let i = 0; i < MAX_AI_REPLIES; i++) {
+      if (!this.aiTurn) break;
+      moves.push(await this._aiMove(onThinking));
+    }
+    this.lastAiMoves = moves;
+    return moves;
+  }
+  /** Apply the human's action. The caller then asks for `aiReplies`. */
+  playHuman(actionId) {
+    if (this.state.isTerminal) throw new IllegalMove("the game is over, start a new one");
+    if (this.state.currentPlayer !== this.humanSeat) throw new IllegalMove("it is not your turn");
+    if (!Number.isInteger(actionId) || actionId < 0 || actionId >= ACTION_SPACE) {
+      throw new IllegalMove(`action id must be an integer in 0..179, got ${actionId}`);
+    }
+    const first = this.roundReports.length;
+    const move = this._apply(actionId);
+    return { move, reports: this.roundReports.slice(first) };
+  }
+  /** Reports created since index `first` — the overlays still to be shown. */
+  reportsSince(first) {
+    return this.roundReports.slice(first);
+  }
+  /* ------------------------------------------------------------- snapshot */
+  snapshot() {
+    return {
+      state: this.state.toJSON(),
+      seed: this.seed,
+      agent_name: this.agentName,
+      opponent_info: this.opponentInfo,
+      opponent_blurb: this.opponentBlurb || null,
+      human_seat: this.humanSeat,
+      ai_seat: this.aiSeat,
+      your_turn: this.humanTurn,
+      ai_pending: this.aiTurn,
+      think_time_s: this.thinkTimeS,
+      human_legal_actions: this.legalForHuman(),
+      ply: this.ply,
+      last_ai_move: this.lastAiMoves.length ? this.lastAiMoves[this.lastAiMoves.length - 1] : null,
+      log: this.log,
+      final: finalReport(this.state, this.humanSeat),
+    };
+  }
+}

js/mcts.js ADDED Viewed

	@@ -0,0 +1,583 @@

+/* PUCT MCTS over cloned Azul states — a port of ludometer/train/mcts.py.
+ *
+ * Same search as the trained agent plays with, down to the constants: edge stats
+ * `(N, W, P)` live in the parent, a simulation descends by maximising
+ * `Q + c_puct * P * sqrt(Nparent + 1) / (1 + N)`, expands one leaf, evaluates it
+ * with the net and backs the value up.
+ *
+ * Perspectives. Azul does not strictly alternate — the holder of the first-player
+ * marker starts the next round, so the same player can move twice in a row across
+ * a round boundary. Values are therefore propagated in *player 0's* frame (`v0`)
+ * and converted per node from `node.player`; nothing here assumes alternation.
+ *
+ * Chance nodes. Inside a round Azul is deterministic; the only chance event is the
+ * refill triggered by the move that takes the last tiles. Those edges are handled
+ * exactly as Python does — by re-sampled determinizations: clone the parent,
+ * reseed and **reshuffle the clone's bag**, apply the move, and file the result in
+ * a per-edge table keyed by the post-refill factory/center contents. Reshuffling
+ * is what stops the search peeking at the pre-shuffled deal (bag *counts* are
+ * public, the order is not). Past `chanceChildren` distinct outcomes a traversal
+ * reuses a stored one at random, so the subtree stays deep while the edge's Q
+ * remains an average over sampled refills.
+ *
+ * The one real difference from Python: evaluation is asynchronous, because
+ * onnxruntime-web's `run` is. Each simulation therefore awaits at most one
+ * inference (batch of 1), and the loop yields to the event loop periodically so a
+ * worker can still answer messages. Dirichlet noise is not ported — it only ever
+ * applies to self-play training, never to a game against a human.
+ *
+ * Batching (`config.batch > 1`). A profile of a 5 s think said 92 % of it is
+ * spent inside one `session.run` per simulation — the search itself, cloning and
+ * legal-move generation included, is 2 %. The only way to buy more positions is
+ * therefore to put more of them in each forward pass, which is what `_collect`
+ * does: descend `batch` times, each descent laying down a **virtual loss** on the
+ * edges it walks so the next one is pushed elsewhere, evaluate the whole leaf set
+ * in one dispatch, then back the real values up and take the virtual loss off
+ * again. Because the virtual loss is added and removed in the same units it is
+ * exact bookkeeping: a finished batch leaves the tree in the state the same
+ * sequence of leaf evaluations would have left it in sequentially. `batch = 1`
+ * takes the original code path, untouched.
+ *
+ * The margin head (`config.margin`). If the loaded net has a third output the
+ * search also averages it up the tree, in player 0's frame like the value, and
+ * the *root* move is then chosen lexicographically: among the moves whose win-Q
+ * is within `marginEpsilon` of the best, play the one with the largest expected
+ * score gap. A two-output net has no margin at all and keeps the old rule
+ * (most-visited child), bit for bit.
+ */
+import { ACTION_SPACE, CENTER, Rng } from "./engine.js";
+/** Matches configs/run2.json, which is what the exported checkpoint trained with. */
+export const DEFAULT_CONFIG = {
+  // An upper bound only: with a time budget the clock is meant to bind first, so
+  // this sits well above what the fastest machine reaches in the longest budget
+  // (~1k sims/s per second of budget in the opening, several times that once the
+  // tree starts hitting terminal positions).
+  sims: 200000,
+  cPuct: 1.4,
+  chanceChildren: 4,
+  fpu: 0.0, // Q assumed for an unvisited edge, in the parent's frame
+  /* Leaves gathered per forward pass. 1 is the original one-at-a-time search;
+   * the worker raises it to what the active backend actually likes (measured:
+   * 16 for WASM, 64 for WebGPU). This is a *ceiling* — see `batchRamp`. */
+  batch: 1,
+  /* The batch may not exceed the tree divided by this.
+   *
+   * Measured the hard way. A flat batch of 64 from the first simulation loses
+   * 3–17 to the same search at batch 1 over the same number of simulations:
+   * with nothing in the tree yet, virtual loss pushes all 64 descents down 64
+   * different early branches, and a 800-simulation search never recovers from
+   * spending its first eighth that way. The damage is entirely a function of
+   * batch ÷ tree, so the batch starts small and grows with the tree, and by the
+   * time it is at its ceiling the tree is 16× bigger than it. */
+  batchRamp: 16,
+  /* …but never below this, because on a GPU a batch of one is not a smaller
+   * step, it is a wasted 4 ms dispatch. Raised with `batch` by the worker. */
+  minBatch: 1,
+  /* Discouragement applied to an edge already on a pending descent, in the same
+   * [-1, 1] units as the value. 1.0 = "assume it loses" is the usual choice and
+   * is what keeps a batch from collecting the same leaf `batch` times. */
+  virtualLoss: 1.0,
+  /* Root moves whose win-Q is within this of the best are considered equally
+   * good, and the margin head breaks the tie. Ignored without a margin head. */
+  marginEpsilon: 0.03,
+  /* A child must have at least this share of the most-visited child's visits to
+   * be a candidate for that tie-break — a one-visit edge can carry a Q of +1 by
+   * luck, and that must not be allowed to define "the best". */
+  marginMinVisitShare: 0.1,
+};
+/* Two arg-max players can loop forever in a game where no pattern line is ever
+ * completed (see mcts.py STALL_ROUNDS): past this many rounds the caller
+ * re-introduces sampling, and MAX_GAME_MOVES is the hard backstop. */
+export const STALL_ROUNDS = 16;
+export const MAX_GAME_MOVES = 400;
+/** How often the search hands the event loop back (keeps a worker responsive). */
+const YIELD_EVERY = 64;
+const nowMs = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+const yieldToLoop = () => new Promise((r) => setTimeout(r, 0));
+class Node {
+  constructor(state) {
+    this.state = state;
+    this.player = state.currentPlayer;
+    this.legal = state.legalActions();
+    this.priors = null;
+    this.visits = null;
+    this.wins = null;
+    this.margins = null; // parallel to `wins`, only allocated with a margin head
+    this.children = null; // Node | Map<string, Node> | null, per edge
+    this.expanded = false;
+    this.pending = false; // already queued for evaluation in the current batch
+    this.nVisits = 0;
+    this.terminalV0 = state.isTerminal ? state.outcome() || 0 : 0;
+    // The margin of a finished game is the real score gap, in player 0's frame,
+    // on the same scale the head is trained on (points).
+    this.terminalMargin0 = state.isTerminal ? state.scores[0] - state.scores[1] : 0;
+  }
+  get isTerminal() {
+    return this.state.isTerminal;
+  }
+  initEdges(priors, withMargin = false) {
+    const n = this.legal.length;
+    this.priors = priors;
+    this.visits = new Int32Array(n);
+    this.wins = new Float64Array(n);
+    if (withMargin) this.margins = new Float64Array(n);
+    this.children = new Array(n).fill(null);
+    this.expanded = true;
+  }
+}
+export class MCTS {
+  /**
+   * @param {{evaluate(state, legal): Promise<{priors, value}>}} evaluator
+   * @param {object} config  overrides for DEFAULT_CONFIG
+   * @param {import("./engine.js").Rng} rng  the search's own RNG
+   */
+  constructor(evaluator, config = {}, rng = null) {
+    this.evaluator = evaluator;
+    this.config = { ...DEFAULT_CONFIG, ...config };
+    this.rng = rng || new Rng(1);
+    this.counter = 0;
+    this.nodesCreated = 0;
+    this.evals = 0;
+    this.batches = 0;
+    // A margin head is a property of the loaded net, so it is read off the
+    // evaluator rather than configured — `config.margin` can still force it off.
+    this.hasMargin =
+      config.margin === false ? false : !!(evaluator && evaluator.hasMargin);
+  }
+  /**
+   * Run simulations from `state` (never mutated) and return the visit policy.
+   *
+   * @param {AzulState} state
+   * @param {object} opts
+   * @param {number} opts.timeLimitS  wall-clock budget; 0/undefined means "run `sims`"
+   * @param {function} opts.onProgress  called with {sims, elapsedS} every so often
+   * @param {function} opts.shouldStop  polled; return true to abandon the search
+   * @returns {Promise<{policy, value, visits, sims, elapsedS, best}>}
+   */
+  async search(state, opts = {}) {
+    const { timeLimitS = 0, onProgress = null, shouldStop = null } = opts;
+    const root = this._newNode(state.clone());
+    // kept so a caller can read the root's edge statistics back out afterwards —
+    // that table is all coach mode is (see rootChildren)
+    this._root = root;
+    if (root.isTerminal) throw new Error("cannot search a terminal state");
+    const started = nowMs();
+    const value = await this._expand(root);
+    if (root.legal.length === 1) {
+      const policy = new Float32Array(ACTION_SPACE);
+      policy[root.legal[0]] = 1;
+      return {
+        policy,
+        value,
+        visits: new Map([[root.legal[0], 1]]),
+        sims: 0,
+        elapsedS: 0,
+        best: root.legal[0],
+        forced: true,
+      };
+    }
+    const cap = this.config.sims;
+    const batch = Math.max(1, this.config.batch | 0);
+    const minBatch = Math.max(1, Math.min(batch, this.config.minBatch | 0));
+    const ramp = Math.max(1, this.config.batchRamp | 0);
+    const deadline = timeLimitS > 0 ? started + timeLimitS * 1000 : Infinity;
+    let done = 0;
+    let sinceYield = 0;
+    while (done < cap) {
+      // As big as the tree can afford, never bigger than the backend wants.
+      const want = Math.max(minBatch, Math.min(batch, Math.floor(root.nVisits / ramp)));
+      const step =
+        want === 1
+          ? ((await this._simulate(root)), 1)
+          : await this._simulateBatch(root, Math.min(want, cap - done));
+      // A batch that collected nothing (everything below the root is pending or
+      // terminal) would spin; stop rather than burn the clock.
+      if (step <= 0) break;
+      done += step;
+      sinceYield += step;
+      if (sinceYield >= YIELD_EVERY) {
+        sinceYield = 0;
+        if (onProgress) onProgress({ sims: done, elapsedS: (nowMs() - started) / 1000 });
+        await yieldToLoop();
+        if (shouldStop && shouldStop()) break;
+      }
+      if (nowMs() >= deadline) break;
+    }
+    const elapsedS = (nowMs() - started) / 1000;
+    const total = root.nVisits;
+    const policy = new Float32Array(ACTION_SPACE);
+    const visits = new Map();
+    let bestN = -1;
+    let winsSum = 0;
+    for (let i = 0; i < root.legal.length; i++) {
+      const action = root.legal[i];
+      const n = root.visits[i];
+      visits.set(action, n);
+      winsSum += root.wins[i];
+      if (n && total) policy[action] = n / total;
+      if (n > bestN) bestN = n;
+    }
+    return {
+      policy,
+      value: total ? winsSum / total : value,
+      visits,
+      sims: total,
+      elapsedS,
+      best: this._bestRootAction(root),
+      forced: false,
+    };
+  }
+  /**
+   * The move to play from the finished tree.
+   *
+   * Without a margin head this is the rule the agent has always used and the one
+   * the Python trainer uses: the most-visited root child. With one, visits still
+   * decide which moves are *candidates* — a move the search barely looked at is
+   * not evidence of anything — but among the candidates whose win-Q is within
+   * `marginEpsilon` of the best, the largest expected score gap wins. That is
+   * what turns "wins by one point" into "wins by twenty" without ever trading a
+   * win away for points.
+   */
+  _bestRootAction(root) {
+    let bestN = -1;
+    let bestI = 0;
+    for (let i = 0; i < root.legal.length; i++) {
+      if (root.visits[i] > bestN) {
+        bestN = root.visits[i];
+        bestI = i;
+      }
+    }
+    if (!this.hasMargin || !root.margins || bestN <= 0) return root.legal[bestI];
+    const floor = Math.max(1, bestN * this.config.marginMinVisitShare);
+    let bestQ = -Infinity;
+    for (let i = 0; i < root.legal.length; i++) {
+      const n = root.visits[i];
+      if (n >= floor) bestQ = Math.max(bestQ, root.wins[i] / n);
+    }
+    if (!Number.isFinite(bestQ)) return root.legal[bestI];
+    let pickI = bestI;
+    let pickMargin = -Infinity;
+    let pickVisits = -1;
+    for (let i = 0; i < root.legal.length; i++) {
+      const n = root.visits[i];
+      if (n < floor) continue;
+      if (root.wins[i] / n < bestQ - this.config.marginEpsilon) continue;
+      const margin = root.margins[i] / n;
+      // ties on margin fall back to the visit count, so the rule stays a
+      // refinement of the old one rather than a different search
+      if (margin > pickMargin || (margin === pickMargin && n > pickVisits)) {
+        pickMargin = margin;
+        pickVisits = n;
+        pickI = i;
+      }
+    }
+    return root.legal[pickI];
+  }
+  /**
+   * The last search's root edges — `{action, visits, q, prior}` per legal move.
+   *
+   * A port of `RootStatsMCTS.root_children()` in ludometer/gui/coach.py, and read
+   * for exactly the same reason: `q` is the search's own value estimate for that
+   * move, in the root player's frame. An edge the search never visited has no `q`
+   * at all and reports `null` — callers must not invent one.
+   */
+  rootChildren() {
+    const root = this._root;
+    if (!root || !root.expanded) return [];
+    const out = [];
+    for (let i = 0; i < root.legal.length; i++) {
+      const visits = root.visits[i];
+      out.push({
+        action: root.legal[i],
+        visits,
+        q: visits ? root.wins[i] / visits : null,
+        // expected score gap, in the root player's frame; null without a margin head
+        margin: visits && root.margins ? root.margins[i] / visits : null,
+        prior: root.priors ? root.priors[i] : 0,
+      });
+    }
+    return out;
+  }
+  /* --------------------------------------------------------------- internals */
+  _newNode(state) {
+    this.nodesCreated += 1;
+    return new Node(state);
+  }
+  async _expand(node) {
+    const { priors, value, margin } = await this.evaluator.evaluate(node.state, node.legal);
+    this.evals += 1;
+    node.initEdges(priors, this.hasMargin);
+    node.evalMargin = this.hasMargin && margin != null ? margin : 0;
+    return value;
+  }
+  _select(node) {
+    const { cPuct, fpu } = this.config;
+    const priors = node.priors;
+    const visits = node.visits;
+    const wins = node.wins;
+    const scale = cPuct * Math.sqrt(node.nVisits + 1);
+    let best = -1e30;
+    let bestI = 0;
+    for (let i = 0; i < visits.length; i++) {
+      const n = visits[i];
+      const q = n ? wins[i] / n : fpu;
+      const score = q + (scale * priors[i]) / (1 + n);
+      if (score > best) {
+        best = score;
+        bestI = i;
+      }
+    }
+    return bestI;
+  }
+  /** True iff `action` empties the board and therefore triggers a refill. */
+  _isStochastic(state, action) {
+    const source = Math.floor(action / 30);
+    const color = Math.floor((action - source * 30) / 6);
+    const pool = source === CENTER ? state.center : state.factories[source];
+    return pool[color] === state.tilesLeft;
+  }
+  /** Clone with a fresh bag order, then apply `action` — one refill draw. */
+  _determinize(state, action) {
+    const child = state.clone();
+    this.counter += 1;
+    child.rng.seed((Math.imul(this.counter, 2654435761) ^ 0x9e3779b9) >>> 0);
+    child.rng.shuffle(child.bag);
+    child.apply(action);
+    return child;
+  }
+  /** Identity of a post-refill position: factory + center contents. */
+  static _chanceKey(state) {
+    const parts = [];
+    for (const f of state.factories) parts.push(f.join(""));
+    parts.push(state.center.join(""));
+    return parts.join("|");
+  }
+  _child(node, index) {
+    const entry = node.children[index];
+    if (entry instanceof Node) return entry;
+    const action = node.legal[index];
+    if (entry === null && !this._isStochastic(node.state, action)) {
+      const next = node.state.clone();
+      next.apply(action);
+      const child = this._newNode(next);
+      node.children[index] = child;
+      return child;
+    }
+    const table = entry === null ? new Map() : entry;
+    node.children[index] = table;
+    if (table.size >= this.config.chanceChildren) {
+      const keys = Array.from(table.keys());
+      return table.get(keys[this.rng.randrange(keys.length)]);
+    }
+    const state = this._determinize(node.state, action);
+    const key = MCTS._chanceKey(state);
+    let child = table.get(key);
+    if (child === undefined) {
+      child = this._newNode(state);
+      table.set(key, child);
+    }
+    return child;
+  }
+  async _simulate(root) {
+    let node = root;
+    const path = [];
+    let v0;
+    let m0 = 0;
+    for (;;) {
+      if (node.isTerminal) {
+        v0 = node.terminalV0;
+        m0 = node.terminalMargin0;
+        break;
+      }
+      if (!node.expanded) {
+        const value = await this._expand(node);
+        v0 = node.player === 0 ? value : -value;
+        m0 = node.player === 0 ? node.evalMargin : -node.evalMargin;
+        break;
+      }
+      const index = this._select(node);
+      path.push([node, index]);
+      node = this._child(node, index);
+    }
+    for (const [parent, index] of path) {
+      parent.visits[index] += 1;
+      parent.nVisits += 1;
+      const sign = parent.player === 0 ? 1 : -1;
+      parent.wins[index] += sign * v0;
+      if (parent.margins) parent.margins[index] += sign * m0;
+    }
+  }
+  /* ------------------------------------------------------------- batched search */
+  /**
+   * One descent, laying virtual loss as it goes.
+   *
+   * Ends either at a terminal node — backed up immediately, since no net is
+   * needed — or at an unexpanded one, which is filed in `queue` for the coming
+   * forward pass. A leaf that two descents both reach keeps one queue entry and
+   * two paths: both are real simulations and both get the same value back.
+   */
+  _collect(root, queue, byNode) {
+    const vl = this.config.virtualLoss;
+    let node = root;
+    const path = [];
+    for (;;) {
+      if (node.isTerminal) {
+        this._backup(path, node.terminalV0, node.terminalMargin0);
+        return;
+      }
+      if (!node.expanded) {
+        let entry = byNode.get(node);
+        if (!entry) {
+          entry = { node, paths: [] };
+          byNode.set(node, entry);
+          queue.push(entry);
+          node.pending = true;
+        }
+        entry.paths.push(path);
+        return;
+      }
+      const index = this._select(node);
+      // The visit is taken now and the loss assumed now; `_backup` puts the
+      // assumed loss back and adds the real value, so the finished tree is the
+      // one a sequential search would have built.
+      node.visits[index] += 1;
+      node.nVisits += 1;
+      node.wins[index] -= vl;
+      path.push([node, index]);
+      node = this._child(node, index);
+    }
+  }
+  /** Undo the virtual loss along `path` and credit the real result. */
+  _backup(path, v0, m0) {
+    const vl = this.config.virtualLoss;
+    for (let k = 0; k < path.length; k++) {
+      const parent = path[k][0];
+      const index = path[k][1];
+      const sign = parent.player === 0 ? 1 : -1;
+      parent.wins[index] += vl + sign * v0;
+      if (parent.margins) parent.margins[index] += sign * m0;
+    }
+  }
+  /** Gather up to `want` leaves, evaluate them in one pass, back them all up. */
+  async _simulateBatch(root, want) {
+    const queue = [];
+    const byNode = new Map();
+    for (let i = 0; i < want; i++) this._collect(root, queue, byNode);
+    if (!queue.length) return want; // every descent hit a terminal node
+    const results = await this.evaluator.evaluateBatch(
+      queue.map((e) => e.node.state),
+      queue.map((e) => e.node.legal)
+    );
+    this.evals += queue.length;
+    this.batches += 1;
+    for (let i = 0; i < queue.length; i++) {
+      const { node, paths } = queue[i];
+      const { priors, value, margin } = results[i];
+      node.initEdges(priors, this.hasMargin);
+      node.evalMargin = this.hasMargin && margin != null ? margin : 0;
+      node.pending = false;
+      const sign = node.player === 0 ? 1 : -1;
+      const v0 = sign * value;
+      const m0 = sign * node.evalMargin;
+      for (let p = 0; p < paths.length; p++) this._backup(paths[p], v0, m0);
+    }
+    return want;
+  }
+}
+/**
+ * Pick an action from a visit distribution.
+ *
+ * `temperature <= 0` is arg-max; otherwise the distribution is raised to
+ * `1 / temperature`, renormalised and sampled — the stall-breaker the Python
+ * agent uses once a game has dragged past STALL_ROUNDS rounds.
+ */
+export function selectAction(policy, temperature = 0, rng = null) {
+  if (temperature <= 0) {
+    let best = 0;
+    let bestP = -Infinity;
+    for (let i = 0; i < policy.length; i++) {
+      if (policy[i] > bestP) {
+        bestP = policy[i];
+        best = i;
+      }
+    }
+    return best;
+  }
+  const probs = new Float64Array(policy.length);
+  let total = 0;
+  for (let i = 0; i < policy.length; i++) {
+    const p = policy[i] > 0 ? Math.pow(policy[i], 1 / temperature) : 0;
+    probs[i] = p;
+    total += p;
+  }
+  if (!(total > 0) || !Number.isFinite(total)) return selectAction(policy, 0);
+  const draw = (rng ? rng.random() : Math.random()) * total;
+  let acc = 0;
+  for (let i = 0; i < probs.length; i++) {
+    acc += probs[i];
+    if (draw <= acc) return i;
+  }
+  return selectAction(policy, 0);
+}
+/** The playing agent: search, then play the arg-max visit count. */
+export class MCTSAgent {
+  constructor(evaluator, config = {}, rng = null) {
+    this.mcts = new MCTS(evaluator, config, rng);
+    this.rng = this.mcts.rng;
+    this.lastSearch = {};
+  }
+  /** @returns {Promise<number>} the chosen action id */
+  async act(state, opts = {}) {
+    const legal = state.legalActions();
+    if (!legal.length) throw new Error("no legal actions (terminal state?)");
+    if (legal.length === 1) {
+      this.lastSearch = { sims: 0, elapsedS: 0, forced: true };
+      return legal[0];
+    }
+    const result = await this.mcts.search(state, opts);
+    this.lastSearch = {
+      sims: result.sims,
+      elapsedS: result.elapsedS,
+      value: result.value,
+      forced: result.forced,
+      nodes: this.mcts.nodesCreated,
+    };
+    // a pathologically long game gets randomised so that it terminates
+    const temperature = state.roundIndex >= STALL_ROUNDS ? 1 : 0;
+    if (temperature > 0) return selectAction(result.policy, temperature, this.rng);
+    return result.best;
+  }
+}

js/net.js ADDED Viewed

	@@ -0,0 +1,210 @@

+/* The policy+value net, as seen from JavaScript.
+ *
+ * A port of ludometer/train/net.py's `NetEvaluator`: encode the position, run the
+ * exported ONNX graph, softmax the logits **over the legal actions only** (the
+ * same thing as masking the rest to -inf, and cheaper), and hand back priors
+ * aligned with the caller's `legal` list plus a value in [-1, 1] for the player
+ * to move.
+ *
+ * The graph is ../model/model.onnx, exported by ludometer/export/onnx_export.py
+ * and checked against torch on 100 real positions before it is written, so the
+ * only thing that can go wrong on this side is the input vector — which is what
+ * the engine fixtures pin down.
+ *
+ * onnxruntime-web is passed in rather than imported, so this module stays usable
+ * from a worker, from node, and from a test with a stub evaluator.
+ *
+ * Two things beyond a single forward pass live here, both measured rather than
+ * assumed (see NOTES_FOR_REMI.md):
+ *
+ *  - **Batching.** One position at a time is the worst case for every backend:
+ *    on this laptop the WASM runtime does 2.1 k positions/s at batch 1 and
+ *    4.2 k at batch 32, and the WebGPU runtime does 250/s at batch 1 (a GPU
+ *    dispatch costs ~4 ms whatever is in it) but 16 k/s at batch 64. So
+ *    `evaluateBatch` is the primitive and `evaluate` is the batch-of-one
+ *    special case; the search feeds it through virtual loss.
+ *
+ *  - **The margin head.** Older exports have two outputs (`policy`, `value`);
+ *    a later one may add `margin`, a prediction of the score gap. Which
+ *    outputs exist is read off the session, never assumed, so the same player
+ *    code runs both.
+ */
+import { ENCODED_SIZE } from "./engine.js";
+/** The name of the optional third output: a signed score-gap prediction. */
+export const MARGIN_OUTPUT = "margin";
+export class OnnxEvaluator {
+  constructor(session, ort, backend = "wasm") {
+    this.session = session;
+    this.ort = ort;
+    this.backend = backend;
+    this.buffer = new Float32Array(ENCODED_SIZE);
+    this.batchBuffer = null; // grown on demand by evaluateBatch
+    this.calls = 0;
+    this.positions = 0;
+    // Feature-detected, never assumed: a run3-era graph has policy+value, a
+    // later one may also have margin. `outputNames` is what the runtime loaded.
+    const names = session.outputNames || [];
+    this.hasMargin = names.indexOf(MARGIN_OUTPUT) !== -1;
+    this.outputNames = Array.from(names);
+  }
+  /**
+   * @param {object} ort  the onnxruntime-web module namespace
+   * @param {string|ArrayBuffer|Uint8Array} model  URL or raw bytes of model.onnx
+   * @param {object} opts  {executionProviders, backend}
+   */
+  static async create(ort, model, opts = {}) {
+    const backend = opts.backend || "wasm";
+    const session = await ort.InferenceSession.create(model, {
+      executionProviders: opts.executionProviders || [backend],
+      graphOptimizationLevel: "all",
+    });
+    return new OnnxEvaluator(session, ort, backend);
+  }
+  /** `(state, legal) -> {priors, value, margin}`; priors are aligned with `legal`. */
+  async evaluate(state, legal) {
+    state.encode(this.buffer);
+    const input = new this.ort.Tensor("float32", this.buffer, [1, ENCODED_SIZE]);
+    const out = await this.session.run({ obs: input });
+    this.calls += 1;
+    this.positions += 1;
+    return this._read(out, 0, legal);
+  }
+  /**
+   * Evaluate `n` positions in one graph run.
+   *
+   * `states[i]` is scored against `legals[i]`; the result array is aligned with
+   * both. This is the primitive the batched search calls — one dispatch for the
+   * whole leaf set instead of one per leaf.
+   */
+  async evaluateBatch(states, legals) {
+    const n = states.length;
+    if (n === 0) return [];
+    if (n === 1) return [await this.evaluate(states[0], legals[0])];
+    if (!this.batchBuffer || this.batchBuffer.length < n * ENCODED_SIZE) {
+      this.batchBuffer = new Float32Array(n * ENCODED_SIZE);
+    }
+    // A fresh view per run: ort keeps a reference to the tensor's data, so the
+    // sub-arrays must cover exactly the rows this run submits.
+    const data = this.batchBuffer.subarray(0, n * ENCODED_SIZE);
+    for (let i = 0; i < n; i++) {
+      states[i].encode(data.subarray(i * ENCODED_SIZE, (i + 1) * ENCODED_SIZE));
+    }
+    const input = new this.ort.Tensor("float32", data, [n, ENCODED_SIZE]);
+    const out = await this.session.run({ obs: input });
+    this.calls += 1;
+    this.positions += n;
+    const results = new Array(n);
+    for (let i = 0; i < n; i++) results[i] = this._read(out, i, legals[i]);
+    return results;
+  }
+  /** Row `row` of a (possibly batched) output, softmaxed over `legal`. */
+  _read(out, row, legal) {
+    const value = out.value.data[row];
+    const margin = this.hasMargin ? out[MARGIN_OUTPUT].data[row] : null;
+    const n = legal.length;
+    if (n === 0) return { priors: new Float32Array(0), value, margin };
+    const logits = out.policy.data;
+    // policy is [batch, ACTION_SPACE]; the last dim is the row stride.
+    const dims = out.policy.dims;
+    const stride = dims && dims.length ? dims[dims.length - 1] : logits.length;
+    const base = row * stride;
+    const priors = new Float32Array(n);
+    let max = -Infinity;
+    for (let i = 0; i < n; i++) {
+      const v = logits[base + legal[i]];
+      priors[i] = v;
+      if (v > max) max = v;
+    }
+    let sum = 0;
+    for (let i = 0; i < n; i++) {
+      const e = Math.exp(priors[i] - max);
+      priors[i] = e;
+      sum += e;
+    }
+    for (let i = 0; i < n; i++) priors[i] /= sum;
+    return { priors, value, margin };
+  }
+}
+/** Uniform priors, zero value — lets the search run with no net at all (tests). */
+export class UniformEvaluator {
+  constructor() {
+    this.calls = 0;
+    this.positions = 0;
+    this.hasMargin = false;
+    this.backend = "none";
+  }
+  async evaluate(_state, legal) {
+    this.calls += 1;
+    this.positions += 1;
+    const n = legal.length;
+    return { priors: new Float32Array(n).fill(n ? 1 / n : 0), value: 0, margin: null };
+  }
+  async evaluateBatch(states, legals) {
+    this.calls += 1;
+    this.positions += states.length;
+    return legals.map((legal) => ({
+      priors: new Float32Array(legal.length).fill(legal.length ? 1 / legal.length : 0),
+      value: 0,
+      margin: null,
+    }));
+  }
+}
+/* ------------------------------------------------------------------- backends */
+/**
+ * What the two vendored onnxruntime-web builds are, and when each one is used.
+ *
+ * The default build is the pure-WASM one the player has always shipped. The
+ * `jspi` build adds onnxruntime's native **WebGPU** execution provider; it is
+ * only downloaded when the browser can actually use it, so a browser without
+ * WebGPU pays nothing for its existence.
+ *
+ * Two things have to be true for the WebGPU build to load at all:
+ *   - `navigator.gpu` — the browser has WebGPU;
+ *   - `WebAssembly.Suspending` — the browser has JSPI (stack switching), which
+ *     is how onnxruntime's WebGPU EP suspends the WASM call while the GPU
+ *     works. The alternative build (asyncify) needs no JSPI but is 2.5 MB
+ *     larger over the wire, which is not worth it for a fallback path.
+ *
+ * Anything else — Safari today, Firefox today, an old Chrome, a machine with no
+ * GPU adapter — takes the WASM path, which is exactly what shipped before.
+ */
+export const BACKENDS = {
+  wasm: {
+    module: "../vendor/onnxruntime-web/ort.wasm.bundle.min.mjs",
+    wasm: "../vendor/onnxruntime-web/ort-wasm-simd-threaded.wasm",
+    ep: "wasm",
+  },
+  webgpu: {
+    module: "../vendor/onnxruntime-web/ort.jspi.bundle.min.mjs",
+    wasm: "../vendor/onnxruntime-web/ort-wasm-simd-threaded.jspi.wasm",
+    ep: "webgpu",
+  },
+};
+/**
+ * Is the WebGPU path worth trying in this environment?
+ *
+ * Deliberately cheap and synchronous — `requestAdapter()` is the real test and
+ * it happens when the session is created, where a failure falls back anyway.
+ */
+export function webgpuLikely(scope = globalThis) {
+  return !!(
+    scope.navigator &&
+    scope.navigator.gpu &&
+    typeof scope.WebAssembly !== "undefined" &&
+    typeof scope.WebAssembly.Suspending === "function"
+  );
+}

js/record.js ADDED Viewed

	@@ -0,0 +1,170 @@

+/* A finished game, written down: the smallest thing that replays exactly.
+ *
+ * The point of this file is data collection, so the rule it follows is *record
+ * only what cannot be recomputed*. Search targets, position encodings, coach
+ * verdicts and value estimates can all be regenerated offline by replaying the
+ * game at any depth, so none of them are stored. Three things cannot:
+ *
+ *   1. **the chance events.** The bag is shuffled by this page's own RNG
+ *      (mulberry32, see engine.js), and Python's Mersenne Twister cannot
+ *      reproduce it from the same seed. So the deal of every round is written
+ *      down explicitly: the five factories, plus the bag and lid counts, which
+ *      is what a converter needs to check that no tile appeared or vanished.
+ *      The seed is kept as well, because *this* engine does reproduce a game
+ *      from it, which is how the tests verify a record end to end.
+ *   2. **the moves**, as action ids. The encoding is `source*30 + color*6 +
+ *      dest` in this engine and in the Python one, character for character, and
+ *      the engine parity test holds them to identical ordered legal actions and
+ *      identical 182-float encodings. So an integer here means exactly the same
+ *      move there.
+ *   3. **the circumstances**: which seat the human held, which net answered,
+ *      how long it was allowed to think, and how many positions it actually
+ *      visited per move (that last one depends on the visitor's machine, so it
+ *      is not recoverable either).
+ *
+ * Nothing here sends anything anywhere: this module only builds the value.
+ * Sending is js/upload.js's job, governed by the sharing switch in Settings
+ * (on by default) and described honestly in the About panel; the Save and
+ * Copy buttons hand the very same record to the player, so what is shared
+ * and what a player can read are one and the same thing.
+ */
+export const FORMAT = "faience-game/1";
+/**
+ * Build the record of `session` as it stands.
+ *
+ * `extra` carries what the session does not know about itself:
+ * `{net, backend}` — the exported model's metadata and the runtime that ran it.
+ * Safe to call at any point in a game; `final.finished` says whether the
+ * position is terminal.
+ */
+export function buildRecord(session, extra = {}) {
+  if (!session) return null;
+  const state = session.state;
+  const net = extra.net || {};
+  const info = session.opponentInfo || {};
+  const moves = session.log
+    .filter((e) => e.kind === "move")
+    .map((e) => {
+      const move = { ply: e.ply, player: e.player, action: e.action_id };
+      const think = session.log.find((t) => t.kind === "think" && t.ply === e.ply);
+      if (think) {
+        if (Number.isFinite(think.sims) && think.sims > 0) move.sims = think.sims;
+        // the net's own read of the position it moved from, on its [-1, 1]
+        // scale: the cheapest signal for "the AI did not see this coming"
+        if (Number.isFinite(think.value)) move.value = round4(think.value);
+      }
+      return move;
+    });
+  return {
+    format: FORMAT,
+    created_at: new Date().toISOString(),
+    seed: session.seed,
+    human_seat: session.humanSeat,
+    human_first: !!session.humanPlaysFirst,
+    net: {
+      run: net.run || info.run || null,
+      checkpoint: net.checkpoint || info.checkpoint || null,
+      elo: typeof net.elo === "number" ? net.elo : typeof info.elo === "number" ? info.elo : null,
+      params: net.num_params || null,
+      backend: extra.backend || null,
+    },
+    think_time_s: session.thinkTimeS,
+    moves,
+    deals: (session.deals || []).map((d) => ({
+      round: d.round,
+      factories: d.factories.map((f) => f.slice()),
+      bag: d.bag.slice(),
+      lid: d.lid.slice(),
+    })),
+    final: {
+      finished: !!state.isTerminal,
+      scores: state.scores.slice(),
+      outcome: outcomeOf(session),
+      rounds: state.roundIndex + 1,
+      exhausted: !!state.exhausted,
+    },
+  };
+}
+function outcomeOf(session) {
+  const state = session.state;
+  if (!state.isTerminal) return null;
+  const mine = state.scores[session.humanSeat];
+  const theirs = state.scores[session.aiSeat];
+  if (mine > theirs) return "human";
+  if (theirs > mine) return "ai";
+  return "draw";
+}
+function round4(v) {
+  return Math.round(v * 1e4) / 1e4;
+}
+/** `faience-run4-ckpt-037888-seed31337-ai.json` — sortable, self-describing. */
+export function recordFilename(record) {
+  const bits = ["faience"];
+  if (record.net.run) bits.push(record.net.run);
+  if (record.net.checkpoint) bits.push(record.net.checkpoint);
+  bits.push("seed" + record.seed);
+  if (record.final.outcome) bits.push(record.final.outcome);
+  return bits.join("-").replace(/[^A-Za-z0-9._-]/g, "") + ".json";
+}
+/** Indented for a file, so a human can read what they are about to send. */
+export const asFile = (record) => JSON.stringify(record, null, 1);
+/** One line, for pasting into an issue or a chat. */
+export const asLine = (record) => JSON.stringify(record);
+/**
+ * Hand `record` to the player as a download. Returns true if the browser took
+ * it; the caller says so in the page (this module never touches the status).
+ */
+export function downloadRecord(record) {
+  try {
+    const blob = new Blob([asFile(record)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = recordFilename(record);
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // let the click start before the URL goes away
+    setTimeout(() => URL.revokeObjectURL(url), 4000);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+/** Copy `record` to the clipboard as one line. Resolves true on success. */
+export async function copyRecord(record) {
+  const text = asLine(record);
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (err) {
+    // an older browser, or a page the clipboard API refuses: fall back to the
+    // oldest trick there is, a hidden field and the document's own copy command
+    try {
+      const box = document.createElement("textarea");
+      box.value = text;
+      box.setAttribute("readonly", "");
+      box.style.position = "fixed";
+      box.style.top = "-1000px";
+      document.body.appendChild(box);
+      box.select();
+      const ok = document.execCommand("copy");
+      box.remove();
+      return ok;
+    } catch (err2) {
+      return false;
+    }
+  }
+}

js/report.js ADDED Viewed

	@@ -0,0 +1,200 @@

+/* Plain-language descriptions of what the engine just did — a port of
+ * ludometer/gui/moves.py.
+ *
+ * `apply()` mutates in place and resolves the round boundary itself, so nothing
+ * in the engine reports *which* tiles moved to the wall or what each one earned.
+ * This rebuilds that story from a snapshot taken **before** the move, using
+ * exactly the engine's rules — the same reconstruction the Python GUI server did,
+ * moved into the page now that there is no server.
+ */
+import {
+  CENTER,
+  COL_BONUS,
+  COLOR_BONUS,
+  COLOR_NAMES,
+  CUM_PENALTY,
+  FLOOR,
+  FLOOR_PENALTIES,
+  FLOOR_SLOTS,
+  NUM_COLORS,
+  NUM_ROWS,
+  ROW_BONUS,
+  WALL_IDX,
+  decodeAction,
+} from "./engine.js";
+export const sourceLabel = (source) => (source === CENTER ? "the center" : `factory ${source + 1}`);
+export const destLabel = (dest) => (dest === FLOOR ? "the floor line" : `row ${dest + 1}`);
+/** Describe `actionId` as it would play out in `state` (no mutation). */
+export function describeAction(state, actionId) {
+  const [source, color, dest] = decodeAction(actionId);
+  const player = state.currentPlayer;
+  const pool = source === CENTER ? state.center : state.factories[source];
+  const count = pool[color];
+  const tookMarker = source === CENTER && state.markerInCenter;
+  let placed = 0;
+  let overflow = count;
+  if (dest !== FLOOR) {
+    const room = dest + 1 - state.plCount[player][dest];
+    placed = Math.min(count, room);
+    overflow = count - placed;
+  }
+  const occupied = state.floorOccupied(player) + (tookMarker ? 1 : 0);
+  const toFloor = Math.max(0, Math.min(overflow, FLOOR_SLOTS - occupied));
+  let text = `took ${count} ${COLOR_NAMES[color]} from ${sourceLabel(source)} → ${destLabel(dest)}`;
+  if (dest !== FLOOR && overflow) text += ` (${overflow} to the floor)`;
+  if (tookMarker) text += " + first-player marker";
+  return {
+    action_id: actionId,
+    player,
+    source,
+    color,
+    dest,
+    count,
+    placed,
+    overflow,
+    to_floor: toFloor,
+    to_lid: overflow - toFloor,
+    took_marker: tookMarker,
+    color_name: COLOR_NAMES[color],
+    source_label: sourceLabel(source),
+    dest_label: destLabel(dest),
+    text,
+  };
+}
+function runLengths(wall, row, col) {
+  const base = row * 5;
+  let h = 1;
+  for (let i = col - 1; i >= 0 && wall[base + i]; i--) h += 1;
+  for (let i = col + 1; i < 5 && wall[base + i]; i++) h += 1;
+  let v = 1;
+  for (let i = row - 1; i >= 0 && wall[i * 5 + col]; i--) v += 1;
+  for (let i = row + 1; i < 5 && wall[i * 5 + col]; i++) v += 1;
+  return [h, v];
+}
+/** Replay the engine's wall-tiling for one player on a snapshot. */
+function tilePlayer(before, player) {
+  const wall = before.walls[player].slice();
+  const colors = before.plColor[player];
+  const counts = before.plCount[player];
+  const tiles = [];
+  let gain = 0;
+  for (let row = 0; row < NUM_ROWS; row++) {
+    if (counts[row] !== row + 1) continue;
+    const color = colors[row];
+    const idx = WALL_IDX[color * 5 + row];
+    wall[idx] = 1;
+    const col = idx - row * 5;
+    const [h, v] = runLengths(wall, row, col);
+    const points = h > 1 || v > 1 ? (h > 1 ? h : 0) + (v > 1 ? v : 0) : 1;
+    gain += points;
+    tiles.push({ row, col, color, color_name: COLOR_NAMES[color], points, h_run: h, v_run: v, discarded: row });
+  }
+  const floor = before.floor[player];
+  const floorTiles = [];
+  for (let c = 0; c < NUM_COLORS; c++) for (let k = 0; k < floor[c]; k++) floorTiles.push(c);
+  const occupied = before.floorOccupied(player);
+  const penalty = CUM_PENALTY[Math.min(FLOOR_SLOTS, occupied)];
+  const scoreBefore = before.scores[player];
+  const scoreAfter = Math.max(0, scoreBefore + gain + penalty);
+  const carried = [];
+  for (let r = 0; r < NUM_ROWS; r++) {
+    if (counts[r] && counts[r] !== r + 1) carried.push({ row: r, color: colors[r], count: counts[r] });
+  }
+  return {
+    seat: player,
+    tiles,
+    tiling_points: gain,
+    carried_rows: carried,
+    floor: {
+      tiles: floorTiles,
+      marker: before.floorMarker[player],
+      occupied,
+      penalty,
+      slot_penalties: FLOOR_PENALTIES.slice(0, Math.min(FLOOR_SLOTS, occupied)),
+    },
+    score_before: scoreBefore,
+    score_after: scoreAfter,
+    delta: scoreAfter - scoreBefore,
+  };
+}
+/**
+ * `before` with `move`'s tiles placed — the state the engine tiles from.
+ *
+ * `apply` places the tiles *and* resolves the round in one step, so the position
+ * wall-tiling actually starts from is never observable. Only the mover's own
+ * pattern lines and floor change, and `describeAction` already worked out how the
+ * tiles split, so replaying that much is enough.
+ */
+export function afterPlacement(before, move) {
+  const state = before.clone();
+  const player = move.player;
+  if (move.took_marker) state.floorMarker[player] = true;
+  const dest = move.dest;
+  if (dest !== FLOOR) {
+    state.plColor[player][dest] = move.color;
+    state.plCount[player][dest] += move.placed;
+  }
+  if (move.to_floor) state.floor[player][move.color] += move.to_floor;
+  return state;
+}
+/** Wall-tiling result of the round ended by `move` played in `before`. */
+export function roundReport(before, move) {
+  const state = afterPlacement(before, move);
+  return {
+    round: state.roundIndex,
+    players: [tilePlayer(state, 0), tilePlayer(state, 1)],
+  };
+}
+function bonusBreakdown(state, player) {
+  const rows = state.completedRows(player);
+  const cols = state.completedCols(player);
+  const colors = state.completedColors(player);
+  const rowPts = ROW_BONUS * rows;
+  const colPts = COL_BONUS * cols;
+  const colorPts = COLOR_BONUS * colors;
+  const total = rowPts + colPts + colorPts;
+  return {
+    seat: player,
+    rows,
+    row_points: rowPts,
+    cols,
+    col_points: colPts,
+    colors,
+    color_points: colorPts,
+    total,
+    score_before_bonus: state.scores[player] - total,
+    final_score: state.scores[player],
+  };
+}
+/** End-of-game summary: bonuses per player, winner, why the game stopped. */
+export function finalReport(state, humanSeat) {
+  if (!state.isTerminal) return null;
+  const outcome = state.outcome() || 0;
+  const winner = outcome === 0 ? null : outcome > 0 ? 0 : 1;
+  let headline;
+  if (winner === null) headline = "A draw: same score, same completed rows.";
+  else if (winner === humanSeat) headline = "You win!";
+  else headline = "The AI wins.";
+  return {
+    winner,
+    winner_side: winner === null ? null : winner === humanSeat ? "human" : "ai",
+    headline,
+    scores: state.scores.slice(),
+    bonuses: [bonusBreakdown(state, 0), bonusBreakdown(state, 1)],
+    exhausted: state.exhausted,
+    rounds_played: state.roundIndex + 1,
+  };
+}

js/upload.js ADDED Viewed

	@@ -0,0 +1,140 @@

+/* Sharing games: the page's side of the research bargain.
+ *
+ * Faïence is a research project, and the games people play are the research
+ * material. So when a game ends (and when a game is abandoned mid-way), this
+ * module sends the record that js/record.js builds to a small collector
+ * (web/ingest/, a separate Space) which replays it in the real engine and
+ * commits it to the public dataset. The About panel says all of this in the
+ * page, and Settings holds the switch: sharing is ON by default, visibly, and
+ * turning it off is respected everywhere in this file.
+ *
+ * Two promises this module keeps:
+ *
+ *   1. **A game never depends on the upload.** Everything here is fire and
+ *      forget: sendBeacon on the way out of the page, a fetch whose failure
+ *      is swallowed everywhere else, and no caller ever awaits either. If
+ *      the collector is asleep, blocked or gone, the game plays on and the
+ *      record waits in localStorage for the visitor's next visit.
+ *   2. **The record carries no identity.** It is the moves, the deals, the
+ *      net and the score, exactly what the Save button offers as a file. The
+ *      collector stores nothing else (it never logs IPs or user agents), and
+ *      everything it stores is public, so a player can read the whole take.
+ *
+ * The dev guard mirrors analytics.js: localhost plays thousands of games in
+ * the test suites and none of them are players, so none of them may send.
+ */
+export const INGEST_BASE = "https://remifabre-faience-ingest.hf.space";
+export const DATASET_URL = "https://huggingface.co/datasets/RemiFabre/faience-games";
+const SHARE_KEY = "faience.share";
+const OUTBOX_KEY = "faience.outbox";
+const OUTBOX_MAX = 8; // a courtesy buffer, not an archive: oldest games drop first
+/** Whether sharing is on. Anything but a stored "off" means yes: the default. */
+export function sharingOn() {
+  try {
+    return localStorage.getItem(SHARE_KEY) !== "off";
+  } catch (err) {
+    return true;
+  }
+}
+export function setSharing(on) {
+  try {
+    localStorage.setItem(SHARE_KEY, on ? "on" : "off");
+  } catch (err) {
+    /* private mode; the choice just will not survive a reload */
+  }
+}
+/** True while the page is somewhere no data should ever be sent from. */
+function devHost() {
+  const host = location.hostname;
+  return host === "localhost" || host === "127.0.0.1" || host === "";
+}
+function readOutbox() {
+  try {
+    const kept = JSON.parse(localStorage.getItem(OUTBOX_KEY) || "[]");
+    return Array.isArray(kept) ? kept : [];
+  } catch (err) {
+    return [];
+  }
+}
+function writeOutbox(entries) {
+  try {
+    localStorage.setItem(OUTBOX_KEY, JSON.stringify(entries.slice(-OUTBOX_MAX)));
+  } catch (err) {
+    /* full or forbidden storage loses the retry, never the game */
+  }
+}
+/**
+ * Queue `record` and try to deliver the whole outbox. The normal path for a
+ * finished game: the collector's reply confirms delivery, so what fails
+ * (asleep, offline, blocked) stays queued for the next call on any visit.
+ */
+export function shareRecord(record) {
+  if (!sharingOn() || devHost() || !record || !record.moves || !record.moves.length) return;
+  writeOutbox([...readOutbox(), JSON.stringify(record)]);
+  flushOutbox();
+}
+let flushing = false;
+export async function flushOutbox() {
+  if (flushing || !sharingOn() || devHost()) return;
+  const entries = readOutbox();
+  if (!entries.length) return;
+  flushing = true;
+  try {
+    const kept = [];
+    for (const body of entries) {
+      try {
+        // no Content-Type header: the default text/plain keeps this a simple
+        // CORS request, same as the beacon, and the collector reads the body
+        // not the label. The collector answers 204 once it has the record
+        // (duplicates are deduplicated there, by content).
+        const reply = await fetch(INGEST_BASE + "/game", { method: "POST", body });
+        if (!reply.ok) kept.push(body);
+      } catch (err) {
+        kept.push(body);
+      }
+    }
+    writeOutbox(kept);
+  } finally {
+    flushing = false;
+  }
+}
+/**
+ * The way out of a closing page: sendBeacon is built for exactly this moment
+ * and survives the navigation. Delivery cannot be confirmed, so the record is
+ * also queued; if the beacon did land, the collector deduplicates the retry.
+ */
+export function shareOnLeave(record) {
+  if (!sharingOn() || devHost() || !record || !record.moves || !record.moves.length) return;
+  const body = JSON.stringify(record);
+  writeOutbox([...readOutbox(), body]);
+  try {
+    navigator.sendBeacon(INGEST_BASE + "/game", body);
+  } catch (err) {
+    /* the queue already has it */
+  }
+}
+/**
+ * A page load costs the collector one /health ping, so a Space that fell
+ * asleep is awake long before the first game here could finish. Fire-and-
+ * forget by construction; also the moment to deliver anything left over.
+ */
+export function warmCollector() {
+  if (!sharingOn() || devHost()) return;
+  try {
+    fetch(INGEST_BASE + "/health", { mode: "no-cors" }).catch(() => {});
+  } catch (err) {
+    /* nothing to do: the retry path covers it */
+  }
+  flushOutbox();
+}

js/worker.js ADDED Viewed

	@@ -0,0 +1,335 @@

+/* The AI's thread.
+ *
+ * Everything expensive happens here: loading the 13 MB ONNX graph, and running
+ * PUCT search against it. The page keeps the game state and only ships the
+ * position over (`toSetup()` is structured-clone-safe), so the UI thread never
+ * blocks — the board stays interactive and the "thinking" clock keeps ticking
+ * while the search runs.
+ *
+ * Backends. Two onnxruntime-web builds are vendored and exactly one is
+ * downloaded: the WebGPU one when the browser can run it (`navigator.gpu` plus
+ * JSPI), the pure-WASM one otherwise. The choice is made here rather than on the
+ * page so that a WebGPU session that fails to create can quietly fall back to
+ * WASM before the page has been told anything. See js/net.js for the measured
+ * reason the two differ — and why the batch size differs with them.
+ *
+ * Protocol (all messages carry an `id` that is echoed back):
+ *   -> {type:"init", backends, modelUrl}
+ *                                            <- {type:"loading"} ... {type:"ready", backend, batch, margin} | {type:"error"}
+ *   -> {type:"search", setup, budgetS}       <- {type:"progress"} ... {type:"result"}
+ *   -> {type:"policy", setup}                <- {type:"result"}   (hint: no search)
+ *   -> {type:"rate", setup, actionId, budgetS}
+ *                                            <- {type:"progress"} ... {type:"result"} (coach)
+ *   -> {type:"analyze", setup, budgetS}      <- {type:"result"} (coach, move not yet known)
+ *   -> {type:"cancel"}
+ */
+import { AzulState, Rng } from "./engine.js";
+import { MCTS, STALL_ROUNDS, selectAction } from "./mcts.js";
+import { OnnxEvaluator, webgpuLikely } from "./net.js";
+import { describeAction } from "./report.js";
+/**
+ * Leaves per forward pass, per backend.
+ *
+ * Measured on this laptop (Chrome, Apple M3 Pro), raw `session.run` throughput:
+ *
+ *   backend   batch 1     batch 16    batch 64    batch 256
+ *   wasm      2.1 k/s     4.0 k/s     4.2 k/s     4.1 k/s
+ *   webgpu    0.25 k/s    4.6 k/s     16.5 k/s    50 k/s
+ *
+ * WASM saturates by 16, so there is nothing to buy past it and a bigger batch
+ * only blurs the search. A GPU dispatch costs ~4 ms whatever it carries, so
+ * WebGPU is *worse* than WASM until about batch 8 and only then starts winning;
+ * 64 is where the tree still stays sharp enough to be worth the extra breadth.
+ *
+ * `minBatch` is the floor the ramp may not go under (see mcts.js `batchRamp`):
+ * on the CPU a batch of one is simply a small step, but on the GPU it is a 4 ms
+ * dispatch carrying one position, so the GPU never goes below 8.
+ */
+export const BATCH_BY_BACKEND = {
+  wasm: { batch: 16, minBatch: 1 },
+  webgpu: { batch: 64, minBatch: 8 },
+};
+let ort = null;
+let evaluator = null;
+let searchConfig = {};
+let cancelled = false;
+const rng = new Rng((Date.now() ^ 0x5eed) >>> 0);
+/**
+ * Download the model, reporting bytes as they arrive.
+ *
+ * It is a 13 MB file, which on a phone is several seconds of nothing happening;
+ * streaming the body lets the page show a real percentage instead of a spinner
+ * that might as well be broken.
+ */
+async function fetchWithProgress(url, id) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`model fetch failed: ${response.status} ${response.statusText}`);
+  const total = Number(response.headers.get("content-length")) || 0;
+  if (!response.body) return new Uint8Array(await response.arrayBuffer());
+  const reader = response.body.getReader();
+  const chunks = [];
+  let received = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    received += value.length;
+    self.postMessage({ type: "loading", id, received, total });
+  }
+  const bytes = new Uint8Array(received);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return bytes;
+}
+/** Load one onnxruntime-web build and point it at its own .wasm. */
+async function loadRuntime(spec) {
+  const runtime = await import(spec.module);
+  // SharedArrayBuffer needs cross-origin isolation, which GitHub Pages does not
+  // send; the CPU kernels therefore run on one thread either way.
+  runtime.env.wasm.numThreads = 1;
+  // Object form on purpose: a bare string prefix makes onnxruntime look for the
+  // Emscripten glue .mjs next to the .wasm, and the bundled build has it inlined.
+  runtime.env.wasm.wasmPaths = { wasm: spec.wasm };
+  runtime.env.logLevel = "error";
+  return runtime;
+}
+async function init(msg) {
+  const bytes = await fetchWithProgress(msg.modelUrl, msg.id);
+  // Ordered best-first by the page; each entry is {name, module, wasm, ep}.
+  // Anything that fails — no adapter, a runtime that will not instantiate, a
+  // graph the EP cannot take — falls through to the next, so the worst case is
+  // the WASM path that shipped before.
+  const tried = [];
+  // `navigator.gpu` inside the worker is the authority — a page can be served to
+  // a browser whose worker scope has no WebGPU at all — and skipping the entry
+  // here means the 15 MB WebGPU runtime is never even requested.
+  const wanted = msg.backends.filter((spec) => spec.ep !== "webgpu" || webgpuLikely());
+  for (const spec of wanted) {
+    try {
+      ort = await loadRuntime(spec);
+      evaluator = await OnnxEvaluator.create(ort, bytes, {
+        backend: spec.name,
+        executionProviders: [spec.ep],
+      });
+      // Warm-up is also the real test: a WebGPU session can be created and then
+      // fail on its first dispatch, and that must still fall back.
+      const warm = AzulState.newGame(1, new Rng(1));
+      await evaluator.evaluate(warm, warm.legalActions());
+      break;
+    } catch (err) {
+      tried.push(`${spec.name}: ${String((err && err.message) || err)}`);
+      ort = null;
+      evaluator = null;
+    }
+  }
+  if (!evaluator) throw new Error("no usable onnxruntime backend — " + tried.join("; "));
+  searchConfig = { ...(BATCH_BY_BACKEND[evaluator.backend] || { batch: 1, minBatch: 1 }) };
+  return {
+    bytes: bytes.length,
+    backend: evaluator.backend,
+    batch: searchConfig.batch,
+    margin: evaluator.hasMargin,
+    outputs: evaluator.outputNames,
+    fallbacks: tried,
+  };
+}
+/** The search's own timing, so the page can show a real positions/s. */
+let lastRate = null;
+function noteRate(result) {
+  if (result && result.sims > 32 && result.elapsedS > 0.2) {
+    lastRate = result.sims / result.elapsedS;
+  }
+  return result;
+}
+async function search(msg) {
+  const state = AzulState.fromSetup(msg.setup, new Rng(rng.next()));
+  const legal = state.legalActions();
+  if (!legal.length) throw new Error("no legal actions in the position sent to the worker");
+  if (legal.length === 1) {
+    return { action: legal[0], search: { sims: 0, elapsedS: 0, forced: true } };
+  }
+  const mcts = new MCTS(evaluator, searchConfig, new Rng(rng.next()));
+  cancelled = false;
+  const result = await mcts.search(state, {
+    timeLimitS: msg.budgetS,
+    shouldStop: () => cancelled,
+    onProgress: ({ sims, elapsedS }) => {
+      self.postMessage({ type: "progress", id: msg.id, sims, elapsedS });
+    },
+  });
+  // A game that drags past STALL_ROUNDS gets randomised so that it terminates
+  // (two arg-max players can otherwise loop forever — see mcts.js).
+  const action =
+    state.roundIndex >= STALL_ROUNDS ? selectAction(result.policy, 1, mcts.rng) : result.best;
+  const top = [...result.visits.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5);
+  noteRate(result);
+  return {
+    action,
+    search: {
+      sims: result.sims,
+      elapsedS: result.elapsedS,
+      value: result.value,
+      nodes: mcts.nodesCreated,
+      forced: false,
+      top,
+      backend: evaluator.backend,
+      batch: searchConfig.batch,
+      rate: lastRate,
+    },
+  };
+}
+/**
+ * Coach mode: rate one of *your* moves with the AI's own search.
+ *
+ * A port of ludometer/gui/coach.py, definition for definition. The same PUCT
+ * search the opponent plays with is run on your position and the root's edge
+ * statistics are read back out:
+ *
+ *     delta = Q(the move you played) − max over explored children Q
+ *
+ * `Q` is in the root player's frame — yours — on the net's [-1, 1] scale, so
+ * 0.00 means "the move the AI would have played" and −0.06 means the search
+ * values yours six hundredths of a win worse. A move the search never visited
+ * has no `Q` and is reported `unrated` rather than given an invented number.
+ */
+async function rate(msg) {
+  const state = AzulState.fromSetup(msg.setup, new Rng(rng.next()));
+  const action = msg.actionId;
+  const legal = state.legalActions();
+  const base = { budgetS: msg.budgetS, legal: legal.length, sims: 0, elapsedS: 0 };
+  if (legal.indexOf(action) === -1) {
+    return { coach: { ...base, unrated: true, reason: "that move is not legal" } };
+  }
+  if (legal.length === 1) {
+    return { coach: { ...base, delta: 0, forced: true } };
+  }
+  const mcts = new MCTS(evaluator, searchConfig, new Rng(rng.next()));
+  const result = await mcts.search(state, {
+    timeLimitS: msg.budgetS,
+    onProgress: ({ sims, elapsedS }) => {
+      self.postMessage({ type: "progress", id: msg.id, sims, elapsedS });
+    },
+  });
+  base.sims = result.sims;
+  base.elapsedS = result.elapsedS;
+  const explored = mcts.rootChildren().filter((c) => c.visits && c.q !== null);
+  if (!explored.length) {
+    return {
+      coach: { ...base, unrated: true, reason: "the search had no time to explore this position" },
+    };
+  }
+  const best = explored.reduce((a, b) => (b.q > a.q ? b : a));
+  const mine = explored.find((c) => c.action === action);
+  if (!mine) {
+    return {
+      coach: { ...base, unrated: true, reason: "the search never explored this move" },
+    };
+  }
+  return {
+    coach: {
+      ...base,
+      // Q is already in your frame, so this can only be <= 0; clamp the float
+      // noise away rather than showing "+0.00"
+      delta: Math.min(0, mine.q - best.q),
+      your_q: mine.q,
+      best_q: best.q,
+      visits: mine.visits,
+      best_visits: best.visits,
+      best_text: describeAction(state, best.action).text,
+      explored: explored.length,
+    },
+  };
+}
+/**
+ * Coach mode's head start: the same search `rate` runs, but *before* the move
+ * is known — it runs while the human is still thinking. The whole tree is
+ * position-only, so the root's explored children can be shipped back whole and
+ * the page can grade whichever move is eventually played. Honors `cancel`, so
+ * the moment the human moves, the opponent's own search gets the worker back.
+ */
+async function analyze(msg) {
+  const state = AzulState.fromSetup(msg.setup, new Rng(rng.next()));
+  const legal = state.legalActions();
+  const base = { budgetS: msg.budgetS, legal: legal.length, sims: 0, elapsedS: 0 };
+  if (legal.length <= 1) return { analysis: { ...base, forced: true, children: [] } };
+  const mcts = new MCTS(evaluator, searchConfig, new Rng(rng.next()));
+  cancelled = false;
+  const result = await mcts.search(state, {
+    timeLimitS: msg.budgetS,
+    shouldStop: () => cancelled,
+    onProgress: ({ sims, elapsedS }) => {
+      self.postMessage({ type: "progress", id: msg.id, sims, elapsedS });
+    },
+  });
+  const children = mcts
+    .rootChildren()
+    .filter((c) => c.visits && c.q !== null)
+    .map((c) => ({ action: c.action, q: c.q, visits: c.visits }));
+  let bestAction = null;
+  let bestText = null;
+  if (children.length) {
+    const best = children.reduce((a, b) => (b.q > a.q ? b : a));
+    bestAction = best.action;
+    bestText = describeAction(state, best.action).text;
+  }
+  return {
+    analysis: {
+      ...base,
+      sims: result.sims,
+      elapsedS: result.elapsedS,
+      children,
+      best_action: bestAction,
+      best_text: bestText,
+    },
+  };
+}
+/** The policy head's own pick, no search — what the "Suggest a move" button asks. */
+async function policy(msg) {
+  const state = AzulState.fromSetup(msg.setup, new Rng(rng.next()));
+  const legal = state.legalActions();
+  if (!legal.length) throw new Error("no legal actions in the position sent to the worker");
+  const { priors, value } = await evaluator.evaluate(state, legal);
+  let best = 0;
+  for (let i = 1; i < priors.length; i++) if (priors[i] > priors[best]) best = i;
+  return { action: legal[best], search: { sims: 0, elapsedS: 0, value, prior: priors[best], forced: false } };
+}
+self.onmessage = async (event) => {
+  const msg = event.data;
+  if (msg.type === "cancel") {
+    cancelled = true;
+    return;
+  }
+  try {
+    let payload;
+    if (msg.type === "init") payload = await init(msg);
+    else if (msg.type === "search") payload = await search(msg);
+    else if (msg.type === "policy") payload = await policy(msg);
+    else if (msg.type === "rate") payload = await rate(msg);
+    else if (msg.type === "analyze") payload = await analyze(msg);
+    else throw new Error(`unknown message type ${msg.type}`);
+    self.postMessage({ type: msg.type === "init" ? "ready" : "result", id: msg.id, ...payload });
+  } catch (err) {
+    self.postMessage({ type: "error", id: msg.id, message: String((err && err.message) || err) });
+  }
+};

model/model.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:77316466e2de41f35d53d06232e781cc5bd5c592a97bc8967e36f8168510da44
+size 7329526

model/model_meta.json ADDED Viewed

	@@ -0,0 +1,45 @@

+{
+  "run": "run4",
+  "checkpoint": "ckpt-037888",
+  "elo": 2361.0,
+  "games": 37888,
+  "exported_at": "2026-08-16T20:39:05Z",
+  "input_size": 182,
+  "action_space": 180,
+  "net_config": {
+    "arch": "structured",
+    "input_size": 182,
+    "action_space": 180,
+    "embed": 96,
+    "layers": 1,
+    "heads": 4,
+    "ffn_mult": 2,
+    "body": 1024,
+    "body_blocks": 1,
+    "value_hidden": 128,
+    "policy_rank": 32,
+    "policy_global": true,
+    "margin_head": true,
+    "version": 2
+  },
+  "num_params": 1810331,
+  "outputs": [
+    "policy",
+    "value",
+    "margin"
+  ],
+  "has_margin": true,
+  "opset": 17,
+  "onnx_bytes": 7329526,
+  "onnx_sha256": "77316466e2de41f35d53d06232e781cc5bd5c592a97bc8967e36f8168510da44",
+  "parity": {
+    "checked": true,
+    "n": 100,
+    "policy_max_abs_diff": 1.2874603271484375e-05,
+    "value_max_abs_diff": 1.4007091522216797e-06,
+    "tol": 0.0001,
+    "margin_max_abs_diff": 6.109476089477539e-07
+  },
+  "source_checkpoint": "runs/run4/checkpoints/ckpt-037888.pt",
+  "torch_reference": "/Users/remi/ludometer/web/player/test/fixtures/torch_reference.json.gz"
+}

social.png ADDED Viewed

Git LFS Details

SHA256: 2f8d6bc28b6152b313e2857194721127f7f9535b24d779f771e0793cd4447ae9
Pointer size: 131 Bytes
Size of remote file: 207 kB

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

ui/PORTING.md ADDED Viewed

	@@ -0,0 +1,111 @@

+# `web/play/ui/` — the portable half of the table
+These files draw an Azul game. They know the engine's **state JSON** and the
+engine's **action encoding** (`source*30 + colour*6 + destination`), and nothing
+else: no framework, no build step, no `fetch`, no endpoint name, no globals. The
+local GUI (`web/play/app.js`) and the GitHub Pages player (`web/player/`) can
+therefore draw the same table from two completely different back ends — one a
+Flask server, one a Web Worker running ONNX in the tab.
+`web/player/ui/` is a **byte-for-byte copy** of this directory. Change these
+files, then copy them across; `tests/test_gui.py` fails if the two ever drift.
+| file | exports | what it owns |
+|---|---|---|
+| `theme.css` | — | **every colour in the game**, as custom properties, plus a skin (see THEMING.md) |
+| `dom.js` | `node`, `tileEl`, `markerChip`, `actionId`, `preview`, `destsFor`, colour tables | the primitives, plus the two rules the view layer is allowed to know |
+| `board.js` | `createBoard`, `createMiddle` | one player board (both players use the same call), and the factories + centre |
+| `status.js` | `createStatus` | the status band, including the AI's clock |
+| `log.js` | `renderLog`, `glyphRun`, `coachChip`, `formatDelta` | the move log — newest first, tiles drawn as tiles |
+| `scoring.js` | `renderRoundPanel`, `renderFinalPanel`, `clearScoring` | inline round and end-game scoring |
+| `animate.js` | `flyTiles`, `flightDuration`, `sleep`, `speed`, `setSpeed`, `initSpeed` | straight-line tile flights, and the one switch that governs motion |
+| `settings.js` | `createSettings` | the gear and its inline panel; pass `{popups: true}` for the score pop-up switch |
+| `history.js` | `createHistory`, `bindHistoryKeys` | ← / → move navigation over stored positions; `onChange` receives `{from, to}` plies so a page can animate the step |
+| `popups.js` | `popScore`, `popupsOn`, `setPopups`, `initPopups` | score pop-ups — "+3" floating off the square that earned it |
+| `board.css` | — | tiles, boards, middle, status band, settings, navigator, log, scoring, flights, the hand tray, score pop-ups |
+## The state the modules expect
+Exactly what `AzulState.to_json()` returns (Python) — which is exactly what
+`web/player/js/engine.js`'s `toJSON()` returns, field for field. That is the
+whole compatibility contract:
+```js
+{ round, current_player, factories: [[5], ×5], center: [5], marker_in_center,
+  bag: [5], lid: [5], tiles_left, scores: [2], is_terminal,
+  players: [{ score, wall: [5][5], pattern_lines: [{capacity, color, count}],
+              floor: [5], floor_marker, floor_penalty, completed_rows, ... }] }
+```
+The scoring panels additionally take the reports built by
+`ludometer/gui/moves.py` (`round_report` / `final_report`). A port that has no
+such reports can skip `scoring.js` and keep the rest.
+## Wiring it up (the whole integration)
+```js
+import { createBoard, createMiddle } from "./ui/board.js";
+import { createStatus } from "./ui/status.js";
+import { createSettings } from "./ui/settings.js";
+import { createHistory, bindHistoryKeys } from "./ui/history.js";
+import { renderLog } from "./ui/log.js";
+import { flyTiles, initSpeed } from "./ui/animate.js";
+initSpeed();                                   // do this before anything animates
+createSettings(document.getElementById("settings"));
+const status = createStatus(document.getElementById("status"));
+const middle = createMiddle(document.getElementById("middle"), { onPick: pick });
+const you = createBoard(document.getElementById("board-human"),
+                        { seat: 0, interactive: true, onPlay: play });
+const them = createBoard(document.getElementById("board-ai"), { seat: 1 });
+const nav = createHistory(document.getElementById("nav"),
+                          { log: () => S.log, onChange: render });
+bindHistoryKeys(nav, { enabled: () => !busy });
+you.render({ state, legalActions, selection, title: "You", toMove: true });
+them.render({ state, title: "AI" });
+status.set({ headline: "Your turn — pick a colour", detail: "Round 1", tone: "you" });
+```
+`onPlay(actionId)` is the only thing a host page must implement; `legalActions`
+is an array of action ids from wherever the rules live. Boards are identical by
+construction — `interactive` is the only difference — so a page cannot
+accidentally make one player's board bigger than the other's.
+Animations aim at elements the board hands back: `lineSlots(row)`,
+`floorSlots()`, `wallCell(row, col)`, `lineTiles(row)`, plus `sourceTiles()` and
+`remainderTiles()` on the middle. Build the flights **before** re-rendering, so
+the tiles fly from where they actually were:
+```js
+await flyTiles(taken.map((from, i) => ({ from, to: targets[i], color })),
+               { layer: flyLayer });
+adopt(newState);   // now redraw
+```
+## Notes for whoever ports this
+* **Motion is governed by the settings panel, and by nothing else.** There used
+  to be a `prefers-reduced-motion` check in `animate.js` and a blanket
+  `transition-duration: .001ms !important` in `board.css`. macOS ships "Reduce
+  motion" on for a lot of people, so those players watched tiles teleport with
+  no way to ask for the animation back, while every headless test passed
+  (the harness set `no-preference` first). Do not reintroduce either gate: add
+  a setting instead. `prefersReducedMotion()` is still exported, purely so the
+  settings panel can explain itself.
+* **Every move carries the position it was played from** (`state_before`). That
+  is what lets a page animate *both* of the AI's moves when it moves twice
+  across a round boundary, and it is what `history.js` replays. A back end that
+  does not report it loses those two features and nothing else.
+* **Overlays: there are none, by design.** Round and game-end scoring is drawn
+  inline under the boards, the status band carries every "please wait" state,
+  and the settings panel opens in the flow rather than over the page. Keep it
+  that way — the board must stay readable at all times.
+* **The log is flat and newest-first.** Same type, same weight, same rule for
+  every entry, including the top one. Highlighting the newest makes it read as a
+  heading, which is what this redesign removed.
+* **Colours live in `theme.css`.** No hex literal belongs in `board.css`, in a
+  page shell, or in a JS module. See THEMING.md.
+* **Coach verdicts are just log data.** `renderLog` draws `entry.coach` through
+  `coachChip`; a port that has its own search can produce the same shape
+  (`{delta, best_text, unrated, reason, forced}`) and get the same chip for free.

ui/THEMING.md ADDED Viewed

	@@ -0,0 +1,120 @@

+# Theming the table
+Every colour this game draws with lives in **`theme.css`**, as a CSS custom
+property on `:root`. Nothing else — not `board.css`, not either page's
+`style.css`, not a JS module — is allowed a hex literal. If you want to restyle
+the table, that is the only file you open.
+```
+web/play/ui/theme.css      ← edit here
+web/player/ui/theme.css    ← byte-for-byte copy (tests/test_gui.py enforces it)
+```
+## The one rule the palette is built on
+**Hue means occupied.**
+A player's board is mostly empty: 25 wall squares, 15 pattern-line slots, 7
+floor slots. Those used to be painted in a pale tint of the colour that belongs
+there, which turned each board into forty pastel squares with five real tiles
+hidden among them. Now:
+* a **tile** is saturated, carries a fired rim (`--cN-rim`) and casts a shadow —
+  it stands *on* the board;
+* an **empty slot** is `--slot`: one neutral, everywhere, sunk into the board
+  with an inset shadow — it is a hole *in* the board;
+* the wall keeps its pattern as a thick **outlined** diamond in `--cN-motif`
+  (the full glaze by default, so the colour reads from across the table), with
+  a `--cN-wash` inside it, at `--slot-motif` opacity. Outlined, never filled —
+  enough to plan with, never enough to look like a tile. A skin whose slot is
+  too close to a glaze re-points that colour's motif (dusk does this for
+  charcoal: `--c3-motif: var(--c3-ink)`).
+Keep that contrast, whatever else you change. `web/play/test/gui.test.mjs`
+checks it numerically: every empty square must be near-neutral (low chroma)
+while the four chromatic glazes must be strongly saturated, and every empty
+square must be visibly recessed while every tile is visibly raised.
+## The token groups
+| group | what it is | examples |
+|---|---|---|
+| the table | cloth, plaster, mortar, ink | `--linen`, `--plaster`, `--grout`, `--ink-soft` |
+| the five glazes | one set of five per tile colour | `--c0` … `--c4`, plus `-hi` `-lo` `-rim` `-ink` `-wash` |
+| empty slots | the neutral well | `--slot`, `--slot-lo`, `--slot-rim`, `--slot-shade`, `--slot-motif`, `--cN-motif` |
+| fixtures | factory dishes, the centre, the marker, the lid | `--dish`, `--marker-face`, `--lid-receiving` |
+| meaning | what the status band and the coach are *about* | `--tone-you`, `--tone-ai`, `--grade-blunder`, `--gain` |
+| chrome | panels, buttons, fields, focus | `--panel-top`, `--btn-primary-top`, `--focus-ring` |
+| geometry | tile size, corner radius, the three type families | `--tile`, `--radius`, `--font-display` |
+Colours in the *meaning* group are aliases: `--tone-ai: var(--c0)`. That is
+deliberate — the interface never invents an accent that is not already a tile on
+the table, so a new skin gets a coherent UI for free.
+## The five glazes
+Each colour needs five values. `--cN` is the glaze; `--cN-hi` and `--cN-lo` are
+the lit and shaded edges of the bevel; `--cN-rim` is the darker fired edge drawn
+around a placed tile; `--cN-ink` is the same hue as a *line* — outlines, small
+text, the wall's diamonds — and must stay legible against `--slot` and against
+`--plaster`. `--cN-wash` is a transparent version for highlight backgrounds.
+The shipped values are matched to the tiles in the physical base game — cobalt,
+mustard ochre, brick terracotta, charcoal, and a pale cyan-turquoise ("ice")
+that must read clearly lighter than the cobalt at a glance. That last constraint
+is the one people get wrong: if ice and cobalt are close in lightness the board
+becomes unreadable, whatever their hues.
+## Writing a skin
+A skin is the same list of properties, redeclared under a `data-skin` attribute
+on the root element. `theme.css` ships one, `dusk`, as a worked example — same
+factory, lit at the end of the day.
+```css
+:root[data-skin="seaside"] {
+  --linen: #dfe7e6;
+  --plaster: #f7fbfa;
+  --grout: #a9bcbb;
+  --ink: #1d2b2b;
+  --c0: #1d4f8f; --c0-hi: #5d8ec9; --c0-lo: #0d2f5c; --c0-rim: #0a2749; --c0-ink: #164079;
+  /* … c1 through c4 … */
+  --slot: #c2cbca;
+  --slot-lo: #adb8b7;
+  --slot-rim: #8d9a99;
+}
+```
+Turn it on:
+```js
+document.documentElement.dataset.skin = "seaside";   // or delete it for the default
+```
+Nothing else needs touching. There is no skin picker in the interface today —
+the mechanism exists so a future change is one file and one line, not a sweep
+through the stylesheets.
+### Checklist for a new skin
+1. Redeclare **every** token you are changing, including the `-hi`/`-lo`/`-rim`/
+   `-ink`/`-wash` members of each glaze. Half a glaze looks broken, not eclectic.
+2. Keep `--slot` near-neutral and darker than `--plaster`. That is the whole
+   readability argument above.
+3. Check `--cN-ink` against both `--slot` and `--plaster` — it is used for text.
+4. If your ground is dark, redeclare `--shadow-panel`, `--shadow-tile` and
+   `--shadow-tile-raised`: warm brown shadows disappear on a slate table.
+5. Run `node web/play/test/gui.test.mjs` — it renders the board and asserts the
+   filled-versus-empty contrast holds.
+## What is deliberately *not* themed
+The tile's bevel — the pinwheel conic gradient and the glaze highlight in
+`board.css` — is geometry, not colour, and it is drawn from `--base`, `--hi` and
+`--lo`. A skin changes the clay; it does not need to redraw the kiln.
+Do not reproduce the published Azul artwork or the layout of any commercial Azul
+client here. The palette is matched to the physical tiles, which is a fact about
+the game; the drawing is ours.

ui/animate.js ADDED Viewed

	@@ -0,0 +1,200 @@

+/* Straight-line tile flights.
+ *
+ * Every movement on this table is the same gesture: a tile leaves one place and
+ * travels in a straight line to another. Five things move — tiles from a dish
+ * to a board, a dish's leftovers to the middle, the first-player marker, a full
+ * pattern line to the wall, and the floor line to the lid — and all of them are
+ * the same call.
+ *
+ * A flight is a clone in a fixed-position layer: the real tiles are hidden for
+ * the duration, and the page re-renders from the new state when the group
+ * lands. Nothing here knows what a move *means*; callers pass elements (or
+ * rectangles) and a colour.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THERE IS NO `prefers-reduced-motion` CHECK IN THIS FILE
+ *
+ * There used to be one, and it was a bug with a long tail. `flyTiles` returned
+ * immediately when the OS asked for reduced motion, `sleep` collapsed to zero,
+ * and board.css additionally forced `transition-duration: .001ms !important` on
+ * everything. macOS ships "Reduce motion" switched on for a lot of people, and
+ * Safari and Chrome both forward it, so those players saw tiles teleport with
+ * no way whatsoever to ask for the animation back — while every headless test
+ * passed, because the test harness set `no-preference` first.
+ *
+ * Motion is now governed by one thing only: the speed setting in the page
+ * (`speed()` / `setSpeed()` below, persisted in localStorage). The OS flag is
+ * still readable through `prefersReducedMotion()` so the settings panel can
+ * *mention* it, but it never silences anything on its own.
+ * ───────────────────────────────────────────────────────────────────────────── */
+export const FLIGHT_MS = 460; // one group of tiles, door to door, at 1×
+export const STAGGER_MS = 45; // ... plus this per tile after the first
+export const LAND_MS = 90; // a beat to let the last tile settle
+const STORE_KEY = "ludometer.anim.speed";
+/** What the settings panel offers. 0 means "no animation at all". */
+export const SPEEDS = [0, 0.5, 1, 2];
+export const DEFAULT_SPEED = 1;
+let current = DEFAULT_SPEED;
+const listeners = [];
+function readStored() {
+  try {
+    const raw = window.localStorage.getItem(STORE_KEY);
+    if (raw === null) return DEFAULT_SPEED;
+    const value = Number(raw);
+    return SPEEDS.indexOf(value) === -1 ? DEFAULT_SPEED : value;
+  } catch (err) {
+    return DEFAULT_SPEED; // private mode, a locked-down profile: animate anyway
+  }
+}
+/** The current animation speed: 0 (off), 0.5 (slower), 1 (default) or 2 (fast). */
+export const speed = () => current;
+/** Whether tiles move at all. */
+export const animated = () => current > 0;
+/**
+ * Choose a speed. Persists it, reflects it on `<body data-anim>` (so CSS can
+ * see it) and tells every listener.
+ */
+export function setSpeed(value) {
+  const next = SPEEDS.indexOf(Number(value)) === -1 ? DEFAULT_SPEED : Number(value);
+  current = next;
+  try {
+    window.localStorage.setItem(STORE_KEY, String(next));
+  } catch (err) {
+    /* not being able to remember it is not a reason to refuse it */
+  }
+  if (document.body) document.body.dataset.anim = next === 0 ? "off" : String(next);
+  listeners.forEach((fn) => fn(next));
+  return next;
+}
+export function onSpeedChange(fn) {
+  listeners.push(fn);
+  return () => listeners.splice(listeners.indexOf(fn), 1);
+}
+/** Load the stored speed. Call once, early, before anything animates. */
+export function initSpeed() {
+  return setSpeed(readStored());
+}
+/** How long `ms` at 1× lasts at the current speed. Zero when animation is off. */
+export function scaled(ms) {
+  if (!current) return 0;
+  return ms / current;
+}
+/**
+ * Whether the *operating system* asks for reduced motion.
+ *
+ * Informational only — see the note at the top of this file. The settings panel
+ * uses it to explain itself; nothing else may branch on it.
+ */
+export const prefersReducedMotion = () =>
+  !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+/** A pause in a turn sequence, in 1× milliseconds. */
+export const sleep = (ms) =>
+  new Promise((done) => setTimeout(done, scaled(ms)));
+/** A rectangle for an element, or the rectangle itself if one is passed. */
+export function rectOf(target) {
+  if (!target) return null;
+  if (typeof target.getBoundingClientRect === "function") {
+    const r = target.getBoundingClientRect();
+    if (!r.width && !r.height) return null;
+    return r;
+  }
+  return target;
+}
+/**
+ * Fly `flights` and resolve once they have landed.
+ *
+ * Each flight is `{from, to, color, hide}`: `from`/`to` are elements or client
+ * rectangles, `color` is 0..4 (or "marker"), `hide` defaults to true and hides
+ * the source element while its clone is in the air.
+ *
+ * `options`: `{layer, duration, stagger, scale}` — `duration` and `stagger` are
+ * 1× milliseconds and are scaled by the speed setting here. Returns a promise
+ * that always resolves (never rejects) so a caller can `await` it in a turn
+ * sequence.
+ */
+export function flyTiles(flights, options = {}) {
+  const layer = options.layer;
+  const baseDuration = options.duration === undefined ? FLIGHT_MS : options.duration;
+  const baseStagger = options.stagger === undefined ? STAGGER_MS : options.stagger;
+  if (!layer || !flights || !flights.length || !animated()) return Promise.resolve();
+  const duration = scaled(baseDuration);
+  const stagger = scaled(baseStagger);
+  const airborne = [];
+  flights.forEach((flight, i) => {
+    const a = rectOf(flight.from);
+    const b = rectOf(flight.to);
+    if (!a || !b) return;
+    const ghost = document.createElement("div");
+    ghost.className = "fly-tile " + (flight.color === "marker" ? "marker" : "tile");
+    if (flight.color !== "marker") ghost.dataset.color = flight.color;
+    else ghost.textContent = "1";
+    ghost.style.left = a.left + "px";
+    ghost.style.top = a.top + "px";
+    ghost.style.width = a.width + "px";
+    ghost.style.height = a.height + "px";
+    ghost.style.transitionDuration = duration + "ms";
+    // the delay is per *airborne* clone, not per requested flight, so a skipped
+    // flight (source already gone) never leaves a clone waiting past `total`
+    const delay = airborne.length * stagger;
+    ghost.style.transitionDelay = delay + "ms";
+    layer.appendChild(ghost);
+    if (flight.hide !== false && flight.from && flight.from.style) {
+      flight.from.style.visibility = "hidden";
+    }
+    // A tile stays a tile in the air. The destination is sometimes a whole
+    // panel (the lid, the centre dish), and matching its width used to blow the
+    // clone up to the width of the page mid-flight — so the scale is clamped to
+    // "slightly bigger or smaller", never "as big as whatever it lands in".
+    const raw = options.scale === false ? 1 : b.width / (a.width || 1);
+    const scale = Math.max(0.6, Math.min(1.25, raw));
+    const dx = b.left + (b.width - a.width * scale) / 2 - a.left;
+    const dy = b.top + (b.height - a.height * scale) / 2 - a.top;
+    airborne.push([ghost, dx, dy, scale, delay]);
+  });
+  if (!airborne.length) return Promise.resolve();
+  const total = duration + (airborne.length - 1) * stagger + scaled(LAND_MS);
+  return new Promise((done) => {
+    requestAnimationFrame(() => {
+      // Commit every clone's starting position before any of them moves. The
+      // clones were styled and appended in the same task that is about to set
+      // their transforms; without a forced style flush the browser's first
+      // recalc would see only the final state, and whichever clone nothing
+      // else happened to flush — always the last one — would skip its
+      // transition and simply appear at the destination.
+      void layer.offsetWidth;
+      airborne.forEach(([ghost, dx, dy, scale, delay]) => {
+        ghost.style.transform =
+          "translate(" + dx + "px, " + dy + "px) scale(" + scale.toFixed(3) + ")";
+        // each tile seats the moment *it* lands — the raised in-flight shadow
+        // drops then, not when the whole group has finished arriving
+        setTimeout(() => ghost.classList.add("landed"), duration + delay);
+      });
+      setTimeout(() => {
+        airborne.forEach(([ghost]) => ghost.remove());
+        done();
+      }, total);
+    });
+  });
+}
+/** Total wall time `flyTiles` will take for `count` tiles — for pacing a turn. */
+export function flightDuration(count, duration = FLIGHT_MS, stagger = STAGGER_MS) {
+  if (!count || !animated()) return 0;
+  return scaled(duration + (count - 1) * stagger + LAND_MS);
+}

ui/board.css ADDED Viewed

	@@ -0,0 +1,848 @@

+@import url("theme.css");
+/* Azul board kit — the portable half of the page.
+ *
+ * Direction: glazed azulejo ceramic on a linen table. A tile that is on the
+ * board is saturated, rimmed and raised; a square that is empty is a neutral
+ * recessed well. That single contrast is what makes the position readable from
+ * across a room, and it is the thing this file exists to protect.
+ *
+ * **Every colour comes from theme.css.** There is not one hex literal below
+ * this comment — if you find yourself typing one, add a token instead, or the
+ * next skin will quietly break. See THEMING.md.
+ *
+ * Scope: tiles, the two player boards, the middle of the table, the status
+ * band, the settings panel, the move navigator, the move log, the inline
+ * scoring panels and the flight layer. Nothing in here knows about a server, a
+ * form or a page shell — this file plus ui/*.js is what another page needs to
+ * draw the same table.
+ *
+ * Motion: animations are governed by the in-game speed setting alone (see
+ * animate.js), never by an OS accessibility flag. `body[data-anim="off"]` is
+ * the only thing that turns them off, and the setting writes it.
+ */
+.panel {
+  padding: 14px 16px 16px;
+  /* the solid colour matters as well as the gradient: it is what a contrast
+   * check (and a browser with gradients disabled) actually reads */
+  background-color: var(--panel-bottom);
+  background-image: linear-gradient(var(--panel-top), var(--panel-bottom));
+  border: 1px solid var(--panel-edge);
+  border-radius: 4px;
+  box-shadow: var(--shadow-panel);
+}
+.panel-title {
+  margin: 0 0 10px;
+  font-family: var(--font-label);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+/* ============================================================== status band ==
+ * The signature: one wide plaster cartouche that says what is happening, keeps
+ * the score, and turns into the AI's clock when it is thinking. Because it
+ * always holds the answer, nothing ever has to cover the board to ask you to
+ * wait — there is not a single overlay in this page. */
+.status {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: clamp(14px, 3vw, 40px);
+  padding: 14px clamp(16px, 2.4vw, 26px) 16px;
+  overflow: hidden;
+  background: linear-gradient(var(--plaster-hi), var(--plaster-sunk));
+  border: 1px solid var(--panel-edge);
+  border-left: 5px solid var(--tone-idle);
+  border-radius: 4px;
+  box-shadow: var(--shadow-panel);
+}
+.status[data-tone="you"] { border-left-color: var(--tone-you); }
+.status[data-tone="ai"] { border-left-color: var(--tone-ai); }
+.status[data-tone="scoring"] { border-left-color: var(--tone-scoring); }
+.status[data-tone="end"] { border-left-color: var(--tone-end); }
+/* browsing the history: the band is the only thing that changes colour, so you
+ * always know at a glance that what you are looking at is the past */
+.status[data-tone="history"] { border-left-color: var(--ink-soft); }
+.status-text { flex: 1; min-width: 0; }
+.status-headline {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(21px, 2.5vw, 31px);
+  line-height: 1.15;
+  letter-spacing: .005em;
+}
+.status-detail {
+  margin: 4px 0 0;
+  font-family: var(--font-label);
+  font-size: 12.5px;
+  letter-spacing: .08em;
+  color: var(--ink-soft);
+  min-height: 15px;
+}
+.status-score { display: flex; align-items: center; gap: 10px; }
+.status-dash { color: var(--ink-faint); font-family: var(--font-display); font-size: 22px; }
+.status-side { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
+.status-side-score {
+  font-family: var(--font-display);
+  font-size: 34px;
+  line-height: 1;
+  color: var(--ink-faint);
+}
+.status-side.leading .status-side-score { color: var(--ink); }
+.status-side-name {
+  font-family: var(--font-label);
+  font-size: 10px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+/* the clock: a glaze bar drawn along the foot of the band */
+.status-bar {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 3px;
+  background: var(--c3-wash);
+  opacity: 0;
+  transition: opacity .2s ease;
+}
+.status.ticking .status-bar { opacity: 1; }
+.status-fill {
+  display: block;
+  width: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--c0-hi), var(--c0));
+  transition: width .12s linear;
+}
+.status.indeterminate .status-fill {
+  width: 34% !important;
+  animation: glaze-sweep-bar 1.1s ease-in-out infinite alternate;
+}
+@keyframes glaze-sweep-bar {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(300%); }
+}
+/* ==================================================================== tile ==
+ * A tile is *there*: saturated, rimmed with its own fired edge, and standing a
+ * little proud of the board. `background-color` carries the glaze on its own so
+ * that the colour survives even where gradients do not. */
+.tile {
+  position: relative;
+  width: var(--tile);
+  height: var(--tile);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background-color: var(--base);
+  background-image:
+    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 56%),
+    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .2) 0 17%, rgba(255, 255, 255, 0) 18%),
+    conic-gradient(from 45deg at 50% 50%,
+      rgba(255, 255, 255, .14) 0 25%, rgba(0, 0, 0, .08) 0 50%,
+      rgba(255, 255, 255, .14) 0 75%, rgba(0, 0, 0, .08) 0),
+    linear-gradient(158deg, var(--hi), var(--base) 52%, var(--lo));
+  box-shadow:
+    0 0 0 1px var(--rim),
+    0 1px 0 rgba(255, 255, 255, .45) inset,
+    0 -2px 4px rgba(0, 0, 0, .28) inset,
+    var(--shadow-tile);
+}
+.tile[data-color="0"] { --base: var(--c0); --hi: var(--c0-hi); --lo: var(--c0-lo); --rim: var(--c0-rim); }
+.tile[data-color="1"] { --base: var(--c1); --hi: var(--c1-hi); --lo: var(--c1-lo); --rim: var(--c1-rim); }
+.tile[data-color="2"] { --base: var(--c2); --hi: var(--c2-hi); --lo: var(--c2-lo); --rim: var(--c2-rim); }
+.tile[data-color="3"] { --base: var(--c3); --hi: var(--c3-hi); --lo: var(--c3-lo); --rim: var(--c3-rim); }
+.tile[data-color="4"] { --base: var(--c4); --hi: var(--c4-hi); --lo: var(--c4-lo); --rim: var(--c4-rim); }
+.tile.mini { width: 22px; height: 22px; }
+/* a tile that has reached the wall is the most permanent thing on the board */
+.tile.placed { box-shadow: 0 0 0 1.5px var(--rim), 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 5px rgba(0, 0, 0, .3) inset, var(--shadow-tile-raised); }
+button.tile { cursor: pointer; transition: transform .13s ease, box-shadow .13s ease; }
+button.tile:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 0 1px var(--rim), 0 1px 0 rgba(255, 255, 255, .45) inset,
+    0 -2px 4px rgba(0, 0, 0, .28) inset, var(--shadow-tile-raised);
+}
+button.tile.taken { transform: translateY(-4px) scale(1.04); }
+button.tile.taken::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border: 2px solid var(--ink);
+  border-radius: 6px;
+  opacity: .85;
+}
+button.tile.dimmed { opacity: .34; }
+button.tile:disabled { cursor: default; }
+.marker {
+  width: var(--tile);
+  height: var(--tile);
+  display: grid;
+  place-items: center;
+  border-radius: var(--radius);
+  background: linear-gradient(var(--marker-face), var(--marker-lo));
+  box-shadow: 0 0 0 1px var(--grout-deep) inset, var(--shadow-tile);
+  font-family: var(--font-display);
+  font-size: 16px;
+  color: var(--ink-soft);
+}
+.marker.tiny { width: calc(var(--tile) - 4px); height: calc(var(--tile) - 4px); font-size: 12px; }
+/* ============================================================= empty slot ==
+ * A slot is a *hole*: neutral (no glaze, ever), sunk into the board, ringed by
+ * its own shadow. One rule, one look, everywhere a square is empty. */
+.slot, .cell.empty {
+  width: var(--tile);
+  height: var(--tile);
+  border-radius: var(--radius);
+  background-color: var(--slot);
+  background-image: linear-gradient(var(--slot-lo), var(--slot) 46%);
+  box-shadow:
+    0 0 0 1px var(--slot-rim) inset,
+    0 3px 5px -1px var(--slot-shade) inset,
+    0 -1px 0 rgba(255, 255, 255, .3) inset;
+}
+/* ================================================= middle of the table == */
+.factories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px 18px;
+  justify-content: center;
+  padding: 4px 0 2px;
+}
+.factory {
+  --dish-size: calc(var(--tile) * 2 + 32px);
+  position: relative;
+  width: var(--dish-size);
+  height: var(--dish-size);
+  display: grid;
+  grid-template-columns: repeat(2, var(--tile));
+  grid-auto-rows: var(--tile);
+  gap: 5px;
+  place-content: center;
+  border-radius: 50%;
+  background: radial-gradient(circle at 38% 30%, var(--dish-hi), var(--dish) 62%, var(--dish-lo));
+  box-shadow:
+    0 0 0 1px var(--dish-rim) inset,
+    0 3px 0 -1px rgba(255, 255, 255, .5) inset,
+    0 -6px 10px -6px var(--slot-shade) inset,
+    0 6px 14px -8px rgba(48, 34, 14, .5);
+}
+.factory:nth-child(odd) { transform: rotate(-1.1deg); }
+.factory:nth-child(even) { transform: rotate(1.3deg); }
+.factory .fac-id {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-label);
+  font-size: 11px;
+  letter-spacing: .12em;
+  color: var(--ink-faint);
+}
+.factory.empty { opacity: .55; }
+.factory .empty-note { grid-column: 1 / -1; text-align: center; }
+.center-dish {
+  margin: 14px auto 0;
+  min-height: calc(var(--tile) + 24px);
+  max-width: 680px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px 10px;
+  padding: 11px 20px;
+  border-radius: 999px;
+  background: radial-gradient(120% 160% at 50% 0%, var(--dish-hi), var(--dish) 60%, var(--dish-lo));
+  box-shadow:
+    0 0 0 1px var(--dish-rim) inset,
+    0 3px 0 -1px rgba(255, 255, 255, .5) inset,
+    0 -8px 14px -8px var(--slot-shade) inset,
+    0 8px 18px -12px rgba(48, 34, 14, .5);
+}
+.center-dish .empty-note, .factory .empty-note {
+  font-family: var(--font-label);
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.group { display: flex; gap: 4px; }
+/* the dish a move is drawing from, while it draws */
+.factory.picked, .center-dish.picked {
+  box-shadow:
+    0 0 0 2px var(--c0) inset,
+    0 3px 0 -1px rgba(255, 255, 255, .5) inset,
+    0 0 0 4px var(--c0-wash),
+    0 6px 14px -8px rgba(48, 34, 14, .55);
+}
+/* ================================================================= board == */
+/* Both boards are this component with `interactive` flipped, so the human's and
+ * the AI's are the same size, the same rows, the same everything. */
+.board {
+  /* both boards share this: identical size is the point of the twin layout */
+  --tile: clamp(20px, 2.5vw, 42px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: stretch;
+  padding: 12px 14px 14px;
+  background-color: var(--panel-bottom);
+  background-image: linear-gradient(var(--panel-top), var(--panel-bottom));
+  border: 1px solid var(--panel-edge);
+  border-radius: 4px;
+  box-shadow: var(--shadow-panel);
+}
+.board.to-move { border-color: var(--grout); box-shadow: var(--shadow-panel), 0 0 0 2px var(--c4-wash); }
+.board-head {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  column-gap: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--panel-edge);
+}
+.board-who {
+  font-family: var(--font-label);
+  font-size: 12px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+}
+.board-score { font-family: var(--font-display); font-size: 30px; line-height: 1; text-align: right; }
+.board-notes {
+  grid-column: 1 / -1;
+  font-family: var(--font-label);
+  font-size: 11px;
+  letter-spacing: .06em;
+  color: var(--ink-faint);
+  min-height: 14px;
+}
+/* The board's spine: pattern line r and wall row r are ONE grid row, exactly as
+ * on the cardboard, so a full line visibly slides into the row beside it. */
+.board-grid {
+  --row-h: calc(var(--tile) + 6px);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  grid-auto-rows: var(--row-h);
+  column-gap: clamp(8px, 1vw, 18px);
+  row-gap: 0;
+}
+.line {
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  height: 100%;
+  padding: 0 5px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: none;
+  text-align: right;
+}
+button.line { cursor: default; font: inherit; color: inherit; }
+button.line.open {
+  cursor: pointer;
+  border-color: var(--c4-lo);
+  background: var(--c4-wash);
+  box-shadow: 0 0 0 3px var(--c4-wash);
+}
+button.line.open:hover { background: var(--c4-wash); filter: brightness(1.04); }
+button.line.blocked { cursor: not-allowed; opacity: .5; }
+.line .row-note {
+  flex: 1;
+  min-width: 0;
+  margin-right: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  font-family: var(--font-label);
+  font-size: 11px;
+  letter-spacing: .04em;
+  color: var(--ink-faint);
+}
+.line.open .row-note { color: var(--c4-lo); }
+.line.incoming { border-color: var(--c0); background: var(--c0-wash); }
+/* One grouted strip per wall row; stacked with no row gap they read as one
+ * mortared panel, and each strip stays level with its pattern line. */
+.wall-row {
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: repeat(5, var(--tile));
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 100%;
+  padding: 0 5px;
+  /* the mortar has to be darker than the squares set into it, or the wall reads
+   * as one slab instead of a grid */
+  background: var(--grout-deep);
+  box-shadow: 0 2px 6px -3px var(--slot-shade) inset;
+}
+.wall-row.top { border-radius: 4px 4px 0 0; }
+.wall-row.bottom { border-radius: 0 0 4px 4px; }
+/* An empty wall square is a hole with the memory of its glaze in it. The well
+ * stays neutral (hue means occupied), but sunk into it is a small diamond of
+ * the colour that belongs there, drawn the way a setter would mark plaster: a
+ * matte, translucent wash of the glaze (`--cN-ghost`), edged with a fine line
+ * of the true colour (`--cN-motif`), over a breath of the same pigment settled
+ * into the recess. Flat, unlit and see-through — everything a glossy raised
+ * tile is not — so it reads as "this colour goes here", never as "a tile is
+ * here", and it reads from across the table. */
+.cell { width: var(--tile); height: var(--tile); border-radius: var(--radius); }
+.cell.empty { position: relative; }
+.cell.empty::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius);
+  background: radial-gradient(circle at 50% 55%, var(--ghost-wash), transparent 72%);
+}
+.cell.empty::after {
+  content: "";
+  position: absolute;
+  inset: 27%;
+  transform: rotate(45deg);
+  border: 2px solid var(--ghost-glaze);
+  border-radius: 15%;
+  background: linear-gradient(155deg, var(--ghost-fill), var(--ghost-fill) 45%, var(--ghost-wash));
+  opacity: var(--slot-motif);
+}
+.cell.empty[data-color="0"] { --ghost-glaze: var(--c0-motif); --ghost-fill: var(--c0-ghost); --ghost-wash: var(--c0-wash); }
+.cell.empty[data-color="1"] { --ghost-glaze: var(--c1-motif); --ghost-fill: var(--c1-ghost); --ghost-wash: var(--c1-wash); }
+.cell.empty[data-color="2"] { --ghost-glaze: var(--c2-motif); --ghost-fill: var(--c2-ghost); --ghost-wash: var(--c2-wash); }
+.cell.empty[data-color="3"] { --ghost-glaze: var(--c3-motif); --ghost-fill: var(--c3-ghost); --ghost-wash: var(--c3-wash); }
+.cell.empty[data-color="4"] { --ghost-glaze: var(--c4-motif); --ghost-fill: var(--c4-ghost); --ghost-wash: var(--c4-wash); }
+.floor {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: none;
+}
+.floor .cellwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.floor .pen { font-family: var(--font-label); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); }
+button.floor.open {
+  cursor: pointer;
+  border-color: var(--c2);
+  background: var(--c2-wash);
+  box-shadow: 0 0 0 3px var(--c2-wash);
+}
+button.floor.open:hover { background: var(--c2-wash); filter: brightness(1.04); }
+.floor-wrap { display: flex; flex-direction: column; gap: 4px; }
+.floor-note { font-family: var(--font-label); font-size: 11px; color: var(--ink-faint); }
+.floor-note.warn { color: var(--c2-ink); }
+/* ========================================================= settings panel ==
+ * A gear and a row of presets, opened *inline*: it pushes the table down rather
+ * than covering it, because this page has no pop-ups and this is not the place
+ * to start. */
+.settings { display: flex; flex-direction: column; }
+.settings-head { display: flex; align-items: center; gap: 10px; }
+.gear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 34px;
+  padding: 4px 12px 4px 9px;
+  border: 1px solid var(--grout);
+  border-radius: 3px;
+  background: linear-gradient(var(--btn-top), var(--btn-bottom));
+  cursor: pointer;
+  font-family: var(--font-label);
+  font-size: 11.5px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+}
+.gear:hover { background: linear-gradient(var(--btn-top-hover), var(--btn-bottom-hover)); }
+.gear .gear-icon { width: 15px; height: 15px; display: block; fill: var(--ink-soft); transition: transform .35s ease; }
+.settings.open .gear .gear-icon { transform: rotate(60deg); }
+.settings-note { font-family: var(--font-label); font-size: 11.5px; letter-spacing: .05em; color: var(--ink-faint); }
+.settings-panel {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 18px;
+  margin-top: 10px;
+  padding: 12px 14px;
+  background: var(--plaster-sunk);
+  border: 1px solid var(--panel-edge);
+  border-radius: 4px;
+  box-shadow: 0 2px 5px -3px var(--slot-shade) inset;
+}
+.settings-panel[hidden] { display: none; }
+.settings-label {
+  font-family: var(--font-label);
+  font-size: 11px;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.speeds { display: flex; gap: 0; }
+/* `.flag` is the same segmented button in any other row of the panel (score
+ * pop-ups, future switches) — one look for "pick one of these". */
+.speed, .flag {
+  min-width: 52px;
+  min-height: 34px;
+  padding: 5px 12px;
+  border: 1px solid var(--grout);
+  border-left-width: 0;
+  background: var(--field-bg);
+  cursor: pointer;
+  font-family: var(--font-label);
+  font-size: 13px;
+  letter-spacing: .06em;
+  color: var(--ink-soft);
+}
+.speed:first-child, .flag:first-child { border-left-width: 1px; border-radius: 3px 0 0 3px; }
+.speed:last-child, .flag:last-child { border-radius: 0 3px 3px 0; }
+.speed:hover, .flag:hover { background: var(--btn-bottom-hover); }
+.speed[aria-pressed="true"], .flag[aria-pressed="true"] {
+  color: var(--btn-primary-ink);
+  border-color: var(--c0-lo);
+  background: linear-gradient(var(--btn-primary-top), var(--btn-primary-bottom));
+}
+.settings-gap { flex-basis: 100%; height: 0; margin: 0; }
+.settings-hint {
+  flex-basis: 100%;
+  margin: 0;
+  font-family: var(--font-label);
+  font-size: 11.5px;
+  letter-spacing: .04em;
+  color: var(--ink-faint);
+}
+/* ========================================================= move navigator ==
+ * Previous / next, and the only place on the page that talks about the past. */
+.nav { display: inline-flex; align-items: center; gap: 6px; }
+.nav-btn {
+  min-width: 38px;
+  min-height: 34px;
+  padding: 4px 11px;
+  border: 1px solid var(--grout);
+  border-radius: 3px;
+  background: linear-gradient(var(--btn-top), var(--btn-bottom));
+  cursor: pointer;
+  font-family: var(--font-label);
+  font-size: 14px;
+  color: var(--ink-soft);
+}
+.nav-btn:hover:not(:disabled) { background: linear-gradient(var(--btn-top-hover), var(--btn-bottom-hover)); }
+.nav-btn:disabled { opacity: .4; cursor: not-allowed; }
+.nav-count {
+  min-width: 84px;
+  text-align: center;
+  font-family: var(--font-label);
+  font-size: 11.5px;
+  letter-spacing: .08em;
+  color: var(--ink-faint);
+}
+/* while you are browsing, the board is a record, not a game */
+body.viewing .board-grid, body.viewing .factories, body.viewing .center-dish { cursor: default; }
+body.viewing .middle-table { opacity: .93; }
+/* ============================================================== move log ==
+ * Newest at the top, so the move you just made is the one you are looking at.
+ * Every entry, always, is drawn the same: a log is a record, not a headline —
+ * nothing here is highlighted, including the newest. */
+.log {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.log-entry {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 10px;
+  padding: 5px 0;
+  border-top: 1px solid var(--panel-edge);
+  font-size: 13.5px;
+  line-height: 1.4;
+  color: var(--ink-soft);
+}
+.log-entry:first-child { border-top: 0; }
+.log-tag {
+  font-family: var(--font-label);
+  font-size: 10px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  padding-top: 3px;
+}
+.log-text { min-width: 0; }
+/* the pictographic half: the tiles that moved, drawn as tiles */
+.glyphs { display: inline-flex; align-items: center; gap: 2px; vertical-align: -3px; margin-right: 6px; }
+.glyph {
+  width: 15px;
+  height: 15px;
+  border-radius: 2px;
+  background-color: var(--base);
+  background-image: linear-gradient(150deg, var(--hi), var(--base) 55%, var(--lo));
+  box-shadow: 0 0 0 1px var(--rim), 0 1px 0 rgba(255, 255, 255, .35) inset;
+}
+.glyph[data-color="0"] { --base: var(--c0); --hi: var(--c0-hi); --lo: var(--c0-lo); --rim: var(--c0-rim); }
+.glyph[data-color="1"] { --base: var(--c1); --hi: var(--c1-hi); --lo: var(--c1-lo); --rim: var(--c1-rim); }
+.glyph[data-color="2"] { --base: var(--c2); --hi: var(--c2-hi); --lo: var(--c2-lo); --rim: var(--c2-rim); }
+.glyph[data-color="3"] { --base: var(--c3); --hi: var(--c3-hi); --lo: var(--c3-lo); --rim: var(--c3-rim); }
+.glyph[data-color="4"] { --base: var(--c4); --hi: var(--c4-hi); --lo: var(--c4-lo); --rim: var(--c4-rim); }
+.glyph.marker-glyph {
+  display: grid;
+  place-items: center;
+  background: linear-gradient(var(--marker-face), var(--marker-lo));
+  box-shadow: 0 0 0 1px var(--grout-deep);
+  font-family: var(--font-display);
+  font-size: 10px;
+  color: var(--ink-soft);
+}
+.glyph.spill { opacity: .5; }
+.log-where { font-family: var(--font-label); font-size: 12.5px; letter-spacing: .04em; }
+.log-arrow { color: var(--ink-faint); padding: 0 3px; }
+.log-aside { color: var(--ink-faint); font-family: var(--font-label); font-size: 11.5px; }
+.coach-chip { display: inline-flex; align-items: baseline; gap: 7px; margin-left: 8px; vertical-align: baseline; }
+.coach-delta {
+  padding: 1px 7px 2px;
+  border-radius: 2px;
+  background: var(--plaster-sunk);
+  box-shadow: 0 0 0 1px var(--grout) inset;
+  font-family: var(--font-label);
+  font-size: 11.5px;
+  letter-spacing: .06em;
+  color: var(--ink-soft);
+  white-space: nowrap;
+}
+.coach-chip[data-grade="best"] .coach-delta { color: var(--grade-best); box-shadow: 0 0 0 1px var(--c0-ink) inset; background: var(--c0-wash); }
+.coach-chip[data-grade="slip"] .coach-delta { color: var(--grade-slip); box-shadow: 0 0 0 1px var(--c1-ink) inset; background: var(--c1-wash); }
+.coach-chip[data-grade="blunder"] .coach-delta { color: var(--grade-blunder); box-shadow: 0 0 0 1px var(--c2-ink) inset; background: var(--c2-wash); }
+.coach-chip[data-grade="pending"] .coach-delta { font-style: italic; }
+.coach-why { font-family: var(--font-label); font-size: 11.5px; letter-spacing: .03em; color: var(--ink-faint); }
+.coach-legend {
+  margin: 0 0 8px;
+  font-family: var(--font-label);
+  font-size: 11.5px;
+  letter-spacing: .04em;
+  color: var(--ink-faint);
+}
+/* ========================================================= inline scoring == */
+.scoring {
+  padding: 14px 16px 16px;
+  background: linear-gradient(var(--plaster-hi), var(--plaster-sunk));
+  border: 1px solid var(--panel-edge);
+  border-left: 5px solid var(--tone-scoring);
+  border-radius: 4px;
+  box-shadow: var(--shadow-panel);
+}
+.scoring.final { border-left-color: var(--tone-end); }
+.scoring[hidden] { display: none; }
+.scoring-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
+.scoring-title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
+.scoring-note { font-family: var(--font-label); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
+.scoring-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
+.score-card { padding: 12px 14px; border-radius: 4px; background: var(--plaster-sunk); box-shadow: 0 0 0 1px var(--grout) inset; }
+.score-card-who {
+  margin: 0 0 6px;
+  font-family: var(--font-label);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.score-delta { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; }
+.score-delta.big { font-size: 38px; line-height: 1; }
+.score-delta.up { color: var(--gain); }
+.score-delta.down { color: var(--loss); }
+.score-delta.won { color: var(--c0); }
+.score-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
+.score-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.score-tile .pts { font-family: var(--font-display); font-size: 14px; }
+.score-tile .where { font-family: var(--font-label); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); }
+.score-line { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
+.bonus-list { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; font-size: 13px; }
+.bonus-list dt { color: var(--ink-soft); }
+.bonus-list dd { margin: 0; text-align: right; font-family: var(--font-label); letter-spacing: .04em; }
+.bonus-list dt.sum, .bonus-list dd.sum { padding-top: 5px; border-top: 1px solid var(--grout); color: var(--ink); }
+/* ============================================================== hand tray ==
+ * Where a held selection goes while you choose a row: a small dish pinned to
+ * the corner of the middle panel. Purely a picture of the selection — the real
+ * tiles are hidden underneath it and come back the moment you change your mind. */
+.middle-panel { position: relative; }
+.hand {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: radial-gradient(120% 160% at 50% 0%, var(--dish-hi), var(--dish) 60%, var(--dish-lo));
+  box-shadow:
+    0 0 0 1px var(--dish-rim) inset,
+    0 2px 0 -1px rgba(255, 255, 255, .5) inset,
+    0 6px 14px -10px rgba(48, 34, 14, .5);
+}
+.hand[hidden] { display: none; }
+.hand-label {
+  font-family: var(--font-label);
+  font-size: 10px;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.hand-tiles { display: flex; gap: 4px; }
+/* ============================================================= confirm bar ==
+ * Confirm mode's one voice. It lives *inside* the middle panel's action row:
+ * while a move is placed, the row's usual controls step aside and the banner
+ * takes their exact place — centred, same height, so nothing on the page moves
+ * when it appears or goes. Never a pop-up, never over the board. */
+.middle-actions.placing > :not(.confirm-bar) { display: none; }
+.confirm-bar {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px 14px;
+  min-height: 34px; /* the height of the buttons it replaces */
+}
+.confirm-bar[hidden] { display: none; }
+.confirm-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-family: var(--font-display);
+  font-size: 18px;
+  font-weight: 400;
+  color: var(--ink);
+  white-space: nowrap;
+}
+/* a small ochre diamond — the attention hue, in the table's own shape */
+.confirm-title::before {
+  content: "";
+  width: 9px;
+  height: 9px;
+  transform: rotate(45deg);
+  border-radius: 1.5px;
+  background: var(--tone-scoring);
+}
+.confirm-detail {
+  font-family: var(--font-label);
+  font-size: 12.5px;
+  letter-spacing: .05em;
+  color: var(--ink-soft);
+}
+/* the placed move's own tiles: a breathing ring of the attention hue, the one
+ * moving thing on a page that is otherwise holding still for your word */
+.proposed { position: relative; }
+.proposed::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border: 2px solid var(--tone-scoring);
+  border-radius: 6px;
+  box-shadow: 0 0 0 3px var(--c1-wash), 0 0 12px var(--c1-wash);
+  pointer-events: none;
+  animation: proposed-pulse 1.1s ease-in-out infinite alternate;
+}
+@keyframes proposed-pulse {
+  from { opacity: .5; }
+  to { opacity: 1; }
+}
+body[data-anim="off"] .proposed::after { animation: none; opacity: 1; }
+/* ============================================================== score pops ==
+ * Every point, announced where it is earned: "+3" floats off a wall tile as it
+ * lands, "−2" off a floor line as it bills you. Their layer sits above the
+ * flights and is separate from them — a number is not a tile. */
+.pop-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
+.score-pop {
+  position: fixed;
+  transform: translate(-50%, -70%);
+  font-family: var(--font-display);
+  font-size: 21px;
+  color: var(--gain);
+  text-shadow:
+    0 1px 0 var(--plaster-hi),
+    0 0 6px var(--plaster-hi);
+  opacity: 0;
+  animation: score-rise 1.1s cubic-bezier(.2, .5, .3, 1) both;
+}
+.score-pop[data-kind="loss"] { color: var(--loss); }
+@keyframes score-rise {
+  0% { opacity: 0; transform: translate(-50%, -40%) scale(.7); }
+  18% { opacity: 1; transform: translate(-50%, -80%) scale(1.12); }
+  70% { opacity: 1; }
+  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
+}
+/* =============================================================== flights == */
+.fly-layer { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
+/* Straight line, constant speed: a tile is being moved by a hand, not thrown.
+ * The duration is written onto each clone by animate.js from the speed setting,
+ * so nothing here — and nothing in the OS — can shorten it behind your back. */
+.fly-tile {
+  position: fixed;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(.36, .62, .38, 1);
+  will-change: transform;
+  box-shadow: 0 0 0 1px var(--rim), 0 1px 0 rgba(255, 255, 255, .45) inset, var(--shadow-tile-raised);
+}
+/* a clone that has arrived: the in-flight lift drops and it sits like a tile */
+.fly-tile.landed {
+  box-shadow:
+    0 0 0 1px var(--rim),
+    0 1px 0 rgba(255, 255, 255, .45) inset,
+    0 -2px 4px rgba(0, 0, 0, .28) inset,
+    var(--shadow-tile);
+}
+.fly-tile.marker { display: grid; place-items: center; }
+/* a completed line's tile arriving on the wall */
+@keyframes glaze-land {
+  0% { transform: scale(1.3); opacity: 0; }
+  60% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+.tile.placed.landing { animation: glaze-land var(--land-ms, .42s) ease-out both; }
+/* The only motion switch on this page is the one in the settings panel. An OS
+ * "reduce motion" flag is deliberately NOT honoured here: it used to silence
+ * every tile flight, which made the game look like it was teleporting tiles and
+ * left no way to turn the animation back on. */
+body[data-anim="off"] .fly-tile,
+body[data-anim="off"] .tile.placed.landing {
+  animation-duration: .001ms !important;
+  transition-duration: .001ms !important;
+}

ui/board.js ADDED Viewed

	@@ -0,0 +1,340 @@

+/* The Azul furniture: one player board, and the middle of the table.
+ *
+ * `createBoard(host, {...})` owns one container element and redraws it from a
+ * view object; `createMiddle(host, {...})` does the same for the factories and
+ * the centre dish. Both boards are built by the same function with the same
+ * markup, so the human's and the AI's are identical down to the pixel — only
+ * `interactive` differs.
+ *
+ * The modules never fetch anything and never name an endpoint: a caller hands
+ * them state and callbacks, and they hand back the elements an animation needs
+ * to aim at.
+ *
+ *   const you = createBoard(el, { seat: 0, interactive: true, onPlay: play });
+ *   you.render({ state, legalActions, selection, toMove: true, title: "You" });
+ *   you.lineSlots(2);  // where tiles going to row 3 should land
+ */
+import {
+  CENTER,
+  COLORS,
+  FLOOR,
+  FLOOR_PENALTIES,
+  destsFor,
+  markerChip,
+  node,
+  poolCount,
+  preview,
+  tileEl,
+  actionId,
+} from "./dom.js";
+const EMPTY_VIEW = { state: null, legalActions: [], selection: null };
+/* --------------------------------------------------------------- player board */
+export function createBoard(host, options = {}) {
+  const opts = Object.assign(
+    { seat: 0, interactive: false, onPlay: null, onBlocked: null },
+    options
+  );
+  host.innerHTML = ""; // re-seating a board rebuilds it in place
+  host.classList.add("board");
+  host.dataset.seat = opts.seat;
+  const head = node("div", "board-head");
+  const who = node("span", "board-who", opts.title || "");
+  const score = node("span", "board-score", "0");
+  const notes = node("span", "board-notes", "");
+  head.append(who, score, notes);
+  const grid = node("div", "board-grid");
+  const floorWrap = node("div", "floor-wrap");
+  host.append(head, grid, floorWrap);
+  let view = EMPTY_VIEW;
+  function draw() {
+    const state = view.state;
+    grid.innerHTML = "";
+    floorWrap.innerHTML = "";
+    if (!state) return;
+    const seat = opts.seat;
+    const me = state.players[seat];
+    const legal = new Set(view.legalActions || []);
+    const sel = opts.interactive ? view.selection : null;
+    const open = sel ? destsFor(legal, sel.source, sel.color) : [];
+    who.textContent = view.title || who.textContent;
+    score.textContent = me.score;
+    const bits = [];
+    if (me.floor_penalty) bits.push(me.floor_penalty + " on the floor");
+    if (me.completed_rows) {
+      bits.push(me.completed_rows + " full row" + (me.completed_rows > 1 ? "s" : ""));
+    }
+    if (me.floor_marker) bits.push("holds the marker");
+    notes.textContent = bits.join(" · ");
+    host.classList.toggle("to-move", !!view.toMove);
+    host.classList.toggle("mine", !!opts.interactive);
+    for (let r = 0; r < 5; r++) {
+      const line = me.pattern_lines[r];
+      const isOpen = open.indexOf(r) !== -1;
+      const row = node(sel ? "button" : "div", "line");
+      if (row.tagName === "BUTTON") row.type = "button";
+      row.dataset.row = r;
+      const note = node("span", "row-note");
+      if (sel) {
+        if (isOpen) {
+          const p = preview(state, seat, sel.source, sel.color, r);
+          let text = p.placed + " of " + p.count + " here";
+          if (p.overflow) text += ", " + p.overflow + " spills (" + p.penalty + ")";
+          else if (p.completes) text += ", fills the row";
+          note.textContent = text;
+          row.classList.add("open");
+          row.addEventListener("click", () => {
+            if (opts.onPlay) opts.onPlay(actionId(sel.source, sel.color, r), r);
+          });
+        } else {
+          row.classList.add("blocked");
+          row.title = blockedReason(state, seat, sel.color, r);
+          note.textContent = row.title;
+          row.setAttribute("aria-disabled", "true");
+        }
+      } else {
+        note.textContent = line.count
+          ? line.count + "/" + line.capacity + " " + COLORS[line.color]
+          : line.capacity + (line.capacity === 1 ? " slot" : " slots");
+      }
+      row.appendChild(note);
+      // a pattern line fills towards the wall, so the empty slots sit on the left
+      for (let k = 0; k < line.capacity - line.count; k++) {
+        row.appendChild(node("div", "slot"));
+      }
+      for (let k = 0; k < line.count; k++) row.appendChild(tileEl(line.color));
+      if (view.highlightRow === r) row.classList.add("incoming");
+      grid.appendChild(row);
+      const wallRow = node("div", "wall-row");
+      wallRow.dataset.wallRow = r;
+      if (r === 0) wallRow.classList.add("top");
+      if (r === 4) wallRow.classList.add("bottom");
+      for (let col = 0; col < 5; col++) {
+        const colour = (col - r + 5) % 5;
+        if (me.wall[r][col]) {
+          const t = tileEl(colour, "placed");
+          t.dataset.row = r;
+          t.dataset.col = col;
+          t.title = COLORS[colour] + ", row " + (r + 1) + ", column " + (col + 1);
+          wallRow.appendChild(t);
+        } else {
+          // an empty square is a neutral well with the glaze only outlined in it
+          const cell = node("div", "cell empty");
+          cell.dataset.color = colour;
+          cell.dataset.row = r;
+          cell.dataset.col = col;
+          cell.title = COLORS[colour] + " goes here";
+          wallRow.appendChild(cell);
+        }
+      }
+      grid.appendChild(wallRow);
+    }
+    const floorOpen = sel && open.indexOf(FLOOR) !== -1;
+    const floor = node(floorOpen ? "button" : "div", "floor");
+    floor.dataset.row = FLOOR;
+    if (floorOpen) {
+      floor.type = "button";
+      floor.classList.add("open");
+      const p = preview(state, seat, sel.source, sel.color, FLOOR);
+      floor.title = "Drop all " + p.count + " tiles here (" + p.penalty + " this round)";
+      floor.addEventListener("click", () => {
+        if (opts.onPlay) opts.onPlay(actionId(sel.source, sel.color, FLOOR), FLOOR);
+      });
+    }
+    const occupants = [];
+    if (me.floor_marker) occupants.push("marker");
+    me.floor.forEach((n, c) => {
+      for (let k = 0; k < n; k++) occupants.push(c);
+    });
+    for (let i = 0; i < 7; i++) {
+      const cellwrap = node("div", "cellwrap");
+      const here = occupants[i];
+      if (here === "marker") cellwrap.appendChild(markerChip(true));
+      else if (here !== undefined) cellwrap.appendChild(tileEl(here));
+      else cellwrap.appendChild(node("div", "slot"));
+      cellwrap.appendChild(node("span", "pen", FLOOR_PENALTIES[i]));
+      floor.appendChild(cellwrap);
+    }
+    floorWrap.appendChild(floor);
+    const penalty = me.floor_penalty;
+    const floorNote = node(
+      "span",
+      "floor-note" + (penalty ? " warn" : ""),
+      penalty ? "Floor line: " + penalty + " at the end of this round" : "Floor line: clean"
+    );
+    if (floorOpen) {
+      const p = preview(state, seat, sel.source, sel.color, FLOOR);
+      floorNote.textContent =
+        "Floor line: " + penalty + " now, " + (penalty + p.penalty) + " if you drop here";
+      floorNote.classList.add("warn");
+    }
+    floorWrap.appendChild(floorNote);
+  }
+  return {
+    el: host,
+    seat: opts.seat,
+    render(next) {
+      view = Object.assign({}, EMPTY_VIEW, next);
+      draw();
+    },
+    setTitle(text) {
+      who.textContent = text;
+    },
+    lineRow: (r) => grid.querySelector('.line[data-row="' + r + '"]'),
+    lineSlots: (r) => {
+      const row = grid.querySelector('.line[data-row="' + r + '"]');
+      return row ? [].slice.call(row.querySelectorAll(".slot")) : [];
+    },
+    lineTiles: (r) => {
+      const row = grid.querySelector('.line[data-row="' + r + '"]');
+      return row ? [].slice.call(row.querySelectorAll(".tile")) : [];
+    },
+    floorEl: () => floorWrap.querySelector(".floor"),
+    floorSlots: () => [].slice.call(floorWrap.querySelectorAll(".floor .slot")),
+    floorTiles: () => [].slice.call(floorWrap.querySelectorAll(".floor .tile")),
+    wallCell: (r, c) =>
+      grid.querySelector('.wall-row[data-wall-row="' + r + '"] [data-col="' + c + '"]'),
+    wallTile: (r, c) =>
+      grid.querySelector('.tile.placed[data-row="' + r + '"][data-col="' + c + '"]'),
+  };
+}
+/** Why a row is closed for the colour in hand — the hover text on a dark row. */
+export function blockedReason(state, seat, color, dest) {
+  const me = state.players[seat];
+  const line = me.pattern_lines[dest];
+  if (line.count >= line.capacity) return "This row is already full.";
+  if (line.count > 0 && line.color !== color) {
+    return "This row holds " + COLORS[line.color] + " tiles.";
+  }
+  if (me.wall[dest][(color + dest) % 5]) {
+    return COLORS[color] + " is already on your wall in this row.";
+  }
+  return "Not playable right now.";
+}
+/* ------------------------------------------------------- middle of the table */
+export function createMiddle(host, options = {}) {
+  const opts = Object.assign({ onPick: null }, options);
+  host.innerHTML = "";
+  host.classList.add("middle-table");
+  const dishes = node("div", "factories");
+  const centre = node("div", "center-dish");
+  centre.dataset.source = CENTER;
+  host.append(dishes, centre);
+  function tileButton(state, legal, canPick, source, color) {
+    const b = node("button", "tile");
+    b.type = "button";
+    b.dataset.color = color;
+    b.dataset.source = source;
+    b.dataset.key = source + ":" + color;
+    const dests = canPick ? destsFor(legal, source, color) : [];
+    if (!dests.length) {
+      b.disabled = true;
+      if (canPick) b.title = "Nothing you can do with these yet.";
+    } else {
+      b.title =
+        poolCount(state, source, color) + " " + COLORS[color] + ", click to pick them up";
+      b.addEventListener("click", () => {
+        if (opts.onPick) opts.onPick(source, color);
+      });
+    }
+    return b;
+  }
+  return {
+    el: host,
+    render(view) {
+      const state = view.state;
+      dishes.innerHTML = "";
+      centre.innerHTML = "";
+      if (!state) return;
+      const legal = new Set(view.legalActions || []);
+      const canPick = !!view.canPick;
+      const sel = view.selection;
+      state.factories.forEach((counts, i) => {
+        const dish = node("div", "factory");
+        dish.dataset.source = i;
+        const total = counts.reduce((a, b) => a + b, 0);
+        if (!total) {
+          dish.classList.add("empty");
+          dish.appendChild(node("span", "empty-note", "empty"));
+        } else {
+          counts.forEach((n, c) => {
+            for (let k = 0; k < n; k++) {
+              dish.appendChild(tileButton(state, legal, canPick, i, c));
+            }
+          });
+        }
+        const id = node("span", "fac-id", String(i + 1));
+        id.title = "Factory " + (i + 1);
+        dish.appendChild(id);
+        dishes.appendChild(dish);
+      });
+      const centreTotal = state.center.reduce((a, b) => a + b, 0);
+      if (state.marker_in_center) centre.appendChild(markerChip(false));
+      if (!centreTotal) {
+        centre.appendChild(
+          node(
+            "span",
+            "empty-note",
+            state.marker_in_center ? "middle (marker only)" : "middle (empty)"
+          )
+        );
+      } else {
+        state.center.forEach((n, c) => {
+          if (!n) return;
+          const group = node("div", "group");
+          for (let k = 0; k < n; k++) {
+            group.appendChild(tileButton(state, legal, canPick, CENTER, c));
+          }
+          centre.appendChild(group);
+        });
+      }
+      if (sel) {
+        host.querySelectorAll("button.tile").forEach((b) => {
+          if (b.dataset.key === sel.source + ":" + sel.color) b.classList.add("taken");
+          else b.classList.add("dimmed");
+        });
+      }
+    },
+    sourceEl: (source) =>
+      source === CENTER ? centre : dishes.querySelector('.factory[data-source="' + source + '"]'),
+    centerEl: () => centre,
+    /** The drawn tiles of one colour in one dish — what a move takes away. */
+    sourceTiles(source, color, count) {
+      const dish = this.sourceEl(source);
+      if (!dish) return [];
+      const all = dish.querySelectorAll('.tile[data-color="' + color + '"]');
+      return [].slice.call(all, 0, count === undefined ? all.length : count);
+    },
+    /** Everything else in that dish — the tiles that get pushed to the middle. */
+    remainderTiles(source, color) {
+      if (source === CENTER) return [];
+      const dish = this.sourceEl(source);
+      if (!dish) return [];
+      return [].slice
+        .call(dish.querySelectorAll(".tile"))
+        .filter((t) => Number(t.dataset.color) !== color);
+    },
+  };
+}

ui/confirm.js ADDED Viewed

	@@ -0,0 +1,52 @@

+/* Confirm mode: a move is placed first, played only on your word.
+ *
+ * Clicking a row *places* the tiles — you see the board exactly as it would
+ * stand — and nothing is committed until you press "Play this move"; "Take it
+ * back" returns the tiles to your hand. The pace every board-game site has
+ * taught people, and the difference between exploring a position and being
+ * bound by a misclick — so it is ON by default, with a switch in the settings
+ * panel for players who would rather commit on the first click.
+ *
+ * This module is only the remembered choice; the placement itself lives in the
+ * page that owns the game (see the player's app.js).
+ */
+const STORE_KEY = "ludometer.confirm";
+let current = true;
+const listeners = [];
+function readStored() {
+  try {
+    const raw = window.localStorage.getItem(STORE_KEY);
+    return raw === null ? true : raw !== "off";
+  } catch (err) {
+    return true; // private mode: the careful default stands
+  }
+}
+/** Whether moves wait for confirmation. */
+export const confirmOn = () => current;
+/** Choose. Persists, and tells every listener. */
+export function setConfirm(on) {
+  current = !!on;
+  try {
+    window.localStorage.setItem(STORE_KEY, current ? "on" : "off");
+  } catch (err) {
+    /* forgetting the choice is no reason to refuse it */
+  }
+  listeners.forEach((fn) => fn(current));
+  return current;
+}
+export function onConfirmChange(fn) {
+  listeners.push(fn);
+  return () => listeners.splice(listeners.indexOf(fn), 1);
+}
+/** Load the stored choice. Call once, early. */
+export function initConfirm() {
+  current = readStored();
+  return current;
+}

ui/dom.js ADDED Viewed

	@@ -0,0 +1,93 @@

+/* Shared primitives for the Azul board modules.
+ *
+ * Framework-free, no network, no globals beyond the DOM. Everything here is
+ * pure presentation of the engine's own state JSON (`AzulState.to_json()`,
+ * which the browser port produces too), so these modules drop into any page
+ * that can hand them a state object.
+ */
+export const COLORS = ["blue", "yellow", "red", "black", "teal"];
+export const CENTER = 5;
+export const FLOOR = 5;
+export const FLOOR_PENALTIES = [-1, -1, -2, -2, -2, -3, -3];
+export const CUM_PENALTY = [0, -1, -2, -4, -6, -8, -11, -14];
+/** `document.createElement` with a class and text in one call. */
+export function node(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== undefined && text !== null) n.textContent = text;
+  return n;
+}
+/** A glazed tile of `color` (0..4). */
+export function tileEl(color, cls) {
+  const t = node("div", "tile" + (cls ? " " + cls : ""));
+  t.dataset.color = color;
+  return t;
+}
+/** The first-player marker: an unglazed chip, not a tile. */
+export function markerChip(tiny) {
+  const m = node("div", "marker" + (tiny ? " tiny" : ""), "1");
+  m.title =
+    "First-player marker: whoever takes it starts the next round and loses a floor slot.";
+  return m;
+}
+/** The engine's action encoding — the one rule this layer is allowed to know. */
+export function actionId(source, color, dest) {
+  return source * 30 + color * 6 + dest;
+}
+export function decodeAction(id) {
+  return { source: Math.floor(id / 30), color: Math.floor((id % 30) / 6), dest: id % 6 };
+}
+export function sourceLabel(source) {
+  return source === CENTER ? "the middle" : "factory " + (source + 1);
+}
+export function destLabel(dest) {
+  return dest === FLOOR ? "the floor line" : "row " + (dest + 1);
+}
+/** How many tiles of `color` are in `source` right now. */
+export function poolCount(state, source, color) {
+  return source === CENTER ? state.center[color] : state.factories[source][color];
+}
+/** Destinations that are legal for a held colour, from a legal-action set. */
+export function destsFor(legal, source, color) {
+  const out = [];
+  for (let d = 0; d <= FLOOR; d++) {
+    if (legal.has(actionId(source, color, d))) out.push(d);
+  }
+  return out;
+}
+/** What playing `source`/`color` into `dest` would cost this player. */
+export function preview(state, seat, source, color, dest) {
+  const me = state.players[seat];
+  const count = poolCount(state, source, color);
+  const takesMarker = source === CENTER && state.marker_in_center;
+  let overflow = count;
+  let placed = 0;
+  if (dest !== FLOOR) {
+    const line = me.pattern_lines[dest];
+    placed = Math.min(count, line.capacity - line.count);
+    overflow = count - placed;
+  }
+  const occupied = me.floor.reduce((a, b) => a + b, 0) + (me.floor_marker ? 1 : 0);
+  const before = CUM_PENALTY[Math.min(7, occupied)];
+  const after = CUM_PENALTY[Math.min(7, occupied + overflow + (takesMarker ? 1 : 0))];
+  const line = dest !== FLOOR ? me.pattern_lines[dest] : null;
+  return {
+    count,
+    placed,
+    overflow,
+    takesMarker,
+    penalty: after - before,
+    completes: line ? placed + line.count === line.capacity : false,
+  };
+}

ui/history.js ADDED Viewed

	@@ -0,0 +1,176 @@

+/* Move navigation — the game as a list of positions you can walk back through.
+ *
+ * Chess clients have taught everyone the same two keys, so this is those two
+ * keys: ← steps back a move, → steps forward, and stepping past the last move
+ * puts you back in the live game. It is pure replay of positions the page has
+ * *already* been given — there is no request, no re-search and no engine call
+ * behind these buttons, and the live game is not touched while you browse.
+ *
+ * Frames are stored by ply, so `frames[k]` is the position after k moves:
+ * `frames[0]` is the deal. Every move the back end reports carries the position
+ * it was played from, which is exactly the position after the move before it,
+ * so the array fills itself in as the game goes on.
+ *
+ *   const nav = createHistory(el, { log: () => S.log, onChange: render });
+ *   nav.reset(state, 0);          // a new deal
+ *   nav.note(ply, state);         // a position we have seen
+ *   const frame = nav.frame();    // null while live; {state, log, ply} while browsing
+ */
+import { node } from "./dom.js";
+export function createHistory(host, options = {}) {
+  const opts = Object.assign({ log: () => [], onChange: null, enabled: null }, options);
+  host.classList.add("nav");
+  host.innerHTML = "";
+  const prev = node("button", "nav-btn", "◀");
+  prev.type = "button";
+  prev.title = "Previous move (←)";
+  prev.setAttribute("aria-label", "Previous move");
+  const count = node("span", "nav-count", "");
+  const next = node("button", "nav-btn", "▶");
+  next.type = "button";
+  next.title = "Next move (→)";
+  next.setAttribute("aria-label", "Next move");
+  // stepping forward one move at a time is no way back from move 3 of 40
+  const live = node("button", "nav-btn nav-live", "Latest");
+  live.type = "button";
+  live.title = "Back to the live game (End)";
+  live.hidden = true;
+  host.append(prev, count, next, live);
+  const frames = [];   // frames[ply] = state JSON
+  let latest = 0;      // the live game's ply
+  let viewing = null;  // the ply being looked at, or null when live
+  const has = (ply) => ply >= 0 && ply <= latest && !!frames[ply];
+  /** The nearest recorded ply at or beyond `from` in direction `step`. */
+  function seek(from, step) {
+    for (let p = from; p >= 0 && p <= latest; p += step) {
+      if (has(p)) return p;
+    }
+    return null;
+  }
+  /** The log as it stood after `ply` moves — entries carry the ply they belong to. */
+  function logAt(ply) {
+    return (opts.log() || []).filter((e) => e.ply === undefined || e.ply <= ply);
+  }
+  /* `change` is {from, to}: the ply that was showing and the ply that now is
+   * (the live ply when not browsing). Pages that animate the step read it;
+   * pages that just redraw ignore the argument, as they always have. */
+  function announce(change) {
+    draw();
+    if (opts.onChange) opts.onChange(change);
+  }
+  const usable = () => !opts.enabled || opts.enabled();
+  function draw() {
+    const browsing = viewing !== null;
+    const on = usable();
+    prev.disabled = !on || seek(browsing ? viewing - 1 : latest - 1, -1) === null;
+    next.disabled = !on || !browsing;
+    live.hidden = !browsing;
+    live.disabled = !on;
+    count.textContent = browsing ? viewing + " / " + latest : latest ? "move " + latest : "";
+    host.classList.toggle("browsing", browsing);
+    document.body.classList.toggle("viewing", browsing);
+  }
+  /** Step by `delta` moves. Stepping past the last move resumes the live game. */
+  function step(delta) {
+    if (!usable()) return false;
+    const from = viewing === null ? latest : viewing;
+    const target = from + delta;
+    if (target >= latest) {
+      if (viewing === null) return false;
+      viewing = null;
+      announce({ from, to: latest });
+      return true;
+    }
+    const found = seek(target, delta < 0 ? -1 : 1);
+    if (found === null || found === viewing) return false;
+    viewing = found;
+    announce({ from, to: found });
+    return true;
+  }
+  /** Jump back to the live game. */
+  function toLatest() {
+    if (viewing === null || !usable()) return false;
+    const from = viewing;
+    viewing = null;
+    announce({ from, to: latest });
+    return true;
+  }
+  prev.addEventListener("click", () => step(-1));
+  next.addEventListener("click", () => step(1));
+  live.addEventListener("click", toLatest);
+  draw();
+  return {
+    el: host,
+    /** Start a new game: `state` is the position after `ply` moves. */
+    reset(state, ply = 0) {
+      frames.length = 0;
+      latest = ply;
+      viewing = null;
+      if (state) frames[ply] = state;
+      draw();
+    },
+    /** Record the position after `ply` moves. Fills holes; extends the game's end. */
+    note(ply, state) {
+      if (!state || typeof ply !== "number" || ply < 0) return;
+      frames[ply] = state;
+      if (ply > latest) latest = ply;
+      draw();
+    },
+    /** The frame to draw, or null when the live game is what should be drawn. */
+    frame() {
+      if (viewing === null) return null;
+      return { ply: viewing, state: frames[viewing], log: logAt(viewing), of: latest };
+    },
+    browsing: () => viewing !== null,
+    latest: () => latest,
+    /** The recorded position after `ply` moves, or null. */
+    stateAt: (ply) => (has(ply) ? frames[ply] : null),
+    step,
+    toLatest,
+    draw,
+    prevButton: prev,
+    nextButton: next,
+    liveButton: live,
+  };
+}
+/**
+ * ← / → anywhere on the page, except while typing in a field.
+ *
+ * Returns the listener so a host page could remove it; every page we ship keeps
+ * it for the life of the document.
+ */
+export function bindHistoryKeys(nav, options = {}) {
+  const listener = (event) => {
+    const back = event.key === "ArrowLeft";
+    const forward = event.key === "ArrowRight";
+    const home = event.key === "End";
+    if (!back && !forward && !home) return;
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+    const target = event.target;
+    if (target && /^(INPUT|SELECT|TEXTAREA)$/.test(target.tagName)) return;
+    if (options.enabled && !options.enabled()) return;
+    const moved = home ? nav.toLatest() : nav.step(back ? -1 : 1);
+    if (moved) event.preventDefault();
+  };
+  document.addEventListener("keydown", listener);
+  return listener;
+}

ui/layout.js ADDED Viewed

	@@ -0,0 +1,58 @@

+/* Board layout: how much room the two boards take.
+ *
+ * "side" keeps the whole game on one screen: the factories on the left, both
+ * boards — smaller, but both visible at once — beside them. "stack" is the
+ * classic table: big boards below the factories. The default follows the
+ * device — a phone starts on "side" (Rémi's phone spec), a desktop starts on
+ * "stack" (Rémi tried "side" there and reached for the + at once).
+ *
+ * The choice is written onto <body data-boards="…">; the page's stylesheet
+ * does the rest. Persisted like the animation speed, switched from the
+ * settings panel (the − / + row).
+ */
+const STORE_KEY = "ludometer.boards";
+const MODES = ["side", "stack"];
+const defaultMode = () =>
+  window.matchMedia && window.matchMedia("(max-width: 720px)").matches ? "side" : "stack";
+let current = "stack";
+const listeners = [];
+function readStored() {
+  try {
+    const raw = window.localStorage.getItem(STORE_KEY);
+    return MODES.includes(raw) ? raw : defaultMode();
+  } catch (err) {
+    return defaultMode(); // private mode: still the right default for the device
+  }
+}
+/** The current mode: "side" or "stack". */
+export const boardsMode = () => current;
+/** Choose. Persists, writes the body attribute, tells every listener. */
+export function setBoardsMode(mode) {
+  current = MODES.includes(mode) ? mode : "side";
+  try {
+    window.localStorage.setItem(STORE_KEY, current);
+  } catch (err) {
+    /* forgetting the choice is no reason to refuse it */
+  }
+  document.body.dataset.boards = current;
+  listeners.forEach((fn) => fn(current));
+  return current;
+}
+export function onBoardsChange(fn) {
+  listeners.push(fn);
+  return () => listeners.splice(listeners.indexOf(fn), 1);
+}
+/** Load the stored choice and stamp it on the body. Call once, early. */
+export function initBoards() {
+  current = readStored();
+  document.body.dataset.boards = current;
+  return current;
+}

ui/log.js ADDED Viewed

	@@ -0,0 +1,143 @@

+/* The move log: every move of the game, in one flat list.
+ *
+ * Newest at the **top**. You look at a log to check what just happened far more
+ * often than to read the game from the beginning, and putting the newest line
+ * where your eye already is saves a scroll on every single turn.
+ *
+ * Deliberately uniform — same type, same weight, same rule for every line,
+ * including the newest one. A log entry is a record, not a headline; the status
+ * band is where "what is happening now" lives, and highlighting the top line
+ * would make this list compete with it.
+ *
+ * Moves are drawn **pictographically**: the tiles that moved are little tiles,
+ * in the same glazes they have on the board, so "took 3 ochre" is three ochre
+ * squares rather than a colour word you have to translate back into a colour.
+ * Only the places stay as words, because "factory 3" has no picture.
+ *
+ * An entry is `{n, kind, text, ply?, side?, coach?}`, and a move entry also
+ * carries `{count, color, source, dest, took_marker?, overflow?}` — with those
+ * missing, the entry falls back to its sentence, so any port that has not
+ * caught up still reads correctly.
+ */
+import { CENTER, COLORS, FLOOR, node } from "./dom.js";
+const TAGS = { move: "", round: "round", end: "final", think: "search", start: "setup" };
+/** Short enough to sit next to the tiles: "factory 3", "middle", "row 5". */
+const shortSource = (source) => (source === CENTER ? "middle" : "factory " + (source + 1));
+const shortDest = (dest) => (dest === FLOOR ? "floor" : "row " + (dest + 1));
+/** One tile, at log size. */
+export function glyph(color) {
+  const g = node("i", "glyph");
+  g.dataset.color = color;
+  g.title = COLORS[color];
+  return g;
+}
+/** `count` tiles of `color`, as a row of little tiles. */
+export function glyphRun(color, count, cls) {
+  const wrap = node("span", "glyphs" + (cls ? " " + cls : ""));
+  for (let i = 0; i < count; i++) wrap.appendChild(glyph(color));
+  return wrap;
+}
+/** How the delta reads: at the AI's choice, a slip, or a real mistake. */
+export function grade(delta) {
+  if (delta === null || delta === undefined) return "unrated";
+  if (delta >= -0.005) return "best";
+  if (delta >= -0.05) return "slip";
+  return "blunder";
+}
+export function formatDelta(delta) {
+  if (delta === null || delta === undefined) return "unrated";
+  const rounded = Math.abs(delta) < 0.005 ? 0 : delta;
+  return (rounded === 0 ? "0.00" : rounded.toFixed(2)).replace("-", "−");
+}
+/** The coach's verdict on one move, as a small inline chip. */
+export function coachChip(coach) {
+  const chip = node("span", "coach-chip");
+  if (!coach) return chip;
+  if (coach.pending) {
+    chip.dataset.grade = "pending";
+    chip.appendChild(node("span", "coach-delta", "rating…"));
+    return chip;
+  }
+  if (coach.unrated) {
+    chip.dataset.grade = "unrated";
+    chip.appendChild(node("span", "coach-delta", "unrated"));
+    chip.appendChild(
+      node("span", "coach-why", coach.reason || "the search never explored this move")
+    );
+    return chip;
+  }
+  chip.dataset.grade = grade(coach.delta);
+  chip.appendChild(node("span", "coach-delta", formatDelta(coach.delta)));
+  if (coach.best_text && coach.delta <= -0.02) {
+    chip.appendChild(node("span", "coach-why", "AI preferred: " + coach.best_text));
+  } else if (coach.forced) {
+    chip.appendChild(node("span", "coach-why", "only move"));
+  }
+  return chip;
+}
+/** Whether an entry carries enough to be drawn as pictures. */
+function isPictorial(entry) {
+  return (
+    entry.kind === "move" &&
+    typeof entry.color === "number" &&
+    typeof entry.count === "number" &&
+    typeof entry.source === "number" &&
+    typeof entry.dest === "number"
+  );
+}
+/** The body of one move entry: tiles, then where from and where to. */
+function moveBody(entry) {
+  const body = node("span", "log-text");
+  body.appendChild(glyphRun(entry.color, entry.count));
+  if (entry.took_marker) {
+    const wrap = node("span", "glyphs");
+    const chip = node("i", "glyph marker-glyph", "1");
+    chip.title = "and the first-player marker";
+    wrap.appendChild(chip);
+    body.appendChild(wrap);
+  }
+  body.appendChild(node("span", "log-where", shortSource(entry.source)));
+  body.appendChild(node("span", "log-arrow", "→"));
+  body.appendChild(node("span", "log-where", shortDest(entry.dest)));
+  if (entry.overflow) {
+    body.appendChild(
+      node("span", "log-aside", " · " + entry.overflow + " to the floor")
+    );
+  }
+  body.title = entry.text || "";
+  return body;
+}
+/**
+ * Draw the whole log into `host` (an `<ol>`), **newest first**.
+ *
+ * `entries` stays in play order — the reversing happens here, so callers never
+ * have to think about it and the ply numbers keep meaning what they say.
+ */
+export function renderLog(host, entries) {
+  host.innerHTML = "";
+  const list = (entries || []).slice().reverse();
+  list.forEach((entry) => {
+    const li = node("li", "log-entry");
+    li.dataset.kind = entry.kind;
+    if (entry.side) li.dataset.side = entry.side;
+    if (entry.ply !== undefined) li.dataset.ply = entry.ply;
+    const tag = entry.kind === "move" ? entry.side || "" : TAGS[entry.kind] || entry.kind;
+    li.appendChild(node("span", "log-tag", tag === "human" ? "you" : tag));
+    const body = isPictorial(entry) ? moveBody(entry) : node("span", "log-text", entry.text);
+    if (entry.coach) body.appendChild(coachChip(entry.coach));
+    li.appendChild(body);
+    host.appendChild(li);
+  });
+  host.scrollTop = 0; // the newest line is at the top, so that is where we look
+}

ui/popups.js ADDED Viewed

	@@ -0,0 +1,78 @@

+/* Score pop-ups: every point announced where it is earned.
+ *
+ * A pop is a small number that floats off the square that produced it — "+3"
+ * off a wall tile as it lands, "−2" off a floor line as it bills you. They
+ * exist to teach: watching the numbers appear one by one is how a new player
+ * learns what a position is worth, so they are ON by default and switchable in
+ * the settings panel (persisted, like the animation speed).
+ *
+ * Pops live in their own fixed layer, deliberately not the flight layer — a
+ * number is not a tile, and the tests that count tile flights must not count
+ * these.
+ *
+ *   popScore(layer, cellEl, "+3");            // a gain, in the gain colour
+ *   popScore(layer, floorEl, "−2", "loss");   // a cost, in the loss colour
+ */
+const STORE_KEY = "ludometer.pops";
+let current = true;
+const listeners = [];
+function readStored() {
+  try {
+    const raw = window.localStorage.getItem(STORE_KEY);
+    return raw === null ? true : raw !== "off";
+  } catch (err) {
+    return true; // private mode: teach anyway
+  }
+}
+/** Whether score pop-ups are on. */
+export const popupsOn = () => current;
+/** Choose. Persists, and tells every listener. */
+export function setPopups(on) {
+  current = !!on;
+  try {
+    window.localStorage.setItem(STORE_KEY, current ? "on" : "off");
+  } catch (err) {
+    /* forgetting the choice is no reason to refuse it */
+  }
+  listeners.forEach((fn) => fn(current));
+  return current;
+}
+export function onPopupsChange(fn) {
+  listeners.push(fn);
+  return () => listeners.splice(listeners.indexOf(fn), 1);
+}
+/** Load the stored choice. Call once, early. */
+export function initPopups() {
+  current = readStored();
+  return current;
+}
+/**
+ * Float `text` off `target` (an element or a client rectangle) into `layer`.
+ *
+ * `kind` is "gain" (default) or "loss" and only picks the colour. The pop
+ * removes itself; nothing waits on it. A no-op while pop-ups are off, or when
+ * the target has no on-screen rectangle.
+ */
+export function popScore(layer, target, text, kind) {
+  if (!current || !layer || !target) return;
+  const r = typeof target.getBoundingClientRect === "function"
+    ? target.getBoundingClientRect()
+    : target;
+  if (!r || (!r.width && !r.height)) return;
+  const pop = document.createElement("span");
+  pop.className = "score-pop";
+  pop.dataset.kind = kind || "gain";
+  pop.textContent = text;
+  pop.style.left = r.left + r.width / 2 + "px";
+  pop.style.top = r.top + "px";
+  layer.appendChild(pop);
+  setTimeout(() => pop.remove(), 1400);
+}

ui/scoring.js ADDED Viewed

	@@ -0,0 +1,193 @@

+/* Scoring, shown on the table instead of over it.
+ *
+ * Two panels, both inline: the round tally (what each wall tile earned, what the
+ * floor cost) and the final reckoning (the end-game bonuses, broken down). They
+ * sit in a two-column grid under the boards, left column = left board, so each
+ * player's numbers stay under their own wall and the position behind them is
+ * still fully readable.
+ *
+ * Both take the server's own report objects — no number here is re-derived.
+ */
+import { COLORS, node, tileEl } from "./dom.js";
+function miniTile(color) {
+  const t = tileEl(color, "mini");
+  return t;
+}
+function playerCard(label, kids) {
+  const card = node("div", "score-card");
+  card.appendChild(node("h3", "score-card-who", label));
+  kids.forEach((k) => card.appendChild(k));
+  return card;
+}
+function line(text) {
+  return node("p", "score-line", text);
+}
+/** One player's round: the tiles that reached the wall, and the floor's bill. */
+function roundCard(report, seat, label) {
+  const p = report.players[seat];
+  const kids = [];
+  const delta = node(
+    "p",
+    "score-delta" + (p.delta < 0 ? " down" : p.delta > 0 ? " up" : ""),
+    (p.delta >= 0 ? "+" + p.delta : String(p.delta)) + " → " + p.score_after
+  );
+  kids.push(delta);
+  if (p.tiles.length) {
+    const placed = node("div", "score-tiles");
+    p.tiles.forEach((t) => {
+      const box = node("div", "score-tile");
+      box.appendChild(miniTile(t.color));
+      box.appendChild(node("span", "pts", "+" + t.points));
+      box.appendChild(node("span", "where", "r" + (t.row + 1) + "·c" + (t.col + 1)));
+      box.title =
+        t.color_name +
+        " → row " +
+        (t.row + 1) +
+        ", column " +
+        (t.col + 1) +
+        " (run of " +
+        t.h_run +
+        " across, " +
+        t.v_run +
+        " down)";
+      placed.appendChild(box);
+    });
+    kids.push(placed);
+    kids.push(
+      line(
+        "Wall: +" +
+          p.tiling_points +
+          " from " +
+          p.tiles.length +
+          " tile" +
+          (p.tiles.length > 1 ? "s" : "")
+      )
+    );
+  } else {
+    kids.push(line("No pattern line was full. Nothing reached the wall."));
+  }
+  const floorBits = [];
+  if (p.floor.tiles.length) {
+    floorBits.push(p.floor.tiles.length + " tile" + (p.floor.tiles.length > 1 ? "s" : ""));
+  }
+  if (p.floor.marker) floorBits.push("the marker");
+  kids.push(
+    line(
+      floorBits.length
+        ? "Floor: " + floorBits.join(" and ") + " → " + p.floor.penalty
+        : "Floor: clean."
+    )
+  );
+  if (p.carried_rows.length) {
+    kids.push(
+      line(
+        "Carried over: " +
+          p.carried_rows
+            .map((r) => r.count + " " + COLORS[r.color] + " in row " + (r.row + 1))
+            .join(", ")
+      )
+    );
+  }
+  return playerCard(label, kids);
+}
+/**
+ * Draw the round tally into `host`.
+ * `sides` is `[[seat, label], [seat, label]]`, left column first.
+ */
+export function renderRoundPanel(host, report, sides) {
+  host.innerHTML = "";
+  host.classList.add("scoring");
+  host.hidden = false;
+  const head = node("div", "scoring-head");
+  head.appendChild(node("h2", "scoring-title", "Round " + (report.round + 1) + " scored"));
+  if (!report.game_over) {
+    const yours = sides[0][0] === report.next_first_player;
+    const who = yours ? sides[0][1] + " start" : sides[1][1] + " starts";
+    head.appendChild(node("span", "scoring-note", who + " the next round"));
+  }
+  host.appendChild(head);
+  const grid = node("div", "scoring-grid");
+  sides.forEach(([seat, label]) => grid.appendChild(roundCard(report, seat, label)));
+  host.appendChild(grid);
+}
+/** One player's end-game bonuses, itemised. */
+function bonusCard(final, seat, label) {
+  const b = final.bonuses[seat];
+  const kids = [];
+  const total = node("p", "score-delta big", String(b.final_score));
+  if (final.winner === seat) total.classList.add("won");
+  kids.push(total);
+  const rows = [
+    ["On the board", b.score_before_bonus, ""],
+    ["Full rows ×2", "+" + b.row_points, b.rows + " row" + (b.rows === 1 ? "" : "s")],
+    ["Full columns ×7", "+" + b.col_points, b.cols + " column" + (b.cols === 1 ? "" : "s")],
+    [
+      "All five of a colour ×10",
+      "+" + b.color_points,
+      b.colors + " colour" + (b.colors === 1 ? "" : "s"),
+    ],
+    ["Bonus", "+" + b.total, ""],
+  ];
+  const table = node("dl", "bonus-list");
+  rows.forEach(([name, value, note], i) => {
+    const dt = node("dt", null, name);
+    const dd = node("dd", null, String(value));
+    if (i === rows.length - 1) {
+      dt.classList.add("sum");
+      dd.classList.add("sum");
+    }
+    if (note) dd.title = note;
+    table.append(dt, dd);
+  });
+  kids.push(table);
+  return playerCard(label, kids);
+}
+/** Draw the final reckoning into `host` — the board above stays readable. */
+export function renderFinalPanel(host, final, sides) {
+  host.innerHTML = "";
+  host.classList.add("scoring", "final");
+  host.hidden = false;
+  const head = node("div", "scoring-head");
+  head.appendChild(node("h2", "scoring-title", final.headline));
+  head.appendChild(
+    node(
+      "span",
+      "scoring-note",
+      "Final score " +
+        final.scores[sides[0][0]] +
+        "–" +
+        final.scores[sides[1][0]] +
+        " after " +
+        final.rounds_played +
+        " rounds"
+    )
+  );
+  host.appendChild(head);
+  const grid = node("div", "scoring-grid");
+  sides.forEach(([seat, label]) => grid.appendChild(bonusCard(final, seat, label)));
+  host.appendChild(grid);
+  if (final.winner === null) {
+    host.appendChild(line("Level on score and on completed rows. The rulebook calls that a draw."));
+  }
+  if (final.exhausted) {
+    host.appendChild(line("The bag and the lid ran dry, so the game stopped early."));
+  }
+}
+/** Hide whichever panel is showing (a new deal, or the next round starting). */
+export function clearScoring(host) {
+  host.innerHTML = "";
+  host.hidden = true;
+  host.classList.remove("final");
+}

ui/settings.js ADDED Viewed

	@@ -0,0 +1,211 @@

+/* The settings panel: a gear, and what is behind it.
+ *
+ * Inline, never a pop-up — it opens by pushing the table down, the same way
+ * everything else on this page reports itself. Animation speed is always here
+ * (it exists because the alternative was letting the operating system decide —
+ * see animate.js for that story); a page that shows score pop-ups asks for
+ * their switch with `{popups: true}`, a page that places moves before
+ * playing them asks for the confirm switch with `{confirm: true}`, and a
+ * page with the side-by-side table asks for the board-size − / + row with
+ * `{boards: true}` (see layout.js).
+ *
+ *   const settings = createSettings(host);                  // speed only
+ *   const settings = createSettings(host, {popups: true, confirm: true});
+ *
+ * Every control reads its stored value through its own module and writes it
+ * back on every click, so a reload keeps whatever you chose.
+ */
+import { SPEEDS, initSpeed, prefersReducedMotion, setSpeed, speed } from "./animate.js";
+import { confirmOn, initConfirm, setConfirm } from "./confirm.js";
+import { boardsMode, initBoards, setBoardsMode } from "./layout.js";
+import { initPopups, popupsOn, setPopups } from "./popups.js";
+import { node } from "./dom.js";
+const LABELS = { 0: "Off", 0.5: "0.5×", 1: "1×", 2: "2×" };
+const TITLES = {
+  0: "No tile animation: positions change at once",
+  0.5: "Half speed: every tile easy to follow",
+  1: "The default pace",
+  2: "Twice as fast",
+};
+/* A gear, drawn rather than fetched — this page never asks the network for a
+ * byte, not even an icon. Parsed as HTML so the SVG namespace comes for free
+ * and this file need not name a URL of any kind. */
+const GEAR_SVG =
+  '<svg viewBox="0 0 24 24" class="gear-icon" aria-hidden="true"><path d="' +
+  "M12 8.4a3.6 3.6 0 1 0 0 7.2 3.6 3.6 0 0 0 0-7.2zm9 4.9v-2.6l-2.4-.4a6.9 6.9 0 0 0-.8-1.9" +
+  "l1.4-2-1.8-1.8-2 1.4a6.9 6.9 0 0 0-1.9-.8L13.1 3h-2.6l-.4 2.4a6.9 6.9 0 0 0-1.9.8l-2-1.4" +
+  "-1.8 1.8 1.4 2a6.9 6.9 0 0 0-.8 1.9L3 10.7v2.6l2.4.4c.2.7.4 1.3.8 1.9l-1.4 2 1.8 1.8 2-1.4" +
+  "c.6.4 1.2.6 1.9.8l.4 2.4h2.6l.4-2.4c.7-.2 1.3-.4 1.9-.8l2 1.4 1.8-1.8-1.4-2c.4-.6.6-1.2.8-1.9l2.4-.4z" +
+  '"/></svg>';
+function gearIcon() {
+  const holder = document.createElement("span");
+  holder.innerHTML = GEAR_SVG;
+  return holder.firstChild;
+}
+export function createSettings(host, options = {}) {
+  host.classList.add("settings");
+  host.innerHTML = "";
+  const head = node("div", "settings-head");
+  const gear = node("button", "gear");
+  gear.type = "button";
+  gear.setAttribute("aria-expanded", "false");
+  gear.appendChild(gearIcon());
+  gear.appendChild(node("span", null, "Settings"));
+  const summary = node("span", "settings-note", "");
+  head.append(gear, summary);
+  const panel = node("div", "settings-panel");
+  panel.hidden = true;
+  const label = node("span", "settings-label", "Tile animation");
+  const speeds = node("div", "speeds");
+  speeds.setAttribute("role", "group");
+  speeds.setAttribute("aria-label", "Animation speed");
+  const hint = node("p", "settings-hint", "");
+  panel.append(label, speeds, hint);
+  const buttons = SPEEDS.map((value) => {
+    const b = node("button", "speed", LABELS[value]);
+    b.type = "button";
+    b.dataset.speed = String(value);
+    b.title = TITLES[value];
+    b.addEventListener("click", () => {
+      setSpeed(value);
+      sync();
+      if (options.onChange) options.onChange(value);
+    });
+    speeds.appendChild(b);
+    return b;
+  });
+  /** One On/Off pair in the panel, wired to a stored preference. */
+  function flagRow(label, dataKey, titles, get, set) {
+    panel.append(node("i", "settings-gap"), node("span", "settings-label", label));
+    const flags = node("div", "speeds");
+    flags.setAttribute("role", "group");
+    flags.setAttribute("aria-label", label);
+    const pair = [true, false].map((value) => {
+      const b = node("button", "flag", value ? "On" : "Off");
+      b.type = "button";
+      b.dataset[dataKey] = String(value);
+      b.title = titles[value ? 0 : 1];
+      b.addEventListener("click", () => {
+        set(value);
+        sync();
+        if (options.onChange) options.onChange(speed());
+      });
+      flags.appendChild(b);
+      return b;
+    });
+    panel.append(flags);
+    return { pair, get, dataKey };
+  }
+  const flagRows = [];
+  if (options.popups) {
+    initPopups();
+    flagRows.push(
+      flagRow(
+        "Score pop-ups",
+        "pops",
+        [
+          "Every point floats off the square that earned it as the round is scored",
+          "Scoring stays in the panel below the boards",
+        ],
+        popupsOn,
+        setPopups
+      )
+    );
+  }
+  if (options.confirm) {
+    initConfirm();
+    flagRows.push(
+      flagRow(
+        "Confirm each move",
+        "confirm",
+        [
+          "Clicking a row places the tiles; the move plays only when you confirm it",
+          "Clicking a row plays the move at once",
+        ],
+        confirmOn,
+        setConfirm
+      )
+    );
+  }
+  /* Board size is a − / + pair, not On/Off: − keeps the whole game on one
+   * screen (factories left, both boards beside them), + gives the big boards
+   * back, one under the other. The page's stylesheet reads the choice off
+   * <body data-boards>. */
+  let boardButtons = [];
+  if (options.boards) {
+    initBoards();
+    panel.append(node("i", "settings-gap"), node("span", "settings-label", "Board size"));
+    const sizes = node("div", "speeds");
+    sizes.setAttribute("role", "group");
+    sizes.setAttribute("aria-label", "Board size");
+    boardButtons = [
+      ["side", "−", "Everything on one screen: the factories left, both boards beside them"],
+      ["stack", "+", "The classic table: big boards below the factories"],
+    ].map(([mode, label, title]) => {
+      const b = node("button", "flag", label);
+      b.type = "button";
+      b.dataset.boards = mode;
+      b.title = title;
+      b.addEventListener("click", () => {
+        setBoardsMode(mode);
+        sync();
+        if (options.onChange) options.onChange(speed());
+      });
+      sizes.appendChild(b);
+      return b;
+    });
+    panel.append(sizes);
+  }
+  host.append(head, panel);
+  function sync() {
+    const now = speed();
+    buttons.forEach((b) => {
+      b.setAttribute("aria-pressed", String(Number(b.dataset.speed) === now));
+    });
+    flagRows.forEach(({ pair, get, dataKey }) => {
+      pair.forEach((b) => {
+        b.setAttribute("aria-pressed", String((b.dataset[dataKey] === "true") === get()));
+      });
+    });
+    boardButtons.forEach((b) => {
+      b.setAttribute("aria-pressed", String(b.dataset.boards === boardsMode()));
+    });
+    const bits = [now ? "animation " + LABELS[now] : "animation off"];
+    if (options.popups) bits.push(popupsOn() ? "pop-ups on" : "pop-ups off");
+    if (options.confirm) bits.push(confirmOn() ? "confirm on" : "confirm off");
+    if (options.boards) bits.push(boardsMode() === "stack" ? "boards +" : "boards −");
+    summary.textContent = bits.join(" · ");
+    hint.textContent = prefersReducedMotion()
+      ? "Your system asks apps to reduce motion. The tiles still move here, because " +
+        "this switch (not that one) decides. Pick Off if you would rather they did not."
+      : "Tiles always travel to where they land. Slow it down to follow a long turn, " +
+        "or turn it off for instant play.";
+  }
+  gear.addEventListener("click", () => {
+    const opening = panel.hidden;
+    panel.hidden = !opening;
+    host.classList.toggle("open", opening);
+    gear.setAttribute("aria-expanded", String(opening));
+  });
+  initSpeed();
+  sync();
+  // `panel` is handed back so a page can seat its own controls among these —
+  // the player page moves its "AI thinks for" clock in here
+  return { el: host, sync, open: () => gear.click(), panel };
+}

ui/status.js ADDED Viewed

	@@ -0,0 +1,96 @@

+/* The status band: one glance, whole game state.
+ *
+ * A single line of display type says what is happening right now ("Your turn —
+ * pick a colour", "AI is thinking — 2.1s of 5s", "You won 74–68"), a second line
+ * carries the detail, and the running score sits on the right. When the AI is
+ * searching, the glaze bar under the text fills for its budget: the band is the
+ * clock, so nothing has to cover the board to tell you to wait.
+ *
+ *   const status = createStatus(el);
+ *   status.set({ headline: "Your turn", detail: "pick a colour", tone: "you" });
+ *   status.startClock({ budget: 5, label: (s) => `AI is thinking — ${s}s` });
+ */
+import { node } from "./dom.js";
+export function createStatus(host) {
+  host.classList.add("status");
+  host.setAttribute("role", "status");
+  host.setAttribute("aria-live", "polite");
+  const text = node("div", "status-text");
+  const headline = node("p", "status-headline", "");
+  const detail = node("p", "status-detail", "");
+  text.append(headline, detail);
+  const tally = node("div", "status-score");
+  const you = scoreCell("You");
+  const them = scoreCell("AI");
+  tally.append(you.el, node("span", "status-dash", "–"), them.el);
+  const bar = node("div", "status-bar");
+  const fill = node("i", "status-fill");
+  bar.appendChild(fill);
+  host.append(text, tally, bar);
+  let timer = null;
+  function scoreCell(label) {
+    const el = node("div", "status-side");
+    const name = node("span", "status-side-name", label);
+    const value = node("span", "status-side-score", "0");
+    el.append(value, name);
+    return { el, name, value };
+  }
+  function stopClock() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    host.classList.remove("ticking");
+    fill.style.width = "0%";
+  }
+  return {
+    el: host,
+    /** Set the whole band. `tone` styles it: you / ai / scoring / end / idle. */
+    set(next) {
+      const info = next || {};
+      headline.textContent = info.headline || "";
+      detail.textContent = info.detail || "";
+      host.dataset.tone = info.tone || "idle";
+      if (!info.keepClock) stopClock();
+    },
+    /** Update the two-sided score readout. */
+    setScore(left, right, leftLabel, rightLabel) {
+      you.value.textContent = left;
+      them.value.textContent = right;
+      if (leftLabel) you.name.textContent = leftLabel;
+      if (rightLabel) them.name.textContent = rightLabel;
+      you.el.classList.toggle("leading", left > right);
+      them.el.classList.toggle("leading", right > left);
+    },
+    /**
+     * Run the clock in the band. `label(spent, budget)` writes the headline;
+     * with a budget the glaze bar fills, without one it sweeps.
+     */
+    startClock(options) {
+      const opts = options || {};
+      const budget = Number(opts.budget) || 0;
+      const started = Date.now();
+      stopClock();
+      host.classList.add("ticking");
+      host.classList.toggle("indeterminate", !budget);
+      const tick = () => {
+        const spent = (Date.now() - started) / 1000;
+        if (opts.label) headline.textContent = opts.label(spent, budget);
+        if (budget) fill.style.width = Math.min(100, (spent / budget) * 100) + "%";
+      };
+      tick();
+      timer = setInterval(tick, 100);
+    },
+    stopClock,
+  };
+}

ui/theme.css ADDED Viewed

	@@ -0,0 +1,246 @@

+/* theme.css — every colour this game is made of, in one place.
+ *
+ * If you want to restyle the table, this is the only file you need to open.
+ * Nothing below `:root` invents a colour: board.css, style.css and the JS
+ * modules all draw from these custom properties. See THEMING.md for how to add
+ * a skin.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * The one rule this palette is built on: **hue means occupied.**
+ *
+ * The board is mostly empty space — 25 wall squares, 15 pattern-line slots and
+ * 7 floor slots per player — and for a long time all of them were painted in a
+ * pale tint of the colour that belongs there. The result was a mosaic of forty
+ * pastel squares in which the five real tiles had to be hunted for. So: a tile
+ * that is *there* is saturated, raised and rimmed; a slot that is *empty* is a
+ * neutral, recessed well with no glaze in it at all. The wall keeps its pattern
+ * as a thin outlined diamond in the tile's own ink — enough to plan with, far
+ * too faint to mistake for a tile. From a metre away the board now reads as
+ * holes with a few jewels in it, which is what the cardboard one looks like.
+ * ───────────────────────────────────────────────────────────────────────────── */
+:root {
+  color-scheme: light;
+  /* ============================================================ the table ==
+   * Linen cloth, plaster boards, mortar between the wall squares. */
+  --linen: #e6dbc6;
+  --linen-dark: #d8c9ae;
+  --linen-warm: #efe6d3;
+  --linen-thread: rgba(255, 255, 255, .35);
+  --plaster: #faf6ec;
+  --plaster-hi: #fdfbf5;
+  --plaster-edge: #e2d7bd;
+  --plaster-sunk: #f2ebda;
+  --grout: #bcab8c;
+  --grout-deep: #a3906f;
+  --ink: #2c2722;
+  --ink-soft: #6a5d4e;
+  --ink-faint: #92836f;
+  /* ======================================================== the five glazes ==
+   * Matched to the tiles you hold in your hand: deep cobalt, mustard ochre,
+   * brick terracotta, near-black charcoal, and the pale one — "ice", a bright
+   * cyan-turquoise that must read lighter than the cobalt at a glance.
+   *
+   *   --cN      the glaze itself (what a tile *is*)
+   *   --cN-hi   the lit edge, top-left
+   *   --cN-lo   the shaded edge, bottom-right
+   *   --cN-rim  the fired rim drawn around a placed tile
+   *   --cN-ink  the same hue as a line: outlines, text, the wall's diamonds
+   *   --cN-wash a transparent wash of the hue, for highlight backgrounds */
+  --c0: #16509f; --c0-hi: #5b8dd2; --c0-lo: #0a2f61; --c0-rim: #082851; --c0-ink: #123f7d;
+  --c1: #e2a41f; --c1-hi: #f7ca55; --c1-lo: #96680a; --c1-rim: #7c5507; --c1-ink: #8a6009;
+  --c2: #b8402c; --c2-hi: #dc7761; --c2-lo: #77220f; --c2-rim: #611a0b; --c2-ink: #8c2c18;
+  --c3: #262b31; --c3-hi: #5d6673; --c3-lo: #0b0e12; --c3-rim: #000; --c3-ink: #2b3038;
+  --c4: #4cc3d8; --c4-hi: #93e2ef; --c4-lo: #1b8399; --c4-rim: #146b7e; --c4-ink: #12707f;
+  --c0-wash: rgba(22, 80, 159, .12);
+  --c1-wash: rgba(226, 164, 31, .14);
+  --c2-wash: rgba(184, 64, 44, .12);
+  --c3-wash: rgba(38, 43, 49, .12);
+  --c4-wash: rgba(76, 195, 216, .16);
+  /* ========================================================== empty slots ==
+   * One neutral, for every empty square on the board. Deliberately duller and
+   * darker than any glaze and than the plaster around it, so a hole looks like
+   * a hole. `--slot-motif` is how strongly the wall's colour hint shows, and
+   * `--cN-motif` is the ink it is drawn in — the full glaze by default, so you
+   * can read which colour belongs in a square from across the table. The square
+   * stays a neutral well; only the outlined diamond in it carries the hue. */
+  --slot: #c6bda9;
+  --slot-lo: #b0a58e;
+  --slot-rim: #978b73;
+  --slot-shade: rgba(72, 56, 30, .34);
+  --slot-motif: .9;
+  --c0-motif: var(--c0);
+  --c1-motif: var(--c1);
+  --c2-motif: var(--c2);
+  --c3-motif: var(--c3);
+  --c4-motif: var(--c4);
+  /* the motif's body: the same glaze thinned to a matte wash, as if a drop of
+   * it had sunk into the plaster. Flat and translucent on purpose — a tile is
+   * glossy, raised and opaque, and this must never be mistaken for one. */
+  --c0-ghost: rgba(22, 80, 159, .34);
+  --c1-ghost: rgba(226, 164, 31, .38);
+  --c2-ghost: rgba(184, 64, 44, .34);
+  --c3-ghost: rgba(38, 43, 49, .30);
+  --c4-ghost: rgba(76, 195, 216, .38);
+  /* ============================================================== fixtures ==
+   * The bowls the tiles sit in, the marker chip, the lid. */
+  --dish: #f4ead4;
+  --dish-hi: #fffdf6;
+  --dish-lo: #dccdb0;
+  --dish-rim: var(--grout);
+  --marker-face: #fffdf4;
+  --marker-lo: #e9dcc0;
+  --lid-receiving: rgba(226, 164, 31, .2);
+  /* ============================================================== meaning ==
+   * The four things the status band can be about, and the coach's three
+   * verdicts. Every one of them is a glaze, so the page never invents an
+   * accent colour that is not on the table. */
+  --tone-you: var(--c4);
+  --tone-ai: var(--c0);
+  --tone-scoring: var(--c1);
+  --tone-end: var(--c2);
+  --tone-idle: var(--grout);
+  --grade-best: var(--c0-ink);
+  --grade-slip: var(--c1-ink);
+  --grade-blunder: var(--c2-ink);
+  --gain: var(--c0-ink);
+  --loss: var(--c2-ink);
+  /* ================================================================ chrome ==
+   * Panels, buttons, fields — the furniture around the table. */
+  --panel-top: #fdfbf5;
+  --panel-bottom: var(--plaster);
+  --panel-edge: var(--plaster-edge);
+  --field-bg: #fffdf7;
+  --btn-top: #fffdf8;
+  --btn-bottom: #f0e7d5;
+  --btn-top-hover: #fffefb;
+  --btn-bottom-hover: #f6efe1;
+  --btn-primary-top: #3d76bd;
+  --btn-primary-bottom: var(--c0-lo);
+  --btn-primary-top-hover: #4d84c8;
+  --btn-primary-bottom-hover: #1c5296;
+  --btn-primary-ink: #fdfaf2;
+  --focus-ring: var(--c4-lo);
+  --topbar-top: #fdfaf3;
+  --topbar-bottom: #f4ecdc;
+  --engine-top: #f6efe0;
+  --engine-bottom: #f1e8d5;
+  --badge-bg: var(--c0-wash);
+  --badge-edge: rgba(22, 80, 159, .28);
+  --toast-bg: #fffdf6;
+  --shadow-panel: 0 1px 0 #fffdf7 inset, 0 10px 26px -18px rgba(60, 44, 20, .55);
+  --shadow-tile: 0 2px 3px -1px rgba(48, 34, 14, .5);
+  --shadow-tile-raised: 0 6px 10px -4px rgba(48, 34, 14, .6);
+  /* ============================================================== geometry ==
+   * Not colour, but the same argument: one place to change it. */
+  --tile: 32px;
+  --radius: 3px;
+  --font-display: Palatino, "Palatino Linotype", "Book Antiqua", "Iowan Old Style", Georgia, serif;
+  --font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
+  --font-label: "Avenir Next Condensed", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
+}
+/* ================================================================== skins ==
+ * A skin is this same list of properties, redeclared. Set it with
+ * `document.documentElement.dataset.skin = "dusk"`. THEMING.md walks through
+ * writing one; this is the worked example that proves the mechanism.
+ *
+ * "Dusk": the same factory, lit at the end of the day — a slate table, cooler
+ * plaster, and glazes fired one stop deeper. */
+:root[data-skin="dusk"] {
+  --linen: #3a3730;
+  --linen-dark: #2c2a24;
+  --linen-warm: #45413a;
+  --linen-thread: rgba(255, 255, 255, .05);
+  --plaster: #4a4640;
+  --plaster-hi: #565149;
+  --plaster-edge: #625c52;
+  --plaster-sunk: #423e38;
+  --grout: #6d6659;
+  --grout-deep: #575146;
+  --ink: #f2ece0;
+  --ink-soft: #c3b9a7;
+  --ink-faint: #978d7c;
+  --c0: #3d79cf; --c0-hi: #86aee6; --c0-lo: #1c4478; --c0-rim: #16375f; --c0-ink: #93b6e8;
+  --c1: #f0b53c; --c1-hi: #ffd67a; --c1-lo: #a2740f; --c1-rim: #7d590a; --c1-ink: #f3c463;
+  --c2: #d4573f; --c2-hi: #ec8b74; --c2-lo: #872c17; --c2-rim: #6a200f; --c2-ink: #e88b73;
+  --c3: #1b1f24; --c3-hi: #4c545f; --c3-lo: #06080a; --c3-rim: #000; --c3-ink: #9aa3b0;
+  --c4: #5fd3e8; --c4-hi: #a6ecf6; --c4-lo: #1d8ca3; --c4-rim: #146b7e; --c4-ink: #7fdcec;
+  --c0-wash: rgba(61, 121, 207, .2);
+  --c1-wash: rgba(240, 181, 60, .18);
+  --c2-wash: rgba(212, 87, 63, .18);
+  --c3-wash: rgba(27, 31, 36, .3);
+  --c4-wash: rgba(95, 211, 232, .18);
+  --slot: #37342e;
+  --slot-lo: #2b2823;
+  --slot-rim: #514b41;
+  --slot-shade: rgba(0, 0, 0, .5);
+  --slot-motif: .9;
+  /* charcoal's glaze is darker than the dusk slot it sits in, so its motif is
+   * drawn in the charcoal *ink* instead — same hue, readable at night */
+  --c3-motif: var(--c3-ink);
+  --c0-ghost: rgba(61, 121, 207, .34);
+  --c1-ghost: rgba(240, 181, 60, .34);
+  --c2-ghost: rgba(212, 87, 63, .34);
+  --c3-ghost: rgba(154, 163, 176, .26);
+  --c4-ghost: rgba(95, 211, 232, .32);
+  --dish: #514c44;
+  --dish-hi: #605a50;
+  --dish-lo: #423e37;
+  --marker-face: #6a6459;
+  --marker-lo: #524d44;
+  --panel-top: #514c44;
+  --panel-bottom: var(--plaster);
+  --field-bg: #423e38;
+  --btn-top: #5a544a;
+  --btn-bottom: #48433c;
+  --btn-top-hover: #665f54;
+  --btn-bottom-hover: #524c44;
+  --btn-primary-top: #2f63b0;
+  --btn-primary-bottom: #16375f;
+  --btn-primary-top-hover: #3f76c6;
+  --btn-primary-bottom-hover: #102a4a;
+  --btn-primary-ink: #f4f8ff;
+  --topbar-top: #4f4a42;
+  --topbar-bottom: #423e38;
+  --engine-top: #494540;
+  --engine-bottom: #423e38;
+  --badge-bg: var(--c0-wash);
+  --badge-edge: rgba(61, 121, 207, .4);
+  --toast-bg: #514c44;
+  --grade-best: var(--c0-ink);
+  --grade-slip: var(--c1-ink);
+  --grade-blunder: var(--c2-ink);
+  --gain: var(--c4-ink);
+  --loss: var(--c2-ink);
+  --shadow-panel: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 26px -18px rgba(0, 0, 0, .8);
+  --shadow-tile: 0 2px 3px -1px rgba(0, 0, 0, .6);
+  --shadow-tile-raised: 0 6px 10px -4px rgba(0, 0, 0, .7);
+}

vendor/onnxruntime-web/ort-wasm-simd-threaded.jspi.wasm ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:7c28cdb40958a998f5aa0981d5cb8e57ac1e7e9b4d2f18a7d74e00dd9629d7a3
+size 15046878

vendor/onnxruntime-web/ort-wasm-simd-threaded.wasm ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:d1ab1b94b16a65b29d710d0b587b29e7bed336827577623913479b8afe8113e6
+size 13479978

vendor/onnxruntime-web/ort.jspi.bundle.min.mjs ADDED Viewed

The diff for this file is too large to render. See raw diff

vendor/onnxruntime-web/ort.wasm.bundle.min.mjs ADDED Viewed

	@@ -0,0 +1,9 @@

+/*!
+ * ONNX Runtime Web v1.27.0
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+var Jt=Object.defineProperty;var Xa=Object.getOwnPropertyDescriptor;var Qa=Object.getOwnPropertyNames;var Za=Object.prototype.hasOwnProperty;var qt=(n=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(n,{get:(t,a)=>(typeof require<"u"?require:t)[a]}):n)(function(n){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+n+'" is not supported')});var F=(n,t)=>()=>(n&&(t=n(n=0)),t);var ut=(n,t)=>{for(var a in t)Jt(n,a,{get:t[a],enumerable:!0})},Ka=(n,t,a,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Qa(t))!Za.call(n,o)&&o!==a&&Jt(n,o,{get:()=>t[o],enumerable:!(u=Xa(t,o))||u.enumerable});return n};var Xt=n=>Ka(Jt({},"__esModule",{value:!0}),n);var ft,Be,qe,es,dr,Qt=F(()=>{"use strict";ft=new Map,Be=[],qe=(n,t,a)=>{if(t&&typeof t.init=="function"&&typeof t.createInferenceSessionHandler=="function"){let u=ft.get(n);if(u===void 0)ft.set(n,{backend:t,priority:a});else{if(u.priority>a)return;if(u.priority===a&&u.backend!==t)throw new Error(`cannot register backend "${n}" using priority ${a}`)}if(a>=0){let o=Be.indexOf(n);o!==-1&&Be.splice(o,1);for(let d=0;d<Be.length;d++)if(ft.get(Be[d]).priority<=a){Be.splice(d,0,n);return}Be.push(n)}return}throw new TypeError("not a valid backend")},es=async n=>{let t=ft.get(n);if(!t)return"backend not found.";if(t.initialized)return t.backend;if(t.aborted)return t.error;{let a=!!t.initPromise;try{return a||(t.initPromise=t.backend.init(n)),await t.initPromise,t.initialized=!0,t.backend}catch(u){return a||(t.error=`${u}`,t.aborted=!0),t.error}finally{delete t.initPromise}}},dr=async n=>{let t=n.executionProviders||[],a=t.map(m=>typeof m=="string"?m:m.name),u=a.length===0?Be:a,o,d=[],c=new Set;for(let m of u){let h=await es(m);typeof h=="string"?d.push({name:m,err:h}):(o||(o=h),o===h&&c.add(m))}if(!o)throw new Error(`no available backend found. ERR: ${d.map(m=>`[${m.name}] ${m.err}`).join(", ")}`);for(let{name:m,err:h}of d)a.includes(m)&&console.warn(`removing requested execution provider "${m}" from session options because it is not available: ${h}`);let l=t.filter(m=>c.has(typeof m=="string"?m:m.name));return[o,new Proxy(n,{get:(m,h)=>h==="executionProviders"?l:Reflect.get(m,h)})]}});var pr=F(()=>{"use strict";Qt()});var mr,hr=F(()=>{"use strict";mr="1.27.0"});var wr,J,Zt=F(()=>{"use strict";hr();wr="warning",J={wasm:{},webgl:{},webgpu:{},versions:{common:mr},set logLevel(n){if(n!==void 0){if(typeof n!="string"||["verbose","info","warning","error","fatal"].indexOf(n)===-1)throw new Error(`Unsupported logging level: ${n}`);wr=n}},get logLevel(){return wr}};Object.defineProperty(J,"logLevel",{enumerable:!0})});var Y,br=F(()=>{"use strict";Zt();Y=J});var yr,gr,Er=F(()=>{"use strict";yr=(n,t)=>{let a=typeof document<"u"?document.createElement("canvas"):new OffscreenCanvas(1,1);a.width=n.dims[3],a.height=n.dims[2];let u=a.getContext("2d");if(u!=null){let o,d;t?.tensorLayout!==void 0&&t.tensorLayout==="NHWC"?(o=n.dims[2],d=n.dims[3]):(o=n.dims[3],d=n.dims[2]);let c=t?.format!==void 0?t.format:"RGB",l=t?.norm,m,h;l===void 0||l.mean===void 0?m=[255,255,255,255]:typeof l.mean=="number"?m=[l.mean,l.mean,l.mean,l.mean]:(m=[l.mean[0],l.mean[1],l.mean[2],0],l.mean[3]!==void 0&&(m[3]=l.mean[3])),l===void 0||l.bias===void 0?h=[0,0,0,0]:typeof l.bias=="number"?h=[l.bias,l.bias,l.bias,l.bias]:(h=[l.bias[0],l.bias[1],l.bias[2],0],l.bias[3]!==void 0&&(h[3]=l.bias[3]));let g=d*o,b=0,y=g,T=g*2,I=-1;c==="RGBA"?(b=0,y=g,T=g*2,I=g*3):c==="RGB"?(b=0,y=g,T=g*2):c==="RBG"&&(b=0,T=g,y=g*2);for(let D=0;D<d;D++)for(let z=0;z<o;z++){let v=(n.data[b++]-h[0])*m[0],O=(n.data[y++]-h[1])*m[1],N=(n.data[T++]-h[2])*m[2],_=I===-1?255:(n.data[I++]-h[3])*m[3];u.fillStyle="rgba("+v+","+O+","+N+","+_+")",u.fillRect(z,D,1,1)}if("toDataURL"in a)return a.toDataURL();throw new Error("toDataURL is not supported")}else throw new Error("Can not access image data")},gr=(n,t)=>{let a=typeof document<"u"?document.createElement("canvas").getContext("2d"):new OffscreenCanvas(1,1).getContext("2d"),u;if(a!=null){let o,d,c;t?.tensorLayout!==void 0&&t.tensorLayout==="NHWC"?(o=n.dims[2],d=n.dims[1],c=n.dims[3]):(o=n.dims[3],d=n.dims[2],c=n.dims[1]);let l=t!==void 0&&t.format!==void 0?t.format:"RGB",m=t?.norm,h,g;m===void 0||m.mean===void 0?h=[255,255,255,255]:typeof m.mean=="number"?h=[m.mean,m.mean,m.mean,m.mean]:(h=[m.mean[0],m.mean[1],m.mean[2],255],m.mean[3]!==void 0&&(h[3]=m.mean[3])),m===void 0||m.bias===void 0?g=[0,0,0,0]:typeof m.bias=="number"?g=[m.bias,m.bias,m.bias,m.bias]:(g=[m.bias[0],m.bias[1],m.bias[2],0],m.bias[3]!==void 0&&(g[3]=m.bias[3]));let b=d*o;if(t!==void 0&&(t.format!==void 0&&c===4&&t.format!=="RGBA"||c===3&&t.format!=="RGB"&&t.format!=="BGR"))throw new Error("Tensor format doesn't match input tensor dims");let y=4,T=0,I=1,D=2,z=3,v=0,O=b,N=b*2,_=-1;l==="RGBA"?(v=0,O=b,N=b*2,_=b*3):l==="RGB"?(v=0,O=b,N=b*2):l==="RBG"&&(v=0,N=b,O=b*2),u=a.createImageData(o,d);for(let k=0;k<d*o;T+=y,I+=y,D+=y,z+=y,k++)u.data[T]=(n.data[v++]-g[0])*h[0],u.data[I]=(n.data[O++]-g[1])*h[1],u.data[D]=(n.data[N++]-g[2])*h[2],u.data[z]=_===-1?255:(n.data[_++]-g[3])*h[3]}else throw new Error("Can not access image data");return u}});var Kt,Tr,Sr,vr,Or,Ar,Ir=F(()=>{"use strict";ct();Kt=(n,t)=>{if(n===void 0)throw new Error("Image buffer must be defined");if(t.height===void 0||t.width===void 0)throw new Error("Image height and width must be defined");if(t.tensorLayout==="NHWC")throw new Error("NHWC Tensor layout is not supported yet");let{height:a,width:u}=t,o=t.norm??{mean:255,bias:0},d,c;typeof o.mean=="number"?d=[o.mean,o.mean,o.mean,o.mean]:d=[o.mean[0],o.mean[1],o.mean[2],o.mean[3]??255],typeof o.bias=="number"?c=[o.bias,o.bias,o.bias,o.bias]:c=[o.bias[0],o.bias[1],o.bias[2],o.bias[3]??0];let l=t.format!==void 0?t.format:"RGBA",m=t.tensorFormat!==void 0&&t.tensorFormat!==void 0?t.tensorFormat:"RGB",h=a*u,g=m==="RGBA"?new Float32Array(h*4):new Float32Array(h*3),b=4,y=0,T=1,I=2,D=3,z=0,v=h,O=h*2,N=-1;l==="RGB"&&(b=3,y=0,T=1,I=2,D=-1),m==="RGBA"?N=h*3:m==="RBG"?(z=0,O=h,v=h*2):m==="BGR"&&(O=0,v=h,z=h*2);for(let k=0;k<h;k++,y+=b,I+=b,T+=b,D+=b)g[z++]=(n[y]+c[0])/d[0],g[v++]=(n[T]+c[1])/d[1],g[O++]=(n[I]+c[2])/d[2],N!==-1&&D!==-1&&(g[N++]=(n[D]+c[3])/d[3]);return m==="RGBA"?new Q("float32",g,[1,4,a,u]):new Q("float32",g,[1,3,a,u])},Tr=async(n,t)=>{let a=typeof HTMLImageElement<"u"&&n instanceof HTMLImageElement,u=typeof ImageData<"u"&&n instanceof ImageData,o=typeof ImageBitmap<"u"&&n instanceof ImageBitmap,d=typeof n=="string",c,l=t??{},m=()=>{if(typeof document<"u")return document.createElement("canvas");if(typeof OffscreenCanvas<"u")return new OffscreenCanvas(1,1);throw new Error("Canvas is not supported")},h=g=>typeof HTMLCanvasElement<"u"&&g instanceof HTMLCanvasElement||g instanceof OffscreenCanvas?g.getContext("2d"):null;if(a){let g=m();g.width=n.width,g.height=n.height;let b=h(g);if(b!=null){let y=n.height,T=n.width;if(t!==void 0&&t.resizedHeight!==void 0&&t.resizedWidth!==void 0&&(y=t.resizedHeight,T=t.resizedWidth),t!==void 0){if(l=t,t.tensorFormat!==void 0)throw new Error("Image input config format must be RGBA for HTMLImageElement");l.tensorFormat="RGBA",l.height=y,l.width=T}else l.tensorFormat="RGBA",l.height=y,l.width=T;b.drawImage(n,0,0),c=b.getImageData(0,0,T,y).data}else throw new Error("Can not access image data")}else if(u){let g,b;if(t!==void 0&&t.resizedWidth!==void 0&&t.resizedHeight!==void 0?(g=t.resizedHeight,b=t.resizedWidth):(g=n.height,b=n.width),t!==void 0&&(l=t),l.format="RGBA",l.height=g,l.width=b,t!==void 0){let y=m();y.width=b,y.height=g;let T=h(y);if(T!=null)T.putImageData(n,0,0),c=T.getImageData(0,0,b,g).data;else throw new Error("Can not access image data")}else c=n.data}else if(o){if(t===void 0)throw new Error("Please provide image config with format for Imagebitmap");let g=m();g.width=n.width,g.height=n.height;let b=h(g);if(b!=null){let y=n.height,T=n.width;return b.drawImage(n,0,0,T,y),c=b.getImageData(0,0,T,y).data,l.height=y,l.width=T,Kt(c,l)}else throw new Error("Can not access image data")}else{if(d)return new Promise((g,b)=>{let y=m(),T=h(y);if(!n||!T)return b();let I=new Image;I.crossOrigin="Anonymous",I.src=n,I.onload=()=>{y.width=I.width,y.height=I.height,T.drawImage(I,0,0,y.width,y.height);let D=T.getImageData(0,0,y.width,y.height);l.height=y.height,l.width=y.width,g(Kt(D.data,l))}});throw new Error("Input data provided is not supported - aborted tensor creation")}if(c!==void 0)return Kt(c,l);throw new Error("Input data provided is not supported - aborted tensor creation")},Sr=(n,t)=>{let{width:a,height:u,download:o,dispose:d}=t,c=[1,u,a,4];return new Q({location:"texture",type:"float32",texture:n,dims:c,download:o,dispose:d})},vr=(n,t)=>{let{dataType:a,dims:u,download:o,dispose:d}=t;return new Q({location:"gpu-buffer",type:a??"float32",gpuBuffer:n,dims:u,download:o,dispose:d})},Or=(n,t)=>{let{dataType:a,dims:u,download:o,dispose:d}=t;return new Q({location:"ml-tensor",type:a??"float32",mlTensor:n,dims:u,download:o,dispose:d})},Ar=(n,t,a)=>new Q({location:"cpu-pinned",type:n,data:t,dims:a??[t.length]})});var Le,Xe,Br,Lr,_r=F(()=>{"use strict";Le=new Map([["float32",Float32Array],["uint8",Uint8Array],["int8",Int8Array],["uint16",Uint16Array],["int16",Int16Array],["int32",Int32Array],["bool",Uint8Array],["float64",Float64Array],["uint32",Uint32Array],["int4",Uint8Array],["uint4",Uint8Array]]),Xe=new Map([[Float32Array,"float32"],[Uint8Array,"uint8"],[Int8Array,"int8"],[Uint16Array,"uint16"],[Int16Array,"int16"],[Int32Array,"int32"],[Float64Array,"float64"],[Uint32Array,"uint32"]]),Br=!1,Lr=()=>{if(!Br){Br=!0;let n=typeof BigInt64Array<"u"&&BigInt64Array.from,t=typeof BigUint64Array<"u"&&BigUint64Array.from,a=globalThis.Float16Array,u=typeof a<"u"&&a.from;n&&(Le.set("int64",BigInt64Array),Xe.set(BigInt64Array,"int64")),t&&(Le.set("uint64",BigUint64Array),Xe.set(BigUint64Array,"uint64")),u?(Le.set("float16",a),Xe.set(a,"float16")):Le.set("float16",Uint16Array)}}});var Pr,Dr,Ur=F(()=>{"use strict";ct();Pr=n=>{let t=1;for(let a=0;a<n.length;a++){let u=n[a];if(typeof u!="number"||!Number.isSafeInteger(u))throw new TypeError(`dims[${a}] must be an integer, got: ${u}`);if(u<0)throw new RangeError(`dims[${a}] must be a non-negative integer, got: ${u}`);t*=u}return t},Dr=(n,t)=>{switch(n.location){case"cpu":return new Q(n.type,n.data,t);case"cpu-pinned":return new Q({location:"cpu-pinned",data:n.data,type:n.type,dims:t});case"texture":return new Q({location:"texture",texture:n.texture,type:n.type,dims:t});case"gpu-buffer":return new Q({location:"gpu-buffer",gpuBuffer:n.gpuBuffer,type:n.type,dims:t});case"ml-tensor":return new Q({location:"ml-tensor",mlTensor:n.mlTensor,type:n.type,dims:t});default:throw new Error(`tensorReshape: tensor location ${n.location} is not supported`)}}});var Q,ct=F(()=>{"use strict";Er();Ir();_r();Ur();Q=class{constructor(t,a,u){Lr();let o,d;if(typeof t=="object"&&"location"in t)switch(this.dataLocation=t.location,o=t.type,d=t.dims,t.location){case"cpu-pinned":{let l=Le.get(o);if(!l)throw new TypeError(`unsupported type "${o}" to create tensor from pinned buffer`);if(!(t.data instanceof l))throw new TypeError(`buffer should be of type ${l.name}`);this.cpuData=t.data;break}case"texture":{if(o!=="float32")throw new TypeError(`unsupported type "${o}" to create tensor from texture`);this.gpuTextureData=t.texture,this.downloader=t.download,this.disposer=t.dispose;break}case"gpu-buffer":{if(o!=="float32"&&o!=="float16"&&o!=="int32"&&o!=="int64"&&o!=="uint32"&&o!=="uint8"&&o!=="bool"&&o!=="uint4"&&o!=="int4")throw new TypeError(`unsupported type "${o}" to create tensor from gpu buffer`);this.gpuBufferData=t.gpuBuffer,this.downloader=t.download,this.disposer=t.dispose;break}case"ml-tensor":{if(o!=="float32"&&o!=="float16"&&o!=="int32"&&o!=="int64"&&o!=="uint32"&&o!=="uint64"&&o!=="int8"&&o!=="uint8"&&o!=="bool"&&o!=="uint4"&&o!=="int4")throw new TypeError(`unsupported type "${o}" to create tensor from MLTensor`);this.mlTensorData=t.mlTensor,this.downloader=t.download,this.disposer=t.dispose;break}default:throw new Error(`Tensor constructor: unsupported location '${this.dataLocation}'`)}else{let l,m;if(typeof t=="string")if(o=t,m=u,t==="string"){if(!Array.isArray(a))throw new TypeError("A string tensor's data must be a string array.");l=a}else{let h=Le.get(t);if(h===void 0)throw new TypeError(`Unsupported tensor type: ${t}.`);if(Array.isArray(a)){if(t==="float16"&&h===Uint16Array||t==="uint4"||t==="int4")throw new TypeError(`Creating a ${t} tensor from number array is not supported. Please use ${h.name} as data.`);t==="uint64"||t==="int64"?l=h.from(a,BigInt):l=h.from(a)}else if(a instanceof h)l=a;else if(a instanceof Uint8ClampedArray)if(t==="uint8")l=Uint8Array.from(a);else throw new TypeError("A Uint8ClampedArray tensor's data must be type of uint8");else if(t==="float16"&&a instanceof Uint16Array&&h!==Uint16Array)l=new globalThis.Float16Array(a.buffer,a.byteOffset,a.length);else throw new TypeError(`A ${o} tensor's data must be type of ${h}`)}else if(m=a,Array.isArray(t)){if(t.length===0)throw new TypeError("Tensor type cannot be inferred from an empty array.");let h=typeof t[0];if(h==="string")o="string",l=t;else if(h==="boolean")o="bool",l=Uint8Array.from(t);else throw new TypeError(`Invalid element type of data array: ${h}.`)}else if(t instanceof Uint8ClampedArray)o="uint8",l=Uint8Array.from(t);else{let h=Xe.get(t.constructor);if(h===void 0)throw new TypeError(`Unsupported type for tensor data: ${t.constructor}.`);o=h,l=t}if(m===void 0)m=[l.length];else if(!Array.isArray(m))throw new TypeError("A tensor's dims must be a number array");d=m,this.cpuData=l,this.dataLocation="cpu"}let c=Pr(d);if(this.cpuData&&c!==this.cpuData.length&&!((o==="uint4"||o==="int4")&&Math.ceil(c/2)===this.cpuData.length))throw new Error(`Tensor's size(${c}) does not match data length(${this.cpuData.length}).`);this.type=o,this.dims=d,this.size=c}static async fromImage(t,a){return Tr(t,a)}static fromTexture(t,a){return Sr(t,a)}static fromGpuBuffer(t,a){return vr(t,a)}static fromMLTensor(t,a){return Or(t,a)}static fromPinnedBuffer(t,a,u){return Ar(t,a,u)}toDataURL(t){return yr(this,t)}toImageData(t){return gr(this,t)}get data(){if(this.ensureValid(),!this.cpuData)throw new Error("The data is not on CPU. Use `getData()` to download GPU data to CPU, or use `texture` or `gpuBuffer` property to access the GPU data directly.");return this.cpuData}get location(){return this.dataLocation}get texture(){if(this.ensureValid(),!this.gpuTextureData)throw new Error("The data is not stored as a WebGL texture.");return this.gpuTextureData}get gpuBuffer(){if(this.ensureValid(),!this.gpuBufferData)throw new Error("The data is not stored as a WebGPU buffer.");return this.gpuBufferData}get mlTensor(){if(this.ensureValid(),!this.mlTensorData)throw new Error("The data is not stored as a WebNN MLTensor.");return this.mlTensorData}async getData(t){switch(this.ensureValid(),this.dataLocation){case"cpu":case"cpu-pinned":return this.data;case"texture":case"gpu-buffer":case"ml-tensor":{if(!this.downloader)throw new Error("The current tensor is not created with a specified data downloader.");if(this.isDownloading)throw new Error("The current tensor is being downloaded.");try{this.isDownloading=!0;let a=await this.downloader();return this.downloader=void 0,this.dataLocation="cpu",this.cpuData=a,t&&this.disposer&&(this.disposer(),this.disposer=void 0),a}finally{this.isDownloading=!1}}default:throw new Error(`cannot get data from location: ${this.dataLocation}`)}}dispose(){if(this.isDownloading)throw new Error("The current tensor is being downloaded.");this.disposer&&(this.disposer(),this.disposer=void 0),this.cpuData=void 0,this.gpuTextureData=void 0,this.gpuBufferData=void 0,this.mlTensorData=void 0,this.downloader=void 0,this.isDownloading=void 0,this.dataLocation="none"}ensureValid(){if(this.dataLocation==="none")throw new Error("The tensor is disposed.")}reshape(t){if(this.ensureValid(),this.downloader||this.disposer)throw new Error("Cannot reshape a tensor that owns GPU resource.");return Dr(this,t)}}});var de,en=F(()=>{"use strict";ct();de=Q});var xr,Cr,_e,Pe,De,Ue,tn=F(()=>{"use strict";Zt();xr=(n,t)=>{(typeof J.trace>"u"?!J.wasm.trace:!J.trace)||console.timeStamp(`${n}::ORT::${t}`)},Cr=(n,t)=>{let a=new Error().stack?.split(/\r\n|\r|\n/g)||[],u=!1;for(let o=0;o<a.length;o++){if(u&&!a[o].includes("TRACE_FUNC")){let d=`FUNC_${n}::${a[o].trim().split(" ")[1]}`;t&&(d+=`::${t}`),xr("CPU",d);return}a[o].includes("TRACE_FUNC")&&(u=!0)}},_e=n=>{(typeof J.trace>"u"?!J.wasm.trace:!J.trace)||Cr("BEGIN",n)},Pe=n=>{(typeof J.trace>"u"?!J.wasm.trace:!J.trace)||Cr("END",n)},De=n=>{(typeof J.trace>"u"?!J.wasm.trace:!J.trace)||console.time(`ORT::${n}`)},Ue=n=>{(typeof J.trace>"u"?!J.wasm.trace:!J.trace)||console.timeEnd(`ORT::${n}`)}});var lt,Mr=F(()=>{"use strict";Qt();en();tn();lt=class n{constructor(t){this.handler=t}async run(t,a,u){_e(),De("InferenceSession.run");let o={},d={};if(typeof t!="object"||t===null||t instanceof de||Array.isArray(t))throw new TypeError("'feeds' must be an object that use input names as keys and OnnxValue as corresponding values.");let c=!0;if(typeof a=="object"){if(a===null)throw new TypeError("Unexpected argument[1]: cannot be null.");if(a instanceof de)throw new TypeError("'fetches' cannot be a Tensor");if(Array.isArray(a)){if(a.length===0)throw new TypeError("'fetches' cannot be an empty array.");c=!1;for(let h of a){if(typeof h!="string")throw new TypeError("'fetches' must be a string array or an object.");if(this.outputNames.indexOf(h)===-1)throw new RangeError(`'fetches' contains invalid output name: ${h}.`);o[h]=null}if(typeof u=="object"&&u!==null)d=u;else if(typeof u<"u")throw new TypeError("'options' must be an object.")}else{let h=!1,g=Object.getOwnPropertyNames(a);for(let b of this.outputNames)if(g.indexOf(b)!==-1){let y=a[b];(y===null||y instanceof de)&&(h=!0,c=!1,o[b]=y)}if(h){if(typeof u=="object"&&u!==null)d=u;else if(typeof u<"u")throw new TypeError("'options' must be an object.")}else d=a}}else if(typeof a<"u")throw new TypeError("Unexpected argument[1]: must be 'fetches' or 'options'.");for(let h of this.inputNames)if(typeof t[h]>"u")throw new Error(`input '${h}' is missing in 'feeds'.`);if(c)for(let h of this.outputNames)o[h]=null;let l=await this.handler.run(t,o,d),m={};for(let h in l)if(Object.hasOwnProperty.call(l,h)){let g=l[h];g instanceof de?m[h]=g:m[h]=new de(g.type,g.data,g.dims)}return Ue("InferenceSession.run"),Pe(),m}async release(){return this.handler.dispose()}static async create(t,a,u,o){_e(),De("InferenceSession.create");let d,c={};if(typeof t=="string"){if(d=t,typeof a=="object"&&a!==null)c=a;else if(typeof a<"u")throw new TypeError("'options' must be an object.")}else if(t instanceof Uint8Array){if(d=t,typeof a=="object"&&a!==null)c=a;else if(typeof a<"u")throw new TypeError("'options' must be an object.")}else if(t instanceof ArrayBuffer||typeof SharedArrayBuffer<"u"&&t instanceof SharedArrayBuffer){let g=t,b=0,y=t.byteLength;if(typeof a=="object"&&a!==null)c=a;else if(typeof a=="number"){if(b=a,!Number.isSafeInteger(b))throw new RangeError("'byteOffset' must be an integer.");if(b<0||b>=g.byteLength)throw new RangeError(`'byteOffset' is out of range [0, ${g.byteLength}).`);if(y=t.byteLength-b,typeof u=="number"){if(y=u,!Number.isSafeInteger(y))throw new RangeError("'byteLength' must be an integer.");if(y<=0||b+y>g.byteLength)throw new RangeError(`'byteLength' is out of range (0, ${g.byteLength-b}].`);if(typeof o=="object"&&o!==null)c=o;else if(typeof o<"u")throw new TypeError("'options' must be an object.")}else if(typeof u<"u")throw new TypeError("'byteLength' must be a number.")}else if(typeof a<"u")throw new TypeError("'options' must be an object.");d=new Uint8Array(g,b,y)}else throw new TypeError("Unexpected argument[0]: must be 'path' or 'buffer'.");let[l,m]=await dr(c),h=await l.createInferenceSessionHandler(d,m);return Ue("InferenceSession.create"),Pe(),new n(h)}startProfiling(){this.handler.startProfiling()}endProfiling(){this.handler.endProfiling()}get inputNames(){return this.handler.inputNames}get outputNames(){return this.handler.outputNames}get inputMetadata(){return this.handler.inputMetadata}get outputMetadata(){return this.handler.outputMetadata}}});var ts,Rr=F(()=>{"use strict";Mr();ts=lt});var Nr=F(()=>{"use strict"});var Fr=F(()=>{"use strict"});var kr=F(()=>{"use strict"});var Wr=F(()=>{"use strict"});var nn={};ut(nn,{InferenceSession:()=>ts,TRACE:()=>xr,TRACE_EVENT_BEGIN:()=>De,TRACE_EVENT_END:()=>Ue,TRACE_FUNC_BEGIN:()=>_e,TRACE_FUNC_END:()=>Pe,Tensor:()=>de,env:()=>Y,registerBackend:()=>qe});var Te=F(()=>{"use strict";pr();br();Rr();en();Nr();Fr();tn();kr();Wr()});var dt=F(()=>{"use strict"});var Hr={};ut(Hr,{default:()=>ns});var $r,zr,ns,jr=F(()=>{"use strict";rn();xe();pt();$r="ort-wasm-proxy-worker",zr=globalThis.self?.name===$r;zr&&(self.onmessage=n=>{let{type:t,in:a}=n.data;try{switch(t){case"init-wasm":mt(a.wasm).then(()=>{ht(a).then(()=>{postMessage({type:t})},u=>{postMessage({type:t,err:u})})},u=>{postMessage({type:t,err:u})});break;case"init-ep":{let{epName:u,env:o}=a;wt(o,u).then(()=>{postMessage({type:t})},d=>{postMessage({type:t,err:d})});break}case"copy-from":{let{buffer:u}=a,o=Qe(u);postMessage({type:t,out:o});break}case"create":{let{model:u,options:o}=a;bt(u,o).then(d=>{postMessage({type:t,out:d})},d=>{postMessage({type:t,err:d})});break}case"release":yt(a),postMessage({type:t});break;case"run":{let{sessionId:u,inputIndices:o,inputs:d,outputIndices:c,options:l}=a;gt(u,o,d,c,new Array(c.length).fill(null),l).then(m=>{m.some(h=>h[3]!=="cpu")?postMessage({type:t,err:"Proxy does not support non-cpu tensor location."}):postMessage({type:t,out:m},Tt([...d,...m]))},m=>{postMessage({type:t,err:m})});break}case"end-profiling":Et(a),postMessage({type:t});break;default:}}catch(u){postMessage({type:t,err:u})}});ns=zr?null:n=>new Worker(n??oe,{type:"module",name:$r})});var Yr={};ut(Yr,{default:()=>rs});async function Vr(n={}){var t=n,a=!!globalThis.window,u=!!globalThis.WorkerGlobalScope,o=u&&self.name?.startsWith("em-pthread");t.mountExternalData=(e,r)=>{e.startsWith("./")&&(e=e.substring(2)),(t.Rb||(t.Rb=new Map)).set(e,r)},t.unmountExternalData=()=>{delete t.Rb},globalThis.SharedArrayBuffer??new WebAssembly.Memory({initial:0,maximum:0,shared:!0}).buffer.constructor;var d,c,l=(e,r)=>{throw r},m=import.meta.url,h="";if(a||u){try{h=new URL(".",m).href}catch{}u&&(c=e=>{var r=new XMLHttpRequest;return r.open("GET",e,!1),r.responseType="arraybuffer",r.send(null),new Uint8Array(r.response)}),d=async e=>{if(k(e))return new Promise((i,s)=>{var f=new XMLHttpRequest;f.open("GET",e,!0),f.responseType="arraybuffer",f.onload=()=>{f.status==200||f.status==0&&f.response?i(f.response):s(f.status)},f.onerror=s,f.send(null)});var r=await fetch(e,{credentials:"same-origin"});if(r.ok)return r.arrayBuffer();throw Error(r.status+" : "+r.url)}}var g,b,y,T,I,D,z=console.log.bind(console),v=console.error.bind(console),O=z,N=v,_=!1,k=e=>e.startsWith("file://");function w(){ge.buffer!=j.buffer&&ee()}if(o){let e=function(r){try{var i=r.data,s=i.Pb;if(s==="load"){let f=[];self.onmessage=p=>f.push(p),D=()=>{postMessage({Pb:"loaded"});for(let p of f)e(p);self.onmessage=e};for(let p of i.Zb)t[p]&&!t[p].proxy||(t[p]=(...E)=>{postMessage({Pb:"callHandler",Yb:p,args:E})},p=="print"&&(O=t[p]),p=="printErr"&&(N=t[p]));ge=i.dc,ee(),b=i.ec,Ut(),it()}else if(s==="run"){(function(f){var p=(w(),W)[f+52>>>2>>>0];f=(w(),W)[f+56>>>2>>>0],sr(p,p-f),P(p)})(i.Ob),zt(i.Ob,0,0,1,0,0),wn(),Nt(i.Ob),Z||=!0;try{Ao(i.bc,i.Tb)}catch(f){if(f!="unwind")throw f}}else i.target!=="setimmediate"&&(s==="checkMailbox"?Z&&rt():s&&(N(`worker: received unknown command ${s}`),N(i)))}catch(f){throw tr(),f}};var Ss=e,Z=!1;self.onunhandledrejection=r=>{throw r.reason||r},self.onmessage=e}var j,ne,pe,B,W,re,me,A,K,je=!1;function ee(){var e=ge.buffer;t.HEAP8=j=new Int8Array(e),pe=new Int16Array(e),t.HEAPU8=ne=new Uint8Array(e),new Uint16Array(e),t.HEAP32=B=new Int32Array(e),t.HEAPU32=W=new Uint32Array(e),re=new Float32Array(e),me=new Float64Array(e),A=new BigInt64Array(e),new BigUint64Array(e)}function he(){je=!0,o?D():Ee.Ta()}function H(e){throw N(e="Aborted("+e+")"),_=!0,e=new WebAssembly.RuntimeError(e+". Build with -sASSERTIONS for more info."),I?.(e),e}function q(){return{a:{R:fa,f:Io,w:Bo,e:Lo,k:_o,g:Po,S:Do,b:Uo,G:xo,ta:vn,j:Co,L:In,Ja:Bn,pa:Ln,ra:_n,Ka:Pn,Ha:Dn,Aa:Un,Ga:xn,Y:Cn,qa:Mn,na:Rn,Ia:Nn,oa:Fn,Pa:Mo,Da:Ro,la:Fo,ua:ko,ia:Wo,T:Go,Ca:Nt,Ma:$o,xa:zo,ya:Ho,za:jo,va:$n,wa:zn,ja:Hn,Ra:Yo,Oa:Xo,V:Qo,U:Zo,Na:Jo,F:Ko,La:ea,ma:ta,u:Vo,H:na,Q:at,ka:oa,aa:ra,Sa:aa,Ea:Yn,Fa:Jn,sa:ye,I:qn,X:Xn,Ba:Qn,W:Zn,_:ja,M:Wa,$:Ha,N:ka,v:Pa,d:pa,m:la,n:ca,q:va,ba:Ra,x:Ba,o:wa,O:Na,D:Ga,J:Ma,ca:Ca,da:xa,A:Oa,P:Ua,ea:Da,z:La,E:Fa,c:da,r:ha,i:ma,Z:Va,l:ya,p:ga,s:ba,t:Ea,y:Aa,fa:_a,B:$a,K:Ia,C:za,ga:Sa,ha:Ta,h:ia,a:ge,Qa:V}}}async function Ut(){function e(s,f){return Ee=s.exports,Ee=(function(){var p=Ee,E=x=>()=>x()>>>0,S=x=>R=>x(R)>>>0;return(p=Object.assign({},p)).sb=E(p.sb),p.ub=S(p.ub),p.Ib=S(p.Ib),p.Jb=E(p.Jb),p.Nb=S(p.Nb),p})(),mn.push(Ee.vb),s=Ee,t._OrtInit=s.Ua,t._OrtGetLastError=s.Va,t._OrtCreateSessionOptions=s.Wa,t._OrtAppendExecutionProvider=s.Xa,t._OrtAddFreeDimensionOverride=s.Ya,t._OrtAddSessionConfigEntry=s.Za,t._OrtReleaseSessionOptions=s._a,t._OrtCreateSession=s.$a,t._OrtReleaseSession=s.ab,t._OrtGetInputOutputCount=s.bb,t._OrtGetInputOutputMetadata=s.cb,t._OrtFree=s.db,t._OrtCreateTensor=s.eb,t._OrtGetTensorData=s.fb,t._OrtReleaseTensor=s.gb,t._OrtCreateRunOptions=s.hb,t._OrtAddRunConfigEntry=s.ib,t._OrtReleaseRunOptions=s.jb,t._OrtCreateBinding=s.kb,t._OrtBindInput=s.lb,t._OrtBindOutput=s.mb,t._OrtClearBoundOutputs=s.nb,t._OrtReleaseBinding=s.ob,t._OrtRunWithBinding=s.pb,t._OrtRun=s.qb,t._OrtEndProfiling=s.rb,st=s.sb,Kn=t._free=s.tb,er=t._malloc=s.ub,zt=s.xb,tr=s.yb,nr=s.zb,rr=s.Ab,Ht=s.Bb,or=s.Cb,ar=s.Db,C=s.Eb,Je=s.Fb,sr=s.Gb,P=s.Hb,jt=s.Ib,U=s.Jb,ir=s.Kb,Vt=s.Lb,ur=s.Mb,fr=s.Nb,cr=s.wb,b=f,Ee}var r,i=q();return t.instantiateWasm?new Promise(s=>{t.instantiateWasm(i,(f,p)=>{s(e(f,p))})}):o?e(new WebAssembly.Instance(b,q()),b):(K??=t.locateFile?t.locateFile?t.locateFile("ort-wasm-simd-threaded.wasm",h):h+"ort-wasm-simd-threaded.wasm":new URL("ort-wasm-simd-threaded.wasm",import.meta.url).href,r=await(async function(s){var f=K;if(!g&&!k(f))try{var p=fetch(f,{credentials:"same-origin"});return await WebAssembly.instantiateStreaming(p,s)}catch(E){N(`wasm streaming compile failed: ${E}`),N("falling back to ArrayBuffer instantiation")}return(async function(E,S){try{var x=await(async function(R){if(!g)try{var X=await d(R);return new Uint8Array(X)}catch{}if(R==K&&g)R=new Uint8Array(g);else{if(!c)throw"both async and sync fetching of the wasm failed";R=c(R)}return R})(E);return await WebAssembly.instantiate(x,S)}catch(R){N(`failed to asynchronously prepare wasm: ${R}`),H(R)}})(f,s)})(i),e(r.instance,r.module))}class Se{name="ExitStatus";constructor(r){this.message=`Program terminated with exit(${r})`,this.status=r}}var ve=e=>{e.terminate(),e.onmessage=()=>{}},Ve=[],Re=0,te=null,ue=e=>{ce.length==0&&(yn(),bn(ce[0]));var r=ce.pop();if(!r)return 6;Ne.push(r),Oe[e.Ob]=r,r.Ob=e.Ob;var i={Pb:"run",bc:e.ac,Tb:e.Tb,Ob:e.Ob};return r.postMessage(i,e.Xb),0},se=0,L=(e,r,...i)=>{var s,f=16*i.length,p=U(),E=jt(f),S=E>>>3;for(s of i)typeof s=="bigint"?((w(),A)[S++>>>0]=1n,(w(),A)[S++>>>0]=s):((w(),A)[S++>>>0]=0n,(w(),me)[S++>>>0]=s);return e=nr(e,0,f,E,r),P(p),e};function V(e){if(o)return L(0,1,e);if(y=e,!(0<se)){for(var r of Ne)ve(r);for(r of ce)ve(r);ce=[],Ne=[],Oe={},_=!0}l(0,new Se(e))}function fe(e){if(o)return L(1,0,e);ye(e)}var ye=e=>{if(y=e,o)throw fe(e),"unwind";V(e)},ce=[],Ne=[],mn=[],Oe={},hn=e=>{var r=e.Ob;delete Oe[r],ce.push(e),Ne.splice(Ne.indexOf(e),1),e.Ob=0,rr(r)};function wn(){mn.forEach(e=>e())}var bn=e=>new Promise(r=>{e.onmessage=f=>{var p=f.data;if(f=p.Pb,p.Sb&&p.Sb!=st()){var E=Oe[p.Sb];E?E.postMessage(p,p.Xb):N(`Internal error! Worker sent a message "${f}" to target pthread ${p.Sb}, but that thread no longer exists!`)}else f==="checkMailbox"?rt():f==="spawnThread"?ue(p):f==="cleanupThread"?Rt(()=>{hn(Oe[p.cc])}):f==="loaded"?(e.loaded=!0,r(e)):p.target==="setimmediate"?e.postMessage(p):f==="uncaughtException"?e.onerror(p.error):f==="callHandler"?t[p.Yb](...p.args):f&&N(`worker sent an unknown command ${f}`)},e.onerror=f=>{throw N(`worker sent an error! ${f.filename}:${f.lineno}: ${f.message}`),f};var i,s=[];for(i of[])t.propertyIsEnumerable(i)&&s.push(i);e.postMessage({Pb:"load",Zb:s,dc:ge,ec:b})});function yn(){var e=new Worker((()=>{let r=URL;return import.meta.url>"file:"&&import.meta.url<"file;"?new r("ort.wasm.bundle.min.mjs",import.meta.url):new URL(import.meta.url)})(),{type:"module",workerData:"em-pthread",name:"em-pthread"});ce.push(e)}var ge,gn=[],M=e=>{var r=gn[e];return r||(gn[e]=r=cr.get(e)),r},Ao=(e,r)=>{se=0,e=M(e)(r),0<se?y=e:Ht(e)},tt=[],nt=0;function Io(e){var r=new xt(e>>>=0);return(w(),j)[r.Qb+12>>>0]==0&&(En(r,!0),nt--),Tn(r,!1),tt.push(r),fr(e)}var Fe=0,Bo=()=>{C(0,0);var e=tt.pop();ir(e.Ub),Fe=0};function En(e,r){r=r?1:0,(w(),j)[e.Qb+12>>>0]=r}function Tn(e,r){r=r?1:0,(w(),j)[e.Qb+13>>>0]=r}class xt{constructor(r){this.Ub=r,this.Qb=r-24}}var Ct=e=>{var r=Fe;if(!r)return Je(0),0;var i=new xt(r);(w(),W)[i.Qb+16>>>2>>>0]=r;var s=(w(),W)[i.Qb+4>>>2>>>0];if(!s)return Je(0),r;for(var f of e){if(f===0||f===s)break;if(ur(f,s,i.Qb+16))return Je(f),r}return Je(s),r};function Lo(){return Ct([])}function _o(e){return Ct([e>>>0])}function Po(e,r,i,s){return Ct([e>>>0,r>>>0,i>>>0,s>>>0])}var Do=()=>{var e=tt.pop();e||H("no exception to throw");var r=e.Ub;throw(w(),j)[e.Qb+13>>>0]==0&&(tt.push(e),Tn(e,!0),En(e,!1),nt++),Vt(r),Fe=r};function Uo(e,r,i){var s=new xt(e>>>=0);throw r>>>=0,i>>>=0,(w(),W)[s.Qb+16>>>2>>>0]=0,(w(),W)[s.Qb+4>>>2>>>0]=r,(w(),W)[s.Qb+8>>>2>>>0]=i,Vt(e),nt++,Fe=e}var xo=()=>nt;function Sn(e,r,i,s){return o?L(2,1,e,r,i,s):vn(e,r,i,s)}function vn(e,r,i,s){if(e>>>=0,r>>>=0,i>>>=0,s>>>=0,!globalThis.SharedArrayBuffer)return 6;var f=[];return o&&f.length===0?Sn(e,r,i,s):(e={ac:i,Ob:e,Tb:s,Xb:f},o?(e.Pb="spawnThread",postMessage(e,f),0):ue(e))}function Co(e){throw Fe||=e>>>0,Fe}var On=globalThis.TextDecoder&&new TextDecoder,An=(e,r=0,i,s)=>{var f=r>>>=0;if(i=f+i,s)s=i;else{for(;e[f]&&!(f>=i);)++f;s=f}if(16<s-r&&e.buffer&&On)return On.decode(e.buffer instanceof ArrayBuffer?e.subarray(r,s):e.slice(r,s));for(f="";r<s;)if(128&(i=e[r++])){var p=63&e[r++];if((224&i)==192)f+=String.fromCharCode((31&i)<<6|p);else{var E=63&e[r++];65536>(i=(240&i)==224?(15&i)<<12|p<<6|E:(7&i)<<18|p<<12|E<<6|63&e[r++])?f+=String.fromCharCode(i):(i-=65536,f+=String.fromCharCode(55296|i>>10,56320|1023&i))}}else f+=String.fromCharCode(i);return f},Mt=(e,r,i)=>(e>>>=0)?An((w(),ne),e,r,i):"";function In(e,r,i){return o?L(3,1,e,r,i):0}function Bn(e,r){if(o)return L(4,1,e,r)}function Ln(e,r){if(o)return L(5,1,e,r)}function _n(e,r,i){if(o)return L(6,1,e,r,i)}function Pn(e,r,i){return o?L(7,1,e,r,i):0}function Dn(e,r){if(o)return L(8,1,e,r)}function Un(e,r,i){if(o)return L(9,1,e,r,i)}function xn(e,r,i,s){if(o)return L(10,1,e,r,i,s)}function Cn(e,r,i,s){if(o)return L(11,1,e,r,i,s)}function Mn(e,r,i,s){if(o)return L(12,1,e,r,i,s)}function Rn(e){if(o)return L(13,1,e)}function Nn(e,r){if(o)return L(14,1,e,r)}function Fn(e,r,i){if(o)return L(15,1,e,r,i)}var Mo=()=>H("");function Ro(e){zt(e>>>0,!u,1,!a,131072,!1),wn()}var Rt=e=>{if(!_)try{if(e(),!(0<se))try{o?st()&&Ht(y):ye(y)}catch(r){r instanceof Se||r=="unwind"||l(0,r)}}catch(r){r instanceof Se||r=="unwind"||l(0,r)}},No=!Atomics.waitAsync||globalThis.navigator?.userAgent&&91>Number((navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)||[])[2]);function Nt(e){e>>>=0,No||(Atomics.waitAsync((w(),B),e>>>2,e).value.then(rt),e+=128,Atomics.store((w(),B),e>>>2,1))}var rt=()=>Rt(()=>{var e=st();e&&(Nt(e),ar())});function Fo(e,r){(e>>>=0)==r>>>0?setTimeout(rt):o?postMessage({Sb:e,Pb:"checkMailbox"}):(e=Oe[e])&&e.postMessage({Pb:"checkMailbox"})}var Ft=[];function ko(e,r,i,s,f){for(r>>>=0,f>>>=0,Ft.length=0,i=f>>>3,s=f+s>>>3;i<s;){var p;p=(w(),A)[i++>>>0]?(w(),A)[i++>>>0]:(w(),me)[i++>>>0],Ft.push(p)}return(r?lr[r]:ua[e])(...Ft)}var Wo=()=>{se=0};function Go(e){e>>>=0,o?postMessage({Pb:"cleanupThread",cc:e}):hn(Oe[e])}function $o(e){}function zo(e,r){e=-9007199254740992>e||9007199254740992<e?NaN:Number(e),r>>>=0,e=new Date(1e3*e),(w(),B)[r>>>2>>>0]=e.getUTCSeconds(),(w(),B)[r+4>>>2>>>0]=e.getUTCMinutes(),(w(),B)[r+8>>>2>>>0]=e.getUTCHours(),(w(),B)[r+12>>>2>>>0]=e.getUTCDate(),(w(),B)[r+16>>>2>>>0]=e.getUTCMonth(),(w(),B)[r+20>>>2>>>0]=e.getUTCFullYear()-1900,(w(),B)[r+24>>>2>>>0]=e.getUTCDay(),e=(e.getTime()-Date.UTC(e.getUTCFullYear(),0,1,0,0,0,0))/864e5|0,(w(),B)[r+28>>>2>>>0]=e}var kn=e=>e%4==0&&(e%100!=0||e%400==0),Wn=[0,31,60,91,121,152,182,213,244,274,305,335],Gn=[0,31,59,90,120,151,181,212,243,273,304,334];function Ho(e,r){e=-9007199254740992>e||9007199254740992<e?NaN:Number(e),r>>>=0,e=new Date(1e3*e),(w(),B)[r>>>2>>>0]=e.getSeconds(),(w(),B)[r+4>>>2>>>0]=e.getMinutes(),(w(),B)[r+8>>>2>>>0]=e.getHours(),(w(),B)[r+12>>>2>>>0]=e.getDate(),(w(),B)[r+16>>>2>>>0]=e.getMonth(),(w(),B)[r+20>>>2>>>0]=e.getFullYear()-1900,(w(),B)[r+24>>>2>>>0]=e.getDay();var i=(kn(e.getFullYear())?Wn:Gn)[e.getMonth()]+e.getDate()-1|0;(w(),B)[r+28>>>2>>>0]=i,(w(),B)[r+36>>>2>>>0]=-60*e.getTimezoneOffset(),i=new Date(e.getFullYear(),6,1).getTimezoneOffset();var s=new Date(e.getFullYear(),0,1).getTimezoneOffset();e=0|(i!=s&&e.getTimezoneOffset()==Math.min(s,i)),(w(),B)[r+32>>>2>>>0]=e}function jo(e){e>>>=0;var r=new Date((w(),B)[e+20>>>2>>>0]+1900,(w(),B)[e+16>>>2>>>0],(w(),B)[e+12>>>2>>>0],(w(),B)[e+8>>>2>>>0],(w(),B)[e+4>>>2>>>0],(w(),B)[e>>>2>>>0],0),i=(w(),B)[e+32>>>2>>>0],s=r.getTimezoneOffset(),f=new Date(r.getFullYear(),6,1).getTimezoneOffset(),p=new Date(r.getFullYear(),0,1).getTimezoneOffset(),E=Math.min(p,f);return 0>i?(w(),B)[e+32>>>2>>>0]=+(f!=p&&E==s):0<i!=(E==s)&&(f=Math.max(p,f),r.setTime(r.getTime()+6e4*((0<i?E:f)-s))),(w(),B)[e+24>>>2>>>0]=r.getDay(),i=(kn(r.getFullYear())?Wn:Gn)[r.getMonth()]+r.getDate()-1|0,(w(),B)[e+28>>>2>>>0]=i,(w(),B)[e>>>2>>>0]=r.getSeconds(),(w(),B)[e+4>>>2>>>0]=r.getMinutes(),(w(),B)[e+8>>>2>>>0]=r.getHours(),(w(),B)[e+12>>>2>>>0]=r.getDate(),(w(),B)[e+16>>>2>>>0]=r.getMonth(),(w(),B)[e+20>>>2>>>0]=r.getYear(),e=r.getTime(),BigInt(isNaN(e)?-1:e/1e3)}function $n(e,r,i,s,f,p,E){return o?L(16,1,e,r,i,s,f,p,E):-52}function zn(e,r,i,s,f,p){if(o)return L(17,1,e,r,i,s,f,p)}var Ye={},Vo=()=>performance.timeOrigin+performance.now();function Hn(e,r){if(o)return L(18,1,e,r);if(Ye[e]&&(clearTimeout(Ye[e].id),delete Ye[e]),!r)return 0;var i=setTimeout(()=>{delete Ye[e],Rt(()=>or(e,performance.timeOrigin+performance.now()))},r);return Ye[e]={id:i,jc:r},0}var Ae=(e,r,i)=>{var s=(w(),ne);if(r>>>=0,0<i){var f=r;i=r+i-1;for(var p=0;p<e.length;++p){var E=e.codePointAt(p);if(127>=E){if(r>=i)break;s[r++>>>0]=E}else if(2047>=E){if(r+1>=i)break;s[r++>>>0]=192|E>>6,s[r++>>>0]=128|63&E}else if(65535>=E){if(r+2>=i)break;s[r++>>>0]=224|E>>12,s[r++>>>0]=128|E>>6&63,s[r++>>>0]=128|63&E}else{if(r+3>=i)break;s[r++>>>0]=240|E>>18,s[r++>>>0]=128|E>>12&63,s[r++>>>0]=128|E>>6&63,s[r++>>>0]=128|63&E,p++}}s[r>>>0]=0,e=r-f}else e=0;return e};function Yo(e,r,i,s){e>>>=0,r>>>=0,i>>>=0,s>>>=0;var f=new Date().getFullYear(),p=new Date(f,0,1).getTimezoneOffset();f=new Date(f,6,1).getTimezoneOffset();var E=Math.max(p,f);(w(),W)[e>>>2>>>0]=60*E,(w(),B)[r>>>2>>>0]=+(p!=f),e=(r=S=>{var x=Math.abs(S);return`UTC${0<=S?"-":"+"}${String(Math.floor(x/60)).padStart(2,"0")}${String(x%60).padStart(2,"0")}`})(p),r=r(f),f<p?(Ae(e,i,17),Ae(r,s,17)):(Ae(e,s,17),Ae(r,i,17))}var Jo=()=>Date.now(),qo=1;function Xo(e,r,i){if(i>>>=0,!(0<=e&&3>=e))return 28;if(e===0)e=Date.now();else{if(!qo)return 52;e=performance.timeOrigin+performance.now()}return e=Math.round(1e6*e),(w(),A)[i>>>3>>>0]=BigInt(e),0}var kt=[];function Qo(e,r,i){e>>>=0,r>>>=0,i>>>=0,kt.length=0;for(var s;s=(w(),ne)[r++>>>0];){var f=s!=105;i+=(f&=s!=112)&&i%8?4:0,kt.push(s==112?(w(),W)[i>>>2>>>0]:s==106?(w(),A)[i>>>3>>>0]:s==105?(w(),B)[i>>>2>>>0]:(w(),me)[i>>>3>>>0]),i+=f?8:4}return lr[e](...kt)}var Zo=()=>{};function Ko(e,r){return N(Mt(e>>>0,r>>>0))}var ea=()=>{throw se+=1,"unwind"};function ta(){return 4294901760}var na=()=>navigator.hardwareConcurrency,Ie={},Wt=e=>{for(var r=0,i=0;i<e.length;++i){var s=e.charCodeAt(i);127>=s?r++:2047>=s?r+=2:55296<=s&&57343>=s?(r+=4,++i):r+=3}return r},ot=e=>{var r;return(r=/\bwasm-function\[\d+\]:(0x[0-9a-f]+)/.exec(e))?+r[1]:(r=/:(\d+):\d+(?:\)|$)/.exec(e))?2147483648|+r[1]:0},jn=e=>{for(var r of e)(e=ot(r))&&(Ie[e]=r)};function ra(){var e=Error().stack.toString().split(`
+`);return e[0]=="Error"&&e.shift(),jn(e),Ie.Vb=ot(e[3]),Ie.$b=e,Ie.Vb}function at(e){if(!(e=Ie[e>>>0]))return 0;var r;if(r=/^\s+at .*\.wasm\.(.*) \(.*\)$/.exec(e))e=r[1];else if(r=/^\s+at (.*) \(.*\)$/.exec(e))e=r[1];else{if(!(r=/^(.+?)@/.exec(e)))return 0;e=r[1]}Kn(at.Wb??0),r=Wt(e)+1;var i=er(r);return i&&Ae(e,i,r),at.Wb=i,at.Wb}function oa(e){e>>>=0;var r=(w(),ne).length;if(e<=r||4294901760<e)return!1;for(var i=1;4>=i;i*=2){var s=r*(1+.2/i);s=Math.min(s,e+100663296);e:{s=(Math.min(4294901760,65536*Math.ceil(Math.max(e,s)/65536))-ge.buffer.byteLength+65535)/65536|0;try{ge.grow(s),ee();var f=1;break e}catch{}f=void 0}if(f)return!0}return!1}function aa(e,r,i){if(e>>>=0,r>>>=0,Ie.Vb==e)var s=Ie.$b;else(s=Error().stack.toString().split(`
+`))[0]=="Error"&&s.shift(),jn(s);for(var f=3;s[f]&&ot(s[f])!=e;)++f;for(e=0;e<i&&s[e+f];++e)(w(),B)[r+4*e>>>2>>>0]=ot(s[e+f]);return e}var Gt,$t={},Vn=()=>{if(!Gt){var e,r={USER:"web_user",LOGNAME:"web_user",PATH:"/",PWD:"/",HOME:"/home/web_user",LANG:(globalThis.navigator?.language??"C").replace("-","_")+".UTF-8",_:"./this.program"};for(e in $t)$t[e]===void 0?delete r[e]:r[e]=$t[e];var i=[];for(e in r)i.push(`${e}=${r[e]}`);Gt=i}return Gt};function Yn(e,r){if(o)return L(19,1,e,r);e>>>=0,r>>>=0;var i,s=0,f=0;for(i of Vn()){var p=r+s;(w(),W)[e+f>>>2>>>0]=p,s+=Ae(i,p,1/0)+1,f+=4}return 0}function Jn(e,r){if(o)return L(20,1,e,r);e>>>=0,r>>>=0;var i=Vn();for(var s of((w(),W)[e>>>2>>>0]=i.length,e=0,i))e+=Wt(s)+1;return(w(),W)[r>>>2>>>0]=e,0}function qn(e){return o?L(21,1,e):52}function Xn(e,r,i,s){return o?L(22,1,e,r,i,s):52}function Qn(e,r,i,s){return o?L(23,1,e,r,i,s):70}var sa=[null,[],[]];function Zn(e,r,i,s){if(o)return L(24,1,e,r,i,s);r>>>=0,i>>>=0,s>>>=0;for(var f=0,p=0;p<i;p++){var E=(w(),W)[r>>>2>>>0],S=(w(),W)[r+4>>>2>>>0];r+=8;for(var x=0;x<S;x++){var R=e,X=(w(),ne)[E+x>>>0],le=sa[R];X===0||X===10?((R===1?O:N)(An(le)),le.length=0):le.push(X)}f+=S}return(w(),W)[s>>>2>>>0]=f,0}function ia(e){return e>>>0}o||(function(){for(var e=t.numThreads-1;e--;)yn();Ve.push(async()=>{var r=(async function(){if(!o)return Promise.all(ce.map(bn))})();Re++,await r,--Re==0&&te&&(r=te,te=null,r())})})(),o||(ge=new WebAssembly.Memory({initial:256,maximum:65536,shared:!0}),ee()),t.wasmBinary&&(g=t.wasmBinary),t.stackSave=()=>U(),t.stackRestore=e=>P(e),t.stackAlloc=e=>jt(e),t.setValue=function(e,r,i="i8"){switch(i.endsWith("*")&&(i="*"),i){case"i1":case"i8":(w(),j)[e>>>0]=r;break;case"i16":(w(),pe)[e>>>1>>>0]=r;break;case"i32":(w(),B)[e>>>2>>>0]=r;break;case"i64":(w(),A)[e>>>3>>>0]=BigInt(r);break;case"float":(w(),re)[e>>>2>>>0]=r;break;case"double":(w(),me)[e>>>3>>>0]=r;break;case"*":(w(),W)[e>>>2>>>0]=r;break;default:H(`invalid type for setValue: ${i}`)}},t.getValue=function(e,r="i8"){switch(r.endsWith("*")&&(r="*"),r){case"i1":case"i8":return(w(),j)[e>>>0];case"i16":return(w(),pe)[e>>>1>>>0];case"i32":return(w(),B)[e>>>2>>>0];case"i64":return(w(),A)[e>>>3>>>0];case"float":return(w(),re)[e>>>2>>>0];case"double":return(w(),me)[e>>>3>>>0];case"*":return(w(),W)[e>>>2>>>0];default:H(`invalid type for getValue: ${r}`)}},t.UTF8ToString=Mt,t.stringToUTF8=Ae,t.lengthBytesUTF8=Wt;var st,Kn,er,zt,tr,nr,rr,Ht,or,ar,C,Je,sr,P,jt,U,ir,Vt,ur,fr,cr,Ee,ua=[V,fe,Sn,In,Bn,Ln,_n,Pn,Dn,Un,xn,Cn,Mn,Rn,Nn,Fn,$n,zn,Hn,Yn,Jn,qn,Xn,Qn,Zn],lr={960468:(e,r,i,s,f)=>{if(t===void 0||!t.Rb)return 1;if((e=Mt(Number(e>>>0))).startsWith("./")&&(e=e.substring(2)),!(e=t.Rb.get(e)))return 2;if(r=Number(r>>>0),i=Number(i>>>0),s=Number(s>>>0),r+i>e.byteLength)return 3;try{let p=e.subarray(r,r+i);switch(f){case 0:(w(),ne).set(p,s>>>0);break;case 1:t.fc?t.fc(s,p):t.ic(s,p);break;default:return 4}return 0}catch{return 4}},961292:()=>typeof wasmOffsetConverter<"u"};function fa(){return typeof wasmOffsetConverter<"u"}function ca(e,r,i,s){var f=U();try{return M(e)(r,i,s)}catch(p){if(P(f),p!==p+0)throw p;C(1,0)}}function la(e,r,i){var s=U();try{return M(e)(r,i)}catch(f){if(P(s),f!==f+0)throw f;C(1,0)}}function da(e){var r=U();try{M(e)()}catch(i){if(P(r),i!==i+0)throw i;C(1,0)}}function pa(e,r){var i=U();try{return M(e)(r)}catch(s){if(P(i),s!==s+0)throw s;C(1,0)}}function ma(e,r,i){var s=U();try{M(e)(r,i)}catch(f){if(P(s),f!==f+0)throw f;C(1,0)}}function ha(e,r){var i=U();try{M(e)(r)}catch(s){if(P(i),s!==s+0)throw s;C(1,0)}}function wa(e,r,i,s,f,p,E){var S=U();try{return M(e)(r,i,s,f,p,E)}catch(x){if(P(S),x!==x+0)throw x;C(1,0)}}function ba(e,r,i,s,f,p){var E=U();try{M(e)(r,i,s,f,p)}catch(S){if(P(E),S!==S+0)throw S;C(1,0)}}function ya(e,r,i,s){var f=U();try{M(e)(r,i,s)}catch(p){if(P(f),p!==p+0)throw p;C(1,0)}}function ga(e,r,i,s,f){var p=U();try{M(e)(r,i,s,f)}catch(E){if(P(p),E!==E+0)throw E;C(1,0)}}function Ea(e,r,i,s,f,p,E){var S=U();try{M(e)(r,i,s,f,p,E)}catch(x){if(P(S),x!==x+0)throw x;C(1,0)}}function Ta(e,r,i,s,f,p,E){var S=U();try{M(e)(r,i,s,f,p,E)}catch(x){if(P(S),x!==x+0)throw x;C(1,0)}}function Sa(e,r,i,s,f,p,E,S){var x=U();try{M(e)(r,i,s,f,p,E,S)}catch(R){if(P(x),R!==R+0)throw R;C(1,0)}}function va(e,r,i,s,f){var p=U();try{return M(e)(r,i,s,f)}catch(E){if(P(p),E!==E+0)throw E;C(1,0)}}function Oa(e,r,i){var s=U();try{return M(e)(r,i)}catch(f){if(P(s),f!==f+0)throw f;C(1,0)}}function Aa(e,r,i,s,f,p,E,S){var x=U();try{M(e)(r,i,s,f,p,E,S)}catch(R){if(P(x),R!==R+0)throw R;C(1,0)}}function Ia(e,r,i,s,f,p,E,S,x,R,X,le){var we=U();try{M(e)(r,i,s,f,p,E,S,x,R,X,le)}catch(be){if(P(we),be!==be+0)throw be;C(1,0)}}function Ba(e,r,i,s,f,p){var E=U();try{return M(e)(r,i,s,f,p)}catch(S){if(P(E),S!==S+0)throw S;C(1,0)}}function La(e,r,i){var s=U();try{return M(e)(r,i)}catch(f){if(P(s),f!==f+0)throw f;return C(1,0),0n}}function _a(e,r,i,s,f,p,E,S,x){var R=U();try{M(e)(r,i,s,f,p,E,S,x)}catch(X){if(P(R),X!==X+0)throw X;C(1,0)}}function Pa(e){var r=U();try{return M(e)()}catch(i){if(P(r),i!==i+0)throw i;C(1,0)}}function Da(e,r){var i=U();try{return M(e)(r)}catch(s){if(P(i),s!==s+0)throw s;return C(1,0),0n}}function Ua(e){var r=U();try{return M(e)()}catch(i){if(P(r),i!==i+0)throw i;return C(1,0),0n}}function xa(e,r,i,s){var f=U();try{return M(e)(r,i,s)}catch(p){if(P(f),p!==p+0)throw p;C(1,0)}}function Ca(e,r,i,s,f){var p=U();try{return M(e)(r,i,s,f)}catch(E){if(P(p),E!==E+0)throw E;C(1,0)}}function Ma(e,r,i,s,f,p){var E=U();try{return M(e)(r,i,s,f,p)}catch(S){if(P(E),S!==S+0)throw S;C(1,0)}}function Ra(e,r,i,s,f,p){var E=U();try{return M(e)(r,i,s,f,p)}catch(S){if(P(E),S!==S+0)throw S;C(1,0)}}function Na(e,r,i,s,f,p,E,S){var x=U();try{return M(e)(r,i,s,f,p,E,S)}catch(R){if(P(x),R!==R+0)throw R;C(1,0)}}function Fa(e,r,i,s,f){var p=U();try{return M(e)(r,i,s,f)}catch(E){if(P(p),E!==E+0)throw E;return C(1,0),0n}}function ka(e,r,i,s){var f=U();try{return M(e)(r,i,s)}catch(p){if(P(f),p!==p+0)throw p;C(1,0)}}function Wa(e,r,i,s){var f=U();try{return M(e)(r,i,s)}catch(p){if(P(f),p!==p+0)throw p;C(1,0)}}function Ga(e,r,i,s,f,p,E,S,x,R,X,le){var we=U();try{return M(e)(r,i,s,f,p,E,S,x,R,X,le)}catch(be){if(P(we),be!==be+0)throw be;C(1,0)}}function $a(e,r,i,s,f,p,E,S,x,R,X){var le=U();try{M(e)(r,i,s,f,p,E,S,x,R,X)}catch(we){if(P(le),we!==we+0)throw we;C(1,0)}}function za(e,r,i,s,f,p,E,S,x,R,X,le,we,be,Ya,Ja){var qa=U();try{M(e)(r,i,s,f,p,E,S,x,R,X,le,we,be,Ya,Ja)}catch(Yt){if(P(qa),Yt!==Yt+0)throw Yt;C(1,0)}}function Ha(e,r,i){var s=U();try{return M(e)(r,i)}catch(f){if(P(s),f!==f+0)throw f;C(1,0)}}function ja(e,r,i){var s=U();try{return M(e)(r,i)}catch(f){if(P(s),f!==f+0)throw f;C(1,0)}}function Va(e,r,i,s){var f=U();try{M(e)(r,i,s)}catch(p){if(P(f),p!==p+0)throw p;C(1,0)}}function it(){if(0<Re)te=it;else if(o)T?.(t),he();else{for(var e=Ve;0<e.length;)e.shift()(t);0<Re?te=it:(t.calledRun=!0,_||(he(),T?.(t)))}}return o||(Ee=await Ut(),it()),t.PTR_SIZE=4,je?t:new Promise((e,r)=>{T=e,I=r})}var rs,os,Jr=F(()=>{"use strict";rs=Vr,os=globalThis.self?.name?.startsWith("em-pthread");os&&Vr()});var Qr,an,as,oe,Zr,on,ss,is,Kr,us,qr,eo,Xr,to,pt=F(()=>{"use strict";dt();Qr=typeof location>"u"?void 0:location.origin,an=import.meta.url>"file:"&&import.meta.url<"file;",as=()=>{if(!!1){if(an){let n=URL;return new URL(new n("ort.wasm.bundle.min.mjs",import.meta.url).href,Qr).href}return import.meta.url}},oe=as(),Zr=()=>{if(oe&&!oe.startsWith("blob:"))return oe.substring(0,oe.lastIndexOf("/")+1)},on=(n,t)=>{try{let a=t??oe;return(a?new URL(n,a):new URL(n)).origin===Qr}catch{return!1}},ss=(n,t)=>{let a=t??oe;try{return(a?new URL(n,a):new URL(n)).href}catch{return}},is=(n,t)=>`${t??"./"}${n}`,Kr=async n=>{let a=await(await fetch(n,{credentials:"same-origin"})).blob();return URL.createObjectURL(a)},us=async n=>(await import(/*webpackIgnore:true*/ /*@vite-ignore*/n)).default,qr=(jr(),Xt(Hr)).default,eo=async()=>{if(!oe)throw new Error("Failed to load proxy worker: cannot determine the script source URL.");if(on(oe))return[void 0,qr()];let n=await Kr(oe);return[n,qr(n)]},Xr=(Jr(),Xt(Yr)).default,to=async(n,t,a,u)=>{let o=Xr&&!(n||t);if(o)if(oe)o=on(oe)||u&&!a;else if(u&&!a)o=!0;else throw new Error("cannot determine the script source URL.");if(o)return[void 0,Xr];{let d="ort-wasm-simd-threaded.mjs",c=n??ss(d,t),l=!!1&&a&&c&&!on(c,t),m=l?await Kr(c):c??is(d,t);return[l?m:void 0,await us(m)]}}});var sn,un,St,no,fs,cs,ls,mt,$,xe=F(()=>{"use strict";pt();un=!1,St=!1,no=!1,fs=()=>{if(typeof SharedArrayBuffer>"u")return!1;try{return typeof MessageChannel<"u"&&new MessageChannel().port1.postMessage(new SharedArrayBuffer(1)),WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,5,4,1,3,1,1,10,11,1,9,0,65,0,254,16,2,0,26,11]))}catch{return!1}},cs=()=>{try{return WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,4,1,96,0,0,3,2,1,0,10,30,1,28,0,65,0,253,15,253,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,253,186,1,26,11]))}catch{return!1}},ls=()=>{try{return WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,19,1,17,0,65,1,253,15,65,2,253,15,65,3,253,15,253,147,2,11]))}catch{return!1}},mt=async n=>{if(un)return Promise.resolve();if(St)throw new Error("multiple calls to 'initializeWebAssembly()' detected.");if(no)throw new Error("previous call to 'initializeWebAssembly()' failed.");St=!0;let t=n.initTimeout,a=n.numThreads;if(n.simd!==!1){if(n.simd==="relaxed"){if(!ls())throw new Error("Relaxed WebAssembly SIMD is not supported in the current environment.")}else if(!cs())throw new Error("WebAssembly SIMD is not supported in the current environment.")}let u=fs();a>1&&!u&&(typeof self<"u"&&!self.crossOriginIsolated&&console.warn("env.wasm.numThreads is set to "+a+", but this will not work unless you enable crossOriginIsolated mode. See https://web.dev/cross-origin-isolation-guide/ for more info."),console.warn("WebAssembly multi-threading is not supported in the current environment. Falling back to single-threading."),n.numThreads=a=1);let o=n.wasmPaths,d=typeof o=="string"?o:void 0,c=o?.mjs,l=c?.href??c,m=o?.wasm,h=m?.href??m,g=n.wasmBinary,[b,y]=await to(l,d,a>1,!!g||!!h),T=!1,I=[];if(t>0&&I.push(new Promise(D=>{setTimeout(()=>{T=!0,D()},t)})),I.push(new Promise((D,z)=>{let v={numThreads:a};if(g)v.wasmBinary=g,v.locateFile=O=>O;else if(h||d)v.locateFile=O=>h??d+O;else if(l&&l.indexOf("blob:")!==0)v.locateFile=O=>new URL(O,l).href;else if(b){let O=Zr();O&&(v.locateFile=N=>O+N)}y(v).then(O=>{St=!1,un=!0,sn=O,D(),b&&URL.revokeObjectURL(b)},O=>{St=!1,no=!0,z(O)})})),await Promise.race(I),T)throw new Error(`WebAssembly backend initializing failed due to timeout: ${t}ms`)},$=()=>{if(un&&sn)return sn;throw new Error("WebAssembly is not initialized yet.")}});var ae,Ze,G,vt=F(()=>{"use strict";xe();ae=(n,t)=>{let a=$(),u=a.lengthBytesUTF8(n)+1,o=a._malloc(u);return a.stringToUTF8(n,o,u),t.push(o),o},Ze=(n,t,a,u)=>{if(typeof n=="object"&&n!==null){if(a.has(n))throw new Error("Circular reference in options");a.add(n)}Object.entries(n).forEach(([o,d])=>{let c=t?t+o:o;if(typeof d=="object")Ze(d,c+".",a,u);else if(typeof d=="string"||typeof d=="number")u(c,d.toString());else if(typeof d=="boolean")u(c,d?"1":"0");else throw new Error(`Can't handle extra config type: ${typeof d}`)})},G=n=>{let t=$(),a=t.stackSave();try{let u=t.PTR_SIZE,o=t.stackAlloc(2*u);t._OrtGetLastError(o,o+u);let d=Number(t.getValue(o,u===4?"i32":"i64")),c=t.getValue(o+u,"*"),l=c?t.UTF8ToString(c):"";throw new Error(`${n} ERROR_CODE: ${d}, ERROR_MESSAGE: ${l}`)}finally{t.stackRestore(a)}}});var ro,oo=F(()=>{"use strict";xe();vt();ro=n=>{let t=$(),a=0,u=[],o=n||{};try{if(n?.logSeverityLevel===void 0)o.logSeverityLevel=2;else if(typeof n.logSeverityLevel!="number"||!Number.isInteger(n.logSeverityLevel)||n.logSeverityLevel<0||n.logSeverityLevel>4)throw new Error(`log severity level is not valid: ${n.logSeverityLevel}`);if(n?.logVerbosityLevel===void 0)o.logVerbosityLevel=0;else if(typeof n.logVerbosityLevel!="number"||!Number.isInteger(n.logVerbosityLevel))throw new Error(`log verbosity level is not valid: ${n.logVerbosityLevel}`);n?.terminate===void 0&&(o.terminate=!1);let d=0;return n?.tag!==void 0&&(d=ae(n.tag,u)),a=t._OrtCreateRunOptions(o.logSeverityLevel,o.logVerbosityLevel,!!o.terminate,d),a===0&&G("Can't create run options."),n?.extra!==void 0&&Ze(n.extra,"",new WeakSet,(c,l)=>{let m=ae(c,u),h=ae(l,u);t._OrtAddRunConfigEntry(a,m,h)!==0&&G(`Can't set a run config entry: ${c} - ${l}.`)}),[a,u]}catch(d){throw a!==0&&t._OrtReleaseRunOptions(a),u.forEach(c=>t._free(c)),d}}});var ds,ps,ms,ke,hs,ao,so=F(()=>{"use strict";xe();vt();ds=n=>{switch(n){case"disabled":return 0;case"basic":return 1;case"extended":return 2;case"layout":return 3;case"all":return 99;default:throw new Error(`unsupported graph optimization level: ${n}`)}},ps=n=>{switch(n){case"sequential":return 0;case"parallel":return 1;default:throw new Error(`unsupported execution mode: ${n}`)}},ms=n=>{n.extra||(n.extra={}),n.extra.session||(n.extra.session={});let t=n.extra.session;t.use_ort_model_bytes_directly||(t.use_ort_model_bytes_directly="1"),n.executionProviders&&n.executionProviders.some(a=>(typeof a=="string"?a:a.name)==="webgpu")&&(n.enableMemPattern=!1)},ke=(n,t,a,u)=>{let o=ae(t,u),d=ae(a,u);$()._OrtAddSessionConfigEntry(n,o,d)!==0&&G(`Can't set a session config entry: ${t} - ${a}.`)},hs=async(n,t,a)=>{let u=t.executionProviders;for(let o of u){let d=typeof o=="string"?o:o.name,c=[];switch(d){case"webnn":if(d="WEBNN",ke(n,"session.disable_quant_qdq","1",a),ke(n,"session.disable_qdq_constant_folding","1",a),typeof o!="string"){let y=o?.deviceType;y&&ke(n,"deviceType",y,a)}break;case"webgpu":if(d="JS",typeof o!="string"){let b=o;if(b?.preferredLayout){if(b.preferredLayout!=="NCHW"&&b.preferredLayout!=="NHWC")throw new Error(`preferredLayout must be either 'NCHW' or 'NHWC': ${b.preferredLayout}`);ke(n,"preferredLayout",b.preferredLayout,a)}}break;case"wasm":case"cpu":continue;default:throw new Error(`not supported execution provider: ${d}`)}let l=ae(d,a),m=c.length,h=0,g=0;if(m>0){h=$()._malloc(m*$().PTR_SIZE),a.push(h),g=$()._malloc(m*$().PTR_SIZE),a.push(g);for(let b=0;b<m;b++)$().setValue(h+b*$().PTR_SIZE,c[b][0],"*"),$().setValue(g+b*$().PTR_SIZE,c[b][1],"*")}await $()._OrtAppendExecutionProvider(n,l,h,g,m)!==0&&G(`Can't append execution provider: ${d}.`)}},ao=async n=>{let t=$(),a=0,u=[],o=n||{};ms(o);try{let d=ds(o.graphOptimizationLevel??"all"),c=ps(o.executionMode??"sequential"),l=typeof o.logId=="string"?ae(o.logId,u):0,m=o.logSeverityLevel??2;if(!Number.isInteger(m)||m<0||m>4)throw new Error(`log severity level is not valid: ${m}`);let h=o.logVerbosityLevel??0;if(!Number.isInteger(h)||h<0||h>4)throw new Error(`log verbosity level is not valid: ${h}`);let g=typeof o.optimizedModelFilePath=="string"?ae(o.optimizedModelFilePath,u):0;if(a=t._OrtCreateSessionOptions(d,!!o.enableCpuMemArena,!!o.enableMemPattern,c,!!o.enableProfiling,0,l,m,h,g),a===0&&G("Can't create session options."),o.executionProviders&&await hs(a,o,u),o.enableGraphCapture!==void 0){if(typeof o.enableGraphCapture!="boolean")throw new Error(`enableGraphCapture must be a boolean value: ${o.enableGraphCapture}`);ke(a,"enableGraphCapture",o.enableGraphCapture.toString(),u)}if(o.freeDimensionOverrides)for(let[b,y]of Object.entries(o.freeDimensionOverrides)){if(typeof b!="string")throw new Error(`free dimension override name must be a string: ${b}`);if(typeof y!="number"||!Number.isInteger(y)||y<0)throw new Error(`free dimension override value must be a non-negative integer: ${y}`);let T=ae(b,u);t._OrtAddFreeDimensionOverride(a,T,y)!==0&&G(`Can't set a free dimension override: ${b} - ${y}.`)}return o.extra!==void 0&&Ze(o.extra,"",new WeakSet,(b,y)=>{ke(a,b,y,u)}),[a,u]}catch(d){throw a!==0&&t._OrtReleaseSessionOptions(a)!==0&&G("Can't release session options."),u.forEach(c=>t._free(c)),d}}});var We,Ot,Ge,io,uo,At,It,fo,fn=F(()=>{"use strict";We=n=>{switch(n){case"int8":return 3;case"uint8":return 2;case"bool":return 9;case"int16":return 5;case"uint16":return 4;case"int32":return 6;case"uint32":return 12;case"float16":return 10;case"float32":return 1;case"float64":return 11;case"string":return 8;case"int64":return 7;case"uint64":return 13;case"int4":return 22;case"uint4":return 21;default:throw new Error(`unsupported data type: ${n}`)}},Ot=n=>{switch(n){case 3:return"int8";case 2:return"uint8";case 9:return"bool";case 5:return"int16";case 4:return"uint16";case 6:return"int32";case 12:return"uint32";case 10:return"float16";case 1:return"float32";case 11:return"float64";case 8:return"string";case 7:return"int64";case 13:return"uint64";case 22:return"int4";case 21:return"uint4";default:throw new Error(`unsupported data type: ${n}`)}},Ge=(n,t)=>{let a=[-1,4,1,1,2,2,4,8,-1,1,2,8,4,8,-1,-1,-1,-1,-1,-1,-1,.5,.5][n],u=typeof t=="number"?t:t.reduce((o,d)=>o*d,1);return a>0?Math.ceil(u*a):void 0},io=n=>{switch(n){case"float16":return typeof Float16Array<"u"?Float16Array:Uint16Array;case"float32":return Float32Array;case"uint8":return Uint8Array;case"int8":return Int8Array;case"uint16":return Uint16Array;case"int16":return Int16Array;case"int32":return Int32Array;case"bool":return Uint8Array;case"float64":return Float64Array;case"uint32":return Uint32Array;case"int64":return BigInt64Array;case"uint64":return BigUint64Array;default:throw new Error(`unsupported type: ${n}`)}},uo=n=>{switch(n){case"verbose":return 0;case"info":return 1;case"warning":return 2;case"error":return 3;case"fatal":return 4;default:throw new Error(`unsupported logging level: ${n}`)}},At=n=>n==="float32"||n==="float16"||n==="int32"||n==="int64"||n==="uint32"||n==="uint8"||n==="bool"||n==="uint4"||n==="int4",It=n=>n==="float32"||n==="float16"||n==="int32"||n==="int64"||n==="uint32"||n==="uint64"||n==="int8"||n==="uint8"||n==="bool"||n==="uint4"||n==="int4",fo=n=>{switch(n){case"none":return 0;case"cpu":return 1;case"cpu-pinned":return 2;case"texture":return 3;case"gpu-buffer":return 4;case"ml-tensor":return 5;default:throw new Error(`unsupported data location: ${n}`)}}});var Ke,cn=F(()=>{"use strict";dt();Ke=async n=>{if(typeof n=="string")if(!1)try{let{readFile:t}=qt("node:fs/promises");return new Uint8Array(await t(n))}catch(t){if(t.code==="ERR_FS_FILE_TOO_LARGE"){let{createReadStream:a}=qt("node:fs"),u=a(n),o=[];for await(let d of u)o.push(d);return new Uint8Array(Buffer.concat(o))}throw t}else{let t=await fetch(n);if(!t.ok)throw new Error(`failed to load external data file: ${n}`);let a=t.headers.get("Content-Length"),u=a?parseInt(a,10):0;if(u<1073741824)return new Uint8Array(await t.arrayBuffer());{if(!t.body)throw new Error(`failed to load external data file: ${n}, no response body.`);let o=t.body.getReader(),d;try{d=new ArrayBuffer(u)}catch(l){if(l instanceof RangeError){let m=Math.ceil(u/65536);d=new WebAssembly.Memory({initial:m,maximum:m}).buffer}else throw l}let c=0;for(;;){let{done:l,value:m}=await o.read();if(l)break;let h=m.byteLength;new Uint8Array(d,c,h).set(m),c+=h}return new Uint8Array(d,0,u)}}else return n instanceof Blob?new Uint8Array(await n.arrayBuffer()):n instanceof Uint8Array?n:new Uint8Array(n)}});var ws,ht,wt,$e,bs,co,Qe,bt,yt,lo,gt,Et,Tt,rn=F(()=>{"use strict";Te();oo();so();fn();xe();vt();cn();ws=(n,t)=>{$()._OrtInit(n,t)!==0&&G("Can't initialize onnxruntime.")},ht=async n=>{ws(n.wasm.numThreads,uo(n.logLevel))},wt=async(n,t)=>{$().asyncInit?.();let a=n.webgpu.adapter;if(t==="webgpu"){if(typeof navigator>"u"||!navigator.gpu)throw new Error("WebGPU is not supported in current environment");if(a){if(typeof a.limits!="object"||typeof a.features!="object"||typeof a.requestDevice!="function")throw new Error("Invalid GPU adapter set in `env.webgpu.adapter`. It must be a GPUAdapter object.")}else{let u=n.webgpu.powerPreference;if(u!==void 0&&u!=="low-power"&&u!=="high-performance")throw new Error(`Invalid powerPreference setting: "${u}"`);let o=n.webgpu.forceFallbackAdapter;if(o!==void 0&&typeof o!="boolean")throw new Error(`Invalid forceFallbackAdapter setting: "${o}"`);if(a=await navigator.gpu.requestAdapter({powerPreference:u,forceFallbackAdapter:o}),!a)throw new Error('Failed to get GPU adapter. You may need to enable flag "--enable-unsafe-webgpu" if you are using Chrome.')}}if(t==="webnn"&&(typeof navigator>"u"||!navigator.ml))throw new Error("WebNN is not supported in current environment")},$e=new Map,bs=n=>{let t=$(),a=t.stackSave();try{let u=t.PTR_SIZE,o=t.stackAlloc(2*u);t._OrtGetInputOutputCount(n,o,o+u)!==0&&G("Can't get session input/output count.");let c=u===4?"i32":"i64";return[Number(t.getValue(o,c)),Number(t.getValue(o+u,c))]}finally{t.stackRestore(a)}},co=(n,t)=>{let a=$(),u=a.stackSave(),o=0;try{let d=a.PTR_SIZE,c=a.stackAlloc(2*d);a._OrtGetInputOutputMetadata(n,t,c,c+d)!==0&&G("Can't get session input/output metadata.");let m=Number(a.getValue(c,"*"));o=Number(a.getValue(c+d,"*"));let h=a.HEAP32[o/4];if(h===0)return[m,0];let g=a.HEAPU32[o/4+1],b=[];for(let y=0;y<g;y++){let T=Number(a.getValue(o+8+y*d,"*"));b.push(T!==0?a.UTF8ToString(T):Number(a.getValue(o+8+(y+g)*d,"*")))}return[m,h,b]}finally{a.stackRestore(u),o!==0&&a._OrtFree(o)}},Qe=n=>{let t=$(),a=t._malloc(n.byteLength);if(a===0)throw new Error(`Can't create a session. failed to allocate a buffer of size ${n.byteLength}.`);return t.HEAPU8.set(n,a),[a,n.byteLength]},bt=async(n,t)=>{let a,u,o=$();Array.isArray(n)?[a,u]=n:n.buffer===o.HEAPU8.buffer?[a,u]=[n.byteOffset,n.byteLength]:[a,u]=Qe(n);let d=0,c=0,l=0,m=[],h=[],g=[];try{if([c,m]=await ao(t),t?.externalData&&o.mountExternalData){let _=[];for(let k of t.externalData){let w=typeof k=="string"?k:k.path;_.push(Ke(typeof k=="string"?k:k.data).then(Z=>{o.mountExternalData(w,Z)}))}await Promise.all(_)}for(let _ of t?.executionProviders??[])if((typeof _=="string"?_:_.name)==="webnn"){if(o.shouldTransferToMLTensor=!1,typeof _!="string"){let w=_,Z=w?.context,j=w?.gpuDevice,ne=w?.deviceType,pe=w?.powerPreference;Z?o.currentContext=Z:j?o.currentContext=await o.webnnCreateMLContext(j):o.currentContext=await o.webnnCreateMLContext({deviceType:ne,powerPreference:pe})}else o.currentContext=await o.webnnCreateMLContext();break}d=await o._OrtCreateSession(a,u,c),o.webgpuOnCreateSession?.(d),d===0&&G("Can't create a session."),o.jsepOnCreateSession?.(),o.currentContext&&(o.webnnRegisterMLContext(d,o.currentContext),o.currentContext=void 0,o.shouldTransferToMLTensor=!0);let[b,y]=bs(d),T=!!t?.enableGraphCapture,I=[],D=[],z=[],v=[],O=[];for(let _=0;_<b;_++){let[k,w,Z]=co(d,_);k===0&&G("Can't get an input name."),h.push(k);let j=o.UTF8ToString(k);I.push(j),z.push(w===0?{name:j,isTensor:!1}:{name:j,isTensor:!0,type:Ot(w),shape:Z})}for(let _=0;_<y;_++){let[k,w,Z]=co(d,_+b);k===0&&G("Can't get an output name."),g.push(k);let j=o.UTF8ToString(k);D.push(j),v.push(w===0?{name:j,isTensor:!1}:{name:j,isTensor:!0,type:Ot(w),shape:Z})}return $e.set(d,[d,h,g,null,T,!1]),[d,I,D,z,v]}catch(b){throw h.forEach(y=>o._OrtFree(y)),g.forEach(y=>o._OrtFree(y)),l!==0&&o._OrtReleaseBinding(l)!==0&&G("Can't release IO binding."),d!==0&&o._OrtReleaseSession(d)!==0&&G("Can't release session."),b}finally{o._free(a),c!==0&&o._OrtReleaseSessionOptions(c)!==0&&G("Can't release session options."),m.forEach(b=>o._free(b)),o.unmountExternalData?.()}},yt=n=>{let t=$(),a=$e.get(n);if(!a)throw new Error(`cannot release session. invalid session id: ${n}`);let[u,o,d,c,l]=a;c&&(l&&t._OrtClearBoundOutputs(c.handle)!==0&&G("Can't clear bound outputs."),t._OrtReleaseBinding(c.handle)!==0&&G("Can't release IO binding.")),t.jsepOnReleaseSession?.(n),t.webnnOnReleaseSession?.(n),t.webgpuOnReleaseSession?.(n),o.forEach(m=>t._OrtFree(m)),d.forEach(m=>t._OrtFree(m)),t._OrtReleaseSession(u)!==0&&G("Can't release session."),$e.delete(n)},lo=async(n,t,a,u,o,d,c=!1)=>{if(!n){t.push(0);return}let l=$(),m=l.PTR_SIZE,h=n[0],g=n[1],b=n[3],y=b,T,I;if(h==="string"&&(b==="gpu-buffer"||b==="ml-tensor"))throw new Error("String tensor is not supported on GPU.");if(c&&b!=="gpu-buffer")throw new Error(`External buffer must be provided for input/output index ${d} when enableGraphCapture is true.`);if(b==="gpu-buffer"){let v=n[2].gpuBuffer;I=Ge(We(h),g);{let O=l.jsepRegisterBuffer;if(!O)throw new Error('Tensor location "gpu-buffer" is not supported without using WebGPU.');T=O(u,d,v,I)}}else if(b==="ml-tensor"){let v=n[2].mlTensor;I=Ge(We(h),g);let O=l.webnnRegisterMLTensor;if(!O)throw new Error('Tensor location "ml-tensor" is not supported without using WebNN.');T=O(u,v,We(h),g)}else{let v=n[2];if(Array.isArray(v)){I=m*v.length,T=l._malloc(I),a.push(T);for(let O=0;O<v.length;O++){if(typeof v[O]!="string")throw new TypeError(`tensor data at index ${O} is not a string`);l.setValue(T+O*m,ae(v[O],a),"*")}}else{let O=l.webnnIsGraphInput,N=l.webnnIsGraphOutput;if(h!=="string"&&O&&N){let _=l.UTF8ToString(o);if(O(u,_)||N(u,_)){let k=We(h);I=Ge(k,g),y="ml-tensor";let w=l.webnnCreateTemporaryTensor,Z=l.webnnUploadTensor;if(!w||!Z)throw new Error('Tensor location "ml-tensor" is not supported without using WebNN.');let j=await w(u,k,g);Z(j,new Uint8Array(v.buffer,v.byteOffset,v.byteLength)),T=j}else I=v.byteLength,T=l._malloc(I),a.push(T),l.HEAPU8.set(new Uint8Array(v.buffer,v.byteOffset,I),T)}else I=v.byteLength,T=l._malloc(I),a.push(T),l.HEAPU8.set(new Uint8Array(v.buffer,v.byteOffset,I),T)}}let D=l.stackSave(),z=l.stackAlloc(4*g.length);try{g.forEach((O,N)=>l.setValue(z+N*m,O,m===4?"i32":"i64"));let v=l._OrtCreateTensor(We(h),T,I,z,g.length,fo(y));v===0&&G(`Can't create tensor for input/output. session=${u}, index=${d}.`),t.push(v)}finally{l.stackRestore(D)}},gt=async(n,t,a,u,o,d)=>{let c=$(),l=c.PTR_SIZE,m=$e.get(n);if(!m)throw new Error(`cannot run inference. invalid session id: ${n}`);let h=m[0],g=m[1],b=m[2],y=m[3],T=m[4],I=m[5],D=t.length,z=u.length,v=0,O=[],N=[],_=[],k=[],w=[],Z=c.stackSave(),j=c.stackAlloc(D*l),ne=c.stackAlloc(D*l),pe=c.stackAlloc(z*l),B=c.stackAlloc(z*l);try{[v,O]=ro(d),De("wasm prepareInputOutputTensor");for(let A=0;A<D;A++)await lo(a[A],N,k,n,g[t[A]],t[A],T);for(let A=0;A<z;A++)await lo(o[A],_,k,n,b[u[A]],D+u[A],T);Ue("wasm prepareInputOutputTensor");for(let A=0;A<D;A++)c.setValue(j+A*l,N[A],"*"),c.setValue(ne+A*l,g[t[A]],"*");for(let A=0;A<z;A++)c.setValue(pe+A*l,_[A],"*"),c.setValue(B+A*l,b[u[A]],"*");c.jsepOnRunStart?.(h),c.webnnOnRunStart?.(h);let W;W=await c._OrtRun(h,ne,j,D,B,z,pe,v),W!==0&&G("failed to call OrtRun().");let re=[],me=[];De("wasm ProcessOutputTensor");for(let A=0;A<z;A++){let K=Number(c.getValue(pe+A*l,"*"));if(K===_[A]||w.includes(_[A])){re.push(o[A]),K!==_[A]&&c._OrtReleaseTensor(K)!==0&&G("Can't release tensor.");continue}let je=c.stackSave(),ee=c.stackAlloc(4*l),he=!1,H,q=0;try{c._OrtGetTensorData(K,ee,ee+l,ee+2*l,ee+3*l)!==0&&G(`Can't access output tensor data on index ${A}.`);let Se=l===4?"i32":"i64",ve=Number(c.getValue(ee,Se));q=c.getValue(ee+l,"*");let Ve=c.getValue(ee+l*2,"*"),Re=Number(c.getValue(ee+l*3,Se)),te=[];for(let L=0;L<Re;L++)te.push(Number(c.getValue(Ve+L*l,Se)));c._OrtFree(Ve)!==0&&G("Can't free memory for tensor dims.");let ue=te.reduce((L,V)=>L*V,1);H=Ot(ve);let se=y?.outputPreferredLocations[u[A]];if(H==="string"){if(se==="gpu-buffer"||se==="ml-tensor")throw new Error("String tensor is not supported on GPU.");let L=[];for(let V=0;V<ue;V++){let fe=c.getValue(q+V*l,"*"),ye=c.getValue(q+(V+1)*l,"*"),ce=V===ue-1?void 0:ye-fe;L.push(c.UTF8ToString(fe,ce))}re.push([H,te,L,"cpu"])}else if(se==="gpu-buffer"&&ue>0){let L=c.jsepGetBuffer;if(!L)throw new Error('preferredLocation "gpu-buffer" is not supported without using WebGPU.');let V=L(q),fe=Ge(ve,ue);if(fe===void 0||!At(H))throw new Error(`Unsupported data type: ${H}`);he=!0,re.push([H,te,{gpuBuffer:V,download:c.jsepCreateDownloader(V,fe,H),dispose:()=>{c._OrtReleaseTensor(K)!==0&&G("Can't release tensor.")}},"gpu-buffer"])}else if(se==="ml-tensor"&&ue>0){let L=c.webnnEnsureTensor,V=c.webnnIsGraphInputOutputTypeSupported;if(!L||!V)throw new Error('preferredLocation "ml-tensor" is not supported without using WebNN.');if(Ge(ve,ue)===void 0||!It(H))throw new Error(`Unsupported data type: ${H}`);if(!V(n,H,!1))throw new Error(`preferredLocation "ml-tensor" for ${H} output is not supported by current WebNN Context.`);let ye=await L(n,q,ve,te,!1);he=!0,re.push([H,te,{mlTensor:ye,download:c.webnnCreateMLTensorDownloader(q,H),dispose:()=>{c.webnnReleaseTensorId(q),c._OrtReleaseTensor(K)}},"ml-tensor"])}else if(se==="ml-tensor-cpu-output"&&ue>0){let L=c.webnnCreateMLTensorDownloader(q,H)(),V=re.length;he=!0,me.push((async()=>{let fe=[V,await L];return c.webnnReleaseTensorId(q),c._OrtReleaseTensor(K),fe})()),re.push([H,te,[],"cpu"])}else{let L=io(H),V=new L(ue);new Uint8Array(V.buffer,V.byteOffset,V.byteLength).set(c.HEAPU8.subarray(q,q+V.byteLength)),re.push([H,te,V,"cpu"])}}finally{c.stackRestore(je),H==="string"&&q&&c._free(q),he||c._OrtReleaseTensor(K)}}y&&!T&&(c._OrtClearBoundOutputs(y.handle)!==0&&G("Can't clear bound outputs."),$e.set(n,[h,g,b,y,T,!1]));for(let[A,K]of await Promise.all(me))re[A][2]=K;return Ue("wasm ProcessOutputTensor"),re}finally{c.webnnOnRunEnd?.(h),c.stackRestore(Z),N.forEach(W=>c._OrtReleaseTensor(W)),_.forEach(W=>c._OrtReleaseTensor(W)),k.forEach(W=>c._free(W)),v!==0&&c._OrtReleaseRunOptions(v),O.forEach(W=>c._free(W))}},Et=n=>{let t=$(),a=$e.get(n);if(!a)throw new Error("invalid session id");let u=a[0],o=t._OrtEndProfiling(u);o===0&&G("Can't get an profile file name."),t._OrtFree(o)},Tt=n=>{let t=[];for(let a of n){let u=a[2];!Array.isArray(u)&&"buffer"in u&&t.push(u.buffer)}return t}});var Me,ie,et,Lt,_t,Bt,ln,dn,ze,He,gs,po,mo,ho,wo,bo,yo,go,pn=F(()=>{"use strict";Te();rn();xe();pt();Me=()=>!!Y.wasm.proxy&&typeof document<"u",et=!1,Lt=!1,_t=!1,dn=new Map,ze=(n,t)=>{let a=dn.get(n);a?a.push(t):dn.set(n,[t])},He=()=>{if(et||!Lt||_t||!ie)throw new Error("worker not ready")},gs=n=>{switch(n.data.type){case"init-wasm":et=!1,n.data.err?(_t=!0,ln[1](n.data.err)):(Lt=!0,ln[0]()),Bt&&(URL.revokeObjectURL(Bt),Bt=void 0);break;case"init-ep":case"copy-from":case"create":case"release":case"run":case"end-profiling":{let t=dn.get(n.data.type);n.data.err?t.shift()[1](n.data.err):t.shift()[0](n.data.out);break}default:}},po=async()=>{if(!Lt){if(et)throw new Error("multiple calls to 'initWasm()' detected.");if(_t)throw new Error("previous call to 'initWasm()' failed.");if(et=!0,Me())return new Promise((n,t)=>{ie?.terminate(),eo().then(([a,u])=>{try{ie=u,ie.onerror=d=>t(d),ie.onmessage=gs,ln=[n,t];let o={type:"init-wasm",in:Y};!o.in.wasm.wasmPaths&&(a||an)&&(o.in.wasm.wasmPaths={wasm:new URL("ort-wasm-simd-threaded.wasm",import.meta.url).href}),ie.postMessage(o),Bt=a}catch(o){t(o)}},t)});try{await mt(Y.wasm),await ht(Y),Lt=!0}catch(n){throw _t=!0,n}finally{et=!1}}},mo=async n=>{if(Me())return He(),new Promise((t,a)=>{ze("init-ep",[t,a]);let u={type:"init-ep",in:{epName:n,env:Y}};ie.postMessage(u)});await wt(Y,n)},ho=async n=>Me()?(He(),new Promise((t,a)=>{ze("copy-from",[t,a]);let u={type:"copy-from",in:{buffer:n}};ie.postMessage(u,[n.buffer])})):Qe(n),wo=async(n,t)=>{if(Me()){if(t?.preferredOutputLocation)throw new Error('session option "preferredOutputLocation" is not supported for proxy.');return He(),new Promise((a,u)=>{ze("create",[a,u]);let o={type:"create",in:{model:n,options:{...t}}},d=[];n instanceof Uint8Array&&d.push(n.buffer),ie.postMessage(o,d)})}else return bt(n,t)},bo=async n=>{if(Me())return He(),new Promise((t,a)=>{ze("release",[t,a]);let u={type:"release",in:n};ie.postMessage(u)});yt(n)},yo=async(n,t,a,u,o,d)=>{if(Me()){if(a.some(c=>c[3]!=="cpu"))throw new Error("input tensor on GPU is not supported for proxy.");if(o.some(c=>c))throw new Error("pre-allocated output tensor is not supported for proxy.");return He(),new Promise((c,l)=>{ze("run",[c,l]);let m=a,h={type:"run",in:{sessionId:n,inputIndices:t,inputs:m,outputIndices:u,options:d}};ie.postMessage(h,Tt(m))})}else return gt(n,t,a,u,o,d)},go=async n=>{if(Me())return He(),new Promise((t,a)=>{ze("end-profiling",[t,a]);let u={type:"end-profiling",in:n};ie.postMessage(u)});Et(n)}});var Eo,Es,Pt,To=F(()=>{"use strict";Te();pn();fn();dt();cn();Eo=(n,t)=>{switch(n.location){case"cpu":return[n.type,n.dims,n.data,"cpu"];case"gpu-buffer":return[n.type,n.dims,{gpuBuffer:n.gpuBuffer},"gpu-buffer"];case"ml-tensor":return[n.type,n.dims,{mlTensor:n.mlTensor},"ml-tensor"];default:throw new Error(`invalid data location: ${n.location} for ${t()}`)}},Es=n=>{switch(n[3]){case"cpu":return new de(n[0],n[2],n[1]);case"gpu-buffer":{let t=n[0];if(!At(t))throw new Error(`not supported data type: ${t} for deserializing GPU tensor`);let{gpuBuffer:a,download:u,dispose:o}=n[2];return de.fromGpuBuffer(a,{dataType:t,dims:n[1],download:u,dispose:o})}case"ml-tensor":{let t=n[0];if(!It(t))throw new Error(`not supported data type: ${t} for deserializing MLTensor tensor`);let{mlTensor:a,download:u,dispose:o}=n[2];return de.fromMLTensor(a,{dataType:t,dims:n[1],download:u,dispose:o})}default:throw new Error(`invalid data location: ${n[3]}`)}},Pt=class{async fetchModelAndCopyToWasmMemory(t){return ho(await Ke(t))}async loadModel(t,a){_e();let u;typeof t=="string"?u=await this.fetchModelAndCopyToWasmMemory(t):u=t,[this.sessionId,this.inputNames,this.outputNames,this.inputMetadata,this.outputMetadata]=await wo(u,a),Pe()}async dispose(){return bo(this.sessionId)}async run(t,a,u){_e();let o=[],d=[];Object.entries(t).forEach(y=>{let T=y[0],I=y[1],D=this.inputNames.indexOf(T);if(D===-1)throw new Error(`invalid input '${T}'`);o.push(I),d.push(D)});let c=[],l=[];Object.entries(a).forEach(y=>{let T=y[0],I=y[1],D=this.outputNames.indexOf(T);if(D===-1)throw new Error(`invalid output '${T}'`);c.push(I),l.push(D)});let m=o.map((y,T)=>Eo(y,()=>`input "${this.inputNames[d[T]]}"`)),h=c.map((y,T)=>y?Eo(y,()=>`output "${this.outputNames[l[T]]}"`):null),g=await yo(this.sessionId,d,m,l,h,u),b={};for(let y=0;y<g.length;y++)b[this.outputNames[l[y]]]=c[y]??Es(g[y]);return Pe(),b}startProfiling(){}endProfiling(){go(this.sessionId)}}});var vo={};ut(vo,{OnnxruntimeWebAssemblyBackend:()=>Dt,initializeFlags:()=>So,wasmBackend:()=>Ts});var So,Dt,Ts,Oo=F(()=>{"use strict";Te();pn();To();So=()=>{(typeof Y.wasm.initTimeout!="number"||Y.wasm.initTimeout<0)&&(Y.wasm.initTimeout=0);let n=Y.wasm.simd;if(typeof n!="boolean"&&n!==void 0&&n!=="fixed"&&n!=="relaxed"&&(console.warn(`Property "env.wasm.simd" is set to unknown value "${n}". Reset it to \`false\` and ignore SIMD feature checking.`),Y.wasm.simd=!1),typeof Y.wasm.proxy!="boolean"&&(Y.wasm.proxy=!1),typeof Y.wasm.trace!="boolean"&&(Y.wasm.trace=!1),typeof Y.wasm.numThreads!="number"||!Number.isInteger(Y.wasm.numThreads)||Y.wasm.numThreads<=0)if(typeof self<"u"&&!self.crossOriginIsolated)Y.wasm.numThreads=1;else{let t=typeof navigator>"u"?qt("node:os").cpus().length:navigator.hardwareConcurrency;Y.wasm.numThreads=Math.min(4,Math.ceil((t||1)/2))}},Dt=class{async init(t){So(),await po(),await mo(t)}async createInferenceSessionHandler(t,a){let u=new Pt;return await u.loadModel(t,a),u}},Ts=new Dt});Te();Te();Te();var Gr="1.27.0";var au=nn;{let n=(Oo(),Xt(vo)).wasmBackend;qe("cpu",n,10),qe("wasm",n,10)}Object.defineProperty(Y.versions,"web",{value:Gr,enumerable:!0});export{ts as InferenceSession,xr as TRACE,De as TRACE_EVENT_BEGIN,Ue as TRACE_EVENT_END,_e as TRACE_FUNC_BEGIN,Pe as TRACE_FUNC_END,de as Tensor,au as default,Y as env,qe as registerBackend};
+//# sourceMappingURL=ort.wasm.bundle.min.mjs.map