Improve locked customization previews so sprites and rooms stay visible.

Replace full-button opacity and heavy scrims with a small dark lock pill so users can still see what they are previewing in the shop.

Author: RecentRunner

components/character/character-piece-selector.tsx

@@ -94,7 +94,7 @@ export function CharacterPieceSelector({
             className={cn(
               "relative flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
               locked
-                ? "border-border/40 opacity-80 hover:border-border hover:bg-zinc-900/60"
+                ? "border-border/40 hover:border-border hover:bg-zinc-900/60"
                 : activeId === variant.id
                   ? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
                   : "border-border/60 hover:border-border hover:bg-zinc-900/60",
@@ -109,9 +109,11 @@ export function CharacterPieceSelector({
             {locked ? (
               <span
                 aria-hidden
-                className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/75"
+                className="absolute inset-0 flex items-center justify-center rounded-lg"
               >
-                <Lock className="size-4 text-muted-foreground" strokeWidth={2.25} />
+                <span className="rounded bg-black/50 p-1">
+                  <Lock className="size-4 text-white" strokeWidth={2.25} />
+                </span>
               </span>
             ) : null}
           </button>

components/pet/room-background-picker.tsx

@@ -68,9 +68,7 @@ export function RoomBackgroundPicker({
                 selected
                   ? "border-secondary shadow-[0_0_0_2px_hsl(var(--secondary)/0.35)]"
                   : "border-border/70",
-                unlocked
-                  ? "hover:-translate-y-0.5"
-                  : "opacity-80 hover:-translate-y-0.5",
+                "hover:-translate-y-0.5",
               )}
             >
               {room.sceneImage ? (
@@ -87,8 +85,10 @@ export function RoomBackgroundPicker({
                 {room.name}
               </p>
               {!unlocked ? (
-                <span className="absolute inset-0 flex items-center justify-center bg-background/55">
-                  <Lock className="size-4 text-muted-foreground" strokeWidth={2.25} />
+                <span className="absolute inset-0 flex items-center justify-center">
+                  <span className="rounded bg-black/50 p-1">
+                    <Lock className="size-4 text-white" strokeWidth={2.25} />
+                  </span>
                 </span>
               ) : null}
             </button>

components/pet/room-style-selector.tsx

@@ -64,7 +64,7 @@ export function RoomStyleSelector({
             className={cn(
               "relative size-14 overflow-hidden rounded-lg border transition-colors",
               locked
-                ? "border-border/40 opacity-80 hover:border-border"
+                ? "border-border/40 hover:border-border"
                 : activeId === room.id
                   ? "border-foreground shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
                   : "border-border/60 hover:border-border",
@@ -83,9 +83,11 @@ export function RoomStyleSelector({
             {locked ? (
               <span
                 aria-hidden
-                className="absolute inset-0 flex items-center justify-center bg-background/75"
+                className="absolute inset-0 flex items-center justify-center"
               >
-                <Lock className="size-4 text-muted-foreground" strokeWidth={2.25} />
+                <span className="rounded bg-black/50 p-1">
+                  <Lock className="size-4 text-white" strokeWidth={2.25} />
+                </span>
               </span>
             ) : null}
           </button>