# Sub-task 2: Enhance ManaDisplay Component

## Scope

Refactor the `ManaDisplay` component to use the new design system primitives and improve visual presentation.

### Key Deliverables:
1. Update `ManaDisplay` to use `GameCard`, `ManaBar`, `StatRow`, and `ValueDisplay` primitives
2. Apply proper mana type colors using `--mana-*` CSS variables
3. Add subtle animations (300ms ease-out transitions)
4. Ensure component renders correctly with new design system

## Acceptance Criteria

1. ManaDisplay uses `GameCard` wrapper with appropriate variant
2. Mana bars use the `ManaBar` primitive component
3. Stats use `StatRow` primitive with proper highlighting
4. Values use `ValueDisplay` for numeric displays
5. No raw hex values - all colors use CSS variables
6. Hover states have 100ms ease transitions
7. Mana bar fill uses 300ms ease-out transition

## Dependencies

- **ST1 (Sub-task 1)** - Must be completed first (design system must exist)

## Status

🟡 **PENDING** - Waiting for ST1 completion

## Notes

- Component location: `src/components/game/ManaDisplay.tsx`
- Should show raw mana, max mana, regen rate
- Should display all elemental mana types with appropriate colors
- Include meditation bonus display
- Click mana bonus display