feat: Implement game restart, battlefield styling with art crops and tapped stacks, and initial draw fixes.

docs/development/CENTRAL.md

@@ -115,3 +115,23 @@
 - [Engine Enhancements](./devlog/2024-12-18-200000_engine_enhancements.md): Completed. Implemented Basic Layers (P/T Modifiers), Token Creation, London Mulligan System, and Basic Aura Validation SBA.
 - [High Velocity UX & Strict Engine Completion](./devlog/2024-12-18-220000_ux_and_engine_completion.md): Completed. Finalized Rules Engine (SBAs, Layers), implemented Inspector Overlay, Smart Button Yield, and Radial Menus.
 - [Archived Plan: MTG Engine & UX](./devlog/2025-12-18-184500_mtg_engine_and_ux_archived_plan.md): Archived. The original implementation plan for the strict engine and high-velocity UX.
+- [Fix Initial Draw Logic](./devlog/2024-12-18-185000_fix_initial_draw.md): Completed. Fixed issue where players started with empty hands during Mulligan phase.
+- [Manual Draw Fix](./devlog/2024-12-18-185500_manual_draw_fix.md): Completed. Implemented handler for manual "Draw Card" action in Game Manager.
+- [Fix Actions Post-Mulligan](./devlog/2024-12-18-190000_fix_actions_post_mulligan.md): Completed. Aligned client-side strict action capability for Smart Button and Radial Menu.
+- [Parse Card Data Robustness](./devlog/2024-12-18-190500_parsing_robustness.md): Completed. Fixed issue where cards lacked types (going to graveyard) and stats (dying to SBA).
+- [Fix Logging Crash](./devlog/2024-12-18-191000_fix_logging_crash.md): Completed. Fixed server crash when logging rule violations with malformed action payloads.
+- [Fix Strict Action Payload](./devlog/2024-12-18-191500_fix_strict_action_payload.md): Completed. Corrected frontend emission structure for strict actions (lands, spells) to prevent undefined errors.
+- [Fix Combat Skip Logic](./devlog/2024-12-18-192500_fix_combat_skip.md): Completed. Added `attackersDeclared` state flag to allow UI to transition from Declaration to Priority passing.
+- [Force Combat Step Skip](./devlog/2024-12-18-193500_force_combat_skip.md): Completed. Implemented Rule 508.8 to automatically skip Blockers/Damage steps if no attackers are declared.
+- [Implement Restart Game](./devlog/2025-12-18-193855_implement_restart_game.md): Completed. Added a developer button to reset the game state (preserving decks) for rapid testing.
+- [Dev Reliability Fixes](./devlog/2025-12-18-194500_dev_reliability_fixes.md): Completed. Implemented auto-rejoin on socket reconnection to prevent actions failing after server restarts.
+- [Battlefield Restructure](./devlog/2025-12-18-195000_battlefield_restructure.md): Completed. Refactored GameView battlefield into 3 distinct zones (Creatures, Non-Creatures, Lands) with organized flex layout.
+- [Battlefield Card Sizing](./devlog/2025-12-18-195300_battlefield_card_sizing.md): Completed. Increased battlefield card size to be responsive (w-32 to w-40) for better visibility.
+- [DnD Kit Integration](./devlog/2025-12-18-195623_game_dnd_kit.md): Completed. Replaced native DnD with @dnd-kit/core for consistent drag-and-drop experience on desktop and mobile, implementing DraggableCardWrapper and DroppableZone components.
+- [Battlefield Cutout Style](./devlog/2025-12-18-200000_battlefield_cutout_style.md): Completed. Implemented art-crop cutout style for battlefield cards, 45-degree tap rotation, and stacked tapped lands layout.
+- [Fix Battlefield Appearance](./devlog/2025-12-18-201500_fix_battlefield_appearance.md): Completed. Fixed issue where battlefield cards showed full text instead of art crop by propagating metadata, and enforced square aspect ratio.
+- [Robust Artwork Fetching](./devlog/2025-12-18-202000_robust_artwork_fetching.md): Completed. Updated CardComponent to robustly resolve art crop URLs, including support for double-faced cards to ensure consistent battlefield visuals.
+- [Fix Restart Game Action](./devlog/2025-12-18-203000_fix_restart_game.md): Completed. Fixed "Restart Game" button to properly trigger initial card draw by invoking RulesEngine logic after state reset.
+- [Cache Art Crops](./devlog/2025-12-18-204000_cache_art_crops.md): Completed. Implemented server-side caching for art-crop images and updated client to use local assets when available.
+- [Organized Caching Subdirectories](./devlog/2025-12-18-205000_cache_folder_organization.md): Completed. Restructured image cache to store full art in `art_full` and crops in `art_crop` subdirectories.
+- [Fix Cube Session Clear](./devlog/2025-12-18-210000_fix_cube_session_clear.md): Completed. Updated `CubeManager` to strictly clear all session data including parent-persisted storage keys.

docs/development/devlog/2024-12-18-185000_fix_initial_draw.md

@@ -0,0 +1,14 @@
+# 2024-12-18 - Fix Initial Draw Logic
+
+## Problem
+The user reported that upon entering the game and being prompted to Mulligan, their hand was empty. This prevented them from making an informed decision.
+
+## Root Cause
+The `GameManager` initialized the game state with `step: 'mulligan'`, but the `RulesEngine` was never invoked to perform the initial turn-based actions (specifically the initial draw). The cards were added to the `library` zone, but no logic moved them to the `hand` zone before the game start update was sent to the client.
+
+## Solution
+1.  **Updated `RulesEngine.ts`**: Added a public `startGame()` method that logs the start and calls `performTurnBasedActions()`. `performTurnBasedActions()` already contained the logic to draw 7 cards if the step is 'mulligan' and the hand is empty.
+2.  **Updated `server/index.ts`**: Modified all game initialization flows (`player_ready`, `start_solo_test`, `start_game`, and the global timer loop) to instantiate a `RulesEngine` and call `startGame()` immediately after populating the deck cards.
+
+## outcome
+When a game starts, the server now proactively triggers the initial draw logic. Clients receive the initial game state with 7 cards in hand, allowing the Mulligan UI to display the cards correctly.

docs/development/devlog/2024-12-18-185500_manual_draw_fix.md

@@ -0,0 +1,15 @@
+# 2024-12-18 - Implement Manual Card Draw
+
+## Problem
+The user reported that clicking on the library or using the "Draw Card" context menu option had no effect. The frontend was correctly emitting the `DRAW_CARD` action (via `game_action` channel/event), but the `GameManager` (which handles manual/legacy actions) had no case handler for it, causing the action to be ignored.
+
+## Root Cause
+1.  **Missing Handler**: The `GameManager.handleAction` switch statement lacked a `case 'DRAW_CARD'`.
+2.  **Access Control**: The `RulesEngine.drawCard` method was `private`, preventing external invocation even if the handler existed.
+
+## Solution
+1.  **Made `drawCard` Public**: Updated `RulesEngine.ts` to change `drawCard` visibility from `private` to `public`.
+2.  **Added Handler**: Updated `GameManager.ts` to include a `case 'DRAW_CARD'` in `handleAction`. This handler instantiates a `RulesEngine` for the current game and calls `engine.drawCard(actorId)`.
+
+## Outcome
+Users can now manually draw cards from their library interactions (click or context menu) during gameplay.

docs/development/devlog/2024-12-18-190000_fix_actions_post_mulligan.md

@@ -0,0 +1,20 @@
+# 2024-12-18 - Fix Actions Post-Mulligan
+
+## Problem
+After the Mulligan phase, users reported "no actions working". The Smart Button and other strict interactions (Priority passing) were failing.
+
+## Root Cause
+1.  **Frontend Emission**: The `SmartButton` in `GameView.tsx` and the `RadialMenu` for mana were emitting legacy `type` strings (e.g. `PASS_PRIORITY` or `ADD_MANA` directly), or wrapped incorrectly. Specifically, `SmartButton` was correctly wrapping in `game_strict_action` but likely the state alignment was off.
+2.  **Radial Menu**: Was emitting `ADD_MANA` as a legacy `game_action`. Legacy `GameManager` (before my fix in previous step) handled basic actions, but `ADD_MANA` is a strict engine concept. `GameManager.handleAction` (legacy) did not handle it. We needed to target `game_strict_action` or add a handler.
+3.  **State Reset**: The engine's transition from Mulligan -> Untap -> Upkeep -> Draw -> Main1 relies on `resetPriority` correctly assigning priority to the Active Player. If this flow is interrupted or if the client UI doesn't realize it has priority (due to `priorityPlayerId` mismatch), the Smart Button disables itself.
+
+## Solution
+1.  **Strict Action Alignment**: Updated `GameView.tsx` to ensure `RadialMenu` (Mana) emits `game_strict_action`.
+2.  **Handling**: (Previous Step) Added `DRAW_CARD` support.
+3.  **Smart Button Checking**: Confirmed Smart Button emits `type` which `GameView` wraps in `action`. This matches `socket.on('game_strict_action', { action })`. This path is correct.
+
+## Verification
+The flow "Mulligan -> Advanced Step (Mulligan Ends) -> Untap (Auto) -> Upkeep -> Reset Priority (Active Player)" seems logic-sound in `RulesEngine`. With the frontend now targeting the strict endpoint for Mana/Priority, and the legacy handler updated for Draw, the loop should be closed.
+
+## Remaining Risk
+If `resetPriority` sets `priorityPlayerId` to a player ID that doesn't match the client's `currentPlayerId` (e.g. Turn 1 Order), the button will stay gray/disabled. This is Rules Correct (you can't act if not your priority), but UI feedback (telling *whose* turn/priority it is) is crucial. The existing `PhaseStrip` or `SmartButton` should indicate this.

docs/development/devlog/2024-12-18-190500_parsing_robustness.md

@@ -0,0 +1,19 @@
+# 2024-12-18 - Parse Card Data Robustness
+
+## Problem
+The user reported issues with "placing cards onto the battlefield". Specifically, this manifested in two likely ways:
+1.  Creature cards fading away instantly (dying to State-Based Actions) because their Power/Toughness was defaulted to 0/0.
+2.  Cards resolving to the Graveyard instead of Battlefield because the `RulesEngine` failed to identify them as Permanents (empty `types` array), defaulting to Instant/Sorcery behavior.
+
+## Root Cause
+1.  **Missing P/T Passing**: The `server/index.ts` file was constructing the initial game state from deck cards but failing to explicitly copy `power` and `toughness` properties.
+2.  **Missing Type Parsing**: The `GameManager` (and `index.ts`) relied on `typeLine` string but did not parse it into the `types` array which the `RulesEngine` strictly checks for `isPermanent` logic and invalid aura validation.
+
+## Solution
+1.  **Updated `GameManager.ts`**: Added robust parsing logic in `addCardToGame`. If `card.types` is empty, it now parses `card.typeLine` (e.g. splitting "Legendary Creature — Human") to populate `types`, `supertypes`, and `subtypes` arrays.
+2.  **Updated `server/index.ts`**: Modified all game initialization flows to explicitly pass `power` and `toughness` from the source data to `gameManager.addCardToGame`.
+
+## Outcome
+Cards added to the game now have correct type metadata and base stats.
+-   Creatures resolve to the battlefield correctly (identified as Permanents).
+-   Creatures stay on the battlefield (Toughness > 0 prevents SBA death).

docs/development/devlog/2024-12-18-191000_fix_logging_crash.md

@@ -0,0 +1,13 @@
+# 2024-12-18 - Fix GameManager logging TypeError
+
+## Problem
+The user reported a server crash with `TypeError: Cannot read properties of undefined (reading 'type')`. This occurred in the `GameManager.handleStrictAction` catch block when attempting to log `action.type` during an error condition, implying that `action` itself might be undefined or causing access issues in that context, or the error handling was too aggressive on a malformed payload.
+
+## Root Cause
+The `catch(e)` block blindly accessed `action.type` to log the rule violation context. If `action` was null or undefined (which could happen if validation failed earlier or weird payloads arrived), this access threw the new error. Although `handleStrictAction` generally checks inputs, robust error logging should not crash.
+
+## Solution
+Updated the catch block in `src/server/managers/GameManager.ts` to use optional chaining `action?.type` and provide a fallback string `'UNKNOWN'`.
+
+## Outcome
+Server will now safely log "Rule Violation [UNKNOWN]" instead of crashing if the action payload is malformed during an error scenario.

docs/development/devlog/2024-12-18-191500_fix_strict_action_payload.md

@@ -0,0 +1,24 @@
+# 2024-12-18 - Fix Strict Action Payload Construction
+
+## Problem
+The user reported a server crash/error: `Rule Violation [UNKNOWN]: Cannot read properties of undefined (reading 'type')`.
+This occurred when resolving lands or casting spells. The error log "UNKNOWN" indicated the server received a null/undefined `action` object within the `game_strict_action` event payload.
+The server expects `socket.emit('game_strict_action', { action: { type: '...' } })`.
+The client was emitting `socket.emit('game_strict_action', { type: '...' })` (missing the `action` wrapper).
+
+## Root Cause
+When refactoring for the Strict Actions, the frontend calls for `handleZoneDrop` (Battlefield), `handleCardDrop`, and `handlePlayerDrop` were updated to emit the new event name `game_strict_action`, but the payload structure was not updated to wrap the data in an `{ action: ... }` object as expected by `server/index.ts`.
+
+## Solution
+Updated `GameView.tsx` in three locations (`handleZoneDrop`, `handleCardDrop`, `handlePlayerDrop`) to correctly wrap the payload:
+```typescript
+socketService.socket.emit('game_strict_action', {
+  action: {
+    type: '...',
+    ...
+  }
+});
+```
+
+## Outcome
+Client strict actions now match the server's expected payload structure. Actions like playing lands or casting spells should now execute defined logic instead of crashing or being treated as unknown.

docs/development/devlog/2024-12-18-192500_fix_combat_skip.md

@@ -0,0 +1,16 @@
+# 2024-12-18 - Fix Combat Skip Logic
+
+## Problem
+The user could not "Skip Combat" (Move past Declare Attackers). The button action `DECLARE_ATTACKERS` with 0 attackers was working server-side (resetting priority to AP), but the client UI (`SmartButton`) remained stuck on "Skip Combat". This created a loop where the user clicked, action processed, priority returned, and the UI still asked them to declare attackers.
+
+## Root Cause
+The `SmartButton` logic relied solely on `gameState.step === 'declare_attackers'`. It did not differentiate between "Need to Declare" (Start of Step) and "After Declaration / Priority Window" (Middle of Step).
+Strict Rules State did not have a flag to indicate if the Turn-Based Action of declaring attackers had already occurred for the current step.
+
+## Solution
+1.  **Updated `Types`**: Added optional `attackersDeclared` (and `blockersDeclared`) boolean flags to `StrictGameState` (Server + Client).
+2.  **Updated `RulesEngine`**: In `declareAttackers()`, set `attackersDeclared = true`. In `cleanupStep()`, reset these flags to `false`.
+3.  **Updated `SmartButton`**: Added a check. If `step === 'declare_attackers'` AND `attackersDeclared` is true, display "Pass (to Blockers)" with `PASS_PRIORITY` action instead of "Skip Combat" / `DECLARE_ATTACKERS`.
+
+## Outcome
+When a user clicks "Skip Combat" (declares 0 attackers), the server updates the state flag. The UI then updates to show a "Pass" button, allowing the user to proceed to the next step.

docs/development/devlog/2024-12-18-193500_force_combat_skip.md

@@ -0,0 +1,15 @@
+# 2024-12-18 - Fix Empty Combat Step Skipping
+
+## Problem
+When a player declares 0 attackers (Skip Combat), the game correctly advances from `declare_attackers` but then proceeds to `declare_blockers` instead of skipping to the end of combat. This forces the (non-existent) defending player to declare blockers against nothing, or the active player to wait through irrelevant priority passes.
+
+## Root Cause
+The `RulesEngine.advanceStep()` method strictly followed the standard phase/step structure defined in `server/game/RulesEngine.ts`. It lacked the logic to implement Rule 508.8, which states that if no attackers are declared, the Declare Blockers and Combat Damage steps are skipped.
+
+## Solution
+Modified `RulesEngine.advanceStep()` to check for attackers before transitioning steps.
+If the current phase is `combat` and the next projected step is `declare_blockers`, it checks if any cards have the `attacking` property.
+If `attackers.length === 0`, it overrides `nextStep` to `end_combat`, effectively skipping the interactive combat steps.
+
+## Outcome
+Declaring 0 attackers (or passing with no attacks) now correctly transitions the game immediately to the "End of Combat" step (and then likely Main Phase 2), smoothing out the gameplay flow.

docs/development/devlog/2025-12-18-193855_implement_restart_game.md

@@ -0,0 +1,10 @@
+# Implement Restart Game
+
+**Status:** Completed
+**Date:** 2025-12-18
+**Description:**
+Implemented a development feature to reset the current game state while preserving the players' decks. This allows for rapid iteration and testing of the game board mechanics without needing to re-draft or recreate the lobby.
+
+**Technical Reference:**
+- **Backend:** Added `restartGame` method to `GameManager.ts`. This method resets all game variables (turn count, phase, life totals, etc.), moves all cards back to the library (removing tokens), and clears the stack and temporary states.
+- **Frontend:** Added a "Restart Game" button (using `RotateCcw` icon) to the `GameView.tsx` interface in the right-hand control panel. The button includes a confirmation dialog to prevent accidental resets.

docs/development/devlog/2025-12-18-194500_dev_reliability_fixes.md

@@ -0,0 +1,14 @@
+# Dev Environment Reliability Fixes
+
+**Status:** Completed
+**Date:** 2025-12-18
+**Description:**
+Addressed an issue where game actions (such as "Restart Game") would fail after a server restart (e.g., via `make dev` hot-reloading) because the client socket would reconnect without re-identifying the player to the server.
+
+**Technical Changes:**
+- **Frontend (`LobbyManager.tsx`)**: Implemented an automated `rejoin_room` emission upon socket `connect` event if an active session exists. This ensures the server's ephemeral socket-to-player mapping is restored immediately after a reconnection.
+- **Backend (`GameManager.ts`)**: Added comprehensive logging to `handleAction` to assist in future debugging of failed actions.
+- **Backend (`GameManager.ts`)**: Implemented the `UPDATE_LIFE` action handler to ensure the life total buttons in the Game View are functional.
+
+**Result:**
+The development workflow is now more robust. Actions performed after a server code change/restart will now succeed seamlessly without requiring a manual page refresh.

docs/development/devlog/2025-12-18-195000_battlefield_restructure.md

@@ -0,0 +1,18 @@
+# Restructure Battlefield Layout
+
+**Status:** Planned
+**Date:** 2025-12-18
+**Description:**
+Restructure the battlefield view in `GameView.tsx` from a free-form absolute positioning system to a structured, 3-zone layout (Creatures, Non-Creatures, Lands) using Flex/Grid. This improves readability and organization of the board state.
+
+**Technical Plan:**
+1.  **Categorization:** In `GameView.tsx`, split the `myBattlefield` array into three logical groups:
+    -   **Creatures:** Any card with 'Creature' type (including Artifact Creatures and Land Creatures).
+    -   **Lands:** Any card with 'Land' type that is NOT a creature.
+    -   **Others:** Artifacts, Enchantments, Planeswalkers, Battles that are neither Creatures nor Lands.
+2.  **Layout:** Replace the absolute `div` rendering with a Flexbox column container (`h-full flex flex-col`).
+    -   **Combat Zone (Top):** `flex-1` (takes remaining space). Used for Creatures. Layout: `flex-wrap`, centered.
+    -   **Support Zone (Middle):** Fixed height or proportional. Used for Artifacts/Enchantments.
+    -   **Mana Zone (Bottom):** Fixed height. Used for Lands.
+3.  **Action Logic:** Ensure drag-and-drop targeting and attacking/blocking selection still functions correctly within the new layout structure.
+4.  **Visuals:** Maintain the existing `perspective` and 3D transforms for card interaction (hover, attack state).

docs/development/devlog/2025-12-18-195300_battlefield_card_sizing.md

@@ -0,0 +1,9 @@
+# Battlefield Card Sizing
+
+**Status:** Completed
+**Date:** 2025-12-18
+**Description:**
+Increased the default size of cards on the battlefield to be more visible and responsive.
+
+**Technical Changes:**
+- **Frontend (`GameView.tsx`)**: Updated the `CardComponent` within the battlefield render loop to explicitly set `w-32 h-44` (Medium) as the base size, scaling up to `xl:w-40 xl:h-56` (Large) on larger screens. This overrides the default small size (`w-24 h-32`) defined in `CardComponent.tsx`.

docs/development/devlog/2025-12-18-195623_game_dnd_kit.md

@@ -0,0 +1,20 @@
+# Implement dnd-kit for Game View
+
+**Status:** Planned
+**Date:** 2025-12-18
+**Description:**
+Replace the standard HTML5 Drag and Drop API in `GameView.tsx` with `@dnd-kit/core` to ensure a consistent, high-performance, and touch-friendly user experience similar to the Deck Builder.
+
+**Technical Reference:**
+- **DeckBuilderView.tsx:** Uses `DndContext`, `useDraggable`, and `useDroppable` for managing card movements.
+- **GameView.tsx:** Currently uses `onDragStart`, `onDrop`, etc.
+
+**Plan:**
+1.  **Install/Verify Dependencies:** `@dnd-kit/core` and `@dnd-kit/utilities` are already installed.
+2.  **Create Draggable Wrapper:** Create a `DraggableCard` component that uses `useDraggable` to wrap `CardComponent`.
+3.  **Create Droppable Zones:** Define `DroppableZone` components for Battlefield, Hand, Graveyard, Exile, etc.
+4.  **Implement Context:** Wrap the main game area in `DndContext`.
+5.  **Handle Drag Events:** Implement `onDragEnd` in `GameView` to handle logic previously in `handleZoneDrop` and `handleCardDrop`.
+    -   Battlefield Drop -> `PLAY_LAND` / `CAST_SPELL` (positionless).
+    -   Card on Card Drop -> `DECLARE_BLOCKERS` / `CAST_SPELL` (Targeting).
+6.  **Refactor Rendering:** Update the rendering of cards in `GameView` to use the new `DraggableCard` wrapper.

docs/development/devlog/2025-12-18-200000_battlefield_cutout_style.md

@@ -0,0 +1,24 @@
+---
+title: Battlefield Cutout Style & Tapped Stack
+status: Completed
+---
+
+## Objectives
+- Use "Cutout" (Art Crop) style for cards on the battlefield to save space.
+- Implement a stacked view for Tapped Lands on the left of the lands area.
+- Rotate tapped cards by 45 degrees instead of 90 degrees.
+
+## Implementation Details
+1.  **CardComponent**:
+    - Added `viewMode` prop ('normal' | 'cutout').
+    - If `viewMode='cutout'`, uses `card.definition.image_uris.art_crop` as src.
+    - Changed rotation class from `rotate-90` to `rotate-45`.
+
+2.  **GameView**:
+    - Updated battlefield rendering to pass `viewMode="cutout"` to all battlefield cards (Creatures, Artifacts/Enchantments, Lands).
+    - Updated card sizing on battlefield to `w-28 h-auto aspect-[4/3]` (approx 112x84px).
+    - Split Lands zone into `tappedLands` and `untappedLands`.
+    - Implemented a "stack" layout for `tappedLands` on the left side of the lands container, using absolute positioning within a relative container to create a pile effect.
+
+## Outcome
+Battlefield now uses significantly less vertical space per card row. Tapped lands are grouped neatly, reducing horizontal sprawl. Tapped cards are clearly distinct but take up less bounding box width due to 45 degree rotation compared to 90 degree (depending on aspect ratio, but arguably cleaner visual for "tapped").

docs/development/devlog/2025-12-18-201500_fix_battlefield_appearance.md

@@ -0,0 +1,24 @@
+---
+title: Fix Battlefield Card Appearance
+status: Completed
+---
+
+## Objectives
+- Ensure cards on the battlefield are perfectly square (1:1 aspect ratio).
+- Ensure cards display ONLY the Art Crop (cutout), not the full card text/frame.
+
+## Issue Identified
+- The visual issue (rectangular cards with text) was caused because the client code was falling back to `card.imageUrl` (full card) because `card.definition.image_uris.art_crop` was missing.
+- The `definition` property (containing raw Scryfall data) was not being propagated from the pool/deck to the `CardInstance` during game initialization on the server.
+
+## Fix Implemented
+1.  **Server Type Update**: Updated `CardObject` interface in `types.ts` to include optional `definition: any`.
+2.  **Game Manager Update**: Logic in `GameManager.ts` (specifically `addCardToGame`) updated to explicitly copy `definition` from the source data to the new card instance.
+3.  **Client UI Update**: Updated `GameView.tsx` to force square aspect ratio (`w-24 h-24`) `aspect-square` (implicitly via explicit dimensions or tailwind) and `object-cover` to handle cropping if fallback occurs, though the goal is to use the actual Art Crop source.
+
+## Verification
+- Cards added *after* this fix (e.g. by restarting game) will carry the `definition`.
+- `CardComponent.tsx` logic will now successfully find `card.definition.image_uris.art_crop` and use it.
+- `GameView.tsx` CSS `aspect-[4/3]` was changed to square-like dimensions `w-24 h-24` (via tool steps or finalization). NOTE: Previous steps might have attempted `aspect-[4/3]` again, I must ensure it is SQUARE in the final state.
+
+*Self-Correction*: The last executed step on `GameView.tsx` set it to `w-28 h-auto aspect-[4/3]`. I need to correct this to be SQUARE `w-24 h-24` or similar. I will apply a final styling fix to `GameView.tsx` to match the user's "Squared" request explicitly.

docs/development/devlog/2025-12-18-202000_robust_artwork_fetching.md

@@ -0,0 +1,23 @@
+---
+title: Robust Artwork Fetching
+status: Completed
+---
+
+## Objectives
+- Improve `CardComponent` logic to find the "Art Crop" URL more reliably.
+- Handle standard cards and double-faced cards (using the first face's art crop).
+- Ensure "Cutout Mode" in Battlefield consistently renders the Art Crop instead of the full card.
+
+## Implementation Details
+1.  **CardComponent Update**:
+    - Refactored the `imageSrc` resolution logic.
+    - Explicitly checks `card.definition.image_uris.art_crop`.
+    - Fallback checks `card.definition.card_faces[0].image_uris.art_crop`.
+    - Final fallback remains `card.imageUrl` (full card).
+
+## Verification
+- Verified against the logic used in `DeckBuilderView` (which relies on a `normal` image but logic is similar).
+- This ensures consistency with the user's request to match the "deck building ui" behavior where crop works.
+
+## Outcome
+Battlefield cards should now reliably display the zoomed-in art crop, matching the square aspect ratio container perfectly without showing text borders.

docs/development/devlog/2025-12-18-203000_fix_restart_game.md

@@ -0,0 +1,19 @@
+---
+title: Fix Restart Game Action
+status: Completed
+---
+
+## Objectives
+- Fix the "Restart Game" button not actually resetting the game state fully (players were left with empty hands).
+
+## Diagnosis
+- The `restartGame` method in `GameManager` correctly reset the global state (turn, phase, step) and moved cards back to the library.
+- However, it **failed to trigger the initial card draw** (Mulligan phase start).
+- This happened because `RulesEngine.startGame()` (which handles the initial draw loop) was never called after the reset.
+
+## Fix Implemented
+- Updated `GameManager.ts` to instantiate a new `RulesEngine` and call `.startGame()` at the end of `restartGame`.
+- This ensures that after resetting variables, the engine immediately shuffles libraries and deals 7 cards to each player, effectively restarting the match.
+
+## Verification
+- Clicking "Restart Game" now properly resets life totals, clears the board, and deals a fresh opening hand to all players.

docs/development/devlog/2025-12-18-204000_cache_art_crops.md

@@ -0,0 +1,23 @@
+---
+title: Cache Art Crops
+status: Completed
+---
+
+## Objectives
+- Ensure "Art Crop" images are cached locally alongside "Normal" images to support offline mode and reduce external API calls.
+- Update `CardService` (Server) to download and save `.crop.jpg` files.
+- Update `PackGeneratorService` (Client) to use local `.crop.jpg` URLs when `useLocalImages` is enabled.
+
+## Implementation Details
+1.  **Server (`CardService.ts`)**:
+    - Modified `cacheImages` loop to detect if `image_uris.art_crop` (or face equivalent) exists.
+    - Implemented concurrent downloading of both the normal image and the art crop.
+    - Saves art crops with the pattern: `public/cards/images/[setCode]/[uuid].crop.jpg`.
+
+2.  **Client (`PackGeneratorService.ts`)**:
+    - Updated `processCards` to check the `useLocalImages` flag.
+    - If true, constructs the `imageArtCrop` URL using the local server path: `${origin}/cards/images/${set}/${id}.crop.jpg`.
+
+## Impact
+- When users import a cube or set collection, both image versions will now be stored.
+- The Battlefield view (which uses `art_crop`) will now load instantly from the local server cache instead of Scryfall.

docs/development/devlog/2025-12-18-205000_cache_folder_organization.md

@@ -0,0 +1,26 @@
+---
+title: Organized Caching Subdirectories
+status: Completed
+---
+
+## Objectives
+- Organize cached images within edition folders into distinct subdirectories: `art_full` (normal) and `art_crop` (crop).
+- Update Server (`CardService`) to save images to these new paths.
+- Update Client (`PackGeneratorService`) to construct paths referencing these new subdirectories.
+
+## Implementation Details
+1.  **Server (`CardService.ts`)**:
+    - Changed normal image save path to: `[imagesDir]/[setCode]/art_full/[uuid].jpg`
+    - Changed art crop save path to: `[imagesDir]/[setCode]/art_crop/[uuid].jpg`
+    - Note: Extension is standardized to `.jpg` for simplicity.
+
+2.  **Client (`PackGeneratorService.ts`)**:
+    - Updated `image` property to use `.../[setCode]/art_full/[id].jpg`
+    - Updated `imageArtCrop` property to use `.../[setCode]/art_crop/[id].jpg`
+
+## Migration Note
+- Existing cached images in the root of `[setCode]` folder will be ignored by the new logic.
+- Users will need to re-parse or re-import sets/cubes to populate the new folder structure. This is an intentional breaking change for cleaner organization.
+
+## Outcome
+Filesystem is now cleaner with clear separation between full card art and crop art.

docs/development/devlog/2025-12-18-210000_fix_cube_session_clear.md

@@ -0,0 +1,22 @@
+---
+title: Fix Cube Session Clear
+status: Completed
+---
+
+## Objectives
+- Fix the "Clear Session" functionality in `CubeManager` which was failing to fully reset the application state.
+
+## Diagnosis
+- The previous implementation relied on setting state via props (`setPacks([])`), but depending on the timing of React's state updates and `App.tsx`'s persistence logic, the cleared state might not have been persisted to `localStorage` before a reload.
+- The `handleReset` function did not explicitly clear the `generatedPacks` and `availableLands` keys from `localStorage`, assuming the parent component would handle it via `useEffect`.
+
+## Fix Implemented
+- Refactored `handleReset` in `CubeManager.tsx`.
+- Added explicit `localStorage.removeItem('generatedPacks')` and `localStorage.removeItem('availableLands')` calls.
+- Added explicit calls to reset all local component state (`inputText`, `processedData`, etc.) and their respective storage keys.
+- Wrapped the logic in a `try/catch` block with toast notifications for feedback.
+- This ensures a robust, hard reset of the drafting session.
+
+## Verification
+- User can now click "Clear Session", confirm the dialog, and immediately see a cleared interface and toast success message.
+- Reloading the page will confirm the session is truly empty.

src/client/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5a5d9309'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.lcefu74575c"
+    "revision": "0.56865l1cj5s"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/client/src/modules/cube/CubeManager.tsx

@@ -443,20 +443,42 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, avail
 
   const handleReset = () => {
     if (window.confirm("Are you sure you want to clear this session? All parsed cards and generated packs will be lost.")) {
+      try {
+        console.log("Clearing session...");
+
+        // 1. Reset Parent State (App.tsx)
         setPacks([]);
+        setAvailableLands([]);
+
+        // 2. Explicitly clear parent persistence keys to ensure they are gone immediately
+        localStorage.removeItem('generatedPacks');
+        localStorage.removeItem('availableLands');
+
+        // 3. Reset Local State
         setInputText('');
         setRawScryfallData(null);
         setProcessedData(null);
-      setAvailableLands([]);
         setSelectedSets([]);
+
+        // 4. Clear Local Persistence
         localStorage.removeItem('cube_inputText');
         localStorage.removeItem('cube_rawScryfallData');
         localStorage.removeItem('cube_selectedSets');
         localStorage.removeItem('cube_viewMode');
         localStorage.removeItem('cube_gameTypeFilter');
+        // We can optionally clear source mode, or leave it. Let's leave it for UX continuity or clear it?
+        // Let's clear it to full reset.
+        // localStorage.removeItem('cube_sourceMode'); 
+
+        // 5. Reset UI Filters/Views to defaults
         setViewMode('list');
         setGameTypeFilter('all');
-      // We keep filters and settings as they are user preferences
+
+        showToast("Session cleared successfully.", "success");
+      } catch (error) {
+        console.error("Error clearing session:", error);
+        showToast("Failed to clear session fully.", "error");
+      }
     }
   };
 

src/client/src/modules/game/CardComponent.tsx

@@ -15,9 +15,10 @@ interface CardComponentProps {
   onDragEnd?: (e: React.DragEvent) => void;
   style?: React.CSSProperties;
   className?: string;
+  viewMode?: 'normal' | 'cutout';
 }
 
-export const CardComponent: React.FC<CardComponentProps> = ({ card, onDragStart, onClick, onContextMenu, onMouseEnter, onMouseLeave, onDrop, onDrag, onDragEnd, style, className }) => {
+export const CardComponent: React.FC<CardComponentProps> = ({ card, onDragStart, onClick, onContextMenu, onMouseEnter, onMouseLeave, onDrop, onDrag, onDragEnd, style, className, viewMode = 'normal' }) => {
   const { registerCard, unregisterCard } = useGesture();
   const cardRef = useRef<HTMLDivElement>(null);
 
@@ -28,6 +29,16 @@ export const CardComponent: React.FC<CardComponentProps> = ({ card, onDragStart,
     return () => unregisterCard(card.instanceId);
   }, [card.instanceId]);
 
+  // Robustly resolve Art Crop
+  let imageSrc = card.imageUrl;
+  if (viewMode === 'cutout' && card.definition) {
+    if (card.definition.image_uris?.art_crop) {
+      imageSrc = card.definition.image_uris.art_crop;
+    } else if (card.definition.card_faces?.[0]?.image_uris?.art_crop) {
+      imageSrc = card.definition.card_faces[0].image_uris.art_crop;
+    }
+  }
+
   return (
     <div
       ref={cardRef}
@@ -55,7 +66,7 @@ export const CardComponent: React.FC<CardComponentProps> = ({ card, onDragStart,
       onMouseLeave={onMouseLeave}
       className={`
         relative rounded-lg shadow-md cursor-pointer transition-transform hover:scale-105 select-none
-        ${card.tapped ? 'rotate-90' : ''}
+        ${card.tapped ? 'rotate-45' : ''}
         ${card.zone === 'hand' ? 'w-32 h-44 -ml-12 first:ml-0 hover:z-10 hover:-translate-y-4' : 'w-24 h-32'}
         ${className || ''}
       `}
@@ -64,7 +75,7 @@ export const CardComponent: React.FC<CardComponentProps> = ({ card, onDragStart,
       <div className="w-full h-full relative overflow-hidden rounded-lg bg-slate-800 border-2 border-slate-700">
         {!card.faceDown ? (
           <img
-            src={card.imageUrl}
+            src={imageSrc}
             alt={card.name}
             className="w-full h-full object-cover"
             draggable={false}

src/client/src/modules/game/GameView.tsx

@@ -1,5 +1,7 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { ChevronLeft, Eye } from 'lucide-react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, Eye, RotateCcw } from 'lucide-react';
+import { DndContext, DragOverlay, useSensor, useSensors, MouseSensor, TouchSensor, DragStartEvent, DragEndEvent, useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
 import { GameState, CardInstance } from '../../types/game';
 import { socketService } from '../../services/SocketService';
 import { CardComponent } from './CardComponent';
@@ -13,6 +15,40 @@ import { MulliganView } from './MulliganView';
 import { RadialMenu, RadialOption } from './RadialMenu';
 import { InspectorOverlay } from './InspectorOverlay';
 
+// --- DnD Helpers ---
+const DraggableCardWrapper = ({ children, card, disabled }: { children: React.ReactNode, card: CardInstance, disabled?: boolean }) => {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: card.instanceId,
+    data: { card, type: 'card' },
+    disabled
+  });
+
+  const style: React.CSSProperties | undefined = transform ? {
+    transform: CSS.Translate.toString(transform),
+    opacity: isDragging ? 0 : 1, // Hide original when dragging, we use overlay
+    zIndex: isDragging ? 999 : undefined
+  } : undefined;
+
+  return (
+    <div ref={setNodeRef} style={style} {...listeners} {...attributes} className="relative touch-none">
+      {children}
+    </div>
+  );
+};
+
+const DroppableZone = ({ id, children, className, data }: { id: string, children?: React.ReactNode, className?: string, data?: any }) => {
+  const { setNodeRef, isOver } = useDroppable({
+    id,
+    data
+  });
+
+  return (
+    <div ref={setNodeRef} className={`${className} ${isOver ? 'ring-2 ring-emerald-400 bg-emerald-400/10' : ''}`}>
+      {children}
+    </div>
+  );
+};
+
 interface GameViewProps {
   gameState: GameState;
   currentPlayerId: string;
@@ -26,12 +62,12 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
   // const { gameState: socketGameState, myPlayerId, isConnected } = useGameSocket();
   const battlefieldRef = useRef<HTMLDivElement>(null);
   const sidebarRef = useRef<HTMLDivElement>(null);
-  const [draggedCard, setDraggedCard] = useState<CardInstance | null>(null);
+  const [activeDragId, setActiveDragId] = useState<string | null>(null);
   const [inspectedCard, setInspectedCard] = useState<CardInstance | null>(null);
   const [radialOptions, setRadialOptions] = useState<RadialOption[] | null>(null);
   const [radialPosition, setRadialPosition] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
   const [isYielding, setIsYielding] = useState(false);
-  const touchStartRef = useRef<{ x: number, y: number, time: number } | null>(null);
+
   const [contextMenu, setContextMenu] = useState<ContextMenuRequest | null>(null);
   const [viewingZone, setViewingZone] = useState<string | null>(null);
   const [hoveredCard, setHoveredCard] = useState<CardInstance | null>(null);
@@ -72,9 +108,6 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
   const [proposedAttackers, setProposedAttackers] = useState<Set<string>>(new Set());
   const [proposedBlockers, setProposedBlockers] = useState<Map<string, string>>(new Map()); // BlockerId -> AttackerId
 
-  // --- Tether State ---
-  const [tether, setTether] = useState<{ startX: number, startY: number, currentX: number, currentY: number } | null>(null);
-
   // Reset proposed state when step changes
   useEffect(() => {
     setProposedAttackers(new Set());
@@ -190,12 +223,12 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
       if (card) {
         setRadialPosition({ x: payload.x || window.innerWidth / 2, y: payload.y || window.innerHeight / 2 });
         setRadialOptions([
-          { id: 'W', label: 'White', color: '#f0f2eb', onSelect: () => socketService.socket.emit('game_action', { action: { type: 'ADD_MANA', color: 'W' } }) },
-          { id: 'U', label: 'Blue', color: '#aae0fa', onSelect: () => socketService.socket.emit('game_action', { action: { type: 'ADD_MANA', color: 'U' } }) },
-          { id: 'B', label: 'Black', color: '#cbc2bf', onSelect: () => socketService.socket.emit('game_action', { action: { type: 'ADD_MANA', color: 'B' } }) },
-          { id: 'R', label: 'Red', color: '#f9aa8f', onSelect: () => socketService.socket.emit('game_action', { action: { type: 'ADD_MANA', color: 'R' } }) },
-          { id: 'G', label: 'Green', color: '#9bd3ae', onSelect: () => socketService.socket.emit('game_action', { action: { type: 'ADD_MANA', color: 'G' } }) },
-          { id: 'C', label: 'Colorless', color: '#ccc2c0', onSelect: () => socketService.socket.emit('game_action', { action: { type: 'ADD_MANA', color: 'C' } }) },
+          { id: 'W', label: 'White', color: '#f0f2eb', onSelect: () => socketService.socket.emit('game_strict_action', { action: { type: 'ADD_MANA', color: 'W' } }) },
+          { id: 'U', label: 'Blue', color: '#aae0fa', onSelect: () => socketService.socket.emit('game_strict_action', { action: { type: 'ADD_MANA', color: 'U' } }) },
+          { id: 'B', label: 'Black', color: '#cbc2bf', onSelect: () => socketService.socket.emit('game_strict_action', { action: { type: 'ADD_MANA', color: 'B' } }) },
+          { id: 'R', label: 'Red', color: '#f9aa8f', onSelect: () => socketService.socket.emit('game_strict_action', { action: { type: 'ADD_MANA', color: 'R' } }) },
+          { id: 'G', label: 'Green', color: '#9bd3ae', onSelect: () => socketService.socket.emit('game_strict_action', { action: { type: 'ADD_MANA', color: 'G' } }) },
+          { id: 'C', label: 'Colorless', color: '#ccc2c0', onSelect: () => socketService.socket.emit('game_strict_action', { action: { type: 'ADD_MANA', color: 'C' } }) },
         ]);
       }
       return;
@@ -226,105 +259,6 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
     });
   };
 
-  const activeCardDropRef = useRef<string | null>(null);
-
-  const handleZoneDrop = (e: React.DragEvent, zone: CardInstance['zone']) => {
-    e.preventDefault();
-    const cardId = e.dataTransfer.getData('cardId');
-    if (!cardId) return;
-
-    // Strict Rules Logic for Battlefield Drops
-    if (zone === 'battlefield') {
-      const card = gameState.cards[cardId];
-      if (!card) return;
-
-      const rect = battlefieldRef.current?.getBoundingClientRect();
-      let position;
-
-      if (rect) {
-        const rawX = ((e.clientX - rect.left) / rect.width) * 100;
-        const rawY = ((e.clientY - rect.top) / rect.height) * 100;
-        const x = Math.max(0, Math.min(90, rawX));
-        const y = Math.max(0, Math.min(85, rawY));
-        position = { x, y };
-      }
-
-      if (card.typeLine?.includes('Land')) {
-        socketService.socket.emit('game_strict_action', {
-          type: 'PLAY_LAND',
-          cardId,
-          position
-        });
-      } else {
-        // Cast Spell (No Target - e.g. Creature, Artifact, or Global/Self)
-        socketService.socket.emit('game_strict_action', {
-          type: 'CAST_SPELL',
-          cardId,
-          position: position,
-          targets: []
-        });
-      }
-      return;
-    }
-
-    // Default Move (Hand->Exile, Grave->Hand etc) - Legacy/Sandbox Fallback
-    const action: any = {
-      type: 'MOVE_CARD',
-      cardId,
-      toZone: zone
-    };
-    socketService.socket.emit('game_action', { action });
-  };
-
-  const handleCardDrop = (e: React.DragEvent, targetCardId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const cardId = e.dataTransfer.getData('cardId');
-    if (!cardId || cardId === targetCardId) return;
-
-    const sourceCard = gameState.cards[cardId];
-    const targetCard = gameState.cards[targetCardId];
-    if (!sourceCard || !targetCard) return;
-
-    // Blocking Logic: Drag My Battlefied Creature -> Opponent Attacking Creature
-    if (gameState.step === 'declare_blockers' && sourceCard.zone === 'battlefield' && sourceCard.controllerId === currentPlayerId && targetCard.controllerId !== currentPlayerId) {
-      // Toggle Blocking
-      const newMap = new Map(proposedBlockers);
-      // If already blocking this specific one, remove? Or just overwrite?
-      // Basic 1-to-1 for now. If multiple blockers, we can support it.
-      // Let's assume Drag = Assign.
-      newMap.set(sourceCard.instanceId, targetCard.instanceId);
-      setProposedBlockers(newMap);
-      return;
-    }
-
-    // Default: Assume Cast Spell with Target (if from Hand)
-    if (sourceCard.zone === 'hand') {
-      socketService.socket.emit('game_strict_action', {
-        type: 'CAST_SPELL',
-        cardId,
-        targets: [targetCardId]
-      });
-    }
-  };
-
-  const handlePlayerDrop = (e: React.DragEvent, targetPlayerId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const cardId = e.dataTransfer.getData('cardId');
-    if (!cardId) return;
-
-    socketService.socket.emit('game_strict_action', {
-      type: 'CAST_SPELL',
-      cardId,
-      targets: [targetPlayerId]
-    });
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-  };
-
   const toggleTap = (cardId: string) => {
     socketService.socket.emit('game_action', {
       action: {
@@ -365,22 +299,71 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
     }
   };
 
-  const handleDragStart = (e: React.DragEvent, cardId: string) => {
-    e.dataTransfer.setData('cardId', cardId);
-    // Hide default drag image to show tether clearly? 
-    // No, keep Ghost image for reference.
-    if (e.clientX !== 0) {
-      setTether({ startX: e.clientX, startY: e.clientY, currentX: e.clientX, currentY: e.clientY });
+  // --- DnD Sensors & Logic ---
+  const sensors = useSensors(
+    useSensor(MouseSensor, { activationConstraint: { distance: 10 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 5 } })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveDragId(event.active.id as string);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveDragId(null);
+    const { active, over } = event;
+
+    if (!over) return;
+
+    const cardId = active.id as string;
+    const card = gameState.cards[cardId];
+    if (!card) return;
+
+    // --- Drop on Zone ---
+    if (over.data.current?.type === 'zone') {
+      const zoneName = over.id as string;
+
+      if (zoneName === 'battlefield') {
+        // Handle Battlefield Drop (Play Land / Cast)
+        // Note: dnd-kit doesn't give precise coordinates relative to the container as easily as native events
+        // unless we calculate it from `event.delta` or `active.rect`.
+        // For now, we will drop to "center" or default position if we don't calculate relative %.
+        // Let's rely on standard logic:
+
+        if (card.typeLine?.includes('Land')) {
+          socketService.socket.emit('game_strict_action', { action: { type: 'PLAY_LAND', cardId } });
+        } else {
+          socketService.socket.emit('game_strict_action', { action: { type: 'CAST_SPELL', cardId, targets: [] } });
+        }
+      } else {
+        // Move to other zones (Hand/Grave/Exile)
+        socketService.socket.emit('game_action', { action: { type: 'MOVE_CARD', cardId, toZone: zoneName } });
+      }
+      return;
     }
-  };
 
-  const handleDrag = (e: React.DragEvent) => {
-    if (e.clientX === 0 && e.clientY === 0) return; // Ignore invalid end-drag events
-    setTether(prev => prev ? { ...prev, currentX: e.clientX, currentY: e.clientY } : null);
-  };
+    // --- Drop on Card (Targeting / Blocking) ---
+    if (over.data.current?.type === 'card' || over.data.current?.type === 'player') {
+      const targetId = over.id as string;
+      const targetCard = gameState.cards[targetId];
 
-  const handleDragEnd = () => {
-    setTether(null);
+      if (gameState.step === 'declare_blockers' && card.zone === 'battlefield') {
+        // Blocking Logic
+        if (targetCard && targetCard.controllerId !== currentPlayerId) {
+          const newMap = new Map(proposedBlockers);
+          newMap.set(card.instanceId, targetCard.instanceId);
+          setProposedBlockers(newMap);
+        }
+        return;
+      }
+
+      // Default Cast with Target
+      if (card.zone === 'hand') {
+        socketService.socket.emit('game_strict_action', {
+          action: { type: 'CAST_SPELL', cardId, targets: [targetId] }
+        });
+      }
+    }
   };
 
   const myPlayer = gameState.players[currentPlayerId];
@@ -405,6 +388,7 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
   const oppExile = getCards(opponentId, 'exile');
 
   return (
+    <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
       <div
         className="flex h-full w-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-900 to-black text-white overflow-hidden select-none font-sans"
         onContextMenu={(e) => handleContextMenu(e, 'background')}
@@ -415,37 +399,23 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
           onAction={handleMenuAction}
         />
 
-      {viewingZone && (
+        {
+          viewingZone && (
             <ZoneOverlay
               zoneName={viewingZone}
               cards={getCards(currentPlayerId, viewingZone)}
               onClose={() => setViewingZone(null)}
               onCardContextMenu={(e, cardId) => handleContextMenu(e, 'card', cardId)}
             />
-      )}
+          )
+        }
 
         {/* Targeting Tether Overlay */}
-      {tether && (
-        <svg className="absolute inset-0 pointer-events-none z-[100] overflow-visible w-full h-full">
-          <defs>
-            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-              <polygon points="0 0, 10 3.5, 0 7" fill={gameState.step === 'declare_blockers' ? '#3b82f6' : '#22d3ee'} />
-            </marker>
-          </defs>
-          <path
-            d={`M ${tether.startX} ${tether.startY} Q ${(tether.startX + tether.currentX) / 2} ${Math.min(tether.startY, tether.currentY) - 50} ${tether.currentX} ${tether.currentY}`}
-            fill="none"
-            stroke={gameState.step === 'declare_blockers' ? '#3b82f6' : '#22d3ee'}
-            strokeWidth="4"
-            strokeDasharray="10,5"
-            markerEnd="url(#arrowhead)"
-            className="drop-shadow-[0_0_10px_rgba(34,211,238,0.8)] animate-pulse"
-          />
-        </svg>
-      )}
+        {/* Targeting Tether Overlay - REMOVED per user request */}
 
         {/* Mulligan Overlay */}
-      {gameState.step === 'mulligan' && !myPlayer?.handKept && (
+        {
+          gameState.step === 'mulligan' && !myPlayer?.handKept && (
             <MulliganView
               hand={myHand}
               mulliganCount={myPlayer?.mulliganCount || 0}
@@ -459,27 +429,33 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                 });
               }}
             />
-      )}
+          )
+        }
 
         {/* Inspector Overlay */}
-      {inspectedCard && (
+        {
+          inspectedCard && (
             <InspectorOverlay
               card={inspectedCard}
               onClose={() => setInspectedCard(null)}
             />
-      )}
+          )
+        }
 
         {/* Radial Menu (Mana Ability Demo) */}
-      {radialOptions && (
+        {
+          radialOptions && (
             <RadialMenu
               options={radialOptions}
               position={radialPosition}
               onClose={() => setRadialOptions(null)}
             />
-      )}
+          )
+        }
 
         {/* Zoom Sidebar */}
-      {isSidebarCollapsed ? (
+        {
+          isSidebarCollapsed ? (
             <div key="collapsed" className="hidden xl:flex shrink-0 w-12 flex-col items-center py-4 bg-slate-900 border-r border-slate-800 z-30 gap-4 transition-all duration-300">
               <button
                 onClick={() => setIsSidebarCollapsed(false)}
@@ -583,7 +559,8 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                 <div className="h-8 w-1 bg-slate-700/50 rounded-full group-hover:bg-emerald-400 transition-colors" />
               </div>
             </div>
-      )}
+          )
+        }
 
         {/* Main Game Area */}
         <div className="flex-1 flex flex-col h-full relative">
@@ -601,9 +578,9 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
             {/* Opponent Info Bar */}
             <div
               className="absolute top-4 left-4 z-10 flex items-center space-x-4 pointer-events-auto bg-black/50 p-2 rounded-lg backdrop-blur-sm border border-slate-700"
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={(e) => opponent && handlePlayerDrop(e, opponent.id)}
             >
+              <DroppableZone id={opponentId || 'opponent'} data={{ type: 'player' }} className="absolute inset-0 z-0 opacity-0">Player</DroppableZone>
+              <div className="flex flex-col z-10 pointer-events-none">
                 <div className="flex flex-col">
                   <span className="font-bold text-lg text-red-400">{opponent?.name || 'Waiting...'}</span>
                   <div className="flex gap-2 text-xs text-slate-400">
@@ -615,6 +592,7 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                 </div>
                 <div className="text-3xl font-bold text-white">{opponent?.life}</div>
               </div>
+            </div>
 
             {/* Opponent Battlefield */}
             <div className="flex-1 w-full relative perspective-1000">
@@ -642,16 +620,18 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                     >
                       <CardComponent
                         card={card}
+                        viewMode="cutout"
                         onDragStart={() => { }}
-                      onDrop={(e, id) => handleCardDrop(e, id)} // Allow dropping onto opponent card
                         onClick={() => { }}
                         onMouseEnter={() => setHoveredCard(card)}
                         onMouseLeave={() => setHoveredCard(null)}
                         className={`
+                              w-24 h-24 rounded shadow-sm
                               ${isAttacking ? "ring-4 ring-red-600 shadow-[0_0_20px_rgba(220,38,38,0.6)]" : ""}
                               ${isBlockedByMe ? "ring-4 ring-blue-500" : ""}
                             `}
                       />
+                      <DroppableZone id={card.instanceId} data={{ type: 'card' }} className="absolute inset-0 rounded-lg" />
                       {isAttacking && (
                         <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded shadow">
                           ATTACKING
@@ -665,15 +645,14 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
           </div>
 
           {/* Middle Area: My Battlefield (The Table) */}
+          <DroppableZone id="battlefield" data={{ type: 'zone' }} className="flex-[4] relative perspective-1000 z-10">
             <div
-          className="flex-[4] relative perspective-1000 z-10"
+              className="w-full h-full"
               ref={battlefieldRef}
-          onDragOver={handleDragOver}
-          onDrop={(e) => handleZoneDrop(e, 'battlefield')}
             >
               <GestureManager onGesture={handleGesture}>
                 <div
-              className="w-full h-full relative bg-slate-900/20 border-y border-white/5 shadow-inner"
+                  className="w-full h-full relative bg-slate-900/20 border-y border-white/5 shadow-inner flex flex-col"
                   style={{
                     transform: 'rotateX(25deg)',
                     transformOrigin: 'center 40%',
@@ -681,21 +660,26 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                   }}
                 >
                   {/* Battlefield Texture/Grid */}
-              <div className="absolute inset-0 opacity-10 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
+                  <div className="absolute inset-0 opacity-10 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:50px_50px] pointer-events-none"></div>
 
-              {myBattlefield.map(card => {
+                  {(() => {
+                    const creatures = myBattlefield.filter(c => c.types?.includes('Creature'));
+                    const allLands = myBattlefield.filter(c => c.types?.includes('Land') && !c.types?.includes('Creature'));
+                    const others = myBattlefield.filter(c => !c.types?.includes('Creature') && !c.types?.includes('Land'));
+
+                    const untappedLands = allLands.filter(c => !c.tapped);
+                    const tappedLands = allLands.filter(c => c.tapped);
+
+                    const renderCard = (card: CardInstance) => {
                       const isAttacking = proposedAttackers.has(card.instanceId);
                       const blockingTargetId = proposedBlockers.get(card.instanceId);
 
                       return (
                         <div
                           key={card.instanceId}
-                    className="absolute transition-all duration-300"
+                          className="relative transition-all duration-300"
                           style={{
-                      left: `${card.position?.x || Math.random() * 80}%`,
-                      top: `${card.position?.y || Math.random() * 80}%`,
-                      zIndex: card.position?.z ?? (Math.floor((card.position?.y || 0)) + 10),
-                      // Visual feedback for attacking OR blocking
+                            zIndex: 10,
                             transform: isAttacking
                               ? 'translateY(-40px) scale(1.1) rotateX(10deg)'
                               : blockingTargetId
@@ -704,53 +688,94 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                             boxShadow: isAttacking ? '0 20px 40px -10px rgba(239, 68, 68, 0.5)' : 'none'
                           }}
                         >
+                          <DraggableCardWrapper card={card}>
                             <CardComponent
                               card={card}
-                      onDragStart={(e, id) => handleDragStart(e, id)}
-                      onDrag={handleDrag}
-                      onDragEnd={handleDragEnd}
-                      onDrop={(e, targetId) => handleCardDrop(e, targetId)}
+                              viewMode="cutout"
+                              onDragStart={() => { }}
                               onClick={(id) => {
-                        // Click logic mimics gesture logic for single card
                                 if (gameState.step === 'declare_attackers') {
                                   const newSet = new Set(proposedAttackers);
                                   if (newSet.has(id)) newSet.delete(id);
                                   else newSet.add(id);
                                   setProposedAttackers(newSet);
-                        } else if (gameState.step === 'declare_blockers') {
-                          // If I click my blocker, maybe select it? 
-                          // For now, dragging is the primary blocking input.
                                 } else {
                                   toggleTap(id);
                                 }
                               }}
-                      onContextMenu={(id, e) => {
-                        handleContextMenu(e, 'card', id);
-                      }}
+                              onContextMenu={(id, e) => handleContextMenu(e, 'card', id)}
                               onMouseEnter={() => setHoveredCard(card)}
                               onMouseLeave={() => setHoveredCard(null)}
                               className={`
+                                  w-24 h-24 rounded shadow-sm transition-all duration-300
                                   ${isAttacking ? "ring-4 ring-red-500 ring-offset-2 ring-offset-slate-900" : ""}
                                   ${blockingTargetId ? "ring-4 ring-blue-500 ring-offset-2 ring-offset-slate-900" : ""}
                                 `}
                             />
+                          </DraggableCardWrapper>
                           {blockingTargetId && (
                             <div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-[10px] uppercase font-bold px-2 py-0.5 rounded shadow z-50 whitespace-nowrap">
                               Blocking
                             </div>
                           )}
                         </div>
-                )
-              })}
+                      );
+                    };
 
-              {myBattlefield.length === 0 && (
-                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                  <span className="text-white/10 text-4xl font-bold uppercase tracking-widest">Battlefield</span>
+                    return (
+                      <>
+                        <div className="flex-1 flex flex-wrap content-end justify-center items-end p-4 gap-2 border-b border-white/5 relative z-10 w-full">
+                          {creatures.length === 0 && (
+                            <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20">
+                              <span className="text-white text-2xl font-bold uppercase tracking-widest">Combat Zone</span>
+                            </div>
+                          )}
+                          {creatures.map(renderCard)}
+                        </div>
+                        <div className="min-h-[120px] flex flex-wrap content-center justify-center items-center p-2 gap-2 border-b border-white/5 relative z-0 w-full bg-slate-900/30">
+                          {others.length > 0 ? others.map(renderCard) : (
+                            <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-10">
+                              <span className="text-white text-xs font-bold uppercase tracking-widest">Artifacts & Enchantments</span>
                             </div>
                           )}
                         </div>
+                        <div className="min-h-[120px] flex content-start justify-center items-start p-2 gap-4 relative z-0 w-full">
+                          {allLands.length === 0 && (
+                            <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-10">
+                              <span className="text-white text-xs font-bold uppercase tracking-widest">Lands</span>
+                            </div>
+                          )}
+
+                          {/* Tapped Lands Stack */}
+                          {tappedLands.length > 0 && (
+                            <div className="relative min-w-[140px] h-32 flex items-center justify-center">
+                              {tappedLands.map((card, i) => (
+                                <div
+                                  key={card.instanceId}
+                                  className="absolute origin-center"
+                                  style={{
+                                    transform: `translate(${i * 2}px, ${i * -2}px)`,
+                                    zIndex: i,
+                                  }}
+                                >
+                                  {renderCard(card)}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+
+                          {/* Untapped Lands */}
+                          <div className="flex flex-wrap gap-1 content-start items-start justify-center">
+                            {untappedLands.map(renderCard)}
+                          </div>
+                        </div>
+                      </>
+                    );
+                  })()}
+                </div>
               </GestureManager>
             </div>
+          </DroppableZone>
 
           {/* Bottom Area: Controls & Hand */}
           <div className="h-48 relative z-20 flex bg-gradient-to-t from-black to-slate-900/80 backdrop-blur-md shadow-[0_-5px_20px_rgba(0,0,0,0.5)]">
@@ -763,10 +788,15 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
               </div>
 
               <div className="flex gap-2">
-              <div
+                <DroppableZone
+                  id="library"
+                  data={{ type: 'zone' }}
                   className="group relative w-12 h-16 bg-slate-800 rounded border border-slate-600 cursor-pointer shadow-lg transition-transform hover:-translate-y-1 hover:shadow-cyan-500/20"
+                >
+                  <div
+                    className="w-full h-full relative"
                     onClick={() => socketService.socket.emit('game_action', { action: { type: 'DRAW_CARD' } })}
-                onContextMenu={(e) => handleContextMenu(e, 'zone', undefined, 'library')}
+                    onContextMenu={(e: React.MouseEvent) => handleContextMenu(e, 'zone', undefined, 'library')}
                   >
                     <div className="absolute inset-0 bg-gradient-to-br from-slate-700 to-slate-800 rounded"></div>
                     <div className="absolute inset-0 flex items-center justify-center flex-col">
@@ -774,35 +804,36 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                       <span className="text-sm font-bold text-white">{myLibrary.length}</span>
                     </div>
                   </div>
+                </DroppableZone>
 
-              <div
+                <DroppableZone
+                  id="graveyard"
+                  data={{ type: 'zone' }}
                   className="w-12 h-16 border-2 border-dashed border-slate-600 rounded flex items-center justify-center transition-colors hover:border-slate-400 hover:bg-white/5"
-                onDragOver={handleDragOver}
-                onDrop={(e) => handleZoneDrop(e, 'graveyard')}
+                >
+                  <div
+                    className="w-full h-full flex flex-col items-center justify-center"
                     onContextMenu={(e) => handleContextMenu(e, 'zone', undefined, 'graveyard')}
                   >
-                <div className="text-center">
                     <span className="block text-slate-500 text-[8px] uppercase">GY</span>
                     <span className="text-sm font-bold text-slate-400">{myGraveyard.length}</span>
                   </div>
-              </div>
+                </DroppableZone>
               </div>
             </div>
 
             {/* Hand Area & Smart Button */}
-          <div
-            className="flex-1 relative flex flex-col items-center justify-end px-4 pb-2"
-            onDragOver={handleDragOver}
-            onDrop={(e) => handleZoneDrop(e, 'hand')}
-          >
+            <div className="flex-1 relative flex flex-col items-center justify-end px-4 pb-2">
+              <DroppableZone id="hand" data={{ type: 'zone' }} className="flex-1 w-full h-full flex flex-col justify-end">
+
                 {/* Smart Button Floating above Hand */}
-            <div className="mb-4 z-40">
+                <div className="mb-4 z-40 self-center">
                   <SmartButton
                     gameState={gameState}
                     playerId={currentPlayerId}
                     onAction={(type, payload) => socketService.socket.emit(type, { action: payload })}
                     contextData={{
-                  attackers: Array.from(proposedAttackers),
+                      attackers: Array.from(proposedAttackers).map(id => ({ attackerId: id, targetId: opponentId })),
                       blockers: Array.from(proposedBlockers.entries()).map(([blockerId, attackerId]) => ({ blockerId, attackerId }))
                     }}
                     isYielding={isYielding}
@@ -820,25 +851,39 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                         zIndex: index
                       }}
                     >
+                      <DraggableCardWrapper card={card}>
                         <CardComponent
                           card={card}
-                    onDragStart={(e, id) => handleDragStart(e, id)}
-                    onDrag={handleDrag}
-                    onDragEnd={handleDragEnd}
+                          onDragStart={() => { }}
+                          onDragEnd={() => { }}
                           onClick={toggleTap}
                           onContextMenu={(id, e) => handleContextMenu(e, 'card', id)}
                           style={{ transformOrigin: 'bottom center' }}
                           onMouseEnter={() => setHoveredCard(card)}
                           onMouseLeave={() => setHoveredCard(null)}
                         />
+                      </DraggableCardWrapper>
                     </div>
                   ))}
                 </div>
+              </DroppableZone>
             </div>
 
             {/* Right Controls: Exile / Life */}
             <div className="w-40 p-2 flex flex-col gap-4 items-center justify-between border-l border-white/10 py-4">
-            <div className="text-center">
+              <div className="text-center w-full relative">
+                <button
+                  className="absolute top-0 right-0 p-1 text-slate-600 hover:text-white transition-colors"
+                  title="Restart Game (Dev)"
+                  onClick={() => {
+                    if (window.confirm('Restart game? Deck will remain, state will reset.')) {
+                      socketService.socket.emit('game_action', { action: { type: 'RESTART_GAME' } });
+                    }
+                  }}
+                >
+                  <RotateCcw className="w-3 h-3" />
+                </button>
+
                 <div className="text-[10px] text-slate-400 uppercase tracking-wider mb-1">Your Life</div>
                 <div className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-emerald-400 to-emerald-700 drop-shadow-[0_2px_10px_rgba(16,185,129,0.3)]">
                   {myPlayer?.life}
@@ -879,19 +924,28 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                 })}
               </div>
 
-            <div
-              className="w-full text-center border-t border-white/5 pt-2 cursor-pointer hover:bg-white/5 rounded p-1"
-              onDragOver={handleDragOver}
-              onDrop={(e) => handleZoneDrop(e, 'exile')}
-              onContextMenu={(e) => handleContextMenu(e, 'zone', undefined, 'exile')}
-            >
+              <DroppableZone id="exile" data={{ type: 'zone' }} className="w-full text-center border-t border-white/5 pt-2 cursor-pointer hover:bg-white/5 rounded p-1">
+                <div onContextMenu={(e) => handleContextMenu(e, 'zone', undefined, 'exile')}>
                   <span className="text-xs text-slate-500 block">Exile Drop Zone</span>
                   <span className="text-lg font-bold text-slate-400">{myExile.length}</span>
                 </div>
+              </DroppableZone>
             </div>
 
           </div>
         </div>
+        <DragOverlay dropAnimation={{ duration: 0, easing: 'linear' }}>
+          {activeDragId ? (
+            <div className="w-32 h-48 pointer-events-none opacity-80 z-[1000]">
+              <img
+                src={gameState.cards[activeDragId]?.imageUrl}
+                alt="Drag Preview"
+                className="w-full h-full object-cover rounded-xl shadow-2xl"
+              />
             </div>
+          ) : null}
+        </DragOverlay>
+      </div>
+    </DndContext>
   );
 };

src/client/src/modules/game/GestureManager.tsx

@@ -1,6 +1,5 @@
 
-import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
-import { socketService } from '../../services/SocketService';
+import React, { createContext, useContext, useRef, useState } from 'react';
 
 interface GestureContextType {
   registerCard: (id: string, element: HTMLElement) => void;

src/client/src/modules/game/SmartButton.tsx

@@ -26,10 +26,16 @@ export const SmartButton: React.FC<SmartButtonProps> = ({ gameState, playerId, o
     actionType = 'CANCEL_YIELD';
   } else if (isMyPriority) {
     if (gameState.step === 'declare_attackers') {
+      if (gameState.attackersDeclared) {
+        label = "Pass (to Blockers)";
+        colorClass = "bg-emerald-600 hover:bg-emerald-500 text-white shadow-[0_0_15px_rgba(16,185,129,0.5)] animate-pulse";
+        actionType = 'PASS_PRIORITY';
+      } else {
         const count = contextData?.attackers?.length || 0;
         label = count > 0 ? `Attack with ${count}` : "Skip Combat";
         colorClass = "bg-red-600 hover:bg-red-500 text-white shadow-[0_0_15px_rgba(239,68,68,0.5)] animate-pulse";
         actionType = 'DECLARE_ATTACKERS';
+      }
     } else if (gameState.step === 'declare_blockers') {
       // Todo: blockers context
       label = "Declare Blockers";

src/client/src/modules/lobby/LobbyManager.tsx

@@ -215,7 +215,7 @@ export const LobbyManager: React.FC<LobbyManagerProps> = ({ generatedPacks, avai
     }
   }, [activeRoom]);
 
-  // Reconnection logic
+  // Reconnection logic (Initial Mount)
   React.useEffect(() => {
     const savedRoomId = localStorage.getItem('active_room_id');
     if (savedRoomId && !activeRoom && playerId) {
@@ -246,6 +246,29 @@ export const LobbyManager: React.FC<LobbyManagerProps> = ({ generatedPacks, avai
     }
   }, []);
 
+  // Auto-Rejoin on Socket Reconnect (e.g. Server Restart)
+  React.useEffect(() => {
+    const socket = socketService.socket;
+
+    const onConnect = () => {
+      if (activeRoom && playerId) {
+        console.log("Socket reconnected. Attempting to restore session for room:", activeRoom.id);
+        socketService.emitPromise('rejoin_room', { roomId: activeRoom.id, playerId })
+          .then((response: any) => {
+            if (response.success) {
+              console.log("Session restored successfully.");
+            } else {
+              console.warn("Failed to restore session:", response.message);
+            }
+          })
+          .catch(err => console.error("Session restore error:", err));
+      }
+    };
+
+    socket.on('connect', onConnect);
+    return () => { socket.off('connect', onConnect); };
+  }, [activeRoom, playerId]);
+
   // Listener for room updates to switch view
   React.useEffect(() => {
     const socket = socketService.socket;

src/client/src/services/PackGeneratorService.ts

@@ -107,9 +107,11 @@ export class PackGeneratorService {
         layout: layout,
         colors: cardData.colors || [],
         image: useLocalImages
-          ? `${window.location.origin}/cards/images/${cardData.set}/${cardData.id}.jpg`
+          ? `${window.location.origin}/cards/images/${cardData.set}/art_full/${cardData.id}.jpg`
           : (cardData.image_uris?.normal || cardData.card_faces?.[0]?.image_uris?.normal || ''),
-        imageArtCrop: cardData.image_uris?.art_crop || cardData.card_faces?.[0]?.image_uris?.art_crop || '',
+        imageArtCrop: useLocalImages
+          ? `${window.location.origin}/cards/images/${cardData.set}/art_crop/${cardData.id}.jpg`
+          : (cardData.image_uris?.art_crop || cardData.card_faces?.[0]?.image_uris?.art_crop || ''),
         set: cardData.set_name,
         setCode: cardData.set,
         setType: setType,

src/client/src/types/game.ts

@@ -39,8 +39,12 @@ export interface CardInstance {
   baseToughness?: number; // Base Toughness
   position: { x: number; y: number; z: number }; // For freeform placement
   typeLine?: string;
+  types?: string[];
+  supertypes?: string[];
+  subtypes?: string[];
   oracleText?: string;
   manaCost?: string;
+  definition?: any;
 }
 
 export interface PlayerState {
@@ -68,4 +72,6 @@ export interface GameState {
   stack?: StackObject[];
   activePlayerId?: string; // Explicitly tracked in strict
   priorityPlayerId?: string;
+  attackersDeclared?: boolean;
+  blockersDeclared?: boolean;
 }

src/server/game/RulesEngine.ts

@@ -60,6 +60,14 @@ export class RulesEngine {
     return true;
   }
 
+  public startGame() {
+    console.log("RulesEngine: Starting Game...");
+    // Ensure specific setup if needed (life total, etc is done elsewhere)
+
+    // Trigger Initial Draw
+    this.performTurnBasedActions();
+  }
+
   public castSpell(playerId: string, cardId: string, targets: string[] = [], position?: { x: number, y: number }) {
     if (this.state.priorityPlayerId !== playerId) throw new Error("Not your priority.");
 
@@ -136,6 +144,7 @@ export class RulesEngine {
     });
 
     console.log(`Player ${playerId} declared ${attackers.length} attackers.`);
+    this.state.attackersDeclared = true; // Flag for UI/Engine state
 
     // 508.2. Active Player gets priority
     // But usually passing happens immediately after declaration in digital?
@@ -361,6 +370,21 @@ export class RulesEngine {
       nextStep = structure[nextPhase][0];
     }
 
+    // SKIP Logic for Combat
+    // 508.8. If no creatures are declared as attackers... skip declare blockers/combat damage steps.
+    if (this.state.phase === 'combat') {
+      const attackers = Object.values(this.state.cards).filter(c => !!c.attacking);
+
+      // If we are about to enter declare_blockers or combat_damage and NO attackers exist
+      // Note: We check 'attacking' status. If we just finished declare_attackers, we might have reset it? 
+      // No, 'attacking' property persists until end of combat.
+
+      if (nextStep === 'declare_blockers' && attackers.length === 0) {
+        console.log("No attackers. Skipping directly to End of Combat.");
+        nextStep = 'end_combat';
+      }
+    }
+
     // Rule 500.4: Mana empties at end of each step and phase
     this.emptyManaPools();
 
@@ -523,7 +547,7 @@ export class RulesEngine {
     });
   }
 
-  private drawCard(playerId: string) {
+  public drawCard(playerId: string) {
     const library = Object.values(this.state.cards).filter(c => c.ownerId === playerId && c.zone === 'library');
     if (library.length > 0) {
       // Draw top card (random for now if not ordered?)
@@ -546,6 +570,9 @@ export class RulesEngine {
         c.modifiers = c.modifiers.filter(m => !m.untilEndOfTurn);
       }
     });
+
+    this.state.attackersDeclared = false;
+    this.state.blockersDeclared = false;
   }
 
   // --- State Based Actions ---

src/server/game/types.ts

@@ -62,6 +62,7 @@ export interface CardObject {
 
   // Metadata
   controlledSinceTurn: number; // For Summoning Sickness check
+  definition?: any;
 }
 
 export interface PlayerState {
@@ -108,6 +109,8 @@ export interface StrictGameState {
   // Rules State
   passedPriorityCount: number; // 0..N. If N, advance.
   landsPlayedThisTurn: number;
+  attackersDeclared?: boolean;
+  blockersDeclared?: boolean;
 
   maxZ: number; // Visual depth (legacy support)
 }

src/server/index.ts

@@ -11,6 +11,7 @@ import { ScryfallService } from './services/ScryfallService';
 import { PackGeneratorService } from './services/PackGeneratorService';
 import { CardParserService } from './services/CardParserService';
 import { PersistenceManager } from './managers/PersistenceManager';
+import { RulesEngine } from './game/RulesEngine';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -255,6 +256,11 @@ const draftInterval = setInterval(() => {
             });
           }
         });
+
+        // Initialize Game State (Draw Hands)
+        const engine = new RulesEngine(game);
+        engine.startGame();
+
         io.to(roomId).emit('game_update', game);
       }
     }
@@ -471,12 +477,19 @@ io.on('connection', (socket) => {
                 oracleText: card.oracleText || card.oracle_text || '',
                 manaCost: card.manaCost || card.mana_cost || '',
                 keywords: card.keywords || [],
+                power: card.power, // Add Power
+                toughness: card.toughness, // Add Toughness
                 damageMarked: 0,
                 controlledSinceTurn: 0
               });
             });
           }
         });
+
+        // Initialize Game State (Draw Hands)
+        const engine = new RulesEngine(game);
+        engine.startGame();
+
         io.to(room.id).emit('game_update', game);
       }
     }
@@ -501,11 +514,18 @@ io.on('connection', (socket) => {
           oracleText: card.oracleText || card.oracle_text || '',
           manaCost: card.manaCost || card.mana_cost || '',
           keywords: card.keywords || [],
+          power: card.power,
+          toughness: card.toughness,
           damageMarked: 0,
           controlledSinceTurn: 0
         });
       });
     }
+
+    // Initialize Game State (Draw Hands)
+    const engine = new RulesEngine(game);
+    engine.startGame();
+
     callback({ success: true, room, game });
     io.to(room.id).emit('room_update', room);
     io.to(room.id).emit('game_update', game);
@@ -535,12 +555,19 @@ io.on('connection', (socket) => {
               oracleText: card.oracleText || card.oracle_text || '',
               manaCost: card.manaCost || card.mana_cost || '',
               keywords: card.keywords || [],
+              power: card.power,
+              toughness: card.toughness,
               damageMarked: 0,
               controlledSinceTurn: 0
             });
           });
         });
       }
+
+      // Initialize Game State (Draw Hands)
+      const engine = new RulesEngine(game);
+      engine.startGame();
+
       io.to(room.id).emit('game_update', game);
     }
   });

src/server/managers/GameManager.ts

@@ -96,7 +96,7 @@ export class GameManager {
           return null;
       }
     } catch (e: any) {
-      console.error(`Rule Violation [${action.type}]: ${e.message}`);
+      console.error(`Rule Violation [${action?.type || 'UNKNOWN'}]: ${e.message}`);
       // TODO: Return error to user?
       // For now, just logging and not updating state (transactional-ish)
       return null;
@@ -111,16 +111,32 @@ export class GameManager {
     if (!game) return null;
 
     // Basic Validation: Ensure actor exists in game (or is host/admin?)
-    if (!game.players[actorId]) return null;
+    if (!game.players[actorId]) {
+      console.warn(`handleAction: Player ${actorId} not found in room ${roomId}`);
+      return null;
+    }
+
+    console.log(`[GameManager] Handling Action: ${action.type} for ${roomId} by ${actorId}`);
 
     switch (action.type) {
+      case 'UPDATE_LIFE':
+        if (game.players[actorId]) {
+          game.players[actorId].life += (action.amount || 0);
+        }
+        break;
       case 'MOVE_CARD':
         this.moveCard(game, action, actorId);
         break;
       case 'TAP_CARD':
         this.tapCard(game, action, actorId);
         break;
-      // ... (Other cases can be ported if needed)
+      case 'DRAW_CARD':
+        const engine = new RulesEngine(game);
+        engine.drawCard(actorId);
+        break;
+      case 'RESTART_GAME':
+        this.restartGame(roomId);
+        break;
     }
 
     return game;
@@ -188,8 +204,100 @@ export class GameManager {
       name: '',
       ...cardData,
       damageMarked: 0,
-      controlledSinceTurn: 0 // Will be updated on draw/play
+      controlledSinceTurn: 0, // Will be updated on draw/play
+      definition: cardData.definition // Ensure definition is passed
     };
+
+    // Auto-Parse Types if missing
+    if (card.types.length === 0 && card.typeLine) {
+      const [typePart, subtypePart] = card.typeLine.split('—').map(s => s.trim());
+      const typeWords = typePart.split(' ');
+
+      const supertypeList = ['Legendary', 'Basic', 'Snow', 'World'];
+      const typeList = ['Land', 'Creature', 'Artifact', 'Enchantment', 'Planeswalker', 'Instant', 'Sorcery', 'Tribal', 'Battle', 'Kindred']; // Kindred = Tribal
+
+      card.supertypes = typeWords.filter(w => supertypeList.includes(w));
+      card.types = typeWords.filter(w => typeList.includes(w));
+
+      if (subtypePart) {
+        card.subtypes = subtypePart.split(' ');
+      }
+    }
+
+    // Auto-Parse P/T from cardData if provided specifically as strings or numbers, ensuring numbers
+    if (cardData.power !== undefined) card.basePower = Number(cardData.power);
+    if (cardData.toughness !== undefined) card.baseToughness = Number(cardData.toughness);
+
+    // Set current values to base
+    card.power = card.basePower;
+    card.toughness = card.baseToughness;
+
     game.cards[card.instanceId] = card;
   }
+
+  private restartGame(roomId: string) {
+    const game = this.games.get(roomId);
+    if (!game) return;
+
+    // 1. Reset Game Global State
+    game.turnCount = 1;
+    game.phase = 'setup';
+    game.step = 'mulligan';
+    game.stack = [];
+    game.activePlayerId = game.turnOrder[0];
+    game.priorityPlayerId = game.activePlayerId;
+    game.passedPriorityCount = 0;
+    game.landsPlayedThisTurn = 0;
+    game.attackersDeclared = false;
+    game.blockersDeclared = false;
+    game.maxZ = 100;
+
+    // 2. Reset Players
+    Object.keys(game.players).forEach(pid => {
+      const p = game.players[pid];
+      p.life = 20;
+      p.poison = 0;
+      p.energy = 0;
+      p.isActive = (pid === game.activePlayerId);
+      p.hasPassed = false;
+      p.manaPool = { W: 0, U: 0, B: 0, R: 0, G: 0, C: 0 };
+      p.handKept = false;
+      p.mulliganCount = 0;
+    });
+
+    // 3. Reset Cards
+    const tokensToRemove: string[] = [];
+    Object.values(game.cards).forEach(c => {
+      if (c.oracleId.startsWith('token-')) {
+        tokensToRemove.push(c.instanceId);
+      } else {
+        // Move to Library
+        c.zone = 'library';
+        c.tapped = false;
+        c.faceDown = true;
+        c.counters = [];
+        c.modifiers = [];
+        c.damageMarked = 0;
+        c.controlledSinceTurn = 0;
+        c.power = c.basePower;
+        c.toughness = c.baseToughness;
+        c.attachedTo = undefined;
+        c.blocking = undefined;
+        c.attacking = undefined;
+        // Reset position?
+        c.position = undefined;
+      }
+    });
+
+    // Remove tokens
+    tokensToRemove.forEach(id => {
+      delete game.cards[id];
+    });
+
+    console.log(`Game ${roomId} restarted.`);
+
+    // 4. Trigger Start Game (Draw Hands via Rules Engine)
+    const engine = new RulesEngine(game);
+    engine.startGame();
+  }
 }

src/server/services/CardService.ts

@@ -46,29 +46,56 @@ export class CardService {
           imageUrl = card.card_faces[0].image_uris?.normal;
         }
 
-        if (!imageUrl) continue;
-
-        const filePath = path.join(this.imagesDir, setCode, `${uuid}.jpg`);
-
-        // Check if exists
-        if (await fileStorageManager.exists(filePath)) {
-          continue;
+        // Check for art crop
+        let cropUrl = card.image_uris?.art_crop;
+        if (!cropUrl && card.card_faces && card.card_faces.length > 0) {
+          cropUrl = card.card_faces[0].image_uris?.art_crop;
         }
 
+        const tasks: Promise<void>[] = [];
+
+        // Task 1: Normal Image (art_full)
+        if (imageUrl) {
+          const filePath = path.join(this.imagesDir, setCode, 'art_full', `${uuid}.jpg`);
+          tasks.push((async () => {
+            if (await fileStorageManager.exists(filePath)) return;
             try {
-          // Download
               const response = await fetch(imageUrl);
               if (response.ok) {
                 const buffer = await response.arrayBuffer();
                 await fileStorageManager.saveFile(filePath, Buffer.from(buffer));
                 downloadedCount++;
-            console.log(`Cached image: ${setCode}/${uuid}.jpg`);
+                console.log(`Cached art_full: ${setCode}/${uuid}.jpg`);
               } else {
-            console.error(`Failed to download ${imageUrl}: ${response.statusText}`);
+                console.error(`Failed to download art_full ${imageUrl}: ${response.statusText}`);
               }
             } catch (err) {
-          console.error(`Error downloading image for ${uuid}:`, err);
+              console.error(`Error downloading art_full for ${uuid}:`, err);
             }
+          })());
+        }
+
+        // Task 2: Art Crop (art_crop)
+        if (cropUrl) {
+          const cropPath = path.join(this.imagesDir, setCode, 'art_crop', `${uuid}.jpg`);
+          tasks.push((async () => {
+            if (await fileStorageManager.exists(cropPath)) return;
+            try {
+              const response = await fetch(cropUrl);
+              if (response.ok) {
+                const buffer = await response.arrayBuffer();
+                await fileStorageManager.saveFile(cropPath, Buffer.from(buffer));
+                console.log(`Cached art_crop: ${setCode}/${uuid}.jpg`);
+              } else {
+                console.error(`Failed to download art_crop ${cropUrl}: ${response.statusText}`);
+              }
+            } catch (err) {
+              console.error(`Error downloading art_crop for ${uuid}:`, err);
+            }
+          })());
+        }
+
+        await Promise.all(tasks);
       }
     };