joinstick 0.0.0-stage → 0.2.0

package/public/host.js

@@ -0,0 +1,200 @@
+// Joinstick host SDK: create a room, show one QR per player slot, poll input.
+// Plain ESM, no dependencies. Types: host.d.ts. Protocol: PROTOCOL.md.
+import { link } from './link.js';
+
+const STORE_KEY = 'joinstick:host';
+
+function storage() {
+  try {
+    return globalThis.sessionStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function host({ slots = 2, layout, server } = {}) {
+  const base = (server ?? new URL('..', import.meta.url).href).replace(/\/+$/, '');
+  const store = storage();
+  let saved = null;
+  try {
+    saved = JSON.parse(store?.getItem(STORE_KEY) ?? 'null');
+  } catch {}
+  // A stored room is resumed only by the same server and slot count.
+  if (saved?.server !== base || saved?.slots !== slots) saved = null;
+
+  let code = saved?.room ?? null;
+  let hostToken = saved?.hostToken ?? null;
+  let joinBase = base;
+  let buttonIds = [];
+  let status = 'connecting';
+  let ready = false;
+  let resumedOnce = false;
+  const listeners = {};
+  const padState = {};
+  const state = Array.from({ length: slots }, () => ({ connected: false, name: '', x: 0, y: 0, buttons: {}, pressed: {}, baseline: true }));
+
+  function emit(ev, arg) {
+    for (const fn of listeners[ev] ?? []) {
+      try {
+        fn(arg);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  }
+
+  function setStatus(s) {
+    if (s !== status) emit('status', (status = s));
+  }
+
+  function at(n) {
+    if (!Number.isInteger(n) || n < 1 || n > slots) throw new RangeError(`slot must be an integer 1-${slots} (slots are 1-based)`);
+    return state[n - 1];
+  }
+
+  // '/n' or '&slot=n' for a valid slot; no n: the phone gets the first free slot.
+  function slotPart(n, prefix) {
+    return n === undefined ? '' : (at(n), `${prefix}${n}`);
+  }
+
+  function neutral(s) {
+    s.x = 0;
+    s.y = 0;
+    s.buttons = Object.fromEntries(buttonIds.map((id) => [id, false]));
+    s.pressed = {};
+    s.baseline = true; // the next input sets held state without "pressed" edges
+  }
+
+  function leave(n, reason) {
+    const s = state[n - 1];
+    neutral(s);
+    if (!s.connected) return;
+    s.connected = false;
+    emit('leave', { slot: n, reason });
+  }
+
+  function join(n, name, rejoin) {
+    const s = state[n - 1];
+    neutral(s);
+    s.connected = true;
+    s.name = name;
+    emit('join', { slot: n, name, rejoin });
+  }
+
+  return new Promise((resolve, reject) => {
+    const conn = link(base.replace(/^http/, 'ws') + '/joinstick/ws', {
+      // The first create of this host() call resets pad state: a reloaded game
+      // starts from scratch, while in-session reconnects keep it.
+      open: () => conn.send({ t: 'create', v: 1, slots, layout, room: code, hostToken, resetPads: !resumedOnce }),
+      down() {
+        for (let n = 1; n <= slots; n++) leave(n, 'disconnected');
+        if (!ready) return fail(new Error(`Cannot reach the Joinstick server at ${base}`));
+        setStatus('reconnecting');
+        conn.retry();
+      },
+      message(m) {
+        try {
+          handle(m);
+        } catch (err) {
+          if (!ready) return fail(err);
+          console.error(err);
+        }
+      },
+    });
+
+    function handle(m) {
+      if (m.t === 'created') {
+        resumedOnce = true;
+        code = m.room;
+        hostToken = m.hostToken;
+        joinBase = m.joinBase;
+        buttonIds = m.layout.buttons.map((b) => b.id);
+        try {
+          store?.setItem(STORE_KEY, JSON.stringify({ server: base, slots, room: code, hostToken }));
+        } catch {}
+        conn.up();
+        for (const s of state) neutral(s);
+        for (const s of m.slots) if (s.connected) join(s.slot, s.name, true);
+        // The server forgets pad state if it restarted; send ours again.
+        for (const [n, patch] of Object.entries(padState)) conn.send({ t: 'pad', slot: Number(n), patch });
+        setStatus('connected');
+        if (!ready) resolve(room);
+        ready = true;
+      } else if (m.t === 'join') {
+        join(m.slot, m.name, m.rejoin);
+      } else if (m.t === 'leave') {
+        leave(m.slot, m.reason);
+      } else if (m.t === 'input') {
+        const s = state[m.slot - 1];
+        if (!s) return;
+        const buttons = {};
+        for (const id of buttonIds) buttons[id] = Object.hasOwn(m.b, id) && m.b[id] === true;
+        if (!s.baseline) for (const id of buttonIds) if (buttons[id] && !s.buttons[id]) s.pressed[id] = true;
+        s.baseline = false;
+        s.x = m.x;
+        s.y = m.y;
+        s.buttons = buttons;
+      } else if (m.t === 'message') {
+        emit('message', { slot: m.slot, data: m.data });
+      } else if (m.t === 'error') {
+        if (!ready) return fail(Object.assign(new Error(`Joinstick: ${m.code}${m.message ? ` (${m.message})` : ''}`), { code: m.code }));
+        emit('error', { code: m.code, message: m.message });
+        if (m.code === 'replaced') return close(); // another tab took this room
+        if (!listeners.error?.size) console.warn('joinstick:', m.code, m.message ?? '');
+      }
+    }
+
+    function fail(err) {
+      close();
+      reject(err);
+    }
+
+    function close() {
+      conn.stop(1000);
+      for (let n = 1; n <= slots; n++) leave(n, 'disconnected');
+      setStatus('closed');
+    }
+
+    const room = {
+      get code() {
+        return code;
+      },
+      get slots() {
+        return slots;
+      },
+      get status() {
+        return status;
+      },
+      input(n) {
+        const s = at(n);
+        const out = { x: s.x, y: s.y, buttons: { ...s.buttons }, pressed: s.pressed };
+        s.pressed = {};
+        return out;
+      },
+      connected: (n) => at(n).connected,
+      qr: (n) => `${base}/joinstick/qr.svg?room=${code}${slotPart(n, '&slot=')}`,
+      joinUrl: (n) => `${joinBase}/j/${code}${slotPart(n, '/')}`,
+      pad(n, patch) {
+        at(n);
+        const { vibrate, ...keep } = patch;
+        padState[n] = { ...padState[n], ...keep };
+        conn.send({ t: 'pad', slot: n, patch });
+      },
+      kick: (n) => at(n) && conn.send({ t: 'kick', slot: n }),
+      send: (n, data) => at(n) && conn.send({ t: 'send', slot: n, data }),
+      broadcast: (data) => conn.send({ t: 'send', slot: null, data }),
+      on(ev, fn) {
+        (listeners[ev] ??= new Set()).add(fn);
+        return () => listeners[ev].delete(fn);
+      },
+      close() {
+        try {
+          store?.removeItem(STORE_KEY);
+        } catch {}
+        close();
+      },
+    };
+
+    conn.connect();
+  });
+}

package/public/link.js

@@ -0,0 +1,73 @@
+// Shared WebSocket plumbing for host.js and client.js:
+// JSON messages, ping/pong, a silence watchdog and reconnect backoff.
+
+const SILENCE = 5000;
+
+export function link(url, { open, message, down }) {
+  let ws = null;
+  let lastMsg = 0;
+  let attempts = 0;
+  let retryTimer;
+  let stopped = false;
+
+  function connect() {
+    clearTimeout(retryTimer);
+    detach(); // never two sockets at once
+    lastMsg = Date.now();
+    ws = new WebSocket(url);
+    ws.onopen = open;
+    ws.onmessage = (e) => {
+      lastMsg = Date.now();
+      let m;
+      try {
+        m = JSON.parse(e.data);
+      } catch {
+        return;
+      }
+      if (m.t === 'ping') send({ t: 'pong' });
+      else message(m);
+    };
+    // Some runtimes (Node 22) fire 'error' without 'close' on a refused connection.
+    ws.onclose = ws.onerror = () => drop();
+  }
+
+  function detach(code) {
+    if (!ws) return false;
+    ws.onopen = ws.onmessage = ws.onclose = ws.onerror = null;
+    try {
+      ws.close(code);
+    } catch {}
+    ws = null;
+    return true;
+  }
+
+  // Close the socket right away (a dead connection can take long to report
+  // 'close') and tell the owner it is down. Also cancels a pending retry.
+  function drop(code) {
+    clearTimeout(retryTimer);
+    if (detach(code) && !stopped) down();
+  }
+
+  function send(m) {
+    if (ws?.readyState === 1) ws.send(JSON.stringify(m));
+  }
+
+  const watchdog = setInterval(() => {
+    if (ws && Date.now() - lastMsg > SILENCE) drop();
+  }, 1000);
+  watchdog.unref?.();
+
+  return {
+    send,
+    connect,
+    drop,
+    up: () => (attempts = 0),
+    retry: () => (retryTimer = setTimeout(connect, Math.min(5000, 250 * 2 ** attempts++))),
+    stop(code) {
+      stopped = true;
+      clearInterval(watchdog);
+      clearTimeout(retryTimer);
+      drop(code);
+    },
+  };
+}

package/public/pad-layout.js

@@ -0,0 +1,152 @@
+// Pure geometry for the pad page (no DOM): d-pad sectors, the rotation used to
+// force an orientation, button arrangements and haptic tick lengths. Tested in test/pad-layout.test.js.
+
+// Up needs a clearly upward angle (30°-150°) so a resting thumb does not
+// jump by accident; the other sectors are the usual 45°. 0° = right, 90° = up.
+export function direction(deg) {
+  if (deg >= 30 && deg < 70) return { x: 1, y: -1 };
+  if (deg >= 70 && deg < 110) return { x: 0, y: -1 };
+  if (deg >= 110 && deg < 150) return { x: -1, y: -1 };
+  if (deg >= 150 || deg < -157.5) return { x: -1, y: 0 };
+  if (deg < -112.5) return { x: -1, y: 1 };
+  if (deg < -67.5) return { x: 0, y: 1 };
+  if (deg < -22.5) return { x: 1, y: 1 };
+  return { x: 1, y: 0 };
+}
+
+// How far (degrees, clockwise) to rotate the pad so it shows in `mode` inside
+// a w x h viewport. 90 means "turn the phone counter-clockwise to play", the
+// usual landscape for games; the stick then sits under the left thumb.
+export function rotation(mode, w, h) {
+  if (mode === 'landscape' && h > w) return 90;
+  if (mode === 'portrait' && w > h) return -90;
+  return 0;
+}
+
+// Local haptic tick in ms for a button press, or 'stick' for a d-pad
+// direction change. 0 = none.
+export function tapLength(layout, id) {
+  if (layout.haptics === false) return 0;
+  if (id === 'stick') return 6;
+  return layout.buttons.find((b) => b.id === id)?.haptic ?? 10;
+}
+
+// Viewport point -> pad point. The pad is drawn with
+//   90: translateX(w) rotate(90deg)    -90: translateY(h) rotate(-90deg)
+export function toPad(x, y, rot, w, h) {
+  if (rot === 90) return { x: y, y: w - x };
+  if (rot === -90) return { x: h - y, y: x };
+  return { x, y };
+}
+
+// Viewport rect (getBoundingClientRect) -> rect in pad coordinates.
+export function rectToPad(r, rot, w, h) {
+  if (rot === 90) return { left: r.top, top: w - r.right, width: r.height, height: r.width };
+  if (rot === -90) return { left: h - r.bottom, top: r.left, width: r.height, height: r.width };
+  return { left: r.left, top: r.top, width: r.width, height: r.height };
+}
+
+// Distance from a point to a button's edge (negative inside). Buttons are
+// circles (w == h) or horizontal pills.
+export function edgeDistance(px, py, b) {
+  const dx = Math.max(Math.abs(px - b.x) - (b.w - b.h) / 2, 0);
+  return Math.hypot(dx, py - b.y) - b.h / 2;
+}
+
+// Units below: 1 = a normal button's diameter.
+export const GAP = 0.2;
+const WIDE_H = 0.8;
+const diameter = (b) => (b.size === 'large' ? 1.25 : 1);
+
+// Two columns (more in landscape), the first column a bit lower like an
+// arcade panel.
+function grid(list, tall) {
+  const n = list.length;
+  const cols = n <= 1 ? 1 : n <= 4 || tall ? 2 : Math.ceil(n / 2);
+  const cell = Math.max(1, ...list.map(diameter));
+  const stagger = cols === 2 ? cell * 0.35 : 0;
+  return list.map((b, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    return { id: b.id, x: col * (cell + GAP), y: row * (cell + GAP) + (col === 0 ? stagger : 0), w: diameter(b), h: diameter(b) };
+  });
+}
+
+// First four as face buttons (bottom, left, right, top), the rest in
+// columns of up to three to the left, between the stick and the diamond.
+function diamond(list) {
+  const face = list.slice(0, 4);
+  const cell = Math.max(1, ...face.map(diameter));
+  const r = (cell + GAP) / Math.SQRT2;
+  const spots = [[0, r], [-r, 0], [r, 0], [0, -r]];
+  const out = face.map((b, i) => ({ id: b.id, x: spots[i][0], y: spots[i][1], w: diameter(b), h: diameter(b) }));
+  let edge = -r - cell / 2;
+  for (let i = 4; i < list.length; i += 3) {
+    const col = list.slice(i, i + 3);
+    const size = Math.max(...col.map(diameter));
+    const x = edge - GAP - size / 2;
+    const total = col.reduce((sum, b) => sum + diameter(b), 0) + GAP * (col.length - 1);
+    let y = -total / 2;
+    for (const b of col) {
+      out.push({ id: b.id, x, y: y + diameter(b) / 2, w: diameter(b), h: diameter(b) });
+      y += diameter(b) + GAP;
+    }
+    edge = x - size / 2;
+  }
+  return out;
+}
+
+// The first button is the big anchor where the right thumb rests; the rest
+// fan out around it, from its left over its top, ring after ring.
+function arc(list) {
+  const anchor = 1.45;
+  const out = list.length ? [{ id: list[0].id, x: 0, y: 0, w: anchor, h: anchor }] : [];
+  let inner = anchor / 2;
+  let rest = list.slice(1);
+  while (rest.length) {
+    const size = Math.max(...rest.map(diameter));
+    const radius = inner + GAP + size / 2;
+    const end = (80 * Math.PI) / 180;
+    let a = Math.PI; // straight left of the anchor
+    let fit = 0;
+    while (fit < rest.length && a >= end) {
+      const b = rest[fit];
+      out.push({ id: b.id, x: radius * Math.cos(a), y: -radius * Math.sin(a), w: diameter(b), h: diameter(b) });
+      const next = rest[++fit];
+      if (next) a -= 2 * Math.asin(Math.min(1, ((diameter(b) + diameter(next)) / 2 + GAP) / (2 * radius)));
+    }
+    rest = rest.slice(fit);
+    inner = radius + size / 2;
+  }
+  return out;
+}
+
+/**
+ * Place buttons for an arrangement. Returns centers and sizes in units, inside
+ * a box of `width` x `height` units. 'wide' buttons are pills in rows under
+ * the others, where a thumb can rest on them.
+ */
+export function arrange(list, arrangement = 'grid', tall = false) {
+  const round = list.filter((b) => b.size !== 'wide');
+  const wide = list.filter((b) => b.size === 'wide');
+  const items = arrangement === 'arc' ? arc(round) : arrangement === 'diamond' ? diamond(round) : grid(round, tall);
+
+  const minX = Math.min(...items.map((b) => b.x - b.w / 2));
+  const minY = Math.min(...items.map((b) => b.y - b.h / 2));
+  let width = items.length ? Math.max(...items.map((b) => b.x + b.w / 2)) - minX : 0;
+  let height = items.length ? Math.max(...items.map((b) => b.y + b.h / 2)) - minY : 0;
+  const barW = Math.max(width, 2.4);
+  const shift = wide.length ? (barW - width) / 2 : 0;
+  for (const b of items) {
+    b.x += shift - minX;
+    b.y -= minY;
+  }
+  if (wide.length) width = barW;
+  let y = items.length ? height + GAP : 0;
+  for (const b of wide) {
+    items.push({ id: b.id, x: width / 2, y: y + WIDE_H / 2, w: width, h: WIDE_H });
+    y += WIDE_H + GAP;
+  }
+  if (wide.length) height = y - GAP;
+  return { items, width, height };
+}

package/public/pad.css

@@ -0,0 +1,270 @@
+:root {
+  --bg: #101218;
+  --panel: #1a1d26;
+  --line: #2c3140;
+  --text: #e8eaf0;
+  --muted: #8a90a2;
+  --accent: #3e9bff;
+  --dpad: min(42vmin, 200px);
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+  background: var(--bg);
+  color: var(--text);
+  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+body { position: fixed; inset: 0; }
+
+#pad {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  touch-action: none;
+  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--bg);
+}
+/* Wrong orientation for the layout: draw the pad rotated (see pad-layout.js).
+   The safe-area insets rotate with it. */
+#pad.rot90, #pad.rot-90 {
+  inset: auto;
+  top: 0;
+  left: 0;
+  width: var(--vh);
+  height: var(--vw);
+  transform-origin: 0 0;
+}
+#pad.rot90 {
+  transform: translateX(var(--vw)) rotate(90deg);
+  padding: env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-top);
+}
+#pad.rot-90 {
+  transform: translateY(var(--vh)) rotate(-90deg);
+  padding: env(safe-area-inset-left) env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom);
+}
+
+.bar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px 8px 24px;
+  border-bottom: 4px solid var(--accent); /* the player's color, visible from across the room */
+  background: var(--panel);
+  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
+}
+.side { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.side.end { justify-content: flex-end; }
+.system { display: flex; gap: 10px; }
+/* START, MENU...: small pills in the middle of the bar, away from the thumbs. */
+.sys {
+  min-width: 64px;
+  padding: 7px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-align: center;
+  white-space: nowrap;
+  touch-action: none;
+}
+.sys.down, .sys.glow { background: var(--accent); border-color: transparent; color: #fff; }
+.sys.off { opacity: 0.25; }
+.slot {
+  padding: 3px 10px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 800;
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: 600;
+}
+.code {
+  color: var(--muted);
+  font: 600 14px ui-monospace, Menlo, monospace;
+  letter-spacing: 0.15em;
+}
+.leave {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  padding: 7px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+  touch-action: none;
+}
+.leave::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: #e5484d88;
+  transform: scaleX(0);
+  transform-origin: left;
+}
+.leave.holding { color: #fff; }
+.leave.holding::before { transform: scaleX(1); transition: transform 600ms linear; }
+
+.controls {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 28px 16px 24px;
+}
+.controls:has(.dpad[hidden]) { justify-content: center; }
+/* Portrait has spare room above the thumbs: show who you are, big. */
+.hero {
+  display: none;
+  flex: 1;
+  place-items: center;
+  color: color-mix(in srgb, var(--accent) 30%, transparent);
+  font-size: 34vmin;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+#pad.tall .hero { display: grid; }
+#pad.tall .code { display: none; } /* narrow bar; the code is on the game screen */
+#pad.tall .controls { flex: none; padding-bottom: max(10vmax, 24px); }
+#pad:not(.tall) { --dpad: min(48vmin, 230px); }
+
+.dpad {
+  position: relative;
+  flex: none;
+  width: var(--dpad);
+  height: var(--dpad);
+  border-radius: 50%;
+  background: var(--panel);
+  box-shadow: inset 0 0 0 2px var(--line), 0 8px 24px #0006;
+}
+.arm, .hub {
+  position: absolute;
+  background: #2f3445;
+}
+.arm { transition: background 60ms; }
+/* Arms meet the hub without overlapping, so a lit arm is one clean shape. */
+.hub { left: 34%; top: 34%; width: 32%; height: 32%; }
+.arm.up    { left: 34%; top: 8%;    width: 32%; height: 26%; border-radius: 10px 10px 0 0; }
+.arm.down  { left: 34%; bottom: 8%; width: 32%; height: 26%; border-radius: 0 0 10px 10px; }
+.arm.left  { top: 34%; left: 8%;    width: 26%; height: 32%; border-radius: 10px 0 0 10px; }
+.arm.right { top: 34%; right: 8%;   width: 26%; height: 32%; border-radius: 0 10px 10px 0; }
+.arm.on { background: var(--accent); box-shadow: 0 0 18px var(--accent); }
+
+/* pad.js places, sizes and labels each button (layout.arrangement). */
+.buttons { position: relative; flex: none; }
+
+.btn {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--c);
+  color: #fff;
+  font-weight: 800;
+  text-shadow: 0 1px 2px #0008;
+  box-shadow: inset 0 -6px 0 #0004, 0 6px 16px #0006;
+  white-space: nowrap;
+  transition: transform 60ms, filter 60ms, box-shadow 60ms;
+}
+.btn.down { transform: scale(0.92); filter: brightness(1.25); box-shadow: inset 0 3px 0 #0004, 0 2px 6px #0006; }
+.btn.off { opacity: 0.25; filter: grayscale(1); }
+/* Highlight must be obvious mid-fight: bright solid fill, a white ring that
+   pulses outwards and a gentle bump (the 'scale' property, so pressing still
+   works through 'transform'). */
+.btn.glow {
+  background: color-mix(in srgb, var(--c) 45%, #fff);
+  color: #10121a;
+  text-shadow: none;
+  box-shadow: 0 0 0 4px #fff, 0 0 32px 8px var(--c);
+  animation: bump 0.7s ease-in-out infinite alternate;
+}
+.btn.glow::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border: 4px solid #fff;
+  border-radius: 999px;
+  pointer-events: none;
+  animation: ring 1s ease-out infinite;
+}
+@keyframes bump { to { scale: 1.08; } }
+@keyframes ring { from { scale: 1; opacity: 0.9; } to { scale: 1.45; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .btn.glow { animation: none; }
+  .btn.glow::after { animation: none; inset: -10px; opacity: 1; }
+}
+
+.screen {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 24px;
+  text-align: center;
+  background: #101218f0;
+}
+.screen h1 { margin: 0; font-size: 26px; }
+.screen p { margin: 0; max-width: 26em; color: var(--muted); }
+.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
+.screen button {
+  min-width: 140px;
+  padding: 14px 22px;
+  border: 0;
+  border-radius: 12px;
+  background: var(--accent);
+  color: #fff;
+  font: 600 16px system-ui, sans-serif;
+}
+.screen label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: min(280px, 100%);
+  color: var(--muted);
+  font-size: 14px;
+  text-align: left;
+}
+.screen input {
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+  color: var(--text);
+  font: 600 22px ui-monospace, Menlo, monospace;
+  letter-spacing: 0.1em;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.screen input[name="room"] { text-transform: uppercase; }
+.screen form button, form.screen button { width: min(280px, 100%); }