From ac0b102e78521ac939f9bb28a2a741cd046975e9 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 05:01:00 -0600
Subject: [PATCH] Fix shop room preview showing solid green LCD background.

Include lib/ in Tailwind content so parallax room gradient classes from room-backgrounds.ts are emitted in production CSS.
---
 components/pet/parallax-room-background.tsx |  5 ++++-
 components/shop/shop-item-preview-modal.tsx | 13 +++++--------
 lib/shop-preview.ts                         | 17 ++++++++++++++++-
 tailwind.config.ts                          |  1 +
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/components/pet/parallax-room-background.tsx b/components/pet/parallax-room-background.tsx
index 83bfd88..0b45358 100644
--- a/components/pet/parallax-room-background.tsx
+++ b/components/pet/parallax-room-background.tsx
@@ -47,7 +47,10 @@ export function ParallaxRoomBackground({
   }, [interactive]);
 
   return (
-    <div ref={containerRef} className={cn("absolute inset-0 overflow-hidden", className)}>
+    <div
+      ref={containerRef}
+      className={cn("absolute inset-0 z-0 overflow-hidden", className)}
+    >
       {room.layers.map((layer, index) => (
         <div
           key={layer.id}
diff --git a/components/shop/shop-item-preview-modal.tsx b/components/shop/shop-item-preview-modal.tsx
index a1969db..6e5b337 100644
--- a/components/shop/shop-item-preview-modal.tsx
+++ b/components/shop/shop-item-preview-modal.tsx
@@ -7,12 +7,11 @@ import { CharacterLayerPreview } from "@/components/character/character-layer-pr
 import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
 import { Button } from "@/components/ui/button";
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
-import { buildShopItemPreviewCustomization } from "@/lib/shop-preview";
-import type { ShopItemRecord } from "@/lib/shop-catalog";
 import {
-  normalizeRoomBackgroundId,
-  type RoomBackgroundId,
-} from "@/lib/room-backgrounds";
+  buildShopItemPreviewCustomization,
+  getShopPreviewRoomId,
+} from "@/lib/shop-preview";
+import type { ShopItemRecord } from "@/lib/shop-catalog";
 
 type ShopItemPreviewModalProps = {
   item: ShopItemRecord | null;
@@ -64,9 +63,7 @@ export function ShopItemPreviewModal({
     baseCustomization,
     item,
   );
-  const roomId = normalizeRoomBackgroundId(
-    previewCustomization.roomBackground,
-  ) as RoomBackgroundId;
+  const roomId = getShopPreviewRoomId(item, baseCustomization);
 
   return (
     <div
diff --git a/lib/shop-preview.ts b/lib/shop-preview.ts
index 17640a7..aa31e9a 100644
--- a/lib/shop-preview.ts
+++ b/lib/shop-preview.ts
@@ -1,6 +1,21 @@
 import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
 import { parseVariantId, parseShopStyleItem, type ShopItemRecord } from "@/lib/shop-catalog";
-import { normalizeRoomBackgroundId } from "@/lib/room-backgrounds";
+import {
+  normalizeRoomBackgroundId,
+  type RoomBackgroundId,
+} from "@/lib/room-backgrounds";
+
+/** Room id shown behind the pet in shop preview (shop item id, not image_path). */
+export function getShopPreviewRoomId(
+  item: ShopItemRecord,
+  base: AvatarCustomization,
+): RoomBackgroundId {
+  if (item.type === "room") {
+    return normalizeRoomBackgroundId(item.id);
+  }
+
+  return normalizeRoomBackgroundId(base.roomBackground);
+}
 
 /** Build a non-persisted avatar state showing how a shop item would look. */
 export function buildShopItemPreviewCustomization(
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 02da2f1..63e961d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,6 +7,7 @@ export default {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {