Use real assets.

web/src/styles.css

@@ -1105,9 +1105,16 @@ h3 {
   font-size: 2.5rem;
   line-height: 1;
   transform: translateY(8%);
-  filter:
-    drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
-    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
+  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
+}
+
+/* Pet illustrations render as PNG stickers sized off the art font-size, so the
+   lg/sm/battle overrides below scale them for free. */
+.card-art-img {
+  display: block;
+  width: 1.5em;
+  height: 1.5em;
+  object-fit: contain;
 }
 
 .card-lg .card-art {
@@ -2086,6 +2093,13 @@ h3 {
   filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
 }
 
+.spawn-flyer-img {
+  display: block;
+  width: 1.5em;
+  height: 1.5em;
+  object-fit: contain;
+}
+
 /* A bought card in flight from the shop slot to its landing spot in your hand.
    The element is positioned over its destination slot (fixed) and inverted back
    to where it was clicked (--dx/--dy/--s), then plays that offset out — a FLIP