// Ported from pizza-codex/src/ui/art/cardArt.tsx — TypeScript types removed,
// imports replaced with window globals (window.P), exports attached at end.
var P = window.P;

const FAMILY_COLORS = {
  dough: { base: P.doughBase, deep: P.doughDeep, ink: P.brown },
  sauce: { base: P.sauceBase, deep: P.sauceDeep, ink: P.brown },
  topping: { base: P.toppingBase, deep: P.toppingDeep, ink: P.brown },
  pizza: { base: P.pizzaBase, deep: P.pizzaDeep, ink: P.brown },
  tool: { base: P.toolBase, deep: P.toolDeep, ink: P.brown },
  disaster: { base: P.disasterBase, deep: P.disasterDeep, ink: P.cream },
  joker: { base: P.jokerBase, deep: P.jokerDeep, ink: P.brown },
};

const FlourArt = () => (
  <g transform="translate(32,46)">
    <path d="M -14 8 Q -14 -4, -10 -10 L 10 -10 Q 14 -4, 14 8 Q 10 12, 0 12 Q -10 12, -14 8 Z" fill={P.cream} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <path d="M -10 -10 L -8 -14 L 8 -14 L 10 -10 Z" fill={P.creamDark} stroke={P.brown} strokeWidth="1.5" strokeLinejoin="round" />
    <text x="0" y="4" fill={P.brown} fontSize="7" fontWeight="800" textAnchor="middle" fontFamily="system-ui">UN</text>
  </g>
);
const WaterArt = () => (
  <g transform="translate(32,46)">
    <path d="M 0 -14 Q 10 -2, 10 4 Q 10 12, 0 12 Q -10 12, -10 4 Q -10 -2, 0 -14 Z" fill="#6BB8E8" stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <path d="M -4 2 Q -2 6, 2 4" stroke={P.cream} strokeWidth="1.5" fill="none" strokeLinecap="round" />
  </g>
);
const YeastArt = () => (
  <g transform="translate(32,46)">
    <rect x="-10" y="-8" width="20" height="18" rx="2" fill={P.orangeLite} stroke={P.brown} strokeWidth="2" />
    <path d="M -6 -8 Q 0 -14, 6 -8" fill={P.yellow} stroke={P.brown} strokeWidth="1.8" strokeLinejoin="round" />
    <circle cx="-3" cy="0" r="1.4" fill={P.brown} opacity="0.5" />
    <circle cx="3" cy="3" r="1.2" fill={P.brown} opacity="0.5" />
    <circle cx="0" cy="-2" r="1.1" fill={P.brown} opacity="0.4" />
  </g>
);
const TomatoArt = () => (
  <g transform="translate(32,46)">
    <circle r="13" fill={P.red} stroke={P.brown} strokeWidth="2" />
    <path d="M -3 -12 Q 0 -15, 3 -12 L 3 -11 Q 0 -10, -3 -11 Z" fill={P.green} stroke={P.brown} strokeWidth="1.5" strokeLinejoin="round" />
    <path d="M -6 -2 Q -4 2, -1 0" stroke={P.cream} strokeWidth="1.5" fill="none" strokeLinecap="round" />
  </g>
);
const SpiceArt = () => (
  <g transform="translate(32,46)">
    <path d="M -8 -12 L 8 -12 L 10 10 Q 0 14, -10 10 Z" fill={P.brownLite} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <rect x="-6" y="-14" width="12" height="4" rx="1" fill={P.brown} />
    <circle cx="-2" cy="-2" r="1" fill={P.yellow} />
    <circle cx="3" cy="2" r="1" fill={P.yellow} />
    <circle cx="0" cy="6" r="1" fill={P.yellow} />
  </g>
);
const OliveOilArt = () => (
  <g transform="translate(32,46)">
    <path d="M -6 -12 L 6 -12 L 8 -4 Q 8 10, 0 10 Q -8 10, -8 -4 Z" fill={P.greenLite} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <rect x="-3" y="-14" width="6" height="4" fill={P.brown} />
    <ellipse cx="0" cy="2" rx="4" ry="6" fill={P.green} opacity="0.7" />
  </g>
);
const PepperoniArt = () => (
  <g transform="translate(32,46)">
    <circle r="15" fill={P.orangeLite} stroke={P.brown} strokeWidth="2" />
    <circle r="11" fill={P.yellow} />
    <circle cx="-5" cy="-4" r="2.8" fill={P.red} stroke={P.brown} strokeWidth="1" />
    <circle cx="5" cy="-5" r="2.8" fill={P.red} stroke={P.brown} strokeWidth="1" />
    <circle cx="-6" cy="5" r="2.8" fill={P.red} stroke={P.brown} strokeWidth="1" />
    <circle cx="6" cy="5" r="2.8" fill={P.red} stroke={P.brown} strokeWidth="1" />
    <circle cx="0" cy="0" r="2.8" fill={P.red} stroke={P.brown} strokeWidth="1" />
  </g>
);
const MushroomArt = () => (
  <g transform="translate(32,46)">
    <path d="M -12 -2 Q -12 -14, 0 -14 Q 12 -14, 12 -2 Z" fill={P.cream} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <rect x="-5" y="-2" width="10" height="12" rx="2" fill={P.cream} stroke={P.brown} strokeWidth="2" />
    <circle cx="-6" cy="-7" r="2" fill={P.brownLite} />
    <circle cx="4" cy="-9" r="1.5" fill={P.brownLite} />
    <circle cx="6" cy="-5" r="1.8" fill={P.brownLite} />
  </g>
);
const OliveArt = () => (
  <g transform="translate(32,46)">
    <ellipse rx="13" ry="10" fill={P.brown} stroke={P.brown} strokeWidth="2" />
    <ellipse rx="5" ry="6" fill={P.red} stroke={P.cream} strokeWidth="1.2" />
    <circle cx="-4" cy="-3" r="1.2" fill={P.cream} opacity="0.5" />
  </g>
);
const PepperArt = () => (
  <g transform="translate(32,46)">
    <path d="M -11 -4 Q -13 10, -5 12 Q 0 13, 5 12 Q 13 10, 11 -4 Q 8 -6, 0 -5 Q -8 -6, -11 -4 Z" fill={P.green} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <rect x="-2" y="-10" width="4" height="6" rx="1" fill={P.brownLite} stroke={P.brown} strokeWidth="1.5" />
    <path d="M -4 0 Q 0 6, 4 0" stroke={P.brown} strokeWidth="1" fill="none" opacity="0.4" />
  </g>
);
const OvenArt = () => (
  <g transform="translate(32,46)">
    <rect x="-14" y="-10" width="28" height="20" rx="3" fill={P.brownLite} stroke={P.brown} strokeWidth="2" />
    <rect x="-10" y="-6" width="20" height="12" rx="2" fill={P.orange} stroke={P.brown} strokeWidth="1.5" />
    <path d="M -6 -2 Q -2 4, 2 -2 Q 4 2, 6 -1" stroke={P.red} strokeWidth="1.8" fill="none" strokeLinecap="round" />
    <circle cx="-11" cy="-12" r="1.2" fill={P.yellow} />
    <circle cx="11" cy="-12" r="1.2" fill={P.yellow} />
  </g>
);
const DoughArt = () => (
  <g transform="translate(32,46)">
    <ellipse cx="0" cy="10" rx="18" ry="4" fill={P.brownLite} stroke={P.brown} strokeWidth="1.5" />
    <rect x="-18" y="-14" width="36" height="5" rx="2.5" fill={P.cream} stroke={P.brown} strokeWidth="1.5" />
    <rect x="-18" y="-14" width="4" height="5" fill={P.brownLite} stroke={P.brown} strokeWidth="1.2" />
    <rect x="14" y="-14" width="4" height="5" fill={P.brownLite} stroke={P.brown} strokeWidth="1.2" />
    <ellipse cx="0" cy="2" rx="14" ry="11" fill={P.cream} stroke={P.brown} strokeWidth="2" />
    <circle cx="-5" cy="-1" r="1.6" fill={P.brown} opacity="0.4" />
    <circle cx="5" cy="3" r="1.3" fill={P.brown} opacity="0.4" />
    <circle cx="-2" cy="6" r="1" fill={P.brown} opacity="0.3" />
    <circle cx="4" cy="-4" r="0.9" fill={P.brown} opacity="0.3" />
    <path d="M -8 -5 Q -4 -8, 0 -7" stroke={P.cream} strokeWidth="1.2" fill="none" opacity="0.9" />
  </g>
);
const SauceArt = () => (
  <g transform="translate(32,46)">
    <rect x="-5" y="-18" width="10" height="4" rx="1" fill={P.brown} />
    <rect x="-6" y="-14" width="12" height="3" fill={P.brownLite} stroke={P.brown} strokeWidth="0.8" />
    <rect x="-4" y="-11" width="8" height="3" fill={P.red} stroke={P.brown} strokeWidth="1" />
    <path d="M -9 -8 Q -10 -4, -10 0 L -10 11 Q -10 14, -7 14 L 7 14 Q 10 14, 10 11 L 10 0 Q 10 -4, 9 -8 Z" fill={P.red} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <rect x="-7" y="-4" width="14" height="10" fill={P.cream} stroke={P.brown} strokeWidth="1" />
    <text x="0" y="3.5" fontSize="6" fontWeight="900" fill={P.red} textAnchor="middle" fontFamily="system-ui">SOS</text>
    <path d="M -7 -3 Q -9 0, -8 8" stroke={P.cream} strokeWidth="1" fill="none" opacity="0.4" />
    <path d="M 6 -10 Q 9 -8, 8 -6" stroke={P.red} strokeWidth="1.2" fill="none" strokeLinecap="round" />
  </g>
);
const SliceArt = () => (
  <g transform="translate(32,46)">
    <path d="M 0 -14 L 14 10 Q 0 14, -14 10 Z" fill={P.orange} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
    <circle cx="-5" cy="-2" r="2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="5" cy="0" r="2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="0" cy="6" r="2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="-6" cy="6" r="1.2" fill={P.green} />
    <circle cx="6" cy="5" r="1.2" fill={P.green} />
  </g>
);
const FeastArt = () => (
  <g transform="translate(32,46)">
    <circle r="16" fill={P.orange} stroke={P.brown} strokeWidth="2.2" />
    <circle r="12" fill={P.yellow} />
    <circle cx="-7" cy="-5" r="2.2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="7" cy="-5" r="2.2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="-7" cy="5" r="2.2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="7" cy="5" r="2.2" fill={P.red} stroke={P.brown} strokeWidth="0.8" />
    <circle cx="0" cy="-8" r="1.6" fill={P.green} />
    <circle cx="0" cy="8" r="1.6" fill={P.green} />
    <circle cx="0" cy="0" r="1.8" fill={P.brownLite} />
  </g>
);
const JokerArt = () => (
  <g transform="translate(32,46)">
    <path d="M -6 -14 L -8 -10 L -12 -12 L -10 -6 L -14 -4 L -10 0 M 6 -14 L 8 -10 L 12 -12 L 10 -6 L 14 -4 L 10 0" stroke={P.yellow} strokeWidth="2" fill="none" strokeLinecap="round" />
    <circle cx="0" cy="-4" r="10" fill={P.skin} stroke={P.brown} strokeWidth="2" />
    <circle cx="-3" cy="-5" r="1.2" fill={P.brown} />
    <circle cx="3" cy="-5" r="1.2" fill={P.brown} />
    <path d="M -3 -1 Q 0 2, 3 -1" stroke={P.brown} strokeWidth="1.2" fill="none" />
    <rect x="-10" y="4" width="20" height="4" fill={P.red} stroke={P.brown} strokeWidth="1.5" />
  </g>
);
const HealthArt = () => (
  <g transform="translate(32,46)">
    <circle cx="-2" cy="-2" r="9" fill="none" stroke={P.cream} strokeWidth="2.5" />
    <line x1="5" y1="5" x2="12" y2="12" stroke={P.cream} strokeWidth="3" strokeLinecap="round" />
    <circle cx="-2" cy="-2" r="6" fill={P.yellow} opacity="0.8" />
  </g>
);
const MoldArt = () => (
  <g transform="translate(32,46)">
    <circle cx="-4" cy="-2" r="6" fill={P.green} stroke={P.brown} strokeWidth="1.6" />
    <circle cx="4" cy="0" r="5" fill={P.greenLite} stroke={P.brown} strokeWidth="1.6" />
    <circle cx="0" cy="6" r="4" fill={P.green} stroke={P.brown} strokeWidth="1.6" />
    <circle cx="-6" cy="5" r="2.5" fill={P.greenLite} stroke={P.brown} strokeWidth="1.2" />
    <circle cx="5" cy="-6" r="2.5" fill={P.green} stroke={P.brown} strokeWidth="1.2" />
  </g>
);
const RatArt = () => (
  <g transform="translate(32,46)">
    <ellipse cx="0" cy="2" rx="12" ry="8" fill={P.brownLite} stroke={P.brown} strokeWidth="2" />
    <circle cx="-10" cy="-2" r="5" fill={P.brownLite} stroke={P.brown} strokeWidth="2" />
    <circle cx="-14" cy="-4" r="2" fill={P.skin} stroke={P.brown} strokeWidth="1" />
    <circle cx="-12" cy="-2" r="0.8" fill={P.brown} />
    <circle cx="-14" cy="-5" r="0.6" fill={P.red} />
    <path d="M 10 2 Q 18 2, 16 8" stroke={P.brown} strokeWidth="2" fill="none" strokeLinecap="round" />
  </g>
);
const YelpArt = () => (
  <g transform="translate(32,46)">
    <path d="M 0 -12 L 3 -4 L 11 -3 L 5 3 L 7 11 L 0 7 L -7 11 L -5 3 L -11 -3 L -3 -4 Z" fill={P.yellow} stroke={P.brown} strokeWidth="1.8" strokeLinejoin="round" />
    <text x="0" y="2" fill={P.brown} fontSize="6" fontWeight="800" textAnchor="middle" fontFamily="system-ui">1★</text>
  </g>
);

const CARD_VISUALS = {
  flour: { label: 'F', Art: FlourArt, tag: 'Un', family: 'dough', tier: 'base' },
  water: { label: 'W', Art: WaterArt, tag: 'Su', family: 'dough', tier: 'base' },
  yeast: { label: 'Y', Art: YeastArt, tag: 'Maya', family: 'dough', tier: 'base' },
  dough: { label: 'D', Art: DoughArt, tag: 'Hamur', family: 'dough', tier: 'crafted' },
  tomatoes: { label: 'T', Art: TomatoArt, tag: 'Domates', family: 'sauce', tier: 'base' },
  secretSpiceMix: { label: 'S', Art: SpiceArt, tag: 'Baharat', family: 'sauce', tier: 'base' },
  oliveOil: { label: 'O', Art: OliveOilArt, tag: 'Yag', family: 'sauce', tier: 'base' },
  sauce: { label: 'SC', Art: SauceArt, tag: 'Sos', family: 'sauce', tier: 'crafted' },
  classicPepperoni: { label: 'P', Art: PepperoniArt, tag: 'Pepperoni', family: 'topping', tier: 'base' },
  mushrooms: { label: 'M', Art: MushroomArt, tag: 'Mantar', family: 'topping', tier: 'base' },
  blackOlives: { label: 'O', Art: OliveArt, tag: 'Zeytin', family: 'topping', tier: 'base' },
  greenPeppers: { label: 'B', Art: PepperArt, tag: 'Biber', family: 'topping', tier: 'base' },
  professionalOven: { label: 'OV', Art: OvenArt, tag: 'Firin', family: 'tool', tier: 'tool' },
  neighborhoodSlice: { label: '1P', Art: SliceArt, tag: 'Dilim', family: 'pizza', tier: 'pizzaMid' },
  familyFeast: { label: '3P', Art: FeastArt, tag: 'Ziyafet', family: 'pizza', tier: 'pizzaTop' },
  healthInspection: { label: '!', Art: HealthArt, tag: 'Denetim', family: 'disaster', tier: 'disaster' },
  mold: { label: 'X', Art: MoldArt, tag: 'Kuf', family: 'disaster', tier: 'disaster' },
  nycRat: { label: 'R', Art: RatArt, tag: 'Fare', family: 'disaster', tier: 'disaster' },
  badYelpReview: { label: '1*', Art: YelpArt, tag: 'Yelp', family: 'disaster', tier: 'disaster' },
  jokerChef: { label: 'J', Art: JokerArt, tag: 'Joker', family: 'joker', tier: 'joker' },
};

function TierDecor({ tier, family, uid }) {
  const c = FAMILY_COLORS[family];
  if (tier === 'base') {
    return (
      <g>
        <path d="M 4 18 L 18 4" stroke={c.deep} strokeWidth="1" opacity="0.35" />
        <path d="M 46 84 L 60 70" stroke={c.deep} strokeWidth="1" opacity="0.35" />
      </g>
    );
  }
  if (tier === 'tool') {
    return (
      <g>
        <circle cx="8" cy="8" r="1.6" fill={P.goldDeep} stroke={P.brown} strokeWidth="0.6" />
        <circle cx="56" cy="8" r="1.6" fill={P.goldDeep} stroke={P.brown} strokeWidth="0.6" />
        <circle cx="8" cy="80" r="1.6" fill={P.goldDeep} stroke={P.brown} strokeWidth="0.6" />
        <circle cx="56" cy="80" r="1.6" fill={P.goldDeep} stroke={P.brown} strokeWidth="0.6" />
        <rect x="4" y="38" width="56" height="2" fill={c.deep} opacity="0.5" />
      </g>
    );
  }
  if (tier === 'disaster') {
    return (
      <g>
        <g opacity="0.85">
          {[0, 8, 16, 24, 32, 40, 48].map((x) => (
            <path key={`t-${x}`} d={`M ${4 + x} 4 L ${10 + x} 4 L ${4 + x} 10 L ${-2 + x} 10 Z`} fill={P.yellow} stroke={P.brown} strokeWidth="0.3" />
          ))}
        </g>
      </g>
    );
  }
  if (tier === 'joker') {
    return (
      <g>
        {[[10,10],[54,10],[10,78],[54,78]].map(([x,y],i)=>(
          <g key={i} transform={`translate(${x} ${y})`}>
            <path d="M 0 -3 L 3 0 L 0 3 L -3 0 Z" fill={P.cream} stroke={P.brown} strokeWidth="0.6" />
          </g>
        ))}
      </g>
    );
  }
  if (tier === 'crafted') {
    const rays = Array.from({ length: 16 }, (_, i) => i);
    return (
      <g>
        <defs>
          <radialGradient id={`cr-rad-${uid}`} cx="50%" cy="48%" r="60%">
            <stop offset="0%" stopColor={P.gold} stopOpacity="0.5" />
            <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect x="4" y="4" width="56" height="80" rx="5" fill={`url(#cr-rad-${uid})`} />
        <g transform="translate(32 42)" opacity="0.55">
          {rays.map((i) => (
            <rect key={i} x="-1.2" y="-28" width="2.4" height="20" fill={P.gold} transform={`rotate(${(360 / rays.length) * i})`} />
          ))}
        </g>
        <rect x="5.5" y="5.5" width={53} height={77} rx="5" fill="none" stroke={P.goldDeep} strokeWidth="0.8" />
        <rect x="7" y="7" width={50} height={74} rx="4" fill="none" stroke={P.gold} strokeWidth="1.8" />
        {[[8,8,0],[56,8,90],[56,80,180],[8,80,270]].map(([x,y,r],i)=>(
          <g key={i} transform={`translate(${x} ${y}) rotate(${r})`}>
            <path d="M 0 6 Q 6 6, 6 0" stroke={P.gold} strokeWidth="1.4" fill="none" />
            <circle cx="2" cy="2" r="1" fill={P.gold} stroke={P.brown} strokeWidth="0.4" />
          </g>
        ))}
        <g transform="translate(32 5)">
          <path d="M 0 -3 L 1.2 -0.8 L 3.6 -0.4 L 1.8 1.3 L 2.4 3.8 L 0 2.4 L -2.4 3.8 L -1.8 1.3 L -3.6 -0.4 L -1.2 -0.8 Z" fill={P.gold} stroke={P.brown} strokeWidth="0.5" />
        </g>
      </g>
    );
  }
  if (tier === 'pizzaMid') {
    const rays = Array.from({ length: 16 }, (_, i) => i);
    return (
      <g>
        <g transform="translate(32 42)" opacity="0.4">
          {rays.map((i) => (
            <rect key={i} x="-1" y="-28" width="2" height="20" fill={P.gold} transform={`rotate(${(360 / rays.length) * i})`} />
          ))}
        </g>
        <rect x="6" y="6" width={52} height={76} rx="5" fill="none" stroke={P.gold} strokeWidth="1.6" />
        <rect x="9" y="9" width={46} height={70} rx="3" fill="none" stroke={P.goldDeep} strokeWidth="0.8" />
        <path d="M 32 3 L 34 8 L 39 8 L 35 11 L 37 16 L 32 13 L 27 16 L 29 11 L 25 8 L 30 8 Z" fill={P.gold} stroke={P.brown} strokeWidth="0.6" />
        {[[8,8,0],[56,8,90],[56,80,180],[8,80,270]].map(([x,y,r],i)=>(
          <g key={i} transform={`translate(${x} ${y}) rotate(${r})`}>
            <path d="M 0 4 Q 4 4, 4 0" stroke={P.gold} strokeWidth="1.2" fill="none" />
          </g>
        ))}
      </g>
    );
  }
  if (tier === 'pizzaTop') {
    const rays = Array.from({ length: 20 }, (_, i) => i);
    return (
      <g>
        <defs>
          <radialGradient id={`pt-rad-${uid}`} cx="50%" cy="48%" r="60%">
            <stop offset="0%" stopColor={P.gold} stopOpacity="0.55" />
            <stop offset="100%" stopColor={P.gold} stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect x="4" y="4" width="56" height="80" rx="5" fill={`url(#pt-rad-${uid})`} />
        <g transform="translate(32 42)" opacity="0.55">
          {rays.map((i) => (
            <rect key={i} x="-1" y="-30" width="2" height="22" fill={P.gold} transform={`rotate(${(360 / rays.length) * i})`} />
          ))}
        </g>
        <rect x="5" y="5" width={54} height={78} rx="6" fill="none" stroke={P.goldDeep} strokeWidth="0.8" />
        <rect x="7" y="7" width={50} height={74} rx="4" fill="none" stroke={P.gold} strokeWidth="1.8" />
        <rect x="10" y="10" width={44} height={68} rx="3" fill="none" stroke={P.goldDeep} strokeWidth="0.8" strokeDasharray="2 2" />
        <g transform="translate(32 4)">
          <path d="M -8 6 L -8 2 L -4 5 L 0 0 L 4 5 L 8 2 L 8 6 Z" fill={P.gold} stroke={P.brown} strokeWidth="0.8" strokeLinejoin="round" />
          <circle cx="0" cy="0" r="1.2" fill={P.red} stroke={P.brown} strokeWidth="0.4" />
          <circle cx="-5" cy="3" r="1" fill={P.red} stroke={P.brown} strokeWidth="0.4" />
          <circle cx="5" cy="3" r="1" fill={P.red} stroke={P.brown} strokeWidth="0.4" />
        </g>
        {[[8,12],[56,12],[8,76],[56,76]].map(([x,y],i)=>(
          <g key={i} transform={`translate(${x} ${y})`}>
            <path d="M 0 -2.5 L 2.5 0 L 0 2.5 L -2.5 0 Z" fill={P.red} stroke={P.gold} strokeWidth="0.8" />
          </g>
        ))}
      </g>
    );
  }
  return null;
}

function CardFace({ kind, w = 64, h = 88 }) {
  const v = CARD_VISUALS[kind];
  const Art = v.Art;
  const c = FAMILY_COLORS[v.family];
  const uid = `${kind}-${w}-${h}`;
  const labelBg = v.tier === 'disaster' ? c.deep : P.cream;
  const labelInk = v.tier === 'disaster' ? P.cream : P.brown;
  const nameBg = v.tier === 'disaster' ? c.deep : P.cream;
  const nameInk = v.tier === 'disaster' ? P.cream : P.brown;
  const outerStroke = v.tier === 'pizzaTop' ? P.goldDeep : P.brown;

  return (
    <svg viewBox="0 0 64 88" width={w} height={h} preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={`bg-${uid}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={c.base} />
          <stop offset="100%" stopColor={c.deep} />
        </linearGradient>
      </defs>
      <rect x="1.25" y="1.25" width={61.5} height={85.5} rx="8" fill={P.cream} stroke={outerStroke} strokeWidth="2.5" />
      <rect x="4" y="4" width={56} height={80} rx="5" fill={`url(#bg-${uid})`} />
      <rect x="4" y="4" width={56} height={80} rx="5" fill="none" stroke={c.deep} strokeWidth="1" opacity="0.6" />
      <TierDecor tier={v.tier} family={v.family} uid={uid} />
      <rect x="4" y="4" width="16" height="14" rx="4" fill={labelBg} stroke={P.brown} strokeWidth="1.2" />
      <text x="12" y="14.5" fill={labelInk} fontSize="10" fontWeight="900" fontFamily="system-ui" textAnchor="middle" dominantBaseline="middle">{v.label}</text>
      <rect x={44} y={70} width="16" height="14" rx="4" fill={labelBg} stroke={P.brown} strokeWidth="1.2" transform={`rotate(180 52 77)`} />
      <text x={52} y={77} fill={labelInk} fontSize="10" fontWeight="900" fontFamily="system-ui" textAnchor="middle" dominantBaseline="middle" transform={`rotate(180 52 77)`}>{v.label}</text>
      <g transform="translate(32 42) scale(1.35) translate(-32 -42)">
        <Art />
      </g>
      <rect x="8" y="72" width="48" height="12" rx="5" fill={nameBg} stroke={P.brown} strokeWidth="1.2" />
      <text x="32" y="80.5" fill={nameInk} fontSize="8.5" fontWeight="900" fontFamily="system-ui" textAnchor="middle" dominantBaseline="middle" letterSpacing="0.4">{v.tag.toUpperCase()}</text>
    </svg>
  );
}

function CardBack({ variant = 'red', w = 64, h = 88 }) {
  const c = variant === 'mixed' ? { a: P.orange, c: P.green } : { a: P.red, c: P.yellow };
  const patternId = `diag-${variant}-${w}-${h}`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h} preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
      <defs>
        <pattern id={patternId} width="10" height="10" patternUnits="userSpaceOnUse">
          <rect width="10" height="10" fill={c.a} />
          <path d="M0 5 L5 0 L10 5 L5 10 Z" fill={c.c} />
          <path d="M0 5 L5 0 M5 0 L10 5 M10 5 L5 10 M5 10 L0 5" stroke={P.brown} strokeWidth="0.8" />
        </pattern>
      </defs>
      <rect x="1.25" y="1.25" width={w - 2.5} height={h - 2.5} rx="8" fill={P.cream} stroke={P.brown} strokeWidth="2.5" />
      <rect x="4" y="4" width={w - 8} height={h - 8} rx="5" fill={`url(#${patternId})`} />
      <rect x="4" y="4" width={w - 8} height={h - 8} rx="5" fill="none" stroke={P.brown} strokeWidth="1.5" />
    </svg>
  );
}

Object.assign(window, { CARD_VISUALS, CardFace, CardBack });
