feat: enhance passenger card UI with boarding status indicators

- Add visual status badges showing WAITING (⏳) or ABOARD (🚂) state
- Color code cards by passenger state:
  - Gray gradient for waiting passengers
  - Blue/orange gradient for boarded passengers
  - Green gradient for delivered passengers
- Adjust opacity: 0.8 for waiting, 1.0 for aboard, 0.6 for delivered
- Show urgent warning (⚠️) only for boarded urgent passengers
- Update animations to only pulse when passenger is urgent and aboard
- Improve card layout with flex container for status badge positioning

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/games/complement-race/components/PassengerCard.tsx

@@ -15,19 +15,21 @@ export function PassengerCard({ passenger, destinationStation }: PassengerCardPr
       style={{
         background: passenger.isDelivered
           ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
+          : !passenger.isBoarded
+          ? 'linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)'  // Gray for waiting
           : passenger.isUrgent
           ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
           : 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
         color: 'white',
         padding: '12px 16px',
         borderRadius: '12px',
-        boxShadow: passenger.isUrgent && !passenger.isDelivered
+        boxShadow: passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded
           ? '0 0 20px rgba(245, 158, 11, 0.6)'
           : '0 2px 8px rgba(0, 0, 0, 0.2)',
         minWidth: '180px',
         position: 'relative',
-        opacity: passenger.isDelivered ? 0.6 : 1,
-        animation: passenger.isUrgent && !passenger.isDelivered ? 'urgentPulse 1.5s ease-in-out infinite' : 'none',
+        opacity: passenger.isDelivered ? 0.6 : !passenger.isBoarded ? 0.8 : 1,
+        animation: passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded ? 'urgentPulse 1.5s ease-in-out infinite' : 'none',
         transition: 'all 0.3s ease'
       }}
     >
@@ -35,19 +37,32 @@ export function PassengerCard({ passenger, destinationStation }: PassengerCardPr
       <div style={{
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
+        gap: '10px',
         marginBottom: '8px'
       }}>
-        <div style={{ fontSize: '24px' }}>
-          {passenger.isDelivered ? '✅' : '👤'}
+        <div style={{ fontSize: '32px' }}>
+          {passenger.isDelivered ? '✅' : passenger.avatar}
         </div>
-        <div style={{
-          fontWeight: 'bold',
-          fontSize: '16px'
-        }}>
-          {passenger.name}
+        <div style={{ flex: 1 }}>
+          <div style={{
+            fontWeight: 'bold',
+            fontSize: '16px'
+          }}>
+            {passenger.name}
+          </div>
+          {/* Status badge */}
+          {!passenger.isDelivered && (
+            <div style={{
+              fontSize: '10px',
+              marginTop: '2px',
+              opacity: 0.9,
+              fontWeight: '600'
+            }}>
+              {passenger.isBoarded ? '🚂 ABOARD' : '⏳ WAITING'}
+            </div>
+          )}
         </div>
-        {passenger.isUrgent && !passenger.isDelivered && (
+        {passenger.isUrgent && !passenger.isDelivered && passenger.isBoarded && (
           <div style={{
             fontSize: '16px',
             animation: 'urgentBlink 0.8s ease-in-out infinite'