Fix a bunch of bugs.

web/src/components/ShopPhase.tsx

@@ -93,6 +93,17 @@ export function ShopPhase({ view, you, send }: Props) {
     wasMyTurn.current = myTurn
   }, [myTurn, view.pending, view.pendingReveal])
   const overPets = you.petCount > view.maxPets
+
+  // Show every coin you started the round with, fading the spent ones rather
+  // than dropping them. Coins only fall within a round, so the highest count
+  // seen this round is the starting purse. Reset when the round changes.
+  const purse = useRef({ round: view.round, max: you.coins })
+  if (purse.current.round !== view.round) {
+    purse.current = { round: view.round, max: you.coins }
+  }
+  purse.current.max = Math.max(purse.current.max, you.coins)
+  const totalCoins = purse.current.max
+
   const deck = you.deck ?? []
   const opponent = view.players.find((p) => p.seat !== view.youSeat)
   const pending = view.pending
@@ -235,16 +246,24 @@ export function ShopPhase({ view, you, send }: Props) {
         )}
       </div>
 
-      {turnBanner && <div className="turn-banner">Your turn!</div>}
+      {turnBanner && (
+        <div className="turn-banner">
+          <span className="turn-banner-pill">Your turn!</span>
+        </div>
+      )}
 
-      {/* Coins as big golden discs above the buy row. */}
-      <div className="shop-coins" aria-label={`${you.coins} gold`}>
-        {Array.from({ length: Math.max(you.coins, 0) }, (_, i) => (
-          <span key={i} className="coin-disc">
-            🪙
-          </span>
-        ))}
-        {you.coins === 0 && <span className="coin-empty muted">out of gold</span>}
+      {/* Coins as big golden discs above the buy row. Spent coins stay put but
+          grey out, so you can see what you started the round with. */}
+      <div className="shop-coins" aria-label={`${you.coins} of ${totalCoins} gold`}>
+        {totalCoins > 0 ? (
+          Array.from({ length: totalCoins }, (_, i) => (
+            <span key={i} className={`coin-disc ${i >= you.coins ? 'is-spent' : ''}`}>
+              🪙
+            </span>
+          ))
+        ) : (
+          <span className="coin-empty muted">out of gold</span>
+        )}
       </div>
 
       {/* Shop row */}