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.

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 },
-
-      { 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 },
-
-    ],
+    layers: [],
 
   },
 
@@ -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 },
-
-      { 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 },
-
-    ],
+    layers: [],
 
   },
 
@@ -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 ?? "",
 
   }));