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