feat: improve game availability logic and messaging

Update game card availability checks and empty state handling:
- Show games as faded when 0 players selected instead of hiding
- Display "⚠️ Select X players" when no players active
- Fix isGameAvailable to require activePlayerCount > 0
- Remove empty state check that hid games with no players
- Always show available games for better discoverability

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

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

apps/web/src/components/GameCard.tsx

@@ -22,8 +22,9 @@ export function GameCard({
   const router = useRouter()
 
   // Check if a game is available based on active player count
+  // Games are always visible but only available with valid player count
   const isGameAvailable = () => {
-    return activePlayerCount <= config.maxPlayers && activePlayerCount > 0
+    return activePlayerCount > 0 && activePlayerCount <= config.maxPlayers
   }
 
   const handleGameClick = () => {
@@ -182,7 +183,9 @@ export function GameCard({
             border: '1px solid',
             borderColor: available ? 'green.200' : 'red.200'
           })}>
-            {activePlayerCount <= config.maxPlayers
+            {activePlayerCount === 0
+              ? `⚠️ Select ${config.maxPlayers} ${config.maxPlayers === 1 ? 'player' : 'players'}`
+              : activePlayerCount <= config.maxPlayers
               ? `✓ ${activePlayerCount}/${config.maxPlayers} ${activePlayerCount === 1 ? 'player' : 'players'}`
               : `✗ Too many players (max ${config.maxPlayers})`
             }

apps/web/src/components/GameSelector.tsx

@@ -103,19 +103,7 @@ export function GameSelector({
         </h3>
       )}
 
-      {activePlayerCount === 0 ? (
-        <div className={css({
-          textAlign: 'center',
-          py: variant === 'compact' ? '4' : '8',
-          color: 'gray.500'
-        })}>
-          <div className={css({ fontSize: variant === 'compact' ? '2xl' : '3xl', mb: '2' })}>🎯</div>
-          <p className={css({ fontSize: variant === 'compact' ? 'sm' : 'base' })}>
-            {emptyStateMessage}
-          </p>
-        </div>
-      ) : (
-        <div className={css({
+      <div className={css({
           display: 'grid',
           gridTemplateColumns: { base: '1fr', md: 'repeat(2, 1fr)' },
           gridTemplateRows: { base: 'repeat(4, 1fr)', md: 'repeat(2, 1fr)' },
@@ -133,7 +121,6 @@ export function GameSelector({
             />
           ))}
         </div>
-      )}
     </div>
   )
 }