From 8f151e38b40e79b0243d16f8c0e5cf792203875d Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Tue, 21 Jul 2026 20:00:07 +0200
Subject: [PATCH] docs(launcher): add Call to Play specification and design
 reference

Extend the launcher design specification and prototype reference with the
"Call to Play" multiplayer coordination feature and clean up top-bar chrome.

Key additions and changes:
- Spec & Roadmap: Document Call to Play mechanics in SPEC.md, including Play
  Now / Scheduled call flavors, 15-minute check-in windows, top-bar button
  with active count badge, quick-bar ticker stack above grid, overlay modal,
  and per-call group chat. Update design/README.md.
- Components & Logic: Add calltoplay.jsx and ctp-chat.jsx components for call
  creation, status progression, and chat. Extend data.jsx with a mock peer
  roster (PEERS) and helper functions for peer install count tracking.
- Top-bar Cleanup: Move game-folder configuration from top bar into Settings ->
  Library, freeing top-bar space for the Call to Play action button.
- Styling & Layout: Add CTP quick-bar, ticker, badge, card, and chat styles to
  styles.css, and integrate CTP components into launcher.jsx, components.jsx,
  and SoftLAN Launcher.html.

Test Plan:
- `git diff --cached --check` -- passed (no trailing whitespace or conflict markers)
- `cargo check --workspace` -- passed cleanly
- Manual review of staged diff across 9 design/launcher files -- confirmed clean staging
---
 design/README.md                              |  13 +-
 design/launcher/SPEC.md                       | 167 +++-
 .../design_reference/SoftLAN Launcher.html    |  72 +-
 .../launcher/design_reference/calltoplay.jsx  | 814 ++++++++++++++++++
 .../launcher/design_reference/components.jsx  |  11 +
 design/launcher/design_reference/ctp-chat.jsx |  86 ++
 design/launcher/design_reference/data.jsx     |  30 +
 design/launcher/design_reference/launcher.jsx |  19 +
 design/launcher/design_reference/styles.css   | 629 +++++++++++++-
 9 files changed, 1831 insertions(+), 10 deletions(-)
 create mode 100644 design/launcher/design_reference/calltoplay.jsx
 create mode 100644 design/launcher/design_reference/ctp-chat.jsx

diff --git a/design/README.md b/design/README.md
index a8452f4..aa955a5 100644
--- a/design/README.md
+++ b/design/README.md
@@ -23,9 +23,11 @@ design_handoff_softlan_launcher/
 │   └── design_reference/    the working prototype the spec describes
 │       ├── SoftLAN Launcher.html   open this to see all screens/variants
 │       ├── styles.css
-│       ├── data.jsx                mock catalog + format helpers
+│       ├── data.jsx                mock catalog + LAN peer roster + format helpers
 │       ├── components.jsx          Icon set, cards, modals, Settings dialog
-│       └── launcher.jsx            composes chrome + grid + modals
+│       ├── ctp-chat.jsx            Call-to-Play chat panel + shared helpers
+│       ├── calltoplay.jsx          Call-to-Play: quick bars, overlay, create form
+│       └── launcher.jsx            composes chrome + grid + modals + Call to Play
 │
 └── logo/                ← THE BRAND MARK
     ├── INTEGRATION.md       how to ship the logo (component + assets + lockup)
@@ -75,8 +77,11 @@ placeholder for it.
 ## Status
 
 - **Launcher:** high-fidelity, decisions locked. Variant **A** is the chosen
-  chrome. Open questions (empty/error states, logs viewer, keyboard grid nav,
-  German strings, "server running" state) are listed at the end of `SPEC.md`.
+  chrome. Includes **Call to Play** (rally the LAN around a game + time — live
+  or scheduled, with RSVP, check-in window, and per-call chat). Open questions
+  (empty/error states, logs viewer, keyboard grid nav, German strings, "server
+  running" state, real-time transport for Call to Play) are listed at the end
+  of `SPEC.md`.
 - **Logo:** final. Live component + static assets + horizontal lockup (dark and
   light) all included.
 
diff --git a/design/launcher/SPEC.md b/design/launcher/SPEC.md
index 90d6dbf..9e02f99 100644
--- a/design/launcher/SPEC.md
+++ b/design/launcher/SPEC.md
@@ -32,6 +32,20 @@ The HTML mock includes two chrome variants — **A (single-row)** and **B (two-r
 
 ---
 
+## Changes since v4
+
+- **Call to Play added.** A whole new coordination layer on top of the library:
+  rally the LAN around a game and a time. Two flavors — **Play now** (give
+  people N minutes to ready up) and **Scheduled** ("Among Us at 20:00", collect
+  "I'm in" RSVPs, then a **check-in window** opens 15 min before start). Every
+  call carries a small group **chat**. Surfaced in three places: a **Call to
+  Play button** in the top bar (with an active-call badge), a persistent stack
+  of **quick bars** above the grid, and a full **overlay** with per-call cards
+  and a create form. Full spec in the new **"Call to Play"** section below.
+  New source files: `calltoplay.jsx`, `ctp-chat.jsx`. New data: a mock LAN
+  **peer roster** (`PEERS`) in `data.jsx`. New icons: `flag`, `chat`, `send`,
+  `clock`, `caretUp`, `caretDown`.
+
 ## Changes since v3
 
 - **Game-folder button removed from the top bar.** Setting the games directory is a one-time action — it doesn't deserve permanent real estate in the chrome. The button is gone from both top-bar variants, freeing the right zone for the kebab menu alone (variant A) / the storage meter + kebab pair (variant B).
@@ -84,6 +98,7 @@ The default screen. A grid of game cards over a dark, gradient-tinted background
    - **Right zone (col 3, flex space-between with two sub-groups):**
      - **Sort menu** (pinned left, hugging search) — 36 px button, same surface style as search. Label `Sort: <bold value>` plus 13 px sort-bars icon and 11 px chevron. Click reveals dropdown menu below. Options: `Name (A–Z)`, `Size (largest)`, `Recently Played`, `Status`. This is the only thing on the *left* side of the right zone — it's part of the search cluster, so it hugs the search.
      - **Kebab menu** (`⋮`, pinned far-right) — 36×36 button with same surface as search. Menu items: `Settings` (opens Settings dialog), `Refresh library`, separator, `Unpack logs`, `About SoftLAN`. This is the only "app-level" control left in the top bar; the game-folder picker has moved into Settings.
+     - **Call to Play button** (`.ctp-btn`, sits just left of the kebab in the far-right sub-group) — 36 px pill, flag icon + `Call to Play` label. Carries an accent-filled **badge** with the count of active (non-started) calls. Opens the Call to Play overlay. See the **"Call to Play"** section for the full feature. In variant B it lives in row 1's right group, between the storage meter and the kebab.
 
    **Narrow-window fallback** (container width < 1100 px): the grid is replaced by a single `display: flex; flex-wrap: nowrap; gap: 16px` row. All items align left-to-right in source order (brand → filter → search → sort → kebab). The search field becomes `flex: 1 1 auto` so it absorbs remaining slack. The geometric centering is abandoned at narrow widths because there isn't enough horizontal slack for it to read cleanly. Implement via container query (`@container launcher (max-width: 1100px)`) on the launcher root; a viewport media query is an acceptable fallback if you're not using container queries yet.
 
@@ -416,6 +431,144 @@ Dot uses the live accent so it visually ties to the progress fill.
 
 ---
 
+## Call to Play
+
+A coordination layer that sits on top of the library: **rally the people on the
+LAN around a specific game at a specific time.** It answers the actual social
+question at a LAN party ("what are we all playing, and when?") that a plain
+library grid can't.
+
+Source: `calltoplay.jsx` (the feature) + `ctp-chat.jsx` (per-call chat + shared
+`ctpAvatarColor` / `ctpFmtClock` helpers). Styles are the `ctp-*` classes in
+`styles.css`. Backed by the mock LAN **peer roster** `PEERS` in `data.jsx`.
+
+### Two flavors of call
+
+| | **Play now** | **Scheduled** |
+|---|---|---|
+| Set up with | game + max players + **duration** (5/10/15/30/60 min) | game + max players + **clock time** (24h, + which day) |
+| Others respond | `Ready now` or `+N minutes` | `I'm in` (RSVP), then check in later |
+| Resolves | when the roster fills **or** the timer runs out | at the scheduled time, after a check-in window |
+| Who starts it | the **caller** decides the actual launch | the **caller**, once people have checked in |
+
+**Check-in window.** `CHECKIN_LEAD_MS = 15 min`. A scheduled call sits in the
+`scheduled` phase collecting RSVPs until 15 minutes before its start time, then
+flips into the `checkin` phase: it lights up everywhere and everyone who said
+"I'm in" is nudged to answer with the same `Ready now` / `+N minutes` states as
+a play-now call. A play-now call is effectively "always in its check-in window."
+
+**Every call carries a small group chat** (see "Per-call chat" below).
+
+### Three surfaces
+
+1. **Top-bar button** (`CallToPlayButton` / `.ctp-btn`) — flag icon + label +
+   an accent badge counting active (non-`started`) calls. Opens the overlay.
+2. **Quick bars** (`CallToPlayTicker` / `.ctp-ticker-stack`) — a persistent
+   stack rendered at the top of the grid area, **one row per active call**.
+   Sorted **ready → starting-soon → the rest**, ties broken by whichever
+   resolves/starts soonest (`TICKER_RANK` = ready 0, soon 1, call/scheduled 2;
+   then by `deadline`). Clicking a row opens the overlay focused on that call.
+3. **Overlay** (`CallToPlayOverlay`) — a modal (same scrim/panel treatment as
+   the other dialogs) with a header, a **Call a new match** button, the create
+   form, and a list of **nomination cards** (started calls sink to the bottom).
+
+### Status model
+
+Two derived values drive everything (`calltoplay.jsx`):
+
+- `phaseOf(call)` → `'now'` (no `scheduledFor`) · `'scheduled'` (>15 min out) ·
+  `'checkin'` (within the 15-min lead).
+- `statusOf(call)` (quick-bar/label status) → `'started'` · `'ready'`
+  (`readyCount >= maxPlayers`, or state `done`) · `'soon'` (`deadline - now ≤
+  15 min`) · `'scheduled'` (has a clock time) · `'call'` (a plain play-now call).
+
+Quick-bar labels + LED colors: **SCHEDULED**, **CALL TO PLAY**, **STARTING
+SOON**, **READY** (`TICKER_LABEL`), each with its own dot color via
+`.ctp-ticker-dot[data-status]`.
+
+**Per-participant ready state:** `ready` (explicitly readied, or their `readyAt`
+countdown has elapsed) · `in` (RSVP'd to a scheduled call but not checked in
+yet) · `pending` (checked in with a `+N minutes` buffer, counting down). Shown
+as compact **ready-bubbles** in the quick bars (`MiniBubbles`: initials +
+green ring/check when ready, `+Nm` tag when pending, dimmed when just "in") and
+as larger `AvatarChip`s in the nomination card roster.
+
+### Nomination card (`NominationCard`)
+
+Top to bottom:
+
+1. **Header** — square game cover + title + a sub-line: `Called by <creator> · N/M peers have it installed` (or `Scheduled by <creator> · starts at HH:MM · …`), and a **timer** on the right: a live `M:SS` countdown for play-now/check-in, the **clock time + "in N min"** for a scheduled call, `Ready`, or `Launching…`. Countdown urgency (`data-urgency` high/mid/low) tints it as time runs low.
+2. **Check-in note** — only in the `checkin` phase: a clock icon + "Starting soon — check-in is open" (or a personalized nudge if you RSVP'd).
+3. **Progress bar** — time remaining as a fill (accent, → green when done); hidden while a call is still in the far-out `scheduled` phase.
+4. **Roster** — `readyCount/maxPlayers ready` (scheduled shows `N in · up to M players`; check-in adds `· K not checked in yet`), then avatar chips for each participant plus empty slots up to `maxPlayers`.
+5. **Actions** — context-dependent on your role (**creator** / **participant** / **outsider**) and phase: `Ready now` + `+5/10/15/30m` buffer buttons, `I'm in` (RSVP), `Start now` / `Add 5 more minutes` (creator once resolved), `Leave` / `Can't make it`, or a status note.
+6. **Chat** — the collapsible per-call chat panel.
+7. **Cancel** — creators get a `Cancel this call` link with an inline confirm.
+
+### Create form (`CreateNominationForm`)
+
+Game search (typeahead over the catalog) → on pick, max-players defaults to the
+game's parsed player cap (`parseMaxPlayers`). **When** toggles `Now` vs
+`Schedule`. `Now` reveals the **Give people** duration chips. `Schedule` reveals
+a **24-hour time picker** (hour/minute steppers **and** a "Type a time" free-text
+field accepting `20:00` / `2000` / `9:30`) plus **day chips** (Today + next two
+days). The confirm button reads `Call it — <game>` or `Schedule it — <game> ·
+<day> <time>`.
+
+### Per-call chat (`CtpChat`, `ctp-chat.jsx`)
+
+Collapsed to a one-line toggle showing an unread badge + a preview of the last
+message; expands to a compact IRC-style list (colored usernames via
+`ctpAvatarColor`, `HH:MM` timestamps) + an input. All chat state is local to the
+card. Usernames are colored deterministically by a hash of the name.
+
+### Data shape
+
+```ts
+type Nomination = {
+  id: string;
+  gameId: string;
+  creator: string;                 // username of the caller
+  maxPlayers: number;
+  createdAt: number;               // ms epoch
+  scheduledFor: number | null;     // ms epoch clock time; null = play-now
+  deadline: number;                // play-now: createdAt + durationMin; scheduled: === scheduledFor
+  participants: Record<string, {   // keyed by username
+    status: 'ready' | 'in' | 'pending';
+    joinedAt: number;
+    readyAt?: number;              // ms epoch a 'pending' buffer elapses
+  }>;
+  messages: { id: string; from: string; text: string; at: number }[];
+  state: 'open' | 'done' | 'started';
+  startedAt?: number;
+};
+```
+
+The `useNominations({ username, seed })` hook owns the list and exposes
+`createNomination`, `respond`, `rsvp`, `sendMessage`, `leave`, `cancel`,
+`startNow`, `addTime`.
+
+### Mock vs production
+
+The mock **simulates other people** with a 1-second `setInterval`
+(`tickNomination`): bots RSVP to scheduled calls, ready-up during check-in, walk
+in late, and occasionally post a chat line — purely so the demo resolves
+visibly (bots use second-scale buffers; real people use the minute-scale ones).
+The mock also seeds a few representative calls on mount (a live call with chat,
+a fresh call you started, a scheduled call whose check-in window just opened,
+and one scheduled for later collecting RSVPs).
+
+**In production, replace the simulation with a real-time LAN transport:** the
+launcher instances broadcast nominations, responses, RSVPs, and chat messages to
+each other (whatever the app uses — a small pub/sub over the LAN, a lightweight
+signaling server, or Tauri-side networking). Swap the guts of `useNominations`
+(the `setInterval` + local `setNoms`) for your networking layer that pushes the
+same state shape; the rendering components need nothing else. The `username` that
+identifies "you" comes from `settings.username` (the Profile setting), not a
+prop default.
+
+---
+
 ## Filter controls — variant B (not used, kept for reference)
 
 The two-row chrome has a different filter style — **underlined tabs with counts**, like browser tabs:
@@ -570,7 +723,7 @@ Cover art in the design files is **stylized placeholder art** — generated enti
 
 In the production app, the launcher should ideally use real cover-art when available (fetch from IGDB / Steam / local game folder) and fall back to the placeholder generator for games without art. The placeholder generator is in `design_reference/components.jsx → GameCover`.
 
-The icon set (search, play, **server**, install, download, folder, kebab, sort, users, close, check, chevron, trash) is in `design_reference/components.jsx → Icon`. They are 12-14px inline SVGs using `currentColor`. Reuse as-is or substitute with the codebase's existing icon library at the same visual weight. The `server` glyph is new in this round — two stacked rounded rectangles with LED dots, used only on the Start Server button.
+The icon set (search, play, **server**, install, download, folder, kebab, sort, users, close, check, chevron, trash, **flag**, **clock**, **chat**, **send**, **caretUp**, **caretDown**) is in `design_reference/components.jsx → Icon`. They are 12-14px inline SVGs using `currentColor`. Reuse as-is or substitute with the codebase's existing icon library at the same visual weight. The `server` glyph drives the Start Server button; `flag` / `clock` / `chat` / `send` / `caretUp` / `caretDown` are used by Call to Play.
 
 Fonts to load:
 ```html
@@ -587,17 +740,22 @@ Fonts to load:
 design_reference/
 ├── SoftLAN Launcher.html   ← entry; wires React + Babel, mounts <App>
 ├── styles.css              ← all visual styles (CSS custom props + components)
-├── data.jsx                ← mock GAMES array + filter/sort helpers + STORAGE mock
+├── data.jsx                ← mock GAMES array + PEERS roster + filter/sort helpers + STORAGE mock
 ├── components.jsx          ← Icon, GameCover, StateChip, ActionButton, GameCard,
 │                             SegmentedFilters, UnderlineFilters, SearchField,
 │                             SortMenu, StorageMeter, KebabMenu,
 │                             GameDetailModal, SettingsDialog (incl. GameFolderField)
-└── launcher.jsx            ← <Launcher> component composing chrome + grid + modals
+├── ctp-chat.jsx            ← CtpChat panel + ctpAvatarColor / ctpFmtClock helpers
+├── calltoplay.jsx          ← Call to Play: useNominations hook, quick bars,
+│                             overlay, nomination cards, create form
+└── launcher.jsx            ← <Launcher> component composing chrome + grid +
+                              modals + Call to Play
 ```
 
 To preview the design in a browser:
 1. Open `SoftLAN Launcher.html` in a static-server (e.g. `python -m http.server` from the folder).
-2. You'll see a design canvas with all variants (A, B, C, D, E, F) side-by-side. Click an artboard's expand button to view it full-screen.
+2. You'll see a design canvas with all variants side-by-side. Click an artboard's expand button to view it full-screen.
+   - **Call to Play** (top section) — the quick-bar main view, and the same with the overlay open (live call + chat, your call, a check-in nudge, and a scheduled RSVP). Click anything to interact live — create a call, ready up, RSVP, chat.
    - **A / B** — chrome variants (A is the chosen direction)
    - **C** — detail overlay for an installed, server-capable game (Counter-Strike 1.6) → shows **Play + Start Server + Uninstall**
    - **D** — detail overlay for a downloaded-but-not-installed game (CoD 4) → shows **Install + Delete from disk**
@@ -615,4 +773,5 @@ To preview the design in a browser:
 - **Progress state** — designed. See "Download progress" section above. The action-button slot is swapped for a live `DownloadProgress` component (card + modal variants with container-query fallback for narrow tiles). Wire it to your real progress events; the rendering layer is dev-ready.
 - **Keyboard arrow nav** — arrow keys should move focus between cards in the grid; not implemented in the mock but mentioned as a goal.
 - **"Server running" state** — once Start Server actually spawns a process, the button should switch to a *running* state (live indicator dot + "Server running" label + click-to-stop). Not designed this round — flag for follow-up alongside whatever server-status panel the app grows.
+- **Call to Play real-time transport** — the feature is fully designed and interactive, but the mock fakes other players with a local `setInterval` simulation. Production needs a real LAN transport that broadcasts nominations / responses / RSVPs / chat between launcher instances and pushes the same state shape into `useNominations`. Notifications when a call you're in enters its check-in window (OS notification / tray) are also a follow-up.
 - **German translations** — the language toggle is wired in Settings, but the catalog of translated UI strings hasn't been compiled. Stand up `react-i18next` (or equivalent) and seed `en.json` from the existing copy; `de.json` is a translation task for whoever owns localization.
diff --git a/design/launcher/design_reference/SoftLAN Launcher.html b/design/launcher/design_reference/SoftLAN Launcher.html
index 2848d30..7cb81b9 100644
--- a/design/launcher/design_reference/SoftLAN Launcher.html	
+++ b/design/launcher/design_reference/SoftLAN Launcher.html	
@@ -23,6 +23,8 @@
 <script type="text/babel" src="tweaks-panel.jsx"></script>
 <script type="text/babel" src="data.jsx"></script>
 <script type="text/babel" src="components.jsx"></script>
+<script type="text/babel" src="ctp-chat.jsx"></script>
+<script type="text/babel" src="calltoplay.jsx"></script>
 <script type="text/babel" src="launcher.jsx"></script>
 </head>
 <body>
@@ -32,7 +34,7 @@
 const { useState } = React;
 
 const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
-  "accent": "#3b82f6",
+  "accent": "#a855f7",
   "density": "normal",
   "aspect": "square",
   "bg": "gradient",
@@ -47,9 +49,77 @@ function App() {
   const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
   const heroGame = GAMES.find(g => g.id === 'cs'); // installed + canHostServer → shows Play + Start Server + Uninstall
 
+  // Seed data for the "Call to Play" showcase — a live call with chat, a
+  // fresh call started by you, a SCHEDULED call whose 15-minute check-in
+  // window just opened (highlighted, you still have to ready up), and one
+  // scheduled for later tonight that's still collecting "I'm in" RSVPs.
+  const ctpSeeds = React.useMemo(() => {
+    const now = Date.now();
+    const me = (t.username || 'you').trim() || 'you';
+    return [
+      {
+        gameId: 'cs', creator: 'shadowfox', maxPlayers: 10, ageSec: 95, durationMin: 25,
+        participants: {
+          pixelqueen: { status: 'ready', joinedAt: now - 60000 },
+          kbmaster: { status: 'ready', joinedAt: now - 40000 },
+          nullptr: { status: 'pending', joinedAt: now - 20000, readyAt: now + 50000 },
+        },
+        messages: [
+          { from: 'shadowfox', text: 'dust2, default rules — who is in?', agoSec: 90 },
+          { from: 'kbmaster', text: 'in. someone seed the map pack for nullptr', agoSec: 60 },
+          { from: 'nullptr', text: 'downloading, 2 min', agoSec: 35 },
+        ],
+      },
+      {
+        gameId: 'l4d2', creator: me, maxPlayers: 4, ageSec: 15, durationMin: 6,
+        participants: {
+          afk_andy: { status: 'pending', joinedAt: now - 5000, readyAt: now + 35000 },
+        },
+      },
+      {
+        gameId: 'tf2', creator: 'wavedash', maxPlayers: 12, ageSec: 3600, scheduledInMin: 12,
+        participants: {
+          [me]: { status: 'in', joinedAt: now - 3000000 },
+          gg_val: { status: 'ready', joinedAt: now - 2000000 },
+          crit_happens: { status: 'in', joinedAt: now - 1500000 },
+          lowping_larry: { status: 'pending', joinedAt: now - 1000000, readyAt: now + 240000 },
+        },
+        messages: [
+          { from: 'wavedash', text: 'payload maps tonight — check in when you are at your seat', agoSec: 300 },
+          { from: 'gg_val', text: 'ready, lobby is open', agoSec: 120 },
+        ],
+      },
+      {
+        gameId: 'amongus', creator: 'pixelqueen', maxPlayers: 10, ageSec: 5400, scheduledInMin: 128,
+        participants: {
+          ctrlaltdave: { status: 'in', joinedAt: now - 4000000 },
+          afk_andy: { status: 'in', joinedAt: now - 3000000 },
+        },
+        messages: [
+          { from: 'pixelqueen', text: 'right after the pizza break — bring headphones', agoSec: 4800 },
+          { from: 'ctrlaltdave', text: 'in. can we start 10 min later?', agoSec: 3600 },
+        ],
+      },
+    ];
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <React.Fragment>
       <DesignCanvas>
+        <DCSection id="call-to-play" title="Call to Play — now, scheduled &amp; chat"
+                   subtitle="Anyone can call a match — right now (give people N minutes to ready up) or scheduled for a clock time ('Among Us at 20:00'). Scheduled calls collect 'I'm in' RSVPs; 15 minutes before start the call enters its check-in window and lights up everywhere, nudging everyone who's in to answer Ready now or +N minutes. Each call carries a small group chat. The quick bars lead with the status — SCHEDULED / CALL TO PLAY / STARTING SOON / READY, each with its own LED color — sorted ready → starting soon → the rest (soonest first), with per-player ready-bubbles and the latest chat line inline. Click anything to interact live.">
+          <DCArtboard id="ctp-quickbars" label="Main view — quick bars with ready-bubbles + check-in highlight" width={1340} height={840}>
+            <Launcher variant="single" tweaks={t} setTweak={setTweak}
+                      initialFilter="all" initialSort="recent"
+                      seedCallToPlay={ctpSeeds}/>
+          </DCArtboard>
+          <DCArtboard id="ctp-live" label="Overlay — live call, your call, check-in &amp; scheduled RSVP + chat" width={1340} height={840}>
+            <Launcher variant="single" tweaks={t} setTweak={setTweak}
+                      initialFilter="all" initialSort="recent"
+                      seedCallToPlay={ctpSeeds} initialCtpOpen={true}/>
+          </DCArtboard>
+        </DCSection>
+
         <DCSection id="chrome" title="Chrome variations"
                    subtitle="Two ways to organize the top bar — pick whichever density of controls you prefer. Click any card to open the detail overlay, or the kebab menu to open Settings.">
           <DCArtboard id="single-row" label="A · Single-row + segmented filters" width={1340} height={840}>
diff --git a/design/launcher/design_reference/calltoplay.jsx b/design/launcher/design_reference/calltoplay.jsx
new file mode 100644
index 0000000..d159099
--- /dev/null
+++ b/design/launcher/design_reference/calltoplay.jsx
@@ -0,0 +1,814 @@
+// calltoplay.jsx — "Call to Play": rally the LAN around a game + a time.
+//
+// Two flavors of call, one feature:
+//  · Play NOW  — pick a game, max players, and how long to give people.
+//    Others respond "Ready now" or "+N minutes". Resolves early if the
+//    roster fills, or when the clock runs out — the CALLER starts it.
+//  · SCHEDULED — pick a game and a clock time ("Among Us at 20:00").
+//    People RSVP with "I'm in". 15 minutes before start the call enters
+//    its CHECK-IN window: it gets highlighted everywhere and everyone
+//    who's in is nudged to answer with the same ready / +N-minute states.
+//
+// Every call also carries a small group chat (see ctp-chat.jsx).
+//
+// Loaded after data.jsx + components.jsx + ctp-chat.jsx, before launcher.jsx.
+
+const { useState, useEffect, useMemo, useRef, useLayoutEffect } = React;
+
+const GAMES_ = window.GAMES;
+const PEERS_ = window.PEERS;
+const installedPeersFor_ = window.installedPeersFor;
+const parseMaxPlayers_ = window.parseMaxPlayers;
+const Icon_ = window.Icon;
+const GameCover_ = window.GameCover;
+const CtpChat_ = window.CtpChat;
+const avatarColor = window.ctpAvatarColor;
+const fmtClock = window.ctpFmtClock;
+
+// Check-in opens this long before a scheduled call's start time — and any
+// call (scheduled or not) counts as "starting soon" inside this window.
+const CHECKIN_LEAD_MS = 15 * 60000;
+
+function phaseOf(n, now) {
+  if (!n.scheduledFor) return 'now';
+  return now < n.scheduledFor - CHECKIN_LEAD_MS ? 'scheduled' : 'checkin';
+}
+
+// Quick-bar status: READY > STARTING SOON > CALL TO PLAY / SCHEDULED.
+function statusOf(n, now) {
+  if (n.state === 'started') return 'started';
+  if (n.state === 'done' || readyCountOf(n, now) >= n.maxPlayers) return 'ready';
+  if (n.deadline - now <= CHECKIN_LEAD_MS) return 'soon';
+  return n.scheduledFor ? 'scheduled' : 'call';
+}
+
+function fmtCountdown(ms) {
+  if (ms <= 0) return '0:00';
+  const total = Math.ceil(ms / 1000);
+  const m = Math.floor(total / 60), s = total % 60;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+function fmtCountdownShort(ms) {
+  if (ms <= 0) return 'now';
+  const total = Math.ceil(ms / 1000);
+  if (total < 60) return `${total}s`;
+  return `${Math.ceil(total / 60)}m`;
+}
+function fmtUntil(ms) {
+  if (ms <= 60000) return 'in <1 min';
+  const min = Math.round(ms / 60000);
+  if (min < 60) return `in ${min} min`;
+  const h = Math.floor(min / 60), m = min % 60;
+  return m ? `in ${h}h ${m}m` : `in ${h}h`;
+}
+function isReady(p, now) {
+  if (!p) return false;
+  return p.status === 'ready' || (p.readyAt != null && now >= p.readyAt);
+}
+function readyCountOf(n, now) {
+  return Object.values(n.participants).filter(p => isReady(p, now)).length;
+}
+function inCountOf(n, now) {
+  return Object.values(n.participants).filter(p => !isReady(p, now) && p.status === 'in').length;
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Simulation — bots trickle into open calls (RSVP on scheduled ones,
+// ready-up during check-in / now-calls) and occasionally post a chat
+// line. Bots use second-scale buffers purely so the demo resolves
+// visibly; real people would use minute-scale ones.
+// ────────────────────────────────────────────────────────────────────
+const CTP_BOT_LINES = [
+  'anyone need the game files? I can seed',
+  'gimme 5, grabbing food',
+  'who hosts?',
+  'voice is up — channel 2',
+  'ok, back at my desk',
+  'poke your neighbor, we need one more',
+  'default settings, no mods — right?',
+  'glhf',
+];
+
+function maybeBotChat(n, now) {
+  const msgs = n.messages || [];
+  const speakers = Object.keys(n.participants).filter(p => PEERS_.includes(p));
+  if (!speakers.length || msgs.length > 40 || Math.random() >= 0.03) return msgs;
+  const from = speakers[Math.floor(Math.random() * speakers.length)];
+  const text = CTP_BOT_LINES[Math.floor(Math.random() * CTP_BOT_LINES.length)];
+  return [...msgs, { id: `bm${now}${Math.random().toString(36).slice(2, 6)}`, from, text, at: now }];
+}
+
+function tickNomination(n, now) {
+  if (n.state !== 'open') return n;
+  const phase = phaseOf(n, now);
+  let participants = n.participants;
+  const joined = Object.keys(participants);
+  const available = PEERS_.filter(p => p !== n.creator && !joined.includes(p));
+
+  if (phase === 'scheduled') {
+    // RSVP trickle — far from start, people just say "I'm in".
+    if (available.length && joined.length < n.maxPlayers && Math.random() < 0.06) {
+      const bot = available[Math.floor(Math.random() * available.length)];
+      participants = { ...participants, [bot]: { status: 'in', joinedAt: now } };
+    }
+    return { ...n, participants, messages: maybeBotChat({ ...n, participants }, now) };
+  }
+
+  // Check-in window: RSVP'd bots convert to ready / "+N minutes".
+  const inBots = joined.filter(p => PEERS_.includes(p) && participants[p].status === 'in');
+  if (phase === 'checkin' && inBots.length && Math.random() < 0.22) {
+    const bot = inBots[Math.floor(Math.random() * inBots.length)];
+    participants = {
+      ...participants,
+      [bot]: Math.random() < 0.6
+        ? { ...participants[bot], status: 'ready' }
+        : { ...participants[bot], status: 'pending', readyAt: now + (10 + Math.random() * 70) * 1000 },
+    };
+  } else if (available.length && joined.length < n.maxPlayers && Math.random() < 0.10) {
+    // Walk-ins can still join late.
+    const bot = available[Math.floor(Math.random() * available.length)];
+    const readyNow = Math.random() < 0.55;
+    participants = {
+      ...participants,
+      [bot]: readyNow
+        ? { status: 'ready', joinedAt: now }
+        : { status: 'pending', joinedAt: now, readyAt: now + (10 + Math.random() * 70) * 1000 },
+    };
+  }
+  const messages = maybeBotChat({ ...n, participants }, now);
+  const readyCount = readyCountOf({ participants }, now);
+  const state = (readyCount >= n.maxPlayers || now >= n.deadline) ? 'done' : 'open';
+  return { ...n, participants, messages, state };
+}
+
+function makeSeedNomination({ gameId, creator, maxPlayers, ageSec = 0, durationMin = 10, scheduledInMin = null, participants = {}, messages = [] }) {
+  const now = Date.now() - ageSec * 1000;
+  const scheduledFor = scheduledInMin != null ? Date.now() + scheduledInMin * 60000 : null;
+  return {
+    id: `seed-${gameId}-${creator}`,
+    gameId, creator, maxPlayers,
+    createdAt: now,
+    scheduledFor,
+    deadline: scheduledFor != null ? scheduledFor : now + durationMin * 60000,
+    participants: { [creator]: { status: scheduledFor ? 'in' : 'ready', joinedAt: now }, ...participants },
+    messages: messages.map((m, i) => ({ id: `sm-${gameId}-${i}`, from: m.from, text: m.text, at: Date.now() - (m.agoSec || 0) * 1000 })),
+    state: 'open',
+  };
+}
+
+function useNominations({ username, seed = [] }) {
+  const [noms, setNoms] = useState(() => seed.map(makeSeedNomination));
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setNoms(prev => {
+        const now = Date.now();
+        return prev
+          .map(n => tickNomination(n, now))
+          .filter(n => !(n.state === 'started' && now - (n.startedAt || 0) > 2600));
+      });
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  const createNomination = (gameId, maxPlayers, durationMin, scheduledFor = null) => {
+    const now = Date.now();
+    const nom = {
+      id: `n${now}${Math.random().toString(36).slice(2, 7)}`,
+      gameId, creator: username, maxPlayers,
+      createdAt: now,
+      scheduledFor,
+      deadline: scheduledFor != null ? scheduledFor : now + durationMin * 60000,
+      participants: { [username]: { status: scheduledFor ? 'in' : 'ready', joinedAt: now } },
+      messages: [],
+      state: 'open',
+    };
+    setNoms(prev => [nom, ...prev]);
+  };
+
+  const respond = (id, choice) => {
+    setNoms(prev => prev.map(n => {
+      if (n.id !== id) return n;
+      const now = Date.now();
+      const participants = { ...n.participants };
+      participants[username] = choice === 'ready'
+        ? { status: 'ready', joinedAt: (participants[username] || {}).joinedAt || now }
+        : { status: 'pending', joinedAt: (participants[username] || {}).joinedAt || now, readyAt: now + choice * 60000 };
+      return { ...n, participants };
+    }));
+  };
+
+  // RSVP for a scheduled call: "I'm in".
+  const rsvp = (id) => {
+    setNoms(prev => prev.map(n => n.id === id
+      ? { ...n, participants: { ...n.participants, [username]: { status: 'in', joinedAt: Date.now() } } }
+      : n));
+  };
+
+  const sendMessage = (id, text) => {
+    const t = String(text || '').trim();
+    if (!t) return;
+    setNoms(prev => prev.map(n => n.id === id
+      ? { ...n, messages: [...(n.messages || []), { id: `m${Date.now()}${Math.random().toString(36).slice(2, 6)}`, from: username, text: t, at: Date.now() }] }
+      : n));
+  };
+
+  const leave = (id) => {
+    setNoms(prev => prev.map(n => {
+      if (n.id !== id) return n;
+      const participants = { ...n.participants };
+      delete participants[username];
+      return { ...n, participants };
+    }));
+  };
+
+  const cancel = (id) => setNoms(prev => prev.filter(n => n.id !== id));
+  const startNow = (id) => setNoms(prev => prev.map(n => n.id === id ? { ...n, state: 'started', startedAt: Date.now() } : n));
+  const addTime = (id, minutes = 5) => setNoms(prev => prev.map(n => n.id === id ? { ...n, deadline: Date.now() + minutes * 60000, state: 'open' } : n));
+
+  return { nominations: noms, createNomination, respond, rsvp, sendMessage, leave, cancel, startNow, addTime };
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Top-bar entry point
+// ────────────────────────────────────────────────────────────────────
+function CallToPlayButton({ nominations, onClick }) {
+  const active = nominations.filter(n => n.state !== 'started');
+  return (
+    <button className="ctp-btn" onClick={onClick}>
+      <Icon_.flag/>
+      <span>Call to Play</span>
+      {active.length > 0 && <span className="ctp-badge">{active.length}</span>}
+    </button>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Mini ready-bubbles — the per-player state, compressed for the
+// quick bars: green ring + check = ready, "+Nm" tag = needs minutes,
+// dimmed = RSVP'd but not checked in yet.
+// ────────────────────────────────────────────────────────────────────
+function MiniBubbles({ nomination: n, now, max = 6 }) {
+  const entries = Object.entries(n.participants);
+  const shown = entries.slice(0, max);
+  return (
+    <span className="ctp-ticker-bubbles">
+      {shown.map(([name, p]) => {
+        const ready = isReady(p, now);
+        const st = ready ? 'ready' : p.status === 'in' ? 'in' : 'pending';
+        const initials = name.replace(/[^a-z0-9]/gi, '').slice(0, 2).toUpperCase();
+        const title = ready ? `${name} — ready`
+          : st === 'in' ? `${name} — in, not checked in yet`
+          : `${name} — ready in ${fmtCountdownShort(p.readyAt - now)}`;
+        return (
+          <span key={name} className="ctp-mini" data-state={st} title={title} style={{ background: avatarColor(name) }}>
+            {initials}
+            {ready && <span className="ctp-mini-check"><Icon_.check/></span>}
+            {st === 'pending' && <i className="ctp-mini-tag">{fmtCountdownShort(p.readyAt - now)}</i>}
+          </span>
+        );
+      })}
+      {entries.length > max && <span className="ctp-mini ctp-mini-more">+{entries.length - max}</span>}
+    </span>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Persistent quick bars — one row per active call, soonest first.
+// Scheduled calls show their clock time; once check-in opens the row
+// lights up to nudge everyone who said "I'm in".
+// ────────────────────────────────────────────────────────────────────
+const TICKER_LABEL = { scheduled: 'Scheduled', call: 'Call to Play', soon: 'Starting soon', ready: 'Ready' };
+// Sort rank: ready first, starting-soon next, everything else after —
+// ties broken by whichever resolves/starts soonest.
+const TICKER_RANK = { ready: 0, soon: 1, call: 2, scheduled: 2 };
+
+function CallToPlayTickerRow({ nomination: n, accent, onOpen }) {
+  const [, setTick] = useState(0);
+  useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1000); return () => clearInterval(id); }, []);
+  const game = GAMES_.find(g => g.id === n.gameId);
+  if (!game) return null;
+  const now = Date.now();
+  const status = statusOf(n, now);
+  const ready = readyCountOf(n, now);
+  const total = Object.keys(n.participants).length;
+  const remaining = Math.max(0, n.deadline - now);
+  const msgs = n.messages || [];
+  const last = msgs[msgs.length - 1];
+
+  const count = status === 'scheduled' ? `${total} in` : `${ready}/${n.maxPlayers} ready`;
+  const time = status === 'ready' ? 'waiting to start'
+    : status === 'scheduled' ? `${fmtClock(n.scheduledFor)} · ${fmtUntil(n.scheduledFor - now)}`
+    : n.scheduledFor ? `starts ${fmtClock(n.scheduledFor)} · ${fmtCountdown(remaining)}`
+    : fmtCountdown(remaining);
+
+  return (
+    <button className="ctp-ticker" data-status={status} style={{ '--accent': accent }} onClick={() => onOpen(n.id)}>
+      <span className="ctp-ticker-dot" data-status={status}/>
+      <span className="ctp-ticker-label" data-status={status}>{TICKER_LABEL[status]}</span>
+      <span className="ctp-ticker-game">{game.title}</span>
+      <span className="ctp-ticker-by">by {n.creator}</span>
+      <span className="ctp-ticker-ready">{count}</span>
+      <span className="ctp-ticker-time">{time}</span>
+      {last ? (
+        <span className="ctp-ticker-chat" title={`${last.from}: ${last.text}`}>
+          <Icon_.chat/>
+          <b style={{ color: avatarColor(last.from) }}>{last.from}:</b>
+          <span className="ctp-ticker-chat-text">{last.text}</span>
+        </span>
+      ) : <span className="ctp-ticker-chat"/>}
+      <MiniBubbles nomination={n} now={now}/>
+      <span className="ctp-ticker-cta">{status === 'soon' ? 'Check in' : 'View'}<Icon_.chevron/></span>
+    </button>
+  );
+}
+
+function CallToPlayTicker({ nominations, accent, onOpen }) {
+  const now = Date.now();
+  const active = nominations.filter(n => n.state !== 'started')
+    .sort((a, b) => TICKER_RANK[statusOf(a, now)] - TICKER_RANK[statusOf(b, now)] || a.deadline - b.deadline);
+  if (!active.length) return null;
+  return (
+    <div className="ctp-ticker-stack">
+      {active.map(n => <CallToPlayTickerRow key={n.id} nomination={n} accent={accent} onOpen={onOpen}/>)}
+    </div>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Avatar chip — ready / counting-down / RSVP'd ("in")
+// ────────────────────────────────────────────────────────────────────
+function AvatarChip({ name, participant, now }) {
+  const ready = isReady(participant, now);
+  const isIn = !ready && participant.status === 'in';
+  const remaining = participant.readyAt ? Math.max(0, participant.readyAt - now) : 0;
+  const initials = name.replace(/[^a-z0-9]/gi, '').slice(0, 2).toUpperCase();
+  const title = ready ? `${name} — ready`
+    : isIn ? `${name} — in, not checked in yet`
+    : `${name} — ready in ${fmtCountdown(remaining)}`;
+  return (
+    <div className={`ctp-avatar ${ready ? 'is-ready' : isIn ? 'is-in' : 'is-pending'}`} title={title}>
+      <span className="ctp-avatar-dot" style={{ background: avatarColor(name) }}>{initials}</span>
+      {ready
+        ? <span className="ctp-avatar-check"><Icon_.check/></span>
+        : isIn
+          ? <span className="ctp-avatar-in">in</span>
+          : <span className="ctp-avatar-pending">{fmtCountdownShort(remaining)}</span>}
+    </div>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Nomination card
+// ────────────────────────────────────────────────────────────────────
+function NominationCard({ nomination: n, username, accent, actions, focused }) {
+  const [, setTick] = useState(0);
+  useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1000); return () => clearInterval(id); }, []);
+  const [confirmCancel, setConfirmCancel] = useState(false);
+
+  const game = GAMES_.find(g => g.id === n.gameId);
+  if (!game) return null;
+  const now = Date.now();
+  const entries = Object.entries(n.participants);
+  const readyCount = readyCountOf(n, now);
+  const inCount = inCountOf(n, now);
+  const isMe = username in n.participants;
+  const myStatus = n.participants[username];
+  const isCreator = n.creator === username;
+  const isDone = n.state === 'done';
+  const isStarted = n.state === 'started';
+  const phase = phaseOf(n, now);
+  const isSched = phase === 'scheduled' && !isDone && !isStarted;
+  const isCheckin = phase === 'checkin' && !isDone && !isStarted;
+
+  const windowStart = n.scheduledFor ? n.scheduledFor - CHECKIN_LEAD_MS : n.createdAt;
+  const totalMs = Math.max(1, n.deadline - windowStart);
+  const remaining = Math.max(0, n.deadline - now);
+  const pct = Math.max(0, Math.min(100, (remaining / totalMs) * 100));
+  const urgency = pct < 20 ? 'high' : pct < 50 ? 'mid' : 'low';
+  const peerCount = installedPeersFor_(game).length;
+
+  let actionsBody;
+  if (isStarted) {
+    actionsBody = <div className="ctp-note ctp-note-launch">Launching {game.title} for {n.maxPlayers} players…</div>;
+  } else if (isSched) {
+    if (isCreator) {
+      actionsBody = <div className="ctp-note">Scheduled for {fmtClock(n.scheduledFor)} — check-in opens 15 min before start.</div>;
+    } else if (isMe) {
+      actionsBody = (
+        <React.Fragment>
+          <div className="ctp-me-status">You’re in — we’ll nudge you to check in 15 min before start</div>
+          <button className="ghost-btn ghost-danger" onClick={() => actions.leave(n.id)}>Can’t make it</button>
+        </React.Fragment>
+      );
+    } else {
+      actionsBody = (
+        <React.Fragment>
+          <button className="act-btn act-play" onClick={() => actions.rsvp(n.id)}><Icon_.check/><span>I’m in</span></button>
+          <div className="ctp-note">Check-in opens 15 min before start</div>
+        </React.Fragment>
+      );
+    }
+  } else if (isCreator) {
+    if (isDone) {
+      actionsBody = (
+        <React.Fragment>
+          <button className="act-btn act-play" onClick={() => actions.startNow(n.id)}><Icon_.play/><span>Start now</span></button>
+          <button className="ghost-btn" onClick={() => actions.addTime(n.id, 5)}>Add 5 more minutes</button>
+        </React.Fragment>
+      );
+    } else if (myStatus && myStatus.status === 'in') {
+      actionsBody = (
+        <React.Fragment>
+          <button className="act-btn act-play" onClick={() => actions.respond(n.id, 'ready')}><Icon_.play/><span>Ready now</span></button>
+          <div className="ctp-buffer-group">
+            {[5, 10, 15].map(min => (
+              <button key={min} className="ctp-buffer-btn" onClick={() => actions.respond(n.id, min)}>+{min}m</button>
+            ))}
+          </div>
+        </React.Fragment>
+      );
+    } else {
+      actionsBody = <div className="ctp-note">Waiting for players to ready up…</div>;
+    }
+  } else if (isDone) {
+    actionsBody = <div className="ctp-note">{readyCount >= n.maxPlayers ? 'Everyone’s ready.' : `It’s time — waiting for ${n.creator} to start.`}</div>;
+  } else if (isMe) {
+    if (myStatus.status === 'in') {
+      actionsBody = (
+        <React.Fragment>
+          <div className="ctp-me-status">You said you’re in — check in:</div>
+          <button className="act-btn act-play" onClick={() => actions.respond(n.id, 'ready')}><Icon_.play/><span>Ready now</span></button>
+          <div className="ctp-buffer-group">
+            {[5, 10, 15].map(min => (
+              <button key={min} className="ctp-buffer-btn" onClick={() => actions.respond(n.id, min)}>+{min}m</button>
+            ))}
+          </div>
+          <button className="ghost-btn ghost-danger" onClick={() => actions.leave(n.id)}>Leave</button>
+        </React.Fragment>
+      );
+    } else {
+      const ready = isReady(myStatus, now);
+      actionsBody = (
+        <React.Fragment>
+          <div className="ctp-me-status">{ready ? 'You’re in — ready' : `You: ready in ${fmtCountdown(myStatus.readyAt - now)}`}</div>
+          {!ready && <button className="ghost-btn" onClick={() => actions.respond(n.id, 'ready')}>I’m ready now</button>}
+          <button className="ghost-btn ghost-danger" onClick={() => actions.leave(n.id)}>Leave</button>
+        </React.Fragment>
+      );
+    }
+  } else {
+    actionsBody = (
+      <React.Fragment>
+        <button className="act-btn act-play" onClick={() => actions.respond(n.id, 'ready')}><Icon_.play/><span>Ready now</span></button>
+        <div className="ctp-buffer-group">
+          {[5, 10, 15, 30].map(min => (
+            <button key={min} className="ctp-buffer-btn" onClick={() => actions.respond(n.id, min)}>+{min}m</button>
+          ))}
+        </div>
+      </React.Fragment>
+    );
+  }
+
+  const timerEl = isStarted ? <div className="ctp-card-timer" data-urgency="off">Launching…</div>
+    : isDone ? <div className="ctp-card-timer" data-urgency="off">Ready</div>
+    : isSched ? (
+        <div className="ctp-card-timer is-sched" data-urgency="off">
+          <span className="ctp-card-clock">{fmtClock(n.scheduledFor)}</span>
+          <span className="ctp-card-until">{fmtUntil(n.scheduledFor - now)}</span>
+        </div>
+      )
+    : isCheckin ? (
+        <div className="ctp-card-timer is-sched" data-urgency={urgency}>
+          <span className="ctp-card-clock">{fmtCountdown(remaining)}</span>
+          <span className="ctp-card-until">starts {fmtClock(n.scheduledFor)}</span>
+        </div>
+      )
+    : <div className="ctp-card-timer" data-urgency={urgency}>{fmtCountdown(remaining)}</div>;
+
+  const subEl = n.scheduledFor
+    ? <React.Fragment>Scheduled by <strong>{n.creator}</strong> · starts at {fmtClock(n.scheduledFor)} · {peerCount}/{PEERS_.length} peers have it installed</React.Fragment>
+    : <React.Fragment>Called by <strong>{n.creator}</strong> · {peerCount}/{PEERS_.length} peers have it installed</React.Fragment>;
+
+  const rosterLabel = isSched
+    ? `${entries.length} in · up to ${n.maxPlayers} players`
+    : isCheckin && inCount > 0
+      ? `${readyCount}/${n.maxPlayers} ready · ${inCount} not checked in yet`
+      : `${readyCount}/${n.maxPlayers} ready`;
+
+  return (
+    <div className={`ctp-card ${isDone ? 'is-done' : ''} ${isStarted ? 'is-started' : ''} ${isCheckin ? 'is-checkin' : ''} ${focused ? 'is-focused' : ''}`}>
+      <div className="ctp-card-top">
+        <div className="ctp-card-cover"><GameCover_ game={game} aspect="square"/></div>
+        <div className="ctp-card-info">
+          <div className="ctp-card-title">{game.title}</div>
+          <div className="ctp-card-sub">{subEl}</div>
+        </div>
+        {timerEl}
+      </div>
+
+      {isCheckin && (
+        <div className="ctp-checkin-note">
+          <Icon_.clock/>
+          <span>{isMe && myStatus && myStatus.status === 'in'
+            ? 'Starting soon — you said you’re in. Check in below.'
+            : 'Starting soon — check-in is open.'}</span>
+        </div>
+      )}
+
+      {!isSched && (
+        <div className="ctp-progress">
+          <div className="ctp-progress-fill"
+               style={{ width: `${isStarted || isDone ? 100 : pct}%`, background: isDone || isStarted ? 'var(--ok)' : accent }}/>
+        </div>
+      )}
+
+      <div className="ctp-roster">
+        <div className="ctp-roster-count">{rosterLabel}</div>
+        <div className="ctp-avatars">
+          {entries.map(([name, p]) => <AvatarChip key={name} name={name} participant={p} now={now}/>)}
+          {Array.from({ length: Math.max(0, n.maxPlayers - entries.length) }).map((_, i) => (
+            <div key={`empty${i}`} className="ctp-avatar ctp-avatar-empty"/>
+          ))}
+        </div>
+      </div>
+
+      <div className="ctp-actions">{actionsBody}</div>
+
+      <CtpChat_ nomination={n} username={username} disabled={isStarted}
+                onSend={(text) => actions.sendMessage(n.id, text)}/>
+
+      {isCreator && !isStarted && (
+        confirmCancel ? (
+          <div className="ctp-cancel-confirm">
+            <span>Cancel this call for everyone?</span>
+            <div className="ctp-cancel-confirm-btns">
+              <button className="ghost-btn ghost-danger" onClick={() => actions.cancel(n.id)}>Yes, cancel it</button>
+              <button className="ghost-btn" onClick={() => setConfirmCancel(false)}>No, keep it</button>
+            </div>
+          </div>
+        ) : (
+          <button className="ctp-cancel-link" onClick={() => setConfirmCancel(true)}>
+            <Icon_.trash/><span>Cancel this call</span>
+          </button>
+        )
+      )}
+    </div>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Create-nomination form — "Now" or a scheduled clock time
+// ────────────────────────────────────────────────────────────────────
+function CreateNominationForm({ accent, onCancel, onCreate }) {
+  const [query, setQuery] = useState('');
+  const [gameId, setGameId] = useState(null);
+  const [maxPlayers, setMaxPlayers] = useState(8);
+  const [duration, setDuration] = useState(10);
+  const [when, setWhen] = useState('now');
+  const [dayOffset, setDayOffset] = useState(0);
+  const nextSlot = () => {
+    const d = new Date(Date.now() + 40 * 60000);
+    d.setMinutes(d.getMinutes() <= 30 ? 30 : 60, 0, 0);
+    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+  };
+  const [timeStr, setTimeStr] = useState(nextSlot); // committed "HH:MM" (24h)
+  const [editing, setEditing] = useState(false);
+  const [timeDraft, setTimeDraft] = useState(timeStr);
+  const timeInputRef = useRef(null);
+
+  // Select-all when the type-a-time field appears, so the user can overtype
+  // immediately. Done in a layout effect (not onFocus+autoFocus) so it fires
+  // after the browser places the autofocus caret, and re-asserts if the
+  // per-second nominations tick re-renders the overlay.
+  useLayoutEffect(() => {
+    if (editing && timeInputRef.current) {
+      timeInputRef.current.focus();
+      timeInputRef.current.select();
+    }
+  }, [editing]);
+
+  const [hStr, mStr] = timeStr.split(':');
+
+  // Nudge the time by whole hours or minute-steps, wrapping within 0–23:59.
+  const bump = (field, delta) => {
+    let [h, m] = timeStr.split(':').map(Number);
+    if (field === 'h') h = (h + delta + 24) % 24;
+    else {
+      let total = h * 60 + m + delta;
+      total = ((total % 1440) + 1440) % 1440;
+      h = Math.floor(total / 60); m = total % 60;
+    }
+    setTimeStr(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
+  };
+
+  // Constrain free-text entry: digits + at most one colon, ≤2 digits per side
+  // (≤5 chars with a colon), ≤4 digits without one. Anything else is rejected
+  // (returns the previous draft) — so a colon can't be typed after 3 digits.
+  const sanitizeTime = (raw, prev) => {
+    const v = String(raw).replace(/[^\d:]/g, '');
+    if ((v.match(/:/g) || []).length > 1) return prev;
+    const ci = v.indexOf(':');
+    if (ci !== -1) {
+      if (v.slice(0, ci).length > 2 || v.slice(ci + 1).length > 2) return prev;
+      return v;
+    }
+    return v.length > 4 ? prev : v;
+  };
+
+  // Accepts "20:00", "2000", "20", "9:30" — normalizes or reverts.
+  const commitDraft = () => {
+    const mm = String(timeDraft).trim().match(/^(\d{1,2})(?:[:.\s]?(\d{2}))?$/);
+    if (mm) {
+      const h = Number(mm[1]), min = Number(mm[2] || 0);
+      if (h <= 23 && min <= 59) setTimeStr(`${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}`);
+    }
+    setEditing(false);
+  };
+
+  const DE_DAYS = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
+  const dayChips = [0, 1, 2].map(off => {
+    const d = new Date();
+    d.setDate(d.getDate() + off);
+    const label = off === 0 ? 'Today' : DE_DAYS[d.getDay()];
+    return { off, label };
+  });
+
+  const matches = useMemo(() => {
+    if (!query.trim()) return [];
+    const q = query.toLowerCase();
+    return GAMES_.filter(g => g.title.toLowerCase().includes(q)).slice(0, 6);
+  }, [query]);
+
+  const selected = GAMES_.find(g => g.id === gameId);
+
+  const pickGame = (g) => {
+    setGameId(g.id);
+    setMaxPlayers(parseMaxPlayers_(g.players));
+    setQuery(g.title);
+  };
+
+  const scheduledTs = () => {
+    const [h, m] = timeStr.split(':').map(Number);
+    const d = new Date();
+    d.setDate(d.getDate() + dayOffset);
+    d.setHours(h || 0, m || 0, 0, 0);
+    if (d.getTime() < Date.now() + 60000) d.setDate(d.getDate() + 1);
+    return d.getTime();
+  };
+
+  return (
+    <div className="ctp-create">
+      <div className="ctp-create-row">
+        <label className="ctp-create-label">Game</label>
+        <div className="search ctp-create-search" style={{ '--accent': accent }}>
+          <Icon_.search/>
+          <input type="text" placeholder="Search the catalog…" value={query}
+                 onChange={(e) => { setQuery(e.target.value); setGameId(null); }}/>
+        </div>
+        {!selected && query.trim() && (
+          <div className="ctp-create-matches">
+            {matches.map(g => (
+              <button key={g.id} onClick={() => pickGame(g)}>
+                <span>{g.title}</span>
+                <span className="ctp-create-match-meta">{g.players} players</span>
+              </button>
+            ))}
+            {matches.length === 0 && <div className="ctp-create-nomatch">No games match "{query}"</div>}
+          </div>
+        )}
+      </div>
+
+      {selected && (
+        <React.Fragment>
+          <div className="ctp-create-row ctp-create-row-inline">
+            <label className="ctp-create-label">Max players</label>
+            <input type="number" className="ctp-create-num" min={2} max={64} value={maxPlayers}
+                   onChange={(e) => setMaxPlayers(Math.max(2, Number(e.target.value) || 2))}/>
+            <span className="ctp-create-hint">Suggested for {selected.title}: {parseMaxPlayers_(selected.players)}</span>
+          </div>
+          <div className="ctp-create-row">
+            <label className="ctp-create-label">When</label>
+            <div className="ctp-duration-opts">
+              <button className={`ctp-duration-btn ${when === 'now' ? 'is-active' : ''}`}
+                      style={when === 'now' ? { background: accent, borderColor: accent } : undefined}
+                      onClick={() => setWhen('now')}>Now</button>
+              <button className={`ctp-duration-btn ${when === 'later' ? 'is-active' : ''}`}
+                      style={when === 'later' ? { background: accent, borderColor: accent } : undefined}
+                      onClick={() => setWhen('later')}>Schedule</button>
+            </div>
+            {when === 'later' && (
+              <React.Fragment>
+                <div className="ctp-timepick">
+                  {editing ? (
+                    <input ref={timeInputRef} type="text" inputMode="numeric" maxLength={5} placeholder="20:00"
+                           className="ctp-time-editinput" value={timeDraft}
+                           onChange={(e) => setTimeDraft(prev => sanitizeTime(e.target.value, prev))}
+                           onBlur={commitDraft}
+                           onKeyDown={(e) => { if (e.key === 'Enter') commitDraft(); if (e.key === 'Escape') setEditing(false); }}/>
+                  ) : (
+                    <React.Fragment>
+                      <div className="ctp-timepick-field">
+                        <button type="button" className="ctp-time-step" aria-label="Hour up" onClick={() => bump('h', 1)}><Icon_.caretUp/></button>
+                        <span className="ctp-time-cell">{hStr}</span>
+                        <button type="button" className="ctp-time-step" aria-label="Hour down" onClick={() => bump('h', -1)}><Icon_.caretDown/></button>
+                      </div>
+                      <span className="ctp-time-colon">:</span>
+                      <div className="ctp-timepick-field">
+                        <button type="button" className="ctp-time-step" aria-label="Minute up" onClick={() => bump('m', 15)}><Icon_.caretUp/></button>
+                        <span className="ctp-time-cell">{mStr}</span>
+                        <button type="button" className="ctp-time-step" aria-label="Minute down" onClick={() => bump('m', -15)}><Icon_.caretDown/></button>
+                      </div>
+                      <button type="button" className="ctp-time-type"
+                              onClick={() => { setTimeDraft(timeStr); setEditing(true); }}>Type a time</button>
+                    </React.Fragment>
+                  )}
+                </div>
+                <div className="ctp-time-row ctp-day-row">
+                  <span className="ctp-day-label">Day</span>
+                  {dayChips.map(c => (
+                    <button key={c.off} className={`ctp-duration-btn ctp-day-btn ${dayOffset === c.off ? 'is-active' : ''}`}
+                            style={dayOffset === c.off ? { background: accent, borderColor: accent } : undefined}
+                            onClick={() => setDayOffset(c.off)}>{c.label}</button>
+                  ))}
+                </div>
+                <span className="ctp-create-hint">24-hour clock. People RSVP with “I’m in” — check-in to ready up opens 15 min before start.</span>
+              </React.Fragment>
+            )}
+          </div>
+          {when === 'now' && (
+            <div className="ctp-create-row">
+              <label className="ctp-create-label">Give people</label>
+              <div className="ctp-duration-opts">
+                {[5, 10, 15, 30, 60].map(min => (
+                  <button key={min} className={`ctp-duration-btn ${duration === min ? 'is-active' : ''}`}
+                          style={duration === min ? { background: accent, borderColor: accent } : undefined}
+                          onClick={() => setDuration(min)}>{min}m</button>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="ctp-create-foot">
+            <button className="ghost-btn" onClick={onCancel}>Cancel</button>
+            <button className="act-btn act-play"
+                    onClick={() => onCreate(selected.id, maxPlayers, duration, when === 'later' ? scheduledTs() : null)}>
+              {when === 'later'
+                ? `Schedule it — ${selected.title} · ${dayOffset > 0 ? `${dayChips[dayOffset].label} ` : ''}${timeStr}`
+                : `Call it — ${selected.title}`}
+            </button>
+          </div>
+        </React.Fragment>
+      )}
+      {!selected && (
+        <div className="ctp-create-foot">
+          <button className="ghost-btn" onClick={onCancel}>Cancel</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Full overlay
+// ────────────────────────────────────────────────────────────────────
+function CallToPlayOverlay({ nominations, username, accent, onClose, actions, focusId }) {
+  const [showCreate, setShowCreate] = useState(false);
+  const sorted = [...nominations].sort((a, b) => (a.state === 'started' ? 1 : 0) - (b.state === 'started' ? 1 : 0) || a.deadline - b.deadline);
+
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal ctp-modal" onClick={(e) => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose} aria-label="Close"><Icon_.close/></button>
+        <div className="ctp-head">
+          <h2>Call to Play</h2>
+          <p className="ctp-head-sub">Rally the LAN around a game and a time — right now, or scheduled for later with an “I’m in” RSVP. The caller decides when it actually starts.</p>
+          {!showCreate && (
+            <button className="act-btn act-play ctp-head-new" onClick={() => setShowCreate(true)}>
+              <Icon_.flag/><span>Call a new match</span>
+            </button>
+          )}
+        </div>
+        <div className="ctp-body">
+          {showCreate && (
+            <CreateNominationForm accent={accent}
+                                   onCancel={() => setShowCreate(false)}
+                                   onCreate={(gid, max, dur, sched) => { actions.createNomination(gid, max, dur, sched); setShowCreate(false); }}/>
+          )}
+          {sorted.length === 0 && !showCreate && (
+            <div className="ctp-empty">No active calls right now — be the one to start something.</div>
+          )}
+          {sorted.map(n => (
+            <NominationCard key={n.id} nomination={n} username={username} accent={accent} actions={actions}
+                            focused={n.id === focusId}/>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, {
+  useNominations, makeSeedNomination,
+  CallToPlayButton, CallToPlayTicker, CallToPlayOverlay,
+  NominationCard, CreateNominationForm,
+});
diff --git a/design/launcher/design_reference/components.jsx b/design/launcher/design_reference/components.jsx
index abf91cb..561f446 100644
--- a/design/launcher/design_reference/components.jsx
+++ b/design/launcher/design_reference/components.jsx
@@ -20,6 +20,12 @@ const Icon = {
   check:  (p) => <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m3 8 3.5 3.5L13 5"/></svg>,
   chevron:(p) => <svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m4 6 4 4 4-4"/></svg>,
   trash:  (p) => <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 4.5h10"/><path d="M5.5 4.5V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.5"/><path d="M4.5 4.5 5 13a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1l.5-8.5"/></svg>,
+  flag:   (p) => <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3.5 1.5v13"/><path d="M3.5 2.25c3-1.3 4.5 1.3 7.5 0v6.7c-3 1.3-4.5-1.3-7.5 0"/></svg>,
+  clock:  (p) => <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></svg>,
+  chat:   (p) => <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h9A1.5 1.5 0 0 1 14 3.5v6a1.5 1.5 0 0 1-1.5 1.5H6.5L3 14v-3h.5A1.5 1.5 0 0 1 2 9.5z"/></svg>,
+  send:   (p) => <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" {...p}><path d="M1.5 2 15 8 1.5 14l2.3-6z"/></svg>,
+  caretUp:   (p) => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m4 10 4-4 4 4"/></svg>,
+  caretDown: (p) => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m4 6 4 4 4-4"/></svg>,
 };
 
 // ────────────────────────────────────────────────────────────────────
@@ -217,6 +223,10 @@ function GameCard({ game, accent, aspect, onOpen }) {
           <span>{fmtSize(game.size)}</span>
           <span className="card-dot">·</span>
           <span>{game.tags[0]}</span>
+          <span className="card-dot">·</span>
+          <span className="card-peers" title={`${installedPeersFor(game).length} of ${PEERS.length} peers on the LAN have this installed`}>
+            <Icon.users/>{installedPeersFor(game).length}/{PEERS.length}
+          </span>
         </div>
         <ActionButton state={game.state} accent={accent} full game={game}/>
       </div>
@@ -293,6 +303,7 @@ const SORTS = [
   { key: 'size',   label: 'Size (largest)' },
   { key: 'recent', label: 'Recently Played' },
   { key: 'state',  label: 'Status' },
+  { key: 'peers',  label: 'Peers with it (most)' },
 ];
 
 function SortMenu({ value, onChange, accent }) {
diff --git a/design/launcher/design_reference/ctp-chat.jsx b/design/launcher/design_reference/ctp-chat.jsx
new file mode 100644
index 0000000..add85f1
--- /dev/null
+++ b/design/launcher/design_reference/ctp-chat.jsx
@@ -0,0 +1,86 @@
+// ctp-chat.jsx — shared Call-to-Play helpers (avatar colors, clock formatting)
+// plus the per-call chat panel. Loaded after components.jsx, before calltoplay.jsx.
+
+const { useState: useChatState, useEffect: useChatEffect, useRef: useChatRef } = React;
+
+const CTP_AVATAR_COLORS = ['#60a5fa', '#34d399', '#c084fc', '#fbbf24', '#f472b6', '#38bdf8', '#a3e635', '#fb7185'];
+const ctpHashName = (s) => [...String(s)].reduce((a, c) => a + c.charCodeAt(0), 0);
+const ctpAvatarColor = (name) => CTP_AVATAR_COLORS[ctpHashName(name) % CTP_AVATAR_COLORS.length];
+
+// 24h clock, LAN-party style: "20:00"
+const ctpFmtClock = (ts) => {
+  const d = new Date(ts);
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+};
+
+// ────────────────────────────────────────────────────────────────────
+// Per-call chat — collapsed to a one-line toggle with an unread badge
+// and a preview of the last message; expands to a compact IRC-style
+// message list + input. All state is local to the card.
+// ────────────────────────────────────────────────────────────────────
+function CtpChat({ nomination: n, username, onSend, disabled }) {
+  const IconX = window.Icon;
+  const msgs = n.messages || [];
+  const [open, setOpen] = useChatState(false);
+  const [seen, setSeen] = useChatState(msgs.length);
+  const [draft, setDraft] = useChatState('');
+  const listRef = useChatRef(null);
+
+  useChatEffect(() => { if (open) setSeen(msgs.length); }, [open, msgs.length]);
+  useChatEffect(() => {
+    if (open && listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [open, msgs.length]);
+
+  const unread = Math.max(0, msgs.length - seen);
+  const last = msgs[msgs.length - 1];
+
+  const submit = () => {
+    const t = draft.trim();
+    if (!t) return;
+    onSend(t);
+    setDraft('');
+  };
+
+  return (
+    <div className={`ctp-chat ${open ? 'is-open' : ''}`}>
+      <button className="ctp-chat-toggle" onClick={() => setOpen(o => !o)}>
+        <IconX.chat/>
+        <span>Chat</span>
+        {msgs.length > 0 && <span className="ctp-chat-count">{msgs.length}</span>}
+        {!open && unread > 0 && <span className="ctp-chat-unread">{unread}</span>}
+        {!open && last && (
+          <span className="ctp-chat-preview">
+            <b style={{ color: ctpAvatarColor(last.from) }}>{last.from}:</b> {last.text}
+          </span>
+        )}
+        <span className="ctp-chat-chevron"><IconX.chevron/></span>
+      </button>
+
+      {open && (
+        <React.Fragment>
+          <div className="ctp-chat-list" ref={listRef}>
+            {msgs.length === 0 && <div className="ctp-chat-empty">No messages yet — say hi.</div>}
+            {msgs.map(m => (
+              <div key={m.id} className={`ctp-chat-msg ${m.from === username ? 'is-me' : ''}`}>
+                <b style={{ color: ctpAvatarColor(m.from) }}>{m.from}</b>
+                <span className="ctp-chat-time">{ctpFmtClock(m.at)}</span>
+                <span className="ctp-chat-text"> {m.text}</span>
+              </div>
+            ))}
+          </div>
+          {!disabled && (
+            <div className="ctp-chat-form">
+              <input type="text" className="ctp-chat-input" placeholder="Message the group…"
+                     value={draft}
+                     onChange={(e) => setDraft(e.target.value)}
+                     onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}/>
+              <button className="ctp-chat-send" onClick={submit} aria-label="Send"><IconX.send/></button>
+            </div>
+          )}
+        </React.Fragment>
+      )}
+    </div>
+  );
+}
+
+Object.assign(window, { CtpChat, ctpAvatarColor, ctpFmtClock });
diff --git a/design/launcher/design_reference/data.jsx b/design/launcher/design_reference/data.jsx
index 3bebafe..d9df46e 100644
--- a/design/launcher/design_reference/data.jsx
+++ b/design/launcher/design_reference/data.jsx
@@ -203,7 +203,37 @@ const STORAGE = {
   total: 512,
 };
 
+// ────────────────────────────────────────────────────────────────────
+// LAN roster (mock) — used by the peer-install indicator and by the
+// Call to Play feature to simulate other people in the room.
+// ────────────────────────────────────────────────────────────────────
+const PEERS = [
+  'shadowfox', 'pixelqueen', 'kbmaster', 'nullptr', 'wavedash',
+  'crit_happens', 'afk_andy', 'lowping_larry', 'gg_val', 'ctrlaltdave',
+];
+
+const hashStr = (s) => [...String(s)].reduce((a, c) => a + c.charCodeAt(0), 0);
+
+// Deterministic-but-varied subset of PEERS who "have this game installed" —
+// stable per game id so the same game always shows the same roster/count.
+function installedPeersFor(game) {
+  const h = hashStr(game.id);
+  const count = 1 + (h % PEERS.length); // 1..PEERS.length
+  const scored = PEERS.map((p, i) => ({ p, s: (h * 7 + i * 13 + hashStr(p)) % 97 }));
+  scored.sort((a, b) => a.s - b.s);
+  return scored.slice(0, count).map(x => x.p);
+}
+
+// "2–16" / "1-8" → 16 / 8. Falls back to 8 if unparsable.
+function parseMaxPlayers(playersStr) {
+  const m = String(playersStr).match(/(\d+)\s*$/);
+  return m ? parseInt(m[1], 10) : 8;
+}
+
 window.GAMES = GAMES;
+window.PEERS = PEERS;
+window.installedPeersFor = installedPeersFor;
+window.parseMaxPlayers = parseMaxPlayers;
 window.STATE_META = STATE_META;
 window.ACTION_FOR_STATE = ACTION_FOR_STATE;
 window.countByFilter = countByFilter;
diff --git a/design/launcher/design_reference/launcher.jsx b/design/launcher/design_reference/launcher.jsx
index f10e101..e2a5e96 100644
--- a/design/launcher/design_reference/launcher.jsx
+++ b/design/launcher/design_reference/launcher.jsx
@@ -15,6 +15,8 @@ function applyFilterAndSort(games, filter, sort, query) {
   } else if (sort === 'recent') {
     const order = { installed: 0, local: 1, none: 2 };
     g = [...g].sort((a, b) => order[a.state] - order[b.state] || b.version.localeCompare(a.version));
+  } else if (sort === 'peers') {
+    g = [...g].sort((a, b) => installedPeersFor(b).length - installedPeersFor(a).length || a.title.localeCompare(b.title));
   }
   return g;
 }
@@ -25,6 +27,8 @@ function Launcher({
   initialFilter = 'all', initialSort = 'recent', initialQuery = '',
   initialOpenGame = null,
   initialSettingsOpen = false,
+  seedCallToPlay = [],
+  initialCtpOpen = false,
 }) {
   const { density, aspect, accent, bg } = tweaks;
   const [filter, setFilter] = useState(initialFilter);
@@ -32,6 +36,11 @@ function Launcher({
   const [query, setQuery] = useState(initialQuery);
   const [openGame, setOpenGame] = useState(initialOpenGame);
   const [settingsOpen, setSettingsOpen] = useState(initialSettingsOpen);
+  const [ctpOpen, setCtpOpen] = useState(initialCtpOpen);
+  const [ctpFocusId, setCtpFocusId] = useState(null);
+
+  const nomUsername = tweaks.username && tweaks.username.trim() ? tweaks.username.trim() : 'you';
+  const ctp = useNominations({ username: nomUsername, seed: seedCallToPlay });
 
   const counts = useMemo(() => countByFilter(GAMES), []);
   const list = useMemo(() => applyFilterAndSort(GAMES, filter, sort, query), [filter, sort, query]);
@@ -66,6 +75,7 @@ function Launcher({
               <SortMenu value={sort} onChange={setSort} accent={accent}/>
             </div>
             <div className="topbar-right-trail">
+              <CallToPlayButton nominations={ctp.nominations} onClick={() => setCtpOpen(true)}/>
               <KebabMenu items={menuItems}/>
             </div>
           </div>
@@ -79,6 +89,7 @@ function Launcher({
             </div>
             <div className="topbar-row1-right">
               <StorageMeter accent={accent}/>
+              <CallToPlayButton nominations={ctp.nominations} onClick={() => setCtpOpen(true)}/>
               <KebabMenu items={menuItems}/>
             </div>
           </div>
@@ -93,6 +104,8 @@ function Launcher({
       )}
 
       <main className="grid-wrap">
+        <CallToPlayTicker nominations={ctp.nominations} accent={accent}
+                          onOpen={(id) => { setCtpFocusId(id); setCtpOpen(true); }}/>
         {variant === 'single' && (
           <div className="results-bar">
             <div className="results-count">
@@ -113,6 +126,12 @@ function Launcher({
       {settingsOpen && setTweak && (
         <SettingsDialog settings={tweaks} onChange={setTweak} onClose={() => setSettingsOpen(false)}/>
       )}
+      {ctpOpen && (
+        <CallToPlayOverlay nominations={ctp.nominations} username={nomUsername} accent={accent}
+                           focusId={ctpFocusId}
+                           onClose={() => { setCtpOpen(false); setCtpFocusId(null); }}
+                           actions={{ createNomination: ctp.createNomination, respond: ctp.respond, rsvp: ctp.rsvp, sendMessage: ctp.sendMessage, leave: ctp.leave, cancel: ctp.cancel, startNow: ctp.startNow, addTime: ctp.addTime }}/>
+      )}
     </div>
   );
 }
diff --git a/design/launcher/design_reference/styles.css b/design/launcher/design_reference/styles.css
index acb93d2..d408988 100644
--- a/design/launcher/design_reference/styles.css
+++ b/design/launcher/design_reference/styles.css
@@ -636,8 +636,14 @@
   font-size: 11.5px;
   color: var(--t-3);
   font-variant-numeric: tabular-nums;
+  min-width: 0;
 }
-.card-meta .card-dot { opacity: 0.5; }
+.card-meta .card-dot { opacity: 0.5; flex-shrink: 0; }
+.card-peers {
+  display: inline-flex; align-items: center; gap: 3px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.card-peers svg { flex-shrink: 0; opacity: 0.75; }
 
 .density-compact .card-body { padding: 9px 10px 10px; gap: 6px; }
 .density-compact .card-title { font-size: 12.5px; }
@@ -1311,3 +1317,624 @@
 .folder-field.is-unset .folder-field-btn:hover {
   background: var(--accent, #3b82f6);
 }
+
+/* ═══════════════════════════════════════════════════════════════════
+   Call to Play — rally a game + a time
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* ─── Top-bar entry button ─── */
+.ctp-btn {
+  position: relative;
+  display: inline-flex; align-items: center; gap: 8px;
+  height: 36px; padding: 0 14px;
+  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bd-2));
+  border-radius: 8px;
+  color: var(--t-1);
+  font: inherit; font-size: 12.5px; font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background .15s, border-color .15s;
+}
+.ctp-btn svg { color: var(--accent); flex-shrink: 0; }
+.ctp-btn:hover {
+  background: color-mix(in srgb, var(--accent) 22%, var(--bg-2));
+  border-color: color-mix(in srgb, var(--accent) 65%, var(--bd-2));
+}
+.ctp-badge {
+  display: inline-grid; place-items: center;
+  min-width: 18px; height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: white;
+  font-size: 10.5px; font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ─── Ticker strip ─── */
+.ctp-ticker-stack {
+  display: flex; flex-direction: column; gap: 8px;
+  margin-bottom: 14px;
+}
+.ctp-ticker-stack .ctp-ticker { margin-bottom: 0; }
+.ctp-ticker {
+  display: grid;
+  grid-template-columns:
+    10px      /* LED */
+    98px      /* status */
+    220px     /* game */
+    130px     /* by */
+    88px      /* count */
+    170px     /* time */
+    minmax(0, 1fr)  /* chat — sole flexible track, absorbs bubbles variance */
+    max-content     /* bubbles */
+    82px;     /* cta */
+  align-items: center;
+  column-gap: 12px;
+  width: 100%;
+  padding: 10px 16px;
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg-2));
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bd-2));
+  border-radius: 10px;
+  color: var(--t-1);
+  font: inherit; font-size: 12.5px;
+  cursor: pointer;
+  text-align: left;
+  transition: background .15s, border-color .15s;
+}
+.ctp-ticker:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }
+.ctp-ticker-dot {
+  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
+  background: var(--accent);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
+  animation: ctp-tickerpulse 1.6s ease-out infinite;
+}
+@keyframes ctp-tickerpulse {
+  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 55%, transparent); }
+  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%,  transparent); }
+  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent); }
+}
+.ctp-ticker-label {
+  font-weight: 700;
+  color: var(--accent);
+  text-transform: uppercase;
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  flex-shrink: 0;
+}
+.ctp-ticker-game { font-weight: 700; color: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ctp-ticker-by { color: var(--t-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ctp-ticker-sep { display: none; }
+.ctp-ticker-ready, .ctp-ticker-time { color: var(--t-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ctp-ticker-more {
+  color: var(--t-3);
+  font-size: 11.5px;
+  flex-shrink: 0;
+}
+.ctp-ticker-cta {
+  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
+  font-weight: 700;
+  color: var(--accent);
+}
+.ctp-ticker-cta svg { transform: rotate(-90deg); }
+
+/* ─── Overlay modal ─── */
+.ctp-modal { width: min(720px, 100%); }
+.ctp-head-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px;
+  margin-right: 36px;
+}
+.ctp-head-new { height: 40px; padding: 0 18px; font-size: 13px; margin-top: 14px; width: 100%; }
+.ctp-head { padding: 26px 28px 14px; border-bottom: 1px solid var(--bd-1); }
+.ctp-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--t-1); }
+.ctp-head-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--t-3); max-width: 52ch; }
+.ctp-body {
+  padding: 18px 24px 24px;
+  display: flex; flex-direction: column; gap: 14px;
+  max-height: 66vh;
+  overflow: auto;
+}
+.ctp-empty {
+  padding: 28px 8px;
+  text-align: center;
+  color: var(--t-3);
+  font-size: 13px;
+}
+
+/* ─── Nomination card ─── */
+.ctp-card {
+  display: flex; flex-direction: column; gap: 12px;
+  padding: 14px;
+  background: rgba(255,255,255,0.025);
+  border: 1px solid var(--bd-1);
+  border-radius: 12px;
+}
+.ctp-card.is-done { border-color: color-mix(in srgb, var(--ok) 45%, var(--bd-2)); }
+.ctp-card.is-started { opacity: 0.6; }
+.ctp-card.is-focused { border-color: var(--accent); animation: ctp-cardflash 1.4s ease-out 1; }
+@keyframes ctp-cardflash {
+  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
+  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%, transparent); }
+}
+.ctp-card-top { display: flex; align-items: flex-start; gap: 12px; position: relative; }
+.ctp-card-cover {
+  position: relative;
+  width: 52px; height: 52px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.ctp-card-info { flex: 1; min-width: 0; }
+.ctp-card-title { font-size: 14.5px; font-weight: 700; color: var(--t-1); }
+.ctp-card-sub { margin-top: 3px; font-size: 11.5px; color: var(--t-3); }
+.ctp-card-sub strong { color: var(--t-2); font-weight: 700; }
+.ctp-card-timer {
+  font-variant-numeric: tabular-nums;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--t-1);
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+.ctp-card-timer[data-urgency="mid"] { color: var(--warn); }
+.ctp-card-timer[data-urgency="high"] { color: var(--danger); }
+.ctp-card.is-done .ctp-card-timer { color: var(--ok); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
+.ctp-cancel-link {
+  display: inline-flex; align-items: center; gap: 6px;
+  align-self: flex-start;
+  margin-top: -2px;
+  padding: 6px 2px;
+  background: transparent;
+  border: 0;
+  color: var(--t-3);
+  font: inherit; font-size: 11.5px; font-weight: 600;
+  cursor: pointer;
+  transition: color .15s;
+}
+.ctp-cancel-link:hover { color: #fca5a5; }
+.ctp-cancel-confirm {
+  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
+  gap: 10px;
+  padding: 10px 12px;
+  background: rgba(239,68,68,0.08);
+  border: 1px solid rgba(239,68,68,0.35);
+  border-radius: 8px;
+  font-size: 12.5px;
+  color: #fca5a5;
+  font-weight: 600;
+}
+.ctp-cancel-confirm-btns { display: inline-flex; gap: 8px; flex-shrink: 0; }
+.ctp-cancel-confirm-btns .ghost-btn { height: 32px; padding: 0 12px; font-size: 12px; }
+
+.ctp-progress {
+  height: 5px;
+  border-radius: 3px;
+  background: rgba(255,255,255,0.06);
+  overflow: hidden;
+}
+.ctp-progress-fill { height: 100%; transition: width 1s linear; }
+
+.ctp-roster { display: flex; flex-direction: column; gap: 8px; }
+.ctp-roster-count { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-3); }
+.ctp-avatars { display: flex; flex-wrap: wrap; gap: 6px; }
+.ctp-avatar {
+  position: relative;
+  display: inline-flex;
+}
+.ctp-avatar-dot {
+  width: 30px; height: 30px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  color: white;
+  font-size: 10.5px; font-weight: 800;
+  letter-spacing: 0.01em;
+}
+.ctp-avatar.is-pending .ctp-avatar-dot { opacity: 0.55; }
+.ctp-avatar-check {
+  position: absolute; bottom: -2px; right: -2px;
+  width: 14px; height: 14px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  background: var(--ok);
+  color: #06240f;
+  border: 2px solid var(--bg-2);
+}
+.ctp-avatar-pending {
+  position: absolute; bottom: -6px; left: 50%;
+  transform: translateX(-50%);
+  font-size: 9px; font-weight: 700;
+  color: var(--t-2);
+  background: var(--bg-3);
+  border: 1px solid var(--bd-2);
+  padding: 0 4px;
+  border-radius: 999px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.ctp-avatar-empty {
+  width: 30px; height: 30px;
+  border-radius: 999px;
+  border: 1.5px dashed var(--bd-2);
+}
+
+.ctp-actions {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+  padding-top: 2px;
+}
+.ctp-actions .act-btn { height: 36px; padding: 0 16px; font-size: 12.5px; }
+.ctp-actions .ghost-btn { height: 36px; padding: 0 14px; font-size: 12.5px; }
+.ctp-note { font-size: 12.5px; color: var(--t-3); }
+.ctp-note-launch { color: var(--ok); font-weight: 600; }
+.ctp-me-status { font-size: 12.5px; font-weight: 600; color: var(--t-2); }
+.ctp-buffer-group { display: inline-flex; gap: 6px; }
+.ctp-buffer-btn {
+  height: 36px; padding: 0 11px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--bd-2);
+  border-radius: 7px;
+  color: var(--t-1);
+  font: inherit; font-size: 12px; font-weight: 600;
+  cursor: pointer;
+  transition: background .15s, border-color .15s;
+}
+.ctp-buffer-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--bd-3); }
+
+/* ─── Create-nomination form ─── */
+.ctp-create-cta {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  height: 48px;
+  background: transparent;
+  border: 1.5px dashed var(--bd-3);
+  border-radius: 12px;
+  color: var(--t-2);
+  font: inherit; font-size: 13px; font-weight: 700;
+  cursor: pointer;
+  transition: border-color .15s, color .15s, background .15s;
+}
+.ctp-create-cta:hover { border-color: var(--accent); color: var(--t-1); background: rgba(255,255,255,0.02); }
+.ctp-create {
+  display: flex; flex-direction: column; gap: 14px;
+  padding: 16px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid var(--bd-2);
+  border-radius: 12px;
+}
+.ctp-create-row { display: flex; flex-direction: column; gap: 6px; position: relative; }
+.ctp-create-row-inline { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
+.ctp-create-label {
+  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--t-3);
+}
+.ctp-create-search { width: 100%; }
+.ctp-create-matches {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0; right: 0;
+  z-index: 20;
+  max-height: 220px;
+  overflow: auto;
+  padding: 4px;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-2);
+  border-radius: 10px;
+  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.5);
+}
+.ctp-create-matches button {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  width: 100%;
+  padding: 9px 10px;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--t-1);
+  font: inherit; font-size: 12.5px; font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.ctp-create-matches button:hover { background: rgba(255,255,255,0.06); }
+.ctp-create-match-meta { color: var(--t-3); font-size: 11px; font-weight: 500; }
+.ctp-create-nomatch { padding: 10px; font-size: 12px; color: var(--t-3); }
+.ctp-create-num {
+  width: 70px; height: 34px;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-1);
+  border-radius: 7px;
+  color: var(--t-1);
+  font: inherit; font-size: 13px; font-weight: 600;
+  text-align: center;
+}
+.ctp-create-hint { font-size: 11.5px; color: var(--t-3); }
+.ctp-duration-opts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
+.ctp-duration-btn {
+  height: 32px; padding: 0 13px;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-1);
+  border-radius: 7px;
+  color: var(--t-2);
+  font: inherit; font-size: 12.5px; font-weight: 700;
+  cursor: pointer;
+  transition: background .15s, color .15s, border-color .15s;
+}
+.ctp-duration-btn:hover { color: var(--t-1); }
+.ctp-duration-btn.is-active { color: white; }
+.ctp-create-foot {
+  display: flex; justify-content: flex-end; gap: 10px;
+  padding-top: 4px;
+}
+.ctp-create-foot .act-btn,
+.ctp-create-foot .ghost-btn { height: 40px; padding: 0 18px; }
+.ctp-time-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
+/* ─── Time stepper ─── */
+.ctp-timepick {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 6px;
+}
+.ctp-timepick-field {
+  display: flex; flex-direction: column; align-items: center; gap: 3px;
+}
+.ctp-time-step {
+  width: 54px; height: 24px;
+  display: grid; place-items: center;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-1);
+  border-radius: 7px;
+  color: var(--t-2);
+  cursor: pointer;
+  transition: background .12s, color .12s, border-color .12s;
+}
+.ctp-time-step:hover { background: var(--bg-4); color: var(--t-1); border-color: var(--bd-3); }
+.ctp-time-step:active { background: color-mix(in srgb, var(--accent) 30%, var(--bg-3)); }
+.ctp-time-cell {
+  width: 54px; height: 44px;
+  display: grid; place-items: center;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-2);
+  border-radius: 9px;
+  font-size: 26px; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--t-1);
+  letter-spacing: 0.02em;
+}
+.ctp-time-editinput {
+  width: 132px; height: 44px;
+  padding: 0;
+  background: var(--bg-3);
+  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--bd-2));
+  border-radius: 9px;
+  font: inherit; font-size: 26px; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--t-1);
+  text-align: center;
+  letter-spacing: 0.06em;
+}
+.ctp-time-editinput:focus { outline: none; }
+.ctp-time-editinput::placeholder { color: var(--t-4); }
+.ctp-time-colon { font-size: 26px; font-weight: 700; color: var(--t-2); padding-bottom: 2px; }
+.ctp-time-type {
+  align-self: center;
+  margin-left: 8px;
+  height: 30px; padding: 0 12px;
+  background: transparent;
+  border: 1px dashed var(--bd-3);
+  border-radius: 7px;
+  color: var(--t-3);
+  font: inherit; font-size: 11.5px; font-weight: 600;
+  cursor: pointer;
+  transition: color .12s, border-color .12s;
+}
+.ctp-time-type:hover { color: var(--t-1); border-color: var(--accent); }
+.ctp-day-row { gap: 5px; }
+.ctp-day-label {
+  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--t-3);
+  margin-right: 4px;
+}
+.ctp-day-btn { height: 26px; padding: 0 10px; font-size: 11px; border-radius: 6px; }
+
+/* ─── Quick-bar status variants — LED + label + row tint per status:
+   SCHEDULED (neutral) · CALL TO PLAY (accent, pulsing) ·
+   STARTING SOON (amber, glowing) · READY (green, steady) ─── */
+.ctp-ticker[data-status="scheduled"] {
+  background: var(--bg-2);
+  border-color: var(--bd-2);
+}
+.ctp-ticker[data-status="scheduled"]:hover { background: var(--bg-3); }
+.ctp-ticker[data-status="soon"] {
+  background: color-mix(in srgb, var(--warn) 10%, var(--bg-2));
+  border-color: color-mix(in srgb, var(--warn) 50%, var(--bd-2));
+  animation: ctp-soon-glow 2.4s ease-in-out infinite;
+}
+.ctp-ticker[data-status="soon"]:hover { background: color-mix(in srgb, var(--warn) 16%, var(--bg-2)); }
+@keyframes ctp-soon-glow {
+  0%, 100% { box-shadow: 0 0 0 0 transparent; }
+  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 28%, transparent); }
+}
+.ctp-ticker[data-status="ready"] {
+  background: color-mix(in srgb, var(--ok) 11%, var(--bg-2));
+  border-color: color-mix(in srgb, var(--ok) 55%, var(--bd-2));
+  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--ok) 35%, transparent);
+}
+.ctp-ticker[data-status="ready"]:hover { background: color-mix(in srgb, var(--ok) 17%, var(--bg-2)); }
+.ctp-ticker-dot[data-status="scheduled"] { background: var(--t-3); animation: none; box-shadow: none; }
+.ctp-ticker-dot[data-status="soon"] { background: var(--warn); animation: ctp-tickerpulse-warn 1.6s ease-out infinite; }
+.ctp-ticker-dot[data-status="ready"] { background: var(--ok); animation: none; box-shadow: 0 0 6px var(--ok); }
+@keyframes ctp-tickerpulse-warn {
+  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--warn) 55%, transparent); }
+  70%  { box-shadow: 0 0 0 6px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+.ctp-ticker-label[data-status="scheduled"] { color: var(--t-2); }
+.ctp-ticker-label[data-status="soon"] { color: var(--warn); }
+.ctp-ticker-label[data-status="ready"] { color: var(--ok); }
+.ctp-ticker[data-status="soon"] .ctp-ticker-cta { color: var(--warn); }
+.ctp-ticker[data-status="ready"] .ctp-ticker-cta { color: var(--ok); }
+
+/* ─── Quick-bar inline chat preview ─── */
+.ctp-ticker-chat {
+  min-width: 0;
+  display: inline-flex; align-items: center; gap: 5px;
+  color: var(--t-3);
+  font-size: 12px;
+}
+.ctp-ticker-chat svg { flex-shrink: 0; opacity: 0.7; }
+.ctp-ticker-chat b { flex-shrink: 0; font-weight: 700; }
+.ctp-ticker-chat-text {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--t-2);
+}
+.ctp-card.is-checkin { border-color: color-mix(in srgb, var(--accent) 70%, var(--bd-2)); }
+.ctp-checkin-note {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+  border-radius: 8px;
+  font-size: 12.5px; font-weight: 600;
+  color: var(--t-1);
+}
+.ctp-checkin-note svg { color: var(--accent); flex-shrink: 0; }
+.ctp-card-timer.is-sched {
+  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
+}
+.ctp-card-clock { font-size: 18px; line-height: 1; }
+.ctp-card-until { font-size: 10.5px; font-weight: 600; color: var(--t-3); letter-spacing: 0.01em; }
+.ctp-avatar.is-in .ctp-avatar-dot { opacity: 0.8; }
+.ctp-avatar-in {
+  position: absolute; bottom: -6px; left: 50%;
+  transform: translateX(-50%);
+  font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--t-2);
+  background: var(--bg-3);
+  border: 1px solid var(--bd-2);
+  padding: 0 4px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+/* ─── Ticker mini ready-bubbles ─── */
+.ctp-ticker-bubbles {
+  display: inline-flex; align-items: center;
+  justify-self: end;
+}
+.ctp-mini {
+  position: relative;
+  width: 22px; height: 22px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  margin-left: -6px;
+  border: 2px solid var(--bg-2);
+  color: white;
+  font-size: 8px; font-weight: 800; letter-spacing: 0.02em;
+}
+.ctp-mini:first-child { margin-left: 0; }
+.ctp-mini[data-state="ready"] { box-shadow: 0 0 0 1.5px var(--ok); }
+.ctp-mini[data-state="pending"] { opacity: 0.75; }
+.ctp-mini[data-state="in"] { opacity: 0.85; }
+.ctp-mini-check {
+  position: absolute; bottom: -3px; right: -4px;
+  width: 11px; height: 11px;
+  display: grid; place-items: center;
+  border-radius: 999px;
+  background: var(--ok);
+  color: #06240f;
+  border: 1.5px solid var(--bg-2);
+}
+.ctp-mini-check svg { width: 7px; height: 7px; }
+.ctp-mini-tag {
+  position: absolute; bottom: -6px; right: -7px;
+  font-style: normal;
+  font-size: 8px; font-weight: 700;
+  line-height: 11px;
+  padding: 0 3px;
+  border-radius: 999px;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-2);
+  color: var(--t-2);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ctp-mini-more { background: var(--bg-4); color: var(--t-2); font-size: 8.5px; }
+
+/* ─── Per-call chat ─── */
+.ctp-chat {
+  display: flex; flex-direction: column;
+  border-top: 1px solid var(--bd-1);
+  margin-top: 2px;
+  padding-top: 8px;
+}
+.ctp-chat-toggle {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%;
+  padding: 4px 2px;
+  background: transparent;
+  border: 0;
+  color: var(--t-3);
+  font: inherit; font-size: 11.5px; font-weight: 700;
+  cursor: pointer;
+  transition: color .15s;
+}
+.ctp-chat-toggle:hover { color: var(--t-1); }
+.ctp-chat-toggle svg { flex-shrink: 0; }
+.ctp-chat-count { color: var(--t-4); font-weight: 600; }
+.ctp-chat-unread {
+  min-width: 16px; height: 16px;
+  display: grid; place-items: center;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: white;
+  font-size: 9.5px; font-weight: 800;
+  flex-shrink: 0;
+}
+.ctp-chat-preview {
+  flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-weight: 500;
+  color: var(--t-3);
+  text-align: left;
+}
+.ctp-chat-preview b { font-weight: 700; }
+.ctp-chat-chevron { margin-left: auto; flex-shrink: 0; transition: transform .15s; }
+.ctp-chat.is-open .ctp-chat-chevron { transform: rotate(180deg); }
+.ctp-chat-list {
+  display: flex; flex-direction: column; gap: 6px;
+  max-height: 168px;
+  overflow-y: auto;
+  margin: 8px 0;
+  padding: 10px 12px;
+  background: rgba(0,0,0,0.22);
+  border: 1px solid var(--bd-1);
+  border-radius: 8px;
+}
+.ctp-chat-msg { font-size: 12px; line-height: 1.45; color: var(--t-2); overflow-wrap: anywhere; }
+.ctp-chat-msg b { font-weight: 700; }
+.ctp-chat-text { color: var(--t-1); }
+.ctp-chat-time { margin-left: 6px; font-size: 10px; color: var(--t-4); font-variant-numeric: tabular-nums; }
+.ctp-chat-empty { font-size: 11.5px; color: var(--t-4); text-align: center; padding: 6px 0; }
+.ctp-chat-form { display: flex; gap: 6px; }
+.ctp-chat-input {
+  flex: 1; height: 32px;
+  padding: 0 10px;
+  background: var(--bg-3);
+  border: 1px solid var(--bd-1);
+  border-radius: 7px;
+  color: var(--t-1);
+  font: inherit; font-size: 12px;
+}
+.ctp-chat-input::placeholder { color: var(--t-4); }
+.ctp-chat-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--bd-2)); }
+.ctp-chat-send {
+  width: 32px; height: 32px;
+  display: grid; place-items: center;
+  background: color-mix(in srgb, var(--accent) 24%, var(--bg-3));
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bd-2));
+  border-radius: 7px;
+  color: var(--t-1);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background .15s;
+}
+.ctp-chat-send:hover { background: color-mix(in srgb, var(--accent) 40%, var(--bg-3)); }