Various bug fixes and improvements.

web/src/components/BattlePhase.tsx

@@ -541,7 +541,7 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
             <div className={`deck-peek deck-peek-${peek.dir}`} style={style}>
               <div className="deck-peek-label">
                 {peek.seat === youSeat ? 'Your' : 'Opponent’s'} deck · {lineup.length} card
-                {lineup.length !== 1 ? 's' : ''} (top first)
+                {lineup.length !== 1 ? 's' : ''} (first on the right)
               </div>
               <div className="deck-peek-cards">
                 {lineup.map((c, i) => (

web/src/components/CardView.tsx

@@ -206,19 +206,19 @@ export function CardView({
       onMouseLeave={preview ? undefined : () => setHover(null)}
     >
       {previewEl}
-      {/* Power sits in a spiky burst badge in the top-left corner (pets only),
-          with any battle damage marker beside it. It's absolutely placed so it
-          doesn't eat into the room the name and ability text need. */}
+      <div className="card-top">
+        <span className="card-tier">{card.tier ? `T${card.tier}` : '·'}</span>
+        {card.suit && <span className={`suit-dot suit-${card.suit}`} title={`${card.suit} suit`} />}
+      </div>
+      {/* Power sits in a spiky burst badge on its own centered row (pets only),
+          with any battle damage marker beside it, so it never overlaps the art,
+          name, or ability text. */}
       {card.kind === 'pet' && (
         <div className="card-combat">
           <span className={`card-power ${bonus > 0 ? 'is-buffed' : ''}`}>{power}</span>
           {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
         </div>
       )}
-      <div className="card-top">
-        <span className="card-tier">{card.tier ? `T${card.tier}` : '·'}</span>
-        {card.suit && <span className={`suit-dot suit-${card.suit}`} title={`${card.suit} suit`} />}
-      </div>
       <div className="card-art" aria-hidden>
         {artFor(card.name)}
       </div>

web/src/components/ShopPhase.tsx

@@ -73,6 +73,7 @@ export function ShopPhase({ view, you, send }: Props) {
   const [useAvocado, setUseAvocado] = useState(false)
   const myTurn = view.turn === view.youSeat && !you.ready
   const avocados = you.avocados ?? 0
+  const trumpets = you.trumpets ?? 0
   const freeBuy = !!you.firstBuyFree // Manta Ray: next buy costs no gold
   const canBuy = myTurn && (you.coins > 0 || avocados > 0 || freeBuy)
   // Nudge the player to pass once there's nothing left to buy.
@@ -376,6 +377,11 @@ export function ShopPhase({ view, you, send }: Props) {
             ))}
           </div>
         )}
+        {trumpets > 0 && (
+          <div className="trumpet-indicator" title="Trumpets banked for your next battle">
+            🎺 ×{trumpets}
+          </div>
+        )}
       </section>
 
       {/* Actions */}

web/src/components/Table.tsx

@@ -224,7 +224,7 @@ export function Table({ session, onLeave }: { session: Session; onLeave: () => v
               >
                 <div className="deck-peek-label">
                   {oppName}’s deck last round · {lineup.length} card
-                  {lineup.length !== 1 ? 's' : ''} (top first)
+                  {lineup.length !== 1 ? 's' : ''} (first on the right)
                 </div>
                 <div className="deck-peek-cards">
                   {lineup.map((c, i) => (