Update README.md and package.json to reflect spritesheet implementation and custom drag-and-drop system

Author: Top-5

.github/PAGES_FIX.md

@@ -4,15 +4,18 @@
 [![Deploy to GitHub Pages](https://github.com/top-5/klondike/actions/workflows/deploy.yml/badge.svg)](https://github.com/top-5/klondike/actions/workflows/deploy.yml)
 [![License](https://img.shields.io/badge/license-Custom%20Non--Commercial-blue.svg)](LICENSE)
 
-A modern, type-safe implementation of Classic Klondike Solitaire, built with React, TypeScript, and Vite, featuring beautiful spritesheet cards, intuitive drag & drop, auto-move functionality, and full move validation logic.
+A modern, type-safe implementation of Classic Klondike Solitaire, built with React, TypeScript, and Vite, featuring beautiful spritesheet-based card graphics, custom mouse-driven drag & drop, auto-move functionality, and full move validation logic.
 
 🎮 **[Play Now on GitHub Pages](https://top-5.github.io/klondike/)**
 
+![Klondike Solitaire Screenshot](public/screenshot.png)
+
 ## ✨ Features
 
 - ♠️ **Classic Klondike Rules** – Traditional solitaire gameplay
 - 🎨 **Beautiful Card Graphics** – High-quality spritesheet rendering with subtle animations
-- 🎮 **Drag & Drop Interface** – Intuitive card movement with smooth animations
+- 🖱️ **Custom Drag & Drop** – Precise mouse-driven card movement with real-time visual feedback
+- 🎯 **Multi-Card Stack Dragging** – Drag entire card sequences smoothly with proper offset
 - 🚀 **Auto-Move to Foundation** – Double-click cards to automatically send them to foundations
 - ✨ **Flying Animation** – Cards fly to their destination with beautiful arc motion
 - ✅ **Move Validation** – Only valid moves allowed
@@ -44,7 +47,7 @@ npm run preview
 npm test
 ```
 
-Open http://localhost:5173/ to play.
+Open http://localhost:10010/ to play.
 
 ## 🛠️ Development
 
@@ -74,6 +77,8 @@ npm run test:coverage
 | Layer | Technology | Purpose |
 |-------|-----------|---------|
 | UI | React 18 | Game interface |
+| Graphics | Spritesheet | Card rendering via canvas extraction |
+| Drag System | Custom Mouse Events | Precise positioning & multi-card stacks |
 | Build | Vite 5 | Lightning-fast dev + build |
 | Language | TypeScript 5.7 | Type-safe logic |
 | Tests | Vitest 2.1 | Unit testing |
@@ -92,8 +97,13 @@ cardserver/
 │   ├── main.tsx          # React entry point
 │   ├── App.tsx           # Main game component
 │   ├── App.css           # Styling
-│   ├── types.ts          # Type definitions & glyphs
+│   ├── types.ts          # Type definitions
+│   ├── cardSprites.ts    # Spritesheet loader
 │   └── gameLogic.ts      # Klondike rules engine
+├── public/
+│   ├── deck.png          # Card spritesheet (4x13 grid)
+│   ├── back.jpg          # Card back image
+│   └── screenshot.png    # Game screenshot
 ├── test/
 │   └── *.test.ts         # Unit tests
 └── .github/
@@ -187,14 +197,70 @@ interface GameState {
 }
 ```
 
-## 🎨 Card Colors (CSS Technique)
+## 🎨 Card Graphics Implementation
+
+The game uses a **spritesheet-based card rendering system** for optimal performance and visual quality:
+
+### Spritesheet Layout
+- **File**: `public/deck.png` (4 rows × 13 columns)
+- **Row mapping**: 0=Clubs, 1=Hearts, 2=Spades, 3=Diamonds  
+- **Column mapping**: 0=A, 1=2, ..., 9=10, 10=J, 11=Q, 12=K
+- **Card back**: `public/back.jpg`
+
+### Loading Process (`cardSprites.ts`)
+1. Load `deck.png` spritesheet into memory
+2. Calculate frame dimensions (width/13, height/4)
+3. Extract each card using canvas `drawImage()` with precise coordinates
+4. Convert to data URLs for React img elements
+5. Cache all 52 cards for instant rendering
+
+This approach provides:
+- ✅ High-quality card graphics with smooth edges
+- ✅ Fast rendering (pre-extracted, cached data URLs)
+- ✅ Single spritesheet download (better than 52 separate images)
+- ✅ Subtle animations via CSS transforms
+
+## 🖱️ Custom Drag & Drop System
+
+The game implements a **custom mouse-driven drag system** (not HTML5 drag API) for precise control:
+
+### Why Custom Implementation?
+- HTML5 drag API forces semi-transparency on drag images (browser limitation)
+- Needed pixel-perfect positioning without "jump" on drag start
+- Required multi-card stack dragging with proper visual offset
+- Wanted full control over cursor states and visual feedback
+
+### How It Works
+1. **Mouse Down**: Calculate offset from card's top-left to click position
+2. **Mouse Move**: Track global mouse position, update drag overlay position
+3. **Drag Overlay**: Fixed-position div at `mouseX - offsetX`, `mouseY - offsetY`
+4. **Original Cards**: Set to `opacity: 0` during drag (fully invisible, no ghosting)
+5. **Drop Detection**: Use `elementFromPoint()` to find drop zone under cursor
+6. **Mouse Up**: Validate move, update game state, reset cursor
+
+### Features
+- 🎯 **Precise positioning** – Card stays under cursor at click point
+- 📚 **Multi-card stacks** – Drag sequences with 25px offset per card
+- 👁️ **Clean visuals** – No ghostly images or transparency issues
+- 🖱️ **Cursor feedback** – grab → grabbing → normal states
+- ⚡ **High performance** – No unnecessary re-renders
+
+## 🎨 CSS Animations
 
 ```css
-.red   { color: #dc143c; text-shadow: 0 0 1px #dc143c; }
-.black { color: #000; text-shadow: 0 0 1px #000; }
-```
+/* Shimmer effect on cards */
+@keyframes cardShimmer {
+  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
+  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
+}
 
-Applies transparent glyphs with shadow tint for vibrant Unicode cards.
+/* Flying animation for auto-move */
+@keyframes flyToFoundation {
+  0% { transform: scale(1) translateY(0); }
+  50% { transform: scale(0.9) translateY(-30px); }
+  100% { transform: scale(1) translateY(0); opacity: 0; }
+}
+```
 
 ## 🚀 Deployment
 

README.md

@@ -1,7 +1,7 @@
 {
   "name": "klondike-solitaire",
   "version": "2.0.0",
-  "description": "Klondike Solitaire game built with React, TypeScript, and Vite using Unicode colored card glyphs",
+  "description": "Klondike Solitaire game built with React, TypeScript, and Vite using spritesheet-based card graphics and custom drag-and-drop",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -26,7 +26,8 @@
     "react",
     "typescript",
     "vite",
-    "unicode-cards"
+    "spritesheet",
+    "custom-drag-drop"
   ],
   "author": "Top-5",
   "license": "SEE LICENSE IN LICENSE",