// Card art — pure SVG generated per card
// Each suit has a distinct visual language; Majors get unique glyph compositions

window.CardArt = function CardArt({ card }) {
  if (card.suit === 'major') return React.createElement(MajorArt, { card });
  return React.createElement(MinorArt, { card });
};

function Glow({ children, color = '#f4d06f' }) {
  return React.createElement('g', { style: { filter: `drop-shadow(0 0 3px ${color})` } }, children);
}

// ===================== MAJOR ARCANA ART =====================
function MajorArt({ card }) {
  const id = card.id;
  // Each major gets a distinctive geometric + symbolic composition
  const composition = majorCompositions[id] || defaultMajor;
  return React.createElement('svg', {
    viewBox: '0 0 100 140', xmlns: 'http://www.w3.org/2000/svg'
  },
    React.createElement('defs', null,
      React.createElement('radialGradient', { id: `bg${id}`, cx: '50%', cy: '50%' },
        React.createElement('stop', { offset: '0%', stopColor: '#2d1b4e', stopOpacity: 0.9 }),
        React.createElement('stop', { offset: '100%', stopColor: '#0a0618', stopOpacity: 1 })
      ),
      React.createElement('filter', { id: `glow${id}` },
        React.createElement('feGaussianBlur', { stdDeviation: '1.2', result: 'blur' }),
        React.createElement('feMerge', null,
          React.createElement('feMergeNode', { in: 'blur' }),
          React.createElement('feMergeNode', { in: 'SourceGraphic' })
        )
      )
    ),
    React.createElement('rect', { x: 2, y: 2, width: 96, height: 136, fill: `url(#bg${id})` }),
    // starfield
    ...starfieldDots(id, 12),
    // Roman numeral top
    React.createElement('text', {
      x: 50, y: 14, textAnchor: 'middle', fill: '#d4af37',
      fontFamily: 'Cinzel, serif', fontSize: 7, letterSpacing: 1
    }, card.number),
    // central composition
    React.createElement('g', { transform: 'translate(50, 70)', filter: `url(#glow${id})` },
      composition(card)
    ),
    // bottom ornament
    React.createElement('path', {
      d: 'M 20 124 Q 50 118, 80 124', stroke: '#d4af37', strokeWidth: 0.5, fill: 'none', opacity: 0.6
    }),
    React.createElement('circle', { cx: 50, cy: 124, r: 1, fill: '#f4d06f' })
  );
}

function starfieldDots(seed, count) {
  const rng = mulberry(seed * 7 + 1);
  const dots = [];
  for (let i = 0; i < count; i++) {
    const x = 5 + rng() * 90;
    const y = 20 + rng() * 100;
    const r = 0.3 + rng() * 0.5;
    dots.push(React.createElement('circle', {
      key: `s${i}`, cx: x, cy: y, r, fill: '#f4d06f', opacity: 0.3 + rng() * 0.4
    }));
  }
  return dots;
}

function mulberry(seed) {
  let s = seed >>> 0;
  return () => {
    s = (s + 0x6D2B79F5) >>> 0;
    let t = s;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

// helper primitives
const gold = '#d4af37', goldB = '#f4d06f', purple = '#6b4ba3', ember = '#ff9a3c';
function circ(cx, cy, r, opts = {}) {
  return React.createElement('circle', { cx, cy, r, fill: 'none', stroke: gold, strokeWidth: 0.6, ...opts });
}
function line(x1, y1, x2, y2, opts = {}) {
  return React.createElement('line', { x1, y1, x2, y2, stroke: gold, strokeWidth: 0.6, ...opts });
}
function poly(points, opts = {}) {
  return React.createElement('polygon', { points, fill: 'none', stroke: gold, strokeWidth: 0.6, ...opts });
}
function path(d, opts = {}) {
  return React.createElement('path', { d, fill: 'none', stroke: gold, strokeWidth: 0.6, ...opts });
}
function txt(x, y, t, size = 8) {
  return React.createElement('text', { x, y, textAnchor: 'middle', fill: goldB, fontSize: size, fontFamily: 'Cinzel, serif' }, t);
}

// Astro glyphs as text (using unicode)
const glyphs = {
  sun: '☉', moon: '☽', mercury: '☿', venus: '♀', mars: '♂',
  jupiter: '♃', saturn: '♄', uranus: '♅', neptune: '♆', pluto: '♇',
  aries: '♈', taurus: '♉', gemini: '♊', cancer: '♋',
  leo: '♌', virgo: '♍', libra: '♎', scorpio: '♏',
  sagittarius: '♐', capricorn: '♑', aquarius: '♒', pisces: '♓',
  earth: '🜃', air: '🜁', fire: '🜂', water: '🜄'
};

// ---- Unique compositions per Major ----
const majorCompositions = {
  0: (c) => [ // Fool — cliff edge, sun, wanderer
    circ(0, 0, 18, { opacity: 0.4 }),
    circ(0, 0, 14, { strokeDasharray: '1 2', opacity: 0.7 }),
    txt(0, 2, glyphs.uranus, 10),
    line(-22, 20, 22, 20, { opacity: 0.5 }),
    circ(-22, 20, 2, { fill: goldB }),
    circ(22, 20, 2, { fill: goldB })
  ],
  1: (c) => [ // Magician — infinity, four tools
    path('M -16 0 Q -10 -8, -4 0 T 8 0 Q 14 8, 20 0', { strokeWidth: 0.8 }),
    path('M -16 0 Q -10 8, -4 0', { strokeWidth: 0.8 }),
    // four tools: wand, cup, sword, pentacle
    line(-20, -22, -12, -14, { strokeWidth: 1 }), // wand
    circ(12, -18, 5), // cup ring
    line(0, -26, 0, -14, { strokeWidth: 1 }), // sword
    circ(20, -18, 4),
    poly('17,-18 23,-18 20,-13 20,-22', { fill: gold, opacity: 0.3 })
  ],
  2: (c) => [ // High Priestess — crescent moons, veil
    path('M -14 -8 A 14 14 0 1 0 14 -8', { strokeWidth: 0.8 }),
    path('M -8 -8 A 8 14 0 1 0 8 -8', { strokeWidth: 0.6, opacity: 0.5 }),
    circ(0, 6, 12, { opacity: 0.5 }),
    txt(0, 9, glyphs.moon, 10),
    // pillars
    line(-22, -22, -22, 22), line(22, -22, 22, 22),
    circ(-22, -22, 1.5, { fill: gold }), circ(22, -22, 1.5, { fill: gold })
  ],
  3: (c) => [ // Empress — venus, wheat
    txt(0, 3, glyphs.venus, 18),
    path('M -18 18 Q -15 10, -18 2 M 18 18 Q 15 10, 18 2', { strokeWidth: 0.5 }),
    path('M -16 10 L -12 6 M -20 10 L -16 6 M 16 10 L 12 6 M 20 10 L 16 6', { strokeWidth: 0.4 }),
    circ(0, -18, 3, { fill: goldB, opacity: 0.6 })
  ],
  4: (c) => [ // Emperor — throne geometry, ram horns
    poly('-16,-20 16,-20 20,-8 0,-14 -20,-8', { strokeWidth: 0.8 }),
    path('M -20 -8 L -20 18 L 20 18 L 20 -8', { strokeWidth: 0.8 }),
    circ(0, 4, 6),
    txt(0, 7, glyphs.aries, 8),
    line(-16, 18, -16, 22), line(16, 18, 16, 22)
  ],
  5: (c) => [ // Hierophant — triple cross
    line(0, -22, 0, 22, { strokeWidth: 1 }),
    line(-10, -12, 10, -12), line(-14, 0, 14, 0), line(-10, 12, 10, 12),
    circ(0, -22, 2, { fill: goldB }),
    txt(-18, 18, glyphs.taurus, 6), txt(18, 18, glyphs.taurus, 6)
  ],
  6: (c) => [ // Lovers — two interlocked rings, sun
    circ(-7, 3, 10), circ(7, 3, 10),
    circ(0, -18, 4, { fill: goldB, opacity: 0.5 }),
    path('M -4 -18 L -8 -22 M 0 -24 L 0 -28 M 4 -18 L 8 -22 M -4 -14 L -8 -12 M 4 -14 L 8 -12 M 0 -12 L 0 -10', { strokeWidth: 0.5 }),
    txt(0, -16, glyphs.gemini, 7)
  ],
  7: (c) => [ // Chariot — star canopy, wheels
    poly('-22,-6 22,-6 18,8 -18,8', { strokeWidth: 0.8 }),
    circ(-16, 14, 5), circ(16, 14, 5),
    circ(-16, 14, 2, { fill: gold }), circ(16, 14, 2, { fill: gold }),
    // stars
    txt(-10, -14, '✦', 5), txt(0, -18, '✦', 7), txt(10, -14, '✦', 5),
    txt(0, 3, glyphs.cancer, 8)
  ],
  8: (c) => [ // Strength — infinity + lion/leo
    path('M -14 0 Q -8 -8, -2 0 T 10 0 Q 16 8, 22 0 Q 16 -8, 10 0 M -14 0 Q -8 8, -2 0', { strokeWidth: 0.8 }),
    circ(0, 0, 20, { strokeDasharray: '1 2', opacity: 0.4 }),
    txt(0, 18, glyphs.leo, 10)
  ],
  9: (c) => [ // Hermit — lantern with hex star
    circ(0, -4, 10),
    poly('0,-14 3,-7 10,-6 4,-1 7,7 0,3 -7,7 -4,-1 -10,-6 -3,-7', { fill: goldB, opacity: 0.4 }),
    line(0, 6, 0, 18, { strokeWidth: 1 }),
    line(-4, 18, 4, 18, { strokeWidth: 1 }),
    txt(0, -3, glyphs.virgo, 7)
  ],
  10: (c) => [ // Wheel — eight-spoked wheel
    circ(0, 0, 20),
    circ(0, 0, 14, { strokeDasharray: '1 1' }),
    circ(0, 0, 6),
    ...Array.from({ length: 8 }, (_, i) => {
      const a = (i * Math.PI) / 4;
      return line(Math.cos(a) * 6, Math.sin(a) * 6, Math.cos(a) * 20, Math.sin(a) * 20, { key: `sp${i}` });
    }),
    txt(0, 3, glyphs.jupiter, 7)
  ],
  11: (c) => [ // Justice — scales
    line(0, -18, 0, 10, { strokeWidth: 0.8 }),
    line(-16, -12, 16, -12, { strokeWidth: 0.8 }),
    circ(-16, -6, 5), circ(16, -6, 5),
    line(-16, -12, -16, -1), line(16, -12, 16, -1),
    circ(0, -18, 2, { fill: gold }),
    txt(0, 18, glyphs.libra, 8)
  ],
  12: (c) => [ // Hanged Man — inverted triangle + halo
    poly('0,20 -18,-10 18,-10', { strokeWidth: 0.8 }),
    circ(0, -14, 8),
    circ(0, -14, 12, { strokeDasharray: '1 2', opacity: 0.5 }),
    line(-18, -10, 18, -10, { strokeWidth: 0.8 }),
    txt(0, -11, glyphs.neptune, 7)
  ],
  13: (c) => [ // Death — scythe, skull outline
    path('M -15 -18 Q -20 -14, -16 -6 Q -12 -2, -8 -6 Q -12 -14, -15 -18 Z'),
    circ(0, 4, 10),
    path('M -4 2 Q -4 6, -2 6 M 4 2 Q 4 6, 2 6 M -4 10 L 4 10', { strokeWidth: 0.5 }),
    line(-8, -4, 20, 20, { strokeWidth: 0.8 }),
    txt(0, 20, glyphs.scorpio, 7)
  ],
  14: (c) => [ // Temperance — two cups mixing
    path('M -14 -12 L -8 -12 L -6 6 L -16 6 Z'),
    path('M 8 -12 L 14 -12 L 16 6 L 6 6 Z'),
    path('M -8 -6 Q 0 -12, 8 -6', { strokeDasharray: '1 1', opacity: 0.7 }),
    path('M -8 0 Q 0 -6, 8 0', { strokeDasharray: '1 1', opacity: 0.7 }),
    circ(0, 14, 4),
    txt(0, 17, glyphs.sagittarius, 6)
  ],
  15: (c) => [ // Devil — inverted pentagram, horns
    poly('0,-20 5,-6 19,-6 8,4 12,18 0,10 -12,18 -8,4 -19,-6 -5,-6', { strokeWidth: 0.6, stroke: ember }),
    circ(0, 0, 22, { strokeDasharray: '1 2', opacity: 0.4 }),
    // horns
    path('M -10 -18 Q -14 -24, -12 -28 M 10 -18 Q 14 -24, 12 -28', { strokeWidth: 0.8 }),
    txt(0, 20, glyphs.capricorn, 7)
  ],
  16: (c) => [ // Tower — lightning bolt shattering tower
    path('M -10 -20 L 10 -20 L 10 20 L -10 20 Z', { strokeWidth: 0.8 }),
    path('M -10 -14 L 10 -14 M -10 -4 L 10 -4 M -10 8 L 10 8', { opacity: 0.5 }),
    poly('2,-26 -4,-4 4,-4 -2,20', { fill: ember, stroke: goldB, strokeWidth: 0.6 }),
    circ(-16, -18, 1, { fill: goldB }),
    circ(16, -22, 1, { fill: goldB })
  ],
  17: (c) => [ // Star — seven-pointed star with central big star
    ...Array.from({ length: 7 }, (_, i) => {
      const a = (i * Math.PI * 2) / 7 - Math.PI / 2;
      return txt(Math.cos(a) * 18, Math.sin(a) * 18 + 2, '✦', 5);
    }),
    txt(0, 4, '✦', 14),
    circ(0, 0, 22, { strokeDasharray: '2 2', opacity: 0.3 }),
    txt(0, 24, glyphs.aquarius, 6)
  ],
  18: (c) => [ // Moon — crescent + towers
    path('M -6 -12 A 14 14 0 1 0 -6 12', { strokeWidth: 0.8 }),
    path('M -2 -10 A 10 10 0 1 0 -2 10', { strokeWidth: 0.6, opacity: 0.5 }),
    line(-22, 16, -22, 8), line(22, 16, 22, 8),
    poly('-24,8 -22,4 -20,8'), poly('24,8 22,4 20,8'),
    // droplets
    circ(-10, 20, 1, { fill: goldB }), circ(10, 20, 1, { fill: goldB }),
    txt(0, 22, glyphs.pisces, 6)
  ],
  19: (c) => [ // Sun — radiant sun with rays
    circ(0, 0, 12, { fill: goldB, opacity: 0.3 }),
    circ(0, 0, 8),
    ...Array.from({ length: 12 }, (_, i) => {
      const a = (i * Math.PI) / 6;
      const straight = i % 2 === 0;
      if (straight) {
        return line(Math.cos(a) * 14, Math.sin(a) * 14, Math.cos(a) * 22, Math.sin(a) * 22, { key: `r${i}`, strokeWidth: 1 });
      } else {
        return path(`M ${Math.cos(a)*14} ${Math.sin(a)*14} Q ${Math.cos(a+0.1)*18} ${Math.sin(a+0.1)*18}, ${Math.cos(a)*22} ${Math.sin(a)*22}`, { key: `r${i}` });
      }
    }),
    txt(0, 2, glyphs.sun, 8)
  ],
  20: (c) => [ // Judgement — trumpet + flag + cross
    path('M -18 -6 L 6 -10 L 10 -6 L 6 -2 L -18 -6 Z', { strokeWidth: 0.6 }),
    line(10, -6, 20, -12),
    poly('12,-16 22,-16 22,-8 12,-8', { opacity: 0.6 }),
    line(16, -16, 20, -12, { strokeWidth: 0.5 }), line(16, -8, 20, -12, { strokeWidth: 0.5 }),
    // rising figures
    circ(-10, 16, 3), circ(0, 12, 3), circ(10, 16, 3),
    txt(0, 26, glyphs.pluto, 6)
  ],
  21: (c) => [ // World — wreath with 4 creatures
    circ(0, 0, 16),
    circ(0, 0, 12, { strokeDasharray: '1 1' }),
    poly('-4,-4 4,-4 4,6 -4,6', { opacity: 0.5 }),
    txt(0, -22, '♉', 6), txt(22, 2, '♌', 6), txt(-22, 2, '♒', 6), txt(0, 26, '♏', 6)
  ]
};
const defaultMajor = (c) => [circ(0, 0, 16), txt(0, 3, '✦', 10)];

// ===================== MINOR ARCANA ART =====================
function MinorArt({ card }) {
  const id = card.id;
  return React.createElement('svg', {
    viewBox: '0 0 100 140', xmlns: 'http://www.w3.org/2000/svg'
  },
    React.createElement('defs', null,
      React.createElement('radialGradient', { id: `mbg${id}`, cx: '50%', cy: '50%' },
        React.createElement('stop', { offset: '0%', stopColor: suitBg(card.suit), stopOpacity: 0.9 }),
        React.createElement('stop', { offset: '100%', stopColor: '#0a0618', stopOpacity: 1 })
      )
    ),
    React.createElement('rect', { x: 2, y: 2, width: 96, height: 136, fill: `url(#mbg${id})` }),
    ...starfieldDots(id, 8),
    React.createElement('text', {
      x: 50, y: 14, textAnchor: 'middle', fill: gold, fontSize: 6,
      fontFamily: 'Cinzel, serif', letterSpacing: 1
    }, suitSymbol(card.suit) + ' ' + rankLabel(card.number)),
    React.createElement('g', { transform: 'translate(50, 72)' },
      minorComposition(card)
    )
  );
}

function suitBg(suit) {
  return { wands: '#2d1020', cups: '#10233a', swords: '#1a2230', pentacles: '#1a2818' }[suit] || '#1a0f2e';
}
function suitSymbol(suit) {
  return { wands: '🜂', cups: '🜄', swords: '🜁', pentacles: '🜃' }[suit];
}
function rankLabel(num) {
  const map = { Ace: 'I', '2': 'II', '3': 'III', '4': 'IV', '5': 'V', '6': 'VI', '7': 'VII', '8': 'VIII', '9': 'IX', '10': 'X', Page: 'PAGE', Knight: 'KNIGHT', Queen: 'QUEEN', King: 'KING' };
  return map[num] || num;
}

// Suit glyph renderers
function Wand({ x, y, size = 1, ang = 0 }) {
  return React.createElement('g', { transform: `translate(${x},${y}) rotate(${ang}) scale(${size})` },
    React.createElement('line', { x1: -8, y1: 6, x2: 8, y2: -6, stroke: '#8b5a2b', strokeWidth: 2 }),
    React.createElement('circle', { cx: 8, cy: -6, r: 1.5, fill: ember }),
    React.createElement('circle', { cx: -8, cy: 6, r: 1.5, fill: ember }),
    // sprouts
    React.createElement('path', { d: 'M 0 0 L -3 -4 M 0 0 L 3 4', stroke: '#5a8a3a', strokeWidth: 0.6, fill: 'none' })
  );
}
function Cup({ x, y, size = 1 }) {
  return React.createElement('g', { transform: `translate(${x},${y}) scale(${size})` },
    React.createElement('path', { d: 'M -6 -4 L 6 -4 L 5 4 Q 0 7, -5 4 Z', fill: 'none', stroke: goldB, strokeWidth: 0.8 }),
    React.createElement('ellipse', { cx: 0, cy: -4, rx: 6, ry: 1.5, fill: 'none', stroke: goldB, strokeWidth: 0.6 }),
    React.createElement('line', { x1: -2, y1: 4, x2: -2, y2: 7, stroke: goldB, strokeWidth: 0.5 }),
    React.createElement('line', { x1: 2, y1: 4, x2: 2, y2: 7, stroke: goldB, strokeWidth: 0.5 }),
    React.createElement('line', { x1: -3, y1: 7, x2: 3, y2: 7, stroke: goldB, strokeWidth: 0.5 })
  );
}
function Sword({ x, y, size = 1, ang = 0 }) {
  return React.createElement('g', { transform: `translate(${x},${y}) rotate(${ang}) scale(${size})` },
    React.createElement('line', { x1: 0, y1: -8, x2: 0, y2: 6, stroke: '#d4e4f0', strokeWidth: 1 }),
    React.createElement('line', { x1: -4, y1: 6, x2: 4, y2: 6, stroke: gold, strokeWidth: 1 }),
    React.createElement('circle', { cx: 0, cy: 9, r: 1.2, fill: gold }),
    React.createElement('polygon', { points: '0,-10 -1.5,-7 1.5,-7', fill: '#d4e4f0' })
  );
}
function Pentacle({ x, y, size = 1 }) {
  const r = 5 * size;
  return React.createElement('g', { transform: `translate(${x},${y})` },
    React.createElement('circle', { cx: 0, cy: 0, r, fill: 'none', stroke: goldB, strokeWidth: 0.8 }),
    React.createElement('circle', { cx: 0, cy: 0, r: r - 1, fill: gold, opacity: 0.15 }),
    React.createElement('polygon', {
      points: pentPoints(r * 0.7),
      fill: 'none', stroke: goldB, strokeWidth: 0.6
    })
  );
}
function pentPoints(r) {
  const pts = [];
  for (let i = 0; i < 5; i++) {
    const a = (i * Math.PI * 2) / 5 - Math.PI / 2;
    pts.push(`${(Math.cos(a) * r).toFixed(1)},${(Math.sin(a) * r).toFixed(1)}`);
  }
  // star connects every 2
  const order = [0, 2, 4, 1, 3];
  return order.map(i => pts[i]).join(' ');
}

function suitRenderer(suit) {
  return { wands: Wand, cups: Cup, swords: Sword, pentacles: Pentacle }[suit];
}

// Arrangements by rank — same count as number, creative layouts
function minorComposition(card) {
  const R = suitRenderer(card.suit);
  const n = card.number;

  // Court cards get throne/figure compositions
  if (['Page', 'Knight', 'Queen', 'King'].includes(n)) {
    return courtComposition(card, R);
  }

  // Number cards — positioned layout
  const positions = numberPositions(n);
  return [
    // backdrop ornament
    React.createElement('circle', { key: 'bg', cx: 0, cy: 0, r: 32, fill: 'none', stroke: gold, strokeWidth: 0.3, strokeDasharray: '1 2', opacity: 0.5 }),
    ...positions.map((p, i) => React.createElement('g', { key: `p${i}`, style: { filter: 'drop-shadow(0 0 2px rgba(244,208,111,0.5))' } },
      React.createElement(R, { x: p[0], y: p[1], size: p[2] || 1, ang: p[3] || 0 })
    ))
  ];
}

function numberPositions(num) {
  switch(num) {
    case 'Ace': return [[0, 0, 1.8]];
    case '2': return [[-10, 0], [10, 0]];
    case '3': return [[-12, -8], [12, -8], [0, 10]];
    case '4': return [[-12, -10], [12, -10], [-12, 10], [12, 10]];
    case '5': return [[-14, -10], [14, -10], [0, 0], [-14, 12], [14, 12]];
    case '6': return [[-14, -12], [14, -12], [-14, 0], [14, 0], [-14, 12], [14, 12]];
    case '7': return [[-14, -14], [0, -10], [14, -14], [-14, 2], [14, 2], [-7, 14], [7, 14]];
    case '8': return [[-14, -14], [14, -14], [-14, -2], [14, -2], [-14, 10], [14, 10], [0, -8], [0, 14]];
    case '9': return [[-14, -14], [0, -14], [14, -14], [-14, 0], [0, 0], [14, 0], [-14, 14], [0, 14], [14, 14]];
    case '10': return [[-14, -16], [0, -18], [14, -16], [-12, -6], [12, -6], [-14, 6], [0, 6], [14, 6], [-7, 18], [7, 18]];
    default: return [[0, 0, 1.5]];
  }
}

function courtComposition(card, R) {
  const rank = card.number;
  const scale = { Page: 1.3, Knight: 1.5, Queen: 1.7, King: 1.8 }[rank];
  // decorative throne/crown arch
  return [
    // halo
    React.createElement('circle', { key: 'halo', cx: 0, cy: -2, r: 24, fill: 'none', stroke: gold, strokeWidth: 0.4, strokeDasharray: '1 1', opacity: 0.4 }),
    // throne arch
    React.createElement('path', { key: 'arch', d: 'M -22 20 L -22 -10 Q -22 -22, 0 -24 Q 22 -22, 22 -10 L 22 20', fill: 'none', stroke: gold, strokeWidth: 0.6, opacity: 0.6 }),
    // crown/tier markers
    ...(rank === 'King' || rank === 'Queen' ? [
      React.createElement('polygon', { key: 'crown', points: '-14,-20 -7,-28 0,-22 7,-28 14,-20', fill: 'none', stroke: goldB, strokeWidth: 0.6 }),
      React.createElement('circle', { key: 'c1', cx: -7, cy: -28, r: 1, fill: goldB }),
      React.createElement('circle', { key: 'c2', cx: 7, cy: -28, r: 1, fill: goldB }),
      React.createElement('circle', { key: 'c3', cx: 0, cy: -22, r: 1.2, fill: goldB })
    ] : []),
    // central emblem
    React.createElement('g', { key: 'emblem', style: { filter: 'drop-shadow(0 0 4px rgba(244,208,111,0.7))' } },
      React.createElement(R, { x: 0, y: 0, size: scale })
    ),
    // rank label inside
    React.createElement('text', { key: 'rank', x: 0, y: 22, textAnchor: 'middle', fill: gold, fontSize: 5, fontFamily: 'Cinzel, serif', letterSpacing: 1 }, rank.toUpperCase())
  ];
}

// Card back for modal and reading decks
window.CardBack = function CardBack() {
  return React.createElement('svg', { viewBox: '0 0 100 140', xmlns: 'http://www.w3.org/2000/svg', style: { width: '100%', height: '100%' } },
    React.createElement('defs', null,
      React.createElement('pattern', { id: 'weave', x: 0, y: 0, width: 10, height: 10, patternUnits: 'userSpaceOnUse' },
        React.createElement('path', { d: 'M 0 5 L 5 0 L 10 5 L 5 10 Z', fill: 'none', stroke: gold, strokeWidth: 0.4, opacity: 0.4 })
      )
    ),
    React.createElement('rect', { x: 2, y: 2, width: 96, height: 136, fill: '#140930' }),
    React.createElement('rect', { x: 2, y: 2, width: 96, height: 136, fill: 'url(#weave)' }),
    React.createElement('rect', { x: 6, y: 6, width: 88, height: 128, fill: 'none', stroke: gold, strokeWidth: 0.5 }),
    React.createElement('text', { x: 50, y: 74, textAnchor: 'middle', fill: goldB, fontSize: 20, style: { filter: 'drop-shadow(0 0 6px #f4d06f)' } }, '✦'),
    React.createElement('circle', { cx: 50, cy: 70, r: 20, fill: 'none', stroke: gold, strokeWidth: 0.5, opacity: 0.6 }),
    React.createElement('circle', { cx: 50, cy: 70, r: 28, fill: 'none', stroke: gold, strokeWidth: 0.3, opacity: 0.4 })
  );
};

Object.assign(window, { CardArt: window.CardArt, CardBack: window.CardBack });