Various bug fixes and improvements.

web/src/styles.css

@@ -983,9 +983,8 @@ h3 {
 .card-top {
   width: 100%;
   display: flex;
-  /* The power badge now floats over the top-left corner, so tier + suit sit
-     together at the top-right. */
-  justify-content: flex-end;
+  /* Tier sits at the top-left, suit dot at the top-right. */
+  justify-content: space-between;
   align-items: center;
   gap: 5px;
   font-size: 0.72rem;
@@ -993,16 +992,15 @@ h3 {
   min-height: 14px;
 }
 
-/* Combat stats (power badge + battle damage marker) pinned to the top-left
-   corner. Absolute so they don't push the name and ability text down. */
+/* Combat stats (power badge + battle damage marker) get their own centered
+   row just under the tier/suit line, so they never overlap the art or text. */
 .card-combat {
-  position: absolute;
-  top: 5px;
-  left: 5px;
   z-index: 2;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 4px;
+  margin: 2px 0 1px;
 }
 
 .card-tier {
@@ -1290,6 +1288,19 @@ h3 {
     inset 0 0 0 1px rgba(246, 201, 78, 0.06);
 }
 
+/* Trumpets banked for the next battle, shown as a pill under the deck. */
+.trumpet-indicator {
+  margin: 12px auto 0;
+  width: fit-content;
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  padding: 5px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(246, 201, 78, 0.3);
+  background: rgba(0, 0, 0, 0.28);
+  color: var(--gold);
+}
+
 /* Coins shown as big golden discs above the buy row. */
 .shop-coins {
   display: flex;
@@ -2592,6 +2603,14 @@ h3 {
   flex-wrap: wrap;
   gap: 6px;
   max-width: min(60vw, 560px);
+  /* Read right-to-left like the arrangement screen: the first (top) card sits
+     on the right and later pets flow left. */
+  direction: rtl;
+}
+
+/* Keep each card's own contents left-to-right despite the rtl row. */
+.deck-peek-cards > * {
+  direction: ltr;
 }
 
 /* Backdrop behind the toolbar deck-peek: any click outside dismisses it. Sits