@sensiblestats/widget-react 0.76.0 → 0.78.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/StatsWidget.tsx
-import { useCallback as useCallback14, useEffect as useEffect26, useMemo as useMemo5, useRef as useRef22, useState as useState44 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect27, useMemo as useMemo5, useRef as useRef23, useState as useState44 } from "react";
 import { StatsWidgetClient } from "@sensiblestats/widget-sdk";
 
 // src/kickoff.ts
@@ -170,6 +170,8 @@ var STRINGS = {
       statRank: "Rank",
       unitDays: "days",
       unitPts: "pts",
+      worthNow: (pts) => `Worth ${pts} pts now`,
+      worthAfterMiss: (pts) => `${pts} after a miss`,
       thisWeek: "this week",
       newToday: "New today",
       resume: "Resume",
@@ -510,6 +512,8 @@ var STRINGS = {
       statRank: "S\u0131ra",
       unitDays: "g\xFCn",
       unitPts: "puan",
+      worthNow: (pts) => `\u015Eimdi ${pts} puan`,
+      worthAfterMiss: (pts) => `yanl\u0131\u015Fta ${pts}`,
       thisWeek: "bu hafta",
       newToday: "Bug\xFCn yeni",
       resume: "Devam et",
@@ -3102,8 +3106,23 @@ function usePopupTelemetry(log, isOpen, popupText, dismissPopup) {
   }, [log, dismissPopup]);
 }
 
+// src/openTelemetry.ts
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
+function useOpenTelemetry(log, isOpen) {
+  const openLoggedRef = useRef10(false);
+  useEffect10(() => {
+    if (!isOpen) {
+      openLoggedRef.current = false;
+      return;
+    }
+    if (openLoggedRef.current || !log) return;
+    openLoggedRef.current = true;
+    log.log({ name: "widget_open" });
+  }, [log, isOpen]);
+}
+
 // src/components/ChatFab.tsx
-import { useEffect as useEffect10, useRef as useRef10, useState as useState9 } from "react";
+import { useEffect as useEffect11, useRef as useRef11, useState as useState9 } from "react";
 
 // src/components/BrandMark.tsx
 import { useState as useState8 } from "react";
@@ -3206,8 +3225,8 @@ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup, dismissLabel = "Dismiss", introAllowed = false, onIntroStart, asks }) {
   const bubble = popupText ?? greeting;
   const [intro, setIntro] = useState9(false);
-  const armedRef = useRef10(introAllowed);
-  useEffect10(() => {
+  const armedRef = useRef11(introAllowed);
+  useEffect11(() => {
     if (armedRef.current && bubble) {
       armedRef.current = false;
       setIntro(true);
@@ -3221,10 +3240,10 @@ function ChatFab({ label, greeting, popupText, logoUrl, onOpen, onDismissPopup,
 }
 
 // src/components/ChatPanel.tsx
-import { useCallback as useCallback13, useEffect as useEffect25, useMemo as useMemo4, useRef as useRef21, useState as useState43 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect26, useMemo as useMemo4, useRef as useRef22, useState as useState43 } from "react";
 
 // src/components/ChatHeader.tsx
-import { useEffect as useEffect11, useRef as useRef11, useState as useState10 } from "react";
+import { useEffect as useEffect12, useRef as useRef12, useState as useState10 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function ChatHeader({
   onClose,
@@ -3237,14 +3256,14 @@ function ChatHeader({
   moreOptionsLabel = "More options"
 }) {
   const [menuOpen, setMenuOpen] = useState10(false);
-  const wrapRef = useRef11(null);
-  const kebabRef = useRef11(null);
-  const firstItemRef = useRef11(null);
+  const wrapRef = useRef12(null);
+  const kebabRef = useRef12(null);
+  const firstItemRef = useRef12(null);
   const hasMenu = !!(canReset && onNewConversation);
-  useEffect11(() => {
+  useEffect12(() => {
     if (menuOpen) firstItemRef.current?.focus();
   }, [menuOpen]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!menuOpen) return;
     const onPointer = (e) => {
       if (!wrapRef.current?.contains(e.target)) setMenuOpen(false);
@@ -3300,7 +3319,7 @@ function ChatHeader({
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect17, useRef as useRef14 } from "react";
+import { useEffect as useEffect18, useRef as useRef15 } from "react";
 
 // src/components/Markdown.tsx
 import ReactMarkdown from "react-markdown";
@@ -3438,11 +3457,11 @@ function useSlipState() {
 }
 
 // src/components/Toast.tsx
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var DISMISS_MS = 4e3;
 function Toast({ toast, onDismiss }) {
-  useEffect12(() => {
+  useEffect13(() => {
     if (!toast) return;
     const timer = setTimeout(onDismiss, DISMISS_MS);
     return () => clearTimeout(timer);
@@ -3841,7 +3860,7 @@ function ComboCardList({ cards, ui, slip, monitor }) {
 }
 
 // src/components/MarketOddsCardList.tsx
-import { useEffect as useEffect13, useState as useState16 } from "react";
+import { useEffect as useEffect14, useState as useState16 } from "react";
 
 // src/components/AllMarketsButton.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -3916,7 +3935,7 @@ function MarketOddsCard({ vm, ui, slip, monitor, inSlipIds, hideHeader, pinRef }
   const staleTime = isStale && live ? fmtHhMm(live.asOfUtc, ui?.locale ?? "en") : null;
   const [, setStaleTick] = useState16(0);
   const watchStale = live != null && !isClosed && !isStale;
-  useEffect13(() => {
+  useEffect14(() => {
     if (!watchStale) return;
     const id = window.setTimeout(() => setStaleTick((n) => n + 1), Math.max(0, asOfMs + STALE_AFTER_MS - Date.now()) + 1);
     return () => window.clearTimeout(id);
@@ -3995,7 +4014,7 @@ function MarketOddsCardList({ cards, ui, slip, monitor, inSlipIds, hideHeader, p
 }
 
 // src/components/CompactOddsList.tsx
-import { useEffect as useEffect14, useRef as useRef12, useState as useState17 } from "react";
+import { useEffect as useEffect15, useRef as useRef13, useState as useState17 } from "react";
 
 // src/compactList.ts
 var COMPACT_MIN_CARDS = 3;
@@ -4112,8 +4131,8 @@ function CompactOddsList({ list, ui, slip, monitor }) {
   const [shown, setShown] = useState17(COMPACT_PAGE);
   const hidden = list.rowCount - shown;
   const [focusIndex, setFocusIndex] = useState17(null);
-  const focusRef = useRef12(null);
-  useEffect14(() => {
+  const focusRef = useRef13(null);
+  useEffect15(() => {
     if (focusIndex !== null) focusRef.current?.focus();
   }, [focusIndex]);
   let left = shown;
@@ -4418,7 +4437,7 @@ function FixtureCard({ card }) {
 }
 
 // src/components/dashboard/CountdownCard.tsx
-import { Fragment as Fragment6, useEffect as useEffect15, useState as useState18 } from "react";
+import { Fragment as Fragment6, useEffect as useEffect16, useState as useState18 } from "react";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var DAY_MS = 864e5;
 function remainingSegments(kickoffUnix, nowMs, withSeconds) {
@@ -4442,7 +4461,7 @@ function CountdownCard({ card }) {
     () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
   );
   const withinDay = data.kickoffUnix * 1e3 - nowMs < DAY_MS;
-  useEffect15(() => {
+  useEffect16(() => {
     if (reduced) return;
     const id = window.setInterval(() => setNowMs(Date.now()), withinDay ? 1e3 : 6e4);
     return () => window.clearInterval(id);
@@ -4799,10 +4818,10 @@ function RestingFormCard({ card }) {
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
-import { useRef as useRef13, useState as useState22 } from "react";
+import { useRef as useRef14, useState as useState22 } from "react";
 
 // src/useLiveClock.ts
-import { useEffect as useEffect16, useState as useState21 } from "react";
+import { useEffect as useEffect17, useState as useState21 } from "react";
 var TICK_MS = 6e4;
 var MAX_LIVE_TICK_MINUTES = 15;
 function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
@@ -4814,7 +4833,7 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
   const [displayMinute, setDisplayMinute] = useState21(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
-  useEffect16(() => {
+  useEffect17(() => {
     setDisplayMinute(computeDisplayMinute(minute, clockRunning, receivedAtMs));
     if (!clockRunning) return;
     const id = window.setInterval(() => {
@@ -4850,7 +4869,7 @@ function LiveScoreCard({
 }) {
   const { data } = card;
   const seedKey = `${data.minute}:${data.homeScore}:${data.awayScore}`;
-  const seedRef = useRef13(null);
+  const seedRef = useRef14(null);
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
@@ -5174,11 +5193,11 @@ function turnAnchor(messages) {
 }
 function MessageList({ controller, ui, slip, onDashboardTap, monitor }) {
   const { state, send } = controller;
-  const listRef = useRef14(null);
-  const endRef = useRef14(null);
-  const pinnedRef = useRef14(true);
-  const anchoredTurnRef = useRef14(null);
-  useEffect17(() => {
+  const listRef = useRef15(null);
+  const endRef = useRef15(null);
+  const pinnedRef = useRef15(true);
+  const anchoredTurnRef = useRef15(null);
+  useEffect18(() => {
     const anchor = turnAnchor(state.messages);
     const list = listRef.current;
     if (anchor && anchor.turnId !== anchoredTurnRef.current) {
@@ -5235,13 +5254,13 @@ function MessageList({ controller, ui, slip, onDashboardTap, monitor }) {
 }
 
 // src/components/ChatInput.tsx
-import { forwardRef, useEffect as useEffect18, useImperativeHandle, useRef as useRef15, useState as useState24 } from "react";
+import { forwardRef, useEffect as useEffect19, useImperativeHandle, useRef as useRef16, useState as useState24 } from "react";
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var ChatInput = forwardRef(function ChatInput2({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message", disabled = false, onType }, ref) {
   const [value, setValue] = useState24("");
-  const textareaRef = useRef15(null);
-  const stopRef = useRef15(null);
-  const textBoxWantsFocusRef = useRef15(false);
+  const textareaRef = useRef16(null);
+  const stopRef = useRef16(null);
+  const textBoxWantsFocusRef = useRef16(false);
   const submit = () => {
     if (disabled) return;
     const t = value.trim();
@@ -5267,7 +5286,7 @@ var ChatInput = forwardRef(function ChatInput2({ placeholder, streaming, onSend,
       stopRef.current?.focus();
     }
   }), []);
-  useEffect18(() => {
+  useEffect19(() => {
     if (streaming || disabled || !textBoxWantsFocusRef.current) return;
     textBoxWantsFocusRef.current = false;
     const box = textareaRef.current;
@@ -5759,7 +5778,7 @@ function TodayPanel({ discovery, ui, monitor }) {
 }
 
 // src/components/GamesPanel.tsx
-import { useEffect as useEffect22, useState as useState39 } from "react";
+import { useEffect as useEffect23, useState as useState39 } from "react";
 
 // src/components/GamesLoginWall.tsx
 import { jsx as jsx57 } from "react/jsx-runtime";
@@ -5768,7 +5787,7 @@ function GamesLoginWall({ ui }) {
 }
 
 // src/components/GamesHub.tsx
-import { useEffect as useEffect19, useState as useState26 } from "react";
+import { useEffect as useEffect20, useState as useState26 } from "react";
 
 // src/components/games/ui/gameMeta.ts
 function prettifyGameId(gameId) {
@@ -5954,7 +5973,7 @@ function pickHeroGame(games) {
 var tileKey = (g) => `${g.gameId}-${g.gameDay}-${g.fixtureId}`;
 function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
   const [, setTick] = useState26(0);
-  useEffect19(() => {
+  useEffect20(() => {
     const id = setInterval(() => setTick((t) => t + 1), 6e4);
     return () => clearInterval(id);
   }, []);
@@ -6014,10 +6033,10 @@ function GamesHub({ games, myWeeklyRow, weeklyPrize, onOpen, ui }) {
 }
 
 // src/components/GameScreenHost.tsx
-import { useEffect as useEffect21, useRef as useRef18, useState as useState38 } from "react";
+import { useEffect as useEffect22, useRef as useRef19, useState as useState38 } from "react";
 
 // src/useGamePlay.ts
-import { useCallback as useCallback11, useRef as useRef16, useState as useState27 } from "react";
+import { useCallback as useCallback11, useRef as useRef17, useState as useState27 } from "react";
 function toSubmitResult(payload) {
   return {
     // 'pending' means the play is recorded but awaiting resolution (fixture games)
@@ -6032,12 +6051,12 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh
   const [result, setResult] = useState27(null);
   const [submitting, setSubmitting] = useState27(false);
   const [rawStatus, setRawStatus] = useState27(null);
-  const inFlightRef = useRef16(false);
-  const convRef = useRef16(conversation);
+  const inFlightRef = useRef17(false);
+  const convRef = useRef17(conversation);
   convRef.current = conversation;
-  const optsRef = useRef16({ gameId, gameDay, fixtureId, locale, refresh });
+  const optsRef = useRef17({ gameId, gameDay, fixtureId, locale, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
-  const resultRef = useRef16(null);
+  const resultRef = useRef17(null);
   resultRef.current = result;
   const refetch = useCallback11(async () => {
     const conv = convRef.current;
@@ -6385,53 +6404,104 @@ function SearchField({ id, label, labelHidden = false, placeholder, value, onCha
   ] });
 }
 
+// src/components/games/ui/AnswerTray.tsx
+import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs59 } from "react/jsx-runtime";
+function AnswerTray({ id, label, placeholder, optionsLabel, options, query, onQuery, onPick, disabled, minQuery = 0 }) {
+  const needle = query.trim().toLowerCase();
+  const shown = needle.length < minQuery ? [] : needle ? options.filter((o) => o.name.toLowerCase().includes(needle)) : options;
+  return /* @__PURE__ */ jsxs59(Fragment11, { children: [
+    /* @__PURE__ */ jsx67(
+      SearchField,
+      {
+        id,
+        label,
+        labelHidden: true,
+        placeholder,
+        value: query,
+        onChange: onQuery,
+        disabled
+      }
+    ),
+    shown.length > 0 && /* @__PURE__ */ jsx67("div", { className: "ss-g-tray", role: "listbox", "aria-label": optionsLabel, children: shown.map((o) => {
+      const { first, last } = splitName(o.name);
+      return /* @__PURE__ */ jsxs59(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": false,
+          "aria-label": o.name,
+          className: "ss-g-tray-chip",
+          disabled,
+          onClick: () => onPick(o.id),
+          children: [
+            /* @__PURE__ */ jsx67(PlayerAvatar, { className: "ss-g-tray-av", name: o.name, imagePath: o.imagePath }),
+            /* @__PURE__ */ jsxs59("span", { className: "ss-g-tray-name", "aria-hidden": "true", children: [
+              first && /* @__PURE__ */ jsx67("span", { className: "ss-g-tray-first", children: first }),
+              /* @__PURE__ */ jsx67("span", { className: "ss-g-tray-last", children: last })
+            ] })
+          ]
+        },
+        o.id
+      );
+    }) })
+  ] });
+}
+
 // src/components/games/ui/FooterBar.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function FooterBar({ children }) {
-  return /* @__PURE__ */ jsx67("div", { className: "ss-g-footer", children });
+  return /* @__PURE__ */ jsx68("div", { className: "ss-g-footer", children });
 }
 
 // src/components/games/ui/Silhouette.tsx
-import { jsx as jsx68, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
 function Silhouette({ size, variant = "default" }) {
-  return /* @__PURE__ */ jsxs59("span", { className: `ss-g-sil ss-g-sil--${variant}`, style: { width: size, height: size }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs59("svg", { width: size * 0.86, height: size * 0.86, viewBox: "0 0 100 100", children: [
-      /* @__PURE__ */ jsx68("circle", { cx: "50", cy: "40", r: "19", fill: "currentColor" }),
-      /* @__PURE__ */ jsx68("path", { d: "M12 100c0-23 17-38 38-38s38 15 38 38z", fill: "currentColor" })
+  return /* @__PURE__ */ jsxs60("span", { className: `ss-g-sil ss-g-sil--${variant}`, style: { width: size, height: size }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs60("svg", { width: size * 0.86, height: size * 0.86, viewBox: "0 0 100 100", children: [
+      /* @__PURE__ */ jsx69("circle", { cx: "50", cy: "40", r: "19", fill: "currentColor" }),
+      /* @__PURE__ */ jsx69("path", { d: "M12 100c0-23 17-38 38-38s38 15 38 38z", fill: "currentColor" })
     ] }),
-    variant === "mystery" && /* @__PURE__ */ jsx68("span", { className: "ss-g-sil-q", children: "?" })
+    variant === "mystery" && /* @__PURE__ */ jsx69("span", { className: "ss-g-sil-q", children: "?" })
   ] });
 }
 
 // src/components/games/ui/GameButton.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 function GameButton({ variant = "primary", block = false, className, type = "button", ...rest }) {
   const cls = `ss-g-btn ss-g-btn--${variant}${block ? " ss-g-btn--block" : ""}${className ? ` ${className}` : ""}`;
-  return /* @__PURE__ */ jsx69("button", { type, className: cls, ...rest });
+  return /* @__PURE__ */ jsx70("button", { type, className: cls, ...rest });
 }
 
 // src/components/games/ui/ResultCard.tsx
-import { jsx as jsx70, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs61 } from "react/jsx-runtime";
 function ResultCard({ tone, title, score, detail, onBack, ui }) {
-  return /* @__PURE__ */ jsxs60("div", { className: "ss-g-result", "data-tone": tone, role: "status", children: [
-    /* @__PURE__ */ jsx70("span", { className: "ss-g-result-title", children: title }),
-    score !== void 0 && /* @__PURE__ */ jsxs60("span", { className: "ss-g-result-score", children: [
-      /* @__PURE__ */ jsx70("span", { className: "ss-g-result-num", children: score }),
+  return /* @__PURE__ */ jsxs61("div", { className: "ss-g-result", "data-tone": tone, role: "status", children: [
+    /* @__PURE__ */ jsx71("span", { className: "ss-g-result-title", children: title }),
+    score !== void 0 && /* @__PURE__ */ jsxs61("span", { className: "ss-g-result-score", children: [
+      /* @__PURE__ */ jsx71("span", { className: "ss-g-result-num", children: score }),
       ui.games.unitPts
     ] }),
-    detail && /* @__PURE__ */ jsx70("span", { className: "ss-g-result-detail", children: detail }),
-    onBack && /* @__PURE__ */ jsx70(GameButton, { variant: "outline", onClick: onBack, children: ui.games.backToGames })
+    detail && /* @__PURE__ */ jsx71("span", { className: "ss-g-result-detail", children: detail }),
+    onBack && /* @__PURE__ */ jsx71(GameButton, { variant: "outline", onClick: onBack, children: ui.games.backToGames })
   ] });
 }
 
-// src/components/games/ui/OptionList.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-function OptionList({ label, options, onPick }) {
-  return /* @__PURE__ */ jsx71("div", { className: "ss-g-opts", role: "listbox", "aria-label": label, children: options.map((o) => /* @__PURE__ */ jsx71("button", { type: "button", role: "option", "aria-selected": false, className: "ss-g-opt", onClick: () => onPick(o.key), children: o.content }, o.key)) });
+// src/components/games/ui/PointsLadderRow.tsx
+import { jsx as jsx72, jsxs as jsxs62 } from "react/jsx-runtime";
+function PointsLadderRow({ ladder, guessesUsed, ui }) {
+  if (!ladder || ladder.length === 0) return null;
+  const now = ladder[Math.min(guessesUsed, ladder.length - 1)];
+  const next = ladder[guessesUsed + 1];
+  if (now === void 0) return null;
+  return /* @__PURE__ */ jsxs62("div", { className: "ss-g-worth", "data-testid": "points-ladder", children: [
+    /* @__PURE__ */ jsx72("span", { className: "ss-g-worth-now", children: ui.games.worthNow(now) }),
+    next !== void 0 && next !== now && /* @__PURE__ */ jsx72("span", { className: "ss-g-worth-next", children: ui.games.worthAfterMiss(next) })
+  ] });
 }
 
 // src/components/games/MysteryTigerGame.tsx
-import { Fragment as Fragment11, jsx as jsx72, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs63 } from "react/jsx-runtime";
 function parseClientState(json) {
   if (!json) return null;
   try {
@@ -6545,9 +6615,7 @@ function MysteryTigerGame({
   const totalGuesses = clientState ? clientState.guessesUsed + clientState.guessesRemaining : MAX_GUESSES;
   const score = result?.score ?? 0;
   const revealName = isOver ? clientState?.revealedPlayerName : void 0;
-  const filtered = config && !isOver ? config.squadPlayers.filter(
-    (p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
-  ) : [];
+  const pool = config && !isOver ? config.squadPlayers.filter((p) => !alreadyGuessedIds.has(p.id)) : [];
   function handleSelect(playerId) {
     if (!config || isOver || submitting) return;
     const prevGuesses = guessResults.map((g) => g.playerId);
@@ -6555,22 +6623,22 @@ function MysteryTigerGame({
     setQuery("");
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
-  const headerRight = !config ? void 0 : isOver ? /* @__PURE__ */ jsxs61(Chip, { variant: "accent", children: [
+  const headerRight = !config ? void 0 : isOver ? /* @__PURE__ */ jsxs63(Chip, { variant: "accent", children: [
     score,
     " ",
     ui.games.unitPts
-  ] }) : /* @__PURE__ */ jsx72("span", { "data-testid": "mt-chip", children: /* @__PURE__ */ jsxs61(Chip, { children: [
+  ] }) : /* @__PURE__ */ jsx73("span", { "data-testid": "mt-chip", children: /* @__PURE__ */ jsxs63(Chip, { children: [
     ui.games.guess,
     " ",
-    /* @__PURE__ */ jsx72("span", { className: "ss-g-num", children: guessesUsed + 1 }),
+    /* @__PURE__ */ jsx73("span", { className: "ss-g-num", children: guessesUsed + 1 }),
     " / ",
     totalGuesses
   ] }) });
   const segments = Array.from({ length: totalGuesses }, (_, i) => i < guessesUsed ? "done" : i === guessesUsed ? "current" : "todo");
   const cols = { gridTemplateColumns: `minmax(0, 1fr) repeat(${keys.length}, 42px)` };
   const known = deriveKnownAttributes(guessResults, keys);
-  return /* @__PURE__ */ jsxs61("div", { className: "ss-g-screen ss-g-mt", "data-testid": "game-screen-mystery-tiger", children: [
-    /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsxs63("div", { className: "ss-g-screen ss-g-mt", "data-game": "mystery-tiger", "data-testid": "game-screen-mystery-tiger", children: [
+    /* @__PURE__ */ jsx73(
       GameHeader,
       {
         title: gameTitle({ gameId: "mystery-tiger" }, ui.games.titles),
@@ -6580,40 +6648,41 @@ function MysteryTigerGame({
         backLabel: ui.back
       }
     ),
-    !config && /* @__PURE__ */ jsx72("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
-    config && /* @__PURE__ */ jsxs61(Fragment11, { children: [
-      /* @__PURE__ */ jsxs61("div", { className: "ss-g-body", children: [
-        /* @__PURE__ */ jsxs61("div", { className: `ss-g-mt-card${isOver ? " ss-g-mt-card--reveal" : ""}`, children: [
-          /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-portrait", children: [
-            revealName ? /* @__PURE__ */ jsx72(PlayerAvatar, { className: "ss-g-mt-photo", name: revealName, imagePath: clientState?.revealedPlayerImagePath }) : /* @__PURE__ */ jsx72(Silhouette, { size: 150, variant: "mystery" }),
-            revealName && /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-reveal-name", children: revealName })
+    !config && /* @__PURE__ */ jsx73("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
+    config && /* @__PURE__ */ jsxs63(Fragment12, { children: [
+      /* @__PURE__ */ jsxs63("div", { className: "ss-g-body", children: [
+        !isOver && /* @__PURE__ */ jsx73(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed, ui }),
+        /* @__PURE__ */ jsxs63("div", { className: `ss-g-mt-card${isOver ? " ss-g-mt-card--reveal" : ""}`, children: [
+          /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-portrait", children: [
+            revealName ? /* @__PURE__ */ jsx73(PlayerAvatar, { className: "ss-g-mt-photo", name: revealName, imagePath: clientState?.revealedPlayerImagePath }) : /* @__PURE__ */ jsx73(Silhouette, { size: 150, variant: "mystery" }),
+            revealName && /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-reveal-name", children: revealName })
           ] }),
-          /* @__PURE__ */ jsx72("div", { className: "ss-g-mt-known", style: { gridTemplateColumns: `repeat(${keys.length}, minmax(0, 1fr))` }, children: known.map((k) => /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-known-cell", children: [
-            /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-lab", children: t.labels[k.key] }),
-            /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-known-v", "data-state": k.state, "data-testid": `known-${k.key}`, children: k.text })
+          /* @__PURE__ */ jsx73("div", { className: "ss-g-mt-known", style: { gridTemplateColumns: `repeat(${keys.length}, minmax(0, 1fr))` }, children: known.map((k) => /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-known-cell", children: [
+            /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-lab", children: t.labels[k.key] }),
+            /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-known-v", "data-state": k.state, "data-testid": `known-${k.key}`, children: k.text })
           ] }, k.key)) })
         ] }),
-        !isOver && /* @__PURE__ */ jsx72(SegmentProgress, { segments, ariaLabel: t.progress(guessesUsed, totalGuesses) }),
-        guessResults.length > 0 && /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-table", children: [
-          /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-thead", style: cols, children: [
-            /* @__PURE__ */ jsx72("span", { children: t.yourGuesses }),
-            keys.map((k) => /* @__PURE__ */ jsx72("span", { children: t.labels[k] }, k))
+        !isOver && /* @__PURE__ */ jsx73(SegmentProgress, { segments, ariaLabel: t.progress(guessesUsed, totalGuesses) }),
+        guessResults.length > 0 && /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-table", children: [
+          /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-thead", style: cols, children: [
+            /* @__PURE__ */ jsx73("span", { children: t.yourGuesses }),
+            keys.map((k) => /* @__PURE__ */ jsx73("span", { children: t.labels[k] }, k))
           ] }),
           guessResults.map((gr, i) => {
             const name = config.squadPlayers.find((p) => p.id === gr.playerId)?.name ?? `#${gr.playerId}`;
             const { first, last } = splitName(name);
-            return /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-row", style: cols, children: [
-              /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-who", children: [
-                /* @__PURE__ */ jsx72(PlayerAvatar, { className: "ss-g-mt-av", name }),
-                /* @__PURE__ */ jsxs61("span", { className: "ss-g-mt-names", children: [
-                  first && /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-first", children: first }),
-                  /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-last", children: last })
+            return /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-row", style: cols, children: [
+              /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-who", children: [
+                /* @__PURE__ */ jsx73(PlayerAvatar, { className: "ss-g-mt-av", name }),
+                /* @__PURE__ */ jsxs63("span", { className: "ss-g-mt-names", children: [
+                  first && /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-first", children: first }),
+                  /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-last", children: last })
                 ] })
               ] }),
               keys.map((key) => {
                 const v = gr[key];
                 const arrow = directionArrow(v);
-                return /* @__PURE__ */ jsxs61(
+                return /* @__PURE__ */ jsxs63(
                   "div",
                   {
                     className: "ss-g-mt-cell",
@@ -6621,8 +6690,8 @@ function MysteryTigerGame({
                     "data-verdict": v.verdict,
                     "aria-label": `${t.labels[key]}: ${v.value ?? v.verdict}${v.direction ? ` ${v.direction}` : ""}`,
                     children: [
-                      /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-cell-v", "aria-hidden": "true", children: tileFace(key, v) }),
-                      arrow && /* @__PURE__ */ jsx72("span", { className: "ss-g-mt-cell-dir", "aria-hidden": "true", children: arrow })
+                      /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-cell-v", "aria-hidden": "true", children: tileFace(key, v) }),
+                      arrow && /* @__PURE__ */ jsx73("span", { className: "ss-g-mt-cell-dir", "aria-hidden": "true", children: arrow })
                     ]
                   },
                   key
@@ -6631,25 +6700,25 @@ function MysteryTigerGame({
             ] }, gr.playerId);
           })
         ] }),
-        !isOver && /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-legend", children: [
-          /* @__PURE__ */ jsxs61("span", { children: [
-            /* @__PURE__ */ jsx72("i", { className: "ss-g-mt-sw", "data-verdict": "exact" }),
+        !isOver && /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-legend", children: [
+          /* @__PURE__ */ jsxs63("span", { children: [
+            /* @__PURE__ */ jsx73("i", { className: "ss-g-mt-sw", "data-verdict": "exact" }),
             t.legendMatch
           ] }),
-          /* @__PURE__ */ jsxs61("span", { children: [
-            /* @__PURE__ */ jsx72("i", { className: "ss-g-mt-sw", "data-verdict": "near" }),
+          /* @__PURE__ */ jsxs63("span", { children: [
+            /* @__PURE__ */ jsx73("i", { className: "ss-g-mt-sw", "data-verdict": "near" }),
             t.legendClose
           ] }),
-          /* @__PURE__ */ jsxs61("span", { children: [
+          /* @__PURE__ */ jsxs63("span", { children: [
             "\u25B2 ",
             t.legendHigher
           ] })
         ] }),
-        clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs61("div", { className: "ss-g-mt-hint", children: [
-          /* @__PURE__ */ jsx72(IconBulb, {}),
-          /* @__PURE__ */ jsx72("span", { children: clientState.hintLine })
+        clientState?.hintLine && !isOver && /* @__PURE__ */ jsxs63("div", { className: "ss-g-mt-hint", children: [
+          /* @__PURE__ */ jsx73(IconBulb, {}),
+          /* @__PURE__ */ jsx73("span", { children: clientState.hintLine })
         ] }),
-        isOver && /* @__PURE__ */ jsx72(
+        isOver && /* @__PURE__ */ jsx73(
           ResultCard,
           {
             tone: clientState?.solved ? "win" : clientState?.failed ? "lose" : "neutral",
@@ -6661,39 +6730,26 @@ function MysteryTigerGame({
           }
         )
       ] }),
-      !isOver && /* @__PURE__ */ jsxs61(FooterBar, { children: [
-        query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx72(
-          OptionList,
-          {
-            label: t.optionsLabel,
-            options: filtered.map((p) => ({
-              key: p.id,
-              content: /* @__PURE__ */ jsxs61(Fragment11, { children: [
-                /* @__PURE__ */ jsx72(PlayerAvatar, { className: "ss-g-opt-av", name: p.name }),
-                /* @__PURE__ */ jsx72("span", { children: p.name })
-              ] })
-            })),
-            onPick: (k) => handleSelect(Number(k))
-          }
-        ),
-        /* @__PURE__ */ jsx72(
-          SearchField,
-          {
-            id: inputId,
-            label: t.searchLabel,
-            placeholder: t.searchPlaceholder,
-            value: query,
-            onChange: setQuery,
-            disabled: submitting
-          }
-        )
-      ] })
+      !isOver && /* @__PURE__ */ jsx73(FooterBar, { children: /* @__PURE__ */ jsx73(
+        AnswerTray,
+        {
+          id: inputId,
+          label: t.searchLabel,
+          placeholder: t.searchPlaceholder,
+          optionsLabel: t.optionsLabel,
+          options: pool,
+          query,
+          onQuery: setQuery,
+          onPick: handleSelect,
+          disabled: submitting
+        }
+      ) })
     ] })
   ] });
 }
 
 // src/components/games/HigherOrLowerGame.tsx
-import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs64 } from "react/jsx-runtime";
 var POINTS_PER_CORRECT = 10;
 function parseClientState2(json) {
   if (!json) return null;
@@ -6705,11 +6761,11 @@ function parseClientState2(json) {
 }
 function PlayerCard({ name, imagePath, highlight, children }) {
   const { first, last } = splitName(name);
-  return /* @__PURE__ */ jsxs62("div", { className: `ss-g-hl-card${highlight ? " ss-g-hl-card--b" : ""}`, children: [
-    /* @__PURE__ */ jsx73("div", { className: "ss-g-hl-photo-wrap", children: imagePath ? /* @__PURE__ */ jsx73(PlayerAvatar, { className: "ss-g-hl-photo", name, imagePath }) : /* @__PURE__ */ jsx73(Silhouette, { size: 150 }) }),
-    /* @__PURE__ */ jsxs62("div", { className: "ss-g-hl-info", children: [
-      first && /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-first", children: first }),
-      /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-surname", children: last }),
+  return /* @__PURE__ */ jsxs64("div", { className: `ss-g-hl-card${highlight ? " ss-g-hl-card--b" : ""}`, children: [
+    /* @__PURE__ */ jsx74("div", { className: "ss-g-hl-photo-wrap", children: imagePath ? /* @__PURE__ */ jsx74(PlayerAvatar, { className: "ss-g-hl-photo", name, imagePath }) : /* @__PURE__ */ jsx74(Silhouette, { size: 150 }) }),
+    /* @__PURE__ */ jsxs64("div", { className: "ss-g-hl-info", children: [
+      first && /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-first", children: first }),
+      /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-surname", children: last }),
       children
     ] })
   ] });
@@ -6741,47 +6797,47 @@ function HigherOrLowerGame({
     const newAnswers = [...prevAnswers, { pairIndex: currentPair.pairIndex, pick }];
     onSubmit(JSON.stringify({ answers: newAnswers }));
   }
-  return /* @__PURE__ */ jsxs62("div", { className: "ss-g-screen ss-g-hl", "data-testid": "game-screen-higher-or-lower", children: [
-    /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsxs64("div", { className: "ss-g-screen ss-g-hl", "data-game": "higher-or-lower", "data-testid": "game-screen-higher-or-lower", children: [
+    /* @__PURE__ */ jsx74(
       GameHeader,
       {
         title: gameTitle({ gameId: "higher-or-lower" }, ui.games.titles),
         eyebrow: t.eyebrow(POINTS_PER_CORRECT),
-        right: config ? /* @__PURE__ */ jsx73(StatStack, { value: runLength, label: t.streak }) : void 0,
+        right: config ? /* @__PURE__ */ jsx74(StatStack, { value: runLength, label: t.streak }) : void 0,
         onBack,
         backLabel: ui.back
       }
     ),
-    !config && /* @__PURE__ */ jsx73("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
-    config && /* @__PURE__ */ jsxs62(Fragment12, { children: [
-      /* @__PURE__ */ jsxs62("div", { className: "ss-g-body", children: [
-        /* @__PURE__ */ jsxs62("div", { className: "ss-g-hl-prompt", "data-testid": "hol-prompt", children: [
-          /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-prompt-q", children: t.whoHadMore }),
-          /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-prompt-stat", children: config.statLabel }),
-          /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-prompt-season", children: t.season(config.seasonLabel) })
+    !config && /* @__PURE__ */ jsx74("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
+    config && /* @__PURE__ */ jsxs64(Fragment13, { children: [
+      /* @__PURE__ */ jsxs64("div", { className: "ss-g-body", children: [
+        /* @__PURE__ */ jsxs64("div", { className: "ss-g-hl-prompt", "data-testid": "hol-prompt", children: [
+          /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-prompt-q", children: t.whoHadMore }),
+          /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-prompt-stat", children: config.statLabel }),
+          /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-prompt-season", children: t.season(config.seasonLabel) })
         ] }),
-        currentPair && /* @__PURE__ */ jsxs62("div", { className: "ss-g-hl-pair", children: [
-          /* @__PURE__ */ jsxs62(PlayerCard, { name: currentPair.playerAName, imagePath: currentPair.playerAImagePath, children: [
-            /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-value", children: currentPair.playerAValue }),
-            /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-stat", children: config.statLabel })
+        currentPair && /* @__PURE__ */ jsxs64("div", { className: "ss-g-hl-pair", children: [
+          /* @__PURE__ */ jsxs64(PlayerCard, { name: currentPair.playerAName, imagePath: currentPair.playerAImagePath, children: [
+            /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-value", children: currentPair.playerAValue }),
+            /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-stat", children: config.statLabel })
           ] }),
-          /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-vs", "aria-hidden": "true", children: t.vs }),
-          /* @__PURE__ */ jsx73(PlayerCard, { name: currentPair.playerBName, imagePath: currentPair.playerBImagePath, highlight: true, children: /* @__PURE__ */ jsxs62("div", { className: "ss-g-hl-btns", children: [
-            /* @__PURE__ */ jsxs62(GameButton, { variant: "primary", disabled: submitting, onClick: () => handlePick("higher"), children: [
-              /* @__PURE__ */ jsx73(IconArrowUp, { size: 16 }),
+          /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-vs", "aria-hidden": "true", children: t.vs }),
+          /* @__PURE__ */ jsx74(PlayerCard, { name: currentPair.playerBName, imagePath: currentPair.playerBImagePath, highlight: true, children: /* @__PURE__ */ jsxs64("div", { className: "ss-g-hl-btns", children: [
+            /* @__PURE__ */ jsxs64(GameButton, { variant: "primary", disabled: submitting, onClick: () => handlePick("higher"), children: [
+              /* @__PURE__ */ jsx74(IconArrowUp, { size: 16 }),
               t.higher
             ] }),
-            /* @__PURE__ */ jsxs62(GameButton, { variant: "outline", disabled: submitting, onClick: () => handlePick("lower"), children: [
-              /* @__PURE__ */ jsx73(IconArrowDown, { size: 16 }),
+            /* @__PURE__ */ jsxs64(GameButton, { variant: "outline", disabled: submitting, onClick: () => handlePick("lower"), children: [
+              /* @__PURE__ */ jsx74(IconArrowDown, { size: 16 }),
               t.lower
             ] })
           ] }) })
         ] }),
-        lastAnswer && lastAnswerPair && /* @__PURE__ */ jsxs62("p", { className: "ss-g-hl-feedback", "data-testid": "hol-last", "data-correct": lastAnswer.wasCorrect ? "true" : "false", children: [
-          lastAnswer.wasCorrect ? /* @__PURE__ */ jsx73(IconCheck, {}) : /* @__PURE__ */ jsx73(IconClose, {}),
+        lastAnswer && lastAnswerPair && /* @__PURE__ */ jsxs64("p", { className: "ss-g-hl-feedback", "data-testid": "hol-last", "data-correct": lastAnswer.wasCorrect ? "true" : "false", children: [
+          lastAnswer.wasCorrect ? /* @__PURE__ */ jsx74(IconCheck, {}) : /* @__PURE__ */ jsx74(IconClose, {}),
           t.lastAnswer(splitName(lastAnswerPair.playerBName).last, lastAnswer.playerBValue)
         ] }),
-        isOver && /* @__PURE__ */ jsx73(
+        isOver && /* @__PURE__ */ jsx74(
           ResultCard,
           {
             tone: runEndedWrong ? "lose" : allPairsAnswered ? "win" : "neutral",
@@ -6793,15 +6849,15 @@ function HigherOrLowerGame({
           }
         )
       ] }),
-      !isOver && /* @__PURE__ */ jsx73(FooterBar, { children: /* @__PURE__ */ jsxs62("div", { className: "ss-g-hl-foot", children: [
-        /* @__PURE__ */ jsx73("div", { className: "ss-g-hl-dots", role: "img", "aria-label": t.answersSoFar(answeredCount, config.pairs.length), children: config.pairs.map((p, i) => {
+      !isOver && /* @__PURE__ */ jsx74(FooterBar, { children: /* @__PURE__ */ jsxs64("div", { className: "ss-g-hl-foot", children: [
+        /* @__PURE__ */ jsx74("div", { className: "ss-g-hl-dots", role: "img", "aria-label": t.answersSoFar(answeredCount, config.pairs.length), children: config.pairs.map((p, i) => {
           const a = answeredPairs[i];
-          return /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-dot", "data-state": a ? a.wasCorrect ? "correct" : "wrong" : "todo" }, p.pairIndex);
+          return /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-dot", "data-state": a ? a.wasCorrect ? "correct" : "wrong" : "todo" }, p.pairIndex);
         }) }),
-        /* @__PURE__ */ jsxs62("span", { className: "ss-g-hl-pts", children: [
-          /* @__PURE__ */ jsx73("span", { "data-testid": "hol-score", children: score }),
+        /* @__PURE__ */ jsxs64("span", { className: "ss-g-hl-pts", children: [
+          /* @__PURE__ */ jsx74("span", { "data-testid": "hol-score", children: score }),
           " ",
-          /* @__PURE__ */ jsx73("span", { className: "ss-g-hl-pts-unit", children: ui.games.unitPts })
+          /* @__PURE__ */ jsx74("span", { className: "ss-g-hl-pts-unit", children: ui.games.unitPts })
         ] })
       ] }) })
     ] })
@@ -6813,17 +6869,17 @@ import { useState as useState31, useId as useId3 } from "react";
 
 // src/components/games/ui/CrestShield.tsx
 import { useState as useState30 } from "react";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 function CrestShield({ src, name, size = 28 }) {
   const [failed, setFailed] = useState30(false);
   if (src && !isPlaceholderImage(src) && !failed) {
-    return /* @__PURE__ */ jsx74("img", { className: "ss-g-crest", src, alt: name, width: size, height: size, loading: "lazy", onError: () => setFailed(true) });
+    return /* @__PURE__ */ jsx75("img", { className: "ss-g-crest", src, alt: name, width: size, height: size, loading: "lazy", onError: () => setFailed(true) });
   }
-  return /* @__PURE__ */ jsx74("svg", { className: "ss-g-crest ss-g-crest--ph", width: size, height: size * 32 / 28, viewBox: "0 0 28 32", role: "img", "aria-label": name, children: /* @__PURE__ */ jsx74("path", { d: "M2 3h24v12c0 9-6 14-12 17C8 29 2 24 2 15z", fill: "currentColor" }) });
+  return /* @__PURE__ */ jsx75("svg", { className: "ss-g-crest ss-g-crest--ph", width: size, height: size * 32 / 28, viewBox: "0 0 28 32", role: "img", "aria-label": name, children: /* @__PURE__ */ jsx75("path", { d: "M2 3h24v12c0 9-6 14-12 17C8 29 2 24 2 15z", fill: "currentColor" }) });
 }
 
 // src/components/games/CareerPathGame.tsx
-import { Fragment as Fragment13, jsx as jsx75, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs65 } from "react/jsx-runtime";
 function parseClientState3(json) {
   if (!json) return null;
   try {
@@ -6853,17 +6909,15 @@ function CareerPathGame({
   const alreadyGuessedIds = new Set(clientState?.guessResults.map((g) => g.playerId) ?? []);
   const isOver = result?.alreadyPlayed === true || clientState?.solved === true || clientState?.failed === true;
   if (!config) {
-    return /* @__PURE__ */ jsxs63("div", { className: "ss-g-screen", "data-testid": "game-screen-career-path", children: [
-      /* @__PURE__ */ jsx75(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
-      /* @__PURE__ */ jsx75("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+    return /* @__PURE__ */ jsxs65("div", { className: "ss-g-screen", "data-game": "career-path", "data-testid": "game-screen-career-path", children: [
+      /* @__PURE__ */ jsx76(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
+      /* @__PURE__ */ jsx76("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const visiblePath = clientState?.visiblePath ?? config.initialPath;
   const totalClubs = clientState?.totalClubs ?? config.totalClubs;
   const hidden = isOver ? 0 : Math.max(0, totalClubs - visiblePath.length);
-  const filtered = !isOver ? config.typeaheadPool.filter(
-    (p) => !alreadyGuessedIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
-  ) : [];
+  const pool = !isOver ? config.typeaheadPool.filter((p) => !alreadyGuessedIds.has(p.id)) : [];
   function handleSelect(playerId) {
     if (!config || isOver || submitting) return;
     const prevGuesses = clientState?.guessResults.map((g) => g.playerId) ?? [];
@@ -6871,60 +6925,61 @@ function CareerPathGame({
     setQuery("");
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
-  const right = !isOver && clientState ? /* @__PURE__ */ jsx75("span", { "data-testid": "cp-guess-chip", children: /* @__PURE__ */ jsxs63(Chip, { variant: "neutral", children: [
+  const right = !isOver && clientState ? /* @__PURE__ */ jsx76("span", { "data-testid": "cp-guess-chip", children: /* @__PURE__ */ jsxs65(Chip, { variant: "neutral", children: [
     ui.games.guess,
     " ",
-    /* @__PURE__ */ jsx75("span", { className: "ss-g-num", children: clientState.guessesUsed + 1 }),
+    /* @__PURE__ */ jsx76("span", { className: "ss-g-num", children: clientState.guessesUsed + 1 }),
     " / ",
     clientState.guessesUsed + clientState.guessesRemaining
   ] }) }) : void 0;
   const outcome = clientState?.solved ? s.solved : clientState?.failed ? s.failed : ui.games.done;
-  return /* @__PURE__ */ jsxs63("div", { className: "ss-g-screen", "data-testid": "game-screen-career-path", children: [
-    /* @__PURE__ */ jsx75(GameHeader, { title, eyebrow: s.eyebrow, right, onBack, backLabel: ui.back }),
-    /* @__PURE__ */ jsxs63("div", { className: "ss-g-body", children: [
-      /* @__PURE__ */ jsxs63("div", { className: "ss-g-cp-card", children: [
-        isOver && clientState?.revealedPlayerName ? /* @__PURE__ */ jsx75(PlayerAvatar, { className: "ss-g-cp-photo", name: clientState.revealedPlayerName, imagePath: clientState.revealedPlayerImagePath }) : /* @__PURE__ */ jsx75(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
-        /* @__PURE__ */ jsxs63("div", { className: "ss-g-cp-card-text", children: [
-          /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-card-title", children: isOver && clientState?.revealedPlayerName ? clientState.revealedPlayerName : s.mysteryPlayer }),
-          clientState?.hintLine ? /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-hint", children: clientState.hintLine }) : !isOver ? /* @__PURE__ */ jsxs63("span", { className: "ss-g-cp-locks", children: [
-            /* @__PURE__ */ jsx75(Chip, { variant: "lock", icon: /* @__PURE__ */ jsx75(IconLock, { size: 11 }), children: s.lockPosition }),
-            /* @__PURE__ */ jsx75(Chip, { variant: "lock", icon: /* @__PURE__ */ jsx75(IconLock, { size: 11 }), children: s.lockNationality })
+  return /* @__PURE__ */ jsxs65("div", { className: "ss-g-screen", "data-game": "career-path", "data-testid": "game-screen-career-path", children: [
+    /* @__PURE__ */ jsx76(GameHeader, { title, eyebrow: s.eyebrow, right, onBack, backLabel: ui.back }),
+    /* @__PURE__ */ jsxs65("div", { className: "ss-g-body", children: [
+      !isOver && /* @__PURE__ */ jsx76(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed: clientState?.guessesUsed ?? 0, ui }),
+      /* @__PURE__ */ jsxs65("div", { className: "ss-g-cp-card", children: [
+        isOver && clientState?.revealedPlayerName ? /* @__PURE__ */ jsx76(PlayerAvatar, { className: "ss-g-cp-photo", name: clientState.revealedPlayerName, imagePath: clientState.revealedPlayerImagePath }) : /* @__PURE__ */ jsx76(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
+        /* @__PURE__ */ jsxs65("div", { className: "ss-g-cp-card-text", children: [
+          /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-card-title", children: isOver && clientState?.revealedPlayerName ? clientState.revealedPlayerName : s.mysteryPlayer }),
+          clientState?.hintLine ? /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-hint", children: clientState.hintLine }) : !isOver ? /* @__PURE__ */ jsxs65("span", { className: "ss-g-cp-locks", children: [
+            /* @__PURE__ */ jsx76(Chip, { variant: "lock", icon: /* @__PURE__ */ jsx76(IconLock, { size: 11 }), children: s.lockPosition }),
+            /* @__PURE__ */ jsx76(Chip, { variant: "lock", icon: /* @__PURE__ */ jsx76(IconLock, { size: 11 }), children: s.lockNationality })
           ] }) : null
         ] })
       ] }),
-      /* @__PURE__ */ jsxs63("ol", { className: "ss-g-cp-line", children: [
+      /* @__PURE__ */ jsxs65("ol", { className: "ss-g-cp-line", children: [
         visiblePath.map((spell, i) => {
           const years = i === 0 ? s.firstClub : spellYears(spell);
-          return /* @__PURE__ */ jsxs63("li", { className: "ss-g-cp-step", children: [
-            /* @__PURE__ */ jsxs63("span", { className: "ss-g-cp-rail", children: [
-              /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-tile", children: /* @__PURE__ */ jsx75(CrestShield, { src: spell.crestUrl, name: spell.clubName, size: 30 }) }),
-              /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-conn", "aria-hidden": "true" })
+          return /* @__PURE__ */ jsxs65("li", { className: "ss-g-cp-step", children: [
+            /* @__PURE__ */ jsxs65("span", { className: "ss-g-cp-rail", children: [
+              /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-tile", children: /* @__PURE__ */ jsx76(CrestShield, { src: spell.crestUrl, name: spell.clubName, size: 30 }) }),
+              /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-conn", "aria-hidden": "true" })
             ] }),
-            /* @__PURE__ */ jsxs63("span", { className: "ss-g-cp-step-text", children: [
-              /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-club", children: spell.clubName }),
-              /* @__PURE__ */ jsxs63("span", { className: "ss-g-cp-sub", children: [
-                /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-years", children: years }),
-                spell.isLoan && /* @__PURE__ */ jsxs63(Fragment13, { children: [
+            /* @__PURE__ */ jsxs65("span", { className: "ss-g-cp-step-text", children: [
+              /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-club", children: spell.clubName }),
+              /* @__PURE__ */ jsxs65("span", { className: "ss-g-cp-sub", children: [
+                /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-years", children: years }),
+                spell.isLoan && /* @__PURE__ */ jsxs65(Fragment14, { children: [
                   years ? " \xB7 " : "",
-                  /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-loan", children: s.loan })
+                  /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-loan", children: s.loan })
                 ] })
               ] })
             ] })
           ] }, `${spell.clubName}-${i}`);
         }),
-        hidden > 0 && /* @__PURE__ */ jsxs63("li", { className: "ss-g-cp-step ss-g-cp-step--hidden", children: [
-          /* @__PURE__ */ jsxs63("span", { className: "ss-g-cp-rail", children: [
-            /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-tile ss-g-cp-tile--locked", children: /* @__PURE__ */ jsx75(IconLock, { size: 18 }) }),
-            hidden > 1 && /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-conn ss-g-cp-conn--faint", "aria-hidden": "true" })
+        hidden > 0 && /* @__PURE__ */ jsxs65("li", { className: "ss-g-cp-step ss-g-cp-step--hidden", children: [
+          /* @__PURE__ */ jsxs65("span", { className: "ss-g-cp-rail", children: [
+            /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-tile ss-g-cp-tile--locked", children: /* @__PURE__ */ jsx76(IconLock, { size: 18 }) }),
+            hidden > 1 && /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-conn ss-g-cp-conn--faint", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-step-text", children: /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-sub", children: s.nextClubHidden }) })
+          /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-step-text", children: /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-sub", children: s.nextClubHidden }) })
         ] }),
-        hidden > 1 && /* @__PURE__ */ jsxs63("li", { className: "ss-g-cp-step ss-g-cp-step--more", children: [
-          /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-rail", children: /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-tile ss-g-cp-tile--faint", children: /* @__PURE__ */ jsx75(IconLock, { size: 18 }) }) }),
-          /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-step-text", children: /* @__PURE__ */ jsx75("span", { className: "ss-g-cp-sub", children: s.moreClubs(hidden - 1) }) })
+        hidden > 1 && /* @__PURE__ */ jsxs65("li", { className: "ss-g-cp-step ss-g-cp-step--more", children: [
+          /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-rail", children: /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-tile ss-g-cp-tile--faint", children: /* @__PURE__ */ jsx76(IconLock, { size: 18 }) }) }),
+          /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-step-text", children: /* @__PURE__ */ jsx76("span", { className: "ss-g-cp-sub", children: s.moreClubs(hidden - 1) }) })
         ] })
       ] }),
-      isOver && /* @__PURE__ */ jsx75(
+      isOver && /* @__PURE__ */ jsx76(
         ResultCard,
         {
           tone: clientState?.solved ? "win" : clientState?.failed ? "lose" : "neutral",
@@ -6936,39 +6991,35 @@ function CareerPathGame({
         }
       )
     ] }),
-    !isOver && /* @__PURE__ */ jsxs63(FooterBar, { children: [
-      query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx75(
-        OptionList,
-        {
-          label: s.searchLabel,
-          options: filtered.map((p) => ({
-            key: p.id,
-            content: /* @__PURE__ */ jsxs63(Fragment13, { children: [
-              /* @__PURE__ */ jsx75(PlayerAvatar, { className: "ss-g-opt-av", name: p.name }),
-              /* @__PURE__ */ jsx75("span", { children: p.name })
-            ] })
-          })),
-          onPick: (k) => handleSelect(Number(k))
-        }
-      ),
-      /* @__PURE__ */ jsx75(
-        SearchField,
-        {
-          id: inputId,
-          label: s.searchLabel,
-          placeholder: s.searchPlaceholder,
-          value: query,
-          onChange: setQuery,
-          disabled: submitting
-        }
-      )
-    ] })
+    !isOver && /* @__PURE__ */ jsx76(FooterBar, { children: /* @__PURE__ */ jsx76(
+      AnswerTray,
+      {
+        id: inputId,
+        label: s.searchLabel,
+        placeholder: s.searchPlaceholder,
+        optionsLabel: s.searchLabel,
+        options: pool,
+        query,
+        onQuery: setQuery,
+        onPick: handleSelect,
+        disabled: submitting,
+        minQuery: 1
+      }
+    ) })
   ] });
 }
 
 // src/components/games/BeatTheGridGame.tsx
-import React, { useEffect as useEffect20, useId as useId4, useRef as useRef17, useState as useState32 } from "react";
-import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
+import React, { useEffect as useEffect21, useId as useId4, useRef as useRef18, useState as useState32 } from "react";
+
+// src/components/games/ui/OptionList.tsx
+import { jsx as jsx77 } from "react/jsx-runtime";
+function OptionList({ label, options, onPick }) {
+  return /* @__PURE__ */ jsx77("div", { className: "ss-g-opts", role: "listbox", "aria-label": label, children: options.map((o) => /* @__PURE__ */ jsx77("button", { type: "button", role: "option", "aria-selected": false, className: "ss-g-opt", onClick: () => onPick(o.key), children: o.content }, o.key)) });
+}
+
+// src/components/games/BeatTheGridGame.tsx
+import { Fragment as Fragment15, jsx as jsx78, jsxs as jsxs66 } from "react/jsx-runtime";
 function criterionIconKind(label, key) {
   const l = (key ?? label).toLowerCase();
   if (l.includes("app")) return "calendar";
@@ -6986,34 +7037,34 @@ function rowAbbrev(label, map, key) {
 function CriterionIcon({ kind }) {
   switch (kind) {
     case "calendar":
-      return /* @__PURE__ */ jsx76(IconCalendar, {});
+      return /* @__PURE__ */ jsx78(IconCalendar, {});
     case "ball":
-      return /* @__PURE__ */ jsx76(IconBall, {});
+      return /* @__PURE__ */ jsx78(IconBall, {});
     case "boot":
-      return /* @__PURE__ */ jsx76(IconBoot, {});
+      return /* @__PURE__ */ jsx78(IconBoot, {});
     case "gloves":
-      return /* @__PURE__ */ jsx76(IconGloves, {});
+      return /* @__PURE__ */ jsx78(IconGloves, {});
     case "shield":
-      return /* @__PURE__ */ jsx76(IconShield, {});
+      return /* @__PURE__ */ jsx78(IconShield, {});
     default:
-      return /* @__PURE__ */ jsx76(IconFlag, {});
+      return /* @__PURE__ */ jsx78(IconFlag, {});
   }
 }
 function HeaderVisual({ label, textKey: iKey, meta }) {
   if (!meta) {
-    return /* @__PURE__ */ jsx76(CriterionIcon, { kind: criterionIconKind(label, iKey) });
+    return /* @__PURE__ */ jsx78(CriterionIcon, { kind: criterionIconKind(label, iKey) });
   }
   switch (meta.kind) {
     case "club":
-      return /* @__PURE__ */ jsx76(CrestShield, { src: meta.imageUrl, name: label, size: 24 });
+      return /* @__PURE__ */ jsx78(CrestShield, { src: meta.imageUrl, name: label, size: 24 });
     case "coach":
-      return /* @__PURE__ */ jsx76(PlayerAvatar, { name: label, imagePath: meta.imageUrl, className: "ss-g-btg-coach-av" });
+      return /* @__PURE__ */ jsx78(PlayerAvatar, { name: label, imagePath: meta.imageUrl, className: "ss-g-btg-coach-av" });
     case "country":
-      return /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-hdr-flag", "aria-hidden": "true", children: nationalityFlag(meta.country ?? label) });
+      return /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-hdr-flag", "aria-hidden": "true", children: nationalityFlag(meta.country ?? label) });
     case "position":
-      return /* @__PURE__ */ jsx76(Fragment14, {});
+      return /* @__PURE__ */ jsx78(Fragment15, {});
     default:
-      return /* @__PURE__ */ jsx76(CriterionIcon, { kind: criterionIconKind(label, iKey) });
+      return /* @__PURE__ */ jsx78(CriterionIcon, { kind: criterionIconKind(label, iKey) });
   }
 }
 function parseClientState4(json) {
@@ -7050,19 +7101,19 @@ function SearchSheet({
   const s = ui.games.beatTheGrid;
   const [query, setQuery] = useState32("");
   const inputId = useId4();
-  const inputRef = useRef17(null);
-  useEffect20(() => {
+  const inputRef = useRef18(null);
+  useEffect21(() => {
     inputRef.current?.focus();
   }, [row, col]);
   const filtered = playerPool.filter(
     (p) => !alreadyFilledIds.has(p.id) && p.name.toLowerCase().includes(query.toLowerCase())
   );
-  return /* @__PURE__ */ jsxs64("div", { className: "ss-g-btg-sheet", "data-testid": "btg-search-sheet", children: [
-    /* @__PURE__ */ jsxs64("div", { className: "ss-g-btg-sheet-hdr", children: [
-      /* @__PURE__ */ jsx76(Chip, { variant: "neutral", children: rowLabel }),
-      /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-sheet-x", "aria-hidden": "true", children: /* @__PURE__ */ jsx76(IconClose, { size: 12 }) }),
-      /* @__PURE__ */ jsx76(Chip, { variant: "accent", children: colLabel }),
-      /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs66("div", { className: "ss-g-btg-sheet", "data-testid": "btg-search-sheet", children: [
+    /* @__PURE__ */ jsxs66("div", { className: "ss-g-btg-sheet-hdr", children: [
+      /* @__PURE__ */ jsx78(Chip, { variant: "neutral", children: rowLabel }),
+      /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-sheet-x", "aria-hidden": "true", children: /* @__PURE__ */ jsx78(IconClose, { size: 12 }) }),
+      /* @__PURE__ */ jsx78(Chip, { variant: "accent", children: colLabel }),
+      /* @__PURE__ */ jsx78(
         "button",
         {
           type: "button",
@@ -7070,12 +7121,12 @@ function SearchSheet({
           "data-testid": "btg-sheet-dismiss",
           "aria-label": s.closeSearch,
           onClick: onDismiss,
-          children: /* @__PURE__ */ jsx76(IconClose, {})
+          children: /* @__PURE__ */ jsx78(IconClose, {})
         }
       )
     ] }),
-    playerPool.length === 0 ? /* @__PURE__ */ jsx76("div", { className: "ss-g-btg-sheet-empty", children: s.emptyPool }) : /* @__PURE__ */ jsxs64(Fragment14, { children: [
-      /* @__PURE__ */ jsx76(
+    playerPool.length === 0 ? /* @__PURE__ */ jsx78("div", { className: "ss-g-btg-sheet-empty", children: s.emptyPool }) : /* @__PURE__ */ jsxs66(Fragment15, { children: [
+      /* @__PURE__ */ jsx78(
         SearchField,
         {
           id: inputId,
@@ -7087,16 +7138,16 @@ function SearchSheet({
           inputRef
         }
       ),
-      query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx76(
+      query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx78(
         OptionList,
         {
           label: s.searchLabel(rowLabel, colLabel),
           options: filtered.map((p) => ({
             key: p.id,
-            content: /* @__PURE__ */ jsxs64(Fragment14, { children: [
-              /* @__PURE__ */ jsx76(PlayerAvatar, { name: p.name, imagePath: p.imagePath, className: "ss-g-opt-av" }),
-              /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-result-name", children: p.name }),
-              /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-result-plus", "aria-hidden": "true", children: /* @__PURE__ */ jsx76(IconPlus, { size: 18 }) })
+            content: /* @__PURE__ */ jsxs66(Fragment15, { children: [
+              /* @__PURE__ */ jsx78(PlayerAvatar, { name: p.name, imagePath: p.imagePath, className: "ss-g-opt-av" }),
+              /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-result-name", children: p.name }),
+              /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-result-plus", "aria-hidden": "true", children: /* @__PURE__ */ jsx78(IconPlus, { size: 18 }) })
             ] })
           })),
           onPick: (k) => onPick(row, col, Number(k))
@@ -7134,9 +7185,9 @@ function BeatTheGridGame({
     onSubmit(JSON.stringify({ cells: newCells }));
   }
   if (!config) {
-    return /* @__PURE__ */ jsxs64("div", { className: "ss-g-screen", "data-testid": "game-screen-beat-the-grid", children: [
-      /* @__PURE__ */ jsx76(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
-      /* @__PURE__ */ jsx76("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+    return /* @__PURE__ */ jsxs66("div", { className: "ss-g-screen", "data-game": "beat-the-grid", "data-testid": "game-screen-beat-the-grid", children: [
+      /* @__PURE__ */ jsx78(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
+      /* @__PURE__ */ jsx78("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const rows = config.rows;
@@ -7149,20 +7200,20 @@ function BeatTheGridGame({
     (_, i) => i < correctCount ? "correct" : i < correctCount + wrongCount ? "wrong" : "todo"
   );
   const totalScore = clientState?.totalScore ?? result?.score ?? 0;
-  return /* @__PURE__ */ jsxs64("div", { className: "ss-g-screen", "data-testid": "game-screen-beat-the-grid", children: [
-    /* @__PURE__ */ jsx76(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
-    /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs66("div", { className: "ss-g-screen", "data-game": "beat-the-grid", "data-testid": "game-screen-beat-the-grid", children: [
+    /* @__PURE__ */ jsx78(GameHeader, { title, eyebrow: s.eyebrow, onBack, backLabel: ui.back }),
+    /* @__PURE__ */ jsx78(
       SegmentProgress,
       {
         segments,
         ariaLabel: s.progressAria(filledCells.length, total),
         leftLabel: s.filled(filledCells.length, total),
         rightLabel: s.toGo(Math.max(0, total - filledCells.length)),
-        right: /* @__PURE__ */ jsx76(Chip, { variant: "accent", children: `${totalScore} ${ui.games.unitPts}` })
+        right: /* @__PURE__ */ jsx78(Chip, { variant: "accent", children: `${totalScore} ${ui.games.unitPts}` })
       }
     ),
-    /* @__PURE__ */ jsxs64("div", { className: "ss-g-body", children: [
-      /* @__PURE__ */ jsxs64(
+    /* @__PURE__ */ jsxs66("div", { className: "ss-g-body", children: [
+      /* @__PURE__ */ jsxs66(
         "div",
         {
           className: activeCell !== null ? "ss-g-btg-grid ss-g-btg-grid--fit" : "ss-g-btg-grid",
@@ -7172,31 +7223,31 @@ function BeatTheGridGame({
           },
           role: "grid",
           children: [
-            /* @__PURE__ */ jsx76("div", { className: "ss-g-btg-corner" }),
+            /* @__PURE__ */ jsx78("div", { className: "ss-g-btg-corner" }),
             cols.map((col, colIdx) => {
               const colMeta = config.colsMeta?.[colIdx];
-              return /* @__PURE__ */ jsxs64("div", { className: "ss-g-btg-colhdr", "data-meta": colMeta ? "true" : void 0, children: [
-                /* @__PURE__ */ jsx76(HeaderVisual, { label: col, textKey: config.colsI18n?.[colIdx]?.key, meta: colMeta }),
-                /* @__PURE__ */ jsx76("span", { children: col })
+              return /* @__PURE__ */ jsxs66("div", { className: "ss-g-btg-colhdr", "data-meta": colMeta ? "true" : void 0, children: [
+                /* @__PURE__ */ jsx78(HeaderVisual, { label: col, textKey: config.colsI18n?.[colIdx]?.key, meta: colMeta }),
+                /* @__PURE__ */ jsx78("span", { children: col })
               ] }, col);
             }),
             rows.map((rowLabel, rowIdx) => {
               const rowMeta = config.rowsMeta?.[rowIdx];
               const abbr = rowAbbrev(rowLabel, s.rowAbbrev, config.rowsI18n?.[rowIdx]?.key);
-              const rowHeaderContent = rowMeta ? /* @__PURE__ */ jsxs64(Fragment14, { children: [
-                /* @__PURE__ */ jsx76(HeaderVisual, { label: rowLabel, textKey: config.rowsI18n?.[rowIdx]?.key, meta: rowMeta }),
-                /* @__PURE__ */ jsx76("span", { children: rowLabel })
-              ] }) : abbr === rowLabel ? /* @__PURE__ */ jsx76("span", { children: rowLabel }) : /* @__PURE__ */ jsxs64(Fragment14, { children: [
-                /* @__PURE__ */ jsx76("span", { "aria-hidden": "true", children: abbr }),
-                /* @__PURE__ */ jsx76("span", { className: "ss-g-sr", children: rowLabel })
+              const rowHeaderContent = rowMeta ? /* @__PURE__ */ jsxs66(Fragment15, { children: [
+                /* @__PURE__ */ jsx78(HeaderVisual, { label: rowLabel, textKey: config.rowsI18n?.[rowIdx]?.key, meta: rowMeta }),
+                /* @__PURE__ */ jsx78("span", { children: rowLabel })
+              ] }) : abbr === rowLabel ? /* @__PURE__ */ jsx78("span", { children: rowLabel }) : /* @__PURE__ */ jsxs66(Fragment15, { children: [
+                /* @__PURE__ */ jsx78("span", { "aria-hidden": "true", children: abbr }),
+                /* @__PURE__ */ jsx78("span", { className: "ss-g-sr", children: rowLabel })
               ] });
-              return /* @__PURE__ */ jsxs64(React.Fragment, { children: [
-                /* @__PURE__ */ jsx76("div", { className: "ss-g-btg-rowhdr", "data-meta": rowMeta ? "true" : void 0, children: rowHeaderContent }),
+              return /* @__PURE__ */ jsxs66(React.Fragment, { children: [
+                /* @__PURE__ */ jsx78("div", { className: "ss-g-btg-rowhdr", "data-meta": rowMeta ? "true" : void 0, children: rowHeaderContent }),
                 cols.map((colLabel, colIdx) => {
                   const filled = findCellResult(filledCells, rowIdx, colIdx);
                   const isActive = activeCell?.row === rowIdx && activeCell?.col === colIdx;
                   const state = filled ? filled.isCorrect ? "correct" : "wrong" : isActive ? "active" : "empty";
-                  return /* @__PURE__ */ jsx76(
+                  return /* @__PURE__ */ jsx78(
                     "button",
                     {
                       type: "button",
@@ -7207,20 +7258,20 @@ function BeatTheGridGame({
                       className: "ss-g-btg-cell",
                       disabled: isLocked2 || submitting,
                       onClick: () => handleCellClick(rowIdx, colIdx),
-                      children: filled ? /* @__PURE__ */ jsxs64(Fragment14, { children: [
-                        /* @__PURE__ */ jsx76(
+                      children: filled ? /* @__PURE__ */ jsxs66(Fragment15, { children: [
+                        /* @__PURE__ */ jsx78(
                           "span",
                           {
                             className: `ss-g-btg-badge ss-g-btg-badge--${filled.isCorrect ? "correct" : "wrong"}`,
                             role: "img",
                             "aria-label": filled.isCorrect ? s.correct : s.wrong,
-                            children: filled.isCorrect ? /* @__PURE__ */ jsx76(IconCheck, { size: 11 }) : /* @__PURE__ */ jsx76(IconClose, { size: 11 })
+                            children: filled.isCorrect ? /* @__PURE__ */ jsx78(IconCheck, { size: 11 }) : /* @__PURE__ */ jsx78(IconClose, { size: 11 })
                           }
                         ),
-                        /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-rarity", children: filled.rarityScore }),
+                        /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-rarity", children: filled.rarityScore }),
                         (() => {
                           const entry = playerPool.find((p) => p.id === filled.playerId);
-                          return /* @__PURE__ */ jsx76(
+                          return /* @__PURE__ */ jsx78(
                             PlayerAvatar,
                             {
                               name: entry?.name ?? "",
@@ -7229,8 +7280,8 @@ function BeatTheGridGame({
                             }
                           );
                         })(),
-                        /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-name", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) })
-                      ] }) : /* @__PURE__ */ jsx76("span", { className: "ss-g-btg-plus", "aria-hidden": "true", children: /* @__PURE__ */ jsx76(IconPlus, { size: 22 }) })
+                        /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-name", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) })
+                      ] }) : /* @__PURE__ */ jsx78("span", { className: "ss-g-btg-plus", "aria-hidden": "true", children: /* @__PURE__ */ jsx78(IconPlus, { size: 22 }) })
                     },
                     `cell-${rowIdx}-${colIdx}`
                   );
@@ -7240,7 +7291,7 @@ function BeatTheGridGame({
           ]
         }
       ),
-      isLocked2 && /* @__PURE__ */ jsx76(
+      isLocked2 && /* @__PURE__ */ jsx78(
         ResultCard,
         {
           tone: "neutral",
@@ -7252,7 +7303,7 @@ function BeatTheGridGame({
         }
       )
     ] }),
-    activeCell !== null && /* @__PURE__ */ jsx76("div", { className: "ss-g-btg-pin", children: /* @__PURE__ */ jsx76(
+    activeCell !== null && /* @__PURE__ */ jsx78("div", { className: "ss-g-btg-pin", children: /* @__PURE__ */ jsx78(
       SearchSheet,
       {
         row: activeCell.row,
@@ -7274,18 +7325,18 @@ function BeatTheGridGame({
 import { useState as useState33, useId as useId5 } from "react";
 
 // src/components/games/ui/PitchSvg.tsx
-import { Fragment as Fragment15, jsx as jsx77, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx79, jsxs as jsxs67 } from "react/jsx-runtime";
 function PitchSvg({ variant }) {
-  return /* @__PURE__ */ jsxs65("svg", { className: "ss-g-pitch-svg", viewBox: variant === "full" ? "0 0 100 150" : "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx77("rect", { x: "4", y: "4", width: "92", height: variant === "full" ? 142 : 92, fill: "none" }),
-    variant === "full" ? /* @__PURE__ */ jsxs65(Fragment15, { children: [
-      /* @__PURE__ */ jsx77("line", { x1: "4", y1: "75", x2: "96", y2: "75" }),
-      /* @__PURE__ */ jsx77("circle", { cx: "50", cy: "75", r: "12", fill: "none" }),
-      /* @__PURE__ */ jsx77("rect", { x: "26", y: "4", width: "48", height: "20", fill: "none" }),
-      /* @__PURE__ */ jsx77("rect", { x: "26", y: "126", width: "48", height: "20", fill: "none" })
-    ] }) : /* @__PURE__ */ jsxs65(Fragment15, { children: [
-      /* @__PURE__ */ jsx77("path", { d: "M38 4a12 12 0 0 0 24 0", fill: "none" }),
-      /* @__PURE__ */ jsx77("rect", { x: "26", y: "76", width: "48", height: "20", fill: "none" })
+  return /* @__PURE__ */ jsxs67("svg", { className: "ss-g-pitch-svg", viewBox: variant === "full" ? "0 0 100 150" : "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx79("rect", { x: "4", y: "4", width: "92", height: variant === "full" ? 142 : 92, fill: "none" }),
+    variant === "full" ? /* @__PURE__ */ jsxs67(Fragment16, { children: [
+      /* @__PURE__ */ jsx79("line", { x1: "4", y1: "75", x2: "96", y2: "75" }),
+      /* @__PURE__ */ jsx79("circle", { cx: "50", cy: "75", r: "12", fill: "none" }),
+      /* @__PURE__ */ jsx79("rect", { x: "26", y: "4", width: "48", height: "20", fill: "none" }),
+      /* @__PURE__ */ jsx79("rect", { x: "26", y: "126", width: "48", height: "20", fill: "none" })
+    ] }) : /* @__PURE__ */ jsxs67(Fragment16, { children: [
+      /* @__PURE__ */ jsx79("path", { d: "M38 4a12 12 0 0 0 24 0", fill: "none" }),
+      /* @__PURE__ */ jsx79("rect", { x: "26", y: "76", width: "48", height: "20", fill: "none" })
     ] })
   ] });
 }
@@ -7341,7 +7392,7 @@ function positionsBySlot(formation, rowsAttackFirst) {
 }
 
 // src/components/games/GuessTheXiGame.tsx
-import { Fragment as Fragment16, jsx as jsx78, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx80, jsxs as jsxs68 } from "react/jsx-runtime";
 var MAX_GUESSES2 = 3;
 function parseClientState5(json) {
   if (!json) return null;
@@ -7391,30 +7442,31 @@ function GuessTheXiGame({
   const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
   const guessesLeft = Math.max(0, MAX_GUESSES2 - (clientState?.guessesUsed ?? 0));
   const teamName = (id) => config?.teamPool.find((tm) => tm.teamId === id)?.teamName ?? `#${id}`;
-  return /* @__PURE__ */ jsxs66("div", { className: "ss-g-screen ss-g-gxi", "data-testid": "game-screen-guess-the-xi", children: [
-    /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen ss-g-gxi", "data-game": "guess-the-xi", "data-testid": "game-screen-guess-the-xi", children: [
+    /* @__PURE__ */ jsx80(
       GameHeader,
       {
         title: gameTitle({ gameId: "guess-the-xi" }, ui.games.titles),
         eyebrow: config?.poolLabel,
-        right: formation ? /* @__PURE__ */ jsx78(Chip, { variant: "accent", children: formation }) : void 0,
+        right: formation ? /* @__PURE__ */ jsx80(Chip, { variant: "accent", children: formation }) : void 0,
         onBack,
         backLabel: ui.back
       }
     ),
-    !config && /* @__PURE__ */ jsx78("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
-    config && /* @__PURE__ */ jsxs66(Fragment16, { children: [
-      /* @__PURE__ */ jsxs66("div", { className: "ss-g-body", children: [
-        rows.length > 0 && /* @__PURE__ */ jsxs66("div", { className: "ss-g-gxi-pitch", role: "group", "aria-label": t.pitchLabel, children: [
-          /* @__PURE__ */ jsx78(PitchSvg, { variant: "full" }),
-          /* @__PURE__ */ jsx78("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ jsx78("div", { className: "ss-g-gxi-row", children: row.map((pos, c) => {
+    !config && /* @__PURE__ */ jsx80("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading }),
+    config && /* @__PURE__ */ jsxs68(Fragment17, { children: [
+      /* @__PURE__ */ jsxs68("div", { className: "ss-g-body", children: [
+        !isOver && /* @__PURE__ */ jsx80(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed: clientState?.guessHistory.length ?? 0, ui }),
+        rows.length > 0 && /* @__PURE__ */ jsxs68("div", { className: "ss-g-gxi-pitch", role: "group", "aria-label": t.pitchLabel, children: [
+          /* @__PURE__ */ jsx80(PitchSvg, { variant: "full" }),
+          /* @__PURE__ */ jsx80("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ jsx80("div", { className: "ss-g-gxi-row", children: row.map((pos, c) => {
             const posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
             const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
             const lineupEntry = pos.slot ? lineupBySlot.get(pos.slot) : void 0;
             const flag = nationalityFlag(pos.nationality);
             if (lineupEntry) {
-              return /* @__PURE__ */ jsxs66("div", { className: "ss-g-gxi-node", "data-revealed": "true", children: [
-                /* @__PURE__ */ jsx78(
+              return /* @__PURE__ */ jsxs68("div", { className: "ss-g-gxi-node", "data-revealed": "true", children: [
+                /* @__PURE__ */ jsx80(
                   PlayerAvatar,
                   {
                     name: lineupEntry.name,
@@ -7422,11 +7474,11 @@ function GuessTheXiGame({
                     className: "ss-g-gxi-disc ss-g-gxi-disc--photo"
                   }
                 ),
-                /* @__PURE__ */ jsx78("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(lineupEntry.name).last })
+                /* @__PURE__ */ jsx80("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(lineupEntry.name).last })
               ] }, `${pos.slot}-${c}`);
             }
-            return /* @__PURE__ */ jsxs66("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
-              /* @__PURE__ */ jsx78(
+            return /* @__PURE__ */ jsxs68("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
+              /* @__PURE__ */ jsx80(
                 "span",
                 {
                   className: "ss-g-gxi-disc",
@@ -7437,22 +7489,22 @@ function GuessTheXiGame({
                   children: flag
                 }
               ),
-              name ? /* @__PURE__ */ jsx78("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ jsx78("span", { className: "ss-g-gxi-pos", children: posLabel })
+              name ? /* @__PURE__ */ jsx80("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ jsx80("span", { className: "ss-g-gxi-pos", children: posLabel })
             ] }, `${pos.slot}-${c}`);
           }) }, r)) })
         ] }),
-        !isOver && wrongGuesses.length > 0 && /* @__PURE__ */ jsxs66("div", { className: "ss-g-gxi-wrong", children: [
-          /* @__PURE__ */ jsx78("span", { className: "ss-g-gxi-wrong-l", children: t.notThem }),
+        !isOver && wrongGuesses.length > 0 && /* @__PURE__ */ jsxs68("div", { className: "ss-g-gxi-wrong", children: [
+          /* @__PURE__ */ jsx80("span", { className: "ss-g-gxi-wrong-l", children: t.notThem }),
           wrongGuesses.map((g) => {
             const crestUrl = config?.teamPool.find((tm) => tm.teamId === g.teamId)?.crestUrl;
-            return /* @__PURE__ */ jsxs66("span", { className: "ss-g-gxi-wrong-chip", children: [
-              /* @__PURE__ */ jsx78(CrestShield, { src: crestUrl, name: teamName(g.teamId), size: 18 }),
-              /* @__PURE__ */ jsx78("s", { children: teamName(g.teamId) })
+            return /* @__PURE__ */ jsxs68("span", { className: "ss-g-gxi-wrong-chip", children: [
+              /* @__PURE__ */ jsx80(CrestShield, { src: crestUrl, name: teamName(g.teamId), size: 18 }),
+              /* @__PURE__ */ jsx80("s", { children: teamName(g.teamId) })
             ] }, g.teamId);
           })
         ] }),
-        isOver && /* @__PURE__ */ jsxs66(Fragment16, { children: [
-          /* @__PURE__ */ jsx78(
+        isOver && /* @__PURE__ */ jsxs68(Fragment17, { children: [
+          /* @__PURE__ */ jsx80(
             ResultCard,
             {
               tone: solved ? "win" : failed ? "lose" : "neutral",
@@ -7463,29 +7515,29 @@ function GuessTheXiGame({
               ui
             }
           ),
-          (solved || failed) && clientState?.answer && /* @__PURE__ */ jsxs66("div", { className: "ss-g-gxi-answer", "data-testid": "gxi-answer-reveal", children: [
-            /* @__PURE__ */ jsx78("span", { className: "ss-g-gxi-answer-label", children: t.theAnswer }),
-            /* @__PURE__ */ jsx78(CrestShield, { src: clientState.answer.crestUrl, name: clientState.answer.teamName, size: 32 }),
-            /* @__PURE__ */ jsx78("span", { className: "ss-g-gxi-answer-name", children: clientState.answer.teamName })
+          (solved || failed) && clientState?.answer && /* @__PURE__ */ jsxs68("div", { className: "ss-g-gxi-answer", "data-testid": "gxi-answer-reveal", children: [
+            /* @__PURE__ */ jsx80("span", { className: "ss-g-gxi-answer-label", children: t.theAnswer }),
+            /* @__PURE__ */ jsx80(CrestShield, { src: clientState.answer.crestUrl, name: clientState.answer.teamName, size: 32 }),
+            /* @__PURE__ */ jsx80("span", { className: "ss-g-gxi-answer-name", children: clientState.answer.teamName })
           ] })
         ] })
       ] }),
-      !isOver && /* @__PURE__ */ jsxs66(FooterBar, { children: [
-        query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx78(
+      !isOver && /* @__PURE__ */ jsxs68(FooterBar, { children: [
+        query.length > 0 && filtered.length > 0 && /* @__PURE__ */ jsx80(
           OptionList,
           {
             label: t.optionsLabel,
             options: filtered.map((tm) => ({
               key: tm.teamId,
-              content: /* @__PURE__ */ jsxs66(Fragment16, { children: [
-                /* @__PURE__ */ jsx78(CrestShield, { src: tm.crestUrl, name: tm.teamName, size: 28 }),
-                /* @__PURE__ */ jsx78("span", { children: tm.teamName })
+              content: /* @__PURE__ */ jsxs68(Fragment17, { children: [
+                /* @__PURE__ */ jsx80(CrestShield, { src: tm.crestUrl, name: tm.teamName, size: 28 }),
+                /* @__PURE__ */ jsx80("span", { children: tm.teamName })
               ] })
             })),
             onPick: (k) => handlePick(Number(k))
           }
         ),
-        /* @__PURE__ */ jsx78(
+        /* @__PURE__ */ jsx80(
           SearchField,
           {
             id: inputId,
@@ -7503,7 +7555,7 @@ function GuessTheXiGame({
 
 // src/components/games/DailyQuizGame.tsx
 import { useState as useState34 } from "react";
-import { Fragment as Fragment17, jsx as jsx79, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx81, jsxs as jsxs69 } from "react/jsx-runtime";
 function parseClientState6(json) {
   if (!json) return null;
   try {
@@ -7524,13 +7576,13 @@ function OptionName({ text }) {
   const tokens = base.split(/\s+/).filter(Boolean);
   const isPlainName = tokens.length >= 1 && tokens.length <= 4 && tokens.every((t) => NAME_TOKEN.test(t));
   if (!isPlainName || base === "") {
-    return /* @__PURE__ */ jsx79("span", { className: "ss-g-dq-opt-name", children: /* @__PURE__ */ jsx79("span", { className: "ss-g-dq-opt-full", children: text }) });
+    return /* @__PURE__ */ jsx81("span", { className: "ss-g-dq-opt-name", children: /* @__PURE__ */ jsx81("span", { className: "ss-g-dq-opt-full", children: text }) });
   }
   const { first, last } = splitName(base);
-  return /* @__PURE__ */ jsxs67("span", { className: "ss-g-dq-opt-name", children: [
-    first && /* @__PURE__ */ jsx79("span", { className: "ss-g-dq-opt-first", children: first }),
-    /* @__PURE__ */ jsx79("span", { className: "ss-g-dq-opt-last", children: last }),
-    suffix && /* @__PURE__ */ jsx79("span", { className: "ss-g-dq-opt-suffix", children: suffix })
+  return /* @__PURE__ */ jsxs69("span", { className: "ss-g-dq-opt-name", children: [
+    first && /* @__PURE__ */ jsx81("span", { className: "ss-g-dq-opt-first", children: first }),
+    /* @__PURE__ */ jsx81("span", { className: "ss-g-dq-opt-last", children: last }),
+    suffix && /* @__PURE__ */ jsx81("span", { className: "ss-g-dq-opt-suffix", children: suffix })
   ] });
 }
 function DailyQuizGame({
@@ -7549,9 +7601,9 @@ function DailyQuizGame({
   const results = clientState?.results ?? [];
   const isRevealed = results.length > 0 || result?.alreadyPlayed === true;
   if (!config) {
-    return /* @__PURE__ */ jsxs67("div", { className: "ss-g-screen", "data-testid": "game-screen-daily-quiz", children: [
-      /* @__PURE__ */ jsx79(GameHeader, { title, onBack, backLabel: ui.back }),
-      /* @__PURE__ */ jsx79("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+    return /* @__PURE__ */ jsxs69("div", { className: "ss-g-screen", "data-game": "daily-quiz", "data-testid": "game-screen-daily-quiz", children: [
+      /* @__PURE__ */ jsx81(GameHeader, { title, onBack, backLabel: ui.back }),
+      /* @__PURE__ */ jsx81("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const questions = config.questions;
@@ -7586,11 +7638,11 @@ function DailyQuizGame({
       return r.isCorrect ? "correct" : "wrong";
     });
     const correctCount = results.filter((r) => r.isCorrect).length;
-    return /* @__PURE__ */ jsxs67("div", { className: "ss-g-screen", "data-testid": "game-screen-daily-quiz", children: [
-      /* @__PURE__ */ jsx79(GameHeader, { title, eyebrow: s.results, onBack, backLabel: ui.back }),
-      /* @__PURE__ */ jsx79(SegmentProgress, { segments: segments2, ariaLabel: s.results }),
-      /* @__PURE__ */ jsxs67("div", { className: "ss-g-body", children: [
-        /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsxs69("div", { className: "ss-g-screen", "data-game": "daily-quiz", "data-testid": "game-screen-daily-quiz", children: [
+      /* @__PURE__ */ jsx81(GameHeader, { title, eyebrow: s.results, onBack, backLabel: ui.back }),
+      /* @__PURE__ */ jsx81(SegmentProgress, { segments: segments2, ariaLabel: s.results }),
+      /* @__PURE__ */ jsxs69("div", { className: "ss-g-body", children: [
+        /* @__PURE__ */ jsx81(
           ResultCard,
           {
             tone: "neutral",
@@ -7603,15 +7655,15 @@ function DailyQuizGame({
         questions.map((q) => {
           const r = findResult(results, q.index);
           const picked = selections.get(q.index);
-          return /* @__PURE__ */ jsxs67("div", { className: "ss-g-dq-rq", children: [
-            /* @__PURE__ */ jsx79("div", { className: "ss-g-dq-rq-stem", children: q.stem }),
-            r && /* @__PURE__ */ jsx79("div", { className: "ss-g-dq-rq-opts", children: q.options.map((opt, optIdx) => {
+          return /* @__PURE__ */ jsxs69("div", { className: "ss-g-dq-rq", children: [
+            /* @__PURE__ */ jsx81("div", { className: "ss-g-dq-rq-stem", children: q.stem }),
+            r && /* @__PURE__ */ jsx81("div", { className: "ss-g-dq-rq-opts", children: q.options.map((opt, optIdx) => {
               let cls = "ss-g-dq-rq-opt";
               if (optIdx === r.correctOptionIndex) cls += " ss-g-dq-rq-opt--correct";
               else if (optIdx === picked && !r.isCorrect) cls += " ss-g-dq-rq-opt--wrong";
-              return /* @__PURE__ */ jsx79("span", { className: cls, children: opt }, optIdx);
+              return /* @__PURE__ */ jsx81("span", { className: cls, children: opt }, optIdx);
             }) }),
-            r?.revealText && /* @__PURE__ */ jsx79("div", { className: "ss-g-dq-why", children: r.revealText })
+            r?.revealText && /* @__PURE__ */ jsx81("div", { className: "ss-g-dq-why", children: r.revealText })
           ] }, q.index);
         })
       ] })
@@ -7619,16 +7671,16 @@ function DailyQuizGame({
   }
   const segments = questions.map((_, i) => i < page ? "done" : i === page ? "current" : "todo");
   const selectedIdx = current ? selections.get(current.index) : void 0;
-  return /* @__PURE__ */ jsxs67("div", { className: "ss-g-screen", "data-testid": "game-screen-daily-quiz", children: [
-    /* @__PURE__ */ jsx79(GameHeader, { title, eyebrow: s.questionOf(page + 1, total), onBack, backLabel: ui.back }),
-    /* @__PURE__ */ jsx79(SegmentProgress, { segments, ariaLabel: s.progressAria(page + 1, total) }),
-    /* @__PURE__ */ jsx79("div", { className: "ss-g-body", children: current && /* @__PURE__ */ jsxs67(Fragment17, { children: [
-      /* @__PURE__ */ jsx79("h3", { className: "ss-g-dq-stem", children: current.stem }),
-      /* @__PURE__ */ jsx79("div", { className: "ss-g-dq-opts", children: current.options.map((opt, optIdx) => {
+  return /* @__PURE__ */ jsxs69("div", { className: "ss-g-screen", "data-game": "daily-quiz", "data-testid": "game-screen-daily-quiz", children: [
+    /* @__PURE__ */ jsx81(GameHeader, { title, eyebrow: s.questionOf(page + 1, total), onBack, backLabel: ui.back }),
+    /* @__PURE__ */ jsx81(SegmentProgress, { segments, ariaLabel: s.progressAria(page + 1, total) }),
+    /* @__PURE__ */ jsx81("div", { className: "ss-g-body", children: current && /* @__PURE__ */ jsxs69(Fragment18, { children: [
+      /* @__PURE__ */ jsx81("h3", { className: "ss-g-dq-stem", children: current.stem }),
+      /* @__PURE__ */ jsx81("div", { className: "ss-g-dq-opts", children: current.options.map((opt, optIdx) => {
         const selected = optIdx === selectedIdx;
         const imagePath = current.optionImagePaths?.[optIdx] ?? void 0;
         const playerName = opt;
-        return /* @__PURE__ */ jsxs67(
+        return /* @__PURE__ */ jsxs69(
           "button",
           {
             type: "button",
@@ -7637,25 +7689,25 @@ function DailyQuizGame({
             disabled: submitting,
             onClick: () => handleSelect(current.index, optIdx),
             children: [
-              current.optionImagePaths && /* @__PURE__ */ jsx79(PlayerAvatar, { name: playerName, imagePath, className: "ss-g-dq-opt-av" }),
-              /* @__PURE__ */ jsx79("span", { className: "ss-g-dq-badge", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx79(IconCheck, {}) : String.fromCharCode(65 + optIdx) }),
-              /* @__PURE__ */ jsx79(OptionName, { text: opt })
+              current.optionImagePaths && /* @__PURE__ */ jsx81(PlayerAvatar, { name: playerName, imagePath, className: "ss-g-dq-opt-av" }),
+              /* @__PURE__ */ jsx81("span", { className: "ss-g-dq-badge", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx81(IconCheck, {}) : String.fromCharCode(65 + optIdx) }),
+              /* @__PURE__ */ jsx81(OptionName, { text: opt })
             ]
           },
           optIdx
         );
       }) })
     ] }) }),
-    /* @__PURE__ */ jsx79(FooterBar, { children: /* @__PURE__ */ jsxs67("div", { className: "ss-g-dq-nav", children: [
-      page > 0 && /* @__PURE__ */ jsx79(GameButton, { variant: "outline", onClick: goPrev, disabled: submitting, children: s.previous }),
-      isLast ? /* @__PURE__ */ jsx79(GameButton, { variant: "primary", block: true, onClick: handleSubmit, disabled: !currentAnswered || !allAnswered || submitting, children: submitting ? s.submitting : s.submit }) : /* @__PURE__ */ jsx79(GameButton, { variant: "primary", block: true, onClick: goNext, disabled: !currentAnswered || submitting, children: s.next })
+    /* @__PURE__ */ jsx81(FooterBar, { children: /* @__PURE__ */ jsxs69("div", { className: "ss-g-dq-nav", children: [
+      page > 0 && /* @__PURE__ */ jsx81(GameButton, { variant: "outline", onClick: goPrev, disabled: submitting, children: s.previous }),
+      isLast ? /* @__PURE__ */ jsx81(GameButton, { variant: "primary", block: true, onClick: handleSubmit, disabled: !currentAnswered || !allAnswered || submitting, children: submitting ? s.submitting : s.submit }) : /* @__PURE__ */ jsx81(GameButton, { variant: "primary", block: true, onClick: goNext, disabled: !currentAnswered || submitting, children: s.next })
     ] }) })
   ] });
 }
 
 // src/components/games/MatchdayPredictorGame.tsx
 import { useId as useId6, useState as useState35 } from "react";
-import { jsx as jsx80, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs70 } from "react/jsx-runtime";
 var SCORER_SEARCH_THRESHOLD = 9;
 function parseClientState7(json) {
   if (!json) return null;
@@ -7673,7 +7725,7 @@ function isLocked(kickoffUtc) {
   }
 }
 function IconMinus() {
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx82(
     "svg",
     {
       width: 18,
@@ -7684,20 +7736,20 @@ function IconMinus() {
       strokeWidth: 2.2,
       strokeLinecap: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx80("path", { d: "M5 12h14" })
+      children: /* @__PURE__ */ jsx82("path", { d: "M5 12h14" })
     }
   );
 }
 function TeamBadge({ team, label }) {
-  return /* @__PURE__ */ jsxs68("div", { className: "ss-g-mp-team", children: [
-    /* @__PURE__ */ jsx80(CrestShield, { name: team.name, size: 44 }),
-    /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-team-name", children: team.name }),
-    /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-team-side", children: label })
+  return /* @__PURE__ */ jsxs70("div", { className: "ss-g-mp-team", children: [
+    /* @__PURE__ */ jsx82(CrestShield, { name: team.name, size: 44 }),
+    /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-team-name", children: team.name }),
+    /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-team-side", children: label })
   ] });
 }
 function ScoreCard({ home, away, h, a, t, edit }) {
-  const col = (side, team, value) => /* @__PURE__ */ jsxs68("div", { className: "ss-g-mp-col", children: [
-    edit && /* @__PURE__ */ jsx80(
+  const col = (side, team, value) => /* @__PURE__ */ jsxs70("div", { className: "ss-g-mp-col", children: [
+    edit && /* @__PURE__ */ jsx82(
       "button",
       {
         type: "button",
@@ -7705,11 +7757,11 @@ function ScoreCard({ home, away, h, a, t, edit }) {
         "aria-label": t.goalsUp(team.name),
         disabled: edit.disabled,
         onClick: () => edit.onStep(side, 1),
-        children: /* @__PURE__ */ jsx80(IconPlus, { size: 18 })
+        children: /* @__PURE__ */ jsx82(IconPlus, { size: 18 })
       }
     ),
-    /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-digit", "data-testid": "mp-digit", "data-active": edit ? String(edit.active === side) : "false", children: value }),
-    edit && /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-digit", "data-testid": "mp-digit", "data-active": edit ? String(edit.active === side) : "false", children: value }),
+    edit && /* @__PURE__ */ jsx82(
       "button",
       {
         type: "button",
@@ -7717,27 +7769,27 @@ function ScoreCard({ home, away, h, a, t, edit }) {
         "aria-label": t.goalsDown(team.name),
         disabled: edit.disabled || value <= 0,
         onClick: () => edit.onStep(side, -1),
-        children: /* @__PURE__ */ jsx80(IconMinus, {})
+        children: /* @__PURE__ */ jsx82(IconMinus, {})
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs68("div", { className: "ss-g-mp-card", children: [
-    /* @__PURE__ */ jsx80(TeamBadge, { team: home, label: t.home }),
-    /* @__PURE__ */ jsxs68("div", { className: "ss-g-mp-scores", children: [
+  return /* @__PURE__ */ jsxs70("div", { className: "ss-g-mp-card", children: [
+    /* @__PURE__ */ jsx82(TeamBadge, { team: home, label: t.home }),
+    /* @__PURE__ */ jsxs70("div", { className: "ss-g-mp-scores", children: [
       col("home", home, h),
-      /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-dash", "aria-hidden": "true", children: "\u2013" }),
+      /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-dash", "aria-hidden": "true", children: "\u2013" }),
       col("away", away, a)
     ] }),
-    /* @__PURE__ */ jsx80(TeamBadge, { team: away, label: t.away })
+    /* @__PURE__ */ jsx82(TeamBadge, { team: away, label: t.away })
   ] });
 }
 function OutcomeRow({ label, ok, detail, t }) {
-  return /* @__PURE__ */ jsxs68("li", { className: "ss-g-mp-row", "data-testid": "mp-row", "data-ok": String(ok), children: [
-    /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-row-k", children: label }),
-    /* @__PURE__ */ jsxs68("span", { className: "ss-g-mp-row-v", children: [
-      ok ? /* @__PURE__ */ jsx80(IconCheck, {}) : /* @__PURE__ */ jsx80(IconClose, { size: 14 }),
-      /* @__PURE__ */ jsx80("span", { className: "ss-g-sr", children: ok ? t.correct : t.incorrect }),
-      detail ? /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-row-d", children: detail }) : null
+  return /* @__PURE__ */ jsxs70("li", { className: "ss-g-mp-row", "data-testid": "mp-row", "data-ok": String(ok), children: [
+    /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-row-k", children: label }),
+    /* @__PURE__ */ jsxs70("span", { className: "ss-g-mp-row-v", children: [
+      ok ? /* @__PURE__ */ jsx82(IconCheck, {}) : /* @__PURE__ */ jsx82(IconClose, { size: 14 }),
+      /* @__PURE__ */ jsx82("span", { className: "ss-g-sr", children: ok ? t.correct : t.incorrect }),
+      detail ? /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-row-d", children: detail }) : null
     ] })
   ] });
 }
@@ -7758,12 +7810,12 @@ function MatchdayPredictorGame({
   const searchId = useId6();
   const clientState = parseClientState7(result?.clientStateJson);
   const alreadyPlayed = result?.alreadyPlayed === true;
-  const header = /* @__PURE__ */ jsx80(
+  const header = /* @__PURE__ */ jsx82(
     GameHeader,
     {
       title: gameTitle({ gameId: "matchday-predictor" }, ui.games.titles),
       eyebrow: config ? t.eyebrow(config.homeTeam.name, config.awayTeam.name) : void 0,
-      right: config ? /* @__PURE__ */ jsx80(Chip, { icon: /* @__PURE__ */ jsx80(IconLock, {}), children: ui.games.formatDayTime(config.kickoffUtc) }) : void 0,
+      right: config ? /* @__PURE__ */ jsx82(Chip, { icon: /* @__PURE__ */ jsx82(IconLock, {}), children: ui.games.formatDayTime(config.kickoffUtc) }) : void 0,
       onBack,
       backLabel: ui.back
     }
@@ -7771,10 +7823,10 @@ function MatchdayPredictorGame({
   if (alreadyPlayed && clientState) {
     if (!clientState.graded) {
       const scorer = config?.scorerPool.find((p) => p.playerId === clientState.predictedFirstScorerPlayerId) ?? null;
-      return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen", "data-testid": "game-screen-matchday-predictor", children: [
+      return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
         header,
-        /* @__PURE__ */ jsxs68("div", { className: "ss-g-body", children: [
-          config && /* @__PURE__ */ jsx80(
+        /* @__PURE__ */ jsxs70("div", { className: "ss-g-body", children: [
+          config && /* @__PURE__ */ jsx82(
             ScoreCard,
             {
               home: config.homeTeam,
@@ -7784,7 +7836,7 @@ function MatchdayPredictorGame({
               t
             }
           ),
-          /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx82(
             ResultCard,
             {
               tone: "neutral",
@@ -7801,28 +7853,28 @@ function MatchdayPredictorGame({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx80(FooterBar, { children: /* @__PURE__ */ jsx80("p", { className: "ss-g-mp-fun", children: t.forFun }) })
+        /* @__PURE__ */ jsx82(FooterBar, { children: /* @__PURE__ */ jsx82("p", { className: "ss-g-mp-fun", children: t.forFun }) })
       ] });
     }
     const r = clientState.result;
-    return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen", "data-testid": "game-screen-matchday-predictor", children: [
+    return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
       header,
-      /* @__PURE__ */ jsxs68("div", { className: "ss-g-body", children: [
-        config && /* @__PURE__ */ jsx80(ScoreCard, { home: config.homeTeam, away: config.awayTeam, h: r.homeScore, a: r.awayScore, t }),
-        /* @__PURE__ */ jsx80(ResultCard, { tone: "neutral", title: t.fullTime(r.homeScore, r.awayScore), onBack, ui }),
-        /* @__PURE__ */ jsxs68("ul", { className: "ss-g-mp-rows", children: [
-          /* @__PURE__ */ jsx80(OutcomeRow, { label: t.exactScore, ok: clientState.exactScoreCorrect, t }),
-          /* @__PURE__ */ jsx80(OutcomeRow, { label: t.outcome, ok: clientState.outcomeCorrect, t }),
-          !clientState.firstScorerVoid && /* @__PURE__ */ jsx80(OutcomeRow, { label: t.firstScorerRow, ok: clientState.firstScorerCorrect, detail: r.firstScorerName, t })
+      /* @__PURE__ */ jsxs70("div", { className: "ss-g-body", children: [
+        config && /* @__PURE__ */ jsx82(ScoreCard, { home: config.homeTeam, away: config.awayTeam, h: r.homeScore, a: r.awayScore, t }),
+        /* @__PURE__ */ jsx82(ResultCard, { tone: "neutral", title: t.fullTime(r.homeScore, r.awayScore), onBack, ui }),
+        /* @__PURE__ */ jsxs70("ul", { className: "ss-g-mp-rows", children: [
+          /* @__PURE__ */ jsx82(OutcomeRow, { label: t.exactScore, ok: clientState.exactScoreCorrect, t }),
+          /* @__PURE__ */ jsx82(OutcomeRow, { label: t.outcome, ok: clientState.outcomeCorrect, t }),
+          !clientState.firstScorerVoid && /* @__PURE__ */ jsx82(OutcomeRow, { label: t.firstScorerRow, ok: clientState.firstScorerCorrect, detail: r.firstScorerName, t })
         ] })
       ] }),
-      /* @__PURE__ */ jsx80(FooterBar, { children: /* @__PURE__ */ jsx80("p", { className: "ss-g-mp-fun", children: t.forFun }) })
+      /* @__PURE__ */ jsx82(FooterBar, { children: /* @__PURE__ */ jsx82("p", { className: "ss-g-mp-fun", children: t.forFun }) })
     ] });
   }
   if (!config) {
-    return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen", "data-testid": "game-screen-matchday-predictor", children: [
+    return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
       header,
-      /* @__PURE__ */ jsx80("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+      /* @__PURE__ */ jsx82("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const locked = isLocked(config.kickoffUtc);
@@ -7846,10 +7898,10 @@ function MatchdayPredictorGame({
   const showSearch = pool.length > SCORER_SEARCH_THRESHOLD;
   const q = query.trim().toLowerCase();
   const visible = showSearch && q ? pool.filter((p) => p.playerName.toLowerCase().includes(q)) : pool;
-  return /* @__PURE__ */ jsxs68("div", { className: "ss-g-screen", "data-testid": "game-screen-matchday-predictor", children: [
+  return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen", "data-game": "matchday-predictor", "data-testid": "game-screen-matchday-predictor", children: [
     header,
-    /* @__PURE__ */ jsxs68("div", { className: "ss-g-body", children: [
-      /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsxs70("div", { className: "ss-g-body", children: [
+      /* @__PURE__ */ jsx82(
         ScoreCard,
         {
           home: config.homeTeam,
@@ -7860,12 +7912,12 @@ function MatchdayPredictorGame({
           edit: { disabled, active: lastEdited, onStep: step }
         }
       ),
-      pool.length > 0 && /* @__PURE__ */ jsxs68("section", { className: "ss-g-mp-scorer", children: [
-        /* @__PURE__ */ jsxs68("div", { className: "ss-g-mp-sec-head", children: [
-          /* @__PURE__ */ jsx80("h3", { children: t.firstScorer }),
-          /* @__PURE__ */ jsx80("span", { children: t.optional })
+      pool.length > 0 && /* @__PURE__ */ jsxs70("section", { className: "ss-g-mp-scorer", children: [
+        /* @__PURE__ */ jsxs70("div", { className: "ss-g-mp-sec-head", children: [
+          /* @__PURE__ */ jsx82("h3", { children: t.firstScorer }),
+          /* @__PURE__ */ jsx82("span", { children: t.optional })
         ] }),
-        showSearch && /* @__PURE__ */ jsx80(
+        showSearch && /* @__PURE__ */ jsx82(
           SearchField,
           {
             id: searchId,
@@ -7877,9 +7929,9 @@ function MatchdayPredictorGame({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx80("div", { className: "ss-g-mp-grid", children: visible.map((p) => {
+        /* @__PURE__ */ jsx82("div", { className: "ss-g-mp-grid", children: visible.map((p) => {
           const selected = firstScorerPlayerId === p.playerId;
-          return /* @__PURE__ */ jsxs68(
+          return /* @__PURE__ */ jsxs70(
             "button",
             {
               type: "button",
@@ -7889,15 +7941,15 @@ function MatchdayPredictorGame({
               disabled,
               onClick: () => setFirstScorerPlayerId((id) => id === p.playerId ? null : p.playerId),
               children: [
-                selected && /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-pcheck", children: /* @__PURE__ */ jsx80(IconCheck, { size: 12 }) }),
-                /* @__PURE__ */ jsx80(Silhouette, { size: 52, variant: selected ? "selected" : "default" }),
-                /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-pname", children: splitName(p.playerName).last })
+                selected && /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-pcheck", children: /* @__PURE__ */ jsx82(IconCheck, { size: 12 }) }),
+                /* @__PURE__ */ jsx82(Silhouette, { size: 52, variant: selected ? "selected" : "default" }),
+                /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-pname", children: splitName(p.playerName).last })
               ]
             },
             p.playerId
           );
         }) }),
-        /* @__PURE__ */ jsxs68(
+        /* @__PURE__ */ jsxs70(
           "button",
           {
             type: "button",
@@ -7906,24 +7958,24 @@ function MatchdayPredictorGame({
             disabled,
             onClick: () => setFirstScorerPlayerId(null),
             children: [
-              /* @__PURE__ */ jsx80("span", { className: "ss-g-mp-radio", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx82("span", { className: "ss-g-mp-radio", "aria-hidden": "true" }),
               t.noScorer
             ]
           }
         )
       ] }),
-      locked && /* @__PURE__ */ jsx80("p", { className: "ss-g-mp-closed", children: t.closed })
+      locked && /* @__PURE__ */ jsx82("p", { className: "ss-g-mp-closed", children: t.closed })
     ] }),
-    /* @__PURE__ */ jsxs68(FooterBar, { children: [
-      /* @__PURE__ */ jsx80(GameButton, { variant: "primary", block: true, disabled, onClick: handleSubmit, children: submitting ? t.saving : t.save }),
-      /* @__PURE__ */ jsx80("p", { className: "ss-g-mp-fun", children: t.forFun })
+    /* @__PURE__ */ jsxs70(FooterBar, { children: [
+      /* @__PURE__ */ jsx82(GameButton, { variant: "primary", block: true, disabled, onClick: handleSubmit, children: submitting ? t.saving : t.save }),
+      /* @__PURE__ */ jsx82("p", { className: "ss-g-mp-fun", children: t.forFun })
     ] })
   ] });
 }
 
 // src/components/games/StartingXiGame.tsx
 import { useId as useId7, useState as useState36 } from "react";
-import { Fragment as Fragment18, jsx as jsx81, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx83, jsxs as jsxs71 } from "react/jsx-runtime";
 var POINTS_PER_STARTER = 8;
 var XI_SIZE = 11;
 var DEFAULT_FORMATION = "4-3-3";
@@ -7972,20 +8024,20 @@ function StartingXiGame({
   const searchId = useId7();
   const clientState = parseClientState8(result?.clientStateJson);
   const alreadyPlayed = result?.alreadyPlayed === true;
-  const header = /* @__PURE__ */ jsx81(
+  const header = /* @__PURE__ */ jsx83(
     GameHeader,
     {
       title: gameTitle({ gameId: "starting-xi" }, ui.games.titles),
       eyebrow: t.eyebrow,
-      right: /* @__PURE__ */ jsx81(Chip, { variant: "accent", children: t.perStarter(POINTS_PER_STARTER) }),
+      right: /* @__PURE__ */ jsx83(Chip, { variant: "accent", children: t.perStarter(POINTS_PER_STARTER) }),
       onBack,
       backLabel: ui.back
     }
   );
   function statusScreen(title, score) {
-    return /* @__PURE__ */ jsxs69("div", { className: "ss-g-screen", "data-testid": "game-screen-starting-xi", children: [
+    return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-game": "starting-xi", "data-testid": "game-screen-starting-xi", children: [
       header,
-      /* @__PURE__ */ jsx81("div", { className: "ss-g-body", children: /* @__PURE__ */ jsx81(ResultCard, { tone: "neutral", title, score, onBack, ui }) })
+      /* @__PURE__ */ jsx83("div", { className: "ss-g-body", children: /* @__PURE__ */ jsx83(ResultCard, { tone: "neutral", title, score, onBack, ui }) })
     ] });
   }
   if (alreadyPlayed) {
@@ -7994,9 +8046,9 @@ function StartingXiGame({
     if (clientState.status === "graded") return statusScreen(t.gradedLine(clientState.correctCount), clientState.score);
   }
   if (!config) {
-    return /* @__PURE__ */ jsxs69("div", { className: "ss-g-screen", "data-testid": "game-screen-starting-xi", children: [
+    return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-game": "starting-xi", "data-testid": "game-screen-starting-xi", children: [
       header,
-      /* @__PURE__ */ jsx81("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+      /* @__PURE__ */ jsx83("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const { formation, slots } = formationSlots(config.formation);
@@ -8031,27 +8083,27 @@ function StartingXiGame({
     onSubmit(JSON.stringify({ predictedPlayerIds: slotPlayers }));
   }
   const segments = slotPlayers.map((p) => p !== null ? "current" : "todo");
-  return /* @__PURE__ */ jsxs69("div", { className: "ss-g-screen", "data-testid": "game-screen-starting-xi", children: [
+  return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-game": "starting-xi", "data-testid": "game-screen-starting-xi", children: [
     header,
-    /* @__PURE__ */ jsx81(
+    /* @__PURE__ */ jsx83(
       SegmentProgress,
       {
         segments,
         ariaLabel: t.picked(pickedCount),
         leftLabel: t.picked(pickedCount),
         rightLabel: t.toGo(XI_SIZE - pickedCount),
-        right: /* @__PURE__ */ jsx81(Chip, { children: formation })
+        right: /* @__PURE__ */ jsx83(Chip, { children: formation })
       }
     ),
-    /* @__PURE__ */ jsxs69("div", { className: "ss-g-body", children: [
-      /* @__PURE__ */ jsxs69("div", { className: "ss-g-xi-pitch", children: [
-        /* @__PURE__ */ jsx81(PitchSvg, { variant: "half" }),
+    /* @__PURE__ */ jsxs71("div", { className: "ss-g-body", children: [
+      /* @__PURE__ */ jsxs71("div", { className: "ss-g-xi-pitch", children: [
+        /* @__PURE__ */ jsx83(PitchSvg, { variant: "half" }),
         slots.map((s) => {
           const playerId = slotPlayers[s.index] ?? null;
           const player = playerId !== null ? byId.get(playerId) ?? null : null;
           const name = player?.playerName ?? "";
           const state = player ? "filled" : active === s.index ? "active" : "empty";
-          return /* @__PURE__ */ jsxs69(
+          return /* @__PURE__ */ jsxs71(
             "button",
             {
               type: "button",
@@ -8063,21 +8115,21 @@ function StartingXiGame({
               disabled: submitting,
               onClick: () => tapSlot(s.index),
               children: [
-                /* @__PURE__ */ jsx81("span", { className: "ss-g-xi-ring", "aria-hidden": "true", children: player ? player.jerseyNumber ?? "" : /* @__PURE__ */ jsx81(IconPlus, { size: 18 }) }),
-                /* @__PURE__ */ jsx81("span", { className: "ss-g-xi-tag", "aria-hidden": "true", children: player ? splitName(name).last : s.label })
+                /* @__PURE__ */ jsx83("span", { className: "ss-g-xi-ring", "aria-hidden": "true", children: player ? player.jerseyNumber ?? "" : /* @__PURE__ */ jsx83(IconPlus, { size: 18 }) }),
+                /* @__PURE__ */ jsx83("span", { className: "ss-g-xi-tag", "aria-hidden": "true", children: player ? splitName(name).last : s.label })
               ]
             },
             s.index
           );
         })
       ] }),
-      /* @__PURE__ */ jsxs69("div", { className: "ss-g-xi-picker", children: [
-        /* @__PURE__ */ jsx81("div", { className: "ss-g-xi-picker-head", children: activeSlot ? /* @__PURE__ */ jsxs69(Fragment18, { children: [
-          /* @__PURE__ */ jsx81(Chip, { variant: "badge", children: activeSlot.label }),
-          /* @__PURE__ */ jsx81("strong", { children: t.pickFor(activeSlot.label) })
-        ] }) : /* @__PURE__ */ jsx81("strong", { children: t.allPicked }) }),
-        activeSlot && /* @__PURE__ */ jsxs69(Fragment18, { children: [
-          /* @__PURE__ */ jsx81(
+      /* @__PURE__ */ jsxs71("div", { className: "ss-g-xi-picker", children: [
+        /* @__PURE__ */ jsx83("div", { className: "ss-g-xi-picker-head", children: activeSlot ? /* @__PURE__ */ jsxs71(Fragment19, { children: [
+          /* @__PURE__ */ jsx83(Chip, { variant: "badge", children: activeSlot.label }),
+          /* @__PURE__ */ jsx83("strong", { children: t.pickFor(activeSlot.label) })
+        ] }) : /* @__PURE__ */ jsx83("strong", { children: t.allPicked }) }),
+        activeSlot && /* @__PURE__ */ jsxs71(Fragment19, { children: [
+          /* @__PURE__ */ jsx83(
             SearchField,
             {
               id: searchId,
@@ -8089,18 +8141,18 @@ function StartingXiGame({
               disabled: submitting
             }
           ),
-          /* @__PURE__ */ jsx81("ul", { className: "ss-g-xi-list", children: available.map((p) => /* @__PURE__ */ jsx81("li", { children: /* @__PURE__ */ jsxs69("button", { type: "button", className: "ss-g-xi-opt", disabled: submitting, onClick: () => pick(p.playerId), children: [
-            /* @__PURE__ */ jsx81("span", { className: "ss-g-xi-opt-no", "aria-hidden": "true", children: p.jerseyNumber ?? "" }),
-            /* @__PURE__ */ jsx81("span", { className: "ss-g-xi-opt-name", children: p.playerName }),
-            /* @__PURE__ */ jsx81("span", { className: "ss-g-xi-opt-pos", children: p.positionName })
+          /* @__PURE__ */ jsx83("ul", { className: "ss-g-xi-list", children: available.map((p) => /* @__PURE__ */ jsx83("li", { children: /* @__PURE__ */ jsxs71("button", { type: "button", className: "ss-g-xi-opt", disabled: submitting, onClick: () => pick(p.playerId), children: [
+            /* @__PURE__ */ jsx83("span", { className: "ss-g-xi-opt-no", "aria-hidden": "true", children: p.jerseyNumber ?? "" }),
+            /* @__PURE__ */ jsx83("span", { className: "ss-g-xi-opt-name", children: p.playerName }),
+            /* @__PURE__ */ jsx83("span", { className: "ss-g-xi-opt-pos", children: p.positionName })
           ] }) }, p.playerId)) })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs69(FooterBar, { children: [
-      /* @__PURE__ */ jsx81(GameButton, { variant: "primary", block: true, disabled: !canSubmit, onClick: handleSubmit, children: submitting ? t.submitting : t.submit }),
-      /* @__PURE__ */ jsxs69("p", { className: "ss-g-xi-lock", children: [
-        /* @__PURE__ */ jsx81(IconLock, {}),
+    /* @__PURE__ */ jsxs71(FooterBar, { children: [
+      /* @__PURE__ */ jsx83(GameButton, { variant: "primary", block: true, disabled: !canSubmit, onClick: handleSubmit, children: submitting ? t.submitting : t.submit }),
+      /* @__PURE__ */ jsxs71("p", { className: "ss-g-xi-lock", children: [
+        /* @__PURE__ */ jsx83(IconLock, {}),
         lockAtUtc ? t.locksAt(ui.games.formatDayTime(lockAtUtc)) : t.locksSoon
       ] })
     ] })
@@ -8109,7 +8161,7 @@ function StartingXiGame({
 
 // src/components/games/StatLadderGame.tsx
 import { useId as useId8, useState as useState37 } from "react";
-import { jsx as jsx82, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs72 } from "react/jsx-runtime";
 function ladderClue(ladder) {
   const mystery = ladder.find((r) => r.rank === 2);
   if (!mystery) return null;
@@ -8131,9 +8183,9 @@ function parseClientState9(json) {
 }
 function NameStack({ name }) {
   const { first, last } = splitName(name);
-  return /* @__PURE__ */ jsxs70("span", { className: "ss-g-sl-name", children: [
-    first && /* @__PURE__ */ jsx82("small", { children: `${first[0]}.` }),
-    /* @__PURE__ */ jsx82("b", { children: last })
+  return /* @__PURE__ */ jsxs72("span", { className: "ss-g-sl-name", children: [
+    first && /* @__PURE__ */ jsx84("small", { children: `${first[0]}.` }),
+    /* @__PURE__ */ jsx84("b", { children: last })
   ] });
 }
 function StatLadderGame({
@@ -8150,11 +8202,11 @@ function StatLadderGame({
   const searchId = useId8();
   const clientState = parseClientState9(result?.clientStateJson);
   const revealed = clientState != null;
-  const header = /* @__PURE__ */ jsx82(GameHeader, { title: gameTitle({ gameId: "stat-ladder" }, ui.games.titles), eyebrow: t.eyebrow, onBack, backLabel: ui.back });
+  const header = /* @__PURE__ */ jsx84(GameHeader, { title: gameTitle({ gameId: "stat-ladder" }, ui.games.titles), eyebrow: t.eyebrow, onBack, backLabel: ui.back });
   if (!config) {
-    return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen", "data-testid": "game-screen-stat-ladder", children: [
+    return /* @__PURE__ */ jsxs72("div", { className: "ss-g-screen", "data-game": "stat-ladder", "data-testid": "game-screen-stat-ladder", children: [
       header,
-      /* @__PURE__ */ jsx82("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+      /* @__PURE__ */ jsx84("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const question = t.question(config.statLabel);
@@ -8166,44 +8218,45 @@ function StatLadderGame({
     if (selectedId === null || submitting || revealed) return;
     onSubmit(JSON.stringify({ guessedPlayerId: selectedId }));
   }
-  return /* @__PURE__ */ jsxs70("div", { className: "ss-g-screen", "data-testid": "game-screen-stat-ladder", children: [
+  return /* @__PURE__ */ jsxs72("div", { className: "ss-g-screen", "data-game": "stat-ladder", "data-testid": "game-screen-stat-ladder", children: [
     header,
-    /* @__PURE__ */ jsxs70("div", { className: "ss-g-body", children: [
-      /* @__PURE__ */ jsxs70("div", { className: "ss-g-sl-prompt", children: [
-        /* @__PURE__ */ jsx82(Chip, { variant: "accent", icon: /* @__PURE__ */ jsx82(IconShield, { size: 14 }), className: "ss-g-sl-stat", children: config.statLabel }),
-        /* @__PURE__ */ jsxs70("h3", { className: "ss-g-sl-q", children: [
+    /* @__PURE__ */ jsxs72("div", { className: "ss-g-body", children: [
+      !revealed && /* @__PURE__ */ jsx84(PointsLadderRow, { ladder: config.pointsLadder, guessesUsed: 0, ui }),
+      /* @__PURE__ */ jsxs72("div", { className: "ss-g-sl-prompt", children: [
+        /* @__PURE__ */ jsx84(Chip, { variant: "accent", icon: /* @__PURE__ */ jsx84(IconShield, { size: 14 }), className: "ss-g-sl-stat", children: config.statLabel }),
+        /* @__PURE__ */ jsxs72("h3", { className: "ss-g-sl-q", children: [
           question.pre,
-          /* @__PURE__ */ jsx82("em", { children: question.emph }),
+          /* @__PURE__ */ jsx84("em", { children: question.emph }),
           question.post
         ] })
       ] }),
-      /* @__PURE__ */ jsx82("ol", { className: "ss-g-sl-rungs", children: rungs.map(
-        (rung) => rung.rank === 2 ? /* @__PURE__ */ jsxs70(
+      /* @__PURE__ */ jsx84("ol", { className: "ss-g-sl-rungs", children: rungs.map(
+        (rung) => rung.rank === 2 ? /* @__PURE__ */ jsxs72(
           "li",
           {
             className: "ss-g-sl-rung ss-g-sl-rung--mystery",
             "data-testid": "sl-mystery-rung",
             "data-result": revealed ? clientState.isCorrect ? "correct" : "wrong" : void 0,
             children: [
-              /* @__PURE__ */ jsx82("span", { className: "ss-g-sl-rank", children: "2" }),
-              revealed ? /* @__PURE__ */ jsx82(PlayerAvatar, { name: clientState.revealedRank2.playerName, className: "ss-g-sl-av" }) : /* @__PURE__ */ jsx82(Silhouette, { size: 52, variant: "mystery" }),
-              revealed ? /* @__PURE__ */ jsx82(NameStack, { name: clientState.revealedRank2.playerName }) : /* @__PURE__ */ jsx82("span", { className: "ss-g-sl-who", children: t.whoSecond }),
-              /* @__PURE__ */ jsx82("span", { className: "ss-g-sl-val ss-g-sl-val--mystery", children: rung.statValue })
+              /* @__PURE__ */ jsx84("span", { className: "ss-g-sl-rank", children: "2" }),
+              revealed ? /* @__PURE__ */ jsx84(PlayerAvatar, { name: clientState.revealedRank2.playerName, className: "ss-g-sl-av" }) : /* @__PURE__ */ jsx84(Silhouette, { size: 52, variant: "mystery" }),
+              revealed ? /* @__PURE__ */ jsx84(NameStack, { name: clientState.revealedRank2.playerName }) : /* @__PURE__ */ jsx84("span", { className: "ss-g-sl-who", children: t.whoSecond }),
+              /* @__PURE__ */ jsx84("span", { className: "ss-g-sl-val ss-g-sl-val--mystery", children: rung.statValue })
             ]
           },
           rung.rank
-        ) : /* @__PURE__ */ jsxs70("li", { className: "ss-g-sl-rung", children: [
-          /* @__PURE__ */ jsx82("span", { className: "ss-g-sl-rank", children: rung.rank }),
-          /* @__PURE__ */ jsx82(PlayerAvatar, { name: rung.playerName ?? "?", className: "ss-g-sl-av" }),
-          /* @__PURE__ */ jsx82(NameStack, { name: rung.playerName ?? "?" }),
-          /* @__PURE__ */ jsx82("span", { className: "ss-g-sl-val", children: rung.statValue })
+        ) : /* @__PURE__ */ jsxs72("li", { className: "ss-g-sl-rung", children: [
+          /* @__PURE__ */ jsx84("span", { className: "ss-g-sl-rank", children: rung.rank }),
+          /* @__PURE__ */ jsx84(PlayerAvatar, { name: rung.playerName ?? "?", className: "ss-g-sl-av" }),
+          /* @__PURE__ */ jsx84(NameStack, { name: rung.playerName ?? "?" }),
+          /* @__PURE__ */ jsx84("span", { className: "ss-g-sl-val", children: rung.statValue })
         ] }, rung.rank)
       ) }),
-      clue && /* @__PURE__ */ jsxs70("p", { className: "ss-g-sl-clue", children: [
-        /* @__PURE__ */ jsx82(IconBulb, {}),
-        /* @__PURE__ */ jsx82("span", { children: t.clue(clue, config.statLabel) })
+      clue && /* @__PURE__ */ jsxs72("p", { className: "ss-g-sl-clue", children: [
+        /* @__PURE__ */ jsx84(IconBulb, {}),
+        /* @__PURE__ */ jsx84("span", { children: t.clue(clue, config.statLabel) })
       ] }),
-      !revealed && /* @__PURE__ */ jsx82("ul", { className: "ss-g-sl-pool", children: pool.map((p) => /* @__PURE__ */ jsx82("li", { children: /* @__PURE__ */ jsxs70(
+      !revealed && /* @__PURE__ */ jsx84("ul", { className: "ss-g-sl-pool", children: pool.map((p) => /* @__PURE__ */ jsx84("li", { children: /* @__PURE__ */ jsxs72(
         "button",
         {
           type: "button",
@@ -8216,13 +8269,13 @@ function StatLadderGame({
             setQuery(p.playerName);
           },
           children: [
-            /* @__PURE__ */ jsx82(PlayerAvatar, { name: p.playerName, className: "ss-g-sl-opt-av" }),
-            /* @__PURE__ */ jsx82("span", { className: "ss-g-sl-opt-name", children: p.playerName }),
-            selectedId === p.playerId && /* @__PURE__ */ jsx82(IconCheck, {})
+            /* @__PURE__ */ jsx84(PlayerAvatar, { name: p.playerName, className: "ss-g-sl-opt-av" }),
+            /* @__PURE__ */ jsx84("span", { className: "ss-g-sl-opt-name", children: p.playerName }),
+            selectedId === p.playerId && /* @__PURE__ */ jsx84(IconCheck, {})
           ]
         }
       ) }, p.playerId)) }),
-      revealed && /* @__PURE__ */ jsx82(
+      revealed && /* @__PURE__ */ jsx84(
         ResultCard,
         {
           tone: clientState.isCorrect ? "win" : "lose",
@@ -8233,8 +8286,8 @@ function StatLadderGame({
         }
       )
     ] }),
-    !revealed && /* @__PURE__ */ jsx82(FooterBar, { children: /* @__PURE__ */ jsxs70("div", { className: "ss-g-sl-guess", children: [
-      /* @__PURE__ */ jsx82(
+    !revealed && /* @__PURE__ */ jsx84(FooterBar, { children: /* @__PURE__ */ jsxs72("div", { className: "ss-g-sl-guess", children: [
+      /* @__PURE__ */ jsx84(
         SearchField,
         {
           id: searchId,
@@ -8249,13 +8302,13 @@ function StatLadderGame({
           disabled: submitting
         }
       ),
-      /* @__PURE__ */ jsx82(GameButton, { variant: "primary", disabled: selectedId === null || submitting, onClick: guess, children: t.guess })
+      /* @__PURE__ */ jsx84(GameButton, { variant: "primary", disabled: selectedId === null || submitting, onClick: guess, children: t.guess })
     ] }) })
   ] });
 }
 
 // src/components/games/FanMotmGame.tsx
-import { jsx as jsx83, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs73 } from "react/jsx-runtime";
 function parseClientState10(json) {
   if (!json) return null;
   try {
@@ -8276,20 +8329,20 @@ function FanMotmGame({
   const clientState = parseClientState10(result?.clientStateJson);
   const alreadyVoted = result?.alreadyPlayed === true;
   const pickedId = clientState?.pickedPlayerId ?? null;
-  const header = /* @__PURE__ */ jsx83(
+  const header = /* @__PURE__ */ jsx85(
     GameHeader,
     {
       title: t.title,
       eyebrow: t.eyebrow,
-      right: alreadyVoted ? /* @__PURE__ */ jsx83(Chip, { variant: "success", icon: /* @__PURE__ */ jsx83(IconCheck, {}), children: t.voted }) : void 0,
+      right: alreadyVoted ? /* @__PURE__ */ jsx85(Chip, { variant: "success", icon: /* @__PURE__ */ jsx85(IconCheck, {}), children: t.voted }) : void 0,
       onBack,
       backLabel: ui.back
     }
   );
   if (!config) {
-    return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-testid": "game-screen-fan-motm", children: [
+    return /* @__PURE__ */ jsxs73("div", { className: "ss-g-screen", "data-game": "fan-motm", "data-testid": "game-screen-fan-motm", children: [
       header,
-      /* @__PURE__ */ jsx83("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
+      /* @__PURE__ */ jsx85("div", { className: "ss-g-body ss-g-loading", children: ui.games.loading })
     ] });
   }
   const picked = config.candidates.find((c) => c.playerId === pickedId) ?? null;
@@ -8297,12 +8350,12 @@ function FanMotmGame({
     if (alreadyVoted || submitting) return;
     onSubmit(JSON.stringify({ pickedPlayerId: candidateId }));
   }
-  return /* @__PURE__ */ jsxs71("div", { className: "ss-g-screen", "data-testid": "game-screen-fan-motm", children: [
+  return /* @__PURE__ */ jsxs73("div", { className: "ss-g-screen", "data-game": "fan-motm", "data-testid": "game-screen-fan-motm", children: [
     header,
-    /* @__PURE__ */ jsxs71("div", { className: "ss-g-body", children: [
-      /* @__PURE__ */ jsx83("ul", { className: "ss-g-motm-list", children: config.candidates.map((c) => {
+    /* @__PURE__ */ jsxs73("div", { className: "ss-g-body", children: [
+      /* @__PURE__ */ jsx85("ul", { className: "ss-g-motm-list", children: config.candidates.map((c) => {
         const isVoted = alreadyVoted && pickedId === c.playerId;
-        return /* @__PURE__ */ jsx83("li", { children: /* @__PURE__ */ jsxs71(
+        return /* @__PURE__ */ jsx85("li", { children: /* @__PURE__ */ jsxs73(
           "button",
           {
             type: "button",
@@ -8311,24 +8364,24 @@ function FanMotmGame({
             disabled: alreadyVoted || submitting,
             onClick: () => handleVote(c.playerId),
             children: [
-              /* @__PURE__ */ jsx83(PlayerAvatar, { name: c.playerName, className: "ss-g-motm-av" }),
-              /* @__PURE__ */ jsx83("span", { className: "ss-g-motm-name", children: c.playerName }),
-              isVoted && /* @__PURE__ */ jsx83(Chip, { variant: "accent", className: "ss-g-motm-pill", children: t.yourVote })
+              /* @__PURE__ */ jsx85(PlayerAvatar, { name: c.playerName, className: "ss-g-motm-av" }),
+              /* @__PURE__ */ jsx85("span", { className: "ss-g-motm-name", children: c.playerName }),
+              isVoted && /* @__PURE__ */ jsx85(Chip, { variant: "accent", className: "ss-g-motm-pill", children: t.yourVote })
             ]
           }
         ) }, c.playerId);
       }) }),
-      alreadyVoted && picked && /* @__PURE__ */ jsx83(ResultCard, { tone: "neutral", title: t.youVoted(picked.playerName), detail: t.thanks, onBack, ui })
+      alreadyVoted && picked && /* @__PURE__ */ jsx85(ResultCard, { tone: "neutral", title: t.youVoted(picked.playerName), detail: t.thanks, onBack, ui })
     ] }),
-    /* @__PURE__ */ jsxs71(FooterBar, { children: [
-      !alreadyVoted && /* @__PURE__ */ jsx83("p", { className: "ss-g-motm-foot", children: t.tapToVote }),
-      /* @__PURE__ */ jsx83("p", { className: "ss-g-motm-fun", children: t.forFun })
+    /* @__PURE__ */ jsxs73(FooterBar, { children: [
+      !alreadyVoted && /* @__PURE__ */ jsx85("p", { className: "ss-g-motm-foot", children: t.tapToVote }),
+      /* @__PURE__ */ jsx85("p", { className: "ss-g-motm-fun", children: t.forFun })
     ] })
   ] });
 }
 
 // src/components/GameScreenHost.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var FIXTURE_GAME_IDS = /* @__PURE__ */ new Set([
   "matchday-predictor",
   "starting-xi",
@@ -8353,7 +8406,7 @@ function GameScreenHost({
 }) {
   const { gameId, fixtureId, gameDay = "", lockAtUtc = null } = selected;
   const [configJson, setConfigJson] = useState38(null);
-  useEffect21(() => {
+  useEffect22(() => {
     setConfigJson(null);
     if (!conversation) return;
     let cancelled = false;
@@ -8376,12 +8429,12 @@ function GameScreenHost({
     fixtureId: fixtureId || void 0,
     locale: ui.games.lang
   });
-  useEffect21(() => {
+  useEffect22(() => {
     if (conversation) hydrate();
   }, [conversation, gameId]);
-  const hydrateRef = useRef18(hydrate);
+  const hydrateRef = useRef19(hydrate);
   hydrateRef.current = hydrate;
-  useEffect21(() => {
+  useEffect22(() => {
     if (!FIXTURE_GAME_IDS.has(gameId)) return;
     if (rawStatus !== "pending") return;
     const timerId = setInterval(() => {
@@ -8404,7 +8457,7 @@ function GameScreenHost({
   function renderScreen() {
     switch (gameId) {
       case "mystery-tiger":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           MysteryTigerGame,
           {
             ...sharedProps,
@@ -8412,7 +8465,7 @@ function GameScreenHost({
           }
         );
       case "higher-or-lower":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           HigherOrLowerGame,
           {
             ...sharedProps,
@@ -8420,7 +8473,7 @@ function GameScreenHost({
           }
         );
       case "career-path":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           CareerPathGame,
           {
             ...sharedProps,
@@ -8429,7 +8482,7 @@ function GameScreenHost({
         );
       case "beat-the-grid": {
         const btgConfig = safeParseConfig(configJson);
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           BeatTheGridGame,
           {
             ...sharedProps,
@@ -8439,7 +8492,7 @@ function GameScreenHost({
         );
       }
       case "guess-the-xi":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           GuessTheXiGame,
           {
             ...sharedProps,
@@ -8447,7 +8500,7 @@ function GameScreenHost({
           }
         );
       case "daily-quiz":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           DailyQuizGame,
           {
             ...sharedProps,
@@ -8455,7 +8508,7 @@ function GameScreenHost({
           }
         );
       case "matchday-predictor":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           MatchdayPredictorGame,
           {
             ...sharedProps,
@@ -8463,7 +8516,7 @@ function GameScreenHost({
           }
         );
       case "starting-xi":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           StartingXiGame,
           {
             ...sharedProps,
@@ -8471,7 +8524,7 @@ function GameScreenHost({
           }
         );
       case "stat-ladder":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           StatLadderGame,
           {
             ...sharedProps,
@@ -8479,7 +8532,7 @@ function GameScreenHost({
           }
         );
       case "fan-motm":
-        return /* @__PURE__ */ jsx84(
+        return /* @__PURE__ */ jsx86(
           FanMotmGame,
           {
             ...sharedProps,
@@ -8487,10 +8540,10 @@ function GameScreenHost({
           }
         );
       default:
-        return /* @__PURE__ */ jsx84("div", { className: "ss-g-screen", "data-testid": `game-screen-${gameId}`, children: /* @__PURE__ */ jsx84(GameHeader, { title: gameTitle({ gameId }, ui.games.titles), onBack, backLabel: ui.back }) });
+        return /* @__PURE__ */ jsx86("div", { className: "ss-g-screen", "data-testid": `game-screen-${gameId}`, children: /* @__PURE__ */ jsx86(GameHeader, { title: gameTitle({ gameId }, ui.games.titles), onBack, backLabel: ui.back }) });
     }
   }
-  return /* @__PURE__ */ jsx84("div", { className: "ss-w-gscreen", "data-testid": "gscreen", "data-lock-at": lockAtUtc ?? void 0, children: renderScreen() });
+  return /* @__PURE__ */ jsx86("div", { className: "ss-w-gscreen", "data-testid": "gscreen", "data-lock-at": lockAtUtc ?? void 0, children: renderScreen() });
 }
 
 // src/components/games/ui/fonts.ts
@@ -8507,7 +8560,7 @@ function ensureGamesFonts(doc = document) {
 }
 
 // src/components/GamesPanel.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 function GamesPanel({
   loggedIn,
   games,
@@ -8517,12 +8570,12 @@ function GamesPanel({
   refreshHub
 }) {
   const [selected, setSelected] = useState39(null);
-  useEffect22(() => {
+  useEffect23(() => {
     ensureGamesFonts();
   }, []);
-  if (!loggedIn) return /* @__PURE__ */ jsx85(GamesLoginWall, { ui });
+  if (!loggedIn) return /* @__PURE__ */ jsx87(GamesLoginWall, { ui });
   if (selected !== null) {
-    return /* @__PURE__ */ jsx85("div", { className: "ss-w-gscreen-wrap", lang: ui.games.lang, children: /* @__PURE__ */ jsx85(
+    return /* @__PURE__ */ jsx87("div", { className: "ss-w-gscreen-wrap", lang: ui.games.lang, children: /* @__PURE__ */ jsx87(
       GameScreenHost,
       {
         selected,
@@ -8536,7 +8589,7 @@ function GamesPanel({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx85("div", { className: "ss-g-hub-wrap", "data-testid": "games-hub", lang: ui.games.lang, children: /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx87("div", { className: "ss-g-hub-wrap", "data-testid": "games-hub", lang: ui.games.lang, children: /* @__PURE__ */ jsx87(
     GamesHub,
     {
       games,
@@ -8551,7 +8604,7 @@ function GamesPanel({
 import { useState as useState40 } from "react";
 
 // src/components/LeaderboardRow.tsx
-import { jsx as jsx86, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs74 } from "react/jsx-runtime";
 function formatPoints(n) {
   return n.toLocaleString("en");
 }
@@ -8560,14 +8613,14 @@ function LeaderboardWeeklyRow({
   isMe
 }) {
   const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
-  return /* @__PURE__ */ jsxs72("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
-    /* @__PURE__ */ jsxs72("span", { className: rankClass, children: [
+  return /* @__PURE__ */ jsxs74("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
+    /* @__PURE__ */ jsxs74("span", { className: rankClass, children: [
       "#",
       row.rank
     ] }),
-    /* @__PURE__ */ jsx86("span", { className: "ss-w-lb2-handle", children: row.handle }),
-    /* @__PURE__ */ jsx86("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
-    row.currentStreak > 0 && /* @__PURE__ */ jsxs72("span", { className: "ss-w-lb2-streak", children: [
+    /* @__PURE__ */ jsx88("span", { className: "ss-w-lb2-handle", children: row.handle }),
+    /* @__PURE__ */ jsx88("span", { className: "ss-w-lb2-points", children: formatPoints(row.points) }),
+    row.currentStreak > 0 && /* @__PURE__ */ jsxs74("span", { className: "ss-w-lb2-streak", children: [
       "\u{1F525} ",
       row.currentStreak
     ] })
@@ -8578,18 +8631,18 @@ function LeaderboardAllTimeRow({
   isMe
 }) {
   const rankClass = `ss-w-lb2-rank${row.rank <= 3 ? " ss-w-lb2-rank--top3" : ""}`;
-  return /* @__PURE__ */ jsxs72("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
-    /* @__PURE__ */ jsxs72("span", { className: rankClass, children: [
+  return /* @__PURE__ */ jsxs74("div", { className: `ss-w-lb2-row${isMe ? " ss-w-lb2-row--you" : ""}`, children: [
+    /* @__PURE__ */ jsxs74("span", { className: rankClass, children: [
       "#",
       row.rank
     ] }),
-    /* @__PURE__ */ jsx86("span", { className: "ss-w-lb2-handle", children: row.handle }),
-    /* @__PURE__ */ jsx86("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
+    /* @__PURE__ */ jsx88("span", { className: "ss-w-lb2-handle", children: row.handle }),
+    /* @__PURE__ */ jsx88("span", { className: "ss-w-lb2-points", children: formatPoints(row.allTimePoints) })
   ] });
 }
 
 // src/components/LeaderboardEmpty.tsx
-import { jsx as jsx87, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs75 } from "react/jsx-runtime";
 function LeaderboardEmpty({
   segment,
   lastWeek,
@@ -8598,36 +8651,36 @@ function LeaderboardEmpty({
   ui
 }) {
   if (segment === "alltime") {
-    return /* @__PURE__ */ jsxs73("div", { className: "ss-w-lb-empty ss-w-lb-empty--alltime", children: [
-      /* @__PURE__ */ jsx87("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: "\u{1F4CA}" }),
-      /* @__PURE__ */ jsx87("p", { className: "ss-w-lb-empty-body", children: ui.leaderboardAllTimeEmpty })
+    return /* @__PURE__ */ jsxs75("div", { className: "ss-w-lb-empty ss-w-lb-empty--alltime", children: [
+      /* @__PURE__ */ jsx89("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: "\u{1F4CA}" }),
+      /* @__PURE__ */ jsx89("p", { className: "ss-w-lb-empty-body", children: ui.leaderboardAllTimeEmpty })
     ] });
   }
   const fresh = lastWeek != null;
   const title = fresh ? ui.leaderboardEmptyFreshTitle : ui.leaderboardEmptyColdTitle;
   const body = fresh ? ui.leaderboardEmptyFreshBody : ui.leaderboardEmptyColdBody;
-  return /* @__PURE__ */ jsxs73("div", { className: "ss-w-lb-empty", children: [
-    weeklyPrize && /* @__PURE__ */ jsxs73("div", { className: "ss-w-prize", children: [
-      /* @__PURE__ */ jsx87("span", { className: "ss-w-prize-icon", "aria-hidden": "true", children: "\u{1F3C6}" }),
-      /* @__PURE__ */ jsx87("div", { className: "ss-w-prize-body", children: /* @__PURE__ */ jsx87("span", { className: "ss-w-prize-text", children: weeklyPrize }) })
+  return /* @__PURE__ */ jsxs75("div", { className: "ss-w-lb-empty", children: [
+    weeklyPrize && /* @__PURE__ */ jsxs75("div", { className: "ss-w-prize", children: [
+      /* @__PURE__ */ jsx89("span", { className: "ss-w-prize-icon", "aria-hidden": "true", children: "\u{1F3C6}" }),
+      /* @__PURE__ */ jsx89("div", { className: "ss-w-prize-body", children: /* @__PURE__ */ jsx89("span", { className: "ss-w-prize-text", children: weeklyPrize }) })
     ] }),
-    /* @__PURE__ */ jsxs73("div", { className: "ss-w-lb-empty-hero", children: [
-      /* @__PURE__ */ jsx87("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: fresh ? "\u{1F3C6}" : "\u{1F3AE}" }),
-      /* @__PURE__ */ jsx87("h4", { className: "ss-w-lb-empty-title", children: title }),
-      /* @__PURE__ */ jsx87("p", { className: "ss-w-lb-empty-body", children: body }),
-      onPlay && /* @__PURE__ */ jsx87("button", { type: "button", className: "ss-w-lb-empty-cta", onClick: onPlay, children: ui.leaderboardEmptyCta })
+    /* @__PURE__ */ jsxs75("div", { className: "ss-w-lb-empty-hero", children: [
+      /* @__PURE__ */ jsx89("div", { className: "ss-w-lb-empty-icon", "aria-hidden": "true", children: fresh ? "\u{1F3C6}" : "\u{1F3AE}" }),
+      /* @__PURE__ */ jsx89("h4", { className: "ss-w-lb-empty-title", children: title }),
+      /* @__PURE__ */ jsx89("p", { className: "ss-w-lb-empty-body", children: body }),
+      onPlay && /* @__PURE__ */ jsx89("button", { type: "button", className: "ss-w-lb-empty-cta", onClick: onPlay, children: ui.leaderboardEmptyCta })
     ] }),
-    fresh && lastWeek && /* @__PURE__ */ jsxs73("div", { className: "ss-w-lb-last", children: [
-      /* @__PURE__ */ jsx87("span", { className: "ss-w-lb-last-label", children: ui.leaderboardLastWeekLabel }),
-      /* @__PURE__ */ jsx87("span", { className: "ss-w-lb-last-champ", "aria-hidden": "true", children: "\u{1F947}" }),
-      /* @__PURE__ */ jsx87("span", { className: "ss-w-lb-last-handle", children: lastWeek.handle }),
-      /* @__PURE__ */ jsx87("span", { className: "ss-w-lb-last-points", children: formatPoints(lastWeek.points) })
+    fresh && lastWeek && /* @__PURE__ */ jsxs75("div", { className: "ss-w-lb-last", children: [
+      /* @__PURE__ */ jsx89("span", { className: "ss-w-lb-last-label", children: ui.leaderboardLastWeekLabel }),
+      /* @__PURE__ */ jsx89("span", { className: "ss-w-lb-last-champ", "aria-hidden": "true", children: "\u{1F947}" }),
+      /* @__PURE__ */ jsx89("span", { className: "ss-w-lb-last-handle", children: lastWeek.handle }),
+      /* @__PURE__ */ jsx89("span", { className: "ss-w-lb-last-points", children: formatPoints(lastWeek.points) })
     ] })
   ] });
 }
 
 // src/components/Leaderboard.tsx
-import { Fragment as Fragment19, jsx as jsx88, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx90, jsxs as jsxs76 } from "react/jsx-runtime";
 function Leaderboard({
   data,
   ui,
@@ -8637,9 +8690,9 @@ function Leaderboard({
   const myRow = segment === "weekly" ? data.myWeeklyRow : data.myAllTimeRow;
   const offBoard = myRow !== null && myRow !== void 0 && myRow.rank === -1;
   const isEmpty = segment === "weekly" ? data.weeklyTop.length === 0 : data.allTimeTop.length === 0;
-  return /* @__PURE__ */ jsxs74("div", { className: "ss-w-lb2", children: [
-    /* @__PURE__ */ jsxs74("div", { className: "ss-w-seg", children: [
-      /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsxs76("div", { className: "ss-w-lb2", children: [
+    /* @__PURE__ */ jsxs76("div", { className: "ss-w-seg", children: [
+      /* @__PURE__ */ jsx90(
         "button",
         {
           type: "button",
@@ -8649,7 +8702,7 @@ function Leaderboard({
           children: ui.leaderboardThisWeek
         }
       ),
-      /* @__PURE__ */ jsx88(
+      /* @__PURE__ */ jsx90(
         "button",
         {
           type: "button",
@@ -8660,7 +8713,7 @@ function Leaderboard({
         }
       )
     ] }),
-    isEmpty ? /* @__PURE__ */ jsx88(
+    isEmpty ? /* @__PURE__ */ jsx90(
       LeaderboardEmpty,
       {
         segment,
@@ -8669,15 +8722,15 @@ function Leaderboard({
         onPlay,
         ui
       }
-    ) : /* @__PURE__ */ jsxs74(Fragment19, { children: [
-      /* @__PURE__ */ jsx88("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ jsx88(
+    ) : /* @__PURE__ */ jsxs76(Fragment20, { children: [
+      /* @__PURE__ */ jsx90("div", { className: "ss-w-lb2-rows", children: segment === "weekly" ? data.weeklyTop.map((row) => /* @__PURE__ */ jsx90(
         LeaderboardWeeklyRow,
         {
           row,
           isMe: row.operatorUserId === data.myWeeklyRow?.operatorUserId
         },
         row.operatorUserId
-      )) : data.allTimeTop.map((row) => /* @__PURE__ */ jsx88(
+      )) : data.allTimeTop.map((row) => /* @__PURE__ */ jsx90(
         LeaderboardAllTimeRow,
         {
           row,
@@ -8685,18 +8738,18 @@ function Leaderboard({
         },
         row.operatorUserId
       )) }),
-      /* @__PURE__ */ jsx88("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
-      myRow != null && (offBoard ? /* @__PURE__ */ jsx88("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ jsxs74("div", { className: "ss-w-lb2-rows", children: [
-        segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ jsx88(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
-        segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ jsx88(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
+      /* @__PURE__ */ jsx90("div", { className: "ss-w-kitline", children: "\u{1F3BD}" }),
+      myRow != null && (offBoard ? /* @__PURE__ */ jsx90("div", { className: "ss-w-lbgap", children: ui.leaderboardOffBoard }) : /* @__PURE__ */ jsxs76("div", { className: "ss-w-lb2-rows", children: [
+        segment === "weekly" && data.myWeeklyRow && /* @__PURE__ */ jsx90(LeaderboardWeeklyRow, { row: data.myWeeklyRow, isMe: true }),
+        segment === "alltime" && data.myAllTimeRow && /* @__PURE__ */ jsx90(LeaderboardAllTimeRow, { row: data.myAllTimeRow, isMe: true })
       ] })),
-      segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ jsx88("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ jsx88("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ jsx88("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
+      segment === "alltime" && data.myAllTimeRow && !offBoard && /* @__PURE__ */ jsx90("div", { className: "ss-w-lb2-rows", children: /* @__PURE__ */ jsx90("div", { className: "ss-w-lb2-row", children: /* @__PURE__ */ jsx90("span", { className: "ss-w-lb2-handle", children: formatPoints(data.allTimeTop.reduce((s, r) => s + r.allTimePoints, 0)) }) }) })
     ] })
   ] });
 }
 
 // src/components/LeaderboardPanel.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var EMPTY_PAYLOAD = {
   week: "",
   weeklyTop: [],
@@ -8707,19 +8760,19 @@ var EMPTY_PAYLOAD = {
   lastWeek: null
 };
 function LeaderboardPanel({ loggedIn, data, loading, onPlay, ui }) {
-  if (!loggedIn) return /* @__PURE__ */ jsx89(GamesLoginWall, { ui });
-  if (data === null && loading) return /* @__PURE__ */ jsx89("div", { className: "ss-w-mon-list" });
-  return /* @__PURE__ */ jsx89("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx89(Leaderboard, { data: data ?? EMPTY_PAYLOAD, ui, onPlay }) });
+  if (!loggedIn) return /* @__PURE__ */ jsx91(GamesLoginWall, { ui });
+  if (data === null && loading) return /* @__PURE__ */ jsx91("div", { className: "ss-w-mon-list" });
+  return /* @__PURE__ */ jsx91("div", { className: "ss-w-mon-list", children: /* @__PURE__ */ jsx91(Leaderboard, { data: data ?? EMPTY_PAYLOAD, ui, onPlay }) });
 }
 
 // src/components/PresetSpeedDial.tsx
 import { useId as useId9 } from "react";
-import { jsx as jsx90, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs77 } from "react/jsx-runtime";
 function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef, buttonRef }) {
   const pillsId = useId9();
   const tabIndex = expanded ? 0 : -1;
-  return /* @__PURE__ */ jsxs75("div", { ref: rootRef, className: "ss-w-dial", children: [
-    /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs77("div", { ref: rootRef, className: "ss-w-dial", children: [
+    /* @__PURE__ */ jsxs77(
       "button",
       {
         ref: buttonRef,
@@ -8730,36 +8783,36 @@ function PresetSpeedDial({ expanded, showDot, strings, onToggle, onOpen, rootRef
         "aria-label": strings.dialName,
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ jsx90("span", { className: "ss-w-dial-icon ss-w-dial-icon--open", children: /* @__PURE__ */ jsx90(SlidersIcon, {}) }),
-          /* @__PURE__ */ jsx90("span", { className: "ss-w-dial-icon ss-w-dial-icon--close", children: /* @__PURE__ */ jsx90(CloseIcon, {}) }),
-          showDot && !expanded ? /* @__PURE__ */ jsx90("span", { className: "ss-w-dial-dot", "aria-hidden": "true" }) : null
+          /* @__PURE__ */ jsx92("span", { className: "ss-w-dial-icon ss-w-dial-icon--open", children: /* @__PURE__ */ jsx92(SlidersIcon, {}) }),
+          /* @__PURE__ */ jsx92("span", { className: "ss-w-dial-icon ss-w-dial-icon--close", children: /* @__PURE__ */ jsx92(CloseIcon, {}) }),
+          showDot && !expanded ? /* @__PURE__ */ jsx92("span", { className: "ss-w-dial-dot", "aria-hidden": "true" }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsxs75("div", { id: pillsId, className: "ss-w-dial-pills", "data-open": expanded ? "" : void 0, children: [
-      /* @__PURE__ */ jsxs75("button", { type: "button", className: "ss-w-dial-pill", tabIndex, onClick: () => onOpen("numbers"), children: [
-        /* @__PURE__ */ jsx90(SlidersIcon, {}),
-        /* @__PURE__ */ jsx90("span", { className: "ss-w-dial-pill-label", children: strings.setNumbers })
+    /* @__PURE__ */ jsxs77("div", { id: pillsId, className: "ss-w-dial-pills", "data-open": expanded ? "" : void 0, children: [
+      /* @__PURE__ */ jsxs77("button", { type: "button", className: "ss-w-dial-pill", tabIndex, onClick: () => onOpen("numbers"), children: [
+        /* @__PURE__ */ jsx92(SlidersIcon, {}),
+        /* @__PURE__ */ jsx92("span", { className: "ss-w-dial-pill-label", children: strings.setNumbers })
       ] }),
-      /* @__PURE__ */ jsxs75("button", { type: "button", className: "ss-w-dial-pill", tabIndex, onClick: () => onOpen("combo"), children: [
-        /* @__PURE__ */ jsx90(ComboIcon, {}),
-        /* @__PURE__ */ jsx90("span", { className: "ss-w-dial-pill-label", children: strings.buildCombo })
+      /* @__PURE__ */ jsxs77("button", { type: "button", className: "ss-w-dial-pill", tabIndex, onClick: () => onOpen("combo"), children: [
+        /* @__PURE__ */ jsx92(ComboIcon, {}),
+        /* @__PURE__ */ jsx92("span", { className: "ss-w-dial-pill-label", children: strings.buildCombo })
       ] })
     ] })
   ] });
 }
 
 // src/components/PresetTools.tsx
-import { Fragment as Fragment20, useEffect as useEffect23, useId as useId10, useRef as useRef19, useState as useState41 } from "react";
-import { Fragment as Fragment21, jsx as jsx91, jsxs as jsxs76 } from "react/jsx-runtime";
+import { Fragment as Fragment21, useEffect as useEffect24, useId as useId10, useRef as useRef20, useState as useState41 } from "react";
+import { Fragment as Fragment22, jsx as jsx93, jsxs as jsxs78 } from "react/jsx-runtime";
 var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function PresetToolModal({ title, closeLabel, onClose, children, footer }) {
-  const dialogRef = useRef19(null);
+  const dialogRef = useRef20(null);
   const titleId = useId10();
-  useEffect23(() => {
+  useEffect24(() => {
     dialogRef.current?.focus();
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       e.stopPropagation();
@@ -8789,79 +8842,79 @@ function PresetToolModal({ title, closeLabel, onClose, children, footer }) {
       first.focus();
     }
   };
-  return /* @__PURE__ */ jsx91("div", { className: "ss-w-tool-backdrop", children: /* @__PURE__ */ jsxs76("div", { ref: dialogRef, className: "ss-w-tool", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, onKeyDown: trapTab, children: [
-    /* @__PURE__ */ jsxs76("div", { className: "ss-w-tool-head", children: [
-      /* @__PURE__ */ jsx91("h2", { id: titleId, className: "ss-w-tool-title", children: title }),
-      /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-tool-close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx91(CloseIcon, {}) })
+  return /* @__PURE__ */ jsx93("div", { className: "ss-w-tool-backdrop", children: /* @__PURE__ */ jsxs78("div", { ref: dialogRef, className: "ss-w-tool", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, onKeyDown: trapTab, children: [
+    /* @__PURE__ */ jsxs78("div", { className: "ss-w-tool-head", children: [
+      /* @__PURE__ */ jsx93("h2", { id: titleId, className: "ss-w-tool-title", children: title }),
+      /* @__PURE__ */ jsx93("button", { type: "button", className: "ss-w-tool-close", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx93(CloseIcon, {}) })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: "ss-w-tool-body", children }),
-    footer ? /* @__PURE__ */ jsx91("div", { className: "ss-w-tool-foot", children: footer }) : null
+    /* @__PURE__ */ jsx93("div", { className: "ss-w-tool-body", children }),
+    footer ? /* @__PURE__ */ jsx93("div", { className: "ss-w-tool-foot", children: footer }) : null
   ] }) });
 }
 function fillTemplate(template, slots) {
   return template.split(/(\{[a-z]+\})/).filter((part) => part !== "").map((part, i) => {
     const key = /^\{([a-z]+)\}$/.exec(part)?.[1];
-    return /* @__PURE__ */ jsx91(Fragment20, { children: key !== void 0 && key in slots ? slots[key] : part }, i);
+    return /* @__PURE__ */ jsx93(Fragment21, { children: key !== void 0 && key in slots ? slots[key] : part }, i);
   });
 }
 function NumberSelect({ current, choices: choices2, label, notToday, lockEmpty = true, onChoose }) {
   const selected = Math.max(0, choices2.findIndex((c) => c.text === current));
-  return /* @__PURE__ */ jsxs76("span", { className: "ss-w-tool-num", children: [
-    /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: current }),
-    /* @__PURE__ */ jsx91("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(selected), onChange: (e) => {
+  return /* @__PURE__ */ jsxs78("span", { className: "ss-w-tool-num", children: [
+    /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: current }),
+    /* @__PURE__ */ jsx93("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(selected), onChange: (e) => {
       const c = choices2[Number(e.target.value)];
       if (c) onChoose(c.value);
-    }, children: choices2.map((c, i) => /* @__PURE__ */ jsx91("option", { value: String(i), disabled: lockEmpty && !c.available && i !== selected, children: c.available ? c.text : `${c.text}${notToday}` }, i)) })
+    }, children: choices2.map((c, i) => /* @__PURE__ */ jsx93("option", { value: String(i), disabled: lockEmpty && !c.available && i !== selected, children: c.available ? c.text : `${c.text}${notToday}` }, i)) })
   ] });
 }
 function ChoiceSelect({ currentIdx, sizeLabels, optionLabels, label, onChoose }) {
   const sizeText = sizeLabels[currentIdx] ?? "";
-  return /* @__PURE__ */ jsxs76("span", { className: "ss-w-tool-num", children: [
-    /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: sizeText }),
-    /* @__PURE__ */ jsx91("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(currentIdx), onChange: (e) => onChoose(Number(e.target.value)), children: optionLabels.map((opt, i) => /* @__PURE__ */ jsx91("option", { value: String(i), children: opt }, i)) })
+  return /* @__PURE__ */ jsxs78("span", { className: "ss-w-tool-num", children: [
+    /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: sizeText }),
+    /* @__PURE__ */ jsx93("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(currentIdx), onChange: (e) => onChoose(Number(e.target.value)), children: optionLabels.map((opt, i) => /* @__PURE__ */ jsx93("option", { value: String(i), children: opt }, i)) })
   ] });
 }
 function SendButton({ label, display, disabled, onClick }) {
-  return /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-tool-send", "aria-label": `${label}: ${display}`, disabled, onClick, children: label });
+  return /* @__PURE__ */ jsx93("button", { type: "button", className: "ss-w-tool-send", "aria-label": `${label}: ${display}`, disabled, onClick, children: label });
 }
 function PickList({ picks, formatKickoff }) {
-  return /* @__PURE__ */ jsx91("ul", { className: "ss-w-tool-picks", role: "list", children: picks.map((p) => /* @__PURE__ */ jsxs76("li", { className: "ss-w-tool-pick", children: [
-    /* @__PURE__ */ jsxs76("span", { className: "ss-w-tool-pick-match", children: [
+  return /* @__PURE__ */ jsx93("ul", { className: "ss-w-tool-picks", role: "list", children: picks.map((p) => /* @__PURE__ */ jsxs78("li", { className: "ss-w-tool-pick", children: [
+    /* @__PURE__ */ jsxs78("span", { className: "ss-w-tool-pick-match", children: [
       p.homeTeamName,
       " \u2013 ",
       p.awayTeamName
     ] }),
-    /* @__PURE__ */ jsxs76("span", { className: "ss-w-tool-pick-sel", children: [
+    /* @__PURE__ */ jsxs78("span", { className: "ss-w-tool-pick-sel", children: [
       p.marketLabel,
       ": ",
       p.selectionLabel,
       p.line ? ` ${p.line}` : ""
     ] }),
-    /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-pick-kick", children: formatKickoff(p.kickoffUtc) }),
-    /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-pick-price", children: p.price.toFixed(2) })
+    /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-pick-kick", children: formatKickoff(p.kickoffUtc) }),
+    /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-pick-price", children: p.price.toFixed(2) })
   ] }, p.matchOddsId)) });
 }
 function ComboPreview({ cell, formatKickoff }) {
-  return /* @__PURE__ */ jsxs76(Fragment21, { children: [
-    /* @__PURE__ */ jsx91(PickList, { picks: cell.combo.legs, formatKickoff }),
-    /* @__PURE__ */ jsx91("div", { className: "ss-w-tool-math", children: cell.combo.multiplication })
+  return /* @__PURE__ */ jsxs78(Fragment22, { children: [
+    /* @__PURE__ */ jsx93(PickList, { picks: cell.combo.legs, formatKickoff }),
+    /* @__PURE__ */ jsx93("div", { className: "ss-w-tool-math", children: cell.combo.multiplication })
   ] });
 }
 function Unavailable({ text }) {
-  return /* @__PURE__ */ jsx91("p", { className: "ss-w-tool-unavailable", children: text });
+  return /* @__PURE__ */ jsx93("p", { className: "ss-w-tool-unavailable", children: text });
 }
 function AskRow({ icon, ask, ready, send }) {
-  return /* @__PURE__ */ jsxs76("section", { className: "ss-w-tool-row ss-w-tool-row--ask", children: [
-    /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-icon", "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsxs76("div", { className: "ss-w-tool-main", children: [
-      /* @__PURE__ */ jsx91("p", { className: "ss-w-tool-ask", children: ask }),
-      ready ? /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-ready", children: ready }) : null
+  return /* @__PURE__ */ jsxs78("section", { className: "ss-w-tool-row ss-w-tool-row--ask", children: [
+    /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs78("div", { className: "ss-w-tool-main", children: [
+      /* @__PURE__ */ jsx93("p", { className: "ss-w-tool-ask", children: ask }),
+      ready ? /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-ready", children: ready }) : null
     ] }),
     send
   ] });
 }
 function RoundSend({ label, display, disabled, onClick }) {
-  return /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-tool-go", "aria-label": `${label}: ${display}`, disabled, onClick, children: /* @__PURE__ */ jsx91(SendIcon, {}) });
+  return /* @__PURE__ */ jsx93("button", { type: "button", className: "ss-w-tool-go", "aria-label": `${label}: ${display}`, disabled, onClick, children: /* @__PURE__ */ jsx93(SendIcon, {}) });
 }
 var BIG_COMBO = { total: 50, legs: 6 };
 function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
@@ -8927,77 +8980,77 @@ function SetNumbersTool({ grid, strings, streaming, onSend, onClose }) {
   const marketLabels = markets.map((c) => strings.marketShort(c.marketDeveloperName, c.marketLabel, c.selectionLabel ?? null));
   const singlesReady = (cell) => cell ? strings.readyCount(cell.picks.length) : strings.unavailable;
   const comboReady = (cell) => cell ? strings.readyAt(cell.combo.total) : strings.unavailable;
-  return /* @__PURE__ */ jsxs76(PresetToolModal, { title: strings.setNumbers, closeLabel: strings.close, onClose, children: [
-    /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsxs78(PresetToolModal, { title: strings.setNumbers, closeLabel: strings.close, onClose, children: [
+    /* @__PURE__ */ jsx93(
       AskRow,
       {
         icon: "\u{1F3AF}",
         ask: fillTemplate(strings.maxPriceRow, {
           count: String(count),
-          price: /* @__PURE__ */ jsx91(NumberSelect, { current: maxPrice.toFixed(2), choices: maxChoices, label: strings.maxPriceName, notToday: strings.notToday, onChoose: chooseMax })
+          price: /* @__PURE__ */ jsx93(NumberSelect, { current: maxPrice.toFixed(2), choices: maxChoices, label: strings.maxPriceName, notToday: strings.notToday, onChoose: chooseMax })
         }),
         ready: singlesReady(maxCell),
-        send: /* @__PURE__ */ jsx91(RoundSend, { label: strings.send, display: strings.maxPriceDisplay(count, maxPrice), disabled: !maxCell || streaming, onClick: () => {
+        send: /* @__PURE__ */ jsx93(RoundSend, { label: strings.send, display: strings.maxPriceDisplay(count, maxPrice), disabled: !maxCell || streaming, onClick: () => {
           if (maxCell) onSend(maxPriceAsk(maxCell, strings));
         } })
       }
     ),
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx93(
       AskRow,
       {
         icon: "\u{1F4C8}",
         ask: fillTemplate(strings.minPriceRow, {
           count: String(count),
-          price: /* @__PURE__ */ jsx91(NumberSelect, { current: minPrice.toFixed(2), choices: minChoices, label: strings.minPriceName, notToday: strings.notToday, onChoose: chooseMin })
+          price: /* @__PURE__ */ jsx93(NumberSelect, { current: minPrice.toFixed(2), choices: minChoices, label: strings.minPriceName, notToday: strings.notToday, onChoose: chooseMin })
         }),
         ready: singlesReady(minCell),
-        send: /* @__PURE__ */ jsx91(RoundSend, { label: strings.send, display: strings.minPriceDisplay(count, minPrice), disabled: !minCell || streaming, onClick: () => {
+        send: /* @__PURE__ */ jsx93(RoundSend, { label: strings.send, display: strings.minPriceDisplay(count, minPrice), disabled: !minCell || streaming, onClick: () => {
           if (minCell) onSend(minPriceAsk(minCell, strings));
         } })
       }
     ),
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx93(
       AskRow,
       {
         icon: "\u2728",
         ask: fillTemplate(strings.comboRow, {
-          legs: /* @__PURE__ */ jsx91(NumberSelect, { current: String(legs), choices: legChoicesFor(total), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseLegs }),
-          total: /* @__PURE__ */ jsx91(NumberSelect, { current: total.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseTotal })
+          legs: /* @__PURE__ */ jsx93(NumberSelect, { current: String(legs), choices: legChoicesFor(total), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseLegs }),
+          total: /* @__PURE__ */ jsx93(NumberSelect, { current: total.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseTotal })
         }),
         ready: comboReady(comboCell),
-        send: /* @__PURE__ */ jsx91(RoundSend, { label: strings.send, display: strings.comboDisplay(legs, total), disabled: !comboCell || streaming, onClick: () => {
+        send: /* @__PURE__ */ jsx93(RoundSend, { label: strings.send, display: strings.comboDisplay(legs, total), disabled: !comboCell || streaming, onClick: () => {
           if (comboCell) onSend(comboAsk(comboCell, strings));
         } })
       }
     ),
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx93(
       AskRow,
       {
         icon: "\u{1F3C6}",
         ask: fillTemplate(strings.bigComboRow, {
-          legs: /* @__PURE__ */ jsx91(NumberSelect, { current: String(bigLegs), choices: legChoicesFor(bigTotal), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseBigLegs }),
-          total: /* @__PURE__ */ jsx91(NumberSelect, { current: bigTotal.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseBigTotal })
+          legs: /* @__PURE__ */ jsx93(NumberSelect, { current: String(bigLegs), choices: legChoicesFor(bigTotal), label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseBigLegs }),
+          total: /* @__PURE__ */ jsx93(NumberSelect, { current: bigTotal.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseBigTotal })
         }),
         ready: comboReady(bigCell),
-        send: /* @__PURE__ */ jsx91(RoundSend, { label: strings.send, display: strings.comboDisplay(bigLegs, bigTotal), disabled: !bigCell || streaming, onClick: () => {
+        send: /* @__PURE__ */ jsx93(RoundSend, { label: strings.send, display: strings.comboDisplay(bigLegs, bigTotal), disabled: !bigCell || streaming, onClick: () => {
           if (bigCell) onSend(comboAsk(bigCell, strings));
         } })
       }
     ),
-    markets.length > 0 && /* @__PURE__ */ jsx91(
+    markets.length > 0 && /* @__PURE__ */ jsx93(
       AskRow,
       {
         icon: "\u26BD",
         ask: fillTemplate(strings.marketRow, {
-          market: /* @__PURE__ */ jsx91(ChoiceSelect, { currentIdx: marketIdx, sizeLabels: marketLabels, optionLabels: marketLabels, label: strings.marketName, onChoose: chooseMarket })
+          market: /* @__PURE__ */ jsx93(ChoiceSelect, { currentIdx: marketIdx, sizeLabels: marketLabels, optionLabels: marketLabels, label: strings.marketName, onChoose: chooseMarket })
         }),
         ready: marketCell ? strings.readyCount(marketCell.count) : null,
-        send: /* @__PURE__ */ jsx91(RoundSend, { label: strings.send, display: marketCell ? marketDisplay(marketCell, strings) : "", disabled: !marketCell || streaming, onClick: () => {
+        send: /* @__PURE__ */ jsx93(RoundSend, { label: strings.send, display: marketCell ? marketDisplay(marketCell, strings) : "", disabled: !marketCell || streaming, onClick: () => {
           if (marketCell) onSend(marketAsk(marketCell, strings));
         } })
       }
     ),
-    /* @__PURE__ */ jsx91("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
+    /* @__PURE__ */ jsx93("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
   ] });
 }
 function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal, initialLegs, onSend, onClose }) {
@@ -9021,29 +9074,29 @@ function BuildComboTool({ grid, strings, streaming, formatKickoff, initialTotal,
     const d = strings.comboDisplay(nextLegs, nextTotal);
     setAnnouncement(findCombo(grid, nextTotal, nextLegs) ? d : `${d}. ${strings.unavailable}`);
   };
-  const footer = /* @__PURE__ */ jsx91(SendButton, { label: strings.send, display, disabled: !cell || streaming, onClick: () => {
+  const footer = /* @__PURE__ */ jsx93(SendButton, { label: strings.send, display, disabled: !cell || streaming, onClick: () => {
     if (cell) onSend(comboAsk(cell, strings));
   } });
-  return /* @__PURE__ */ jsxs76(PresetToolModal, { title: strings.buildCombo, closeLabel: strings.close, onClose, footer, children: [
-    /* @__PURE__ */ jsxs76("div", { className: "ss-w-tool-section", role: "group", "aria-label": strings.totalLabel, children: [
-      /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-label", "aria-hidden": "true", children: strings.totalLabel }),
-      /* @__PURE__ */ jsx91("div", { className: "ss-w-tool-chips", children: totals.map((t) => /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-tool-chip", "aria-pressed": samePrice(t, total), onClick: () => choose(t, samePrice(t, total) ? legs : legsForTotal(grid, t, legs)), children: t.toFixed(1) }, t)) })
+  return /* @__PURE__ */ jsxs78(PresetToolModal, { title: strings.buildCombo, closeLabel: strings.close, onClose, footer, children: [
+    /* @__PURE__ */ jsxs78("div", { className: "ss-w-tool-section", role: "group", "aria-label": strings.totalLabel, children: [
+      /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-label", "aria-hidden": "true", children: strings.totalLabel }),
+      /* @__PURE__ */ jsx93("div", { className: "ss-w-tool-chips", children: totals.map((t) => /* @__PURE__ */ jsx93("button", { type: "button", className: "ss-w-tool-chip", "aria-pressed": samePrice(t, total), onClick: () => choose(t, samePrice(t, total) ? legs : legsForTotal(grid, t, legs)), children: t.toFixed(1) }, t)) })
     ] }),
-    /* @__PURE__ */ jsxs76("div", { className: "ss-w-tool-section", role: "group", "aria-label": strings.matchesLabel, children: [
-      /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-label", "aria-hidden": "true", children: strings.matchesLabel }),
-      /* @__PURE__ */ jsxs76("div", { className: "ss-w-tool-stepper", children: [
-        /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-tool-step", "aria-label": strings.fewerMatches, disabled: legs <= minLegs, onClick: () => choose(total, legs - 1), children: "\u2212" }),
-        /* @__PURE__ */ jsx91("span", { className: "ss-w-tool-count", children: legs }),
-        /* @__PURE__ */ jsx91("button", { type: "button", className: "ss-w-tool-step", "aria-label": strings.moreMatches, disabled: legs >= maxLegs, onClick: () => choose(total, legs + 1), children: "+" })
+    /* @__PURE__ */ jsxs78("div", { className: "ss-w-tool-section", role: "group", "aria-label": strings.matchesLabel, children: [
+      /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-label", "aria-hidden": "true", children: strings.matchesLabel }),
+      /* @__PURE__ */ jsxs78("div", { className: "ss-w-tool-stepper", children: [
+        /* @__PURE__ */ jsx93("button", { type: "button", className: "ss-w-tool-step", "aria-label": strings.fewerMatches, disabled: legs <= minLegs, onClick: () => choose(total, legs - 1), children: "\u2212" }),
+        /* @__PURE__ */ jsx93("span", { className: "ss-w-tool-count", children: legs }),
+        /* @__PURE__ */ jsx93("button", { type: "button", className: "ss-w-tool-step", "aria-label": strings.moreMatches, disabled: legs >= maxLegs, onClick: () => choose(total, legs + 1), children: "+" })
       ] })
     ] }),
-    cell ? /* @__PURE__ */ jsx91(ComboPreview, { cell, formatKickoff }) : /* @__PURE__ */ jsx91(Unavailable, { text: strings.unavailable }),
-    /* @__PURE__ */ jsx91("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
+    cell ? /* @__PURE__ */ jsx93(ComboPreview, { cell, formatKickoff }) : /* @__PURE__ */ jsx93(Unavailable, { text: strings.unavailable }),
+    /* @__PURE__ */ jsx93("p", { className: "ss-w-vh", "aria-live": "polite", children: announcement })
   ] });
 }
 
 // src/usePresetDial.ts
-import { useCallback as useCallback12, useEffect as useEffect24, useRef as useRef20, useState as useState42 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect25, useRef as useRef21, useState as useState42 } from "react";
 function sendInFlight(messages, isStreaming) {
   const last = messages[messages.length - 1];
   return isStreaming && !!last && last.role === "assistant" && !last.done && !last.isGreeting;
@@ -9061,21 +9114,21 @@ function usePresetDial({ layerRef, dialRef, dialButtonRef, messages, isStreaming
   const fold = useCallback12(() => setExpanded(false), []);
   const toggle = useCallback12(() => setExpanded((e) => !e), []);
   const currentUserId = lastUserId(messages);
-  const userIdRef = useRef20(currentUserId);
-  useEffect24(() => {
+  const userIdRef = useRef21(currentUserId);
+  useEffect25(() => {
     if (currentUserId === userIdRef.current) return;
     userIdRef.current = currentUserId;
     setExpanded(false);
   }, [currentUserId]);
-  const tabRef = useRef20(activeTab);
-  useEffect24(() => {
+  const tabRef = useRef21(activeTab);
+  useEffect25(() => {
     if (activeTab === tabRef.current) return;
     tabRef.current = activeTab;
     setExpanded(false);
   }, [activeTab]);
-  const expandedRef = useRef20(expanded);
+  const expandedRef = useRef21(expanded);
   expandedRef.current = expanded;
-  useEffect24(() => {
+  useEffect25(() => {
     const onEscape = (e) => {
       const dial = dialRef.current;
       if (e.key !== "Escape" || !dial || !e.composedPath().includes(dial)) return;
@@ -9088,7 +9141,7 @@ function usePresetDial({ layerRef, dialRef, dialButtonRef, messages, isStreaming
     window.addEventListener("keydown", onEscape, true);
     return () => window.removeEventListener("keydown", onEscape, true);
   }, [dialRef, dialButtonRef]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!expanded) return;
     const layer = layerRef.current;
     const inDial = (e) => {
@@ -9140,11 +9193,11 @@ function markToolSeen() {
 }
 
 // src/components/ChatPanel.tsx
-import { jsx as jsx92, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs79 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = useState43(false);
-  useEffect25(() => {
+  useEffect26(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
     const sync = () => setModal(mql.matches);
@@ -9158,7 +9211,7 @@ var HIDDEN_LAYER_STYLE = { position: "absolute", inset: 0, visibility: "hidden",
 function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, gamesResult, leaderboardResult, loggedIn, conversation, presetGrid }) {
   const { state, close, stop, send, reset } = controller;
   const isModal = useIsModal();
-  useEffect25(() => {
+  useEffect26(() => {
     const onKey = (e) => {
       if (e.key === "Escape") close();
     };
@@ -9173,15 +9226,15 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     monitor?.setActiveTab("chat");
     send(text, { grounding });
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (monitor && monitor.activeTab !== "chat" && state.isStreaming) monitor.markChatActivity();
   }, [monitor, state.isStreaming, state.messages.length]);
   const onChatTab = !monitor || monitor.activeTab === "chat";
-  const layerRef = useRef21(null);
-  const dialRef = useRef21(null);
-  const dialButtonRef = useRef21(null);
-  const inputRef = useRef21(null);
-  const focusAfterCloseRef = useRef21(null);
+  const layerRef = useRef22(null);
+  const dialRef = useRef22(null);
+  const dialButtonRef = useRef22(null);
+  const inputRef = useRef22(null);
+  const focusAfterCloseRef = useRef22(null);
   const [tool, setTool] = useState43(null);
   const [toolSeen, setToolSeen] = useState43(readToolSeen);
   const dial = usePresetDial({
@@ -9219,20 +9272,20 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
     const k = ui.bettingKickoff(kickoffUtc);
     return `${k.dayLabel} ${k.time}`;
   }, [ui]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (tool) return;
     const target = focusAfterCloseRef.current;
     focusAfterCloseRef.current = null;
     if (target === "dial") dialButtonRef.current?.focus();
     else if (target === "composer") inputRef.current?.focus();
   }, [tool]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!tool || onChatTab && presetGrid) return;
     focusAfterCloseRef.current = "composer";
     setTool(null);
   }, [tool, onChatTab, presetGrid]);
-  return /* @__PURE__ */ jsxs77("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsxs79("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ jsx94(
       ChatHeader,
       {
         onClose: close,
@@ -9245,7 +9298,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         moreOptionsLabel: ui.moreOptions
       }
     ),
-    monitor && /* @__PURE__ */ jsx92(
+    monitor && /* @__PURE__ */ jsx94(
       TabBar,
       {
         monitor,
@@ -9257,9 +9310,9 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         gamesEnabled: gamesResult?.enabled ?? false
       }
     ),
-    /* @__PURE__ */ jsxs77("div", { ref: layerRef, className: "ss-w-chat-layer", "data-dial": presetGrid ? "" : void 0, style: onChatTab ? void 0 : HIDDEN_LAYER_STYLE, children: [
-      /* @__PURE__ */ jsx92(PresetToolsContext.Provider, { value: toolsValue, children: /* @__PURE__ */ jsx92(MessageList, { controller, ui, slip, onDashboardTap, monitor }) }),
-      showDial ? /* @__PURE__ */ jsx92(
+    /* @__PURE__ */ jsxs79("div", { ref: layerRef, className: "ss-w-chat-layer", "data-dial": presetGrid ? "" : void 0, style: onChatTab ? void 0 : HIDDEN_LAYER_STYLE, children: [
+      /* @__PURE__ */ jsx94(PresetToolsContext.Provider, { value: toolsValue, children: /* @__PURE__ */ jsx94(MessageList, { controller, ui, slip, onDashboardTap, monitor }) }),
+      showDial ? /* @__PURE__ */ jsx94(
         PresetSpeedDial,
         {
           expanded: dial.expanded,
@@ -9271,12 +9324,12 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
           buttonRef: dialButtonRef
         }
       ) : null,
-      tool && presetGrid && onChatTab ? tool.kind === "numbers" ? /* @__PURE__ */ jsx92(SetNumbersTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, onSend: sendAsk, onClose: closeTool }) : /* @__PURE__ */ jsx92(BuildComboTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, formatKickoff, initialTotal: tool.total, initialLegs: tool.legs, onSend: sendAsk, onClose: closeTool }) : null
+      tool && presetGrid && onChatTab ? tool.kind === "numbers" ? /* @__PURE__ */ jsx94(SetNumbersTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, onSend: sendAsk, onClose: closeTool }) : /* @__PURE__ */ jsx94(BuildComboTool, { grid: presetGrid, strings: ui.presets, streaming: state.isStreaming, formatKickoff, initialTotal: tool.total, initialLegs: tool.legs, onSend: sendAsk, onClose: closeTool }) : null
     ] }),
-    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ jsx92(TodayPanel, { discovery, ui, monitor }),
-    monitor && monitor.activeTab === "following" && /* @__PURE__ */ jsx92(MatchesPanel, { monitor, ui, slip, onAsk: handleAsk }),
-    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ jsx92(OddsPanel, { monitor, ui, slip }),
-    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ jsx92(
+    monitor && discovery && monitor.activeTab === "today" && /* @__PURE__ */ jsx94(TodayPanel, { discovery, ui, monitor }),
+    monitor && monitor.activeTab === "following" && /* @__PURE__ */ jsx94(MatchesPanel, { monitor, ui, slip, onAsk: handleAsk }),
+    monitor && monitor.activeTab === "odds" && /* @__PURE__ */ jsx94(OddsPanel, { monitor, ui, slip }),
+    monitor && monitor.activeTab === "games" && gamesResult && /* @__PURE__ */ jsx94(
       GamesPanel,
       {
         loggedIn: !!loggedIn,
@@ -9290,7 +9343,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         }
       }
     ),
-    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ jsx92(
+    monitor && monitor.activeTab === "leaderboard" && leaderboardResult && /* @__PURE__ */ jsx94(
       LeaderboardPanel,
       {
         loggedIn: !!loggedIn,
@@ -9300,7 +9353,7 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
         ui
       }
     ),
-    (!monitor || monitor.activeTab !== "games" && monitor.activeTab !== "leaderboard") && /* @__PURE__ */ jsx92(
+    (!monitor || monitor.activeTab !== "games" && monitor.activeTab !== "leaderboard") && /* @__PURE__ */ jsx94(
       ChatInput,
       {
         ref: inputRef,
@@ -9318,9 +9371,9 @@ function ChatPanel({ controller, ui, slip, onDashboardTap, monitor, discovery, g
 }
 
 // src/components/HostEventsProvider.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function HostEventsProvider({ value, children }) {
-  return /* @__PURE__ */ jsx93(SlipStateContext.Provider, { value: value.slipState, children });
+  return /* @__PURE__ */ jsx95(SlipStateContext.Provider, { value: value.slipState, children });
 }
 
 // src/styles/css.generated.ts
@@ -10965,10 +11018,41 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-motm-pill { flex: none; padding: 3px 8px; font-size: 11px; }
 .ss-g-motm-foot { font-size: 14px; font-weight: 600; }
 .ss-g-motm-fun { font-size: 11px; color: var(--ss-g-faint); }
+
+/* \u2500\u2500 tap-to-answer tray + per-game team-colour band (u503) \u2500\u2500 */
+.ss-g-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
+.ss-g-tray-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 78px; padding: 6px 4px; border: 1px solid var(--ss-g-line); border-radius: 14px; background: var(--ss-g-surface); color: var(--ss-g-ink); font-family: var(--ss-g-font-body); cursor: pointer; }
+.ss-g-tray-chip:hover, .ss-g-tray-chip:focus-visible { background: var(--ss-g-raised); border-color: var(--ss-w-accent); outline: none; }
+.ss-g-tray-chip:disabled { opacity: .5; cursor: default; }
+.ss-g-tray-av { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-raised); color: var(--ss-g-muted); font-size: 14px; font-weight: 700; }
+.ss-g-tray-av img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-tray-name { width: 100%; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
+.ss-g-tray-first { max-width: 100%; font-size: 10px; font-weight: 500; color: var(--ss-g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-g-tray-last { max-width: 100%; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* Each game gets its own band colour: the operator accent mixed into the ground, hue-nudged per game.
+   Browsers without relative colour syntax keep the plain accent mix. */
+.ss-g-screen[data-game] { --ss-g-band: color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)); }
+@supports (color: oklch(from red l c h)) {
+  .ss-g-screen[data-game] { --ss-g-band: oklch(from color-mix(in srgb, var(--ss-w-accent) var(--ss-g-band-mix, 18%), var(--ss-g-ground)) l calc(c * 1.5) calc(h + var(--ss-g-hue-shift, 0))); }
+}
+.ss-g-screen[data-game="mystery-tiger"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 0; }
+.ss-g-screen[data-game="career-path"] { --ss-g-band-mix: 11%; --ss-g-hue-shift: -24; }
+.ss-g-screen[data-game] > .ss-g-head { background: var(--ss-g-band); border-radius: 0 0 24px 24px; padding-bottom: 12px; }
+.ss-g-worth { flex: none; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ss-g-muted); }
+.ss-g-worth-now { font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; color: var(--ss-w-accent); }
+.ss-g-screen[data-game="beat-the-grid"] { --ss-g-band-mix: 13%; --ss-g-hue-shift: 14; }
+.ss-g-screen[data-game="guess-the-xi"] { --ss-g-band-mix: 12%; --ss-g-hue-shift: -36; }
+.ss-g-screen[data-game="higher-or-lower"] { --ss-g-band-mix: 16%; --ss-g-hue-shift: 28; }
+.ss-g-screen[data-game="daily-quiz"] { --ss-g-band-mix: 10%; --ss-g-hue-shift: -12; }
+.ss-g-screen[data-game="stat-ladder"] { --ss-g-band-mix: 15%; --ss-g-hue-shift: 36; }
+.ss-g-screen[data-game="matchday-predictor"] { --ss-g-band-mix: 18%; --ss-g-hue-shift: -4; }
+.ss-g-screen[data-game="starting-xi"] { --ss-g-band-mix: 9%; --ss-g-hue-shift: -30; }
+.ss-g-screen[data-game="fan-motm"] { --ss-g-band-mix: 14%; --ss-g-hue-shift: 8; }
 `;
 
 // src/StatsWidget.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -11002,8 +11086,8 @@ function StatsWidget(props) {
     [built?.client]
   );
   const ui = useMemo5(() => normalizeUi(props.config ?? { operatorId: "", publicKey: "" }), [props.config]);
-  const rootRef = useRef22(null);
-  const introDoneRef = useRef22(false);
+  const rootRef = useRef23(null);
+  const introDoneRef = useRef23(false);
   const markIntroDone = useCallback14(() => {
     introDoneRef.current = true;
   }, []);
@@ -11052,11 +11136,11 @@ function StatsWidget(props) {
     pinnedMatchIds
   });
   const todayHasContent = visibleGroupsOf(discovery.groups, discovery.states).length > 0;
-  useEffect26(() => {
+  useEffect27(() => {
     setHasToday(todayHasContent);
   }, [todayHasContent]);
-  const prevLiveSnapshotRef = useRef22(monitor.snapshot);
-  useEffect26(() => {
+  const prevLiveSnapshotRef = useRef23(monitor.snapshot);
+  useEffect27(() => {
     const snap = monitor.snapshot;
     if (!snap || snap === prevLiveSnapshotRef.current) return;
     prevLiveSnapshotRef.current = snap;
@@ -11098,8 +11182,8 @@ function StatsWidget(props) {
   );
   const presetGrid = usePresetGrid({ getPricePresets, isOpen: controller.state.isOpen, locale: ui.presets.lang });
   const markTodayActivity = monitor.markTodayActivity;
-  const prevLiveCountRef = useRef22(0);
-  useEffect26(() => {
+  const prevLiveCountRef = useRef23(0);
+  useEffect27(() => {
     const rose = prevLiveCountRef.current === 0 && discovery.liveCount > 0;
     prevLiveCountRef.current = discovery.liveCount;
     if (rose) markTodayActivity();
@@ -11137,6 +11221,7 @@ function StatsWidget(props) {
     [built, logger]
   );
   const dismissPopup = usePopupTelemetry(logger, controller.state.isOpen, controller.state.popupText, controller.dismissPopup);
+  useOpenTelemetry(logger, controller.state.isOpen);
   const asks = bubbleAsks(controller.state.messages, ui.presets.standoutAsk).map((ask) => ({
     label: ask.label,
     onTap: () => runBubbleAsk(ask, {
@@ -11150,11 +11235,11 @@ function StatsWidget(props) {
   const operatorUserId = cfg?.userContext?.operatorUserId;
   const anonymousUserId = cfg?.userContext?.anonymousUserId;
   const conversationId = controller.state.conversationId ?? void 0;
-  useEffect26(() => {
+  useEffect27(() => {
     if (!logger) return;
     logger.setIdentity({ operatorUserId, anonymousUserId, conversationId });
   }, [logger, operatorUserId, anonymousUserId, conversationId]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!logger) return;
     logger.resume();
     const onHide = () => {
@@ -11172,14 +11257,14 @@ function StatsWidget(props) {
       logger.dispose();
     };
   }, [logger]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
     if (node) injectStyles(node);
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ jsx94(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ jsx94(HostEventsProvider, { value: hostEvents, children: /* @__PURE__ */ jsx94("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx96(EventLogContext.Provider, { value: logger, children: /* @__PURE__ */ jsx96(HostEventsProvider, { value: hostEvents, children: /* @__PURE__ */ jsx96("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx96(
     ChatPanel,
     {
       controller,
@@ -11194,7 +11279,7 @@ function StatsWidget(props) {
       conversation: built?.conversation ?? null,
       presetGrid
     }
-  ) : /* @__PURE__ */ jsx94(
+  ) : /* @__PURE__ */ jsx96(
     ChatFab,
     {
       label: ui.launcherLabel,