@origingame/engine 0.0.0-stage → 0.1.0

package/shell/platform.ts

@@ -0,0 +1,203 @@
+// og.platform on the web: the shell's answer to the engine Worker's
+// platform calls. With a Player framing the page, each call goes to it over
+// Player protocol 2 (./player.ts, origin-checked postMessage; the Player
+// owns every credential; or the Stage overlay in the page's own document),
+// as its hello's capabilities allow; an answer's `time` (the Player's clock)
+// passes on to og.platform; without one, or
+// where the Player answers no such method, the browser's own storage answers
+// (../src/platform-local.ts over localStorage). The mapping:
+// docs/web-export.md §Platform services.
+//
+//   store.get/set/list   store.get / store.set / store.list, each key with its
+//                        own revision: og.platform's revision N sends
+//                        revision N, `create` sends revision 0 (only a key
+//                        never written), revision 0 sends none (the last
+//                        write wins); a conflict carries the key's revision.
+//                        A Player with save.* but no store.* (older ones)
+//                        keeps the store in the save's `store` object, read
+//                        with save.read (or save.get) and written back at the
+//                        save's revision; neither: the browser's storage.
+//   leaderboard.submit   leaderboard.submit { score, board, order } → { board, rank, best }
+//   leaderboard.top      leaderboard.top { n, board } → { board, sort, top, me }
+//   leaderboard.around   leaderboard.around { n, board } → { board, sort, entries, me }
+//                        (older Players: leaderboard.top { n: 100 }, cut around me)
+//   telemetry            an `event` named game.custom.<name>
+//   point                point.award { reason, amount } → { granted, balance }
+//   ai.mark              ai.mark { kind, label, model? } → { marked }
+
+import { answerLocally, fail, localPlatform, type LocalDocument, type LocalPersistence, type PlatformAnswer, type PlatformCall, type PlatformHost } from "../src/platform-local.ts";
+export { storagePersistence } from "../src/platform-local.ts";
+import type { PlayerResult } from "./player.ts";
+
+/** The part of the Player link this needs (connectPlayer's answer). */
+export interface PlayerLink {
+  readonly framed: boolean;
+  readonly hosted: boolean;
+  readonly capabilities: readonly string[];
+  request(method: string, args?: Record<string, unknown>): Promise<PlayerResult>;
+  event(name: string, attrs?: Record<string, string | number | boolean | null>): void;
+}
+
+type Save = { store?: Record<string, { value: unknown; revision: number }> } & Record<string, unknown>;
+
+function asSave(data: unknown): Save {
+  return data && typeof data === "object" && !Array.isArray(data) ? (data as Save) : {};
+}
+
+/** The Player's `time` on an answer, when it stamped one: og.platform's clock is then the Player's. */
+const stamp = (r: PlayerResult | undefined): { time?: number } => (typeof r?.time === "number" ? { time: r.time } : {});
+
+/** The Player's answer as og.platform's (a conflict keeps the revision it names; the Player's `time` passes on). */
+const fromPlayer = (r: PlayerResult, data: (d: unknown) => unknown): PlatformAnswer =>
+  r.ok
+    ? { ok: true, data: data(r.data), ...stamp(r) }
+    : { ok: false, error: { code: r.error.code, message: r.error.message, retryable: r.error.retryable, ...(typeof r.error.revision === "number" ? { revision: r.error.revision } : {}) }, ...stamp(r) };
+
+const STORE = ["store.get", "store.set", "store.list"];
+type Entry = { rank: number; name: string; score: number; me?: boolean };
+
+/** og.platform's leaderboard answer: `order` from the Player's `sort`. */
+const board = (a: Record<string, unknown>, d: unknown, list: "top" | "entries") => {
+  const t = (d ?? {}) as { board?: string; sort?: string; top?: Entry[]; entries?: Entry[]; me?: { rank: number } | null };
+  const me = t.me ?? null;
+  const entries = (t[list] ?? []).map((e) => ({ rank: e.rank, name: e.name, score: e.score, me: e.me ?? (!!me && e.rank === me.rank) }));
+  return { board: t.board ?? a["board"], order: t.sort === "asc" ? "asc" : "desc", entries, me };
+};
+
+/** The Player-backed platform, falling back to `local` (the browser's storage). */
+export function playerPlatform(player: PlayerLink, local: LocalPersistence): PlatformHost {
+  const fallback = localPlatform(local);
+  const has = (m: string) => player.capabilities.includes(m);
+  const keyed = STORE.every(has);
+  const saved = (has("save.read") || has("save.get")) && has("save.set");
+  const capabilities = [
+    ...STORE,
+    "telemetry",
+    ...(has("leaderboard.submit") ? ["leaderboard.submit"] : []),
+    ...(has("leaderboard.top") ? ["leaderboard.top"] : []),
+    ...(has("leaderboard.around") || has("leaderboard.top") ? ["leaderboard.around"] : []),
+    ...(has("point.award") ? ["point"] : []),
+    ...(has("ai.mark") ? ["ai.mark"] : []),
+  ];
+  let queue: Promise<void> = Promise.resolve();
+
+  const viaLocal = (call: PlatformCall): PlatformAnswer | null => {
+    let out: PlatformAnswer | null = null;
+    fallback.handle([call], (_r, a) => (out = a));
+    return out;
+  };
+
+  /** The keyed store, through the Player's store.* methods. */
+  const keyedStore = async (call: PlatformCall): Promise<PlatformAnswer | null> => {
+    const a = call.args;
+    if (call.method === "store.get") return fromPlayer(await player.request("store.get", { key: a["key"] }), (d) => d);
+    if (call.method === "store.list") return fromPlayer(await player.request("store.list"), (d) => ({ keys: ((d ?? {}) as { keys?: unknown[] }).keys ?? [] }));
+    const revision = a["create"] === true ? 0 : Number(a["revision"] ?? 0) > 0 ? Number(a["revision"]) : undefined;
+    const r = await player.request("store.set", { key: a["key"], value: a["value"] ?? null, ...(revision === undefined ? {} : { revision }) });
+    return r.ok || r.error.code !== "unavailable" ? fromPlayer(r, (d) => d) : viaLocal(call);
+  };
+
+  /** The store in the save's `store` object (a Player with save.* and no store.*). */
+  const savedStore = async (call: PlatformCall): Promise<PlatformAnswer | null> => {
+    const read = has("save.read");
+    const got = await player.request(read ? "save.read" : "save.get");
+    if (!got.ok) return got.error.code === "unavailable" ? viaLocal(call) : fromPlayer(got, () => null);
+    const at = read ? ((got.data ?? {}) as { data?: unknown; revision?: number | null }) : { data: got.data, revision: undefined };
+    const save = asSave(at.data);
+    const doc: LocalDocument = { version: 1, player: "", store: { ...(save.store ?? {}) }, boards: {}, points: { balance: 0, grants: [] }, marks: [], events: [] };
+    const answer = answerLocally(doc, call);
+    if (call.method !== "store.set" || !answer?.ok) return answer && { ...answer, ...stamp(got) };
+    // Written back at the revision it was read at: a write from another device in between is a conflict.
+    const revision = typeof at.revision === "number" ? at.revision : undefined;
+    const put = await player.request("save.set", { data: { ...save, store: doc.store }, ...(revision === undefined ? {} : { revision }) });
+    if (!put.ok) return fromPlayer(put, () => null);
+    const queued = (put.data as { queued?: boolean } | null)?.queued === true;
+    return { ok: true, data: { ...(answer.data as object), ...(queued ? { queued: true } : {}) }, ...stamp(put.time === undefined ? got : put) };
+  };
+
+  const one = async (call: PlatformCall): Promise<PlatformAnswer | null> => {
+    const a = call.args;
+    if (STORE.includes(call.method)) return keyed ? keyedStore(call) : saved ? savedStore(call) : viaLocal(call);
+    const n = Math.max(1, Math.min(100, Number(a["count"] ?? 10)));
+    switch (call.method) {
+      case "telemetry":
+        player.event(`game.custom.${String(a["name"])}`, a["attrs"] as Record<string, string | number | boolean | null>);
+        return null;
+      case "leaderboard.submit":
+        if (!has("leaderboard.submit")) return fail("unavailable", "this Player answers no leaderboard.submit here");
+        return fromPlayer(await player.request("leaderboard.submit", { score: a["score"], board: a["board"], order: a["order"] }), (d) => {
+          const r = (d ?? {}) as { board?: string; rank?: number | null; best?: number | null; queued?: boolean };
+          return { board: r.board ?? a["board"], rank: r.rank ?? null, best: r.best ?? null, ...(r.queued ? { queued: true } : {}) };
+        });
+      case "leaderboard.top":
+        if (!has("leaderboard.top")) return fail("unavailable", "this Player answers no leaderboard.top here");
+        return fromPlayer(await player.request("leaderboard.top", { n, board: a["board"] }), (d) => board(a, d, "top"));
+      case "leaderboard.around": {
+        if (has("leaderboard.around")) return fromPlayer(await player.request("leaderboard.around", { n, board: a["board"] }), (d) => board(a, d, "entries"));
+        if (!has("leaderboard.top")) return fail("unavailable", "this Player answers no leaderboard.around here");
+        // An older Player: the top 100, cut around the player.
+        return fromPlayer(await player.request("leaderboard.top", { n: 100, board: a["board"] }), (d) => {
+          const b = board(a, d, "top");
+          const at = b.entries.findIndex((e) => e.me);
+          const from = b.me && at >= 0 ? Math.max(0, Math.min(b.entries.length - n, at - Math.floor(n / 2))) : 0;
+          return { ...b, entries: b.entries.slice(from, from + n) };
+        });
+      }
+      case "point":
+        if (!has("point.award")) return fail("unavailable", "this Player answers no point.award here");
+        return fromPlayer(await player.request("point.award", { reason: a["reason"], amount: a["amount"] ?? 1 }), (d) => {
+          const r = (d ?? {}) as { granted?: number; balance?: number | null };
+          return { granted: r.granted ?? 0, balance: r.balance ?? null };
+        });
+      case "ai.mark":
+        if (!has("ai.mark")) return fail("unavailable", "this Player answers no ai.mark here");
+        return fromPlayer(await player.request("ai.mark", { kind: a["kind"], label: a["label"], ...(typeof a["model"] === "string" ? { model: a["model"] } : {}) }), () => ({ marked: true }));
+      default:
+        return fail("unavailable", `the Player has no ${call.method} method in protocol 2`);
+    }
+  };
+
+  return {
+    host: "player",
+    capabilities,
+    handle(calls, answer) {
+      // In order: a store write through the save reads it first, so calls never interleave.
+      for (const call of calls) {
+        queue = queue.then(async () => {
+          let r: PlatformAnswer | null;
+          try {
+            r = await one(call);
+          } catch (e) {
+            r = fail("failed", e instanceof Error ? e.message : String(e));
+          }
+          if (r) answer(call.request, r);
+        });
+      }
+    },
+  };
+}
+
+/**
+ * A host that holds calls until `ready` names the real one: a framed page's
+ * first calls (the first tick, behind the gate) wait for the Player's hello
+ * instead of reaching the browser's storage.
+ */
+export function deferredPlatform(ready: Promise<PlatformHost>, capabilities: readonly string[]): PlatformHost {
+  let real: PlatformHost | null = null;
+  const held: Array<[readonly PlatformCall[], (request: number, result: PlatformAnswer) => void]> = [];
+  void ready.then((h) => {
+    real = h;
+    for (const [calls, answer] of held.splice(0)) h.handle(calls, answer);
+  });
+  return {
+    host: "player",
+    capabilities,
+    handle(calls, answer) {
+      if (real) real.handle(calls, answer);
+      else held.push([calls, answer]);
+    },
+  };
+}
+
+/** How long a framed page waits for a Player's hello before the browser's storage answers. */
+export const HELLO_WAIT_MS = 1500;

package/shell/player.ts

@@ -0,0 +1,238 @@
+// The Player wire, protocol 2 (origingame/docs/player-protocol.md; types in
+// origin/packages/contracts/src/player-wire.ts), game side: the shell says
+// `hello` at startup and owns its readiness: `loading` with the real bytes
+// received, `ready` at the first rendered frame, `fail` before ready,
+// `crash` after it (an error name and a fingerprint only), one `sample`
+// with the startup milestones and the renderer. It hears `hello`, `start`,
+// `gesture`, `pause` and `resume` from the Player, and the `result` of each
+// `call` it made (og.platform's calls, through ./platform.ts).
+//
+// Rules: post only to `window.parent`, naming this page's own origin (the
+// Player and its releases share the play origin); accept only messages from
+// `window.parent` at this origin with `og: "player", protocol: 2`.
+//
+// A top-level page with no `window.__OG_GAME` that was told its own origin
+// as the Stage host (`window.__OG_STAGE_HOST__`, decided as the og-probe
+// wire decides it: ./wire.ts `stageInPage`) has the platform's Stage overlay
+// drawn in its own document, and that overlay is its Player: the shell posts
+// to its own window at its own origin and hears only its own window at that
+// origin. Every post there reaches the shell too, so a `hello` that names a
+// `substrate` or lists no `capabilities` (the shell's own) is not the
+// Player's. The hello repeats every 250 ms until the overlay answers (or
+// HELLO_WAIT_MS passes), in case its listener comes up after the shell.
+// Any other unframed page sends nothing and hears nothing.
+//
+// This is the `frame` transport. A top-level page the platform published
+// (`window.__OG_GAME`) speaks the same protocol to its play origin over
+// same-origin HTTP instead (`page`, ./transport.ts); og build declares both
+// in `<meta name="og-player" content="frame page">`.
+
+import { stageInPage } from "./wire.ts";
+
+export const PLAYER_WIRE = "player";
+export const PLAYER_WIRE_PROTOCOL = 2;
+
+export interface PlayerEvents {
+  /** The Player answered hello (`started`: play began already; `paused`: it covers the game). */
+  hello?(m: { started: boolean; paused: boolean; capabilities: readonly string[] }): void;
+  start?(): void;
+  gesture?(): void;
+  pause?(): void;
+  resume?(): void;
+}
+
+/** A short fingerprint of an error message: `[a-z0-9-]{1,64}` (FNV-1a of the first line, hex). */
+export function fingerprint(message: string): string {
+  const line = (message.split("\n")[0] ?? "").replace(/\d+/g, "#");
+  let h = 0x811c9dc5;
+  for (let i = 0; i < line.length; i++) {
+    h ^= line.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return `oe-${h.toString(16).padStart(8, "0")}`;
+}
+
+/** A `result`: the data, or the Player's error; `time` when the Player stamped it (UTC ms, its clock). */
+export type PlayerResult =
+  | { readonly ok: true; readonly data: unknown; readonly time?: number }
+  | { readonly ok: false; readonly error: { readonly code: string; readonly message: string; readonly retryable: boolean; readonly status?: number; readonly revision?: number }; readonly time?: number };
+
+/** A message's `time` field, when it is a finite number. */
+export const timeOf = (m: Record<string, unknown>): { time?: number } =>
+  typeof m["time"] === "number" && Number.isFinite(m["time"]) ? { time: m["time"] } : {};
+
+/** How long a call waits for its `result` before it fails with `timeout`. */
+export const CALL_TIMEOUT_MS = 15_000;
+
+/** Who the bridge speaks to: the framing Player, the Stage overlay in this document, or no one. */
+export type PlayerPeer = "parent" | "self" | null;
+
+/** How long the shell repeats its hello to the Stage overlay in its own document. */
+const SELF_HELLO_EVERY_MS = 250;
+const SELF_HELLO_TRIES = 6;
+
+export function connectPlayer(events: PlayerEvents) {
+  const w = globalThis as unknown as Window & Record<string, unknown>;
+  const framed = (() => {
+    try {
+      return w.parent !== w;
+    } catch {
+      return true;
+    }
+  })();
+  const peer: PlayerPeer = framed ? "parent" : w["__OG_GAME"] === undefined && stageInPage(w) ? "self" : null;
+  const target = (): Window => (peer === "self" ? w : w.parent);
+  const origin = w.location.origin;
+  let lastValue = -1;
+  let readySent = false;
+  // After fail or crash the session is over: a late ready is not sent.
+  let ended = false;
+  let heard = false;
+  let started = false;
+  let paused = false;
+  let capabilities: readonly string[] = [];
+  let nextCall = 1;
+  const calls = new Map<string, (r: PlayerResult) => void>();
+
+  const post = (kind: string, fields: Record<string, unknown> = {}) => {
+    if (!peer || !origin || origin === "null") return;
+    try {
+      target().postMessage({ og: PLAYER_WIRE, protocol: PLAYER_WIRE_PROTOCOL, kind, ...fields }, origin);
+    } catch {
+      /* a cross-origin parent is not our Player */
+    }
+  };
+
+  const onMessage = (e: MessageEvent) => {
+    if (!peer || e.source !== target() || e.origin !== origin) return;
+    const m = e.data as Record<string, unknown> | null;
+    if (!m || typeof m !== "object" || m["og"] !== PLAYER_WIRE || m["protocol"] !== PLAYER_WIRE_PROTOCOL) return;
+    switch (m["kind"]) {
+      case "hello":
+        // In one window the shell hears its own hello: only the Player's lists capabilities.
+        if (peer === "self" && ("substrate" in m || !Array.isArray(m["capabilities"]))) break;
+        heard = true;
+        if (m["started"] === true) started = true;
+        paused = m["paused"] === true;
+        capabilities = Array.isArray(m["capabilities"]) ? (m["capabilities"] as unknown[]).filter((c): c is string => typeof c === "string") : [];
+        events.hello?.({ started: m["started"] === true, paused, capabilities });
+        break;
+      case "result": {
+        const id = m["id"];
+        const done = typeof id === "string" ? calls.get(id) : undefined;
+        if (!done) break;
+        calls.delete(id as string);
+        if (m["ok"] === true) done({ ok: true, data: m["data"] ?? null, ...timeOf(m) });
+        else {
+          const e = (m["error"] ?? {}) as Record<string, unknown>;
+          const code = typeof e["code"] === "string" ? e["code"] : "failed";
+          done({
+            ok: false,
+            error: {
+              code,
+              message: typeof e["message"] === "string" ? e["message"] : "",
+              retryable: e["retryable"] === true,
+              ...(typeof e["status"] === "number" ? { status: e["status"] } : {}),
+              ...(typeof e["revision"] === "number" ? { revision: e["revision"] } : {}),
+            },
+            ...timeOf(m),
+          });
+        }
+        break;
+      }
+      case "start":
+        heard = true;
+        started = true;
+        events.start?.();
+        break;
+      case "gesture":
+        events.gesture?.();
+        break;
+      case "pause":
+        paused = true;
+        events.pause?.();
+        break;
+      case "resume":
+        paused = false;
+        events.resume?.();
+        break;
+    }
+  };
+  if (peer) addEventListener("message", onMessage);
+  post("hello", { substrate: "origin-engine" });
+  if (peer === "self") {
+    let tries = 1;
+    const again = setInterval(() => {
+      if (heard || tries++ >= SELF_HELLO_TRIES) clearInterval(again);
+      else post("hello", { substrate: "origin-engine" });
+    }, SELF_HELLO_EVERY_MS);
+  }
+
+  return {
+    /** Whether the page is framed (a Player may be listening). */
+    framed,
+    /** Who answers: the framing Player (`parent`), the Stage overlay in this document (`self`), or no one. */
+    peer,
+    /** Whether a Player answered hello (or sent start). */
+    get hosted(): boolean {
+      return heard;
+    },
+    /** Whether the Player said play began. */
+    get started(): boolean {
+      return started;
+    },
+    /** Whether the Player covers the game now. */
+    get paused(): boolean {
+      return paused;
+    },
+    /** The methods the Player's hello said it answers (empty before it, or with no Player). */
+    get capabilities(): readonly string[] {
+      return capabilities;
+    },
+    loading(value: number | null, label?: string) {
+      if (readySent) return;
+      if (value !== null) {
+        const v = Math.round(Math.min(1, Math.max(0, value)) * 1000) / 1000;
+        if (v <= lastValue) return;
+        lastValue = v;
+        post("loading", { value: v, ...(label ? { label } : {}) });
+      } else post("loading", { value: null });
+    },
+    ready() {
+      if (readySent || ended) return;
+      readySent = true;
+      post("ready");
+    },
+    fail(code: string, message: string, retryable: boolean) {
+      if (readySent) return;
+      ended = true;
+      post("fail", { code, message: message.slice(0, 400), retryable });
+      lastValue = -1;
+    },
+    crash(name: string, message: string) {
+      ended = true;
+      post("crash", { name: /^[A-Za-z][A-Za-z0-9_.-]{0,63}$/.test(name) ? name : "Error", fingerprint: fingerprint(message) });
+    },
+    sample(fields: { renderer?: string; timings?: Record<string, number> }) {
+      post("sample", { substrate: "origin-engine", ...fields });
+    },
+    event(name: string, attrs?: Record<string, string | number | boolean | null>) {
+      post("event", { name, ...(attrs ? { attrs } : {}) });
+    },
+    /** One `call`, answered by its `result` (or `timeout` after CALL_TIMEOUT_MS; `unavailable` with no Player). */
+    request(method: string, args?: Record<string, unknown>, timeoutMs = CALL_TIMEOUT_MS): Promise<PlayerResult> {
+      if (!peer) return Promise.resolve({ ok: false, error: { code: "unavailable", message: "no Player frames this page", retryable: false } });
+      const id = `oe-${nextCall++}`;
+      return new Promise((resolve) => {
+        const timer = setTimeout(() => {
+          if (calls.delete(id)) resolve({ ok: false, error: { code: "timeout", message: `the Player did not answer ${method} in ${timeoutMs} ms`, retryable: true } });
+        }, timeoutMs);
+        calls.set(id, (r) => {
+          clearTimeout(timer);
+          resolve(r);
+        });
+        post("call", { id, method, ...(args ? { args } : {}) });
+      });
+    },
+  };
+}

package/shell/shell.css

@@ -0,0 +1,185 @@
+/* The player shell (docs/web-export.md): one ink surface, the canvas laid out
+   by the shell (letterbox or fill), the boot splash, the play gate, the error
+   card, the install hint and the "made with" badge. Tokens: brand/tokens.css. */
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--og-ink);
+  color: var(--color-fg);
+  font: 14px/1.4 var(--font-sans);
+  overscroll-behavior: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+}
+body { position: fixed; inset: 0; overflow: hidden; height: 100dvh; }
+#og-stage {
+  position: absolute;
+  inset: 0;
+  height: 100dvh;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#og-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  outline: none;
+}
+.og-layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+  box-sizing: border-box;
+}
+.og-layer[hidden] { display: none; }
+#og-boot { background: var(--og-ink); color: var(--og-paper); transition: opacity 240ms var(--ease-out); }
+#og-boot[data-done] { opacity: 0; pointer-events: none; }
+/* The cover's 32 px derivative, upscaled behind the boot splash (a top-level platform page). */
+#og-backdrop { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 240ms var(--ease-out); pointer-events: none; }
+#og-backdrop[data-shown] { opacity: 0.45; }
+#og-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.1); transform: scale(1.15); }
+#og-boot > :not(#og-backdrop) { position: relative; }
+.og-boot-mark { width: 72px; height: 72px; color: var(--og-paper); }
+.og-mark:not([data-motion="progress"]) :is([data-part="ghost"], [data-part="fill"]),
+.og-mark[data-motion="progress"] [data-part="arms"] { display: none; }
+.og-boot-label { min-height: 1.4em; color: var(--color-fg-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+#og-gate { background: rgb(20 22 27 / 0.55); cursor: pointer; }
+#og-gate button {
+  appearance: none;
+  border: 1px solid rgb(255 255 255 / 0.28);
+  background: rgb(255 255 255 / 0.1);
+  color: var(--og-paper);
+  font: 600 16px/1 var(--font-sans);
+  padding: 14px 28px;
+  border-radius: var(--radius-button);
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+#og-gate button:focus-visible { outline: 2px solid var(--og-paper); outline-offset: 3px; }
+#og-error { background: var(--og-ink); overflow: auto; justify-content: flex-start; padding-top: max(48px, env(safe-area-inset-top)); }
+.og-card {
+  width: min(560px, 100%);
+  box-sizing: border-box;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.og-card h1 { margin: 0; font-size: 17px; font-weight: 600; }
+.og-card p { margin: 0; color: var(--color-fg-muted); overflow-wrap: anywhere; }
+.og-card details { border-top: 1px solid var(--color-border); padding-top: 10px; }
+.og-card summary { cursor: pointer; color: var(--color-fg-muted); }
+.og-card pre {
+  margin: 8px 0 0;
+  max-height: 40dvh;
+  overflow: auto;
+  font: 12px/1.45 var(--font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--color-fg);
+}
+.og-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.og-actions button {
+  appearance: none;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
+  color: var(--color-fg);
+  font: 500 14px/1 var(--font-sans);
+  padding: 10px 16px;
+  border-radius: var(--radius-button);
+  cursor: pointer;
+}
+.og-actions button:first-child { background: var(--og-paper); color: var(--og-ink); border-color: var(--og-paper); }
+#og-install {
+  position: absolute;
+  left: 50%;
+  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 24px);
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: calc(100% - 32px);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 8px 8px 8px 14px;
+  font-size: 13px;
+}
+#og-install[hidden] { display: none; }
+#og-install button { appearance: none; border: 0; background: var(--color-surface-raised); color: var(--color-fg); font: 500 13px/1 var(--font-sans); padding: 8px 12px; border-radius: var(--radius-button); cursor: pointer; }
+#og-made-with {
+  position: absolute;
+  right: max(10px, env(safe-area-inset-right));
+  bottom: max(10px, env(safe-area-inset-bottom));
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--og-paper);
+  opacity: 0.55;
+  font: 500 11px/1 var(--font-sans);
+  text-decoration: none;
+  letter-spacing: 0.01em;
+  transition: opacity 240ms var(--ease-out);
+}
+#og-made-with:hover, #og-made-with:focus-visible { opacity: 0.9; }
+#og-made-with[data-playing] { opacity: 0.3; }
+#og-made-with[data-playing] span { display: none; }
+.og-engine-mark { width: 14px; height: 14px; }
+/* Back to the Portal page that opened the game: the platform Player's Back
+   (a dark capsule with a light rim and a full-strength glyph, legible over
+   any frame). It says its name on boot, gate and error and for the first
+   seconds of play, then keeps only its glyph; it never fades while playing,
+   since players who cannot see it cannot leave. */
+#og-back {
+  position: absolute;
+  z-index: 2;
+  left: max(12px, env(safe-area-inset-left));
+  top: max(12px, env(safe-area-inset-top));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  min-width: 40px;
+  appearance: none;
+  border: 1px solid rgb(255 255 255 / 0.28);
+  background: rgb(20 20 22 / 0.78);
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.45);
+  color: var(--og-paper);
+  font: 600 14px/1 var(--font-sans);
+  padding: 0 14px 0 9px;
+  border-radius: var(--radius-button);
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  transition: background-color 180ms var(--ease-out);
+}
+#og-back[hidden] { display: none; }
+#og-back svg { width: 20px; height: 20px; flex: none; }
+#og-back span { display: block; max-width: 6em; margin-left: 4px; overflow: hidden; white-space: nowrap; }
+#og-back:hover { background: rgb(58 58 60 / 0.92); }
+#og-back:focus-visible { outline: 2px solid var(--og-paper); outline-offset: 2px; }
+#og-back[data-playing] { animation: og-back-tuck 240ms var(--ease-out) 4s forwards; }
+#og-back[data-playing] span { animation: og-back-label 240ms var(--ease-out) 4s forwards; }
+@keyframes og-back-tuck { to { padding: 0 9px; } }
+@keyframes og-back-label { to { max-width: 0; margin-left: 0; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  #og-boot, #og-made-with, #og-backdrop, #og-back { transition: none; }
+  #og-back[data-playing], #og-back[data-playing] span { animation-duration: 1ms; }
+}