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

Polish quiz completion UX, rooms, and app layout.

components/pet/parallax-room-background.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-
 import {
   getRoomBackground,
   type RoomBackgroundId,
@@ -11,83 +9,25 @@ import { cn } from "@/lib/utils";
 type ParallaxRoomBackgroundProps = {
   roomId: RoomBackgroundId;
   className?: string;
-  interactive?: boolean;
 };
 
 export function ParallaxRoomBackground({
   roomId,
   className,
-  interactive = true,
 }: ParallaxRoomBackgroundProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
   const room = getRoomBackground(roomId);
-  const usesSceneImage = Boolean(room.sceneImage);
-
-  useEffect(() => {
-    if (!interactive || usesSceneImage) {
-      return;
-    }
-
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const handlePointerMove = (event: PointerEvent) => {
-      const rect = container.getBoundingClientRect();
-      const x = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
-      const y = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
-      setOffset({ x, y });
-    };
-
-    container.addEventListener("pointermove", handlePointerMove);
-    return () => {
-      container.removeEventListener("pointermove", handlePointerMove);
-    };
-  }, [interactive, usesSceneImage]);
-
-  if (room.sceneImage) {
-    return (
-      <div
-        ref={containerRef}
-        className={cn(
-          "absolute inset-0 z-0 overflow-hidden",
-          room.previewClassName,
-          className,
-        )}
-      >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          src={room.sceneImage}
-          alt=""
-          aria-hidden
-          className="absolute inset-0 size-full object-cover image-pixelated"
-        />
-      </div>
-    );
-  }
 
   return (
     <div
-      ref={containerRef}
-      className={cn("absolute inset-0 z-0 overflow-hidden", className)}
+      className={cn("absolute inset-0 z-0 overflow-hidden bg-lcd-bg", className)}
     >
-      {room.layers.map((layer, index) => (
-        <div
-          key={layer.id}
-          aria-hidden
-          className={cn(
-            "absolute inset-[-12%]",
-            layer.className,
-            index % 2 === 0 ? "animate-parallax-drift" : "animate-star-twinkle",
-          )}
-          style={{
-            transform: `translate3d(${offset.x * layer.speed * 10}px, ${offset.y * layer.speed * 8}px, 0)`,
-            transition: "transform 0.15s steps(4)",
-          }}
-        />
-      ))}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={room.sceneImage}
+        alt=""
+        aria-hidden
+        className="absolute inset-0 size-full object-cover image-pixelated"
+      />
     </div>
   );
 }