@scriptonita/chess-football-ui 0.8.0 → 0.10.0

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');
@@ -43,12 +44,17 @@ var EMBOSS_FILTER = {
   white: "drop-shadow(0 -0.75px 0 rgba(255,255,255,0.65)) drop-shadow(0 1.25px 1px rgba(0,0,0,0.45))",
   black: "drop-shadow(0 -0.5px 0 rgba(255,255,255,0.3)) drop-shadow(0 1.25px 1.5px rgba(0,0,0,0.8))"
 };
-var PieceIcon = ({ type, side }) => {
+var MOVED_GLYPH_COLOR = {
+  white: "#8b8b94",
+  black: "#bdbdc3"
+};
+var PieceIcon = ({ type, side, moved = false }) => {
   const Icon = PIECE_ICON[type] ?? lucideReact.ShieldQuestion;
   const style = {
     width: "clamp(16px, 7.4cqw, 44px)",
     height: "clamp(16px, 7.4cqw, 44px)",
-    filter: EMBOSS_FILTER[side]
+    filter: EMBOSS_FILTER[side],
+    ...moved ? { color: MOVED_GLYPH_COLOR[side] } : null
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Icon, { style, strokeWidth: 2, "aria-hidden": "true" });
 };
@@ -92,21 +98,20 @@ var ON_BOARD_CHIP_STYLE = {
     ].join(", ")
   }
 };
-var MOVED_STYLE = {
-  filter: "saturate(0.15) brightness(0.75)"
-};
 function GamePiece({ piece, isSelected, hasBall, onClick, isMoving = false }) {
   const chipStyle = ON_BOARD_CHIP_STYLE[piece.side];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       onClick,
-      style: piece.hasMovedThisTurn ? MOVED_STYLE : void 0,
+      "data-moved": piece.hasMovedThisTurn ? "true" : "false",
       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",
-        isMoving && "scale-[1.08] z-40",
-        piece.hasMovedThisTurn && "opacity-70"
+        // `--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"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -128,7 +133,7 @@ function GamePiece({ piece, isSelected, hasBall, onClick, isMoving = false }) {
             style: chipStyle,
             className: "absolute inset-0 rounded-full flex items-center justify-center",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PieceIcon, { type: piece.type, side: piece.side }),
+              /* @__PURE__ */ jsxRuntime.jsx(PieceIcon, { type: piece.type, side: piece.side, moved: piece.hasMovedThisTurn }),
               hasBall && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full ring-2 ring-orange-400 pointer-events-none" }),
               isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full animate-pulse motion-reduce:animate-none ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
             ]
@@ -138,6 +143,8 @@ function GamePiece({ piece, isSelected, hasBall, onClick, isMoving = false }) {
     }
   );
 }
+var BALL_COLOR = "var(--ball-color, #ffffff)";
+var BALL_SHADE = "color-mix(in srgb, var(--ball-color, #ffffff) 74%, #000000)";
 var Football = ({ className }) => {
   const bodyId = React.useId();
   const hiId = `${bodyId}-h`;
@@ -151,9 +158,9 @@ var Football = ({ className }) => {
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: bodyId, cx: "36%", cy: "32%", r: "68%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#f0f9ff" }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "55%", stopColor: "#bae6fd" }),
-            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#38bdf8" })
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", style: { stopColor: "#ffffff" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "55%", style: { stopColor: BALL_COLOR } }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", style: { stopColor: BALL_SHADE } })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: hiId, cx: "32%", cy: "28%", r: "22%", children: [
             /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "0.85" }),
@@ -196,6 +203,11 @@ var STATIC_I18N_KEYS = [
   "endTurnConfirmDescription",
   "endTurnConfirmYes",
   "endTurnKeepPlaying",
+  "hints.dismiss",
+  "hints.hasBall",
+  "hints.lastActionPoint",
+  "hints.selectPiece",
+  "hints.start",
   "history.empty",
   "history.goal",
   "history.interception",
@@ -265,7 +277,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: [
@@ -458,20 +470,32 @@ var ROWS = 12;
 var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
 var cellX = (x) => `${x * 100}%`;
 var cellY = (y) => `${(ROWS - 1 - y) * 100}%`;
+var TOUCH_CLICK_WINDOW_MS = 800;
 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, forgivingTaps = false, 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);
@@ -493,6 +517,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
     setInvalidClickAt({ x, y, nonce: invalidClickNonceRef.current });
   };
   const [hoveredPassAt, setHoveredPassAt] = React.useState(null);
+  const lastTouchAtRef = React.useRef(0);
   const [movingIds, setMovingIds] = React.useState(() => /* @__PURE__ */ new Set());
   const setMoving = (id, moving) => setMovingIds((prev) => {
     if (prev.has(id) === moving) return prev;
@@ -539,21 +564,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;
@@ -578,11 +603,24 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
   const passCarrier = boardState.pieces.find((p) => p.id === selectedPieceId && boardState.ball.holderId === p.id) ?? null;
   const trajectoryPath = hoveredPassAt && passCarrier ? passCarrier.type === "knight" ? [hoveredPassAt] : chessFootballEngine.getPath(passCarrier.pos, hoveredPassAt) : null;
   const trajectoryIntercepted = !!(trajectoryPath && passCarrier && trajectoryPath.some((sq) => boardState.pieces.some((p) => p.pos.x === sq.x && p.pos.y === sq.y && p.side !== passCarrier.side)));
-  const handleSquareClick = (x, y) => {
+  const soleAdjacentTarget = (x, y) => {
+    const near = [...validMoves, ...validPasses].filter(
+      (t2, i, all) => Math.max(Math.abs(t2.x - x), Math.abs(t2.y - y)) === 1 && all.findIndex((o) => o.x === t2.x && o.y === t2.y) === i
+    );
+    return near.length === 1 ? near[0] : null;
+  };
+  const handleSquareClick = (x, y, fromTouch = false) => {
     if (replay) return;
     setCursor(null);
     const isValidMove = validMoves.some((m) => m.x === x && m.y === y);
     const isValidPass = validPasses.some((p) => p.x === x && p.y === y);
+    if (!isValidMove && !isValidPass && fromTouch && forgivingTaps && selectedPieceId) {
+      const target = soleAdjacentTarget(x, y);
+      if (target) {
+        handleSquareClick(target.x, target.y);
+        return;
+      }
+    }
     if (isValidMove && isValidPass) {
       setDisambiguateAt({ x, y });
       return;
@@ -667,8 +705,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 +717,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);
@@ -735,27 +777,35 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
               role: "gridcell",
               "aria-label": squareLabel(x, y, pieceAt, isValidMove, isValidPass),
               "aria-selected": !!pieceAt && pieceAt.id === selectedPieceId,
-              onClick: () => handleSquareClick(x, y),
+              onClick: () => handleSquareClick(x, y, Date.now() - lastTouchAtRef.current < TOUCH_CLICK_WINDOW_MS),
               onMouseEnter: () => {
                 if (isValidPass) setHoveredPassAt({ x, y });
               },
               onMouseLeave: () => setHoveredPassAt(null),
+              onTouchStart: () => {
+                lastTouchAtRef.current = Date.now();
+                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 +870,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: [
@@ -850,7 +904,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, tool
                     },
                     "aria-label": t("shortcuts.buttonLabel"),
                     "aria-expanded": shortcutsOpen,
-                    className: "w-8 h-8 flex items-center justify-center rounded-full bg-bg-secondary/80 border border-border-subtle text-fg-muted hover:text-fg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
+                    className: "w-11 h-11 flex items-center justify-center rounded-full bg-bg-secondary/80 border border-border-subtle text-fg-muted hover:text-fg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
                     children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
                   }
                 ),
@@ -1020,7 +1074,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 +1106,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 +1175,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 +1228,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 +1246,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 +1292,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 +1322,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 +1356,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 +1500,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 +1514,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 +1534,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 +1569,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 +1605,6 @@ function SelectedPieceDetail({ isMyTurn, className }) {
       ),
       role: "status",
       "aria-live": "polite",
-      "aria-label": `${longName} ${square}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -1519,7 +1633,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 +1740,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 +1786,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 +1801,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 +1835,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 +1874,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) });
@@ -1808,7 +1926,7 @@ function SheetHeader({ titleId, onClose }) {
       "button",
       {
         onClick: onClose,
-        className: "w-8 h-8 flex items-center justify-center rounded-full bg-bg-surface hover:bg-bg-surface-elevated text-fg-muted hover:text-fg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
+        className: "w-11 h-11 -mr-2 flex items-center justify-center rounded-full bg-bg-surface hover:bg-bg-surface-elevated text-fg-muted hover:text-fg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
         "aria-label": t("history.close"),
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, "aria-hidden": "true" })
       }
@@ -1862,20 +1980,209 @@ function HistoryChip({ lastMove, onClick, className }) {
     }
   );
 }
+var GAME_HINT_IDS = ["lastActionPoint", "hasBall", "selectPiece", "start"];
+function GameHints({ userSide, seen, onSeen, className }) {
+  const t = useGameT();
+  const boardState = chunkBSE4DUXM_cjs.useGameStore((s) => s.boardState);
+  const selectedPieceId = chunkBSE4DUXM_cjs.useGameStore((s) => s.selectedPieceId);
+  const [done, setDone] = React.useState([]);
+  const myTurn = !!boardState && userSide !== null && boardState.turn === userSide;
+  const selected = myTurn ? boardState.pieces.find((p) => p.id === selectedPieceId) : void 0;
+  const applies = {
+    lastActionPoint: myTurn && boardState.actionPoints === 1,
+    hasBall: !!selected && boardState?.ball.holderId === selected.id,
+    selectPiece: !!selected,
+    start: myTurn && !selected
+  };
+  const current = GAME_HINT_IDS.find((id) => applies[id] && !seen.includes(id) && !done.includes(id)) ?? null;
+  const onSeenRef = React.useRef(onSeen);
+  onSeenRef.current = onSeen;
+  const markSeen = (id) => {
+    setDone((d) => d.includes(id) ? d : [...d, id]);
+    onSeenRef.current(id);
+  };
+  const shownRef = React.useRef(null);
+  React.useEffect(() => {
+    const prev = shownRef.current;
+    shownRef.current = current;
+    if (prev && prev !== current && !done.includes(prev)) markSeen(prev);
+  }, [current]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: cn("pointer-events-none flex justify-center", className), children: current && /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "game-hint",
+      "data-hint": current,
+      className: "pointer-events-auto flex items-center gap-1 max-w-sm pl-4 pr-0.5 rounded-xl bg-bg-secondary/95 border border-border-subtle shadow-lg backdrop-blur-sm",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-2 font-inter text-sm leading-snug text-fg-primary", children: t(`hints.${current}`) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => markSeen(current),
+            "aria-label": t("hints.dismiss"),
+            className: "shrink-0 w-11 h-11 flex items-center justify-center rounded-full text-fg-muted hover:text-fg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var BOT_TURN_START_DELAY_MS = 400;
+var BOT_TURN_STEP_MS = 900;
+var BOT_TURN_SETTLE_MS = 500;
+var PROVIDER_DEFER_MS = 30;
+function useBotTurn(opts) {
+  const [botThinking, setBotThinking] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [retryNonce, setRetryNonce] = React.useState(0);
+  const optsRef = React.useRef(opts);
+  optsRef.current = opts;
+  const pending = React.useRef(false);
+  const runId = React.useRef(0);
+  const timers = React.useRef(/* @__PURE__ */ new Set());
+  const skipRef = React.useRef(null);
+  const clearTimers = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current.clear();
+  };
+  React.useEffect(() => () => {
+    runId.current++;
+    clearTimers();
+    pending.current = false;
+    skipRef.current = null;
+  }, []);
+  const { boardState, enabled = true, matchOver = false, goalPending = false } = opts;
+  React.useEffect(() => {
+    const o = optsRef.current;
+    const board = o.boardState;
+    if (!board || !enabled || board.turn !== o.botSide) return;
+    if (pending.current || matchOver || goalPending) return;
+    if (chessFootballEngine.checkGoal(board)) return;
+    const run = ++runId.current;
+    const alive = () => runId.current === run;
+    const wait = (ms) => new Promise((resolve) => {
+      const id = setTimeout(() => {
+        timers.current.delete(id);
+        resolve();
+      }, ms);
+      timers.current.add(id);
+    });
+    const settle = () => {
+      pending.current = false;
+      skipRef.current = null;
+      setBotThinking(false);
+      optsRef.current.onProcessingChange?.(false);
+    };
+    pending.current = true;
+    setBotThinking(true);
+    setError(null);
+    o.onProcessingChange?.(true);
+    let skipRequested = false;
+    skipRef.current = () => {
+      skipRequested = true;
+    };
+    const startDelay = o.startDelayMs ?? BOT_TURN_START_DELAY_MS;
+    const stepMs = o.stepMs ?? BOT_TURN_STEP_MS;
+    const settleMs = o.settleMs ?? BOT_TURN_SETTLE_MS;
+    (async () => {
+      try {
+        const [turn] = await Promise.all([
+          wait(Math.min(PROVIDER_DEFER_MS, startDelay)).then(() => o.getTurn(board, o.botSide)),
+          wait(startDelay)
+        ]);
+        if (!alive()) return;
+        if (!turn?.states?.length) throw new Error("Bot turn returned no states");
+        const { states } = turn;
+        const last = states[states.length - 1];
+        const shown = turn.closedByEndTurn ? states.length - 1 : states.length;
+        const finish = () => {
+          clearTimers();
+          optsRef.current.onApplyState(last);
+          settle();
+          const scorer = turn.goalScored ?? null;
+          if (scorer) optsRef.current.onGoal?.(scorer, last);
+        };
+        skipRef.current = () => {
+          if (alive()) finish();
+        };
+        if (skipRequested) {
+          finish();
+          return;
+        }
+        for (let i = 0; i < shown; i++) {
+          optsRef.current.onApplyState(states[i]);
+          await wait(i === shown - 1 ? settleMs : stepMs);
+          if (!alive()) return;
+        }
+        finish();
+      } catch (err) {
+        if (!alive()) return;
+        clearTimers();
+        settle();
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    })();
+  }, [boardState?.turn, enabled, matchOver, goalPending, retryNonce]);
+  const retry = React.useCallback(() => {
+    setError(null);
+    setRetryNonce((n) => n + 1);
+  }, []);
+  const skip = React.useCallback(() => {
+    skipRef.current?.();
+  }, []);
+  return { botThinking, error, retry, skip };
+}
+
+// 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",
+  "--ball-color"
+];
 
 exports.ActionPoints = ActionPoints;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.AvatarImage = AvatarImage;
+exports.BOT_TURN_SETTLE_MS = BOT_TURN_SETTLE_MS;
+exports.BOT_TURN_START_DELAY_MS = BOT_TURN_START_DELAY_MS;
+exports.BOT_TURN_STEP_MS = BOT_TURN_STEP_MS;
 exports.BallHolderChip = BallHolderChip;
 exports.Button = Button;
 exports.ConfirmDialog = ConfirmDialog;
 exports.EventToast = EventToast;
 exports.Football = Football;
+exports.GAME_HINT_IDS = GAME_HINT_IDS;
 exports.GAME_I18N_KEYS = GAME_I18N_KEYS;
 exports.GOAL_AREA_SHADE_CLASS = GOAL_AREA_SHADE_CLASS;
 exports.GameBoard = GameBoard;
 exports.GameControls = GameControls;
+exports.GameHints = GameHints;
 exports.GameI18nProvider = GameI18nProvider;
 exports.GamePiece = GamePiece;
 exports.GrassOverlay = GrassOverlay;
@@ -1887,6 +2194,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;
@@ -1894,6 +2203,7 @@ exports.TurnBanner = TurnBanner;
 exports.cn = cn;
 exports.isGoalAreaSquare = isGoalAreaSquare;
 exports.pitchSquareClass = pitchSquareClass;
+exports.useBotTurn = useBotTurn;
 exports.useDialogA11y = useDialogA11y;
 exports.useGameT = useGameT;
 //# sourceMappingURL=index.cjs.map