## ADDED Requirements

### Requirement: Card face rendering
The card component SHALL display the card's rank and suit symbol with correct color (red for hearts/diamonds, black for spades/clubs).

#### Scenario: Red suit cards displayed correctly
- **WHEN** a card has a heart or diamond suit
- **THEN** the rank and suit symbol render in red color

#### Scenario: Black suit cards displayed correctly
- **WHEN** a card has a spade or club suit
- **THEN** the rank and suit symbol render in black color

### Requirement: Card flip animation
The card component SHALL support a flipped state that hides the card face using a 3D CSS rotation animation.

#### Scenario: Card starts face-down
- **WHEN** a card is dealt to a player before reveal
- **THEN** the card shows its back pattern and the face is hidden via CSS `rotateY(180deg)` transform

#### Scenario: Card flips to reveal face
- **WHEN** the flip state changes from false to true
- **THEN** the card animates with a smooth rotation transition to show the face

#### Scenario: Card flips back to hidden
- **WHEN** the flip state changes from true to false
- **THEN** the card animates with a smooth rotation transition to hide the face

### Requirement: Deal animation
Cards dealt during the dealing phase SHALL animate from the dealer position to their final position using Svelte's `flip()` spring animation.

#### Scenario: Hole cards animate on deal
- **WHEN** hole cards are dealt at the start of a hand
- **THEN** each card animates from a central dealer position to its target seat using a spring-based flip transition

### Requirement: Card hover effect
The card component SHALL provide a visual hover effect (e.g., slight scale increase or shadow) when the user hovers over an active card.

#### Scenario: Hover effect on valid cards
- **WHEN** the user hovers over their own visible hole card during their turn
- **THEN** the card displays a subtle elevation effect via CSS transition

### Requirement: Card dimensions and styling
All card instances SHALL use consistent dimensions (width, height, border-radius) defined by CSS custom properties.

#### Scenario: Consistent card sizing
- **WHEN** multiple cards are rendered in different areas of the table
- **THEN** all cards share the same width, height, and border-radius values from shared CSS custom properties