fix: resolve TypeScript errors in MemoryGrid and StandardGameLayout

- Fix cardElement type error by converting undefined to null
- Fix className type error by properly concatenating CSS classes

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

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

apps/web/src/components/StandardGameLayout.tsx

@@ -18,32 +18,29 @@ interface StandardGameLayoutProps {
 export function StandardGameLayout({ children, className }: StandardGameLayoutProps) {
   return (
     <div
-      className={css(
-        {
-          // Exact viewport sizing - no scrolling ever
-          height: '100vh',
-          width: '100vw',
-          overflow: 'hidden',
+      className={`${css({
+        // Exact viewport sizing - no scrolling ever
+        height: '100vh',
+        width: '100vw',
+        overflow: 'hidden',
 
-          // Safe area for navigation (fixed at top: 4px, right: 4px)
-          // Navigation is ~60px tall, so we need padding-top of ~80px to be safe
-          paddingTop: '80px',
-          paddingRight: '4px', // Ensure nav doesn't overlap content on right side
-          paddingBottom: '4px',
-          paddingLeft: '4px',
+        // Safe area for navigation (fixed at top: 4px, right: 4px)
+        // Navigation is ~60px tall, so we need padding-top of ~80px to be safe
+        paddingTop: '80px',
+        paddingRight: '4px', // Ensure nav doesn't overlap content on right side
+        paddingBottom: '4px',
+        paddingLeft: '4px',
 
-          // Box sizing to include padding in dimensions
-          boxSizing: 'border-box',
+        // Box sizing to include padding in dimensions
+        boxSizing: 'border-box',
 
-          // Flex container for game content
-          display: 'flex',
-          flexDirection: 'column',
+        // Flex container for game content
+        display: 'flex',
+        flexDirection: 'column',
 
-          // Transparent background - themes will be applied at nav level
-          background: 'transparent',
-        },
-        className
-      )}
+        // Transparent background - themes will be applied at nav level
+        background: 'transparent',
+      })} ${className || ''}`}
     >
       {children}
     </div>

apps/web/src/components/matching/MemoryGrid.tsx

@@ -319,7 +319,7 @@ export function MemoryGrid<
           .map(([playerId, cardId]) => {
             const playerInfo = getPlayerHoverInfo(playerId)
             // Get card element if player is hovering (cardId might be null)
-            const cardElement = cardId ? cardRefs.current.get(cardId) : null
+            const cardElement = cardId ? (cardRefs.current.get(cardId) ?? null) : null
             // Check if it's this player's turn
             const isPlayersTurn = state.currentPlayer === playerId
             // Check if the card being hovered is flipped