{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"chapter-intro","type":"registry:block","title":"8-bit Chapter Intro","description":"A cinematic chapter/level intro with pixel art background.","registryDependencies":["card"],"categories":["gaming"],"files":[{"path":"components/ui/8bit/blocks/chapter-intro.tsx","type":"registry:block","target":"components/ui/8bit/blocks/chapter-intro.tsx","content":"import { cn } from \"@/lib/utils\";\n\nimport { Card, CardContent } from \"@/components/ui/8bit/card\";\n\nexport interface ChapterIntroProps extends React.ComponentProps<\"div\"> {\n  title: string;\n  subtitle?: string;\n  backgroundSrc?: string;\n  align?: \"left\" | \"center\" | \"right\";\n  height?: \"sm\" | \"md\" | \"lg\";\n  darken?: number;\n}\n\nexport default function ChapterIntro({\n  className,\n  title,\n  subtitle,\n  backgroundSrc = \"/placeholder.svg\",\n  align = \"center\",\n  height = \"md\",\n  darken = 0.5,\n  ...props\n}: ChapterIntroProps) {\n  const heightClass =\n    height === \"lg\"\n      ? \"min-h-[420px] md:min-h-[640px]\"\n      : height === \"sm\"\n        ? \"min-h-[240px] md:min-h-[360px]\"\n        : \"min-h-[320px] md:min-h-[480px]\";\n\n  const alignClass =\n    align === \"left\"\n      ? \"justify-start text-left\"\n      : align === \"right\"\n        ? \"justify-end text-right\"\n        : \"justify-center text-center\";\n\n  return (\n    <Card className={cn(className)} {...props}>\n      <CardContent className={cn(\"relative p-0\")}>\n        <div className={cn(\"relative w-full\", heightClass)}>\n          {/* Background image */}\n          <img\n            src={backgroundSrc}\n            alt=\"\"\n            className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.7]\"\n            style={{ imageRendering: \"pixelated\" }}\n          />\n\n          {/* Darken/gradient overlay for readability */}\n          <div\n            className=\"absolute inset-0 bg-background/60 mix-blend-multiply\"\n            style={{ opacity: darken }}\n            aria-hidden=\"true\"\n          />\n\n          {/* Cinematic letterbox bars */}\n          <div\n            className=\"absolute top-0 left-0 right-0 h-6 md:h-10 bg-secondary/40\"\n            aria-hidden=\"true\"\n          />\n          <div\n            className=\"absolute bottom-0 left-0 right-0 h-6 md:h-10 bg-secondary/80\"\n            aria-hidden=\"true\"\n          />\n\n          {/* Content overlay */}\n          <div\n            className={cn(\n              \"relative z-10 flex h-full items-center p-8 md:p-12\",\n              alignClass\n            )}\n          >\n            <div className=\"mx-auto max-w-3xl\">\n              <h1 className=\"text-2xl md:text-4xl lg:text-5xl font-bold leading-tight drop-shadow-[0_3px_0_rgba(0,0,0,0.8)]\">\n                {title}\n              </h1>\n              {subtitle && (\n                <p className=\"mt-4 text-xs md:text-base text-secondary/90 dark:text-muted-foreground/90 drop-shadow-[0_2px_0_rgba(0,0,0,0.8)]\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"},{"path":"components/ui/8bit/styles/retro.css","type":"registry:component","target":"components/ui/8bit/styles/retro.css","content":"@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n  font-family:\n    \"Press Start 2P\",\n    system-ui,\n    -apple-system,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: 0.5px;\n}\n\n.pixelated {\n  image-rendering: pixelated;\n  image-rendering: crisp-edges;\n}"},{"path":"components/ui/8bit/card.tsx","type":"registry:component","target":"components/ui/8bit/card.tsx","content":"import { type VariantProps, cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  Card as ShadcnCard,\n  CardAction as ShadcnCardAction,\n  CardContent as ShadcnCardContent,\n  CardDescription as ShadcnCardDescription,\n  CardFooter as ShadcnCardFooter,\n  CardHeader as ShadcnCardHeader,\n  CardTitle as ShadcnCardTitle,\n} from \"@/components/ui/card\";\n\nimport \"@/components/ui/8bit/styles/retro.css\";\n\nexport const cardVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: \"retro\",\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n});\n\nexport interface BitCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\nfunction Card({ className, font, ...props }: BitCardProps) {\n  return (\n    <div\n      className={cn(\n        \"relative bg-card text-card-foreground border-y-6 border-foreground dark:border-ring p-0!\",\n        className\n      )}\n    >\n      <ShadcnCard\n        {...props}\n        className={cn(\n          \"rounded-none border-0 w-full! h-full flex flex-col bg-card text-card-foreground shadow-none\",\n          font !== \"normal\" && \"retro\",\n          className\n        )}\n      />\n\n      <div\n        className={cn(\"absolute inset-0 border-x-6 -mx-1.5 border-inherit pointer-events-none\")}\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n\nfunction CardHeader({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardHeader\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardTitle\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardDescription\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardAction\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardContent\n      className={cn(\"flex-1\", font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ ...props }: BitCardProps) {\n  const { className, font } = props;\n\n  return (\n    <ShadcnCardFooter\n      data-slot=\"card-footer\"\n      className={cn(font !== \"normal\" && \"retro\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n"}]}