@scriptonita/chess-football-ui 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import { useGameStore, getInitialBoardState } from './chunk-YLNDQ4HG.js';
-import { getValidMoves, getValidPasses, RANK_LABELS, FILE_LABELS, LONG_KEY, squareName, SHORT_KEY } from '@scriptonita/chess-football-engine';
+import { getValidMoves, getValidPasses, isInEnemyArea, RANK_LABELS, FILE_LABELS, LONG_KEY, squareName, SHORT_KEY } from '@scriptonita/chess-football-engine';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Crown, Zap, Move, Flag, ShieldQuestion, ChessKnight, ChessBishop, ChessRook, ChessQueen, ChessKing } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { MotionConfig, AnimatePresence, motion } from 'framer-motion';
+import { Crown, Zap, Flag, ShieldQuestion, ChessKnight, ChessBishop, ChessRook, ChessQueen, ChessKing, X, Move } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { createContext, useId, useState, useRef, useEffect, useMemo, useContext } from 'react';
+import { createContext, useId, useContext, useState, useRef, useEffect, useMemo } from 'react';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -18,14 +18,18 @@ var PIECE_ICON = {
   bishop: ChessBishop,
   knight: ChessKnight
 };
-var PieceIcon = ({ type }) => {
+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 }) => {
   const Icon = PIECE_ICON[type] ?? ShieldQuestion;
   const style = {
     width: "clamp(16px, 7.4cqw, 44px)",
     height: "clamp(16px, 7.4cqw, 44px)",
-    filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.35))"
+    filter: EMBOSS_FILTER[side]
   };
-  return /* @__PURE__ */ jsx(Icon, { style, strokeWidth: 1.75, "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx(Icon, { style, strokeWidth: 2, "aria-hidden": "true" });
 };
 var WHITE_PIECE_STYLE = {
   background: "radial-gradient(circle at 30% 25%, #ffffff 0%, #f4f4f5 55%, #d4d4d8 100%)",
@@ -66,8 +70,16 @@ function GamePiece({ piece, isSelected, hasBall, onClick }) {
         piece.hasMovedThisTurn && "opacity-70"
       ),
       children: [
-        /* @__PURE__ */ jsx(PieceIcon, { type: piece.type }),
+        /* @__PURE__ */ jsx(PieceIcon, { type: piece.type, side: piece.side }),
         hasBall && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full ring-2 ring-orange-400 pointer-events-none" }),
+        piece.hasMovedThisTurn && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-0.5 right-0.5 w-[14px] h-[14px] rounded-full bg-fg-muted/80 flex items-center justify-center text-[9px] text-bg-primary font-bold leading-none pointer-events-none",
+            children: "\u2713"
+          }
+        ),
         isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full animate-pulse ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
       ]
     }
@@ -121,20 +133,29 @@ var Football = ({ className }) => {
     }
   );
 };
+var fallback = (key) => key;
+var GameI18nContext = createContext(fallback);
+function GameI18nProvider({ t, children }) {
+  return /* @__PURE__ */ jsx(GameI18nContext.Provider, { value: t, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: "user", children }) });
+}
+function useGameT() {
+  return useContext(GameI18nContext);
+}
 var COLS = 9;
 var ROWS = 12;
 var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
+function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
+  const t = useGameT();
   const {
     boardState,
     selectedPieceId,
     setSelectedPieceId,
-    interactionMode,
     setInteractionMode,
     movePiece,
     passBall
   } = useGameStore();
   const [cursor, setCursor] = useState(null);
+  const [disambiguateAt, setDisambiguateAt] = useState(null);
   const prevBallRef = useRef(boardState?.ball);
   const prevBall = prevBallRef.current;
   useEffect(() => {
@@ -143,19 +164,19 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
   const validMoves = useMemo(() => {
     if (!boardState) return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
-    if (sp && interactionMode === "move" && !sp.hasMovedThisTurn) {
+    if (sp && !sp.hasMovedThisTurn) {
       return getValidMoves(sp, boardState);
     }
     return [];
-  }, [boardState, selectedPieceId, interactionMode]);
+  }, [boardState, selectedPieceId]);
   const validPasses = useMemo(() => {
     if (!boardState) return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
-    if (sp && interactionMode === "pass") {
+    if (sp && boardState.ball.holderId === sp.id) {
       return getValidPasses(sp, boardState);
     }
     return [];
-  }, [boardState, selectedPieceId, interactionMode]);
+  }, [boardState, selectedPieceId]);
   if (!boardState) return null;
   const lastMove = boardState.lastMove;
   const ball = boardState.ball;
@@ -175,33 +196,40 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
     );
     pickupProportion = totalSteps > 0 ? Math.min(0.85, Math.max(0.15, stepsToBall / totalSteps)) : 0.5;
   }
+  const ballCarrier = ball.holderId ? boardState.pieces.find((p) => p.id === ball.holderId) ?? null : null;
+  const isOffsideRisk = !!ballCarrier && ballCarrier.type !== "king" && userSide !== null && ballCarrier.side === userSide && boardState.turn === userSide && isInEnemyArea(ballCarrier.pos, ballCarrier.side);
   const handleSquareClick = (x, y) => {
-    if (interactionMode === "move" && selectedPieceId) {
-      if (validMoves.some((m) => m.x === x && m.y === y)) {
-        movePiece(selectedPieceId, { x, y });
-      }
-    } else if (interactionMode === "pass" && selectedPieceId) {
-      if (validPasses.some((p) => p.x === x && p.y === y)) {
-        passBall({ x, y });
-      }
+    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) {
+      setDisambiguateAt({ x, y });
+      return;
+    }
+    if (isValidMove && selectedPieceId) {
+      movePiece(selectedPieceId, { x, y });
+      setDisambiguateAt(null);
+    } else if (isValidPass) {
+      passBall({ x, y });
+      setDisambiguateAt(null);
+    } else {
+      setDisambiguateAt(null);
     }
   };
   const handlePieceClick = (pieceId, x, y, e) => {
     e.stopPropagation();
     const pieceAt = boardState.pieces.find((p) => p.id === pieceId);
     if (!pieceAt) return;
-    const isValidDest = validMoves.some((m) => m.x === x && m.y === y) || validPasses.some((p) => p.x === x && p.y === y);
-    if (isValidDest) {
+    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) {
       handleSquareClick(x, y);
     } else if (boardState.turn === pieceAt.side && userSide === pieceAt.side) {
       if (selectedPieceId === pieceAt.id) {
-        if (boardState.ball.holderId === pieceAt.id) {
-          setInteractionMode(interactionMode === "move" ? "pass" : "move");
-        }
+        setSelectedPieceId(null);
       } else {
         setSelectedPieceId(pieceAt.id);
-        setInteractionMode("move");
       }
+      setDisambiguateAt(null);
     }
   };
   const defaultCursor = () => {
@@ -230,7 +258,6 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
       case "ArrowUp":
         step(0, 1);
         break;
-      // visually up = higher rank (y grows toward the top)
       case "ArrowDown":
         step(0, -1);
         break;
@@ -250,15 +277,25 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
       }
       case "m":
       case "M":
-        setInteractionMode("move");
+        if (disambiguateAt && selectedPieceId) {
+          movePiece(selectedPieceId, disambiguateAt);
+          setDisambiguateAt(null);
+        }
         break;
       case "p":
       case "P":
-        setInteractionMode("pass");
+        if (disambiguateAt) {
+          passBall(disambiguateAt);
+          setDisambiguateAt(null);
+        }
         break;
       case "Escape":
-        setSelectedPieceId(null);
-        setInteractionMode(null);
+        if (disambiguateAt) {
+          setDisambiguateAt(null);
+        } else {
+          setSelectedPieceId(null);
+          setInteractionMode(null);
+        }
         break;
     }
   };
@@ -268,9 +305,16 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
       for (let x = 0; x < COLS; x++) {
         const isGoalArea = x >= 2 && x <= 6 && (y >= 0 && y <= 1 || y >= 10 && y <= 11);
         const isEven = (x + y) % 2 === 0;
-        const isValidDest = validMoves.some((m) => m.x === x && m.y === y) || validPasses.some((p) => p.x === x && p.y === y);
+        const isValidMove = validMoves.some((m) => m.x === x && m.y === y);
+        const isValidPass = validPasses.some((p) => p.x === x && p.y === y);
+        const isAmbiguous = isValidMove && isValidPass;
+        const isLastMoveOrigin = lastMove?.from && lastMove.from.x === x && lastMove.from.y === y;
+        const isLastMoveDest = lastMove?.to && lastMove.to.x === x && lastMove.to.y === y;
+        const isLastMove = isLastMoveOrigin || isLastMoveDest;
+        const isEnemyGoalArea = userSide !== null && (x >= 2 && x <= 6) && (userSide === "white" ? y >= 10 && y <= 11 : y >= 0 && y <= 1);
         const pieceAt = boardState.pieces.find((p) => p.pos.x === x && p.pos.y === y);
         const isCursor = keyboardNav && cursor?.x === x && cursor?.y === y;
+        const isDisambiguateTarget = disambiguateAt?.x === x && disambiguateAt?.y === y;
         squares.push(
           /* @__PURE__ */ jsxs(
             "div",
@@ -278,16 +322,60 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
               onClick: () => handleSquareClick(x, y),
               className: cn(
                 "relative aspect-square w-full flex items-center justify-center cursor-pointer",
-                isEven ? "bg-[#2d5a27]" : "bg-[#356a2d]",
+                isEven ? "bg-field-green-1" : "bg-field-green-2",
                 isGoalArea && "bg-[#1a3a18] ring-1 ring-inset ring-emerald-500/30",
-                isValidDest && (interactionMode === "move" ? "ring-2 ring-inset ring-yellow-400/50 bg-yellow-400/10" : "ring-2 ring-inset ring-sky-400/50 bg-sky-400/10")
+                !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"
               ),
               children: [
-                isValidDest && !pieceAt && /* @__PURE__ */ jsx("div", { className: cn(
-                  "w-3 h-3 rounded-full",
-                  interactionMode === "move" ? "bg-yellow-400/40" : "bg-sky-400/40"
-                ) }),
-                isCursor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 ring-2 ring-inset ring-white pointer-events-none z-20", "aria-hidden": "true" })
+                !isAmbiguous && isValidMove && !pieceAt && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-yellow-400/65" }),
+                !isAmbiguous && isValidPass && !pieceAt && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-sky-400/65" }),
+                isAmbiguous && !pieceAt && /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5", children: [
+                  /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-yellow-400/80" }),
+                  /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-sky-400/80" })
+                ] }),
+                isCursor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 ring-2 ring-inset ring-white pointer-events-none z-20", "aria-hidden": "true" }),
+                isDisambiguateTarget && selectedPieceId && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "absolute z-50 bottom-full mb-1 left-1/2 -translate-x-1/2 flex gap-1 bg-bg-secondary border border-border-subtle rounded-md p-1 shadow-xl pointer-events-auto whitespace-nowrap",
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          className: "flex items-center gap-1 px-2 py-1 rounded text-[11px] font-semibold font-inter text-move-highlight bg-move-highlight/10 hover:bg-move-highlight/20 transition-colors",
+                          onClick: () => {
+                            movePiece(selectedPieceId, { x, y });
+                            setDisambiguateAt(null);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Move, { size: 11, strokeWidth: 2 }),
+                            t("move")
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          className: "flex items-center gap-1 px-2 py-1 rounded text-[11px] font-semibold font-inter text-pass-highlight bg-pass-highlight/10 hover:bg-pass-highlight/20 transition-colors",
+                          onClick: () => {
+                            passBall({ x, y });
+                            setDisambiguateAt(null);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "w-3 h-3 inline-flex", children: /* @__PURE__ */ jsx(Football, {}) }),
+                            t("pass")
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
               ]
             },
             `${x}-${y}`
@@ -301,7 +389,11 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
     "div",
     {
       className: cn(
-        "w-full max-w-[500px] mx-auto overflow-hidden rounded-xl shadow-2xl border-4 border-[#1a3317] bg-[#1a3317]",
+        // §6: Mobile edge-to-edge — thin 2px margin, no border, no radius
+        "w-full mx-0.5 bg-[#1a3317] 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))]",
         keyboardNav && "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-green focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary"
       ),
       ...keyboardNav ? {
@@ -336,12 +428,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: boardState.pieces.map((piece) => {
             const isPickupCarrier = pickupCarrierId === piece.id;
-            const pieceTransition = isPickupCarrier ? { duration: PICKUP_DURATION, ease: "linear" } : {
-              type: "spring",
-              stiffness: 200,
-              damping: 25,
-              mass: 1
-            };
+            const pieceTransition = isPickupCarrier ? { duration: PICKUP_DURATION, ease: "linear" } : { type: "spring", stiffness: 200, damping: 25, mass: 1 };
             return /* @__PURE__ */ jsx(
               motion.div,
               {
@@ -385,23 +472,10 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
                 top: [`${prevY}%`, `${prevY}%`, `${prevY}%`, `${targetY}%`],
                 scale: [1, 1, 1.35, 1]
               };
-              transition = {
-                duration: PICKUP_DURATION,
-                times: [0, pulseStart, pickupProportion, 1],
-                ease: "linear"
-              };
+              transition = { duration: PICKUP_DURATION, times: [0, pulseStart, pickupProportion, 1], ease: "linear" };
             } else {
-              animate = {
-                left: `${targetX}%`,
-                top: `${targetY}%`,
-                scale: 1
-              };
-              transition = {
-                type: "spring",
-                stiffness: 300,
-                damping: 30,
-                mass: 0.5
-              };
+              animate = { left: `${targetX}%`, top: `${targetY}%`, scale: 1 };
+              transition = { type: "spring", stiffness: 300, damping: 30, mass: 0.5 };
             }
             return /* @__PURE__ */ jsx(
               motion.div,
@@ -421,13 +495,17 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
               "ball"
             );
           })()
+        ] }),
+        isOffsideRisk && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 px-3 py-1.5 bg-warning/20 border border-warning/50 rounded-full font-inter text-xs font-semibold text-warning pointer-events-none whitespace-nowrap backdrop-blur-sm", children: [
+          "\u26A0 ",
+          t("offsideWarning")
         ] })
       ] })
     }
   );
   if (!showCoordinates) return board;
   const ranksTopToBottom = [...RANK_LABELS].reverse();
-  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-[540px] mx-auto", "aria-hidden": "false", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-[540px] md:max-w-none mx-auto", "aria-hidden": "false", children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: "grid gap-1 select-none",
@@ -450,26 +528,10 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
   ) });
 }
 function FileRow({ files }) {
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 gap-[1px] px-[2px]", children: files.map((f) => /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: "flex items-center justify-center font-mono text-[9px] text-fg-muted/80 uppercase tracking-[0.5px]",
-      children: f
-    },
-    f
-  )) });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 gap-[1px] px-[2px]", children: files.map((f) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex items-center justify-center font-mono text-[9px] text-fg-muted/80 uppercase tracking-[0.5px]", children: f }, f)) });
 }
 function RankColumn({ ranks }) {
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-rows-12 gap-[1px] py-[2px]", children: ranks.map((r) => /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: "flex items-center justify-center font-mono text-[9px] text-fg-muted/80 tabular-nums",
-      children: r
-    },
-    r
-  )) });
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-rows-12 gap-[1px] py-[2px]", children: ranks.map((r) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex items-center justify-center font-mono text-[9px] text-fg-muted/80 tabular-nums", children: r }, r)) });
 }
 function Avatar({ className, children }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative w-9 h-9 rounded-full overflow-hidden shrink-0", className), children });
@@ -481,14 +543,6 @@ function AvatarImage({ src, alt, className }) {
 function AvatarFallback({ className, children }) {
   return /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 flex items-center justify-center text-xs font-semibold", className), children });
 }
-var fallback = (key) => key;
-var GameI18nContext = createContext(fallback);
-function GameI18nProvider({ t, children }) {
-  return /* @__PURE__ */ jsx(GameI18nContext.Provider, { value: t, children });
-}
-function useGameT() {
-  return useContext(GameI18nContext);
-}
 function ActionPoints({ total, remaining, size = 20, className, kingMustRelease }) {
   const t = useGameT();
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1.5", className), "aria-label": t("actionPointsAriaLabel", { remaining, total }), children: Array.from({ length: total }).map((_, i) => {
@@ -546,6 +600,7 @@ function Scoreboard({
   const isMyTurn = turn === userSide;
   const myKingMustRelease = isMyTurn && kingMustRelease === turn;
   const rivalKingMustRelease = !isMyTurn && kingMustRelease === turn;
+  const maxAP = boardState.maxActionPoints ?? 5;
   return /* @__PURE__ */ jsxs("div", { className: "w-full bg-bg-secondary flex items-center justify-between px-5 py-2.5", children: [
     /* @__PURE__ */ jsx(
       PlayerInfo,
@@ -555,6 +610,7 @@ function Scoreboard({
         avatarUrl: myAvatar,
         isActive: isMyTurn,
         actionPoints: isMyTurn ? actionPoints : 0,
+        maxActionPoints: maxAP,
         kingMustRelease: myKingMustRelease,
         align: "left"
       }
@@ -572,13 +628,14 @@ function Scoreboard({
         avatarUrl: rivalAvatar,
         isActive: !isMyTurn,
         actionPoints: !isMyTurn ? actionPoints : 0,
+        maxActionPoints: maxAP,
         kingMustRelease: rivalKingMustRelease,
         align: "right"
       }
     )
   ] });
 }
-function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, kingMustRelease, align }) {
+function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, maxActionPoints, kingMustRelease, align }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", align === "right" && "flex-row-reverse"), children: [
     /* @__PURE__ */ jsxs(Avatar, { className: cn(
       "w-9 h-9 border-2 transition-colors duration-300",
@@ -599,7 +656,7 @@ function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, kingMustRel
       /* @__PURE__ */ jsx(
         ActionPoints,
         {
-          total: 5,
+          total: maxActionPoints,
           remaining: actionPoints,
           size: 12,
           kingMustRelease,
@@ -720,78 +777,36 @@ function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, on
 function GameControls({ isMyTurn }) {
   const {
     boardState,
-    selectedPieceId,
-    interactionMode,
-    setInteractionMode,
     endTurn
   } = useGameStore();
   const t = useGameT();
   const [showEndTurnConfirm, setShowEndTurnConfirm] = useState(false);
   if (!boardState) return null;
   const actionPoints = boardState.actionPoints;
-  const selectedPiece = boardState.pieces.find((p) => p.id === selectedPieceId);
-  const hasBall = selectedPiece && boardState.ball.holderId === selectedPiece.id;
-  const canPass = hasBall && actionPoints > 0;
-  const canMove = actionPoints > 0 && !selectedPiece?.hasMovedThisTurn;
+  const handleEndTurn = () => {
+    if (actionPoints >= 2) {
+      setShowEndTurnConfirm(true);
+    } else {
+      endTurn();
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "w-full bg-bg-secondary flex flex-col gap-3 px-5 pt-3 pb-5", children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { children: isMyTurn && /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        initial: { opacity: 0, y: 8 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: 8 },
-        className: "flex gap-2",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setInteractionMode("move"),
-              disabled: !canMove,
-              className: cn(
-                "flex-1 flex items-center justify-center gap-2 h-11 rounded-md border font-inter text-sm font-semibold",
-                "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-move-highlight",
-                "disabled:opacity-40 disabled:cursor-not-allowed",
-                interactionMode === "move" ? "bg-move-highlight/10 border-move-highlight text-move-highlight" : "bg-bg-surface border-border-subtle text-move-highlight hover:bg-move-highlight/5"
-              ),
-              "aria-pressed": interactionMode === "move",
-              children: [
-                /* @__PURE__ */ jsx(Move, { size: 16, strokeWidth: 2 }),
-                t("move")
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setInteractionMode("pass"),
-              disabled: !canPass,
-              className: cn(
-                "flex-1 flex items-center justify-center gap-2 h-11 rounded-md border font-inter text-sm font-semibold",
-                "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pass-highlight",
-                "disabled:opacity-40 disabled:cursor-not-allowed",
-                interactionMode === "pass" ? "bg-pass-highlight/10 border-pass-highlight text-pass-highlight" : "bg-bg-surface border-border-subtle text-pass-highlight hover:bg-pass-highlight/5"
-              ),
-              "aria-pressed": interactionMode === "pass",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "w-4 h-4 inline-flex", children: /* @__PURE__ */ jsx(Football, {}) }),
-                t("pass")
-              ]
-            }
-          )
-        ]
-      },
-      "action-btns"
-    ) }),
     isMyTurn && /* @__PURE__ */ jsxs(
       Button,
       {
         variant: "primary",
         size: "default",
         className: "w-full gap-2 tracking-[1.5px]",
-        onClick: () => setShowEndTurnConfirm(true),
+        onClick: handleEndTurn,
         children: [
           /* @__PURE__ */ jsx(Flag, { size: 16, strokeWidth: 2 }),
-          t("endTurn")
+          t("endTurn"),
+          actionPoints >= 2 && /* @__PURE__ */ jsxs("span", { className: cn("ml-1 font-inter text-xs font-normal opacity-70 tracking-normal"), children: [
+            "\xB7 ",
+            actionPoints,
+            " ",
+            t("actionPointsShort")
+          ] })
         ]
       }
     ),
@@ -1082,7 +1097,194 @@ function StaticGameBoard() {
     )
   ] });
 }
+function TurnBanner({ isMyTurn, waitingLabel, className }) {
+  const t = useGameT();
+  const { boardState } = useGameStore();
+  if (!boardState) return null;
+  const { actionPoints, maxActionPoints } = boardState;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full h-9 flex items-center justify-between px-4 shrink-0 transition-colors duration-300",
+        isMyTurn ? "bg-accent-green/15 border-b border-accent-green/30" : "bg-bg-surface border-b border-border-subtle",
+        className
+      ),
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: [
+        /* @__PURE__ */ 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")
+          }
+        ),
+        isMyTurn && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", "aria-label": t("actionPointsAriaLabel", { remaining: actionPoints, total: maxActionPoints }), children: [
+          /* @__PURE__ */ jsx(Zap, { size: 12, className: "text-accent-green", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-fg-secondary tabular-nums", children: [
+            actionPoints,
+            "/",
+            maxActionPoints
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var TOASTABLE = /* @__PURE__ */ new Set(["interception", "offside", "tackle"]);
+var TOAST_CONFIG = {
+  interception: "bg-danger/20 border-danger/50 text-danger",
+  offside: "bg-warning/20 border-warning/50 text-warning",
+  tackle: "bg-warning/20 border-warning/50 text-warning"
+};
+function EventToast({ className }) {
+  const t = useGameT();
+  const { boardState } = useGameStore();
+  const [toast, setToast] = useState(null);
+  useEffect(() => {
+    const lastMove = boardState?.lastMove;
+    if (!lastMove) return;
+    if (!TOASTABLE.has(lastMove.type)) return;
+    setToast({ type: lastMove.type, key: String(lastMove.at) });
+  }, [boardState?.lastMove?.at]);
+  useEffect(() => {
+    if (!toast) return;
+    const timer = setTimeout(() => setToast(null), 2500);
+    return () => clearTimeout(timer);
+  }, [toast?.key]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: cn("pointer-events-none flex justify-center", className),
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: toast && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: -8 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -8 },
+          transition: { duration: 0.15 },
+          className: cn(
+            "px-4 py-2 rounded-full border font-inter text-sm font-semibold shadow-lg backdrop-blur-sm text-center",
+            TOAST_CONFIG[toast.type]
+          ),
+          children: t(`eventToast.${toast.type}`)
+        },
+        toast.key
+      ) })
+    }
+  );
+}
+function MobileHistory({ className }) {
+  const { boardState } = useGameStore();
+  const [open, setOpen] = useState(false);
+  const lastMove = boardState?.moveHistory?.at(-1);
+  if (!lastMove) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HistoryChip, { lastMove, onClick: () => setOpen(true), className }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm",
+          onClick: () => setOpen(false),
+          "aria-hidden": "true"
+        },
+        "backdrop"
+      ),
+      /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { y: "100%" },
+          animate: { y: 0 },
+          exit: { y: "100%" },
+          transition: { type: "spring", stiffness: 300, damping: 32 },
+          className: "fixed bottom-0 left-0 right-0 z-50 bg-bg-secondary rounded-t-2xl border-t border-border-subtle shadow-xl",
+          role: "dialog",
+          "aria-modal": "true",
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { onClose: () => setOpen(false) }),
+            /* @__PURE__ */ jsx("div", { className: "px-4 pb-6 max-h-[50dvh] overflow-y-auto", children: /* @__PURE__ */ jsx(MoveHistory, { scrollable: false }) })
+          ]
+        },
+        "sheet"
+      )
+    ] }) })
+  ] });
+}
+function SheetHeader({ onClose }) {
+  const t = useGameT();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 pt-4 pb-3 border-b border-border-subtle", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tracking-[0.5px] uppercase text-fg-muted", children: t("history.title") }),
+    /* @__PURE__ */ jsx(
+      "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",
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsx(X, { size: 14 })
+      }
+    )
+  ] });
+}
+function HistoryChip({ lastMove, onClick, className }) {
+  const t = useGameT();
+  const toSq = squareName(lastMove.to);
+  let label;
+  switch (lastMove.type) {
+    case "pass":
+      label = `\u2295 ${toSq}`;
+      break;
+    case "tackle":
+      label = `\u2715 ${toSq}`;
+      break;
+    case "interception":
+      label = `\u26D4 ${toSq}`;
+      break;
+    case "goal":
+      label = `\u26BD GOL`;
+      break;
+    case "offside":
+      label = `\u26A0 OFS`;
+      break;
+    default: {
+      const pieceShort = t(`pieces.${SHORT_KEY[lastMove.pieceType]}`);
+      const fromSq = lastMove.from ? squareName(lastMove.from) : "";
+      label = fromSq ? `${pieceShort}${fromSq}\u2192${toSq}` : `${pieceShort}\u2192${toSq}`;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
+        "bg-bg-surface border border-border-subtle",
+        "font-mono text-[11px] text-fg-secondary",
+        "hover:text-fg-primary hover:bg-bg-surface-elevated active:scale-95",
+        "transition-all duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
+        className
+      ),
+      "aria-label": t("history.viewAll"),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-fg-muted text-[10px]", "aria-hidden": "true", children: "\u25BE" })
+      ]
+    }
+  );
+}
 
-export { ActionPoints, Avatar, AvatarFallback, AvatarImage, Button, ConfirmDialog, Football, GameBoard, GameControls, GameI18nProvider, GamePiece, MiniScoreboard, MoveHistory, Scoreboard, SelectedPieceDetail, StaticGameBoard, cn, useGameT };
+export { ActionPoints, Avatar, AvatarFallback, AvatarImage, Button, ConfirmDialog, EventToast, Football, GameBoard, GameControls, GameI18nProvider, GamePiece, MiniScoreboard, MobileHistory, MoveHistory, Scoreboard, SelectedPieceDetail, StaticGameBoard, TurnBanner, cn, useGameT };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map