@justai/cuts 0.133.0 → 0.138.0

package/src/Preroll.astro

@@ -135,212 +135,216 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
 </div>
 
 <style>
-  /* ── THE COMPOSITION RESPONDS TO ITS OWN BOX, NOT TO THE WINDOW ──────────────────────────────
-   *
-   * queries: preroll responsive · the preroll is cramped · container query · cqw · dynamic preroll ·
-   *          the game kernel size changes with the device
-   *
-   * 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."*
-   *
-   * 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.
-   *
-   * `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
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* ── THE COMPOSITION RESPONDS TO ITS OWN BOX, NOT TO THE WINDOW ──────────────────────────────
      *
-     * 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."*
+     * queries: preroll responsive · the preroll is cramped · container query · cqw · dynamic preroll ·
+     *          the game kernel size changes with the device
      *
-     * `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.
+     * 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."*
      *
-     * 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);
-  }
-
-  .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-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; }
+     * 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.
+     *
+     * `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; }
 
-  .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 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);
+    }
 
-  /* ── 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 {
-    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), opacity 0.2s;
-  }
-  .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);
-  }
-  /* 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(-110%); } to { transform: translateX(250%); } }
+    .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-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-imprint:empty { display: none; }
-  .pr-imprint { grid-area: imprint; margin-top: clamp(10px, 2cqh, 22px); }
+    .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;
+    }
 
-  /* ── 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);
+    /* ── 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 {
+      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), opacity 0.2s;
+    }
+    .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);
+    }
+    /* 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(-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-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); }
-  }
 
-  /* ── 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;
+    /* ── 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; }
     }
-    .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>
 
@@ -382,294 +386,7 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
    * back the moment they pause. */
 </style>
 
-<script>
-  // queries: preroll script · the game never connects · atrium router game · boot · curtain
-  //
-  // THE SHELL IS THE ROUTER, AND IT IS ONE BEFORE THE FRAME EXISTS. atrium's rule is that a guest
-  // discovers UPWARD, so the room has to be standing before anybody can walk into it. `mount` names
-  // the guest by its WINDOW — never by what it calls itself, because a guest that announces its own
-  // name lets any frame on the page claim to be the game.
-  import atrium from "@justai/atrium";
-
-  const root = document.getElementById("pr");
-  if (root) {
-    const door = document.getElementById("prDoor") as HTMLElement;
-    const stage = document.getElementById("prStage") 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, 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 ──────────────────────────────────────
-    //
-    // queries: the game was cut off while it was still loading · the preroll gave up too early ·
-    //          how long does the shell wait · slow connection · the bar vanished mid-load
-    //
-    // A total time limit is the wrong instrument and it fails in both directions: 20s abandons a
-    // real game on a real 3G connection, and 120s leaves a player staring at a dead frame. What
-    // separates the two cases is not how long it has taken — it is whether the game is still
-    // TALKING. So the clock is reset by every progress report, and only silence runs it down.
-    //
-    // A game that never speaks at all gets one window's worth from the moment the frame is created,
-    // which is the same promise made to a player whose game is simply broken.
-    const PATIENCE = 20000;
-    let watchdog: ReturnType<typeof setTimeout> | null = null;
-    // Assigned where the promise it resolves is created — a no-op until then, because a progress
-    // report cannot arrive before the frame exists and a `bump` that throws would take the bar
-    // 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;
-      playBtn.removeAttribute("data-indeterminate");
-      fill.style.width = Math.max(0, Math.min(1, n)) * 100 + "%";
-    };
-
-    const start = async () => {
-      if (started) return;
-      started = true;
-      // 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 || "";
-      // `allow` carries the gesture forward: the tap that opened this frame is what lets the game
-      // play sound at all, and a frame without it starts muted for reasons nobody can see.
-      frame.setAttribute("allow", "autoplay; fullscreen");
-      frame.setAttribute("referrerpolicy", "same-origin");
-
-      let bus: any = null;
-      try {
-        bus = await atrium({
-          id: atriumId,
-          router: true,
-          mount: ({ source }: any) => (source === frame.contentWindow ? "game" : null),
-        });
-      } catch {
-        // atrium failing must not cost the player the game: mount the frame and hand over blind.
-        // A game that cannot speak still runs; it simply gets no progress and no early curtain.
-      }
-
-      // ── THE STAGE — v2 of the protocol: who owns attention, and who owns the chrome ─────────
-      //
-      // queries: stage playing · pause the game from the shell · mood accent · theater mode ·
-      //          the cuts stay reachable while playing · focus protocol · oyun basladi
-      //
-      // The game declares STATE and the shell decides what it means — a game never asks for a
-      // toolbar to be hidden, it says what the player is doing. Three messages: `stage` and `mood`
-      // travel up (the same direction every progress report already travels), `pause` comes back.
-      //
-      // THE RETURN DIRECTION IS THE SAFETY OF THE WHOLE DESIGN. Whoever grants exclusive attention
-      // must be able to take it back — the player reached for the way out, the tab went to the
-      // background. A focus handover with no way back does not trap the shell, it traps the PLAYER,
-      // and on a phone the only escape from that is closing the tab. So: a game that has not
-      // declared protocol 2 in its boot answer is never given the stage. The declaration IS the
-      // promise that `pause` is registered, and the shell holds it to that.
-      // The declaration is the boot ANSWER, and a game may announce `playing` in the same breath
-      // as resolving boot — airdrop does, and its announcement beats its own answer onto the wire.
-      // So the stage handler never reads a variable; it AWAITS the declaration, and a message that
-      // arrives early is simply held until the shell knows who it is talking to. The watchdog path
-      // declares protocol 1, so a silent game's early announcement resolves to a refusal, not a hang.
-      let declareProtocol: (v: number) => void = () => {};
-      const declared: Promise<number> = new Promise((r) => { declareProtocol = r; });
-      if (bus) {
-        // Whatever theme the page carried before the stage took it — restored on pause, so a manual
-        // data-theme set by anything else survives a round trip through a game.
-        let priorTheme: string | undefined;
-
-        const setStage = (mode: string) => {
-          const playing = mode === "playing";
-          if (playing) {
-            document.documentElement.dataset.stage = "playing";
-            // The theater: the persona's own dark theme, switched on. See the style block above.
-            if (document.documentElement.dataset.theme !== "dark") {
-              priorTheme = document.documentElement.dataset.theme;
-              document.documentElement.dataset.theme = "dark";
-            }
-          } else {
-            delete document.documentElement.dataset.stage;
-            if (priorTheme === undefined) delete document.documentElement.dataset.theme;
-            else document.documentElement.dataset.theme = priorTheme;
-            priorTheme = undefined;
-          }
-          // The other cuts go INERT rather than display:none — the page must not reflow, and the
-          // player's scroll position has to survive a pause. inert takes them out of tab order and
-          // the accessibility tree both; a screen reader must not keep walking a page the player
-          // has left.
-          for (const id of ["profile", "posts"]) {
-            const el = document.getElementById(id);
-            if (el) el.toggleAttribute("inert", playing);
-          }
-          // The page is locked, so make sure what it is locked ON is the stage.
-          if (playing) stage.scrollIntoView({ block: "nearest" });
-          // queries: space does nothing · keyboard not reaching the game · input bind · focus
-          //
-          // AND THE KEYBOARD GOES WITH THE STAGE. The play press happened in THIS document, so this
-          // document holds the focus — and every key the player presses lands in the shell while
-          // the game hears nothing. The founder, on the space bar: *"bu haldeyken klavyeden space
-          // tusunu bile almiyor. tum input game frame'e bind olmali."* Granting the stage IS the
-          // input handover, so the frame is focused with it — and again on pause's reversal, so a
-          // resumed game does not come back deaf.
-          if (playing) frame.focus();
-          // The toolbar swaps its icons for the handle on this event — it owns its own row.
-          document.dispatchEvent(new CustomEvent("justai:stage", { detail: { mode } }));
-        };
-
-        // ── the mood: meaning, not pixels ─────────────────────────────────────────────────────
-        // A few calls a second at most, eased here over ~600ms — never sampled from a framebuffer.
-        // It leans on the ONE variable the whole ground is already built from, so the persona's
-        // page re-tints without anything being painted: the door's washes, the buttons, the links
-        // all read --accent already.
-        const moodHost = (document.getElementById("infinite") ?? document.documentElement) as HTMLElement;
-        const hex = (c: string) => {
-          const m = /^#([0-9a-f]{6})$/i.exec(c.trim());
-          return m ? [parseInt(m[1].slice(0, 2), 16), parseInt(m[1].slice(2, 4), 16), parseInt(m[1].slice(4, 6), 16)] : null;
-        };
-        let moodRaf = 0;
-        const moodTo = (args: any) => {
-          if (typeof args?.energy === "number")
-            moodHost.style.setProperty("--stage-energy", String(Math.max(0, Math.min(1, args.energy))));
-          const to = typeof args?.accent === "string" ? hex(args.accent) : null;
-          if (!to) return;
-          const from = hex(getComputedStyle(moodHost).getPropertyValue("--accent")) ?? to;
-          cancelAnimationFrame(moodRaf);
-          const t0 = performance.now();
-          const step = (now: number) => {
-            const k = Math.min(1, (now - t0) / 600);
-            const e = k * k * (3 - 2 * k);
-            const c = from.map((f, i) => Math.round(f + (to[i] - f) * e));
-            moodHost.style.setProperty("--accent", `rgb(${c[0]}, ${c[1]}, ${c[2]})`);
-            if (k < 1) moodRaf = requestAnimationFrame(step);
-          };
-          moodRaf = requestAnimationFrame(step);
-        };
-
-        bus.register({
-          method: "stage",
-          handler: async (a: any) => {
-            // No protocol 2, no stage — the rule, not a courtesy. Awaited, not read: see above.
-            if ((await declared) < 2) return { granted: false };
-            setStage(a?.mode === "playing" ? "playing" : "paused");
-            return { granted: true };
-          },
-        });
-        bus.register({ method: "mood", handler: (a: any) => { moodTo(a); return {}; } });
-
-        // The shell's asks, all funnelled through one line so every reason travels the same path.
-        const askPause = (reason: string) =>
-          bus.proxy({ method: "pause", service: "game", args: { reason }, options: { timeout: 3000 } })
-            .catch(() => {});
-        // The pause handle and the fullscreen control live in the toolbar's own row; it dispatches,
-        // this listens. The shell restores its chrome only when the GAME announces `paused` — one
-        // source of truth for state, which is the game, always.
-        document.addEventListener("justai:pause-request", () => askPause("chrome"));
-        document.addEventListener("justai:fullscreen-request", () =>
-          (stage as any).requestFullscreen?.().catch(() => {}));
-        document.addEventListener("visibilitychange", () => {
-          if (document.hidden && document.documentElement.dataset.stage === "playing") askPause("hidden");
-        });
-        document.addEventListener("keydown", (e) => {
-          if (e.key === "Escape" && document.documentElement.dataset.stage === "playing") askPause("chrome");
-        });
-      }
-
-      const arrived = bus
-        ? new Promise<void>((resolve) => bus.on("connected", (e: any) => { if (e?.name === "game") resolve(); }))
-        : Promise.resolve();
-
-      stage.appendChild(frame);
-      // ── WHAT CROSSES INTO THE FRAME: AN ALLOWLIST, AND A SHORT ONE ──────────────────────────
-      //
-      // Forwarding the persona's whole query string would be the obvious convenience and it is a
-      // privacy hole: a `?data=` envelope, a campaign's utm tags and anything else a person arrived
-      // carrying would be handed to a frame that will one day be a third party's deployment. So the
-      // shell passes exactly two flags, both of them DEBUG instruments that belong to whoever is
-      // looking at the page rather than to whoever built the game: `xray`, the framework's design
-      // grid, and `slow`, which asks a game to spread its own loading out far enough to watch.
-      // A game that does not understand either simply ignores them.
-      const here = new URLSearchParams(location.search);
-      const url = new URL(src, location.href);
-      for (const flag of ["xray", "slow"]) if (here.has(flag)) url.searchParams.set(flag, here.get(flag) ?? "");
-      frame.src = url.pathname + url.search;
-
-      // ── THE HANDOVER ─────────────────────────────────────────────────────────────────────────
-      //
-      // ONE CALL CARRIES BOTH. atrium's `proxy` takes a progress callback and resolves when the
-      // method returns, so `boot` is the whole protocol: the game reports as it loads and answers
-      // when it can draw. No second channel, no polling, and nothing to keep in sync.
-      //
-      // ** THE EXPLICIT `timeout` IS LOAD-BEARING. ** atrium's default transaction timeout is ONE
-      // SECOND — right for a `pick` or an `echo`, and catastrophic here: every game on earth takes
-      // longer than a second to load, so `boot` rejected at 1.000s, the catch below swallowed it,
-      // and the shell handed over an empty frame while the game was still fetching. It failed the
-      // same way every time and said nothing, which is the whole silent-failure genre in one line.
-      // Caught by the spec in harness/tests/behavior.spec.mjs, which asked the bar what it read.
-      //
-      // The number is deliberately far beyond any real load: the POLICY is the watchdog above, and
-      // two clocks racing to enforce one promise means the promise is whichever one you forgot.
-      const boot = (async () => {
-        if (!bus) return {};
-        await arrived;
-        return await bus.proxy({
-          method: "boot",
-          service: "game",
-          options: { timeout: 600000, callback: (e: any) => setProgress(e?.progress ?? e?.value ?? e) },
-        });
-      })();
-
-      // The watchdog is the other half of the promise made to the player: whatever is wrong in
-      // there, they are better off seeing it than seeing us wait for it.
-      const giveUp = new Promise<any>((resolve) => {
-        bump = () => {
-          if (watchdog) clearTimeout(watchdog);
-          watchdog = setTimeout(() => resolve({ lateBy: "silence" }), PATIENCE);
-        };
-        bump();
-      });
-
-      // A SWALLOWED REASON IS THE FAILURE ITSELF. The frame is handed over either way — a player must
-      // not lose the game to a broken handshake — but the catch SAYS what went wrong, because the
-      // symptom on the other side of it is "the wait ended early" and nothing else. This cut's own
-      // one-second bug lived inside an empty catch and was invisible until a spec read the bar.
-      const answer: any = await Promise.race([
-        boot.catch((e: any) => {
-          console.warn("[preroll] the game's boot did not complete:", e?.message || e);
-          return {};
-        }),
-        giveUp,
-      ]);
-      if (watchdog) clearTimeout(watchdog);
-
-      // The boot answer carries the game's protocol version, and version 2 is the declaration
-      // that `pause` is registered and will be honoured. Resolved before open(), so a game
-      // announcing `playing` in its very first frame — or a breath before its own answer — is
-      // already trusted by the time the door goes up.
-      declareProtocol(typeof answer?.protocol === "number" ? answer.protocol : 1);
-
-      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.
-      if (answer?.curtain) root.dataset.curtain = "";
-    };
-
-    playBtn.addEventListener("click", start, { once: true });
-  }
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/preroll.ts — see that file for why it is not in here.
+    import "./behaviour/preroll";
+  </script>