tickcli-js 0.0.0-stage → 0.1.1

package/client/game.js

@@ -0,0 +1,1003 @@
+/* tickcli game.js - a shell for one-file mini games, alone or together. MIT. Load it (after room.js for multiplayer), then call Game({...}) once.
+   It owns: fitting the board to the space that is left (never clipped), crisp canvas on high-DPI screens, the score / best / pause bar, start, pause and game-over
+   screens, keyboard (arrows, WASD, space), swipe and an on-screen d-pad on touch devices, no phone zoom (quick double or triple taps, tap-then-hold, pinch,
+   long-press menu), pause when the tab is hidden, and a fixed-step loop.
+   You write: setup, update and draw.
+
+   Game({
+     title: "Snake", help: "Arrow keys or swipe to steer.",     // shown on the start screen
+     aspect: 1,                    // board width / height (1 = square)
+     dpad: "auto",                 // "auto" (touch screens only) | "always" | "never"
+     step: 1 / 60,                 // seconds per update call
+     exit: "/",                    // multiplayer: an "Exit" button in the top bar leaves the room and goes to this URL (also <meta name="tickcli-exit"
+                                   // content="/"> in the page). Without it the button reads "Leave": out of this room into a new private one (lobby)
+     scores: false,                // true = at game over, hand the score to window.gameScores (a high-score board the host app provides, if any)
+     scoresBetter: "high",         // "low" when a smaller score wins (a time)
+     setup(g) { g.score = 0; ... },                // start or restart: reset ALL state here (multiplayer: the host may also set starting g.shared values here)
+     update(g, dt) { ... g.gameOver() ... },       // fixed step; g.score += 1 changes the score
+     draw(g, ctx, w, h) { ... },                   // w, h are CSS pixels; ctx is already scaled
+     onInput(g, action) { ... }                    // "up" "down" "left" "right" "action" (space, tap)
+   })
+   Action games: g.held.left/right/up/down are true while a direction is held (keys or the touch pad); g.axis() gives {x, y} to move by.
+   g.state is "ready" | "playing" | "paused" | "over". g.best is kept in memory only. g.start() g.pause() g.restart() g.gameOver().
+
+   3D (three.js or plain WebGL): context: "webgl". The shell then takes no 2D context: g.canvas is yours (new THREE.WebGLRenderer({canvas: g.canvas})),
+   draw(g, null, w, h) runs each frame with w, h in CSS pixels, and the drawing size is yours too: when g.w, g.h or g.dpr change (the quality ladder
+   lowers g.dpr on a slow device) call renderer.setPixelRatio(g.dpr) and renderer.setSize(g.w, g.h, false). client/three.js (TickcliThree) does that
+   and more. No overlay() here (draw a HUD in the scene or in HTML). g.pointer.nx, ny are -1..1 (y up), ready for a raycaster. Positions the host
+   shares keep 2 decimals (metres to the centimetre; multiplayer.decimals changes it). Rotations: a quaternion in qx, qy, qz, qw (players declare
+   each as [-1, 1]) is eased as one turn on other screens.
+
+   Your own engine (Phaser, PixiJS, Babylon.js, Kaplay, PlayCanvas, a loop of your own): headless: true. The shell then adds only the lobby, the
+   notices and the countdown over your page (clicks pass through everywhere else) and leaves the page, its canvas, loop and touches alone. It still
+   runs the room: setup(g) at each match start, host(g, dt) on the host, onAction, onFx, g.me.set, g.shared.set, g.players (eased), g.gameOver().
+   From your engine's own update, read g.state ("playing" while a match runs), g.players and g.shared, and call g.me.set({x, y}). No draw, no
+   board, no d-pad here (g.held and g.axis() still follow the keys). g.sync(make, place, remove) keeps one engine object per other player:
+     if (g.state === "playing") g.me.set({x: hero.x, y: hero.y});
+     g.sync(function (p) { return addSprite(p); }, function (s, st) { s.x = st.x; s.y = st.y; }, function (s) { s.destroy(); });
+
+   Playing together (also load room.js before this file): pass multiplayer: {max: 4, player: {x: [0, 800], y: [0, 600]}}.
+   The shell then shows the lobby (room code, invite link, players, Start for the host), reconnects, and shows notices. Your code:
+     update(g, dt)     every player: move yourself, g.me.set({x, y}) (sent 12 times a second at most, clamped to the declared ranges)
+     host(g, dt)       runs on ONE player only (the host): rounds, timers, health, score, who won: g.shared.set({...}); g.gameOver() ends the match
+     onAction(g, from, name, data)   host only: a player called g.act(name, data); return false to refuse
+     onFx(g, from, name, data)       everyone: a cosmetic effect someone sent with g.fx(name, data) (sounds, sparks), yours included (others' arrive
+                                     with the next frame). g.shared.set may get the whole object every step: only changed values are sent
+     draw(g, ctx, w, h)              draw g.players ([{id, name, me, host, online, away, state}]) and g.shared; both are read-only (frozen: copy before changing, e.g. list.slice().sort())
+   g.me = {id, name, team, state, set}, g.isHost, g.now (shared clock, seconds), g.kick(id) (host), g.room = {code, match, players}.
+   Teams: multiplayer: {teams: 2, ...}: the lobby splits players evenly (anyone can switch before the start), g.me.team and each player's team
+   (0, 1, ...), g.teams = [[ids of team 0], ...], g.teamColor(i). Things the host moves in g.shared (monsters, minions, shots) are drawn smoothly
+   on every screen when their position fields are named x and y (also z, angle, rot). Writes merge: g.shared.set({hp: {[id]: 80}}) changes one entry.
+   setup(g) runs for everyone at the start of each match (also on a page that reloads into a running match: its g.shared writes are then ignored).
+   g.gameOver() counts once per match. A held action key is one press. With no app around the page (a downloaded copy) it runs as a one-player game.
+
+   Board units, big worlds, pointer, extra buttons (all optional, alone or together):
+     size: [800, 600]        draw in these units whatever the screen size (draw gets w = 800, h = 600; aspect follows)
+     world: [2400, 1600]     a world bigger than the board: call g.camera.follow(x, y) in update; draw in world units; overlay(g, ctx, w, h) draws on top
+                             in board units (scores, lap counter, mini map)
+     g.pointer = {x, y, down} in board (world) units; onPointer(g, x, y) for a click or tap (chess squares, aiming)
+     buttons: [{id: "dash", label: "Dash", key: "Shift"}]   up to 4 extra buttons: g.held.dash, onInput(g, "dash"); shown on touch screens
+   More for playing together:
+     multiplayer.seats: 2    only that many play; everyone else in the room (up to max) watches. g.seats = [id or null], g.me.seat (-1 = watching),
+                             g.me.watching, player.seat. seatNames: ["White", "Black"]. Watchers get no update(), input or actions. min: 2 = players needed.
+     multiplayer.cup: true   with seats: a knockout tournament. The shell draws the bracket, seats each match and moves winners on; the game only
+                             plays one match and ends it with g.gameOver(winnerId) (no winner given: the best g.shared.score among the seated).
+     multiplayer.countdown: 3   3-2-1 before each match on the shared clock; update() and host() wait for it (g.countdown = seconds left)
+     g.shoot({x, y, vx, vy, life: 2, r: 4, kind: "laser"})   a shot every screen moves by itself (no shared state): draw g.shots
+                             ([{id, from, team, kind, r, x, y, vx, vy, age}]); in host() test them against targets and call g.hit(shot) to remove one.
+     g.late                  true in setup() on a page that came into a match already running (a late joiner, a reload): start next to
+                             the others instead of on the start line.
+     g.spawnNear({x: [0, W], y: [0, H], gap: 120})   {x, y} to start or respawn where the others can be seen: at the start of a match a ring
+                             round the middle (or at: [x, y]); later (a late joiner, a respawn) gap away from a player still in the game.
+                             keys: ["x", "z"] for 3D, skip(player) leaves someone out (e.g. a dead player).
+     Angles named angle or rot are radians and turn the short way round on other screens.
+
+   One game, both ways: a game with multiplayer: {...} also plays alone. The lobby offers "Play alone" (a private room of one: starts at once, keeps the
+   player's saved profile and saved game; min must be 1, no seats short of it, no cup) and, in a room of one, "Play with others"; End in the bar (alone only) ends the game. "Invite anyone" (when the host app offers it) asks the app
+   to let people without an account in (its public link). With no host
+   app around the page it simply runs as the one-player game. Write the game for g.players (1 to max) and it works in both.
+
+   Saved games (together mode, with a host app that keeps saves; otherwise everything below is simply off and the game starts fresh each time):
+     g.profile = {...}        the player's own saved data (stats, level, items, weapons, outfits, hp, mp, lives left): a read-only copy, loaded before
+                              setup() runs. g.profile.set({level: 3, items: {sword: 1}}) merges (like shared writes; null removes a key), is kept a
+                              second later and when a match ends. Plain JSON, 16 KB, nesting 4 deep. Read g.profile each time (set() makes a new copy).
+                              g.saves is true when saving works. What a player shows others still goes through g.me.set.
+     multiplayer.save: true   the host's g.shared (map level, monsters and their stats, progress) is kept every few seconds and when a match ends.
+                              A new room then offers Continue and New game; Continue starts from the saved state and g.resumed is true: setup() must
+                              not reset what is in g.shared (writes to g.shared inside setup() are ignored while g.resumed). g.clearSave() (host)
+                              forgets the saved game, e.g. when the dungeon is cleared or everyone died. New game over a save asks first. One room
+                              at a time plays a save: a second room of the same game plays unsaved and its lobby says so. A save that
+                              could not be read is never written over: the room plays unsaved, the lobby says so, and Continue appears
+                              once a retry reads it.
+
+   Limits of every write (g.shared.set, g.me.set, g.profile.set): text up to 200 characters, lists up to 64 items, 64 keys per object, 4 levels deep,
+   2 KB per player, 64 KB shared. A write that breaks one is refused whole: nothing changes, nobody gets it, the screen says so once and the console
+   says where ("room: bad_value at mobs.12.name"). Sizes count bytes (non-English letters 2 to 4 each). */
+(function () {
+  // The page itself (full screen, dark) in its own style element: a headless game (your own engine) keeps its page as it is.
+  var pageCss = "html,body{margin:0;height:100%;overflow:hidden;background:var(--bg,#0b1020);color:var(--ink,#e8edf7);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}";
+  var css = ".tg{position:fixed;inset:0;background:var(--bg,#0b1020);display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}" +
+    // A box that scrolls or clips starts its own touch-action, so the overlays and the lobby say again that a quick double tap never zooms.
+    ".tg-ov,.tg-lob{touch-action:pan-y}.tg button{touch-action:manipulation}.tg-pad button,.tg-acts button{touch-action:none}.tg input{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}" +
+    ".tg-bar{flex:none;display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:15px;border-bottom:1px solid rgba(148,163,184,.25)}" +
+    ".tg-bar b{font-size:17px;margin-right:auto}.tg-bar span{opacity:.8;font-variant-numeric:tabular-nums}.tg-bar button.lv{padding:0 12px}.tg-bar button{min-height:36px;min-width:36px;border-radius:10px;border:1px solid rgba(148,163,184,.35);background:transparent;color:inherit;font:inherit;cursor:pointer}" +
+    ".tg-area{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px}" +
+    ".tg-board{position:relative;display:block;container-type:size}.tg-board canvas{display:block;width:100%;height:100%;border-radius:10px;background:rgba(15,23,42,.35)}" +
+    ".tg-ov{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;gap:clamp(4px,2.5cqmin,10px);text-align:center;padding:clamp(6px,4cqmin,16px);border-radius:10px;background:rgba(8,12,24,.78);color:#f1f5f9;overflow:hidden}" +
+    ".tg-ov>:first-child{margin-top:auto}.tg-ov>:last-child{margin-bottom:auto}" +
+    ".tg-ov.on{display:flex}.tg-ov h2{flex:none;margin:0;font-size:clamp(15px,7cqmin,30px);line-height:1.15}.tg-ov p{margin:0;opacity:.85;max-width:30ch;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;font-size:clamp(11px,3.8cqmin,16px);line-height:1.35}.tg-ov button{flex:none;min-height:clamp(36px,10cqmin,44px);padding:0 22px;border-radius:12px;border:0;font:600 clamp(14px,4.2cqmin,17px) system-ui;background:var(--accent,#60a5fa);color:var(--accent-ink,#0b1020);cursor:pointer}" +
+    ".tg-ctl{flex:none;display:flex;align-items:center;justify-content:space-evenly}" +
+    ".tg-pad{flex:none;display:none;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,52px);gap:6px;justify-content:center;padding:6px 0 10px}" +
+    ".tg-pad.on{display:grid}.tg-pad button{border-radius:14px;border:1px solid rgba(148,163,184,.35);background:rgba(148,163,184,.12);color:inherit;font-size:22px;cursor:pointer;touch-action:none}.tg-pad .u{grid-column:2;grid-row:1}.tg-pad .l{grid-column:1;grid-row:2}.tg-pad .d{grid-column:2;grid-row:2}.tg-pad .r{grid-column:3;grid-row:2}" +
+    ".tg:has(.tg-lob.on) .tg-ctl{visibility:hidden}.tg-area{position:relative}.tg-lob{position:absolute;inset:0;z-index:5;display:none;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:16px;background:rgba(8,12,24,.94);color:#f1f5f9;font-size:16px;line-height:1.4;text-align:left}" +
+    ".tg-lob.on{display:flex}.tg-lob .card{margin:auto;width:100%;max-width:26rem;display:flex;flex-direction:column;gap:14px}.tg-lob h2{margin:0;font-size:1.6rem;line-height:1.2;text-align:center}" +
+    ".tg-lob p{margin:0}.tg-lob .status{text-align:center;font-size:1.05rem;color:#e2e8f0}.tg-lob .help{text-align:center;font-size:.95rem;color:#cbd5e1}.tg-lob .note{text-align:center;font-size:.85rem;color:#94a3b8}" +
+    ".tg-lob .box{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.18)}" +
+    ".tg-lob .lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8}.tg-lob .sub{font-size:.85rem;font-weight:700}" +
+    ".tg-lob .invite{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.tg-lob .code{font:700 2rem ui-monospace,Menlo,monospace;letter-spacing:.16em;line-height:1.1;color:#f8fafc}" +
+    ".tg-lob ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.tg-lob .who li{padding:6px 12px;border-radius:999px;background:rgba(148,163,184,.16);font-size:.95rem}.tg-lob .who li.me{box-shadow:inset 0 0 0 2px var(--accent,#60a5fa)}.tg-lob li.away{opacity:.55}" +
+    ".tg-lob button{min-height:44px;padding:0 18px;border-radius:12px;border:0;font:600 1rem system-ui,sans-serif;background:var(--accent,#60a5fa);color:var(--accent-ink,#0b1020);cursor:pointer}.tg-lob button.sec{background:rgba(148,163,184,.2);color:inherit}" +
+    ".tg-lob button.big{width:100%;min-height:52px;font-size:1.1rem}.tg-lob button.link{min-height:32px;padding:0 4px;background:none;color:var(--accent,#60a5fa);font-weight:500;text-decoration:underline;text-underline-offset:3px}.tg-lob .lbl button.link{text-transform:none;letter-spacing:0;font-size:.85rem}" +
+    ".tg-lob button:disabled{opacity:.45;cursor:default}.tg-lob button:focus-visible,.tg-lob input:focus-visible{outline:3px solid var(--accent,#60a5fa);outline-offset:2px}" +
+    ".tg-lob .row{display:flex;gap:8px;flex-wrap:wrap}.tg-lob .row>button{flex:1 1 auto}.tg-lob .links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}" +
+    ".tg-lob input{flex:1 1 8em;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(148,163,184,.45);background:rgba(15,23,42,.7);color:inherit;font:inherit}" +
+    ".tg-lob ul.rooms{flex-direction:column;flex-wrap:nowrap}.tg-lob .rooms li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:12px;background:rgba(148,163,184,.1)}" +
+    ".tg-lob .rooms .t{flex:1;min-width:0;display:flex;flex-direction:column}.tg-lob .rooms b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tg-lob .rooms small{font-size:.85rem;color:#94a3b8}" +
+    ".tg-lob .warn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.45);color:#fde68a;font-size:.92rem}.tg-lob .warn span{flex:1}" +
+    ".tg-lob .cup{font-size:.9rem;text-align:center;opacity:.95}.tg-lob .cup b{color:var(--accent,#60a5fa)}" +
+    ".tg-count{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font:800 clamp(48px,34cqmin,180px) system-ui;color:#f8fafc;text-shadow:0 4px 24px rgba(0,0,0,.7);pointer-events:none}.tg-count.on{display:flex}" +
+    ".tg-acts{flex:none;display:none;gap:8px;flex-wrap:wrap;justify-content:center;max-width:50%;padding:6px 0 10px}.tg-acts.on{display:flex}.tg-acts button{min-height:48px;min-width:72px;padding:0 14px;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:rgba(148,163,184,.12);color:inherit;font:600 15px system-ui;cursor:pointer;touch-action:none}" +
+    ".tg-toast{position:absolute;z-index:6;left:50%;top:8px;transform:translateX(-50%);max-width:90%;padding:6px 12px;border-radius:10px;background:rgba(15,23,42,.92);color:#f8fafc;font-size:13px;pointer-events:none;opacity:0;transition:opacity .25s}.tg-toast.on{opacity:1}" +
+    // headless: only the lobby, notices and the countdown, over the page's own engine; clicks pass through everywhere else
+    ".tg.hl{background:transparent;pointer-events:none;z-index:2147483000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;color:#e8edf7}.tg.hl>.tg-bar,.tg.hl .tg-board,.tg.hl .tg-ctl{display:none}.tg.hl .tg-area{padding:0}.tg.hl .tg-lob{pointer-events:auto}";
+  var st = document.createElement("style"); st.textContent = css; document.head.insertBefore(st, document.head.firstChild);
+  var stPage = document.createElement("style"); stPage.textContent = pageCss; document.head.insertBefore(stPage, st);
+
+  window.Game = function (o) {
+    // Called from a script in <head> (or before <body>): wait for the page body instead of failing; window.game is set once it runs.
+    if (!document.body) { document.addEventListener("DOMContentLoaded", function () { window.Game(o); }, { once: true }); return null; }
+    o = o || {};
+    var HL = !!o.headless;   // your own engine (Phaser, PixiJS, Babylon, Kaplay...) draws, loops and reads input; the shell keeps rooms, lobby and host()
+    if (HL && stPage.parentNode) stPage.parentNode.removeChild(stPage);
+    var step = o.step || 1 / 60;
+    var two = function (v) { return Array.isArray(v) && v[0] > 0 && v[1] > 0 ? [Number(v[0]), Number(v[1])] : null; };
+    var WORLD = two(o.world), VIEW = two(o.size) || (WORLD ? [800, Math.round(800 / (o.aspect || 1))] : null);
+    var aspect = VIEW ? VIEW[0] / VIEW[1] : o.aspect || 1;
+    var g = { state: "ready", score: 0, best: 0, w: 0, h: 0, ctx: null, canvas: null, time: 0, opts: o, quality: { tier: "high", fps: 0, scale: 1, halfRate: false, rate: 1, rtt: 0 } };
+    // The camera: the top-left corner of the board inside the world, kept inside it.
+    g.camera = { x: 0, y: 0, follow: function (x, y) {
+      var vw = VIEW ? VIEW[0] : g.w, vh = VIEW ? VIEW[1] : g.h, ww = WORLD ? WORLD[0] : vw, wh = WORLD ? WORLD[1] : vh;
+      this.x = Math.max(0, Math.min(ww - vw, (Number(x) || 0) - vw / 2)); this.y = Math.max(0, Math.min(wh - vh, (Number(y) || 0) - vh / 2));
+    } };
+    g.pointer = { x: 0, y: 0, sx: 0, sy: 0, nx: 0, ny: 0, down: false };
+    // Your engine's objects for the other players, kept in step: g.sync(make(player) -> sprite, place(sprite, state, player), remove(sprite)) once a
+    // frame. New players get make(), everyone gets place() with their eased state, players who left get remove(). Returns the Map (id -> sprite).
+    var synced = new Map();
+    g.sync = function (make, place, remove) {
+      var seen = {}, list = g.players || [];
+      for (var i = 0; i < list.length; i++) {
+        var p = list[i]; if (p.me || !p.state) continue;
+        seen[p.id] = 1;
+        var s = synced.get(p.id);
+        if (s === undefined) { try { s = make ? make(p) : null; } catch (e) { console.error(e); s = null; } if (s == null) continue; synced.set(p.id, s); }
+        if (place) try { place(s, p.state, p); } catch (e) { console.error(e); }
+      }
+      synced.forEach(function (s, id) { if (!seen[id]) { synced.delete(id); if (remove) try { remove(s); } catch (e) { console.error(e); } } });
+      return synced;
+    };
+    var root = document.createElement("div"); root.className = HL ? "tg hl" : "tg";
+    root.innerHTML = '<div class="tg-bar"><b></b><span class="s">Score 0</span><span class="b">Best 0</span><button class="p" aria-label="Pause">II</button></div>' +
+      '<div class="tg-area"><div class="tg-board"><canvas></canvas><div class="tg-ov on"><h2></h2><p></p><button></button></div></div></div>' +
+      '<div class="tg-pad"><button class="u" aria-label="Up">&#9650;</button><button class="l" aria-label="Left">&#9664;</button><button class="d" aria-label="Down">&#9660;</button><button class="r" aria-label="Right">&#9654;</button></div>';
+    document.body.appendChild(root);
+    var q = function (s) { return root.querySelector(s); };
+    var bar = q(".tg-bar b"), sEl = q(".s"), bEl = q(".b"), pBtn = q(".p"), area = q(".tg-area"), board = q(".tg-board"), canvas = q("canvas"), ov = q(".tg-ov"), pad = q(".tg-pad");
+    var ovH = ov.querySelector("h2"), ovP = ov.querySelector("p"), ovB = ov.querySelector("button");
+    // Shared high scores on: a trophy button opens the board (pausing the game first).
+    if (o.scores && window.gameScores && !window.gameScores.disabled) {
+      var tBtn = document.createElement("button"); tBtn.className = "t"; tBtn.setAttribute("aria-label", "High scores"); tBtn.title = "High scores"; tBtn.textContent = "\uD83C\uDFC6";
+      pBtn.parentNode.insertBefore(tBtn, pBtn);
+      tBtn.addEventListener("click", function () { if (g.state === "playing") g.pause(); window.gameScores.board(); });
+    }
+    var GL = o.context === "webgl";   // 3D: the game makes its own WebGL context on g.canvas and sizes the drawing buffer itself
+    var ctx = GL || HL ? null : canvas.getContext("2d"); g.canvas = HL ? null : canvas; g.ctx = ctx; g.webgl = GL; g.headless = HL;
+    bar.textContent = o.title || document.title || "Game";
+    var coarse = false; try { coarse = matchMedia("(pointer:coarse)").matches; } catch (e) {}
+    var wantPad = o.dpad === "always" || (o.dpad !== "never" && coarse && !!(o.update || o.onInput));   // a tap-only game (a board game) gets no pad
+    pad.classList.toggle("on", wantPad);
+
+    // ---- drawing speed: a device that cannot keep up draws at a lower resolution first (the screen's pixel ratio capped at 2, 1.5, 1, then
+    // 0.75), then at 30 frames a second (the game itself still steps at its normal rate). Measured each second while playing: under 45 frames a
+    // second or over 12 ms of drawing for 3 s in a row = one step down; 55+ frames and under 5 ms of drawing for 15 s = one step back up. The
+    // frame rate also goes to room.js, which asks the server for fewer updates when it stays under 20. quality: false turns this off.
+    var QL = { levels: [], li: 0, half: false, skip: false, frames: 0, paint: 0, t0: 0, bad: 0, good: 0, fps: 0 };
+    (function () {
+      var top = Math.min(3, window.devicePixelRatio || 1); QL.levels.push(top);
+      [2, 1.5, 1, 0.75].forEach(function (v) { if (v < QL.levels[QL.levels.length - 1] - 0.01) QL.levels.push(v); });
+    })();
+    function qualityNow() {
+      var net = mp && window.tickcli && window.tickcli.quality ? window.tickcli.quality() : null;
+      var low = QL.half || QL.li >= QL.levels.length - 1 || (net && net.rate >= 4), high = !QL.half && QL.li === 0 && (!net || net.rate === 1);
+      g.quality = { tier: high ? "high" : low ? "low" : "medium", fps: QL.fps, scale: QL.levels[QL.li], halfRate: QL.half, rate: net ? net.rate : 1, rtt: net ? net.rtt : 0 };
+    }
+    function measure(ts, paintMs) {
+      if (o.quality === false) return;
+      if (!QL.t0) { QL.t0 = ts; QL.frames = 0; QL.paint = 0; return; }
+      QL.frames++; QL.paint += paintMs;
+      var el = ts - QL.t0;
+      if (el < 1000) return;
+      if (el > 3000) { QL.t0 = ts; QL.frames = 0; QL.paint = 0; return; }   // the tab was away or the loop stalled: not a reading
+      var fps = QL.frames * 1000 / el, pm = QL.paint / Math.max(1, QL.frames);
+      QL.fps = Math.round(fps); QL.t0 = ts; QL.frames = 0; QL.paint = 0;
+      if (mp && window.tickcli && window.tickcli.frameRate) window.tickcli.frameRate(fps);
+      var bad = QL.half ? fps < 25 || pm > 25 : fps < 45 || pm > 12, good = QL.half ? pm < 6 : fps >= 55 && pm < 5;
+      QL.bad = bad ? QL.bad + 1 : 0; QL.good = good ? QL.good + 1 : 0;
+      if (QL.bad >= 3) { QL.bad = 0; if (QL.li < QL.levels.length - 1) { QL.li++; fit(); } else QL.half = true; }
+      else if (QL.good >= 15) { QL.good = 0; if (QL.half) QL.half = false; else if (QL.li > 0) { QL.li--; fit(); } }
+      qualityNow();
+    }
+    function fit() {
+      if (HL) { g.w = innerWidth; g.h = innerHeight; g.dpr = QL.levels[QL.li]; return; }
+      var cs = getComputedStyle(area), pw = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight), ph = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+      var aw = area.clientWidth - pw, ah = area.clientHeight - ph;
+      var w = Math.max(120, Math.min(aw, ah * aspect)), h = w / aspect;
+      board.style.width = Math.floor(w) + "px"; board.style.height = Math.floor(h) + "px";
+      var dpr = QL.levels[QL.li];
+      if (!GL) { canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }
+      g.w = w; g.h = h; g.dpr = dpr; paint();
+    }
+    function paint() {
+      try {
+        if (!o.draw) return;
+        if (GL || HL || !VIEW) return void o.draw(g, ctx, g.w, g.h);
+        var k = (g.w / VIEW[0]) * (g.dpr || 1);   // board units to device pixels; the transform is set fresh each frame, so a throw in draw cannot leave it shifted
+        ctx.setTransform(k, 0, 0, k, -g.camera.x * k, -g.camera.y * k); o.draw(g, ctx, VIEW[0], VIEW[1]);
+        if (o.overlay) { ctx.setTransform(k, 0, 0, k, 0, 0); o.overlay(g, ctx, VIEW[0], VIEW[1]); }
+      } catch (e) { console.error(e); }
+    }
+    function point(e) {
+      var r = canvas.getBoundingClientRect(); if (!r.width || !r.height) return;
+      var p = g.pointer; p.sx = (e.clientX - r.left) / r.width * (VIEW ? VIEW[0] : g.w); p.sy = (e.clientY - r.top) / r.height * (VIEW ? VIEW[1] : g.h);
+      p.x = p.sx + g.camera.x; p.y = p.sy + g.camera.y;
+      p.nx = (e.clientX - r.left) / r.width * 2 - 1; p.ny = 1 - (e.clientY - r.top) / r.height * 2;   // -1..1, y up (three.js Raycaster.setFromCamera)
+    }
+    function hud() { if (g.score > g.best) g.best = g.score; sEl.textContent = "Score " + g.score; bEl.textContent = "Best " + g.best; pBtn.textContent = g.state === "paused" ? "▶" : "II"; }
+    function screen(h, p, b) { ovH.textContent = h; ovP.textContent = p; ovB.textContent = b; ov.classList.add("on"); }
+    function hide() { ov.classList.remove("on"); }
+
+    g.restart = function () { g.score = 0; g.time = 0; acc = 0; try { if (o.setup) o.setup(g); } catch (e) { console.error(e); } g.state = "playing"; hide(); hud(); paint(); root.focus && root.focus(); };
+    g.start = function () { if (mp) return; if (g.state === "ready" || g.state === "over") g.restart(); else if (g.state === "paused") g.pause(); };
+    g.pause = function () {
+      if (mp) return;   // a shared game keeps running for the others
+      if (g.state === "playing") { g.state = "paused"; screen("Paused", "Press Space or tap Resume.", "Resume"); }
+      else if (g.state === "paused") { g.state = "playing"; hide(); last = 0; }
+      hud();
+    };
+    g.gameOver = function (winner) {
+      if (mp) return mp.end(winner);
+      if (g.state !== "playing") return;
+      g.state = "over"; if (g.score > g.best) g.best = g.score;
+      screen("Game over", "Score " + g.score + " · Best " + g.best, "Play again"); hud();
+      // Opt-in high scores (Game({scores:true}) plus a board the host app provides as window.gameScores): a popup says whether it is a record or a personal best
+      // and asks the player to submit (or not); after saving, the game-over text shows the rank.
+      if (o.scores && window.gameScores) {
+        setTimeout(function () {
+          if (g.state !== "over") return;
+          window.gameScores.finish(g.score, { better: o.scoresBetter }).then(function (r) {
+            if (r && r.submitted && r.me && g.state === "over") ovP.textContent = "Score " + g.score + " · Best " + g.best + " · Rank " + r.me.rank + " of " + r.players;
+          });
+        }, 450);
+      }
+    };
+    ovB.addEventListener("click", function () { g.state === "paused" ? g.pause() : g.restart(); });
+    pBtn.addEventListener("click", function () { if (g.state === "playing" || g.state === "paused") g.pause(); else g.start(); });
+
+    // ---- playing together (multiplayer option + room.js) --------------------------------------------------------------------------------
+    var mp = o.multiplayer ? multiplayer() : null;
+    function multiplayer() {
+      var R = window.tickcli, spec = { max: Math.max(1, Math.min(16, Math.floor(o.multiplayer.max) || 4)), player: o.multiplayer.player || {}, save: o.multiplayer.save === true, saveVersion: Math.max(1, Math.floor(o.multiplayer.saveVersion) || 1) };
+      var SAVE = spec.save, SAVEV = spec.saveVersion;
+      /** The saved world's format: the same as this page's, or older with a migrateSave(old, fromVersion) to bring it up to date. */
+      function savedV() { var s = R && R.state.saved; return s && typeof s.v === "number" ? s.v : 1; }
+      function canContinue() { var v = savedV(); return v === SAVEV || (v < SAVEV && typeof o.migrateSave === "function"); }
+      /** Host: a continued save from an older version goes through migrateSave once, before setup(); its result replaces the game's own keys. */
+      function migrateWorld() {
+        var v = m.resumeV; m.resumeV = 0;
+        if (!v || v >= SAVEV || typeof o.migrateSave !== "function" || !g.isHost) return;
+        var old = JSON.parse(JSON.stringify(S.shared || {})), nu = null;
+        try { nu = o.migrateSave(old, v); } catch (e) { console.error(e); }
+        if (!nu || typeof nu !== "object" || Array.isArray(nu)) return;
+        var gone = {}, keep = {}; for (var k in S.shared) if (k.charAt(0) !== "_") gone[k] = null;
+        for (var k2 in nu) if (k2.charAt(0) !== "_") keep[k2] = nu[k2];
+        rawShared(gone); rawShared(keep);
+      }
+      var TEAMS = Math.max(0, Math.min(4, Math.floor(o.multiplayer.teams) || 0)), COLORS = ["#60a5fa", "#f87171", "#34d399", "#fbbf24"];
+      var SEATS = Math.max(0, Math.min(spec.max, Math.floor(o.multiplayer.seats) || 0)), CUP = !!o.multiplayer.cup && SEATS > 0, SN = Array.isArray(o.multiplayer.seatNames) ? o.multiplayer.seatNames : null;
+      if (SEATS) { g.seats = []; for (var s0 = 0; s0 < SEATS; s0++) g.seats.push(null); }   // there before the first draw (no one seated yet)
+      var COUNT = Math.max(0, Math.min(10, Number(o.multiplayer.countdown) || 0)), MIN = Math.max(1, Math.floor(o.multiplayer.min) || 1);
+      var LIST = o.multiplayer.roomList !== false;   // the lobby lists other open rooms of this game
+      if (!R) console.error("multiplayer needs room.js loaded before game.js; running as a one-player game");
+      var DEC = o.multiplayer.decimals != null ? o.multiplayer.decimals : o.context === "webgl" ? 2 : 0;   // decimals on the positions the host shares
+      if (R && R.precision) R.precision(DEC);
+      var m = { R: R, alone: false, autoStart: false, solo: !R, inHost: false, phase: "connecting", warned: {}, toastT: 0, lastBoot: null };
+      sEl.style.display = bEl.style.display = pBtn.style.display = "none";
+      var info = document.createElement("span"); info.className = "room"; pBtn.parentNode.insertBefore(info, pBtn);
+      // Alone (a room of one, or no app around the page): End game goes back to the lobby (Play again, New game, Play with others). A second tap within
+      // 3 s confirms, so a stray tap does not throw a game away. Together, the game ends by itself (one player cannot end it for everyone).
+      var xBtn = document.createElement("button"); xBtn.className = "x"; xBtn.title = "End game"; xBtn.setAttribute("aria-label", "End game"); xBtn.textContent = "End"; xBtn.hidden = true;
+      pBtn.parentNode.insertBefore(xBtn, pBtn);
+      var xArm = 0;
+      // Leave / Exit: out of this room at any time. With an exit URL (Game({exit}) or <meta name="tickcli-exit">) it goes there; without one the
+      // player lands in a new private room of their own (the lobby: other open rooms, join with a code, play alone). Mid-match with others, a second
+      // tap within 3 s confirms, so a stray tap does not drop someone out of a running game.
+      var exitMeta = document.querySelector('meta[name="tickcli-exit"]');
+      var EXIT = typeof o.exit === "string" && o.exit ? o.exit : exitMeta && exitMeta.content ? exitMeta.content : "";
+      var lBtn = document.createElement("button"); lBtn.className = "lv"; var lWord = EXIT ? "Exit" : "Leave";
+      lBtn.textContent = lWord; lBtn.title = EXIT ? "Leave this room and exit" : "Leave this room"; lBtn.setAttribute("aria-label", lBtn.title); lBtn.hidden = !R;
+      pBtn.parentNode.insertBefore(lBtn, pBtn);
+      var lArm = 0;
+      lBtn.addEventListener("click", function () {
+        var busy = g.state === "playing" && g.players.length > 1;
+        if (busy && Date.now() - lArm > 3000) { lArm = Date.now(); lBtn.textContent = lWord + "?"; setTimeout(function () { if (Date.now() - lArm >= 3000) lBtn.textContent = lWord; }, 3100); return; }
+        lArm = 0; lBtn.textContent = lWord;
+        if (m.solo && !EXIT) return;
+        if (EXIT) { try { if (S.code) R.leave(); } catch (e) { /* closed already */ } location.href = EXIT; return; }
+        if (S.code) R.leave();   // free the seat at once (switching rooms alone would hold it for seatHoldMs)
+        try { if (/room=/.test(location.hash)) history.replaceState(null, "", location.pathname + location.search); } catch (e) { /* sandboxed */ }
+        join({ priv: true });
+      });
+      xBtn.addEventListener("click", function () {
+        if (Date.now() - xArm > 3000) { xArm = Date.now(); xBtn.textContent = "End game?"; setTimeout(function () { if (Date.now() - xArm >= 3000) xBtn.textContent = "End"; }, 3100); return; }
+        xArm = 0; xBtn.textContent = "End"; if (g.state === "playing" && g.isHost) m.end();
+      });
+      var showEnd = function () { var on = (m.solo || m.alone) && g.state === "playing"; if (xBtn.hidden === on) xBtn.hidden = !on; };
+      var lob = document.createElement("div"); lob.className = "tg-lob"; area.appendChild(lob);   // the whole play area: room for the lobby on an upright phone
+      var toast = document.createElement("div"); toast.className = "tg-toast"; toast.setAttribute("role", "status"); area.appendChild(toast);   // above the lobby
+      var cnt = document.createElement("div"); cnt.className = "tg-count"; cnt.setAttribute("aria-live", "polite"); (HL ? area : board).appendChild(cnt);
+      ov.classList.remove("on");
+      /** A short notice. keep: an important one (the server restarted) that "Ana joined" may not replace while it shows. */
+      function say(t, keep) {
+        if (!keep && m.toastKeep > performance.now()) return;
+        m.toastKeep = keep ? performance.now() + 3200 : 0;
+        toast.textContent = t; toast.classList.add("on"); clearTimeout(m.toastT); m.toastT = setTimeout(function () { toast.classList.remove("on"); }, 3200);
+      }
+      function warn(k, t) { if (!m.warned[k]) { m.warned[k] = 1; console.warn(t); } }
+      function el(tag, cls, text) { var e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; }
+      function btn(text, fn, cls) { var b = el("button", cls || "", text); b.addEventListener("click", fn); return b; }
+      var S = m.solo ? { you: "me", host: "me", code: "", match: 1, term: 1, started: false, players: { me: { name: "You", state: {} } }, shared: {} } : R.state;
+      function teamsOf() { var t = (S.shared && S.shared._teams) || {}; return t && typeof t === "object" ? t : {}; }
+      function players() {
+        var list = m.solo ? [{ id: "me", name: "You", online: true, away: false, me: true, host: true, state: S.players.me.state }] : R.view();
+        if (TEAMS) { var t = teamsOf(); for (var i = 0; i < list.length; i++) list[i].team = typeof t[list[i].id] === "number" ? t[list[i].id] : 0; }
+        if (SEATS) {
+          var st = seatsOf(), sv = function (id) { return typeof st[id] === "number" && st[id] >= 0 ? st[id] : -1; };
+          for (var j = 0; j < list.length; j++) { list[j].seat = sv(list[j].id); list[j].watching = list[j].seat < 0; }
+          g.seats = []; for (var q2 = 0; q2 < SEATS; q2++) g.seats.push(null);
+          for (var id2 in st) if (st[id2] >= 0 && st[id2] < SEATS) g.seats[st[id2]] = id2;
+          if (g.me) { g.me.seat = sv(S.you); g.me.watching = g.me.seat < 0; }
+        }
+        var mine = g.me && S.players[S.you]; if (mine && mine.state) g.me.state = Object.assign({}, mine.state);   // your own state as you last set it, every frame
+        return list;
+      }
+      function seatsOf() { var t = (S.shared && S.shared._seats) || {}; return t && typeof t === "object" ? t : {}; }
+      function isCup() { return CUP && !m.solo; }
+      function cup() { var c = S.shared && S.shared._cup; return c && typeof c === "object" && c.g && typeof c.g === "object" ? c : null; }
+      function cupGame(v) { var a = String(v == null ? "" : v).split("|"); return { p: a[0] ? a[0].split(",") : [], w: a[1] || "" }; }
+      function cupKeys(c) { return Object.keys(c.g).sort(function (a, b) { var x = a.split("-"), y = b.split("-"); return x[0] - y[0] || x[1] - y[1]; }); }
+      /** Host: a new knockout bracket from everyone in the room, in random order, SEATS players a match. */
+      function cupNew() {
+        var ids = Object.keys(S.players), old = cup(), gp = {}, names = {}, i;
+        for (i = ids.length - 1; i > 0; i--) { var r = Math.floor(Math.random() * (i + 1)), tmp = ids[i]; ids[i] = ids[r]; ids[r] = tmp; }
+        if (old) for (var k in old.g) gp[k] = null;
+        for (i = 0; i * SEATS < ids.length; i++) gp["0-" + i] = ids.slice(i * SEATS, (i + 1) * SEATS).join(",") + "|";
+        for (i = 0; i < ids.length; i++) names[ids[i]] = String(nameOf(ids[i])).slice(0, 24);
+        rawShared({ _cup: { live: "", champ: "", names: old ? Object.assign(Object.keys(old.names || {}).reduce(function (o2, k2) { o2[k2] = null; return o2; }, {}), names) : names, g: gp } });
+        return cupNext();
+      }
+      /** Host: seat the next match that can be played. A match whose players left but one is a walkover; a finished round makes the next one from
+          its winners; one winner left is the champion. True when a match is seated and ready to start. */
+      function cupNext() {
+        for (var guard = 0; guard < 80; guard++) {
+          var c = cup(); if (!c) return false;
+          var keys = cupKeys(c), round = keys.length ? Number(keys[keys.length - 1].split("-")[0]) : 0, cur = keys.filter(function (k) { return Number(k.split("-")[0]) === round; });
+          var open = null, winners = [], i;
+          for (i = 0; i < cur.length; i++) {
+            var gm = cupGame(c.g[cur[i]]);
+            if (gm.w) { if (gm.w !== "-" && S.players[gm.w]) winners.push(gm.w); continue; }
+            var here = gm.p.filter(function (id) { return !!S.players[id]; });
+            if (here.length <= 1) { var wp = {}; wp[cur[i]] = gm.p.join(",") + "|" + (here[0] || "-"); rawShared({ _cup: { g: wp } }); open = "again"; break; }
+            open = cur[i]; var sp = {}, old = seatsOf(); for (var k in old) sp[k] = null; for (var j = 0; j < here.length; j++) sp[here[j]] = j;
+            rawShared({ _cup: { live: open }, _seats: sp }); return true;
+          }
+          if (open === "again") continue;
+          if (winners.length <= 1) { var sp2 = {}, o3 = seatsOf(); for (var k3 in o3) sp2[k3] = null; rawShared({ _cup: { live: "", champ: winners[0] || "-" }, _seats: sp2 }); return false; }
+          var np = {}; for (i = 0; i * SEATS < winners.length; i++) np[(round + 1) + "-" + i] = winners.slice(i * SEATS, (i + 1) * SEATS).join(",") + "|";
+          rawShared({ _cup: { g: np } });
+        }
+        return false;
+      }
+      /** Host, at the end of a cup match: write the winner (the game's, else the best score among the seated) and seat the next match. */
+      function cupResult(w) {
+        var c = cup(); if (!c || !c.live || !c.g[c.live]) return;
+        var gm = cupGame(c.g[c.live]);
+        if (gm.p.indexOf(w) < 0) {
+          var sc = (S.shared && S.shared.score) || {}, best = null;
+          for (var i = 0; i < gm.p.length; i++) if (S.players[gm.p[i]] && (best === null || (Number(sc[gm.p[i]]) || 0) > (Number(sc[best]) || 0))) best = gm.p[i];
+          w = best || gm.p[0];
+        }
+        var gp = {}; gp[c.live] = gm.p.join(",") + "|" + w; rawShared({ _cup: { g: gp } }); cupNext();
+      }
+      function cupLines() {
+        var c = cup(), out = []; if (!c) return out;
+        var keys = cupKeys(c), nm = function (id) { return id === "-" ? "nobody" : (c.names && c.names[id]) || nameOf(id); }, rounds = {};
+        for (var i = 0; i < keys.length; i++) { var r = keys[i].split("-")[0], gm = cupGame(c.g[keys[i]]); (rounds[r] = rounds[r] || []).push((keys[i] === c.live && !gm.w ? "\u25b6 " : "") + (gm.p.length > 1 ? gm.p.map(nm).join(" vs ") : nm(gm.p[0]) + " (bye)") + (gm.w && gm.p.length > 1 ? " \u2192 " + nm(gm.w) : "")); }
+        var rk = Object.keys(rounds), last = rk.length - 1;
+        for (var j = 0; j < rk.length; j++) out.push((rounds[rk[j]].length === 1 && j === last && j > 0 ? "Final" : "Round " + (j + 1)) + ": " + rounds[rk[j]].join(" \u00b7 "));
+        return out;
+      }
+      /** Host only: seats for the players who want one, first come first; a seat that frees up before the start goes to the next watcher. */
+      function seatBalance() {
+        if (!SEATS || isCup() || S.started) return;
+        var s = seatsOf(), next = {}, used = [], changed = false, ids = m.solo ? ["me"] : Object.keys(S.players), i, v;
+        for (i = 0; i < ids.length; i++) { v = s[ids[i]]; if (v === -1) next[ids[i]] = -1; else if (typeof v === "number" && v >= 0 && v < SEATS && !used[v]) { next[ids[i]] = v; used[v] = 1; } }
+        for (i = 0; i < ids.length; i++) if (next[ids[i]] === undefined) { var f = 0; while (f < SEATS && used[f]) f++; if (f < SEATS) { next[ids[i]] = f; used[f] = 1; changed = true; } else if (s[ids[i]] !== undefined) { next[ids[i]] = null; changed = true; } }
+        for (var k in s) if (ids.indexOf(k) < 0) { next[k] = null; changed = true; }
+        if (changed) rawShared({ _seats: next });
+      }
+      /** Host only: every player in a team (the smallest one first), players who left out of the list. The shell's own key, kept across matches. */
+      function balance() {
+        if (!g.isHost) return;
+        seatBalance();
+        if (!TEAMS) return;
+        var t = teamsOf(), next = {}, count = [], changed = false, ids = m.solo ? ["me"] : Object.keys(S.players), i;
+        for (i = 0; i < TEAMS; i++) count[i] = 0;
+        for (i = 0; i < ids.length; i++) if (typeof t[ids[i]] === "number" && t[ids[i]] < TEAMS) { next[ids[i]] = t[ids[i]]; count[t[ids[i]]]++; }
+        for (i = 0; i < ids.length; i++) if (next[ids[i]] === undefined) { var best = 0; for (var j = 1; j < TEAMS; j++) if (count[j] < count[best]) best = j; next[ids[i]] = best; count[best]++; changed = true; }
+        for (var k in t) if (next[k] === undefined) { next[k] = null; changed = true; }
+        if (changed) rawShared({ _teams: next });
+      }
+      function shellOnly() { for (var k in S.shared || {}) if (k.charAt(0) !== "_") return false; return true; }
+      function rawShared(patch) { var was = m.inHost; m.inHost = true; try { setShared(patch); } finally { m.inHost = was; } }
+      function nameOf(id) { var p = S.players[id]; return p ? p.name : "A player"; }
+      // The shared state is never changed in place (room.js, and cow() here when alone): every object in it is frozen, so g.shared is a frozen top
+      // level over the same objects, made in O(top-level keys), not a deep copy per frame or per write.
+      function sharedOf(src) {
+        var c = {}; src = src || {};
+        for (var k in src) c[k] = src[k];
+        Object.defineProperty(c, "set", { value: setShared, enumerable: false });
+        return Object.freeze(c);
+      }
+      function rebuildShared() { g.shared = sharedOf(S.shared); }
+      /** Profile writes merge in place (the profile is copied for the game): null removes a key, lists are replaced whole. */
+      function soloMerge(into, patch) {
+        for (var k in patch) { var v = patch[k]; if (v === null) delete into[k]; else if (v && typeof v === "object" && !Array.isArray(v)) { if (!into[k] || typeof into[k] !== "object" || Array.isArray(into[k])) into[k] = {}; soloMerge(into[k], v); } else into[k] = v; }
+      }
+      var isObj = function (v) { return !!v && typeof v === "object" && !Array.isArray(v); };
+      function frozen(v) { if (!v || typeof v !== "object" || Object.isFrozen(v)) return v; for (var k in v) frozen(v[k]); return Object.freeze(v); }
+      /** Alone, writes merge the same way as on the server ({hp: {a: 80}} changes one entry, null removes a key, lists are replaced whole), into a new
+          version that reuses the untouched branches. */
+      function cow(base, patch) {
+        var out = {}, k;
+        if (isObj(base)) for (k in base) out[k] = base[k];
+        for (k in patch) { var v = patch[k]; if (v === null) delete out[k]; else if (isObj(v)) out[k] = cow(out[k], v); else out[k] = v && typeof v === "object" ? frozen(JSON.parse(JSON.stringify(v))) : v; }
+        return Object.freeze(out);
+      }
+      function setShared(patch) {
+        // setup() runs on everyone; only the host's starting values count, never over a continued game, and only on a page that saw this match start
+        // (a reload, a second tab or a phone that threw the tab away lands in a running match: its setup must not reset the live game for everyone)
+        if (m.inSetup && (!g.isHost || g.resumed || !(m.sawStart || shellOnly()))) return;
+        if (!m.inHost && !(m.inSetup && g.isHost)) return warn("shared", "g.shared.set() only works inside host(), onAction() or setup(): ask the host with g.act() instead");
+        if (m.solo) S.shared = cow(S.shared, patch); else R.setShared(patch);
+        rebuildShared();
+      }
+      function refresh() {
+        g.isHost = S.host === S.you;
+        g.players = players();
+        var mine = S.players[S.you];
+        g.me.id = S.you; g.me.name = mine ? mine.name : ""; g.me.state = mine ? JSON.parse(JSON.stringify(mine.state)) : {};
+        if (TEAMS) { var tt = teamsOf(); g.me.team = typeof tt[S.you] === "number" ? tt[S.you] : 0; g.teams = []; for (var ti = 0; ti < TEAMS; ti++) g.teams.push(g.players.filter(function (p) { return p.team === ti; }).map(function (p) { return p.id; })); }
+        g.room = { code: S.code, match: S.match, players: g.players.length };
+        info.textContent = m.solo ? "" : m.alone ? "Playing alone" : (S.code ? "Room " + S.code + " \u00b7 " : "") + g.players.length + (g.players.length === 1 ? " player" : " players") + (SEATS && S.started && g.me.watching ? " \u00b7 watching" : "");
+      }
+      g.multiplayer = true;
+      g.me = { id: null, name: "", state: {}, set: function (patch) {
+        if (m.solo) { var st = S.players.me.state; for (var k in patch) { if (patch[k] === null) delete st[k]; else st[k] = patch[k]; } return; }
+        R.setMe(patch);
+      } };
+      g.players = []; g.isHost = false; rebuildShared();
+      // The player's saved profile: loaded once per page (before the first setup), merged in place, written by the room library a second later.
+      var prof = {}; g.saves = false; g.resumed = false;
+      function setProfView() {
+        var c = JSON.parse(JSON.stringify(prof));
+        Object.defineProperty(c, "set", { value: function (patch) {
+          if (!patch || typeof patch !== "object" || Array.isArray(patch)) return;
+          if (!m.solo && g.saves && R.check && R.check(patch) !== null) return void R.setProfile(patch);   // refused whole (the room library says why)
+          soloMerge(prof, JSON.parse(JSON.stringify(patch)));
+          if (!m.solo && g.saves) R.setProfile(patch);
+          else m.profWritten = true;   // not saving here: a profile that arrives later is not adopted over what the game already changed
+          setProfView();
+        }, enumerable: false });
+        g.profile = Object.freeze(c);
+      }
+      setProfView();
+      /** A profile saved by an older version of the game: migrateProfile(old, fromVersion) when the game has one (the result replaces it), else as is. */
+      function migrateProf(p) {
+        var v = R.state.profV || 1;
+        if (v >= SAVEV || typeof o.migrateProfile !== "function") return p;
+        var nu = null; try { nu = o.migrateProfile(JSON.parse(JSON.stringify(p)), v); } catch (e) { console.error(e); }
+        if (!nu || typeof nu !== "object" || Array.isArray(nu)) return p;
+        var gone = {}; for (var k in p) gone[k] = null;
+        R.setProfile(gone); R.setProfile(nu);
+        return nu;
+      }
+      m.profState = m.solo ? "done" : "idle";
+      /** Run fn once the profile is here (asked at the first welcome; a slow store waits 3 s at most, then the game starts without saving). */
+      m.whenProf = function (fn) {
+        if (m.profState === "done") return fn();
+        if (m.profState === "idle") {
+          m.profState = "loading";
+          R.profile().then(function (p) { if (p) { prof = migrateProf(p); g.saves = true; setProfView(); paint(); } m.profState = "done"; var q = m.profQ || []; m.profQ = []; q.forEach(function (f) { f(); }); });
+        }
+        (m.profQ = m.profQ || []).push(fn);
+      };
+      Object.defineProperty(g, "now", { get: function () { return m.solo ? performance.now() / 1000 : R.now(); } });
+      g.act = function (name, data) {
+        if (m.solo) { var ok; m.inHost = true; try { ok = o.onAction ? o.onAction(g, "me", name, data) !== false : true; } catch (e) { console.error(e); ok = false; } m.inHost = false; return Promise.resolve({ ok: ok }); }
+        return R.act(name, data);
+      };
+      g.fx = function (name, data) { if (!m.solo) R.fx(name, data); try { if (o.onFx) o.onFx(g, S.you, name, data); } catch (e) { console.error(e); } };
+      g.clearSave = function () { if (!m.solo && g.isHost && SAVE) R.clearWorld(); };
+      g.kick = function (id) { if (!m.solo && g.isHost) R.kick(id); };
+      g.teamColor = function (i) { return COLORS[(Number(i) || 0) % COLORS.length]; };
+      g.teams = [];
+      // Shots: sent once (start, speed, the shared clock's time), then every screen moves them by itself. The host decides what they hit.
+      var shots = [], shotSeq = 0, shotAt = 0; g.shots = shots;
+      var num = function (v, lo, hi) { v = Number(v); return v === v ? Math.max(lo, Math.min(hi, v)) : 0; };
+      function addShot(from, d) {
+        if (!d || typeof d !== "object" || typeof d.i !== "string") return;
+        if (shots.length >= 300) shots.shift();
+        var tm = teamsOf();
+        shots.push({ id: d.i, from: from, team: typeof tm[from] === "number" ? tm[from] : 0, kind: String(d.k || ""), r: num(d.r, 1, 200) || 4, x0: num(d.x, -1e5, 1e5), y0: num(d.y, -1e5, 1e5),
+          vx: num(d.vx, -5000, 5000), vy: num(d.vy, -5000, 5000), t0: Number(d.t) || g.now, life: num(d.l, 0.05, 8) || 2, x: num(d.x, -1e5, 1e5), y: num(d.y, -1e5, 1e5), age: 0 });
+      }
+      function moveShots() {
+        var now = g.now;
+        for (var i = shots.length - 1; i >= 0; i--) { var s = shots[i], a = now - s.t0; if (a > s.life || a < -2) shots.splice(i, 1); else { a = Math.max(0, a); s.age = a; s.x = s.x0 + s.vx * a; s.y = s.y0 + s.vy * a; } }
+      }
+      /** A place to start or come back in where the others can be seen (see the header). At the start of a match everyone runs setup() at once, so
+          they stand in a ring round o.at (default: the middle of o.x/o.y); a late joiner or a respawn lands o.gap away from someone still playing. */
+      g.spawnNear = function (o) {
+        o = o || {};
+        var kx = (o.keys || [])[0] || "x", ky = (o.keys || [])[1] || "y", gap = o.gap || 100, bx = o.x, by = o.y;
+        var mid = o.at || [bx ? (bx[0] + bx[1]) / 2 : 0, by ? (by[0] + by[1]) / 2 : 0];
+        var clamp = function (v, r) { return r ? Math.min(r[1], Math.max(r[0], v)) : v; };
+        var num = function (v) { return typeof v === "number" && isFinite(v); };
+        var all = g.players.filter(function (p) { return !p.watching; });
+        var live = all.filter(function (p) { return !p.me && p.online !== false && !p.away && p.state && num(p.state[kx]) && num(p.state[ky]) && (!o.skip || !o.skip(p)); });
+        var cx, cy, a, r;
+        if (live.length && !(m.inSetup && m.sawStart)) {
+          var t = live[Math.floor(Math.random() * live.length)];
+          cx = t.state[kx]; cy = t.state[ky]; a = Math.random() * Math.PI * 2; r = gap * (1 + Math.random() * 0.4);
+        } else {
+          var ids = all.map(function (p) { return String(p.id); }).sort(), i = Math.max(0, ids.indexOf(String(g.me.id))), n = Math.max(1, ids.length);
+          cx = mid[0]; cy = mid[1]; a = (i / n) * Math.PI * 2; r = n > 1 ? gap / (2 * Math.sin(Math.PI / n)) : 0;   // neighbours gap apart
+        }
+        // next to a wall the spot is pulled back in: take the side that stays farther from the one we stand next to
+        var at = function (ang) { var q = {}; q[kx] = clamp(cx + Math.cos(ang) * r, bx); q[ky] = clamp(cy + Math.sin(ang) * r, by); return q; };
+        var d = function (q) { return Math.hypot(q[kx] - cx, q[ky] - cy); };
+        var p1 = at(a), p2 = at(a + Math.PI);
+        return d(p2) > d(p1) + 1 ? p2 : p1;
+      };
+      g.shoot = function (s) {
+        if (g.state !== "playing" || !s || m.watching() || m.count() > 0) return null;
+        var t = performance.now(); if (t - shotAt < 80) return null; shotAt = t;   // 12 a second at most, like own state
+        var d = { i: String(S.you).slice(-6) + (++shotSeq).toString(36), x: Math.round(Number(s.x) || 0), y: Math.round(Number(s.y) || 0), vx: Math.round(Number(s.vx) || 0), vy: Math.round(Number(s.vy) || 0),
+          l: Math.round((Number(s.life) || 2) * 100) / 100, r: Number(s.r) || 4, k: String(s.kind || "").slice(0, 16), t: Math.round(g.now * 1000) / 1000 };
+        addShot(S.you, d); if (!m.solo) R.fx("_shot", d);
+        return d.i;
+      };
+      g.hit = function (shot) {
+        var id = shot && typeof shot === "object" ? shot.id : shot; if (!g.isHost || typeof id !== "string") return;
+        for (var i = shots.length - 1; i >= 0; i--) if (shots[i].id === id) shots.splice(i, 1);
+        if (!m.solo) R.fx("_hit", { i: id });
+      };
+      /** Seconds until the match goes live (0 = live). The host writes the go time once per match; until it arrives the others wait (2 s at most). */
+      m.count = function () {
+        if (!COUNT || !S.started) return 0;
+        var go = S.shared && S.shared._go;
+        if (!go || go.m !== S.match) return performance.now() - m.beganAt < 2000 ? COUNT : 0;
+        return Math.max(0, go.at - g.now);
+      };
+      m.watching = function () { return SEATS > 0 && S.started && !(seatsOf()[S.you] >= 0); };
+      function begin(fresh) { m.sawStart = !!fresh; g.late = !fresh; m.matchN = (m.matchN || 0) + 1; g.resumed = !m.solo && !!R.state.resumed; g.score = 0; g.time = 0; acc = 0; shots.length = 0; m.beganAt = performance.now(); rebuildShared(); refresh();
+        if (fresh && COUNT && g.isHost) rawShared({ _go: { m: S.match, at: Math.round((g.now + COUNT) * 1000) / 1000 } });
+        if (g.resumed && fresh) migrateWorld();
+        m.inSetup = true; try { if (o.setup) o.setup(g); } catch (e) { console.error(e); } finally { m.inSetup = false; } g.state = "playing"; m.phase = "playing"; lob.classList.remove("on"); hud(); paint(); }
+      // The lobby: one card, top to bottom: the game's name and one line saying what happens next, the room code with the invite, who is here,
+      // ONE main button (Start for the host; nothing to press for the others, the line says who starts), then the less common choices as small
+      // links (join with a code, private room, play alone, invite anyone) and other open rooms. It covers the whole play area, not just the
+      // board, so it has room on a phone held upright; buttons are at least 44 px high.
+      function lobby() {
+        var typed = {}, olds = lob.querySelectorAll("input");   // the lobby is redrawn when someone joins: keep what is being typed
+        for (var oi = 0; oi < olds.length; oi++) if (document.activeElement === olds[oi]) typed[olds[oi].getAttribute("aria-label")] = olds[oi].value;
+        var scrollY = lob.scrollTop;
+        lob.innerHTML = "";
+        lob.classList.add("on");
+        var card = el("div", "card"); lob.appendChild(card);
+        var add = function (e) { card.appendChild(e); return e; };
+        setTimeout(function () { lob.scrollTop = scrollY; var ins = lob.querySelectorAll("input"); for (var ii = 0; ii < ins.length; ii++) { var was = typed[ins[ii].getAttribute("aria-label")]; if (was !== undefined) { ins[ii].value = was; ins[ii].focus(); } } }, 0);
+        var ph = m.phase;
+        if (ph === "connecting") { add(el("h2", "", o.title || "Game")); add(el("p", "status", "Joining a room...")); return; }
+        if (ph === "closed") {
+          var c = (R.state.closed || {}).code, msgs = { 4001: "This game is no longer shared.", 4002: "This room is full.", 4003: "You opened this game in another tab or window.", 4005: "Something went wrong with the connection.", 4006: "The host removed you from this room.", 4007: "This game was changed. Press restart above to load the new version.", 4010: "This room closed because nobody played for a while." };
+          add(el("h2", "", c === 4010 ? "Room closed" : "Not connected"));
+          // tickcli-js/remote refusals name the deployment ("this site is not allowed for deployment dep_x"): the author needs that exact reason
+          var why = String((R.state.closed && R.state.closed.reason) || "");
+          var dep = c === 4001 && /deployment/.test(why) ? why.charAt(0).toUpperCase() + why.slice(1) + "." : "";
+          add(el("p", "status", dep || msgs[c] || why || "The connection closed."));
+          if (c === 4002 || c === 4010) add(btn(c === 4010 ? "Start a new room" : "Find another room", function () { join({}); }, "big"));
+          if (c === 4003 || c === 4005 || !c) add(btn(c === 4003 ? "Play here instead" : "Try again", function () { join({ code: S.code }); }, "big"));
+          return;
+        }
+        var list = players(), host = list.filter(function (p) { return p.host; })[0];
+        var cupNow = isCup() ? cup() : null, champ = cupNow && cupNow.champ && cupNow.champ !== "-" ? cupNow.champ : "";
+        var shared = !m.solo && !m.alone && S.code;   // a room others can come into
+        var seated = SEATS && !TEAMS && !isCup() ? list.filter(function (p) { return p.seat >= 0; }).length : list.length;
+        var need = isCup() ? (cupNow && cupNow.live && !cupNow.champ ? 0 : 2 - list.length) : MIN - seated;
+        if (m.solo) need = 0;
+
+        // ---- what this is, and what happens next
+        add(el("h2", "", champ ? "\uD83C\uDFC6 " + ((cupNow.names && cupNow.names[champ]) || nameOf(champ)) + " wins the tournament" : ph === "over" ? (cupNow ? "Match over" : "Game over") : (o.title || "Game")));
+        var next = m.solo ? "Playing alone on this device." : need > 0 ? "Waiting for " + need + " more " + (need === 1 ? "player" : "players") + "." : g.isHost ? (ph === "over" ? "Play again when everyone is ready." : "Everyone here? Press Start.") : host ? "Waiting for " + host.name + " to start." : "Waiting for a player to come back.";
+        add(el("p", "status", next)).setAttribute("aria-live", "polite");
+        if (ph === "over" && !cupNow && g.shared.score && typeof g.shared.score === "object") {
+          var sc = list.map(function (p) { return { n: p.name, s: Number(g.shared.score[p.id]) || 0 }; }).sort(function (a, b) { return b.s - a.s; });
+          add(el("p", "help", sc.map(function (x) { return x.n + " " + x.s; }).join(" \u00b7 ")));
+        } else if (ph !== "over" && o.help) add(el("p", "help", o.help));
+        if (cupNow) { var cl = cupLines(); for (var ci = 0; ci < cl.length; ci++) add(el("p", "cup", cl[ci])); }
+        if (m.solo && R) add(el("p", "note", "To play with others, open this game from the app it was shared in."));
+
+        // ---- the room closes soon: nobody did anything
+        if (!m.solo && R.state.idleAt) {
+          var iw = add(el("div", "warn")); iw.setAttribute("role", "alert");
+          iw.appendChild(el("span", "", "Nobody has played for a while, so this room closes in about a minute."));
+          iw.appendChild(btn("Keep it", function () { R.stay(); }, "sec"));
+        }
+
+        // ---- the code to read out, and the invite
+        if (shared) {
+          var inv = add(el("div", "box invite"));
+          var iv = inv.appendChild(el("div", ""));
+          iv.appendChild(el("div", "lbl", S.priv ? "Private room code" : "Room code"));
+          iv.appendChild(el("div", "code", S.code));
+          inv.appendChild(btn("Copy invite link", function () { R.invite(); }, "sec"));
+        }
+
+        // ---- who is here
+        if (!m.solo) {
+          var who = add(el("div", "box"));
+          var wl = who.appendChild(el("div", "lbl"));
+          wl.appendChild(el("span", "", "Players " + list.length + (S.max ? " of " + S.max : "")));
+          if (R.state.guest) wl.appendChild(btn(m.editName ? "Cancel" : "Change my name", function () { m.editName = !m.editName; lobby(); }, "link"));
+          if (R.state.guest && m.editName) {
+            var nm = el("input"); nm.maxLength = 20; nm.placeholder = "Your name"; nm.value = g.me.name || ""; nm.setAttribute("aria-label", "Your name");
+            var saveName = function () { var v = nm.value.trim(); if (v) { R.rename(v); m.editName = false; lobby(); } };
+            nm.addEventListener("keydown", function (e) { if (e.key === "Enter") saveName(); });
+            var nr = who.appendChild(el("div", "row")); nr.appendChild(nm); nr.appendChild(btn("Save", saveName));
+            setTimeout(function () { if (document.activeElement !== nm && typed["Your name"] === undefined) nm.focus(); }, 0);
+          }
+          var groups = [], labels = [], gi;
+          if (TEAMS) for (gi = 0; gi < TEAMS; gi++) { groups.push(list.filter(function (p) { return p.team === gi; })); labels.push("Team " + (gi + 1)); }
+          else if (SEATS && (!isCup() || (cupNow && cupNow.live))) {
+            groups.push(list.filter(function (p) { return p.seat >= 0; }).sort(function (a, b) { return a.seat - b.seat; })); labels.push(isCup() ? (ph === "over" ? "Next match" : "This match") : "Playing");
+            groups.push(list.filter(function (p) { return p.seat < 0; })); labels.push("Watching");
+          } else groups.push(list);
+          for (gi = 0; gi < groups.length; gi++) {
+            if (labels[gi] && (TEAMS || groups[gi].length)) { var th = who.appendChild(el("div", "sub", labels[gi])); if (TEAMS) th.style.color = COLORS[gi]; }
+            var ul = el("ul", "who");
+            for (var i = 0; i < groups[gi].length; i++) {
+              var p = groups[gi][i], li = el("li", (p.me ? "me" : "") + (p.away || !p.online ? " away" : ""), (p.host ? "\uD83D\uDC51 " : "") + (SN && !TEAMS && p.seat >= 0 && SN[p.seat] ? SN[p.seat] + ": " : "") + p.name + (p.me ? " (you)" : "") + (!p.online ? " \u00b7 reconnecting" : p.away ? " \u00b7 away" : ""));
+              if (p.host) li.title = "Host: starts the game";
+              if (TEAMS) li.style.boxShadow = "inset 4px 0 0 " + COLORS[gi];
+              ul.appendChild(li);
+            }
+            if (groups[gi].length) who.appendChild(ul);
+          }
+          var tr = el("div", "row");
+          if (TEAMS > 1 && ph !== "over") tr.appendChild(btn("Switch team", function () { R.act("_team", { to: ((g.me.team || 0) + 1) % TEAMS }); }, "sec"));
+          if (SEATS && !isCup() && !S.started) {
+            if (g.me.seat >= 0) tr.appendChild(btn("Watch instead", function () { R.act("_seat", { sit: false }); }, "sec"));
+            else if (g.seats.indexOf(null) >= 0) tr.appendChild(btn("Take a seat", function () { R.act("_seat", { sit: true }); }, "sec"));
+          }
+          if (tr.childNodes.length) who.appendChild(tr);
+        }
+
+        // ---- the one main action (the host's); saved games: Continue first
+        var go = function () { if (m.solo) soloStart(); else R.start(); };
+        if (g.isHost && isCup()) {
+          if (cupNow && cupNow.live && !cupNow.champ) add(btn(ph === "over" ? "Next match" : "Start match", function () { if (cupNext()) go(); else { refresh(); lobby(); } }, "big"));
+          else if (list.length >= 2) add(btn(cupNow && cupNow.champ ? "New tournament" : "Start tournament", function () { if (cupNew()) go(); else { refresh(); lobby(); } }, "big"));
+        } else if (g.isHost && seated >= MIN) {
+          var saved = SAVE && !m.solo && R.state.saved && R.state.saved.at;
+          // a save from another version of the game that it cannot read: only New game (the old save stays as the earlier copy)
+          if (saved && !canContinue()) add(el("p", "note", "This saved game was made by " + (savedV() < SAVEV ? "an older" : "another") + " version of the game, so it cannot be continued."));
+          if (saved && m.askNew) {   // a new game replaces the saved one at its first save: ask first
+            add(el("p", "help", "Start over? This replaces the saved game from " + when(saved) + "."));
+            var yr = add(el("div", "row")); yr.appendChild(btn("Yes, new game", function () { m.askNew = false; go(); })); yr.appendChild(btn("Keep it", function () { m.askNew = false; lobby(); }, "sec"));
+          } else {
+            if (saved && canContinue()) add(btn("Continue (saved " + when(saved) + ")", function () { m.askNew = false; m.resumeV = savedV(); R.start(true); }, "big"));
+            add(btn(saved ? "New game" : ph === "over" ? "Play again" : "Start game", saved ? function () { m.askNew = true; lobby(); } : go, saved && canContinue() ? "sec big" : "big"));
+          }
+        } else if (g.isHost && need > 0) add(btn("Start game", function () {}, "big")).disabled = true;   // shown, so it is clear what is missing
+        if (m.alone && (ph === "over" || !S.started)) add(btn("Play with others", function () { join({}); }, "sec big"));
+
+        // ---- less common: small links, one line; the code field opens on demand
+        var links = el("div", "links");
+        if (shared && !S.started && ph !== "over") links.appendChild(btn(m.codeOpen ? "Hide the code field" : "Join with a code", function () { m.codeOpen = !m.codeOpen; lobby(); }, "link"));
+        if (!m.solo && !m.alone && R.state.anyone && !R.state.guest) links.appendChild(btn("Invite anyone", function () { R.inviteAnyone(); }, "link"));   // people without an account: the app's public link
+        if (!m.solo && !S.priv && ph !== "over" && !m.alone) links.appendChild(btn("Make it private", function () { join({ priv: true }); }, "link"));
+        if (!m.solo && !m.alone && MIN <= 1 && !CUP && o.multiplayer.solo !== false) links.appendChild(btn("Play alone", function () { join({ alone: true }); }, "link"));
+        if (shared && !S.started && ph !== "over" && (m.codeOpen || typed["Room code"] !== undefined)) {   // a friend on another device (a phone, a laptop) read out their code
+          var jc = el("input"); jc.maxLength = 6; jc.placeholder = "Friend's code"; jc.setAttribute("aria-label", "Room code"); jc.setAttribute("autocapitalize", "characters"); jc.setAttribute("autocomplete", "off");
+          // room codes never use I, O, 0 or 1
+          var joinIt = function () { var v = jc.value.trim().toUpperCase(); if (!/^[A-HJ-NP-Z2-9]{4,6}$/.test(v)) return say("That is not a room code. Look at the big code on your friend's screen."); if (v !== S.code) join({ code: v }); };
+          jc.addEventListener("keydown", function (e) { if (e.key === "Enter") joinIt(); });
+          var jr = add(el("div", "row")); jr.appendChild(jc); jr.appendChild(btn("Join room", joinIt));
+          if (typed["Room code"] === undefined) setTimeout(function () { jc.focus(); }, 0);
+        }
+        if (links.childNodes.length) add(links);
+
+        if (LIST && !m.solo && !m.alone) openRooms(add);
+        if (SAVE && !m.solo && R.state.saveBusy) add(el("p", "note", "A saved game is being played in another room, so this room will not be saved."));
+        if (SAVE && !m.solo && R.state.saveError) add(el("p", "note", "The saved game could not be opened, so this game is not being saved."));
+        if (SAVE && !m.solo && R.state.saved && R.state.saved.at && !g.isHost && canContinue()) add(el("p", "note", "A saved game is waiting. " + (host ? host.name : "The host") + " can continue it."));
+      }
+      // ---- other open rooms of this game (multiplayer.roomList: false hides them): asked every 5 s while this lobby shows and the page is visible.
+      // Only rooms you can join are shown (full ones are left out, with a count), each as one row: who hosts it, how many, waiting or playing,
+      // how quick the host's connection is, and Join.
+      function openRooms(add) {
+        if (!m.roomsT) m.roomsT = setInterval(pollRooms, 5000);
+        if (!m.rooms) pollRooms();
+        var others = (m.rooms || []).filter(function (r) { return !r.you; }), open = others.filter(function (r) { return !r.full; }).slice(0, 6), full = others.length - open.length;
+        if (!open.length) return;
+        var box = add(el("div", "box"));
+        box.appendChild(el("div", "lbl", "Other rooms" + (full ? " \u00b7 " + full + " full not shown" : "")));
+        var ul = box.appendChild(el("ul", "rooms"));
+        open.forEach(function (r) {
+          var li = ul.appendChild(el("li"));
+          var t = li.appendChild(el("div", "t"));
+          t.appendChild(el("b", "", r.host ? r.host + "'s room" : "Room " + r.code));
+          var speed = !r.ping ? "" : r.ping < 80 ? "fast connection" : r.ping < 200 ? "ok connection" : "slow connection";
+          t.appendChild(el("small", "", [r.players + " of " + r.max, r.started ? "playing now" : "waiting", speed, r.slowed ? "busy" : ""].filter(Boolean).join(" \u00b7 ")));
+          if (r.ping) li.title = "The host's connection: " + r.ping + " ms";
+          li.appendChild(btn("Join", function () { join({ code: r.code }); }, "sec"));
+        });
+      }
+      function pollRooms() {
+        var on = lob.classList.contains("on") && (m.phase === "waiting" || m.phase === "over") && !m.solo && !m.alone;
+        if (!on) { clearInterval(m.roomsT); m.roomsT = 0; m.rooms = null; return; }
+        if (document.hidden || !R.rooms) return;
+        R.rooms().then(function (list) {
+          var was = JSON.stringify(m.rooms || []); m.rooms = list || [];
+          if (JSON.stringify(m.rooms) !== was && lob.classList.contains("on") && m.phase !== "connecting" && m.phase !== "closed") lobby();
+        });
+      }
+      function when(t) { try { return new Date(t).toLocaleDateString(undefined, { month: "short", day: "numeric" }); } catch (e) { return "earlier"; } }
+      function soloStart() { g.resumed = false; S.started = true; var keep = {}; for (var k in S.shared) if (k.charAt(0) === "_") keep[k] = S.shared[k]; S.shared = keep; begin(true); }
+      function join(x) {
+        m.alone = !!x.alone; m.autoStart = m.alone && !SAVE;   // alone: a private room of one that starts by itself (with saves the lobby offers Continue first)
+        if (m.alone && S.code) R.leave();
+        m.phase = "connecting"; lobby(); R.join({ spec: spec, code: x.code, priv: x.priv || m.alone, alone: m.alone, name: x.name });
+      }
+      m.lobby = lobby; m.begin = begin; m.refresh = refresh;
+      m.over = function () {
+        g.state = "over"; m.phase = "over"; refresh(); showEnd(); lobby();
+        if (o.scores && window.gameScores && g.shared.score && typeof g.shared.score === "object" && typeof g.shared.score[g.me.id] === "number") {
+          var mine = g.shared.score[g.me.id];
+          setTimeout(function () { if (g.state === "over") window.gameScores.finish(mine, { better: o.scoresBetter }); }, 600);
+        }
+      };
+      m.end = function (winner) {
+        if (!g.isHost) return warn("over", "g.gameOver() ends the match only on the host: call it inside host()");
+        // host() keeps running until the server's "ended" comes back: a second call must not record a cup result again (for the next pairing)
+        if (m.endedN === m.matchN) return;
+        m.endedN = m.matchN;
+        if (isCup()) cupResult(winner);
+        if (m.solo) { S.started = false; m.over(); } else R.end();
+      };
+      m.step = function (dt) {
+        showEnd();
+        g.players = players(); g.isHost = S.host === S.you; moveShots();
+        if ((g.countdown = m.count()) > 0) return;
+        if (o.update && !m.watching()) o.update(g, dt);
+        if (g.isHost && o.host && (m.solo || S.started)) { m.inHost = true; try { o.host(g, dt); } finally { m.inHost = false; } }
+      };
+      m.frame = function () { if (!m.solo && S.host === S.you) R.alive(); };
+      /** Before each drawn frame: others as they should be seen now; the shared state eased too (except on the host, which holds the real one). */
+      m.pre = function () {
+        g.players = players(); g.isHost = S.host === S.you; moveShots();
+        var left = g.countdown = m.count(), txt = left > 0 ? String(Math.ceil(left)) : "";
+        if (cnt.textContent !== txt) { cnt.textContent = txt; cnt.classList.toggle("on", !!txt); }
+        if (!m.solo && !g.isHost) g.shared = sharedOf(R.sharedView());
+      };
+      if (m.solo) { m.phase = "waiting"; refresh(); balance(); refresh(); lobby(); return m; }
+      R.on("welcome", function (w, r) {
+        refresh(); rebuildShared();
+        if (r && r.restarted) say("The server restarted, so a new match started.", true);
+        else if (r && r.kept) say("Back after a short pause.", true);
+        // back after a dropped connection into the same match: carry on; anything else (a new match, a restart) starts fresh
+        balance();
+        m.whenProf(function () {
+          if (S.started) { if (!(g.state === "playing" && m.phase === "playing" && r && !r.restarted && !r.newMatch)) begin(); }
+          else { if (g.state === "playing") g.state = "ready"; m.phase = "waiting"; lobby(); if (m.autoStart && g.isHost && MIN <= 1) { m.autoStart = false; R.start(); } }
+        });
+      });
+      R.on("sync", function () { refresh(); rebuildShared(); });
+      // the saved profile came after the 3 s wait: use it if the game has not changed its own empty copy yet, else keep saving off for this page
+      R.on("profile", function () {
+        if (g.saves || m.solo) return;
+        if (m.profWritten) { if (!m.warned.profLate) { m.warned.profLate = 1; say("Progress is not being saved in this game."); } return; }
+        var p = R.adoptProfile && R.adoptProfile();
+        if (p) { prof = p; g.saves = true; setProfView(); paint(); }
+      });
+      R.on("players", function () { refresh(); balance(); if (m.phase !== "playing") lobby(); });
+      R.on("joined", function (p) { say(p.name + " joined"); });
+      R.on("newer", function () { say("This game was changed. Press restart above to play the new version with the others.", true); });
+      R.on("left", function (id) { say(nameOf(id) + " left"); });
+      R.on("shared", function () { rebuildShared(); if ((TEAMS || SEATS) && m.phase !== "playing") { refresh(); lobby(); } });
+      R.on("host", function (id, was) { refresh(); balance(); if (was !== undefined && id && was && id !== was) say(id === S.you ? "You are the host now" : nameOf(id) + " is the host now"); if (m.phase !== "playing") lobby(); });
+      R.on("started", function () { m.whenProf(function () { begin(true); }); });
+      R.on("ended", function () { R.flush(); m.over(); });
+      R.on("saved", function () { if (m.phase !== "playing") lobby(); });
+      // nobody did anything for a long time: the lobby shows "closes in about a minute" with Keep it; in a match a notice (any move keeps the room)
+      R.on("idle", function (at) { if (m.phase !== "playing") lobby(); else if (at) say("Nobody has moved for a while, so this room closes in a minute.", true); });
+      R.on("action", function (id, from, name, data) {
+        if (!g.isHost) return R.answer(id, false, "not host");
+        if (name === "_team") {   // the shell's own: switch team in the lobby, if that team has room
+          var to = data && Math.floor(data.to), size = Math.ceil(spec.max / TEAMS), n = g.players.filter(function (p) { return p.team === to; }).length;
+          if (!TEAMS || S.started || !(to >= 0 && to < TEAMS) || n >= size) return R.answer(id, false, "full");
+          var patch = {}; patch[from] = to; rawShared({ _teams: patch }); refresh(); lobby(); return R.answer(id, true);   // the host's own lobby shows it too
+        }
+        if (name === "_seat") {   // the shell's own: sit down or watch, before the start
+          if (!SEATS || isCup() || S.started) return R.answer(id, false, "started");
+          var sp = {}, used = seatsOf(), free = -1;
+          if (data && data.sit) { for (var f = 0; f < SEATS && free < 0; f++) { var taken = false; for (var u in used) if (used[u] === f && S.players[u]) taken = true; if (!taken) free = f; } if (free < 0) return R.answer(id, false, "full"); sp[from] = free; }
+          else sp[from] = -1;
+          rawShared({ _seats: sp }); seatBalance(); refresh(); lobby(); return R.answer(id, true);
+        }
+        if (name.charAt(0) === "_") return R.answer(id, false, "unknown");
+        if (SEATS && S.started && !(seatsOf()[from] >= 0)) return R.answer(id, false, "watching");
+        var ok; m.inHost = true;
+        try { ok = o.onAction ? o.onAction(g, from, name, data) !== false : true; } catch (e) { console.error(e); ok = false; } finally { m.inHost = false; }
+        R.answer(id, ok);
+      });
+      R.on("fx", function (from, name, data) {
+        if (name === "_shot") return addShot(from, data);
+        if (name === "_hit") { if (from === S.host && data) for (var i = shots.length - 1; i >= 0; i--) if (shots[i].id === data.i) shots.splice(i, 1); return; }
+        if (name.charAt(0) === "_") return;
+        try { if (o.onFx) o.onFx(g, from, name, data); } catch (e) { console.error(e); }
+      });
+      R.on("invite", function (ok) { say(ok ? "Invite link copied" : "Copy the page address and add #room=" + S.code); });
+      // A write the room refused (too big, too long, too deep, a number out of its range) is refused whole and the others never get it: say so once
+      // per kind on screen, and in the console with where and why, so whoever fixes the game has something to read.
+      var WHY = { too_big: "something too big", bad_value: "something too long or too deep", out_of_range: "a number outside its range" };
+      R.on("error", function (code, ref) {
+        if (code === "not_host" || code === "old_term") return;
+        if (code === "too_much_data") return warn("data", "room: this game sends more than the server allows for one room, so its updates now go out less often. Write only what changes, fewer times a second (g.shared.set inside host() runs every frame: keep big lists out of it).");
+        var at = typeof ref === "string" && ref ? ref : "";
+        warn("e" + code + at, "room: " + code + (at ? " at " + at : "") + (WHY[code] ? " (limits: text 200 characters, lists 64 items, 64 keys per object, 4 levels deep, 2 KB per player, 64 KB shared; a write that breaks one is refused whole)" : ""));
+        if (WHY[code] && !m.warned["s" + code + at]) { m.warned["s" + code + at] = 1; say("This game tried to share " + WHY[code] + (at ? ": " + at : "") + ". The other players did not get it."); }
+      });
+      R.on("status", function (s, d) {
+        if (s === "retry") say("Connection lost, reconnecting...");
+        else if (s === "closed") { m.phase = "closed"; g.state = "over"; lobby(); }
+        else if (s === "unavailable") { m.solo = true; m.profState = "done"; S = { you: "me", host: "me", code: "", match: 1, term: 1, started: false, players: { me: { name: "You", state: {} } }, shared: {} }; m.phase = "waiting"; refresh(); balance(); refresh(); lobby(); }
+        void d;
+      });
+      lobby();
+      R.ready().then(function (inf) { if (inf) join({}); });
+      return m;
+    }
+
+    function input(a) {
+      if (mp) { if (g.state === "playing" && !mp.watching() && !(mp.count() > 0)) try { if (o.onInput) o.onInput(g, a); } catch (e) { console.error(e); } return; }
+      if (g.state === "ready" || g.state === "over") { if (a === "action") g.start(); return; }
+      if (g.state === "paused") { if (a === "action") g.pause(); return; }
+      try { if (o.onInput) o.onInput(g, a); } catch (e) { console.error(e); }
+    }
+    var KEYS = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right", w: "up", s: "down", a: "left", d: "right", W: "up", S: "down", A: "left", D: "right", " ": "action", Enter: "action" };
+    // Held directions for action games: g.held.left (keys or the on-screen pad), g.axis() = {x, y} with length 0 or 1.
+    g.held = { up: false, down: false, left: false, right: false };
+    g.axis = function () { var x = (g.held.right ? 1 : 0) - (g.held.left ? 1 : 0), y = (g.held.down ? 1 : 0) - (g.held.up ? 1 : 0), l = Math.hypot(x, y) || 1; return { x: x / l, y: y / l }; };
+    // Extra buttons (Game({buttons: [{id, label, key}]})): held like the directions, pressed through onInput; on touch screens a row under the pad.
+    var BTN = (Array.isArray(o.buttons) ? o.buttons : []).filter(function (b) { return b && typeof b.id === "string" && !KEYS[b.id] && !/^(up|down|left|right|action)$/.test(b.id); }).slice(0, 4);
+    // On a phone the pad sits under the left thumb and the extra buttons under the right one.
+    var ctl = document.createElement("div"); ctl.className = "tg-ctl"; root.appendChild(ctl); ctl.appendChild(pad);
+    var acts = document.createElement("div"); acts.className = "tg-acts"; ctl.appendChild(acts);
+    function btnOf(e) { for (var i = 0; i < BTN.length; i++) { var k = BTN[i].key; if (k && (e.key === k || String(e.key).toLowerCase() === String(k).toLowerCase())) return BTN[i].id; } return null; }
+    BTN.forEach(function (b) {
+      g.held[b.id] = false;
+      var e = document.createElement("button"); e.textContent = b.label || b.id; e.setAttribute("data-btn", b.id);
+      e.addEventListener("pointerdown", function (ev) { g.held[b.id] = true; input(b.id); ev.preventDefault(); });
+      ["pointerup", "pointercancel", "pointerleave"].forEach(function (n) { e.addEventListener(n, function () { g.held[b.id] = false; }); });
+      acts.appendChild(e);
+    });
+    acts.classList.toggle("on", wantPad && BTN.length > 0);
+    document.addEventListener("keyup", function (e) { var a = KEYS[e.key]; if (a && a !== "action") g.held[a] = false; var b = btnOf(e); if (b) g.held[b] = false; });
+    addEventListener("blur", function () { for (var k in g.held) g.held[k] = false; g.pointer.down = false; });
+    // headless: the page's engine reads the same keys, and some (Phaser) skip a key event that was already cancelled, so the shell never cancels them
+    var keep = function (e) { if (!HL) e.preventDefault(); };
+    document.addEventListener("keydown", function (e) {
+      var typing = e.target && /^(INPUT|TEXTAREA)$/.test(e.target.tagName);
+      var h = KEYS[e.key]; if (h && h !== "action" && !typing) g.held[h] = true;
+      var xb = typing ? null : btnOf(e);
+      if (xb) { if (!e.repeat) { g.held[xb] = true; if (g.state === "playing") input(xb); } keep(e); return; }
+      if (!mp && (e.key === "p" || e.key === "P" || e.key === "Escape")) { if (g.state === "playing" || g.state === "paused") { g.pause(); keep(e); } return; }
+      var a = KEYS[e.key]; if (!a) return;
+      if (e.target && /^(INPUT|TEXTAREA)$/.test(e.target.tagName)) return;   // typing a name in the lobby
+      if (a === "action" && g.state === "playing") { if (e.repeat) { keep(e); return; }   // a held key is one press (auto-fire: read g.held in update)
+        if (!(mp && (mp.watching() || mp.count() > 0))) try { if (o.onInput) o.onInput(g, "action"); } catch (x) { console.error(x); } keep(e); return; }
+      input(a); keep(e);
+    });
+    var padDir = function (b) { return b.className.indexOf("u") >= 0 ? "up" : b.className.indexOf("d") >= 0 ? "down" : b.className.indexOf("l") >= 0 ? "left" : "right"; };
+    // Each finger holds its own direction, so a phone can steer and drive at once: lifting one finger lets go of that direction only.
+    var padUp = function (e) { var b = e.target && e.target.closest ? e.target.closest("button") : null; if (b) g.held[padDir(b)] = false; else g.held.up = g.held.down = g.held.left = g.held.right = false; };
+    pad.addEventListener("pointerup", padUp); pad.addEventListener("pointercancel", padUp);
+    pad.addEventListener("pointerdown", function (e) { var b = e.target.closest("button"); if (!b) return; g.held[padDir(b)] = true; try { b.setPointerCapture(e.pointerId); } catch (x) { /* a made-up pointer */ } input(padDir(b)); e.preventDefault(); });
+    var sx = 0, sy = 0, sd = false;
+    board.addEventListener("pointerdown", function (e) { sx = e.clientX; sy = e.clientY; sd = true; if (e.target === canvas) { point(e); g.pointer.down = true; } });
+    canvas.addEventListener("pointermove", point);
+    addEventListener("pointerup", function () { g.pointer.down = false; }); addEventListener("pointercancel", function () { g.pointer.down = false; });
+    board.addEventListener("pointerup", function (e) {
+      if (!sd) return; sd = false; var dx = e.clientX - sx, dy = e.clientY - sy;
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < 24) {
+        if (e.target !== canvas) return;
+        point(e);
+        // a click or tap: the game's onPointer(g, x, y) in board units when it has one (and the player is in the match), else the "action" input
+        if (o.onPointer && g.state === "playing") { if (!(mp && (mp.watching() || mp.count() > 0))) try { o.onPointer(g, g.pointer.x, g.pointer.y); } catch (x) { console.error(x); } }
+        else input("action");
+        return;
+      }
+      input(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? "right" : "left") : (dy > 0 ? "down" : "up"));
+    });
+    document.addEventListener("visibilitychange", function () { if (!mp && document.hidden && g.state === "playing") g.pause(); });
+    if (!HL) noZoom();   // headless: the page's engine handles its own touches
+    /* Phones, iPhone Safari above all: a quick double or triple tap zooms, tap-then-hold zooms, and a long press shows a magnifier or a menu, even with
+       touch-action none and the pointer events cancelled. Only a cancelled touch event stops those, so: the d-pad and ability buttons cancel every touch
+       (they work on pointer events), any touch that starts within 400 ms of the last one is cancelled (a button tapped that fast is clicked here, since a
+       cancelled touch gives no click), and so is a second finger, a pinch and the long-press menu. Text fields and plain swipes in a scrolling list keep
+       their touches. The viewport is also told not to zoom (a page opened in its own tab). */
+    function noZoom() {
+      var vp = document.querySelector('meta[name="viewport"]');
+      if (!vp) { vp = document.createElement("meta"); vp.name = "viewport"; document.head.appendChild(vp); }
+      vp.content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
+      var at = function (t, sel) { return t && t.closest ? t.closest(sel) : null; };
+      var typing = function (t) { return at(t, "input,textarea,select,[contenteditable]"); };
+      var ctl = function (t) { return at(t, ".tg-pad,.tg-acts"); };
+      var lastEnd = 0, eaten = false, opt = { passive: false, capture: true };
+      document.addEventListener("touchstart", function (e) {
+        var t = e.target; eaten = false; if (typing(t)) return;
+        var quick = Date.now() - lastEnd < 400, swipeList = at(t, ".tg-lob,.tg-ov p") && !at(t, "button");
+        eaten = !!(ctl(t) || e.touches.length > 1 || (quick && !swipeList));
+        if (eaten && e.cancelable) e.preventDefault();
+      }, opt);
+      document.addEventListener("touchend", function (e) {
+        var t = e.target; lastEnd = Date.now();
+        if (!eaten || typing(t) || ctl(t) || !e.cancelable) return;
+        e.preventDefault();
+        var b = at(t, "button"); if (b && !b.disabled && !e.touches.length) b.click();
+      }, opt);
+      document.addEventListener("gesturestart", function (e) { e.preventDefault(); }, opt);
+      document.addEventListener("dblclick", function (e) { if (!typing(e.target)) e.preventDefault(); }, opt);
+      document.addEventListener("contextmenu", function (e) { if (!typing(e.target)) e.preventDefault(); }, opt);
+      document.addEventListener("selectstart", function (e) { if (!typing(e.target)) e.preventDefault(); }, opt);
+    }
+
+    var last = 0, acc = 0;
+    function loop(ts) {
+      if (g.state === "playing") {
+        if (mp) mp.pre();
+        if (!last) last = ts;
+        acc += Math.min(0.25, (ts - last) / 1000); last = ts;
+        var n = 0;
+        while (acc >= step && n++ < 8 && g.state === "playing") {
+          g.time += step;
+          try { if (mp) mp.step(step); else if (o.update) o.update(g, step); } catch (e) { console.error(e); if (!mp) g.state = "paused"; }
+          acc -= step;
+        }
+        if (n >= 8) acc = 0;
+        QL.skip = QL.half && !QL.skip;
+        if (!QL.skip) { var p0 = performance.now(); hud(); paint(); measure(ts, performance.now() - p0); }
+      } else { last = 0; QL.t0 = 0; }
+      if (mp) mp.frame();
+      requestAnimationFrame(loop);
+    }
+    addEventListener("resize", fit);
+    if (window.ResizeObserver) new ResizeObserver(fit).observe(area);
+    if (!mp) screen(o.title || "Ready", o.help || "Arrow keys or swipe to play.", "Start");
+    root.tabIndex = -1; if (mp) mp.inSetup = true; try { if (o.setup) o.setup(g); } catch (e) { console.error(e); } finally { if (mp) mp.inSetup = false; }   // state exists before the first draw (the start screen shows the board behind it)
+    fit(); hud(); requestAnimationFrame(loop);
+    window.game = g;
+    return g;
+  };
+})();