@justai/cuts 0.115.0 → 0.117.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.115.0",
+  "version": "0.117.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.25.0",
+    "@justai/core": "^0.26.0",
     "@justai/ui": "^0.15.0",
     "@justai/atrium": "^0.1.9"
   }

package/src/Preroll.astro

@@ -46,115 +46,302 @@ import "./ground.css";
 interface Props {
   /** The game's own document, served from this persona's origin. */
   src: string;
+
+  // ── THE FIVE FIELDS ARE THE PERSONA'S CARD ────────────────────────────────────────────────
+  //
+  // queries: preroll copy · what goes on the preroll · kicker name tag sub art · og card ·
+  //          the preroll looks like a placeholder · social card and preroll
+  //
+  // THE PREROLL IS THE og CARD, ALIVE. Both answer one question — *what is this, in a glance,
+  // before I commit?* — and the persona already has to compose an answer, because `builder/card`
+  // draws its social card from these exact five fields. So the preroll takes the same five rather
+  // than inventing a second identity: kicker, name, tag, sub, art.
+  //
+  // That is not a saving, it is the point. A composition that exists in two places drifts; a
+  // composition that IS one thing rendered onto two surfaces cannot. And at a thousand personas the
+  // per-persona cost of a designed preroll drops to the copy somebody already wrote for the card.
+  //
+  // The founder's judgement of the first version, which was a centred icon and a pill button, is the
+  // brief this replaces it under: *"bir icon bir play butonu koyunca o preroll olmuyor. preroll senin
+  // estetik ve tasarım derinliğin."* The og card has the intent; this puts that intent on the screen.
+
+  /** The persona's own address and its category — `sudoku.pin.games · Puzzle`. It says where you are. */
+  kicker: string;
+  /** The persona's name, set large. */
+  name: string;
+  /** The line in the persona's own voice. HTML, so a phrase can take the accent — the card does the
+   *  same with a `<span>`, and the two must be able to carry identical copy. */
+  tag: string;
+  /** Three concrete facts, small. Not marketing — the card's sub-line reads `Nine languages · five
+   *  themes · always new`, and a persona that cannot write three true ones has a positioning problem
+   *  rather than a copy problem. */
+  sub: string;
+
   /** The button. Keep it a verb. */
   play: string;
-  /** One line under it — what this is, in the persona's voice. Optional. */
-  note?: string;
+  /** Said on the button itself while the bytes are moving — the invitation becomes the wait. */
+  loading?: string;
   /** What the frame is called for somebody who cannot see it. */
   title: string;
-  /** Said while the bytes are moving. */
-  loading?: string;
   /** atrium ids are a grammar — [a-z0-9._-] — so this is sanitised rather than trusted. */
   id?: string;
 }
-const { src, play, note, title, loading = "Loading", id = "game" } = Astro.props;
+const { src, kicker, name, tag, sub, play, title, loading = "Loading", id = "game" } = Astro.props;
 const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "x");
 ---
 
 <div class="pr" id="pr" data-src={src} data-atrium={safeId}>
-  {/* ── THE STAGE IS THE FLOW; THE DOOR AND THE WAIT ARE COVERS OVER IT ─────────────────────────
+  {/* ── THE STAGE IS THE FLOW; THE DOOR IS A COVER OVER IT ──────────────────────────────────────
       queries: the game boots at zero size · getBoundingClientRect returns 0 in the frame ·
                the game jumps when the preroll hands over · display none iframe · hidden iframe
-      A GAME MUST BOOT AT ITS REAL SIZE. The first version of this cut put the stage, the door and
-      the wait side by side and switched between them with `display: none` — and a game loading
-      inside a `display: none` frame has no layout at all: every rect it measures is zero, images do
-      not decode, and rAF is suspended. It would have booted blind and then been handed a viewport it
-      had already measured as nothing.
-      So the stage is always laid out and the covers sit ON TOP of it. The frame reaches its final
+      A GAME MUST BOOT AT ITS REAL SIZE. The first version of this cut switched between the door and
+      the stage with `display: none` — and a game loading inside a `display: none` frame has no
+      layout at all: every rect it measures is zero, images do not decode, rAF is suspended. It would
+      have booted blind and then been handed a viewport it had already measured as nothing.
+      So the stage is always laid out and the door sits ON TOP of it. The frame reaches its final
       size the moment it is created, and the handover is one element leaving rather than a reflow. */}
   <div class="pr-stage" id="prStage" data-title={title}></div>
 
-  {/* THE DOOR. No iframe exists yet — that is the entire point, and it is why this markup is a
-      button and a slot rather than a frame with a cover over it. A hidden iframe still fetches. */}
+  {/* ── THE DOOR: THE CARD, STOOD UP ────────────────────────────────────────────────────────────
+      No iframe exists yet — that is the entire point, and it is why this is a composition and a
+      button rather than a frame with a cover over it. A hidden iframe still fetches. */}
   <div class="pr-door" id="prDoor">
-    <slot name="art" />
-    <button class="pr-play" id="prPlay" type="button">{play}</button>
-    {note && <p class="pr-note">{note}</p>}
-  </div>
+    <div class="pr-art"><slot name="art" /></div>
 
-  {/* The wait. Indeterminate until the game says otherwise: a bar that moves without measuring
-      anything teaches a player that the number means nothing. */}
-  <div class="pr-wait" id="prWait" hidden>
-    <div class="pr-bar" id="prBar" data-indeterminate><i id="prFill"></i></div>
-    <p class="pr-note">{loading}</p>
+    <div class="pr-copy">
+      <p class="pr-kicker"><i></i><span>{kicker}</span></p>
+      <h2 class="pr-name">{name}</h2>
+      <p class="pr-tag" set:html={tag}></p>
+      <p class="pr-sub">{sub}</p>
+    </div>
+
+    {/* THE INVITATION BECOMES THE WAIT, IN PLACE. The first version replaced the whole door with a
+        bar in an empty room: two screens, and the player was moved from one to the other for no
+        reason they could see. The composition stays; this button fills. */}
+    <button class="pr-play" id="prPlay" type="button" data-label={play} data-loading={loading}>
+      <i class="pr-fill" id="prFill"></i>
+      <span id="prLabel">{play}</span>
+    </button>
+
+    {/* queries: preroll imprint · sponsor · brand on the preroll · monetization out of the frame
+        AN EMPTY SLOT ON PURPOSE, and it renders nothing until somebody fills it. The preroll is the
+        one full-screen moment a game persona has before the game takes the display, which makes it
+        the surface the founder's thesis actually stands on: monetization leaves the game frame and
+        lives on the persona's own surface, as an imprint rather than an interruption. Reserving its
+        place in the composition now is the difference between a brand sitting IN the design later
+        and a banner bolted onto it. */}
+    <div class="pr-imprint"><slot name="imprint" /></div>
   </div>
 </div>
 
 <style>
-  /* queries: the game frame has square corners · the game's colours do not match the page ·
-   *          a seam around the game · full-bleed game · preroll radius
-   *
-   * ── THE SHELL OWNS THE FRAME'S SHAPE; THE GAME OWNS WHAT IS INSIDE IT ──────────────────────
+  /* ── THE COMPOSITION RESPONDS TO ITS OWN BOX, NOT TO THE WINDOW ──────────────────────────────
    *
-   * A game paints its own ground and it will not match the persona's — sudoku's art direction is
-   * nothing like app.zone's grey. Rendered edge to edge with square corners, that mismatch reads as
-   * a page that failed rather than as a game that has a look; rounded and clipped, it reads as an
-   * object ON the page, which is what it is. So the seam is made deliberate instead of denied.
+   * queries: preroll responsive · the preroll is cramped · container query · cqw · dynamic preroll ·
+   *          the game kernel size changes with the device
    *
-   * `--preroll-radius` is the escape hatch, and it is one line: a game persona that wants the frame
-   * to BE the screen — the shape sudoku takes — sets it to 0 and cancels the gutter itself. */
-  /* queries: the play button cannot be clicked · something else intercepts pointer events ·
-   *          the preroll has no height · blank page preroll · law 1 geometry
+   * The founder, and it is the constraint the whole layout is built on: *"preroll dynamic bir design.
+   * kullanıcının kullandığı device'a göre game kernel layout'un size'ı değişebilir."*
    *
-   * ── A COMPONENT BRINGS ITS OWN HEIGHT, NOT ONLY ITS OWN COLOURS ────────────────────────────
+   * So every measurement below is in CONTAINER units. A media query would ask the window how wide it
+   * is — and the window is not what this cut lives in: the same viewport gives a 448px frame on a
+   * phone and a 638px one inside the desktop column, and a landscape phone gives a frame that is
+   * wide and 300px tall. Asking the window produces a composition that is right on one of those.
    *
-   * `flex: 1` gives this cut the kernel's whole height — in a kernel. On a page that is not a flex
-   * column it means nothing, the only in-flow child is an empty stage, and the box collapses to
-   * zero: the door is then an absolutely positioned overlay inside a zero-height parent, clipped by
-   * the `overflow` below and sitting under whatever the page put above it. The blank-page fixture
-   * caught it as `<p>bare page — no consumer css</p> intercepts pointer events`, which is the same
-   * law 1 the ground.css import two screens up answers for colour.
-   *
-   * The floor is small enough that the flex case always wins it and large enough that a door is a
-   * door. Nothing real is shorter: the narrowest phone leaves ~486px under the toolbar. */
+   * `cqw`/`cqh` with a rem floor and ceiling, never a bare px: `clamp(1.75rem, 12cqw, 4rem)` scales
+   * with the box AND keeps iOS Dynamic Type moving the bounds, which the fleet's typography law
+   * requires. A pure `cqw` size ignores the reader's own setting entirely. */
   .pr {
     position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column;
     border-radius: var(--preroll-radius, var(--radius-lg)); overflow: hidden;
+    container-type: size;
+    container-name: pr;
+  }
+  .pr-stage { flex: 1; min-height: 0; }
+  .pr-stage :global(iframe) { display: block; width: 100%; height: 100%; border: 0; }
+
+  /* ── THE GROUND IS THE CARD'S ────────────────────────────────────────────────────────────────
+   * queries: why is the preroll dark · preroll background · the glow · the dot lattice
+   *
+   * The same three layers `builder/card` paints, in the same order: a near-black field, a wide soft
+   * bloom of the persona's accent off the top-left with a cooler counter-glow top-right so the field
+   * never reads flat, and a barely-there dot lattice. It is dark on every persona, including the ones
+   * whose page is light — a game is a room you go into, and the card the ecosystem already prints for
+   * this persona is dark. The accent is the persona's, so the fleet stays various without being loud.
+   *
+   * OPAQUE, and not `--surface`: this covers a game that is drawing itself underneath. */
+  /* ── A GRID, NOT A COLUMN OF FLEX ────────────────────────────────────────────────────────────
+   * queries: the play button is in the wrong place · landscape preroll · the composition breaks on
+   *          a wide box · grid-template-areas
+   *
+   * The four parts have to REGROUP, not just re-order: in a tall box they stack, and in a wide one
+   * the copy and the button become one column with the art beside them. Written as a flex row that
+   * was measured on a landscape phone, the button became a third column and floated off to the
+   * top-right on its own — flex can reorder siblings but it cannot make two of them share a column.
+   * Named areas can, and the two layouts are then two grids rather than a pile of overrides. */
+  .pr-door {
+    position: absolute; inset: 0; z-index: 1;
+    display: grid;
+    grid-template-columns: 1fr;
+    /* ── THE ART TAKES THE TOP HALF; THE COPY BEGINS ON THE CENTRE LINE ────────────────────────
+     * queries: preroll composition · where does the copy start · the play button is too low ·
+     *          the button is under the browser bar · centre line · x-ray grid
+     *
+     * The founder, describing it through the x-ray's own grid — which is what that instrument was
+     * for: *"logo 1. satırın 2. cell'inde ortada olsa daha iyi olur… içerik de 2. satırın top'undan
+     * başlasa daha iyi olur."*
+     *
+     * `50%` on the first row is exact rather than approximate: the door's padding is equal top and
+     * bottom, so half of its content box IS the frame's centre — the same line the x-ray draws. The
+     * art centres in the half above it and the copy starts on it.
+     *
+     * AND IT IS WHY THE BUTTON IS SAFE ON A REAL PHONE. The last row takes the slack, so the button
+     * sits directly under the copy instead of at the bottom of the frame — which on a real device is
+     * where the browser puts its own bar. He sent a screenshot from one: the URL bar sitting over the
+     * play button, and a strip of the next section showing beneath it. A composition that ends at the
+     * frame's bottom edge is a composition whose call to action a phone can cover. */
+    grid-template-rows: 50% auto auto minmax(0, 1fr);
+    grid-template-areas: "art" "copy" "play" "imprint";
+    padding: clamp(18px, 7cqw, 64px);
+    /* And the strip the OS keeps for its home indicator, on top of the inset — never instead of it. */
+    padding-block-end: calc(clamp(18px, 7cqw, 64px) + env(safe-area-inset-bottom, 0px));
+    background:
+      radial-gradient(90cqw 52cqh at 8% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
+      radial-gradient(76cqw 46cqh at 96% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
+      radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
+      #080b12;
+    color: #f5f7fa;
+  }
+  .pr-door[hidden] { display: none; }
+
+  /* THE ART TAKES THE TOP AND SITS TO THE RIGHT, which is the card's own diagonal stood up: art one
+     side, type the other. Everything centred is the safe composition and it is the one that reads as
+     a placeholder — the card is left-aligned and that is this family's voice. */
+  /* CENTRED, not pushed to the edge. The first version put the mark hard right to echo the card's
+     diagonal — and the card is a landscape rectangle where that diagonal has room to be one. Stood up
+     in a tall frame it stops reading as a composition and starts reading as a thing that drifted. */
+  .pr-art {
+    grid-area: art; min-height: 0;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .pr-art :global(svg), .pr-art :global(img) {
+    display: block; width: auto; height: auto;
+    max-width: clamp(96px, 40cqw, 300px);
+    max-height: clamp(96px, 34cqh, 300px);
   }
 
-  /* OPAQUE, and `--bg` rather than `--surface`: the fleet's `--surface` is a translucent overlay
-     tint, so a cover painted with it shows the booting game through itself. */
-  .pr-door, .pr-wait {
-    position: absolute; inset: 0; z-index: 1; background: var(--bg);
-    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
+  .pr-copy { grid-area: copy; min-width: 0; }
+  .pr-kicker {
+    display: flex; align-items: center; gap: 0.55em; margin: 0 0 clamp(10px, 2.4cqh, 26px);
+    font-size: clamp(0.75rem, 3.1cqw, 1.05rem); font-weight: 600; color: #8b949e; letter-spacing: 0.01em;
   }
-  .pr-door[hidden], .pr-wait[hidden] { display: none; }
+  .pr-kicker i { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--accent); flex: none; }
+  .pr-kicker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
+  .pr-name {
+    margin: 0 0 clamp(6px, 1.6cqh, 18px);
+    font-size: clamp(1.75rem, 13cqw, 4.25rem); font-weight: 700;
+    letter-spacing: -0.033em; line-height: 0.98;
+  }
+  .pr-tag {
+    margin: 0 0 clamp(6px, 1.4cqh, 16px);
+    font-size: clamp(1rem, 5.2cqw, 1.9rem); font-weight: 700; color: var(--accent);
+    letter-spacing: -0.012em; line-height: 1.18;
+  }
+  /* The card writes its second phrase in ink rather than accent, inside the copy itself. Globalised
+     because it arrives through `set:html` and carries no scope attribute — the lesson the home mark
+     taught this package the hard way. */
+  .pr-tag :global(span) { color: #f5f7fa; }
+  .pr-sub {
+    margin: 0; font-size: clamp(0.8125rem, 3.4cqw, 1.15rem); font-weight: 500; color: #8b949e;
+    letter-spacing: -0.004em;
+  }
+
+  /* ── THE BUTTON, AND IT IS ALSO THE PROGRESS ─────────────────────────────────────────────────
+   * queries: preroll progress · the loading bar · where does progress show · the button fills
+   *
+   * One element does both jobs, in one place. `.pr-fill` is a layer inside the button that grows
+   * from the left; the label sits above it and changes word. A player who presses a button and
+   * watches that same button work is never asked where their press went. */
   .pr-play {
-    font: inherit; font-weight: 600; font-size: var(--fs-md);
-    padding: 14px 40px; border: 0; border-radius: var(--radius-pill);
+    grid-area: play; justify-self: stretch;
+    position: relative; overflow: hidden; isolation: isolate;
+    margin-top: clamp(16px, 3.6cqh, 40px);
+    font: inherit; font-weight: 650; font-size: clamp(0.9375rem, 4cqw, 1.35rem);
+    padding: clamp(12px, 2.4cqh, 22px) clamp(20px, 6cqw, 40px);
+    border: 0; border-radius: var(--radius-pill);
     background: var(--accent); color: var(--accent-on); cursor: pointer;
-    transition: transform 0.18s var(--ease-spring);
+    transition: transform 0.18s var(--ease-spring), opacity 0.2s;
   }
-  .pr-play:active { transform: scale(0.94); }
-  .pr-note { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); text-align: center; }
-
-  .pr-bar {
-    width: min(240px, 70%); height: 4px; border-radius: 999px;
-    background: var(--surface-2); overflow: hidden;
+  .pr-play:active { transform: scale(0.97); }
+  .pr-play[data-busy] { cursor: default; }
+  .pr-play[data-busy]:active { transform: none; }
+  .pr-play span { position: relative; z-index: 1; }
+  .pr-fill {
+    position: absolute; inset: 0 auto 0 0; z-index: 0; width: 0;
+    background: color-mix(in srgb, #ffffff 26%, transparent);
+    transition: width 0.3s var(--ease-out);
   }
-  .pr-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
-  /* A game that reports nothing gets a sweep rather than a number — honest about not knowing. */
-  .pr-bar[data-indeterminate] i {
-    width: 40%; animation: pr-sweep 1.1s var(--ease-out) infinite;
+  /* A game that reports nothing gets a sweep rather than a number — honest about not knowing. A bar
+     that moves without measuring anything teaches a player that the number means nothing. */
+  .pr-play[data-busy][data-indeterminate] .pr-fill {
+    width: 42%; animation: pr-sweep 1.15s var(--ease-out) infinite;
   }
-  @keyframes pr-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
-  @media (prefers-reduced-motion: reduce) {
-    .pr-bar[data-indeterminate] i { animation: none; width: 100%; opacity: 0.5; }
+  @keyframes pr-sweep { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
+
+  .pr-imprint:empty { display: none; }
+  .pr-imprint { grid-area: imprint; margin-top: clamp(10px, 2cqh, 22px); }
+
+  /* ── WIDE AND SHORT: THE CARD'S OWN LAYOUT ───────────────────────────────────────────────────
+   * A landscape phone, or a desktop column turned wide, gives a box the vertical stack cannot fill
+   * without floating everything in the middle. At that shape the composition becomes the card it
+   * came from: type on the left, art on the right, the button under the type. */
+  @container pr (min-aspect-ratio: 1/1) and (min-width: 460px) {
+    /* The card's own shape: copy and button stacked on the left, art beside them, the whole block
+       centred in the box rather than pinned to its top. */
+    .pr-door {
+      grid-template-columns: 1fr auto;
+      grid-template-rows: auto auto auto;
+      grid-template-areas: "copy art" "play art" "imprint art";
+      align-content: center;
+      column-gap: clamp(24px, 5cqw, 72px);
+    }
+    .pr-art { justify-content: center; }
+    .pr-play { justify-self: start; }
+    .pr-name { font-size: clamp(1.75rem, 7cqw, 4.25rem); }
+    .pr-tag { font-size: clamp(1rem, 2.9cqw, 1.9rem); }
+    .pr-sub { font-size: clamp(0.8125rem, 1.9cqw, 1.15rem); }
+    .pr-kicker { font-size: clamp(0.75rem, 1.7cqw, 1.05rem); }
+    .pr-play { font-size: clamp(0.9375rem, 2.2cqw, 1.35rem); padding: clamp(12px, 2.2cqh, 22px) clamp(24px, 3.4cqw, 44px); }
+  }
+  /* A genuinely short box — a landscape phone gives about 312px — drops the third line rather than
+     crushing the type, and shrinks the art rather than removing it. Hiding the mark was the first
+     attempt and it left the persona anonymous in exactly the orientation somebody plays a game in. */
+  @container pr (max-height: 380px) {
+    .pr-sub { display: none; }
+    .pr-art :global(svg), .pr-art :global(img) { max-width: 22cqw; max-height: 46cqh; }
+    .pr-play { margin-top: clamp(10px, 2cqh, 18px); }
   }
 
-  .pr-stage { flex: 1; min-height: 0; }
-  .pr-stage :global(iframe) { display: block; width: 100%; height: 100%; border: 0; }
+  /* ── THE ENTRANCE ────────────────────────────────────────────────────────────────────────────
+   * Transform and opacity only, so nothing here changes a layout — the shell's own lesson about the
+   * toolbar's strip applies to anything that animates near a scroll spy. Four beats, ~520ms, and the
+   * button is tappable from the first frame regardless: an invitation you have to wait for is not
+   * one. */
+  @media (prefers-reduced-motion: no-preference) {
+    .pr-art, .pr-kicker, .pr-name, .pr-tag, .pr-sub, .pr-play {
+      animation: pr-rise 0.52s var(--ease-out) both;
+    }
+    .pr-kicker { animation-delay: 0.04s; }
+    .pr-name { animation-delay: 0.09s; }
+    .pr-tag { animation-delay: 0.14s; }
+    .pr-sub { animation-delay: 0.19s; }
+    .pr-play { animation-delay: 0.26s; }
+  }
+  @keyframes pr-rise {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: none; }
+  }
 </style>
 
 <script>
@@ -169,22 +356,19 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
   const root = document.getElementById("pr");
   if (root) {
     const door = document.getElementById("prDoor") as HTMLElement;
-    const wait = document.getElementById("prWait") as HTMLElement;
     const stage = document.getElementById("prStage") as HTMLElement;
-    const bar = document.getElementById("prBar") as HTMLElement;
     const fill = document.getElementById("prFill") as HTMLElement;
     const playBtn = document.getElementById("prPlay") as HTMLButtonElement;
+    const label = document.getElementById("prLabel") as HTMLElement;
 
     const src = root.dataset.src as string;
     const atriumId = root.dataset.atrium as string;
 
     let started = false;
 
-    // The stage is never switched — it is underneath the whole time. `show(null)` is the handover:
-    // both covers leave and what was already drawing there is simply visible.
-    const show = (el: HTMLElement | null) => {
-      for (const n of [door, wait]) n.hidden = n !== el;
-    };
+    // The stage is never switched — it is underneath the whole time, and the door is a cover over
+    // it. `open()` is the handover: the cover leaves and what was already drawing there is visible.
+    const open = () => { door.hidden = true; };
 
     // ── PATIENCE IS MEASURED IN SILENCE, NOT IN SECONDS ──────────────────────────────────────
     //
@@ -205,18 +389,26 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
     // down with it.
     let bump = () => {};
 
+    // THE BUTTON IS THE BAR. Its fill layer grows and its word changes; nothing moves and nothing is
+    // replaced. A player who pressed something and watches that same thing work never has to ask
+    // where their press went.
     const setProgress = (v: unknown) => {
       bump();
       const n = typeof v === "number" ? v : (v as any)?.value;
       if (typeof n !== "number" || !isFinite(n)) return;
-      bar.removeAttribute("data-indeterminate");
+      playBtn.removeAttribute("data-indeterminate");
       fill.style.width = Math.max(0, Math.min(1, n)) * 100 + "%";
     };
 
     const start = async () => {
       if (started) return;
       started = true;
-      show(wait);
+      // Indeterminate until the game says otherwise, and `disabled` is deliberately NOT used: a
+      // disabled button greys out and reads as broken, when what is true is that it is working.
+      playBtn.setAttribute("data-busy", "");
+      playBtn.setAttribute("data-indeterminate", "");
+      playBtn.setAttribute("aria-busy", "true");
+      label.textContent = playBtn.dataset.loading || label.textContent;
 
       const frame = document.createElement("iframe");
       frame.title = stage.dataset.title || "";
@@ -304,7 +496,7 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
       ]);
       if (watchdog) clearTimeout(watchdog);
 
-      show(null);
+      open();
       // `curtain: true` is the game saying "hand over early, I will cover the rest myself" — which
       // is what a console does, where the logo animation IS the loading screen. Nothing else here
       // changes; the difference is only how long this cut keeps the door shut.