Move Style entry to pet portrait and drop it from bottom nav.

Add a palette shortcut on the habitat LCD and keep customize at /customize.

components/layout/app-nav.tsx

@@ -6,7 +6,6 @@ import { forwardRef } from "react";
 import {
   Home,
   ListPlus,
-  Palette,
   ShoppingBag,
   Sparkles,
   UserRound,
@@ -26,7 +25,6 @@ const gridColsClass = {
 
 const navIcons = {
   [routes.avatar]: Home,
-  [routes.customize]: Palette,
   [routes.habits]: ListPlus,
   [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,

components/pet/pet-habitat.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 
 import { AnimatedPetSprite } from "@/components/pet/animated-pet-sprite";
 import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
+import { PetStyleLink } from "@/components/pet/pet-style-link";
 import { PixelGauge } from "@/components/pet/pixel-gauge";
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
 import {
@@ -70,6 +71,9 @@ export function PetHabitat({ customization, className }: PetHabitatProps) {
           <PixelGauge type="heart" value={condition.health} variant="overlay" />
           <PixelGauge type="energy" value={condition.energy} variant="overlay" />
         </div>
+        <div className="absolute right-2 top-2 z-20">
+          <PetStyleLink />
+        </div>
         <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-8 bg-gradient-to-t from-black/35 to-transparent" />
       </div>
     </div>

components/pet/pet-style-link.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { Palette } from "lucide-react";
+
+import { routes } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+type PetStyleLinkProps = {
+  className?: string;
+};
+
+export function PetStyleLink({ className }: PetStyleLinkProps) {
+  return (
+    <Link
+      href={routes.customize}
+      aria-label="Customize pet style"
+      title="Style"
+      className={cn(
+        "flex shrink-0 items-center justify-center border-2 border-border bg-card/90 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
+        className,
+      )}
+    >
+      <Palette aria-hidden="true" className="size-5" strokeWidth={2.5} />
+    </Link>
+  );
+}

lib/routes.ts

@@ -17,7 +17,6 @@ export type AppRoute = (typeof routes)[keyof typeof routes];
 
 export const appNavItems = [
   { href: routes.avatar, label: "Pet", shortLabel: "Pet" },
-  { href: routes.customize, label: "Customize", shortLabel: "Style" },
   { href: routes.habits, label: "Habits", shortLabel: "Habits" },
   { href: routes.dailyQuiz, label: "Daily Quiz", shortLabel: "Quiz" },
   { href: routes.shop, label: "Shop", shortLabel: "Shop" },