Polish quiz completion UX, room PNG backgrounds, and habits list order

Polish quiz completion UX, rooms, and app layout.

components/avatar/avatar-customize-layout.tsx

@@ -15,7 +15,7 @@ export function AvatarCustomizeLayout({
   children,
 }: AvatarCustomizeLayoutProps) {
   return (
-    <div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
+    <div className="relative min-h-dvh bg-background pt-topbar">
       <AppTopBar />
 
       <main className="mx-auto max-w-lg px-4 py-6 lg:max-w-6xl lg:px-5">

components/avatar/pixel-avatar.tsx

@@ -11,6 +11,7 @@ type PixelAvatarProps = {
   mood?: AvatarMood;
   size?: "sm" | "md" | "lg";
   className?: string;
+  showMoodLabel?: boolean;
 };
 
 const sizeStyles = {
@@ -23,6 +24,7 @@ export function PixelAvatar({
   mood = "neutral",
   size = "lg",
   className,
+  showMoodLabel = true,
 }: PixelAvatarProps) {
   return (
     <div
@@ -43,9 +45,11 @@ export function PixelAvatar({
         </div>
         <div className="absolute bottom-[24%] left-1/2 h-1 w-4 -translate-x-1/2 rounded-[1px] bg-foreground/80" />
       </div>
-      <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-        {mood}
-      </p>
+      {showMoodLabel ? (
+        <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          {mood}
+        </p>
+      ) : null}
     </div>
   );
 }