Use shop SVG assets for paid room previews so thumbnail and LCD match.

ParallaxRoomBackground renders sceneImage with pixelated cover for room-night
and room-forest instead of mismatched CSS layers.

components/pet/parallax-room-background.tsx

@@ -14,6 +14,8 @@ type ParallaxRoomBackgroundProps = {
   interactive?: boolean;
 };
 
+const SCENE_IMAGE_PARALLAX_SPEED = 0.15;
+
 export function ParallaxRoomBackground({
   roomId,
   className,
@@ -46,6 +48,27 @@ export function ParallaxRoomBackground({
     };
   }, [interactive]);
 
+  if (room.sceneImage) {
+    return (
+      <div
+        ref={containerRef}
+        className={cn("absolute inset-0 z-0 overflow-hidden", className)}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={room.sceneImage}
+          alt=""
+          aria-hidden
+          className="absolute inset-[-8%] size-[116%] max-w-none object-cover image-pixelated"
+          style={{
+            transform: `translate3d(${offset.x * SCENE_IMAGE_PARALLAX_SPEED * 10}px, ${offset.y * SCENE_IMAGE_PARALLAX_SPEED * 8}px, 0)`,
+            transition: "transform 0.15s steps(4)",
+          }}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
       ref={containerRef}

components/pet/room-background-picker.tsx

@@ -73,7 +73,16 @@ export function RoomBackgroundPicker({
                   : "opacity-80 hover:-translate-y-0.5",
               )}
             >
-              <div className={cn("absolute inset-0", room.previewClassName)} />
+              {room.sceneImage ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={room.sceneImage}
+                  alt=""
+                  className="absolute inset-0 size-full object-cover image-pixelated"
+                />
+              ) : (
+                <div className={cn("absolute inset-0", room.previewClassName)} />
+              )}
               <p className="absolute inset-x-0 bottom-0 bg-black/55 px-1.5 py-1 text-left text-[8px] uppercase tracking-wider text-foreground">
                 {room.name}
               </p>

components/pet/room-style-selector.tsx

@@ -70,7 +70,16 @@ export function RoomStyleSelector({
                   : "border-border/60 hover:border-border",
             )}
           >
-            <div className={cn("absolute inset-0", room.previewClassName)} />
+            {room.sceneImage ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={room.sceneImage}
+                alt=""
+                className="absolute inset-0 size-full object-cover image-pixelated"
+              />
+            ) : (
+              <div className={cn("absolute inset-0", room.previewClassName)} />
+            )}
             {locked ? (
               <span
                 aria-hidden

components/shop/shop-content.tsx

@@ -84,7 +84,7 @@ function ShopItemCard({
                 <img
                   src={item.image_path}
                   alt=""
-                  className="size-full object-cover"
+                  className="size-full object-cover image-pixelated"
                 />
               ) : (
                 <div className={cn("size-full", room.previewClassName)} />

lib/room-backgrounds.ts

@@ -32,6 +32,9 @@ export type RoomBackground = {
 
   previewClassName: string;
 
+  /** Full-scene SVG used for shop thumbnail and in-app preview parity. */
+  sceneImage?: string;
+
   layers: RoomBackgroundLayer[];
 
 };
@@ -100,19 +103,11 @@ export const ROOM_BACKGROUNDS: RoomBackground[] = [
 
     free: false,
 
-    previewClassName: "bg-gradient-to-b from-indigo-950 via-violet-900 to-slate-900",
+    previewClassName: "bg-gradient-to-b from-[#1e1b4b] via-[#4c1d95] to-[#0f172a]",
 
-    layers: [
+    sceneImage: "/shop/room-night.svg",
 
-      { id: "sky", className: "bg-gradient-to-b from-indigo-950 via-violet-900 to-slate-900", speed: 0.1 },
+    layers: [],
-
-      { id: "stars", className: "bg-[radial-gradient(circle_at_7%_11%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_14%_26%,rgba(255,255,255,0.95)_1.5px,transparent_1.5px),radial-gradient(circle_at_21%_7%,rgba(255,255,255,0.6)_1px,transparent_1px),radial-gradient(circle_at_29%_41%,rgba(255,255,255,1)_1.5px,rgba(255,255,255,0.25)_2.5px,transparent_3.5px),radial-gradient(circle_at_36%_14%,rgba(255,255,255,0.8)_1px,transparent_1px),radial-gradient(circle_at_43%_54%,rgba(255,255,255,0.65)_1px,transparent_1px),radial-gradient(circle_at_51%_19%,rgba(255,255,255,0.9)_1.5px,transparent_1.5px),radial-gradient(circle_at_57%_66%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_64%_33%,rgba(255,255,255,0.55)_1px,transparent_1px),radial-gradient(circle_at_11%_56%,rgba(255,255,255,1)_1.5px,rgba(255,255,255,0.2)_2.5px,transparent_3.5px),radial-gradient(circle_at_18%_71%,rgba(255,255,255,0.75)_1px,transparent_1px),radial-gradient(circle_at_26%_47%,rgba(255,255,255,0.6)_1px,transparent_1px),radial-gradient(circle_at_34%_76%,rgba(255,255,255,0.85)_1px,transparent_1px),radial-gradient(circle_at_41%_30%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_47%_86%,rgba(255,255,255,0.65)_1px,transparent_1px),radial-gradient(circle_at_54%_10%,rgba(255,255,255,0.95)_1.5px,transparent_1.5px),radial-gradient(circle_at_61%_44%,rgba(255,255,255,0.5)_1px,transparent_1px),radial-gradient(circle_at_69%_73%,rgba(255,255,255,0.8)_1px,transparent_1px),radial-gradient(circle_at_84%_39%,rgba(255,255,255,0.9)_1.5px,transparent_1.5px),radial-gradient(circle_at_91%_13%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_87%_60%,rgba(255,255,255,0.6)_1px,transparent_1px),radial-gradient(circle_at_5%_36%,rgba(255,255,255,0.75)_1px,transparent_1px),radial-gradient(circle_at_73%_51%,rgba(255,255,255,0.55)_1px,transparent_1px)] opacity-80", speed: 0.3 },
-
-      { id: "moon", className: "bg-[radial-gradient(circle_at_78%_18%,rgba(255,255,220,0.95)_0%,rgba(255,255,220,0.15)_8%,transparent_20%)]", speed: 0.2 },
-
-      { id: "ground", className: "bg-[linear-gradient(to_top,#111827_0%,#111827_35%,transparent_35%)]", speed: 0.6 },
-
-    ],
 
   },
 
@@ -124,19 +119,11 @@ export const ROOM_BACKGROUNDS: RoomBackground[] = [
 
     free: false,
 
-    previewClassName: "bg-gradient-to-b from-emerald-900 via-green-900 to-lime-950",
+    previewClassName: "bg-gradient-to-b from-[#064e3b] via-[#14532d] to-[#052e16]",
 
-    layers: [
+    sceneImage: "/shop/room-forest.svg",
 
-      { id: "sky", className: "bg-gradient-to-b from-emerald-950 via-green-900 to-lime-950", speed: 0.14 },
+    layers: [],
-
-      { id: "mist", className: "bg-[radial-gradient(circle_at_30%_60%,rgba(180,255,200,0.25)_0%,transparent_45%),radial-gradient(circle_at_70%_40%,rgba(180,255,200,0.18)_0%,transparent_40%)]", speed: 0.4 },
-
-      { id: "trees", className: "bg-[repeating-linear-gradient(90deg,rgba(0,0,0,0.35)_0_14px,transparent_14px_28px)] opacity-50", speed: 0.55 },
-
-      { id: "floor", className: "bg-[linear-gradient(to_top,#14532d_0%,#14532d_30%,transparent_30%)]", speed: 0.7 },
-
-    ],
 
   },
 
@@ -236,7 +223,7 @@ export function getShopRoomBackgrounds() {
 
     price: room.id === "room-night" ? 40 : 50,
 
-    image_path: room.id === "room-night" ? "/shop/room-night.svg" : "/shop/room-forest.svg",
+    image_path: room.sceneImage ?? "",
 
   }));