feat: Refactor application layout for full-height content and implement resizable draft UI with card zoom and scaling.

docs/development/CENTRAL.md

@@ -13,3 +13,6 @@
 - [Draft Rules & Pick Logic](./devlog/2025-12-16-180000_draft_rules_implementation.md): Completed. Enforced 4-player minimum and "Pick 2" rule for 4-player drafts.
 - [Fix Pack Duplication](./devlog/2025-12-16-184500_fix_pack_duplication.md): Completed. Enforced deep cloning and unique IDs for all draft packs to prevent opening identical packs.
 - [Reconnection & Auto-Pick](./devlog/2025-12-16-191500_reconnection_and_autopick.md): Completed. Implemented session persistence, seamless reconnection, and 30s auto-pick on disconnect.
+- [Draft Interface UI Polish](./devlog/2025-12-16-195000_draft_ui_polish.md): Completed. Redesigned the draft view for a cleaner, immersive, game-like experience with no unnecessary scrolls.
+- [Resizable Draft Interface](./devlog/2025-12-16-200500_resizable_draft_ui.md): Completed. Implemented user-resizable pool panel and card sizes with persistence.
+- [Card Zoom (Dedicated Zone)](./devlog/2025-12-16-203000_zoom_zone.md): Completed. Refactored layout to show zoomed card in a dedicated side panel.

docs/development/devlog/2025-12-16-195000_draft_ui_polish.md

@@ -0,0 +1,23 @@
+# Draft Interface UI Polish
+
+## Status
+- [x] Analyze current UI issues (bottom border, scrolling).
+- [x] Remove global padding from `App.tsx`.
+- [x] Refactor `DraftView.tsx` for a cleaner, game-like experience.
+- [x] Implement immersive 3D effects and tray-style pool view.
+
+## Context
+The user requested to improve the draft card pick interface. Specifically to remove the ugly bottom border, avoid page scrolls, and make it feel more like a game.
+
+## Implementation Details
+
+### `src/client/src/App.tsx`
+- Removed `pb-20` from the main container to allow full-screen layouts without forced scrolling at the bottom.
+
+### `src/client/src/modules/draft/DraftView.tsx`
+- **Layout**: Changed to relative positioning with `overflow-hidden` to contain all elements within the viewport.
+- **Visuals**:
+    - Added a radial gradient background overlay.
+    - Redesigned the "Current Pack" area with `[perspective:1000px]` and 3D hover transforms.
+    - Redesigned the "Your Pool" bottom area to be a "tray" with `backdrop-blur`, gradient background, and removed the boxy border.
+- **Scrollbars**: Hidden scrollbars in the main pack view for a cleaner look (`[&::-webkit-scrollbar]:hidden`).

docs/development/devlog/2025-12-16-200500_resizable_draft_ui.md

@@ -0,0 +1,34 @@
+# Resizable Draft Interface
+
+## Status
+- [x] Implement resizable bottom "Pool" panel.
+- [x] Implement resizable card size slider.
+- [x] Persist settings to `localStorage`.
+
+## Technical Plan
+
+### `src/client/src/modules/draft/DraftView.tsx`
+
+1.  **State Initialization**:
+    -   `poolHeight`: number (default ~220). Load from `localStorage.getItem('draft_poolHeight')`.
+    -   `cardScale`: number (default 1 or specific width like 224px). Load from `localStorage.getItem('draft_cardScale')`.
+
+2.  **Resize Handle**:
+    -   Insert a `div` cursor-row-resize between the Main Area and the Bottom Area.
+    -   Implement `onMouseDown` handler to start dragging.
+    -   Implement `onMouseMove` and `onMouseUp` on the window/document to handle the resize logic.
+
+3.  **Card Size Control**:
+    -   Add a slider (`<input type="range" />`) in the Top Header area to adjust `cardScale`.
+    -   Apply this scale to the card images/containers in the Main Area.
+
+4.  **Persistence**:
+    -   `useEffect` hooks to save state changes to `localStorage`.
+
+5.  **Refactoring Styling**:
+    -   Change `h-[220px]` class on the bottom panel to `style={{ height: poolHeight }}`.
+    -   Update card width class `w-56` to dynamic style or class based on scale.
+
+## UX Improvements
+-   Add limit constraints (min height for pool, max height for pool).
+-   Add limit constraints for card size (min visible, max huge).

docs/development/devlog/2025-12-16-201500_card_zoom.md

@@ -0,0 +1,13 @@
+# Card Zoom on Hover
+
+## Status
+- [x] Add `hoveredCard` state to `DraftView`.
+- [x] Implement `onMouseEnter`/`onMouseLeave` handlers for cards in both Pick and Pool areas.
+- [x] rendering a fixed, high z-index preview of the hovered card.
+- [x] Disable right-click context menu on Draft interface.
+
+## Implementation Details
+-   **File**: `src/client/src/modules/draft/DraftView.tsx`
+-   **Zoom Component**: A fixed `div` containing the large card image.
+-   **Position**: Fixed to the left or right side of the screen (e.g., `left-10 top-1/2 -translate-y-1/2`) to avoid covering the grid being interacted with (which is usually centered).
+-   **Styling**: Large size (e.g., `w-80` or `h-[500px]`), shadow, border, rounded corners.

docs/development/devlog/2025-12-16-203000_zoom_zone.md

@@ -0,0 +1,15 @@
+# Card Zoom on Hover - Dedicated Zone
+
+## Status
+- [x] Add `hoveredCard` state to `DraftView` (Already done).
+- [x] Implement `onMouseEnter`/`onMouseLeave` handlers (Already done).
+- [x] Refactor `DraftView` layout to include a dedicated sidebar for card preview.
+- [x] Move the zoomed card image into this dedicated zone instead of a fixed overlay.
+
+## Implementation Details
+-   **File**: `src/client/src/modules/draft/DraftView.tsx`
+-   **Layout Change**:
+    -   Wrap the central card selection area in a `flex-row` container.
+    -   Add a Left Sidebar (e.g., `w-80`) reserved for the zoomed card.
+    -   Ensure the main card grid takes up the remaining space (`flex-1`).
+-   **Behavior**: When no card is hovered, the sidebar can show a placeholder or remain empty/decorative.