fix(engine): active_suit matching in all card-matching builtins and discard pile display

- card_matches_top, has_playable_card, played_card_matches_top now check
  active_suit string variable when comparing suits (fixes Crazy Eights 8-play)
- Fix suit casing in choose_suit actions: 'Hearts' → 'hearts' (match deck preset)
- Add set_face_up(discard, 0, true) to play_card effects so host shows card face
- Client HandViewer filters null cards from non-owner zones, emphasizes top card
- Host GameTable shows last card (top) instead of first card (bottom) in discard
- Add 3 integration tests for active_suit matching flow

Author: faluciano

packages/client/src/components/HandViewer.tsx

@@ -7,7 +7,7 @@
 
 import React, { useCallback } from "react";
 import type { CSSProperties } from "react";
-import type { PlayerView, CardInstanceId } from "@card-engine/shared";
+import type { Card, PlayerView, CardInstanceId } from "@card-engine/shared";
 import { CardMini } from "./CardMini.js";
 
 interface HandViewerProps {
@@ -114,20 +114,31 @@ export function HandViewer({
   return (
     <div style={containerStyle}>
       {/* Other visible zones (discard, community) — shown at top for read-only context */}
-      {otherZones.map(([name, zone]) => (
-        <div key={name} style={zoneStyle}>
-          <p style={zoneLabelStyle}>{formatZoneName(name)}</p>
-          <div style={cardsRowStyle}>
-            {zone.cards.map((card, index) => (
-              <CardMini
-                key={card?.id ?? `hidden-${name}-${index}`}
-                card={card}
-                emphasized={index === 0}
-              />
-            ))}
+      {otherZones.map(([name, zone]) => {
+        // For non-owner zones (e.g. discard pile), only show visible cards
+        // to avoid rendering dozens of face-down placeholders
+        const displayCards = zone.cards.filter(
+          (card): card is Card => card !== null,
+        );
+
+        return (
+          <div key={name} style={zoneStyle}>
+            <p style={zoneLabelStyle}>{formatZoneName(name)}</p>
+            <div style={cardsRowStyle}>
+              {displayCards.map((card, index) => (
+                <CardMini
+                  key={card.id}
+                  card={card}
+                  emphasized={
+                    displayCards.length > 0 &&
+                    index === displayCards.length - 1
+                  }
+                />
+              ))}
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
 
       {/* Player's personal zones — shown at bottom for thumb-friendly interaction */}
       {myZones.map(([name, zone]) => (

packages/host/src/screens/GameTable.tsx

@@ -251,7 +251,7 @@ function ZoneDisplay({
           <StackedDeck count={cards.length} />
         ) : shouldShowTopOnly ? (
           <>
-            <FlippableCardView card={cards[0]!} />
+            <FlippableCardView card={cards[cards.length - 1]!} />
             <View style={styles.topCardMoreIndicator}>
               <Text style={styles.topCardMoreText}>
                 +{cards.length - 1} more

packages/shared/src/engine/builtins.ts

@@ -560,9 +560,11 @@ const cardMatchesTopBuiltin: BuiltinFunction = (args, context) => {
   }
   const card = handZone.cards[cardIndex]!;
   const topCard = targetZone.cards[0]!;
+  const activeSuit = context.state.stringVariables["active_suit"] ?? "";
+  const matchSuit = activeSuit || topCard.suit;
   return {
     kind: "boolean",
-    value: card.suit === topCard.suit || card.rank === topCard.rank,
+    value: card.suit === matchSuit || card.rank === topCard.rank,
   };
 };
 
@@ -580,8 +582,10 @@ const hasPlayableCardBuiltin: BuiltinFunction = (args, context) => {
     return { kind: "boolean", value: false };
   }
   const topCard = targetZone.cards[0]!;
+  const activeSuit = context.state.stringVariables["active_suit"] ?? "";
+  const matchSuit = activeSuit || topCard.suit;
   const found = handZone.cards.some(
-    (card) => card.suit === topCard.suit || card.rank === topCard.rank,
+    (card) => card.suit === matchSuit || card.rank === topCard.rank,
   );
   return { kind: "boolean", value: found };
 };
@@ -1327,9 +1331,11 @@ const playedCardMatchesTopBuiltin: BuiltinFunction = (args, context) => {
 
   const card = handZone.cards[cardIndex]!;
   const topCard = targetZone.cards[0]!;
+  const activeSuit = context.state.stringVariables["active_suit"] ?? "";
+  const matchSuit = activeSuit || topCard.suit;
   return {
     kind: "boolean",
-    value: card.suit === topCard.suit || card.rank === topCard.rank,
+    value: card.suit === matchSuit || card.rank === topCard.rank,
   };
 };