feat: Implement manual game mode with 3D battlefield, custom context menu, and card actions including tokens and counters.

docs/development/devlog/2025-12-14-234500_game_battlefield_plan.md

@@ -0,0 +1,32 @@
+# Game Battlefield & Manual Mode Implementation Plan
+
+## Goal
+Implement a 3D-style battlefield and manual game logic for the MTG Draft Maker. The system should allow players to drag and drop cards freely onto the battlefield, tap cards, and manage zones (Hand, Library, Graveyard, Exile) in a manual fashion typical of virtual tabletops.
+
+## Status: Completed
+
+## Implemented Features
+- **3D Battlefield UI**: 
+    - Used CSS `perspective: 1000px` and `rotateX` to create a depth effect.
+    - Cards are absolutely positioned on the battlefield based on percentage coordinates (0-100%).
+    - Shadows and gradients enhance the "tabletop" feel.
+- **Manual Game Logic**:
+    - **Free Drag and Drop**: Players can move cards anywhere on the battlefield. Coordinates are calculated relative to the drop target.
+    - **Z-Index Management**: Backend tracks a `maxZ` counter. Every move or flip brings the card to the front (`z-index` increment).
+    - **Actions**:
+        - **Tap/Untap**: Click to toggle (rotate 90 degrees).
+        - **Flip**: Right-click to toggle face-up/face-down status.
+        - **Draw**: Click library to draw.
+        - **Life**: Buttons to increment/decrement life.
+- **Multiplayer Synchronization**:
+    - All actions (`MOVE_CARD`, `TAP_CARD`, `FLIP_CARD`, `UPDATE_LIFE`) are broadcast via Socket.IO.
+    - Opponent's battlefield is rendered in a mirrored 3D perspective.
+
+## Files Modified
+- `src/client/src/modules/game/GameView.tsx`: Main UI logic.
+- `src/client/src/modules/game/CardComponent.tsx`: Added context menu support.
+- `src/server/managers/GameManager.ts`: Logic for actions and state management.
+
+## Next Steps
+- Test with real players to fine-tune the "feel" of dragging (maybe add grid snapping option later).
+- Implement "Search Library" feature (currently just Draw).

docs/development/devlog/2025-12-14-235000_game_context_menu.md

@@ -0,0 +1,39 @@
+# Game Context Menu & Immersion Update Plan
+
+## Goal
+Implement a robust, video-game-style context menu for the battlefield and cards. This menu will allow players to perform advanced manual actions required for MTG, such as creating tokens and managing counters, while eliminating "browser-like" feel.
+
+## Status: Completed
+
+## Implemented Features
+- **Custom Game Context Menu**:
+    - Replaces default browser context menu.
+    - Dark, video-game themed UI with glassmorphism.
+    - Animated entrance (fade/zoom).
+- **Functionality**:
+    - **Global (Background)**:
+        - "Create Token" (Default 1/1, 2/2, Treasure).
+    - **Card Specific**:
+        - "Tap / Untap"
+        - "Flip Face Up / Down"
+        - "Add Counter" (Submenu: +1/+1, -1/-1, Loyalty)
+        - "Clone (Copy)" (Creates an exact token copy of the card)
+        - "Delete Object" (Removing tokens or cards)
+- **Backend Logic**:
+    - `GameManager` now handles:
+        - `ADD_COUNTER`: Adds/removes counters logic.
+        - `CREATE_TOKEN`: Generates new token instances with specific stats/art.
+        - `DELETE_CARD`: Removes objects from the game.
+- **Frontend Integration**:
+    - `GameView` manages menu state (position, target).
+    - `CardComponent` triggers menu only on itself, bubbling prevented.
+    - Hand cards also support right-click menus.
+
+## Files Modified
+- `src/client/src/modules/game/GameContextMenu.tsx`: New component.
+- `src/client/src/modules/game/GameView.tsx`: Integrated menu.
+- `src/server/managers/GameManager.ts`: Added token/counter handlers.
+
+## Next Steps
+- Add sounds for menu open/click.
+- Add more token types or a token editor.

docs/development/devlog/2025-12-14-235500_enhance_3d_game_view.md

@@ -0,0 +1,41 @@
+# Enhancement Plan: True 3D Game Area
+
+The goal is to transform the game area into a "really 3D game" experience using CSS 3D transforms.
+
+## Objectives
+1.  **Immersive 3D Table**: Create a convincing 3D perspective of a table where cards are placed.
+2.  **Card Physics Simulation**: Visuals should simulate cards having weight, thickness, and position in 3D space.
+3.  **Dynamic Camera/View**: Fix the viewing angle to be consistent with a player sitting at a table.
+
+## Implementation Steps
+
+### 1. Scene Setup (GameView.tsx)
+-   Create a "Scene" container with high `perspective` (e.g., `1200px` to `2000px`).
+-   Create a "World" container that holds the table and other elements, allowing for global rotation if needed.
+-   Implement a "TableSurface" div that is rotated `rotateX(40-60deg)` to simulate a flat surface viewed from an angle.
+
+### 2. Battlefield Enchancement
+-   The player's battlefield should be the bottom half of the table.
+-   The opponent's battlefield should be the top half.
+-   Use `transform-style: preserve-3d` extensively.
+-   Add a grid/mat texture to the table surface to enhance the depth perception.
+
+### 3. Card 3D Component (CardComponent.tsx)
+-   Refactor `CardComponent` to use a 3D structure.
+-   Add a container for 3D positioning (`translate3d`).
+-   Add a visual "lift" when dragging or hovering (`translateZ`).
+-   Enhance the shadow to be on the "table" surface, separating from the card when lifting.
+    -   *Implementation Note*: The shadow might need to be a separate element `after` the card or a separate div to stay on the table plane while the card lifts.
+
+### 4. Lighting and Atmosphere
+-   Add a "Light Source" effect (radial gradient overlay).
+-   Adjust colors to be darker/moodier, fitting the "Dark Gaming UI" aesthetic.
+
+## Tech Stack
+-   CSS via Tailwind + Inline Styles for dynamic coordinates.
+-   React for state/rendering.
+
+## Execution Order
+1.  Refactor `GameView.tsx` layout to standard CSS 3D Scene structure.
+2.  Update `CardComponent.tsx` to handle 3D props (tilt, lift).
+3.  Fine-tune values for perspective and rotation.