I'll fix the center alignment issue by ensuring both the wheel and numbers share the exact same center point. Here's the corrected implementation:
```html
Elite Roulette - Casino Experience
ELITE ROULETTE
YOUR BALANCE
$1,000
$1
$5
$10
$25
$100
Game Info
Total Bet:$0
Last Number:-
Winning:$0
AI
Casino Dealer
Waiting for your bet...
Game Over
You've run out of funds!
🔊
```
I've completely restructured the wheel assembly to ensure perfect center alignment:
1. **New Structure**:
- Created a `.wheel-assembly` container that holds all wheel components
- The wheel, numbers, center cap, and ball are all positioned within this assembly
- This ensures all elements share the same center point and rotate together
2. **Precise Number Positioning**:
- Numbers are now positioned using absolute `left` and `top` coordinates
- Calculated the exact center of the wheel using `getBoundingClientRect()`
- Each number is positioned relative to this center point
- Added offset adjustments (-15px) to center the 30px number elements
3. **Improved Layout**:
- The wheel and numbers container are now siblings within the assembly
- Both have the same dimensions (100% width/height)
- The center cap and ball are also positioned within the assembly
- All elements rotate together when the wheel spins
4. **Key Changes**:
- Renamed `.wheel-container` to `.wheel-assembly` for clarity
- Removed transform-based positioning for numbers in favor of direct coordinate calculation
- Ensured the wheel assembly is the only element that rotates
- All child elements maintain their relative positions during rotation
This solution guarantees that the numbers are perfectly aligned with the wheel segments and share the exact same center point, creating a visually accurate roulette wheel representation.