# Prompt: Create Project Chimera MVP Web App

Create a self-contained, single-file web application that demonstrates the core gameplay of Project Chimera - a tactical roguelite deckbuilder. The MVP should run entirely in a web browser with no external dependencies.

## Core Game Concept

Project Chimera combines:
1. **Grid-based tactical combat** (like Into the Breach) where positioning matters
2. **Card-based actions** (like Slay the Spire) where players use cards to perform actions
3. **Deterministic outcomes** - no RNG in combat, players can see exactly what enemies will do

## MVP Requirements

### 1. Grid System
- 6x6 grid battlefield
- Player character starts on the left side
- 2-3 enemies start on the right side
- Some grid cells should have "cover" (marked differently, blocks all damage)
- Visual indication of which cells units can move to

### 2. Card System
Create these basic cards:
- **Strike** (Cost: 1) - Deal 3 damage to an adjacent enemy
- **Shoot** (Cost: 2) - Deal 2 damage to any enemy in line of sight
- **Move** (Cost: 1) - Move up to 2 spaces
- **Block** (Cost: 1) - Gain 3 armor (reduces next damage taken)
- **Push** (Cost: 1) - Push an adjacent enemy 1 space away

Start the player with a hand of 5 random cards from a deck containing 3 Strikes, 2 Moves, 2 Shoots, 2 Blocks, 1 Push.

### 3. Combat Flow
- Player has 3 energy per turn
- Playing cards costs energy
- Cards are dragged from hand onto valid targets/positions
- After player ends turn, enemies execute their displayed intentions
- Draw 3 new cards at turn start (shuffle discard pile into deck if needed)

### 4. Enemy Behavior (Deterministic)
- **Guard** - Moves 1 space toward player, then attacks for 2 damage if adjacent
- **Sniper** - Stays in position, shoots for 3 damage if has line of sight
- Show enemy intentions above them (e.g., "Move → Attack 2")

### 5. Visual Design
- Clean, readable design that works on mobile browsers
- Grid cells: 50x50px minimum
- Cards: Show name, cost, and effect clearly
- Units: Simple shapes (circle for player, triangles for enemies)
- Cover: Marked with gray squares
- HP/Armor displayed on units
- Energy display
- Current turn indicator

### 6. Game States
- **Setup**: Place units on grid
- **Player Turn**: Can play cards and see enemy intentions
- **Enemy Turn**: Enemies execute their actions in sequence
- **Victory**: All enemies defeated
- **Defeat**: Player HP reaches 0

### 7. Mobile-Friendly UI
- Touch/click to select cards
- Drag to play cards or click card then click valid target
- Minimum touch target: 44x44px
- "End Turn" button
- Responsive layout that works on phones and desktop

### 8. Technical Requirements
- Single HTML file with embedded CSS and JavaScript
- No external libraries (vanilla JS only)
- Use CSS Grid or Canvas for the battlefield
- Smooth animations for moves and attacks
- Save/load state to localStorage for continuing games

## Code Structure Outline

```javascript
// Game state
const gameState = {
  player: { x: 0, y: 2, hp: 10, armor: 0, energy: 3 },
  enemies: [
    { type: 'guard', x: 5, y: 2, hp: 5, intention: 'move-attack' },
    { type: 'sniper', x: 4, y: 0, hp: 3, intention: 'shoot' }
  ],
  grid: Array(6).fill().map(() => Array(6).fill('empty')),
  deck: [],
  hand: [],
  discard: [],
  turn: 'player'
};

// Core systems needed:
// 1. Grid rendering and interaction
// 2. Card rendering and drag/drop
// 3. Turn management
// 4. Combat resolution
// 5. Line of sight calculation
// 6. Win/lose conditions
```

## Specific Implementation Notes

1. **Line of Sight**: A straight line between units with no cover cells blocking
2. **Energy System**: Display remaining energy clearly, gray out unplayable cards
3. **Card Target Validation**: Highlight valid targets when card is selected
4. **Animation**: 300ms transitions for moves, 200ms for attacks
5. **Mobile Testing**: Ensure it works on viewport width 375px (iPhone SE)

## Victory Condition for MVP
Player wins if all enemies are defeated. Show a "Victory!" message with a button to restart.

## Example Starting Position
```
Legend: P=Player, G=Guard, S=Sniper, #=Cover, .=Empty

. . . # S .
. . . . . .
P . . . . G
. . . . . .
. # . . # .
. . . . . .
```

Create this as a single, self-contained HTML file that can be opened directly in a web browser. Focus on demonstrating the core tactical card-based gameplay loop with clean, functional code that could be extended into a full game.