Playable Echo Climb (round 0 and round 30) in the hero

.gitattributes

@@ -157,3 +157,4 @@ media/pairs/godot_qwen/tycoon-music-label/final.mp4 filter=lfs diff=lfs merge=lf
 media/pairs/godot_qwen/tycoon-music-label/p0.mp4 filter=lfs diff=lfs merge=lfs -text
 media/pairs/godot_qwen/visualnovel-lastsignal/final.mp4 filter=lfs diff=lfs merge=lfs -text
 media/pairs/godot_qwen/visualnovel-lastsignal/p0.mp4 filter=lfs diff=lfs merge=lfs -text
+media/play/godot_gpt/platformer-echo-climb/r30/index.pck filter=lfs diff=lfs merge=lfs -text

index.html

@@ -28,7 +28,8 @@
   <div class="hero-bg" aria-hidden="true">
     <video id="hero-video" muted loop playsinline preload="auto" data-src="hero_evo.mp4" data-poster="hero_evo.webp"></video>
   </div>
-  <div class="hero-inner">
+  <div class="hero-inner has-play">
+   <div class="hero-text">
     <p class="eyebrow">Agentic verification · Progressive development</p>
     <h1>EvoGame</h1>
     <p class="hero-sub">Self-Evolving Game Generation through Agentic Verification and Progressive Development</p>
@@ -39,6 +40,20 @@
       <a class="btn" href="#" aria-disabled="true">Code <small>soon</small></a>
       <a class="btn" href="#" aria-disabled="true">Dataset <small>soon</small></a>
     </div>
+   </div>
+    <section class="play-card" id="play" aria-labelledby="play-title" hidden>
+      <div class="play-top">
+        <span class="play-tag">Playable</span>
+        <b id="play-title"></b>
+        <span class="play-who" id="play-who"></span>
+      </div>
+      <div class="play-screen" id="play-screen"></div>
+      <div class="play-ctl">
+        <div class="seg" id="play-rounds" role="group" aria-label="Which build to play"></div>
+        <span class="play-keys" id="play-keys"></span>
+        <button class="btn btn-sm play-fs" id="play-fs" type="button" hidden>⛶ Fullscreen</button>
+      </div>
+    </section>
   </div>
 </header>
 

media/play/engine/godot.audio.position.worklet.js

@@ -0,0 +1,66 @@
+/**************************************************************************/
+/*  godot.audio.position.worklet.js                                                      */
+/**************************************************************************/
+/*                         This file is part of:                          */
+/*                             GODOT ENGINE                               */
+/*                        https://godotengine.org                         */
+/**************************************************************************/
+/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
+/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur.                  */
+/*                                                                        */
+/* Permission is hereby granted, free of charge, to any person obtaining  */
+/* a copy of this software and associated documentation files (the        */
+/* "Software"), to deal in the Software without restriction, including    */
+/* without limitation the rights to use, copy, modify, merge, publish,    */
+/* distribute, sublicense, and/or sell copies of the Software, and to     */
+/* permit persons to whom the Software is furnished to do so, subject to  */
+/* the following conditions:                                              */
+/*                                                                        */
+/* The above copyright notice and this permission notice shall be         */
+/* included in all copies or substantial portions of the Software.        */
+/*                                                                        */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,        */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF     */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY   */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,   */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE      */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                 */
+/**************************************************************************/
+
+class GodotPositionReportingProcessor extends AudioWorkletProcessor {
+	static get parameterDescriptors() {
+		return [
+			{
+				name: 'reset',
+				defaultValue: 0,
+				minValue: 0,
+				maxValue: 1,
+				automationRate: 'k-rate',
+			},
+		];
+	}
+
+	constructor(...args) {
+		super(...args);
+		this.position = 0;
+	}
+
+	process(inputs, _outputs, parameters) {
+		if (parameters['reset'][0] > 0) {
+			this.position = 0;
+		}
+
+		if (inputs.length > 0) {
+			const input = inputs[0];
+			if (input.length > 0) {
+				this.position += input[0].length;
+				this.port.postMessage({ type: 'position', data: this.position });
+			}
+		}
+
+		return true;
+	}
+}
+
+registerProcessor('godot-position-reporting-processor', GodotPositionReportingProcessor);

media/play/engine/godot.audio.worklet.js

@@ -0,0 +1,213 @@
+/**************************************************************************/
+/*  audio.worklet.js                                                      */
+/**************************************************************************/
+/*                         This file is part of:                          */
+/*                             GODOT ENGINE                               */
+/*                        https://godotengine.org                         */
+/**************************************************************************/
+/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
+/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur.                  */
+/*                                                                        */
+/* Permission is hereby granted, free of charge, to any person obtaining  */
+/* a copy of this software and associated documentation files (the        */
+/* "Software"), to deal in the Software without restriction, including    */
+/* without limitation the rights to use, copy, modify, merge, publish,    */
+/* distribute, sublicense, and/or sell copies of the Software, and to     */
+/* permit persons to whom the Software is furnished to do so, subject to  */
+/* the following conditions:                                              */
+/*                                                                        */
+/* The above copyright notice and this permission notice shall be         */
+/* included in all copies or substantial portions of the Software.        */
+/*                                                                        */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,        */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF     */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY   */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,   */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE      */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                 */
+/**************************************************************************/
+
+class RingBuffer {
+	constructor(p_buffer, p_state, p_threads) {
+		this.buffer = p_buffer;
+		this.avail = p_state;
+		this.threads = p_threads;
+		this.rpos = 0;
+		this.wpos = 0;
+	}
+
+	data_left() {
+		return this.threads ? Atomics.load(this.avail, 0) : this.avail;
+	}
+
+	space_left() {
+		return this.buffer.length - this.data_left();
+	}
+
+	read(output) {
+		const size = this.buffer.length;
+		let from = 0;
+		let to_write = output.length;
+		if (this.rpos + to_write > size) {
+			const high = size - this.rpos;
+			output.set(this.buffer.subarray(this.rpos, size));
+			from = high;
+			to_write -= high;
+			this.rpos = 0;
+		}
+		if (to_write) {
+			output.set(this.buffer.subarray(this.rpos, this.rpos + to_write), from);
+		}
+		this.rpos += to_write;
+		if (this.threads) {
+			Atomics.add(this.avail, 0, -output.length);
+			Atomics.notify(this.avail, 0);
+		} else {
+			this.avail -= output.length;
+		}
+	}
+
+	write(p_buffer) {
+		const to_write = p_buffer.length;
+		const mw = this.buffer.length - this.wpos;
+		if (mw >= to_write) {
+			this.buffer.set(p_buffer, this.wpos);
+			this.wpos += to_write;
+			if (mw === to_write) {
+				this.wpos = 0;
+			}
+		} else {
+			const high = p_buffer.subarray(0, mw);
+			const low = p_buffer.subarray(mw);
+			this.buffer.set(high, this.wpos);
+			this.buffer.set(low);
+			this.wpos = low.length;
+		}
+		if (this.threads) {
+			Atomics.add(this.avail, 0, to_write);
+			Atomics.notify(this.avail, 0);
+		} else {
+			this.avail += to_write;
+		}
+	}
+}
+
+class GodotProcessor extends AudioWorkletProcessor {
+	constructor() {
+		super();
+		this.threads = false;
+		this.running = true;
+		this.lock = null;
+		this.notifier = null;
+		this.output = null;
+		this.output_buffer = new Float32Array();
+		this.input = null;
+		this.input_buffer = new Float32Array();
+		this.port.onmessage = (event) => {
+			const cmd = event.data['cmd'];
+			const data = event.data['data'];
+			this.parse_message(cmd, data);
+		};
+	}
+
+	process_notify() {
+		if (this.notifier) {
+			Atomics.add(this.notifier, 0, 1);
+			Atomics.notify(this.notifier, 0);
+		}
+	}
+
+	parse_message(p_cmd, p_data) {
+		if (p_cmd === 'start' && p_data) {
+			const state = p_data[0];
+			let idx = 0;
+			this.threads = true;
+			this.lock = state.subarray(idx, ++idx);
+			this.notifier = state.subarray(idx, ++idx);
+			const avail_in = state.subarray(idx, ++idx);
+			const avail_out = state.subarray(idx, ++idx);
+			this.input = new RingBuffer(p_data[1], avail_in, true);
+			this.output = new RingBuffer(p_data[2], avail_out, true);
+		} else if (p_cmd === 'stop') {
+			this.running = false;
+			this.output = null;
+			this.input = null;
+			this.lock = null;
+			this.notifier = null;
+		} else if (p_cmd === 'start_nothreads') {
+			this.output = new RingBuffer(p_data[0], p_data[0].length, false);
+		} else if (p_cmd === 'chunk') {
+			this.output.write(p_data);
+		}
+	}
+
+	static array_has_data(arr) {
+		return arr.length && arr[0].length && arr[0][0].length;
+	}
+
+	process(inputs, outputs, parameters) {
+		if (!this.running) {
+			return false; // Stop processing.
+		}
+		if (this.output === null) {
+			return true; // Not ready yet, keep processing.
+		}
+		const process_input = GodotProcessor.array_has_data(inputs);
+		if (process_input) {
+			const input = inputs[0];
+			const chunk = input[0].length * input.length;
+			if (this.input_buffer.length !== chunk) {
+				this.input_buffer = new Float32Array(chunk);
+			}
+			if (!this.threads) {
+				GodotProcessor.write_input(this.input_buffer, input);
+				this.port.postMessage({ 'cmd': 'input', 'data': this.input_buffer });
+			} else if (this.input.space_left() >= chunk) {
+				GodotProcessor.write_input(this.input_buffer, input);
+				this.input.write(this.input_buffer);
+			} else {
+				// this.port.postMessage('Input buffer is full! Skipping input frame.'); // Uncomment this line to debug input buffer.
+			}
+		}
+		const process_output = GodotProcessor.array_has_data(outputs);
+		if (process_output) {
+			const output = outputs[0];
+			const chunk = output[0].length * output.length;
+			if (this.output_buffer.length !== chunk) {
+				this.output_buffer = new Float32Array(chunk);
+			}
+			if (this.output.data_left() >= chunk) {
+				this.output.read(this.output_buffer);
+				GodotProcessor.write_output(output, this.output_buffer);
+				if (!this.threads) {
+					this.port.postMessage({ 'cmd': 'read', 'data': chunk });
+				}
+			} else {
+				// this.port.postMessage('Output buffer has not enough frames! Skipping output frame.'); // Uncomment this line to debug output buffer.
+			}
+		}
+		this.process_notify();
+		return true;
+	}
+
+	static write_output(dest, source) {
+		const channels = dest.length;
+		for (let ch = 0; ch < channels; ch++) {
+			for (let sample = 0; sample < dest[ch].length; sample++) {
+				dest[ch][sample] = source[sample * channels + ch];
+			}
+		}
+	}
+
+	static write_input(dest, source) {
+		const channels = source.length;
+		for (let ch = 0; ch < channels; ch++) {
+			for (let sample = 0; sample < source[ch].length; sample++) {
+				dest[sample * channels + ch] = source[ch][sample];
+			}
+		}
+	}
+}
+
+registerProcessor('godot-processor', GodotProcessor);

media/play/engine/godot.wasm.gz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1fc8bd3b0e1369cda3641b553a99db0a069be6b664483f48f568498acd2f0fb6
+size 9379523

media/play/godot_gpt/platformer-echo-climb/r30/index.pck

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3932ef16d7e8a32d485659aa46e26ebe0f08c44bd8ebc77f9114ce87ee11faef
+size 25377968

play.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>EvoGame player</title>
+<!--
+  One shared Godot 4.6.2 web engine for every exported game.
+  play.html?engine=<base url of godot.js/.wasm.gz>&pck=<game pck url>&pck_size=<bytes>&wasm_gz=<bytes>
+  The engine's .wasm is stored gzipped; fetch() for it is answered from the .gz and inflated here.
+-->
+<style>
+  html, body { margin: 0; height: 100%; background: #05060a; overflow: hidden; }
+  #canvas { display: block; width: 100%; height: 100%; outline: none; }
+  #boot { position: absolute; inset: 0; display: grid; place-items: center; color: #b4bccd; font: 500 13px/1.5 ui-monospace, "JetBrains Mono", Menlo, monospace; text-align: center; padding: 16px; }
+  #boot[hidden] { display: none; }
+  #bar { width: min(320px, 70vw); height: 4px; margin: 10px auto 0; border-radius: 2px; background: #1c2130; overflow: hidden; }
+  #bar i { display: block; height: 100%; width: 0; background: #c6f432; transition: width .15s; }
+</style>
+</head>
+<body>
+<canvas id="canvas" tabindex="0">Your browser does not support the canvas element.</canvas>
+<div id="boot"><div><div id="msg">Loading engine…</div><div id="bar"><i></i></div></div></div>
+<script>
+(() => {
+  const q = new URLSearchParams(location.search);
+  const engineBase = q.get("engine");
+  const pck = q.get("pck");
+  const pckSize = +q.get("pck_size") || 0;
+  const wasmGz = +q.get("wasm_gz") || 0;
+  const msg = document.getElementById("msg"), bar = document.querySelector("#bar i");
+  const mb = (n) => (n / 1048576).toFixed(1);
+  const show = (text, frac) => { msg.textContent = text; if (frac != null) bar.style.width = `${Math.min(100, frac * 100)}%`; };
+  const fail = (e) => { console.error(e); show(`Could not start the game: ${e && e.message ? e.message : e}`); };
+
+  // Answer the engine's request for godot.wasm with the gzipped copy, inflated in the browser.
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input, init) => {
+    const url = typeof input === "string" ? input : input.url;
+    if (!/\.wasm(\?|$)/.test(url)) return realFetch(input, init);
+    const r = await realFetch(url.replace(/\.wasm(\?|$)/, ".wasm.gz$1"), init);
+    if (!r.ok) return realFetch(input, init);
+    const reader = r.body.getReader(), chunks = [];
+    let got = 0;
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value);
+      got += value.length;
+      if (wasmGz) show(`Loading engine ${mb(got)} / ${mb(wasmGz)} MB`, (got / wasmGz) * 0.5);
+    }
+    let blob = new Blob(chunks);
+    const head = new Uint8Array(await blob.slice(0, 2).arrayBuffer());
+    if (head[0] === 0x1f && head[1] === 0x8b) {  // not already inflated by the server
+      show("Unpacking engine…", 0.5);
+      blob = await new Response(blob.stream().pipeThrough(new DecompressionStream("gzip"))).blob();
+    }
+    return new Response(blob, { headers: { "Content-Type": "application/wasm", "Content-Length": String(blob.size) } });
+  };
+
+  if (!engineBase || !pck) return fail("missing engine or pck");
+  const script = document.createElement("script");
+  script.src = `${engineBase}.js`;
+  script.onerror = () => fail("engine script did not load");
+  script.onload = () => {
+    const missing = Engine.getMissingFeatures({ threads: false });
+    if (missing.length) return fail(`this browser lacks ${missing.join(", ")}`);
+    const engine = new Engine({
+      executable: engineBase,
+      mainPack: pck,
+      args: [],
+      canvasResizePolicy: 2,
+      focusCanvas: true,
+      experimentalVK: false,
+      gdextensionLibs: [],
+      ensureCrossOriginIsolationHeaders: false,
+      fileSizes: { [pck]: pckSize },
+    });
+    engine.startGame({
+      onProgress: (cur, total) => {
+        if (total > 0) show(`Loading game ${mb(cur)} / ${mb(total)} MB`, 0.5 + (cur / total) * 0.5);
+      },
+    }).then(() => {
+      document.getElementById("boot").hidden = true;
+      document.getElementById("canvas").focus();
+      parent.postMessage({ evoPlay: "started" }, "*");
+    }, fail);
+  };
+  document.head.append(script);
+  addEventListener("pointerdown", () => document.getElementById("canvas").focus());
+})();
+</script>
+</body>
+</html>

static/css/v1.css

@@ -81,3 +81,39 @@
 .modal.simple #m-twin { grid-column: 1; }
 .modal.simple .m-prompt, .modal.simple .m-h, .modal.simple #m-reqhint, .modal.simple #m-reqs, .modal.simple #m-evo { display: none; }
 @media (max-width: 760px) { .modal.simple .modal-info { grid-template-columns: 1fr; } .modal.simple .m-score { grid-column: 1; grid-row: auto; } }
+
+/* ---------- playable hero ---------- */
+.hero-inner.has-play { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1320px; width: 100%; text-align: left; }
+.has-play .hero-text { min-width: 0; }
+.has-play h1 { font-size: clamp(56px, 8vw, 112px); }
+.has-play .hero-sub { margin-inline: 0; }
+.has-play .hero-cta { justify-content: flex-start; }
+.play-card { background: rgba(10, 12, 18, .88); border: 1px solid var(--hover-border); border-radius: 18px; padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.55); backdrop-filter: blur(10px); display: grid; gap: 10px; min-width: 0; }
+.play-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 4px 0; }
+.play-top b { font: 700 17px var(--display); }
+.play-tag { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 3px 7px; border-radius: 5px; }
+.play-who { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
+.play-screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--media-bg); }
+.play-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
+.play-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--media-bg); display: grid; place-items: center; color: var(--text); }
+.play-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: filter .2s, transform .4s; }
+.play-poster:hover img, .play-poster:focus-visible img { filter: brightness(.7); transform: scale(1.02); }
+.play-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.play-go { position: relative; display: grid; justify-items: center; gap: 10px; }
+.play-go i { width: 76px; height: 76px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(198,244,50,.18); transition: transform .2s; }
+.play-go i::before { content: ""; margin-left: 6px; border-left: 22px solid var(--accent-ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
+.play-poster:hover .play-go i { transform: scale(1.06); }
+.play-go b { font: 700 18px var(--display); text-shadow: 0 2px 12px rgba(0,0,0,.7); }
+.play-go span { font: 500 12px var(--mono); color: var(--text-2); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
+.play-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.play-ctl .seg button { display: inline-flex; gap: 8px; align-items: baseline; }
+.play-ctl .seg button b { font: 700 12px var(--mono); color: var(--muted); }
+.play-ctl .seg button.on b { color: var(--accent); }
+.play-keys { font: 500 12px var(--mono); color: var(--muted); }
+.play-fs { margin-left: auto; }
+@media (max-width: 1020px) {
+  .hero-inner.has-play { grid-template-columns: 1fr; text-align: center; max-width: 820px; }
+  .has-play .hero-sub { margin-inline: auto; }
+  .has-play .hero-cta { justify-content: center; }
+  .play-card { text-align: left; }
+}

static/data/play.json

@@ -0,0 +1,31 @@
+{
+ "engine": {
+  "base": "play/engine/godot",
+  "wasm": 37695054,
+  "wasm_gz": 9379523
+ },
+ "games": [
+  {
+   "arm": "godot_gpt",
+   "task": "platformer-echo-climb",
+   "title": "Echo Climb",
+   "model": "GPT-5.5",
+   "controls": "A / D move \u00b7 Space jump \u00b7 R restart",
+   "pair": "pairs/godot_gpt/platformer-echo-climb",
+   "scores": {
+    "r0": 0.4154,
+    "r30": 0.8908
+   },
+   "builds": {
+    "r0": {
+     "pck": "play/godot_gpt/platformer-echo-climb/r0/index.pck",
+     "size": 74800
+    },
+    "r30": {
+     "pck": "play/godot_gpt/platformer-echo-climb/r30/index.pck",
+     "size": 25377968
+    }
+   }
+  }
+ ]
+}

static/js/v1.js

@@ -12,6 +12,56 @@ Evo.boot(({ games, arms }) => {
   const hv = $("#hero-video");
   Evo.mountHeroVideo(hv, { src: hv.dataset.src, poster: hv.dataset.poster });
 
+  // ---------- playable hero: the real round-0 and round-30 builds, in the browser ----------
+  (async function playable() {
+    const cfg = window.EVO_PLAY || await fetch(Evo.data("play.json")).then((r) => (r.ok ? r.json() : null)).catch(() => null);
+    const game = cfg?.games?.[0];
+    if (!game) return;
+    const screen = $("#play-screen"), rounds = $("#play-rounds"), fsBtn = $("#play-fs");
+    const ROUNDS = [["r0", "Round 0"], ["r30", "Round 30"]];
+    const label = (r) => ROUNDS.find(([k]) => k === r)[1];
+    let sel = "r30", running = false;
+    $("#play-title").textContent = game.title;
+    $("#play-who").replaceChildren(dot(game.model), `${game.model} · Godot 4`);
+    $("#play-keys").textContent = game.controls;
+
+    function idle() {
+      running = false;
+      fsBtn.hidden = true;
+      const mbs = Math.round((cfg.engine.wasm_gz + game.builds[sel].size) / 1048576);
+      const poster = h("button", { class: "play-poster", type: "button", "aria-label": `Play ${game.title}, ${label(sel)}` },
+        h("img", { src: Evo.media(`${game.pair}/${sel === "r0" ? "p0" : "final"}.webp`), alt: "" }),
+        h("span", { class: "play-go" }, h("i"), h("b", {}, `Play ${label(sel)} in your browser`), h("span", {}, `${mbs} MB download · keyboard`)));
+      poster.addEventListener("click", start);
+      screen.replaceChildren(poster);
+    }
+    function start() {
+      running = true;
+      Evo.pauseAll();
+      $("#hero-video").pause();
+      const b = game.builds[sel];
+      const src = "play.html?" + new URLSearchParams({
+        engine: Evo.media(cfg.engine.base), wasm_gz: cfg.engine.wasm_gz, pck: Evo.media(b.pck), pck_size: b.size,
+      });
+      const frame = h("iframe", { src, title: `${game.title}, ${label(sel)}`, allow: "autoplay; fullscreen; gamepad" });
+      frame.addEventListener("load", () => frame.contentWindow?.focus());
+      screen.replaceChildren(frame);
+      fsBtn.hidden = false;
+    }
+    rounds.replaceChildren(...ROUNDS.map(([r, t]) => h("button", {
+      type: "button", class: r === sel ? "on" : "", "data-r": r,
+      onclick: () => {
+        if (sel === r) return;
+        sel = r;
+        rounds.querySelectorAll("button").forEach((x) => x.classList.toggle("on", x.dataset.r === r));
+        running ? start() : idle();
+      },
+    }, t, h("b", {}, s100(game.scores[r])))));
+    fsBtn.addEventListener("click", () => screen.querySelector("iframe")?.requestFullscreen?.());
+    idle();
+    $("#play").hidden = false;
+  })();
+
   // ---------- headline: one row per generator ----------
   $("#headline").replaceChildren(...arms.map((a) => {
     const p0 = mean(a.games.map((g) => g.reward)), p1 = mean(a.games.map((g) => g.repaired.reward));