Initial pass at Golden Pack.

web/src/components/ShopPhase.tsx

@@ -39,8 +39,13 @@ interface Props {
 export function ShopPhase({ view, you, send }: Props) {
   const [selected, setSelected] = useState<string[]>([])
   const [confirmPass, setConfirmPass] = useState(false)
+  // When set, the next buy is paid by discarding an Avocado instead of a coin
+  // (Golden pack). It also kicks in automatically when out of coins.
+  const [useAvocado, setUseAvocado] = useState(false)
   const myTurn = view.turn === view.youSeat && !you.ready
-  const canBuy = myTurn && you.coins > 0
+  const avocados = you.avocados ?? 0
+  const freeBuy = !!you.firstBuyFree // Manta Ray: next buy costs no gold
+  const canBuy = myTurn && (you.coins > 0 || avocados > 0 || freeBuy)
   const overPets = you.petCount > view.maxPets
   const deck = you.deck ?? []
   const opponent = view.players.find((p) => p.seat !== view.youSeat)
@@ -151,7 +156,11 @@ export function ShopPhase({ view, you, send }: Props) {
       // Safety net: if the card never shows up in the deck, stop hiding its slot.
       window.setTimeout(() => setBuyFly((b) => (b?.id === card.id ? null : b)), 2000)
     }
-    act({ type: 'buy', row })
+    // A free first buy (Manta Ray) always goes through the normal buy; otherwise
+    // pay with an Avocado when chosen, or when out of coins.
+    const payAvocado = !freeBuy && avocados > 0 && (useAvocado || you.coins <= 0)
+    act({ type: payAvocado ? 'buyAvocado' : 'buy', row })
+    setUseAvocado(false)
   }
 
   return (
@@ -212,13 +221,45 @@ export function ShopPhase({ view, you, send }: Props) {
         </div>
         {myTurn && (
           <div className="hint">
-            {canBuy
-              ? 'Tap a card to buy it for 1 🪙 — selling and trading are free'
-              : 'No coins left — you can still sell, trade, or pass'}
+            {freeBuy
+              ? 'Your first buy this round is free 🎉 — tap a card'
+              : you.coins > 0
+                ? 'Tap a card to buy it for 1 🪙 — selling and trading are free'
+                : avocados > 0
+                  ? 'No coins — tap a card to buy it by discarding an Avocado 🥑'
+                  : 'No coins left — you can still sell, trade, or pass'}
           </div>
         )}
       </section>
 
+      {/* Set-aside Avocados (Golden pack) */}
+      {avocados > 0 && (
+        <section className="avocado-zone">
+          <div className="section-label">
+            Set aside
+            <span className="muted"> · discard instead of paying 1 🪙</span>
+          </div>
+          <button
+            type="button"
+            className={`avocado-token ${useAvocado ? 'is-active' : ''}`}
+            disabled={!myTurn || you.coins <= 0}
+            onClick={() => setUseAvocado((v) => !v)}
+            title={
+              you.coins <= 0
+                ? 'Out of coins — buys will spend an Avocado'
+                : useAvocado
+                  ? 'Your next buy will spend an Avocado (click to cancel)'
+                  : 'Spend an Avocado on your next buy instead of a coin'
+            }
+          >
+            🥑 ×{avocados}
+          </button>
+          {myTurn && (useAvocado || you.coins <= 0) && (
+            <div className="hint">Your next buy will discard an Avocado — no coin spent.</div>
+          )}
+        </section>
+      )}
+
       {/* Your deck */}
       <section className="deck-wrap">
         <div className="section-label">
@@ -350,6 +391,28 @@ export function ShopPhase({ view, you, send }: Props) {
         </div>
       )}
 
+      {/* Cockatoo reveal picker (Golden pack) */}
+      {view.pendingReveal?.playerId === you.id && (
+        <div className="modal-backdrop">
+          <div className="modal">
+            <h3>Reveal a pet — gain Apples equal to its Power</h3>
+            <div className="modal-cards">
+              {(view.pendingReveal.options ?? []).map((id) => {
+                const c = deck.find((d) => d.id === id)
+                return c ? (
+                  <CardView
+                    key={id}
+                    card={c}
+                    size="lg"
+                    onClick={() => send({ type: 'revealChoose', card: id })}
+                  />
+                ) : null
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
       {cardFlyer &&
         createPortal(
           <div