# Sub-task 5: Enhance SpireTab Component

## Scope

Refactor the `SpireTab` component to use the new design system primitives for spire climbing UI.

### Key Deliverables:
1. Update `SpireTab` to use `GameCard`, `SectionHeader`, `ManaBar` primitives
2. Apply proper cast bar animation (300ms ease-out)
3. Style floor display with appropriate visual treatment
4. Ensure combat log uses consistent styling

## Acceptance Criteria

1. Floor display uses `GameCard` with appropriate variant
2. Cast bar uses `ManaBar` primitive with proper animation (300ms ease-out)
3. Enemy HP bar uses `ManaBar` with appropriate color
4. Section headers use `SectionHeader` primitive
5. No raw hex values - all colors use CSS variables
6. Spire combat cast bar animates smoothly

## 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/tabs/SpireTab.tsx`
- Has both normal mode and simple mode (SpireMode)
- Shows current floor, enemy HP, cast progress
- Floor element display should use `ElementBadge` primitive