Complete character creation screen

Finished the character creation screen with the final layout, UI elements, and customization flow ready for integration.

components/character/character-piece-selector.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { CircleSlash } from "lucide-react";
+
 import type { HSL } from "@/lib/character/color-utils";
-import { PIECE_SLOT_COUNT } from "@/lib/character/presets";
+import { NONE_VARIANT_ID, PIECE_SLOT_COUNT } from "@/lib/character/presets";
 import { cn } from "@/lib/utils";
 import type { LayerVariant } from "@/lib/character/presets";
 
@@ -11,6 +13,7 @@ type CharacterPieceSelectorProps = {
   variants: LayerVariant[];
   activeId: string;
   color: HSL;
+  skinColor?: HSL;
   onSelect: (variantId: string) => void;
 };
 
@@ -18,6 +21,7 @@ export function CharacterPieceSelector({
   variants,
   activeId,
   color,
+  skinColor,
   onSelect,
 }: CharacterPieceSelectorProps) {
   const slots = Array.from({ length: PIECE_SLOT_COUNT }, (_, index) =>
@@ -37,6 +41,31 @@ export function CharacterPieceSelector({
           );
         }
 
+        if (variant.id === NONE_VARIANT_ID) {
+          return (
+            <button
+              key={variant.id}
+              type="button"
+              title={variant.label}
+              aria-label={variant.label}
+              aria-pressed={activeId === variant.id}
+              onClick={() => onSelect(variant.id)}
+              className={cn(
+                "flex size-14 items-center justify-center rounded-lg border bg-muted/20 transition-colors",
+                activeId === variant.id
+                  ? "border-foreground bg-muted/35 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
+                  : "border-border/60 hover:border-border hover:bg-muted/30",
+              )}
+            >
+              <CircleSlash
+                className="size-6 text-muted-foreground"
+                strokeWidth={1.75}
+                aria-hidden
+              />
+            </button>
+          );
+        }
+
         return (
           <button
             key={variant.id}
@@ -52,7 +81,12 @@ export function CharacterPieceSelector({
                 : "border-border/60 hover:border-border hover:bg-zinc-900/60",
             )}
           >
-            <TintedSpriteIcon src={variant.src} color={color} size={36} />
+            <TintedSpriteIcon
+              src={variant.src}
+              color={color}
+              skinColor={skinColor}
+              size={36}
+            />
           </button>
         );
       })}