@scriptonita/chess-football-ui 0.8.0 → 0.9.0

package/README.md

@@ -52,9 +52,20 @@ expect(missing).toEqual([])
 ```
 
 **2. Design tokens.** Components emit Tailwind classes bound to tokens the app defines. A
-token that is missing fails silently — the rule simply does not apply. The board's
-`--last-move-highlight`, `--move-highlight`, `--pass-highlight`, `--accent-green`,
-`--accent-green-light` and `--accent-green-dark` are all required.
+token that is missing fails silently — Tailwind emits the rule, the variable resolves to
+nothing, and the declaration is dropped. That is how `--last-move-highlight` went missing
+in the CrazyGames SPA: the last-move highlight and the bot's turn replay never rendered,
+with no error anywhere. `REQUIRED_TOKENS` is the manifest; assert it the same way:
+
+```ts
+import { REQUIRED_TOKENS } from '@scriptonita/chess-football-ui'
+
+const css = readFileSync('src/index.css', 'utf8')
+expect(REQUIRED_TOKENS.filter(t => !css.includes(`${t}:`))).toEqual([])
+```
+
+`--field-frame` is new in 0.9.0: the board frame was hardcoded `#1a3317` in three places,
+hand-tuned for the webapp's grass and visibly wrong against the CrazyGames pitch.
 
 ## Peer dependencies
 

package/dist/{chunk-LTFNSTAQ.cjs → chunk-BSE4DUXM.cjs}

@@ -4,19 +4,31 @@ var zustand = require('zustand');
 var chessFootballEngine = require('@scriptonita/chess-football-engine');
 
 // src/store/use-game-store.ts
-var useGameStore = zustand.create((set) => ({
+var DEFAULT_MAX_AP = 5;
+var INITIAL = {
   boardState: null,
   selectedPieceId: null,
-  interactionMode: null,
+  interactionMode: null
+};
+var useGameStore = zustand.create((set) => ({
+  ...INITIAL,
   setBoardState: (state) => set({ boardState: state }),
   setSelectedPieceId: (id) => set({ selectedPieceId: id }),
   setInteractionMode: (mode) => set({ interactionMode: mode }),
+  /**
+   * The store is a module-global singleton, so a new match opens on the
+   * previous match's final board — which ended on a goal, and was therefore
+   * re-detected as a fresh goal (the bug behind webapp PR #42). Apps were
+   * each reaching for `useGameStore.setState({...})` by hand to work around
+   * it; this makes the intent explicit and keeps the shape in one place.
+   */
+  reset: () => set({ ...INITIAL }),
   resetTurn: () => set((state) => {
     if (!state.boardState) return state;
     return {
       boardState: {
         ...state.boardState,
-        actionPoints: state.boardState.maxActionPoints ?? 5,
+        actionPoints: state.boardState.maxActionPoints ?? DEFAULT_MAX_AP,
         pieces: state.boardState.pieces.map((p) => ({ ...p, hasMovedThisTurn: false }))
       }
     };
@@ -50,6 +62,7 @@ Object.defineProperty(exports, "getInitialBoardState", {
   enumerable: true,
   get: function () { return chessFootballEngine.getInitialBoardState; }
 });
+exports.DEFAULT_MAX_AP = DEFAULT_MAX_AP;
 exports.useGameStore = useGameStore;
-//# sourceMappingURL=chunk-LTFNSTAQ.cjs.map
-//# sourceMappingURL=chunk-LTFNSTAQ.cjs.map
+//# sourceMappingURL=chunk-BSE4DUXM.cjs.map
+//# sourceMappingURL=chunk-BSE4DUXM.cjs.map

package/dist/chunk-BSE4DUXM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store/use-game-store.ts"],"names":["create","applyMove","applyPass","applyEndTurn"],"mappings":"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","file":"chunk-BSE4DUXM.cjs","sourcesContent":["import { create } from 'zustand'\nimport type { BoardState, Position } from '@scriptonita/chess-football-engine'\nimport { applyMove, applyPass, applyEndTurn } from '@scriptonita/chess-football-engine'\n\n// The canonical kickoff position lives in the engine (rules-adjacent). Re-exported\n// here so app imports from `@scriptonita/chess-football-ui/store` keep working.\nexport { getInitialBoardState } from '@scriptonita/chess-football-engine'\n\n/**\n * Fallback when a board predates configurable action points. `maxActionPoints`\n * is optional on `BoardState`, and every consumer was inventing its own `?? 5`\n * — except `TurnBanner`, which had none and rendered \"3/\" on an old match.\n */\nexport const DEFAULT_MAX_AP = 5\n\ninterface GameStore {\n    boardState: BoardState | null\n    selectedPieceId: string | null\n    interactionMode: 'move' | 'pass' | null\n    setBoardState: (state: BoardState) => void\n    setSelectedPieceId: (id: string | null) => void\n    setInteractionMode: (mode: 'move' | 'pass' | null) => void\n    resetTurn: () => void\n    /** Return the store to its initial state. */\n    reset: () => void\n    movePiece: (pieceId: string, to: Position) => void\n    passBall: (to: Position) => void\n    endTurn: () => void\n}\n\nconst INITIAL = {\n    boardState: null,\n    selectedPieceId: null,\n    interactionMode: null,\n} satisfies Pick<GameStore, 'boardState' | 'selectedPieceId' | 'interactionMode'>\n\nexport const useGameStore = create<GameStore>((set) => ({\n    ...INITIAL,\n\n    setBoardState: (state) => set({ boardState: state }),\n    setSelectedPieceId: (id) => set({ selectedPieceId: id }),\n    setInteractionMode: (mode) => set({ interactionMode: mode }),\n\n    /**\n     * The store is a module-global singleton, so a new match opens on the\n     * previous match's final board — which ended on a goal, and was therefore\n     * re-detected as a fresh goal (the bug behind webapp PR #42). Apps were\n     * each reaching for `useGameStore.setState({...})` by hand to work around\n     * it; this makes the intent explicit and keeps the shape in one place.\n     */\n    reset: () => set({ ...INITIAL }),\n\n    resetTurn: () => set((state) => {\n        if (!state.boardState) return state\n        return {\n            boardState: {\n                ...state.boardState,\n                actionPoints: state.boardState.maxActionPoints ?? DEFAULT_MAX_AP,\n                pieces: state.boardState.pieces.map(p => ({ ...p, hasMovedThisTurn: false })),\n            },\n        }\n    }),\n\n    movePiece: (pieceId, to) => set((state) => {\n        if (!state.boardState || state.boardState.actionPoints <= 0) return state\n        const piece = state.boardState.pieces.find(p => p.id === pieceId)\n        if (!piece || piece.hasMovedThisTurn) return state\n\n        const { boardState } = applyMove(state.boardState, pieceId, to)\n        return { boardState, selectedPieceId: null, interactionMode: null }\n    }),\n\n    passBall: (to) => set((state) => {\n        if (!state.boardState || state.boardState.actionPoints <= 0 || !state.boardState.ball.holderId) return state\n        const holder = state.boardState.pieces.find(p => p.id === state.boardState!.ball.holderId)\n        if (!holder) return state\n\n        const { boardState, forcedTurnEnd } = applyPass(state.boardState, to)\n        const keepSelection = !forcedTurnEnd && boardState.ball.holderId\n        return {\n            boardState,\n            selectedPieceId: keepSelection ? boardState.ball.holderId : null,\n            interactionMode: keepSelection ? 'pass' : null,\n        }\n    }),\n\n    endTurn: () => set((state) => {\n        if (!state.boardState) return state\n        return { boardState: applyEndTurn(state.boardState) }\n    }),\n}))\n"]}

package/dist/{chunk-N24LGLLO.js → chunk-C5HCN7O5.js}

@@ -3,19 +3,31 @@ import { applyEndTurn, applyPass, applyMove } from '@scriptonita/chess-football-
 export { getInitialBoardState } from '@scriptonita/chess-football-engine';
 
 // src/store/use-game-store.ts
-var useGameStore = create((set) => ({
+var DEFAULT_MAX_AP = 5;
+var INITIAL = {
   boardState: null,
   selectedPieceId: null,
-  interactionMode: null,
+  interactionMode: null
+};
+var useGameStore = create((set) => ({
+  ...INITIAL,
   setBoardState: (state) => set({ boardState: state }),
   setSelectedPieceId: (id) => set({ selectedPieceId: id }),
   setInteractionMode: (mode) => set({ interactionMode: mode }),
+  /**
+   * The store is a module-global singleton, so a new match opens on the
+   * previous match's final board — which ended on a goal, and was therefore
+   * re-detected as a fresh goal (the bug behind webapp PR #42). Apps were
+   * each reaching for `useGameStore.setState({...})` by hand to work around
+   * it; this makes the intent explicit and keeps the shape in one place.
+   */
+  reset: () => set({ ...INITIAL }),
   resetTurn: () => set((state) => {
     if (!state.boardState) return state;
     return {
       boardState: {
         ...state.boardState,
-        actionPoints: state.boardState.maxActionPoints ?? 5,
+        actionPoints: state.boardState.maxActionPoints ?? DEFAULT_MAX_AP,
         pieces: state.boardState.pieces.map((p) => ({ ...p, hasMovedThisTurn: false }))
       }
     };
@@ -45,6 +57,6 @@ var useGameStore = create((set) => ({
   })
 }));
 
-export { useGameStore };
-//# sourceMappingURL=chunk-N24LGLLO.js.map
-//# sourceMappingURL=chunk-N24LGLLO.js.map
+export { DEFAULT_MAX_AP, useGameStore };
+//# sourceMappingURL=chunk-C5HCN7O5.js.map
+//# sourceMappingURL=chunk-C5HCN7O5.js.map

package/dist/chunk-C5HCN7O5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store/use-game-store.ts"],"names":[],"mappings":";;;;;AAaO,IAAM,cAAA,GAAiB;AAiB9B,IAAM,OAAA,GAAU;AAAA,EACZ,UAAA,EAAY,IAAA;AAAA,EACZ,eAAA,EAAiB,IAAA;AAAA,EACjB,eAAA,EAAiB;AACrB,CAAA;AAEO,IAAM,YAAA,GAAe,MAAA,CAAkB,CAAC,GAAA,MAAS;AAAA,EACpD,GAAG,OAAA;AAAA,EAEH,eAAe,CAAC,KAAA,KAAU,IAAI,EAAE,UAAA,EAAY,OAAO,CAAA;AAAA,EACnD,oBAAoB,CAAC,EAAA,KAAO,IAAI,EAAE,eAAA,EAAiB,IAAI,CAAA;AAAA,EACvD,oBAAoB,CAAC,IAAA,KAAS,IAAI,EAAE,eAAA,EAAiB,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS3D,OAAO,MAAM,GAAA,CAAI,EAAE,GAAG,SAAS,CAAA;AAAA,EAE/B,SAAA,EAAW,MAAM,GAAA,CAAI,CAAC,KAAA,KAAU;AAC5B,IAAA,IAAI,CAAC,KAAA,CAAM,UAAA,EAAY,OAAO,KAAA;AAC9B,IAAA,OAAO;AAAA,MACH,UAAA,EAAY;AAAA,QACR,GAAG,KAAA,CAAM,UAAA;AAAA,QACT,YAAA,EAAc,KAAA,CAAM,UAAA,CAAW,eAAA,IAAmB,cAAA;AAAA,QAClD,MAAA,EAAQ,KAAA,CAAM,UAAA,CAAW,MAAA,CAAO,GAAA,CAAI,CAAA,CAAA,MAAM,EAAE,GAAG,CAAA,EAAG,gBAAA,EAAkB,KAAA,EAAM,CAAE;AAAA;AAChF,KACJ;AAAA,EACJ,CAAC,CAAA;AAAA,EAED,WAAW,CAAC,OAAA,EAAS,EAAA,KAAO,GAAA,CAAI,CAAC,KAAA,KAAU;AACvC,IAAA,IAAI,CAAC,KAAA,CAAM,UAAA,IAAc,MAAM,UAAA,CAAW,YAAA,IAAgB,GAAG,OAAO,KAAA;AACpE,IAAA,MAAM,KAAA,GAAQ,MAAM,UAAA,CAAW,MAAA,CAAO,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA;AAChE,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,gBAAA,EAAkB,OAAO,KAAA;AAE7C,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,UAAU,KAAA,CAAM,UAAA,EAAY,SAAS,EAAE,CAAA;AAC9D,IAAA,OAAO,EAAE,UAAA,EAAY,eAAA,EAAiB,IAAA,EAAM,iBAAiB,IAAA,EAAK;AAAA,EACtE,CAAC,CAAA;AAAA,EAED,QAAA,EAAU,CAAC,EAAA,KAAO,GAAA,CAAI,CAAC,KAAA,KAAU;AAC7B,IAAA,IAAI,CAAC,KAAA,CAAM,UAAA,IAAc,KAAA,CAAM,UAAA,CAAW,YAAA,IAAgB,CAAA,IAAK,CAAC,KAAA,CAAM,UAAA,CAAW,IAAA,CAAK,QAAA,EAAU,OAAO,KAAA;AACvG,IAAA,MAAM,MAAA,GAAS,KAAA,CAAM,UAAA,CAAW,MAAA,CAAO,IAAA,CAAK,CAAA,CAAA,KAAK,CAAA,CAAE,EAAA,KAAO,KAAA,CAAM,UAAA,CAAY,IAAA,CAAK,QAAQ,CAAA;AACzF,IAAA,IAAI,CAAC,QAAQ,OAAO,KAAA;AAEpB,IAAA,MAAM,EAAE,UAAA,EAAY,aAAA,KAAkB,SAAA,CAAU,KAAA,CAAM,YAAY,EAAE,CAAA;AACpE,IAAA,MAAM,aAAA,GAAgB,CAAC,aAAA,IAAiB,UAAA,CAAW,IAAA,CAAK,QAAA;AACxD,IAAA,OAAO;AAAA,MACH,UAAA;AAAA,MACA,eAAA,EAAiB,aAAA,GAAgB,UAAA,CAAW,IAAA,CAAK,QAAA,GAAW,IAAA;AAAA,MAC5D,eAAA,EAAiB,gBAAgB,MAAA,GAAS;AAAA,KAC9C;AAAA,EACJ,CAAC,CAAA;AAAA,EAED,OAAA,EAAS,MAAM,GAAA,CAAI,CAAC,KAAA,KAAU;AAC1B,IAAA,IAAI,CAAC,KAAA,CAAM,UAAA,EAAY,OAAO,KAAA;AAC9B,IAAA,OAAO,EAAE,UAAA,EAAY,YAAA,CAAa,KAAA,CAAM,UAAU,CAAA,EAAE;AAAA,EACxD,CAAC;AACL,CAAA,CAAE","file":"chunk-C5HCN7O5.js","sourcesContent":["import { create } from 'zustand'\nimport type { BoardState, Position } from '@scriptonita/chess-football-engine'\nimport { applyMove, applyPass, applyEndTurn } from '@scriptonita/chess-football-engine'\n\n// The canonical kickoff position lives in the engine (rules-adjacent). Re-exported\n// here so app imports from `@scriptonita/chess-football-ui/store` keep working.\nexport { getInitialBoardState } from '@scriptonita/chess-football-engine'\n\n/**\n * Fallback when a board predates configurable action points. `maxActionPoints`\n * is optional on `BoardState`, and every consumer was inventing its own `?? 5`\n * — except `TurnBanner`, which had none and rendered \"3/\" on an old match.\n */\nexport const DEFAULT_MAX_AP = 5\n\ninterface GameStore {\n    boardState: BoardState | null\n    selectedPieceId: string | null\n    interactionMode: 'move' | 'pass' | null\n    setBoardState: (state: BoardState) => void\n    setSelectedPieceId: (id: string | null) => void\n    setInteractionMode: (mode: 'move' | 'pass' | null) => void\n    resetTurn: () => void\n    /** Return the store to its initial state. */\n    reset: () => void\n    movePiece: (pieceId: string, to: Position) => void\n    passBall: (to: Position) => void\n    endTurn: () => void\n}\n\nconst INITIAL = {\n    boardState: null,\n    selectedPieceId: null,\n    interactionMode: null,\n} satisfies Pick<GameStore, 'boardState' | 'selectedPieceId' | 'interactionMode'>\n\nexport const useGameStore = create<GameStore>((set) => ({\n    ...INITIAL,\n\n    setBoardState: (state) => set({ boardState: state }),\n    setSelectedPieceId: (id) => set({ selectedPieceId: id }),\n    setInteractionMode: (mode) => set({ interactionMode: mode }),\n\n    /**\n     * The store is a module-global singleton, so a new match opens on the\n     * previous match's final board — which ended on a goal, and was therefore\n     * re-detected as a fresh goal (the bug behind webapp PR #42). Apps were\n     * each reaching for `useGameStore.setState({...})` by hand to work around\n     * it; this makes the intent explicit and keeps the shape in one place.\n     */\n    reset: () => set({ ...INITIAL }),\n\n    resetTurn: () => set((state) => {\n        if (!state.boardState) return state\n        return {\n            boardState: {\n                ...state.boardState,\n                actionPoints: state.boardState.maxActionPoints ?? DEFAULT_MAX_AP,\n                pieces: state.boardState.pieces.map(p => ({ ...p, hasMovedThisTurn: false })),\n            },\n        }\n    }),\n\n    movePiece: (pieceId, to) => set((state) => {\n        if (!state.boardState || state.boardState.actionPoints <= 0) return state\n        const piece = state.boardState.pieces.find(p => p.id === pieceId)\n        if (!piece || piece.hasMovedThisTurn) return state\n\n        const { boardState } = applyMove(state.boardState, pieceId, to)\n        return { boardState, selectedPieceId: null, interactionMode: null }\n    }),\n\n    passBall: (to) => set((state) => {\n        if (!state.boardState || state.boardState.actionPoints <= 0 || !state.boardState.ball.holderId) return state\n        const holder = state.boardState.pieces.find(p => p.id === state.boardState!.ball.holderId)\n        if (!holder) return state\n\n        const { boardState, forcedTurnEnd } = applyPass(state.boardState, to)\n        const keepSelection = !forcedTurnEnd && boardState.ball.holderId\n        return {\n            boardState,\n            selectedPieceId: keepSelection ? boardState.ball.holderId : null,\n            interactionMode: keepSelection ? 'pass' : null,\n        }\n    }),\n\n    endTurn: () => set((state) => {\n        if (!state.boardState) return state\n        return { boardState: applyEndTurn(state.boardState) }\n    }),\n}))\n"]}

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkLTFNSTAQ_cjs = require('./chunk-LTFNSTAQ.cjs');
+var chunkBSE4DUXM_cjs = require('./chunk-BSE4DUXM.cjs');
+var shallow = require('zustand/react/shallow');
 var chessFootballEngine = require('@scriptonita/chess-football-engine');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -104,7 +105,10 @@ function GamePiece({ piece, isSelected, hasBall, onClick, isMoving = false }) {
       style: piece.hasMovedThisTurn ? MOVED_STYLE : void 0,
       className: cn(
         "relative w-[88%] h-[88%] rounded-full cursor-pointer z-10 transition-transform duration-200 ease-out motion-reduce:transition-none",
-        isSelected && "ring-4 ring-primary scale-110 z-30",
+        // `--primary` was the package's one remaining shadcn token, and
+        // CrazyGames had to define it by hand just to make the selection
+        // ring visible. It is part of the design system now.
+        isSelected && "ring-4 ring-accent-green scale-110 z-30",
         isMoving && "scale-[1.08] z-40",
         piece.hasMovedThisTurn && "opacity-70"
       ),
@@ -265,7 +269,7 @@ function useGameT() {
 }
 function BallHolderChip({ className }) {
   const t = useGameT();
-  const boardState = chunkLTFNSTAQ_cjs.useGameStore((s) => s.boardState);
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   const holder = boardState?.pieces.find((p) => p.id === boardState.ball.holderId) ?? null;
   if (!holder) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5 min-h-[1.75rem]", className), "aria-live": "polite", children: [
@@ -460,18 +464,29 @@ var cellX = (x) => `${x * 100}%`;
 var cellY = (y) => `${(ROWS - 1 - y) * 100}%`;
 var PIECE_SLIDE = { type: "spring", stiffness: 190, damping: 28, mass: 1 };
 var BALL_SLIDE = { type: "spring", stiffness: 300, damping: 26, mass: 0.6 };
-function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, toolbar = true }) {
+function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, toolbar = true, className }) {
   const t = useGameT();
   const boardId = React.useId();
   const prefersReducedMotion = framerMotion.useReducedMotion();
   const {
     boardState,
     selectedPieceId,
+    interactionMode,
     setSelectedPieceId,
     setInteractionMode,
     movePiece,
     passBall
-  } = chunkLTFNSTAQ_cjs.useGameStore();
+  } = chunkBSE4DUXM_cjs.useGameStore(
+    shallow.useShallow((s) => ({
+      boardState: s.boardState,
+      selectedPieceId: s.selectedPieceId,
+      interactionMode: s.interactionMode,
+      setSelectedPieceId: s.setSelectedPieceId,
+      setInteractionMode: s.setInteractionMode,
+      movePiece: s.movePiece,
+      passBall: s.passBall
+    }))
+  );
   const [cursor, setCursor] = React.useState(null);
   const [disambiguateAt, setDisambiguateAt] = React.useState(null);
   const [shortcutsOpen, setShortcutsOpen] = React.useState(false);
@@ -539,21 +554,21 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
     return () => clearTimeout(id);
   }, [replay]);
   const validMoves = React.useMemo(() => {
-    if (!boardState) return [];
+    if (!boardState || interactionMode === "pass") return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
     if (sp && !sp.hasMovedThisTurn) {
       return chessFootballEngine.getValidMoves(sp, boardState);
     }
     return [];
-  }, [boardState, selectedPieceId]);
+  }, [boardState, selectedPieceId, interactionMode]);
   const validPasses = React.useMemo(() => {
-    if (!boardState) return [];
+    if (!boardState || interactionMode === "move") return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
     if (sp && boardState.ball.holderId === sp.id) {
       return chessFootballEngine.getValidPasses(sp, boardState);
     }
     return [];
-  }, [boardState, selectedPieceId]);
+  }, [boardState, selectedPieceId, interactionMode]);
   if (!boardState) return null;
   const lastMove = boardState.lastMove;
   const ball = boardState.ball;
@@ -667,8 +682,11 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
         activate(c.x, c.y);
         break;
       }
+      // Bare M / P only: Cmd+P is Print and Ctrl+M is a browser shortcut,
+      // and both used to resolve the popover behind the user's back.
       case "m":
       case "M":
+        if (e.ctrlKey || e.metaKey || e.altKey) break;
         if (disambiguateAt && selectedPieceId) {
           movePiece(selectedPieceId, disambiguateAt);
           setDisambiguateAt(null);
@@ -676,6 +694,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
         break;
       case "p":
       case "P":
+        if (e.ctrlKey || e.metaKey || e.altKey) break;
         if (disambiguateAt) {
           passBall(disambiguateAt);
           setDisambiguateAt(null);
@@ -740,22 +759,29 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
                 if (isValidPass) setHoveredPassAt({ x, y });
               },
               onMouseLeave: () => setHoveredPassAt(null),
+              onTouchStart: () => {
+                if (isValidPass) setHoveredPassAt({ x, y });
+              },
               className: cn(
                 pitchSquareClass(x, y),
                 "flex items-center justify-center cursor-pointer",
                 !isValidMove && !isValidPass && isLastMove && "bg-last-move-highlight/20",
                 // §8: pulsing warning ring on enemy goal area
                 isOffsideRisk && isEnemyGoalArea && !isValidMove && !isValidPass && "ring-2 ring-inset ring-warning/60",
-                isAmbiguous && "ring-[3px] ring-inset ring-yellow-400/90 bg-yellow-400/20",
-                !isAmbiguous && isValidMove && "ring-[3px] ring-inset ring-yellow-400/80 bg-yellow-400/15",
-                !isAmbiguous && isValidPass && "ring-[3px] ring-inset ring-sky-400/80 bg-sky-400/15"
+                // Move and pass used raw yellow-400/sky-400 here while
+                // the popover a few lines below used the
+                // move-highlight/pass-highlight tokens — two palettes
+                // for the same two concepts. One palette now: tokens.
+                isAmbiguous && "ring-[3px] ring-inset ring-move-highlight/90 bg-move-highlight/20",
+                !isAmbiguous && isValidMove && "ring-[3px] ring-inset ring-move-highlight/80 bg-move-highlight/15",
+                !isAmbiguous && isValidPass && "ring-[3px] ring-inset ring-pass-highlight/80 bg-pass-highlight/15"
               ),
               children: [
-                !isAmbiguous && isValidMove && !pieceAt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 rounded-full bg-yellow-400/65" }),
-                !isAmbiguous && isValidPass && !pieceAt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 rounded-full bg-sky-400/65" }),
-                isAmbiguous && !pieceAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-yellow-400/80" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-sky-400/80" })
+                !isAmbiguous && isValidMove && !pieceAt && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "move-marker", className: "w-3 h-3 rounded-full bg-move-highlight/65" }),
+                !isAmbiguous && isValidPass && !pieceAt && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "pass-marker", className: "w-3.5 h-3.5 rounded-full border-2 border-pass-highlight/80" }),
+                isAmbiguous && !pieceAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "move-marker", className: "w-2.5 h-2.5 rounded-full bg-move-highlight/80" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "pass-marker", className: "w-2.5 h-2.5 rounded-full border-2 border-pass-highlight/90" })
                 ] }),
                 isCursor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 ring-2 ring-inset ring-white pointer-events-none z-20", "aria-hidden": "true" }),
                 isDisambiguateTarget && selectedPieceId && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -820,10 +846,14 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
       "data-testid": "board-root",
       className: cn(
         // §6: Mobile edge-to-edge — thin 2px margin, no border, no radius
-        "w-full mx-0.5 bg-[#1a3317] overflow-hidden",
+        // The frame was hardcoded #1a3317 in three files, hand-tuned for
+        // the webapp's darker grass and visibly wrong against the
+        // CrazyGames pitch. It is a token now (see README).
+        "w-full mx-0.5 bg-field-frame overflow-hidden",
         // §5+§6: Desktop — centered, rounded, bordered, height-based max-width
-        "md:mx-auto md:rounded-xl md:shadow-2xl md:border-4 md:border-[#1a3317]",
-        "md:max-w-[min(700px,calc((100dvh_-_150px)*0.75))]"
+        "md:mx-auto md:rounded-xl md:shadow-2xl md:border-4 md:border-field-frame",
+        "md:max-w-[min(700px,calc((100dvh_-_150px)*0.75))]",
+        !showCoordinates && className
       ),
       children: [
         toolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex items-center justify-between gap-2 px-2.5 py-1", "data-testid": "board-toolbar", children: [
@@ -1020,7 +1050,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
   );
   if (!showCoordinates) return board;
   const ranksTopToBottom = [...chessFootballEngine.RANK_LABELS].reverse();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-[540px] md:max-w-none mx-auto", "aria-hidden": "false", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-[540px] md:max-w-none mx-auto", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "grid gap-1 select-none",
@@ -1052,8 +1082,20 @@ function Avatar({ className, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-9 h-9 rounded-full overflow-hidden shrink-0", className), children });
 }
 function AvatarImage({ src, alt, className }) {
-  if (!src) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: alt ?? "", className: cn("w-full h-full object-cover", className) });
+  const [failed, setFailed] = React.useState(false);
+  React.useEffect(() => {
+    setFailed(false);
+  }, [src]);
+  if (!src || failed) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt: alt ?? "",
+      onError: () => setFailed(true),
+      className: cn("w-full h-full object-cover", className)
+    }
+  );
 }
 function AvatarFallback({ className, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center text-xs font-semibold", className), children });
@@ -1109,6 +1151,51 @@ function ActionPoints({ total, remaining, size = 20, className, kingMustRelease
     );
   }) });
 }
+function PlayerIdentity({
+  name,
+  team,
+  variant = "full",
+  isActive = false,
+  align = "left",
+  adornment,
+  className
+}) {
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn(
+          "font-inter text-[11px] font-medium truncate max-w-[160px]",
+          isActive ? "text-fg-secondary" : "text-fg-muted",
+          className
+        ),
+        children: [
+          name,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono uppercase tracking-[0.5px] text-fg-muted", children: [
+            " \xB7 ",
+            team
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1 min-w-0", align === "right" && "items-end", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "font-inter text-[13px] font-semibold leading-none truncate transition-colors duration-300",
+          isActive ? "text-fg-primary" : "text-fg-muted"
+        ),
+        children: name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", align === "right" && "flex-row-reverse"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase tracking-[0.5px]", children: team }),
+      adornment
+    ] })
+  ] });
+}
 function initials(name) {
   return (name?.split(" ").map((w) => w[0]).join("").toUpperCase() || "?").slice(0, 2);
 }
@@ -1117,10 +1204,11 @@ function Scoreboard({
   opponentUsername,
   creatorAvatarUrl,
   opponentAvatarUrl,
-  userSide
+  userSide,
+  className
 }) {
   const t = useGameT();
-  const { boardState } = chunkLTFNSTAQ_cjs.useGameStore();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   if (!boardState?.score) return null;
   const { score, turn, actionPoints, kingMustRelease } = boardState;
   const myScore = userSide === "white" ? score.white : score.black;
@@ -1134,8 +1222,8 @@ function Scoreboard({
   const isMyTurn = turn === userSide;
   const myKingMustRelease = isMyTurn && kingMustRelease === turn;
   const rivalKingMustRelease = !isMyTurn && kingMustRelease === turn;
-  const maxAP = boardState.maxActionPoints ?? 5;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-secondary flex items-center justify-between px-5 py-2.5", children: [
+  const maxAP = boardState.maxActionPoints ?? chunkBSE4DUXM_cjs.DEFAULT_MAX_AP;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full bg-bg-secondary flex items-center justify-between px-5 py-2.5", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       PlayerInfo,
       {
@@ -1180,14 +1268,16 @@ function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, maxActionPo
       /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-bg-surface-elevated text-fg-secondary text-xs font-semibold", children: initials(name) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", align === "right" && "items-end"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-        "font-inter text-[13px] font-semibold leading-none transition-colors duration-300",
-        isActive ? "text-fg-primary" : "text-fg-muted"
-      ), children: name }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", align === "right" && "flex-row-reverse"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase", children: team }),
-        isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse motion-reduce:animate-none", "aria-hidden": "true" })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerIdentity,
+        {
+          name,
+          team,
+          isActive,
+          align,
+          adornment: isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse motion-reduce:animate-none", "aria-hidden": "true" }) : void 0
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ActionPoints,
         {
@@ -1208,7 +1298,7 @@ function MiniScoreboard({
   className
 }) {
   const t = useGameT();
-  const { boardState } = chunkLTFNSTAQ_cjs.useGameStore();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   if (!boardState?.score) return null;
   const { score, turn } = boardState;
   const myScore = userSide === "white" ? score.white : score.black;
@@ -1242,14 +1332,7 @@ function MiniScoreboard({
 }
 function SideCell({ name, team, score, isActive, align }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-w-0", align === "right" ? "items-end" : "items-start"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-      "font-mono text-[10px] uppercase tracking-[0.5px] truncate max-w-[160px]",
-      isActive ? "text-fg-secondary" : "text-fg-muted"
-    ), children: [
-      name,
-      " \xB7 ",
-      team
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlayerIdentity, { name, team, variant: "compact", isActive }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
       "font-anton text-[32px] leading-none tabular-nums",
       isActive ? "text-fg-primary" : "text-fg-secondary"
@@ -1393,11 +1476,9 @@ function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, on
     }
   );
 }
-function GameControls({ isMyTurn }) {
-  const {
-    boardState,
-    endTurn
-  } = chunkLTFNSTAQ_cjs.useGameStore();
+function GameControls({ isMyTurn, className }) {
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
+  const endTurn = chunkBSE4DUXM_cjs.useGameStore((s) => s.endTurn);
   const t = useGameT();
   const [showEndTurnConfirm, setShowEndTurnConfirm] = React.useState(false);
   if (!boardState) return null;
@@ -1409,7 +1490,7 @@ function GameControls({ isMyTurn }) {
       endTurn();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-secondary flex flex-col gap-3 px-5 pt-3 pb-5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full bg-bg-secondary flex flex-col gap-3 px-5 pt-3 pb-5", className), children: [
     isMyTurn && /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -1429,7 +1510,15 @@ function GameControls({ isMyTurn }) {
         ]
       }
     ),
-    !isMyTurn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-11 rounded-md bg-bg-surface border border-border-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-inter text-sm text-fg-muted", children: t("waitingRival") }) }),
+    !isMyTurn && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        className: "flex items-center justify-center h-11 rounded-md bg-bg-surface border border-border-subtle",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-inter text-sm text-fg-muted", children: t("waitingRival") })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ConfirmDialog,
       {
@@ -1456,7 +1545,9 @@ var PIECE_ICON2 = {
 };
 function SelectedPieceDetail({ isMyTurn, className }) {
   const t = useGameT();
-  const { boardState, selectedPieceId } = chunkLTFNSTAQ_cjs.useGameStore();
+  const { boardState, selectedPieceId } = chunkBSE4DUXM_cjs.useGameStore(
+    shallow.useShallow((s) => ({ boardState: s.boardState, selectedPieceId: s.selectedPieceId }))
+  );
   if (!boardState) return null;
   const piece = boardState.pieces.find((p) => p.id === selectedPieceId);
   if (!piece) {
@@ -1490,7 +1581,6 @@ function SelectedPieceDetail({ isMyTurn, className }) {
       ),
       role: "status",
       "aria-live": "polite",
-      "aria-label": `${longName} ${square}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -1519,7 +1609,7 @@ function SelectedPieceDetail({ isMyTurn, className }) {
 }
 function MoveHistory({ scrollable = true, limit, className }) {
   const t = useGameT();
-  const { boardState } = chunkLTFNSTAQ_cjs.useGameStore();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   const scrollRef = React.useRef(null);
   const history = boardState?.moveHistory ?? [];
   const visible = limit ? history.slice(-limit) : history;
@@ -1626,9 +1716,9 @@ function HistoryRow({ entry, isLatest }) {
 }
 var COLS2 = 9;
 var ROWS2 = 12;
-function StaticGameBoard() {
-  const boardState = React.useMemo(() => chunkLTFNSTAQ_cjs.getInitialBoardState("white"), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden rounded-xl shadow-2xl border-4 border-[#1a3317] bg-[#1a3317]", children: [
+function StaticGameBoard({ className } = {}) {
+  const boardState = React.useMemo(() => chunkBSE4DUXM_cjs.getInitialBoardState("white"), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full overflow-hidden rounded-xl shadow-2xl border-4 border-field-frame bg-field-frame", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(PitchSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none", children: boardState.pieces.map((piece) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1672,9 +1762,10 @@ function StaticGameBoard() {
 }
 function TurnBanner({ isMyTurn, waitingLabel, className }) {
   const t = useGameT();
-  const { boardState } = chunkLTFNSTAQ_cjs.useGameStore();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   if (!boardState) return null;
-  const { actionPoints, maxActionPoints } = boardState;
+  const { actionPoints, turnNumber } = boardState;
+  const maxActionPoints = boardState.maxActionPoints ?? chunkBSE4DUXM_cjs.DEFAULT_MAX_AP;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1686,16 +1777,19 @@ function TurnBanner({ isMyTurn, waitingLabel, className }) {
       "aria-live": "polite",
       "aria-atomic": "true",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(
-              "font-anton text-sm tracking-[1.5px] uppercase",
-              isMyTurn ? "text-accent-green" : "text-fg-muted"
-            ),
-            children: isMyTurn ? t("yourTurn") : waitingLabel ?? t("waitingRival")
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "font-anton text-sm tracking-[1.5px] uppercase truncate",
+                isMyTurn ? "text-accent-green" : "text-fg-muted"
+              ),
+              children: isMyTurn ? t("yourTurn") : waitingLabel ?? t("waitingRival")
+            }
+          ),
+          typeof turnNumber === "number" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase tracking-[0.5px] shrink-0", children: t("history.turn", { n: turnNumber }) })
+        ] }),
         isMyTurn && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", "aria-label": t("actionPointsAriaLabel", { remaining: actionPoints, total: maxActionPoints }), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { size: 12, className: "text-accent-green", "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-xs text-fg-secondary tabular-nums", children: [
@@ -1717,7 +1811,7 @@ var TOAST_CONFIG = {
 };
 function EventToast({ className }) {
   const t = useGameT();
-  const { boardState } = chunkLTFNSTAQ_cjs.useGameStore();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   const [toast, setToast] = React.useState(null);
   React.useEffect(() => {
     const lastMove = boardState?.lastMove;
@@ -1756,7 +1850,7 @@ function EventToast({ className }) {
   );
 }
 function MobileHistory({ className }) {
-  const { boardState } = chunkLTFNSTAQ_cjs.useGameStore();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
   const [open, setOpen] = React.useState(false);
   const titleId = `${React.useId()}-title`;
   const panelRef = useDialogA11y({ open, onClose: () => setOpen(false) });
@@ -1863,6 +1957,35 @@ function HistoryChip({ lastMove, onClick, className }) {
   );
 }
 
+// src/tokens.ts
+var REQUIRED_TOKENS = [
+  // Surfaces
+  "--bg-primary",
+  "--bg-secondary",
+  "--bg-surface",
+  "--bg-surface-elevated",
+  // Text
+  "--fg-primary",
+  "--fg-secondary",
+  "--fg-muted",
+  // Accent (the primary CTA rests on the dark step — see Button)
+  "--accent-green",
+  "--accent-green-light",
+  "--accent-green-dark",
+  // Borders
+  "--border-subtle",
+  // Semantic
+  "--danger",
+  "--warning",
+  // Board
+  "--field-green-1",
+  "--field-green-2",
+  "--field-frame",
+  "--move-highlight",
+  "--pass-highlight",
+  "--last-move-highlight"
+];
+
 exports.ActionPoints = ActionPoints;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
@@ -1887,6 +2010,8 @@ exports.PITCH_COLS = PITCH_COLS;
 exports.PITCH_ROWS = PITCH_ROWS;
 exports.PitchMarkings = PitchMarkings;
 exports.PitchSurface = PitchSurface;
+exports.PlayerIdentity = PlayerIdentity;
+exports.REQUIRED_TOKENS = REQUIRED_TOKENS;
 exports.Scoreboard = Scoreboard;
 exports.SelectedPieceDetail = SelectedPieceDetail;
 exports.StaticGameBoard = StaticGameBoard;