Add inline progress ring to ActiveBetCard countdown with smooth tick + halfway color shift

[greatest0fallt1me]

Description

This is a UI/UX issue replacing the text-only countdown in components/active-bets/ cards with a 24px progress ring that smoothly ticks and shifts hue from blue to amber as the market nears close.

Requirements and Context

• Use SVG stroke-dasharray driven by elapsed/total
• Single rAF for all visible rings (instead of per-card)
• Reduced-motion path renders a static segment
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/active-bet-progress-ring

2. Implement changes
   • Add components/active-bets/progress-ring.tsx
   • Edit components/active-bets/ card files
3. Test and commit
   • Performance test with 50 cards visible
   • Cover edge cases (markets ended in the past)
   • Include test output and notes in the PR

Example commit message

feat: progress ring for active bet countdown

Acceptance Criteria

• One rAF loop drives all visible rings
• Color shift respects color-blind safe palette
• Reduced-motion path is static

Guidelines

• WCAG 2.1 AA, non-color cues alongside hue shift
• Clear documentation and inline comments
• Timeframe: 96 hours