Various UX improvements.

web/src/styles.css

@@ -854,9 +854,10 @@ h3 {
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  border: 1.5px solid rgba(0, 0, 0, 0.3);
   vertical-align: middle;
+  /* Inset ring instead of a real border — see .card-power. */
   box-shadow:
+    inset 0 0 0 1.5px rgba(0, 0, 0, 0.3),
     inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
     inset 0 -2px 2px rgba(0, 0, 0, 0.25);
 }
@@ -879,14 +880,17 @@ h3 {
   background: radial-gradient(circle at 35% 28%, #ffcf6b, var(--coral-dark));
   color: #fff;
   text-shadow: 0 1px 2px rgba(120, 45, 5, 0.55);
-  border: 2px solid rgba(120, 45, 5, 0.35);
   border-radius: 50%;
   width: 31px;
   height: 31px;
   display: grid;
   place-items: center;
   font-size: 0.98rem;
+  /* The rim is drawn with an inset ring rather than a real border: a
+     border-radius:50% element with a semi-transparent border renders a
+     visible seam at its 6 o'clock point in Chromium (scale-invariant). */
   box-shadow:
+    inset 0 0 0 2px rgba(120, 45, 5, 0.35),
     inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
     inset 0 -2px 3px rgba(120, 45, 5, 0.4),
     0 2px 3px rgba(0, 0, 0, 0.3);
@@ -894,9 +898,9 @@ h3 {
 
 .card-power.is-buffed {
   background: radial-gradient(circle at 35% 28%, #9ff0af, #1f9e55);
-  border-color: rgba(15, 80, 40, 0.4);
   text-shadow: 0 1px 2px rgba(15, 60, 30, 0.55);
   box-shadow:
+    inset 0 0 0 2px rgba(15, 80, 40, 0.4),
     inset 0 1.5px 1px rgba(255, 255, 255, 0.55),
     inset 0 -2px 3px rgba(15, 80, 40, 0.4),
     0 0 8px rgba(80, 220, 120, 0.5);
@@ -1434,6 +1438,22 @@ h3 {
   margin-top: -88px;
 }
 
+/* Released cards (a spent set-aside pet, or a used-up food perk) shrink and
+   fade out over their release step rather than vanishing instantly. The step
+   lasts 500ms (EVENT_MS.release), so the 400ms exit finishes before unmount. */
+@keyframes card-leave {
+  to {
+    opacity: 0;
+    transform: scale(0.55) translateY(-8px);
+  }
+}
+
+.setaside-card.is-leaving,
+.food-fan-card.is-leaving {
+  animation: card-leave 400ms cubic-bezier(0.4, 0, 0.7, 0.4) forwards;
+  pointer-events: none;
+}
+
 .battle-unit {
   position: relative;
   flex-shrink: 0;
@@ -1444,6 +1464,13 @@ h3 {
   height: 132px;
 }
 
+/* Battle cards are short, so give the ability text more of the card by
+   shrinking the decorative art; useFitText then keeps the text at a larger
+   size before it has to shrink to fit. */
+.battle-unit .card-art {
+  font-size: 1.5rem;
+}
+
 @keyframes unit-reveal {
   from {
     opacity: 0;
@@ -1835,7 +1862,10 @@ h3 {
   color: var(--cream);
   border: 2px solid var(--cocoa);
   border-right: none;
-  border-radius: 8px 0 0 8px;
+  /* The button is flipped 180° (below) to read text upward, which also flips
+     these corners — so round the right pair here to land rounded corners on
+     the inner (screen-facing) edge after the rotation. */
+  border-radius: 0 8px 8px 0;
   font-weight: 800;
   font-size: 0.8rem;
   padding: 8px 10px;