Improvements to the UI

app/globals.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --app-topbar-height: 3.5rem;
+    --app-topbar-height: 3.25rem;
     --app-viewport-bottom-offset: 0px;
     --app-nav-offset: 6rem;
     --bottom-nav-height: 6rem;
@@ -117,7 +117,7 @@
     border: 3px solid hsl(var(--lcd-border));
   }
 
-  /* Matches pet-tab LCD: max-w-lg main minus px-5 and shell p-4 */
+  /* Matches bit-tab LCD: max-w-lg main minus px-5 and shell p-4 */
   .tamagotchi-lcd-pet-match {
     @apply aspect-[4/3] w-full shrink-0;
     max-width: calc(32rem - 2.5rem - 2rem);
@@ -127,6 +127,15 @@
   .tamagotchi-lcd-landing {
     @apply aspect-[4/3] w-full shrink-0;
     max-height: clamp(120px, 36vw, 240px);
+    container-type: inline-size;
+  }
+
+  .tamagotchi-lcd-landing .lcd-readable-name-landing {
+    max-width: 58%;
+    padding: 0.125rem 0.375rem;
+    font-size: clamp(0.4rem, 4.5cqi, 0.5625rem);
+    line-height: 1.2;
+    box-shadow: 1px 1px 0 0 hsl(280 45% 28%);
   }
 
   .tamagotchi-lcd-landing > div.absolute svg {
@@ -149,16 +158,6 @@
     aspect-ratio: auto;
   }
 
-  .customize-body {
-    min-height: 26rem;
-  }
-
-  @media (min-width: 1024px) {
-    .customize-body {
-      min-height: 30rem;
-    }
-  }
-
   .retro-btn {
     @apply inline-flex items-center justify-center border-2 border-border bg-primary text-primary-foreground;
     box-shadow: var(--retro-shadow-sm);
@@ -244,6 +243,31 @@
   .form-section-locked label {
     @apply text-muted-foreground;
   }
+
+  .lcd-readable-label {
+    @apply border-2 border-border bg-card px-2.5 py-1.5 text-center font-pixel text-[8px] leading-snug text-card-foreground sm:text-[9px];
+    box-shadow: var(--retro-shadow-sm);
+  }
+
+  .lcd-readable-name {
+    @apply border-2 border-border bg-card px-2 py-1 font-pixel leading-snug text-card-foreground;
+    box-shadow: var(--retro-shadow-sm);
+  }
+}
+
+@keyframes emotion-pop {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-emotion-pop {
+  animation: emotion-pop 0.2s steps(4) both;
 }
 
 @keyframes pet-breathe {