feat(arcade): add shortName field to game manifest

Replace hacky .replace(' Battle', '').replace(' Lightning', '') calls
with a proper shortName field that games can define for compact UI spaces.

- Add optional shortName to GameManifestSchema
- Update matching game with shortName: 'Matching Pairs'
- Use shortName || displayName in GameBreakSettings

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

apps/web/src/arcade-games/matching/index.ts

@@ -15,6 +15,7 @@ import { matchingGameValidator } from './Validator'
 const manifest: GameManifest = {
   name: 'matching',
   displayName: 'Matching Pairs Battle',
+  shortName: 'Matching Pairs',
   icon: '⚔️',
   description: 'Multiplayer memory battle with friends',
   longDescription:

apps/web/src/components/practice/start-practice-modal/GameBreakSettings.tsx

@@ -147,7 +147,7 @@ export function GameBreakSettings() {
                     },
                   })}
                 >
-                  {singleGame.manifest.displayName.replace(' Battle', '').replace(' Lightning', '')}
+                  {singleGame.manifest.shortName || singleGame.manifest.displayName}
                 </span>
               </div>
 
@@ -510,7 +510,7 @@ export function GameBreakSettings() {
                     (g) => g.manifest.name === gameBreakSelectedGame
                   )
                   return game
-                    ? `${game.manifest.icon} ${game.manifest.displayName.replace(' Battle', '').replace(' Lightning', '')}`
+                    ? `${game.manifest.icon} ${game.manifest.shortName || game.manifest.displayName}`
                     : 'Select game'
                 })()}
               </Select.Value>
@@ -591,8 +591,7 @@ export function GameBreakSettings() {
                       })}
                     >
                       <Select.ItemText>
-                        {game.manifest.icon}{' '}
-                        {game.manifest.displayName.replace(' Battle', '').replace(' Lightning', '')}
+                        {game.manifest.icon} {game.manifest.shortName || game.manifest.displayName}
                       </Select.ItemText>
                     </Select.Item>
                   ))}

apps/web/src/lib/arcade/manifest-schema.ts

@@ -11,6 +11,10 @@ import { z } from 'zod'
 export const GameManifestSchema = z.object({
   name: z.string().min(1).describe('Internal game identifier (e.g., "matching")'),
   displayName: z.string().min(1).describe('Display name shown to users'),
+  shortName: z
+    .string()
+    .optional()
+    .describe('Short name for compact UI spaces (defaults to displayName)'),
   icon: z.string().min(1).describe('Emoji icon for the game'),
   description: z.string().min(1).describe('Short description'),
   longDescription: z.string().min(1).describe('Detailed description'),