@trading-game/design-intelligence-layer 1.0.5 → 1.0.6

package/docs/components/button.md

@@ -74,8 +74,10 @@ Padding-x = height/2 − 4; gap fixed at 8px and padding does not change when ic
 
 - All shapes are `rounded-full`; icon sizes are perfect circles.
 - Focus: `focus-visible:ring-[3px] ring-ring-focus-strong` + focus border.
-- Disabled is **per variant**, never an element `opacity` — that dims the fill and its label together, which is why a disabled `primary` used to lose its label entirely. Each variant keeps its own construction:
-  - filled page variants (`primary`, `secondary`, `frosted`) take the disabled glaze (`background-disabled-default` on `background-image`, so the fill stays underneath) plus `text-disabled-default`; `secondary` also drops to `border-disabled-default`
+- Disabled is **per variant and per theme**. Each cell is a deliberate choice, not a rule the others follow. Current decisions:
+  - `primary` — 24% opacity in both themes, via `disabled:opacity-(--opacity-disabled)`. The whole control drains together, so the label goes with the fill: it lands at 1.14:1 in light and 2.13:1 in dark against its own washed fill and is effectively unreadable. WCAG 1.4.3 exempts inactive controls, so this is an accepted legibility trade rather than a compliance break
+  - `secondary` — 24% opacity in light; in dark it holds full opacity and takes a black-24% glaze plus `border-disabled-default` and `text-disabled-default`, so it recedes with its label still legible. The theme split lives in the stylesheet (`.button-disabled-secondary`) because the package ships no `dark:` variant
+  - `frosted` — 40% opacity via `disabled:opacity-(--opacity-disabled-frosted)`, in both themes, keeping `text-brand-selected`. It has its own strength because its fill is only a 10–24% brand tint, so the shared 24% faded it to near-invisible; the previous glaze plus `text-disabled-default` was worse still, since the ink left the brand family for neutral grey while the fill stayed blue
   - fill-less variants (`tertiary`, `tertiary-on-brand`, `secondary-on-brand`) take the ink only — a glaze would paint a surface the variant deliberately doesn't have
   - on-brand variants stay on the static white ladder: `primary-on-brand`'s white pill becomes `white-alpha-24`, `frosted-on-brand` drops from `alpha-24` to `alpha-8`, and the ink is `text-on-brand-disabled-default`
 - `loading` still uses `opacity-24` — a different state, deliberately.

package/docs/components/checkbox.md

@@ -22,7 +22,7 @@ Binary (or indeterminate) form control that fills brand blue when checked.
 | `checked` | `boolean \| "indeterminate"` | — | Controlled state. |
 | `defaultChecked` | `boolean` | — | Uncontrolled initial state. |
 | `onCheckedChange` | `(checked) => void` | — | Radix change callback. |
-| `disabled` | `boolean` | `false` | `cursor-not-allowed`, opacity 50%. |
+| `disabled` | `boolean` | `false` | `cursor-not-allowed` + 24% opacity (`--opacity-disabled`). The whole control fades, including a checked box's brand fill — previously the fill was untreated, so disabled-and-checked was indistinguishable from enabled. |
 | `required`, `name`, `value` | form props | — | Radix renders a hidden input inside forms. |
 
 ## Variants & sizes

package/docs/components/drawer.md

@@ -13,13 +13,20 @@ Edge-anchored panel built on vaul — the mobile-first modal that slides from th
 
 - `Drawer` / `DrawerTrigger` / `DrawerPortal` / `DrawerClose` — vaul plumbing with `data-slot` names (`drawer`, `drawer-trigger`, `drawer-portal`, `drawer-close`).
 - `DrawerOverlay` — scrim in `background-overlay-default`; `data-slot="drawer-overlay"`.
-- `DrawerContent` — the panel; direction-aware chrome via `data-vaul-drawer-direction`; `data-slot="drawer-content"`. Bottom drawers show the grab handle: a 100×8px `rounded-full` bar in `bg-border-default-default`.
+- `DrawerContent` — the panel; direction-aware chrome via `data-vaul-drawer-direction`; `data-slot="drawer-content"`. Takes `dismiss`: `"handle"` (default) shows the grab handle, a 100×8px `rounded-full` bar in `bg-border-default-default`, on bottom drawers only; `"close"` shows a close button instead, in every direction.
 - `DrawerHeader` — `p-4`, centred for top/bottom, left from `md`; `data-slot="drawer-header"`.
 - `DrawerTitle` / `DrawerDescription` — `type-drawer-title` / `-description`.
 - `DrawerFooter` — bottom-pinned (`mt-auto`), stacked full-width children; `data-slot="drawer-footer"`.
 
 ## API
 
+### DrawerContent
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `dismiss` | `"handle" \| "close"` | `"handle"` | `"handle"` is the drag pill, unchanged, bottom direction only. `"close"` swaps it for the same control Dialog and Sheet use — `NavigationButton size="sm"` around a `size-4` icon, a 32px circle on a 16px glyph — wrapped in `Drawer.Close` and shown in every direction. It sits in flow on its own row rather than absolutely, so nothing shares its line and the header always starts below it; `p-4 pb-0` puts it 16px from the top and right edges, matching the header's own padding. `data-slot="drawer-close"`. |
+| …rest | vaul `Content` props | — | Pass through untouched. |
+
 ### Drawer (root — vaul props)
 
 | Prop | Type | Default | Notes |
@@ -61,8 +68,9 @@ import {
 
 | Direction | Chrome |
 | --- | --- |
-| `bottom` | `rounded-t-2xl`, top hairline, `max-h-[80vh]`, grab handle |
+| `bottom` | `rounded-t-2xl`, top hairline, `max-h-[80vh]`, grab handle under `dismiss="handle"` |
 | `top` | `rounded-b-2xl`, bottom hairline, `max-h-[80vh]`, no handle |
+| any | `dismiss="close"` shows the close button regardless of direction |
 | `left` / `right` | square corners, side hairline, `w-3/4` capped at `sm:max-w-sm` |
 
 ## Tokens
@@ -79,7 +87,8 @@ import {
 
 - vaul provides the drag/velocity dismissal, snap points, and background scaling; direction is read from `data-vaul-drawer-direction` at render.
 - Only the detached edge is rounded (`rounded-t-2xl` bottom, `rounded-b-2xl` top — the 18px card radius); side drawers stay square because they meet two screen edges.
-- The grab handle renders only on bottom drawers — the direction users can actually drag from comfortably.
+- The grab handle renders only on bottom drawers — the direction users can actually drag from comfortably. The `dismiss="close"` button has no such limit, since a tap target works from any edge.
+- Pick `dismiss="close"` when the drawer is not swipe-dismissible, or on a side drawer where there is no handle at all.
 - Top/bottom drawers cap at 80vh and reserve 96px (`mb-24`/`mt-24`) of visible page.
 - `DrawerFooter` forces every child full-width (`[&>*]:w-full`) — the mobile button stack.
 - Header text centres on top/bottom drawers and left-aligns from `md`.
@@ -94,4 +103,5 @@ import {
 **Don't**
 - Don't add your own rounding to side drawers — square is deliberate.
 - Don't recolour the grab handle; it is `bg-border-default-default` by contract.
+- Don't hand-roll a close button in `DrawerContent`'s children; `dismiss="close"` already wires `Drawer.Close` and matches Dialog and Sheet.
 - Don't exceed 80vh with content — let the body scroll inside the panel instead.

package/docs/components/native-select.md

@@ -55,7 +55,7 @@ import {
 
 - Joins the [Field](./field.md) cascade: with no `size` prop it takes the Field's size; an explicit prop wins. `size="default"` always resolves to `md` regardless of context.
 - `appearance-none` + the injected chevron replace the platform arrow; right padding (`pr-9`, lg `pr-10`) reserves its space.
-- Disabled sets `text-disabled-default` on the wrapper via `has-[select:disabled]:`, lays the disabled glaze (`background-disabled-default` on `background-image`, so the fill stays underneath) on the select, and kills pointer events. The wrapper is no longer dimmed as a group.
+- Disabled lays the disabled glaze (`background-disabled-default` on `background-image`, so the fill stays underneath) on the select and kills pointer events. The wrapper is no longer dimmed as a group. The select carries `disabled:text-disabled-default` **itself** — the wrapper's `has-[select:disabled]:` colour was being overridden by the select's own `text-prominent-default`, so the value stayed at full strength. The chevron takes `group-has-[select:disabled]/native-select:text-icon-disabled-default`, since it is a sibling with its own colour and would not inherit either.
 - The wrapper is `w-fit` and `className` lands on the inner `<select>` — for full-width layouts you must widen the wrapper (e.g. a `w-full` parent with `[&>[data-slot=native-select-wrapper]]:w-full`), not just the select.
 
 ## Do / Don't

package/docs/components/radio-group.md

@@ -66,7 +66,7 @@ import {
 - Single-select with roving tabindex: Tab reaches the group once, arrows move and select within it (Radix).
 - Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
 - Checked state swaps only border and dot — the background never fills; there is no shadow in any state.
-- Disabled items get `cursor-not-allowed` + 50% opacity.
+- Disabled items get `cursor-not-allowed` + 24% opacity (`--opacity-disabled`), which fades the selected indicator with the control. Previously the indicator was untreated.
 - Inside a Field choice card, the item's `data-state=checked` is what flips the surrounding `FieldLabel` to the brand-selected card treatment.
 
 ## Do / Don't

package/docs/components/stepper.md

@@ -12,7 +12,8 @@ The mobile amount tray — a centred amount with frosted − / + circles either
 
 - Container — full-width row, `data-slot="stepper"`, `data-disabled`.
 - − / + — composed `<Button variant="frosted" size="icon-lg">` (48px brand-selected tint circles); each disables at its bound.
-- Centre — optional uppercase `label` over the editable amount (`role="spinbutton"`, tabular semibold figure).
+- Two rows — the optional uppercase `label` spans the whole control, then a 4px gap, then the `−` / amount / `+` row. The label is deliberately **not** nested in the value column: doing so made the buttons centre against the label-plus-amount stack, which dropped them off the amount's centre line.
+- Centre of the row — the editable amount (`role="spinbutton"`, tabular semibold figure), flanked by the two circles.
 
 ## API
 

package/docs/components/switch.md

@@ -20,7 +20,7 @@ Binary on/off toggle (Radix Switch) with a sliding white thumb.
 | `size` | `"sm" \| "default"` | `"default"` | default: 24px tall (`h-6 w-11`, 18px thumb); sm: 20px tall (`h-5 w-9`, 14px thumb). |
 | `checked` / `defaultChecked` | `boolean` | — | Controlled / uncontrolled. |
 | `onCheckedChange` | `(checked: boolean) => void` | — | Radix callback. |
-| `disabled` | `boolean` | — | `cursor-not-allowed` + `text-disabled-default`. The track fill is left alone so a disabled-checked switch still reads as on. |
+| `disabled` | `boolean` | — | `cursor-not-allowed` + 24% opacity (`--opacity-disabled`). Track and thumb fade together; previously both were untreated, so a disabled-checked switch was indistinguishable from enabled. |
 
 ## Variants & sizes
 

package/docs/components/toggle.md

@@ -77,7 +77,7 @@ import { Star } from "lucide-react"
 - Radius is `rounded-md` (8px, the row radius); icons default to `size-4`.
 - `spacing={0}` (default) joins segments: items lose their own radius (`rounded-none`), the first/last regain `rounded-l-md`/`rounded-r-md`, and segments share hairlines by dropping `border-l` on all but the first; any positive `spacing` separates them and each keeps `rounded-md`.
 - Items are `w-auto min-w-0 shrink-0 px-3` and raise `z-10` on focus so the ring is never clipped by neighbours.
-- Disabled: `pointer-events-none` + `text-disabled-default`. The pressed fill is left alone so a disabled-pressed toggle still reads as pressed.
+- Disabled: `pointer-events-none` + 24% opacity (`--opacity-disabled`). The pressed fill fades with the control; previously it was untreated, so a disabled-pressed toggle read as pressed-and-active.
 
 ## Do / Don't
 

package/docs/foundations/colors.md

@@ -46,7 +46,7 @@ All scales run 50→1000 (mono 50→1200; blue adds 25 and 1000 as the two canva
 | `background-tinted-canvas` | blue-600 12%→4% mixed into the canvas + a blue-400 aurora | blue-400 14% into the canvas + aurora | The Refined screen background — a layered gradient, consume via `background: var(--background-tinted-canvas)` on the page root only; ends on `primary-canvas` in both themes so long pages melt in seamlessly |
 | `background-primary-surface` | mono-50 `#FFFFFF` | white 6% over canvas ≈ `#0F0F2C` | Cards, panels, menus, inputs, sheets — the default solid surface |
 | `background-secondary-surface` | mono-100 `#F1F1F1` | white 12% over canvas ≈ `#1F1F3A` | One step up: muted fills, tracks, icon tiles, read-only fields |
-| `background-disabled-default` | white-alpha-24 | black-alpha-50 | **The disabled glaze** — an alpha layer laid *over* whatever fill a control already has, so every variant keeps its identity while draining. Consume it on `background-image` (`[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]`), never `background-color`, or it replaces the fill instead of washing it. Polarity is the inverse of hover — hover advances (black in light, white in dark), disabled recedes (white in light, black in dark) — and the strengths differ because the ground does: white moves fast against a near-white page, black slowly against a near-black canvas |
+| `background-disabled-default` | white-alpha-24 | black-alpha-24 | **The disabled glaze** — an alpha layer laid *over* whatever fill a control already has, so every variant keeps its identity while draining. Consume it on `background-image` (`[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]`), never `background-color`, or it replaces the fill instead of washing it. Polarity is the inverse of hover — hover advances (black in light, white in dark), disabled recedes (white in light, black in dark) — and the strengths differ because the ground does: white moves fast against a near-white page, black slowly against a near-black canvas. Button's `primary` and `secondary` no longer consume it — they were moved to `opacity`/black-24% by explicit decision, see AGENTS rule 13 |
 | `background-hover-default` | black-alpha-4 | white-alpha-12 | The hover glaze — laid over any solid surface |
 | `background-pressed-default` | black-alpha-8 | white-alpha-20 | The pressed glaze |
 | `background-brand-default` | blue-600 `#2323FF` | blue-400 `#4D6BFF` | Primary CTAs, checked controls, solid selection chips |
@@ -85,7 +85,7 @@ All scales run 50→1000 (mono 50→1200; blue adds 25 and 1000 as the two canva
 | `text-success-default` / `-error-` / `-warning-` / `-information-` | status 600 | **static — same in both themes** (deliberate call) | Status text |
 | `text-on-status-static` | mono-50 | static | White on solid status fills (below AA on green/amber — deliberate style call) |
 | `text-demo-default` | ember-500 | static | Demo badge ink |
-| `icon-prominent-default` … `icon-information-default` | aliases of the matching text tokens | — | Separate namespace so icons (3:1 requirement) can diverge later |
+| `icon-prominent-default` … `icon-information-default` | aliases of the matching text tokens | — | Separate namespace so icons (3:1 requirement) can diverge later. `icon-prominent/subtle/disabled-default` are **re-declared in the dark block**: a custom property resolves its `var()` where it is declared, so the `:root` aliases froze at the light values and every `text-icon-*` utility painted a light-theme colour in dark. The status and on-brand members need no override — the text tokens they alias are static |
 
 ## Semantic tokens — Border & Ring
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -554,6 +554,16 @@
      differ because the ground does — white moves fast against a near-white
      page, black moves slowly against a near-black canvas. */
   --background-disabled-default: var(--primitive-white-alpha-24);
+  /* Disabled fade — the 24% opacity treatment. Not a colour, so it sits
+     outside the semantic colour namespaces. Which variants use it, and in
+     which theme, is a per-case decision (see the button rules below), not a
+     blanket rule. */
+  --opacity-disabled: 0.24;
+  /* Frosted drains to 40%, not 24%. Its fill is already a 10%/24% brand
+     tint, so a 24% fade left almost nothing on screen. Static in both
+     themes. Separate token, not a shared one — disabled strength is a
+     per-variant decision. */
+  --opacity-disabled-frosted: 0.4;
   --background-hover-default: var(--primitive-black-alpha-4);
   --background-pressed-default: var(--primitive-black-alpha-8);
   --background-brand-default: var(--primitive-blue-600);
@@ -812,7 +822,10 @@
   --background-primary-canvas: var(--primitive-blue-1000);
   --background-primary-surface: color-mix(in srgb, white 6%, var(--primitive-blue-1000));
   --background-secondary-surface: color-mix(in srgb, white 12%, var(--primitive-blue-1000));
-  --background-disabled-default: var(--primitive-black-alpha-50);
+  /* 24%, not 50%. At 50% the glaze stripped most of the blue out of a navy
+     surface, so a disabled field landed darker and greyer than the canvas
+     and read as a hole punched in the page rather than a drained control. */
+  --background-disabled-default: var(--primitive-black-alpha-24);
   /* solid #1F1F3A — one glaze step above the card (6%) */
   /* solid #0F0F2C — base + white glaze, flattened */
   --background-hover-default: var(--primitive-white-alpha-12);
@@ -846,6 +859,17 @@
   --text-prominent-default: var(--primitive-mono-50);
   --text-subtle-default: var(--primitive-mono-600);
   --text-disabled-default: var(--primitive-mono-900);
+  /* The icon namespace aliases the text ladder, and a custom property
+     resolves its var() where it is DECLARED, not where it is used — so the
+     aliases declared in :root froze at the light values and never flipped
+     here. Every text-icon-* utility in dark was painting a light-theme
+     colour: subtle icons at mono-800 instead of mono-600, prominent at
+     mono-1100 on a near-black canvas. Re-declaring them re-resolves against
+     the dark ink above. Status and on-brand icons need no override — the
+     text tokens they alias are static. */
+  --icon-prominent-default: var(--text-prominent-default);
+  --icon-subtle-default: var(--text-subtle-default);
+  --icon-disabled-default: var(--text-disabled-default);
   --text-on-brand-disabled-default: var(--primitive-white-alpha-24);
   /* Inverse mirrors the light page ladder here — see the note in the light
      block. mono 1100 · 800 · 400, same values light's PAGE row carries. */
@@ -1346,50 +1370,158 @@
   }
 }
 
-/* ── GameLoadingBlock ────────────────────────────────────────────────
-   Brand-blue dotted splash backdrop. The dot colour is derived from the
-   --on-primary token (not a raw white) so it tracks the palette; the dot
-   grid is a background-image, which Tailwind utilities can't express
-   cleanly, so it lives here as a class. */
-.game-loader-backdrop {
-  background-color: var(--primary);
-  background-image: radial-gradient(
-    color-mix(in oklch, var(--on-primary) 16%, transparent) 1px,
-    transparent 1px
+/* ─────────────────────────────────────────────────────────────────
+   Disabled — Primary and Secondary buttons
+
+   Disabled is picked per variant and per theme, not from one rule. The
+   four decisions currently are:
+
+     Primary   · light  — 24% opacity
+     Primary   · dark   — 24% opacity
+     Secondary · light  — 24% opacity
+     Secondary · dark   — black 24% glaze over the fill
+
+   Primary is the same in both themes, so it takes the opacity utility in
+   the component. Secondary differs by theme, and the package ships no
+   `dark:` variant, so its split lives here where the themes are declared.
+   Changing any one cell is expected; they are not derived from each other.
+   ───────────────────────────────────────────────────────────────── */
+.button-disabled-secondary:disabled {
+  opacity: var(--opacity-disabled);
+}
+
+.dark .button-disabled-secondary:disabled,
+[data-theme="dark"] .button-disabled-secondary:disabled {
+  opacity: 1;
+  /* Rides the alpha ladder directly: a fixed recede step, not a themed
+     colour, and it is laid over the fill so the variant keeps its identity. */
+  background-image: linear-gradient(
+    var(--primitive-black-alpha-24),
+    var(--primitive-black-alpha-24)
   );
-  background-size: 14px 14px;
+  border-color: var(--border-disabled-default);
+  color: var(--text-disabled-default);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+   Game loading splash
+
+   The backdrop is the tinted canvas, so the splash reads as the product's
+   own surface in both themes and already lands on the page canvas the app
+   is about to paint. The dot grid is a background-image, which Tailwind
+   utilities can't express cleanly, so it lives here as a class.
+   ───────────────────────────────────────────────────────────────── */
+.game-loader-field {
+  position: absolute;
+  inset: 0;
+  background-color: var(--background-primary-canvas);
+  background-image:
+    radial-gradient(
+      color-mix(in oklch, var(--text-prominent-default) 10%, transparent) 1px,
+      transparent 1px
+    ),
+    var(--background-tinted-canvas);
+  background-size: 14px 14px, auto, auto;
+}
+
+/* The product mark, subtracted from the field so it is a window rather than
+   ink. `--game-loader-mark` is the logo's url(), set by the component from
+   the same prop that draws the resting mark, so the two always agree. */
+.game-loader-punch {
+  mask-image: linear-gradient(#000, #000), var(--game-loader-mark);
+  mask-size: 100% 100%, 120px 113px;
+  mask-position: center, center;
+  mask-repeat: no-repeat, no-repeat;
+  mask-composite: exclude;
+  -webkit-mask-image: linear-gradient(#000, #000), var(--game-loader-mark);
+  -webkit-mask-size: 100% 100%, 120px 113px;
+  -webkit-mask-position: center, center;
+  -webkit-mask-repeat: no-repeat, no-repeat;
+  -webkit-mask-composite: xor;
 }
 
-/* Exit reveal — the monogram hangs, snaps outward, and the app is revealed
-   behind it (X/Twitter-style). Suppressed under prefers-reduced-motion by
-   the component, which falls back to a plain fade. */
-@keyframes game-loader-zoom {
+.game-loader-mark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120px;
+  height: auto;
+  transform: translate(-50%, -50%);
+  transform-origin: center;
+}
+
+/* Exit reveal — ONLY the hole grows. The field keeps its position, its
+   gradient and its dot grid, so nothing behind the hole appears to zoom;
+   scaling the field instead is what made the old reveal read as a camera
+   push. The field fades across the same beat, so the app bleeds through
+   from about a third of the way in rather than arriving all at once.
+   Suppressed under prefers-reduced-motion by the component, which falls
+   back to a plain fade. */
+@keyframes game-loader-reveal {
   0% {
-    transform: scale(1);
-    animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1);
+    mask-size: 100% 100%, 120px 113px;
+    -webkit-mask-size: 100% 100%, 120px 113px;
+    animation-timing-function: cubic-bezier(0.33, 0, 0.55, 1);
   }
 
-  22% {
-    transform: scale(0.85);
-    animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.35);
+  26% {
+    mask-size: 100% 100%, 108px 102px;
+    -webkit-mask-size: 100% 100%, 108px 102px;
+    animation-timing-function: cubic-bezier(0.72, 0, 0.86, 0.3);
   }
 
   100% {
-    transform: scale(22);
+    mask-size: 100% 100%, 420vmax 396vmax;
+    -webkit-mask-size: 100% 100%, 420vmax 396vmax;
   }
 }
 
-.game-loader-mark {
-  transform-origin: center;
-  will-change: transform;
+@keyframes game-loader-field-fade {
+  to {
+    opacity: 0;
+  }
+}
+
+.game-loader-field-exit {
+  will-change: mask-size, opacity;
+  animation:
+    game-loader-reveal 660ms forwards,
+    game-loader-field-fade 480ms 180ms ease-in forwards;
+}
+
+/* The resting mark tracks the same anticipation dip, then hands over to the
+   hole at 27%. The two shapes coincide there, so the handover is invisible. */
+@keyframes game-loader-plug-dip {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.33, 0, 0.55, 1);
+  }
+
+  26% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 1;
+  }
+
+  27% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+  }
 }
 
 .game-loader-mark-exit {
-  animation: game-loader-zoom 0.34s forwards;
+  will-change: transform, opacity;
+  animation: game-loader-plug-dip 660ms forwards;
 }
 
 /* Progress-bar shimmer — sweeps across the filled portion while a stage is
-   still loading, so a held bar still reads as "working". */
+   still loading, so a held bar still reads as "working". The fill is now the
+   brand colour on a canvas track, so the sweep is the on-brand white. */
 @keyframes game-loader-sweep {
   0% {
     left: -60%;
@@ -1404,7 +1536,7 @@
   background: linear-gradient(
     90deg,
     transparent,
-    color-mix(in oklch, var(--primary) 35%, transparent),
+    color-mix(in oklch, var(--icon-on-brand-static) 35%, transparent),
     transparent
   );
   animation: game-loader-sweep 1.4s ease-in-out infinite;