Improve UI of food and set-aside cards.

web/src/styles.css

@@ -1197,8 +1197,11 @@ h3 {
     linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.18));
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 20px;
-  padding: 30px 14px;
-  min-height: 244px;
+  /* Roomy top/bottom padding: pets keep their central row while set-aside
+     cards fan above and attached foods fan below. The bottom needs more room
+     since a pet can carry several foods. */
+  padding: 132px 14px 208px;
+  min-height: 150px;
   overflow-x: auto;
   box-shadow:
     var(--tray-inset),
@@ -1388,33 +1391,49 @@ h3 {
   filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
 }
 
-/* --- foods waiting for a pet --- */
-
-.pending-foods {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 1.3rem;
-  min-width: 1.5rem;
-}
-
-.unit-foods {
-  display: flex;
-  justify-content: center;
-  gap: 2px;
-  font-size: 1rem;
-  margin-top: 4px;
-}
-
 /* --- the pet in play --- */
 
 .battle-unit-zone {
+  position: relative;
   min-width: 100px;
   min-height: 150px;
   display: grid;
   place-items: center;
 }
 
+/* Set-aside pets (Blowfish, Badger, …) laid out in a row above the active
+   pet, kept until their pending effect resolves. */
+.setaside-row {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  z-index: 5;
+}
+
+/* Attached (or pending) foods fanned below the pet: a vertical stack that
+   overlaps ~¾ so only each card's top edge shows, last card fully on top. */
+.food-fan {
+  position: absolute;
+  top: calc(100% - 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 4;
+}
+
+.food-fan-card {
+  position: relative;
+}
+
+.food-fan-card:not(:first-child) {
+  margin-top: -88px;
+}
+
 .battle-unit {
   position: relative;
   flex-shrink: 0;
@@ -1442,22 +1461,21 @@ h3 {
 
 /* --- rock dice --- */
 
-/* A little tray of dice under the thrower's side. Fixed slots: the dice
-   scramble in place, then settle showing the rolled rock faces. */
-.dice-roll {
+/* A little tray of dice, drawn just below the throwing side's deck (see
+   .stack-dice). Fixed slots: the dice scramble in place, then settle showing
+   the rolled rock faces. */
+.stack-dice {
   position: absolute;
-  bottom: 8px;
-  display: flex;
-  gap: 7px;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 8;
   pointer-events: none;
-  transform: translateX(-50%);
 }
-.dice-roll-left {
-  left: 27%;
-}
-.dice-roll-right {
-  left: 73%;
+
+.dice-roll {
+  display: flex;
+  gap: 7px;
 }
 
 .droll {