jaml-ui 0.14.3 → 0.16.0

package/assets/Balatro Seed Curator (DesignsV2)/src/v2/SeedDetailV2.jsx

@@ -1,336 +0,0 @@
-// SeedDetailV2 — phone-size shell around AntePageV2 list.
-//   ┌──────────────────────┐
-//   │ TOP BAR              │  seed · deck/stake · per-clause score cols
-//   ├──────────────────────┤
-//   │ EDGE HIT PILLS       │  COD-style edge indicators for hits off-screen
-//   │                      │
-//   │  ante 1              │  scroll-snapped vertical list of AntePageV2
-//   │  ante 2              │
-//   │   …                  │
-//   │  ante 8              │
-//   └──────────────────────┘
-
-const { useState: sUS, useRef: sUR, useEffect: sUE, useLayoutEffect: sULE, useMemo: sUM, useCallback: sUCB } = React;
-const Cv = window.JimboColor;
-
-// ── ScoreChip — shoulds: bare sprite + count badge (count IS the data)
-//              · musts:   framed box with ✓/✗ (presence IS the data)
-function ScoreCol({ clause, hits }) {
-  const lit = hits > 0;
-  const must = clause._kind === 'must';
-  // Balatro metaphor: must = BLUE (chips, the base), should = RED (mult, the bonus)
-  const color = must ? Cv.BLUE : lit ? Cv.RED : Cv.GREY;
-
-  const spriteKind =
-    clause.type === 'joker' || clause.type === 'souljoker' ? 'jokers' :
-    clause.type === 'voucher' ? 'vouchers' :
-    clause.type === 'smallblindtag' || clause.type === 'bigblindtag' ? 'tags' :
-    clause.type === 'boss' ? 'blinds' : null;
-
-  const w = 30, h = spriteKind === 'tags' || spriteKind === 'blinds' ? 30 : 40;
-  const sprite = (
-    spriteKind === 'jokers'   ? <Sprite sheet="jokers" name={clause.value} width={w} height={h} /> :
-    spriteKind === 'vouchers' ? <Sprite sheet="vouchers" name={clause.value} width={w} height={h} /> :
-    spriteKind === 'tags'     ? <Sprite sheet="tags" name={clause.value} width={h} height={h} /> :
-    spriteKind === 'blinds'   ? <BossChip name={clause.value} size={h} /> : null
-  );
-
-  if (must) {
-    // Framed: the box + ✓/✗ IS the signal
-    return (
-      <div style={{
-        position: 'relative',
-        padding: '4px 4px 2px',
-        border: `2px solid ${lit ? color : Cv.DARK_GREY}`,
-        borderRadius: 5,
-        background: lit ? `${color}18` : Cv.DARKEST,
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        opacity: lit ? 1 : 0.6,
-      }}>
-        {sprite}
-        <div style={{
-          position: 'absolute', bottom: -8, left: '50%', transform: 'translateX(-50%)',
-          width: 16, height: 16,
-          background: Cv.DARKEST, border: `2px solid ${color}`, borderRadius: 8,
-          fontFamily: 'm6x11plus, monospace', fontSize: 11, lineHeight: '12px',
-          color, textAlign: 'center',
-        }}>
-          {lit ? '✓' : '✗'}
-        </div>
-      </div>
-    );
-  }
-  // Should: bare sprite + corner count
-  return (
-    <div style={{
-      position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
-      opacity: lit ? 1 : 0.4, filter: lit ? 'none' : 'grayscale(0.6)',
-    }}>
-      {sprite}
-      <div style={{
-        position: 'absolute', bottom: -4, right: -4,
-        minWidth: 16, height: 16, padding: '0 3px',
-        background: Cv.DARKEST,
-        fontFamily: 'm6x11plus, monospace', fontSize: 11, lineHeight: '16px',
-        color, textAlign: 'center',
-        borderRadius: 8,
-      }}>
-        ×{hits}
-      </div>
-    </div>
-  );
-}
-
-function TopBar({ seed, filter }) {
-  const allClauses = [...filter.must.map(c => ({ ...c, _kind: 'must' })), ...filter.should.map(c => ({ ...c, _kind: 'should' }))];
-  return (
-    <div style={{
-      background: Cv.DARKEST,
-      borderBottom: `2px solid ${Cv.BLACK}`,
-      padding: '8px 10px 8px',
-      position: 'sticky', top: 0, zIndex: 30,
-      boxShadow: '0 2px 0 #000',
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
-        <button style={btn}>
-          <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M9 2L4 7l5 5"/></svg>
-        </button>
-        <div style={{ textAlign: 'center', flex: 1 }}>
-          <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 18, color: Cv.WHITE, letterSpacing: 3, lineHeight: 1 }}>{seed.seed}</div>
-          <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 9, color: Cv.GREY, letterSpacing: 1.5, marginTop: 2 }}>{seed.deck} · {seed.stake} · score {seed.score.totalScore}</div>
-        </div>
-        <button style={btn}>
-          <svg width="12" height="12" viewBox="0 0 14 14" fill="currentColor"><circle cx="3" cy="7" r="1.3"/><circle cx="7" cy="7" r="1.3"/><circle cx="11" cy="7" r="1.3"/></svg>
-        </button>
-      </div>
-
-      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', alignItems: 'flex-end', padding: '0 4px' }}>
-        {allClauses.map(c => (
-          <ScoreCol key={c.id} clause={c} hits={seed.score.totals[c.id] || 0} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-const btn = {
-  width: 26, height: 26, border: `2px solid ${Cv.BLACK}`, borderRadius: 4, background: Cv.DARK_GREY,
-  color: Cv.WHITE, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
-  boxShadow: `inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 ${Cv.BLACK}`, padding: 0,
-};
-
-// ── EdgeHitIndicator — COD-style: when a hit is scrolled off the top/bottom,
-//   render a pinned arrow at the edge with a small joker sprite.
-function EdgeHitIndicator({ direction, item, onTap }) {
-  const name = item.type === 'pack' ? 'arcana' : item.value;
-  const sheet = item.type === 'pack' ? 'boosters' : 'jokers';
-  const hit = item._bestHit;
-  const color = hitColor(hit);
-  const pointUp = direction === 'up';
-  return (
-    <div
-      onClick={onTap}
-      style={{
-        pointerEvents: 'auto',
-        display: 'flex', alignItems: 'center', gap: 6,
-        padding: '3px 8px 3px 4px',
-        background: `${Cv.DARKEST}ee`,
-        border: `2px solid ${color}`,
-        borderRadius: pointUp ? '0 0 14px 14px' : '14px 14px 0 0',
-        cursor: 'pointer',
-        animation: 'edgeBob 1.4s ease-in-out infinite',
-        boxShadow: `0 0 10px ${color}aa`,
-      }}
-      title={`${item.value} · Ante ${item.ante} · tap to scroll`}
-    >
-      <div style={{
-        width: 20, height: 20, overflow: 'hidden', borderRadius: 3,
-        border: `1px solid ${color}`,
-      }}>
-        <div style={{ transform: 'scale(1.6)', transformOrigin: '50% 30%' }}>
-          <Sprite sheet={sheet} name={name} width={20} height={27} />
-        </div>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
-        <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 9, color: Cv.WHITE, letterSpacing: 0.5, whiteSpace: 'nowrap', maxWidth: 74, overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          {item.value}
-        </div>
-        <div style={{ fontFamily: 'm6x11plus, monospace', fontSize: 8, color, letterSpacing: 1 }}>
-          A{item.ante}·{item.where}
-        </div>
-      </div>
-      <svg width="10" height="10" viewBox="0 0 10 10" style={{ color }}>
-        {pointUp
-          ? <path d="M5 2 L9 7 L1 7 Z" fill="currentColor" />
-          : <path d="M5 8 L1 3 L9 3 Z" fill="currentColor" />}
-      </svg>
-    </div>
-  );
-}
-
-// ── SeedBody — scroll container + vertical ante list + edge indicators
-function SeedBody({ seed, filter }) {
-  const scrollRef = sUR(null);
-  const [edgeHits, setEdgeHits] = sUS({ up: [], down: [] });
-
-  // Collect all hits in this seed, with where-info for labels.
-  const allHits = sUM(() => {
-    const out = [];
-    seed.antes.forEach(a => {
-      a.shopQueue.forEach((it, i) => {
-        if (it.hits?.length) out.push({ value: it.value, type: 'joker', ante: a.ante, where: `Shop#${i+1}`, _bestHit: bestHit(it.hits), _findEl: () => it._el });
-      });
-      a.boosterPacks.forEach((p, pi) => {
-        p.itemHits?.forEach((hArr, ii) => {
-          if (hArr.length) out.push({ value: p.items[ii], type: 'joker', ante: a.ante, where: `P${pi+1}·${ii+1}`, _bestHit: bestHit(hArr), _findEl: () => p._el });
-        });
-      });
-      if (a._soulHits?.length) out.push({ value: a.soulJoker.value, type: 'joker', ante: a.ante, where: 'Soul', _bestHit: bestHit(a._soulHits), _findEl: () => a._soulEl });
-    });
-    return out;
-  }, [seed]);
-
-  sUE(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const onScroll = () => {
-      const top = el.scrollTop;
-      const bottom = top + el.clientHeight;
-      const up = [], down = [];
-      for (const h of allHits) {
-        const node = h._findEl?.();
-        if (!node) continue;
-        const rect = node.getBoundingClientRect();
-        const parentRect = el.getBoundingClientRect();
-        const yTop = rect.top - parentRect.top + el.scrollTop;
-        const yBot = yTop + rect.height;
-        if (yBot < top + 40) up.push(h);
-        else if (yTop > bottom - 40) down.push(h);
-      }
-      setEdgeHits({ up: up.slice(-3).reverse(), down: down.slice(0, 3) });
-    };
-    onScroll();
-    el.addEventListener('scroll', onScroll, { passive: true });
-    const id = setInterval(onScroll, 400); // catch layout settling
-    return () => { el.removeEventListener('scroll', onScroll); clearInterval(id); };
-  }, [allHits]);
-
-  const jumpTo = (hit) => {
-    const el = scrollRef.current;
-    const node = hit._findEl?.();
-    if (!el || !node) return;
-    const parentRect = el.getBoundingClientRect();
-    const rect = node.getBoundingClientRect();
-    const target = el.scrollTop + (rect.top - parentRect.top) - 120;
-    el.scrollTo({ top: target, behavior: 'smooth' });
-  };
-
-  return (
-    <div style={{ position: 'relative', flex: 1, minHeight: 0, overflow: 'hidden' }}>
-      {/* Scroll container */}
-      <div
-        ref={scrollRef}
-        className="v2-shop-scroll"
-        style={{
-          height: '100%',
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          scrollSnapType: 'y proximity',
-          scrollbarWidth: 'none',
-        }}
-      >
-        {seed.antes.map((a, i) => (
-          <div key={i} style={{ scrollSnapAlign: 'start' }}>
-            <AntePageV2 ante={a} />
-            {i < seed.antes.length - 1 && (
-              <div style={{
-                height: 2, margin: '0 14px',
-                background: `repeating-linear-gradient(90deg, ${Cv.PANEL_EDGE} 0 6px, transparent 6px 12px)`,
-              }} />
-            )}
-          </div>
-        ))}
-      </div>
-
-      {/* Edge indicators */}
-      <div style={{
-        position: 'absolute', top: 0, left: 0, right: 0,
-        display: 'flex', justifyContent: 'center', gap: 6, padding: '0 8px',
-        pointerEvents: 'none', zIndex: 20,
-        flexWrap: 'wrap',
-      }}>
-        {edgeHits.up.map((h, i) => <EdgeHitIndicator key={`u${i}`} direction="up" item={h} onTap={() => jumpTo(h)} />)}
-      </div>
-      <div style={{
-        position: 'absolute', bottom: 0, left: 0, right: 0,
-        display: 'flex', justifyContent: 'center', gap: 6, padding: '0 8px',
-        pointerEvents: 'none', zIndex: 20,
-        flexWrap: 'wrap',
-      }}>
-        {edgeHits.down.map((h, i) => <EdgeHitIndicator key={`d${i}`} direction="down" item={h} onTap={() => jumpTo(h)} />)}
-      </div>
-    </div>
-  );
-}
-
-// ── SeedDetailV2 — horizontal seed swiper + body
-function SeedDetailV2({ seeds, filter }) {
-  const [idx, setIdx] = sUS(0);
-  const [drag, setDrag] = sUS({ dx: 0, active: false });
-  const touch = sUR({ x0: 0, y0: 0, locked: null });
-
-  const onDown = (e) => {
-    const t = e.touches ? e.touches[0] : e;
-    touch.current = { x0: t.clientX, y0: t.clientY, locked: null };
-  };
-  const onMove = (e) => {
-    if (!touch.current.x0) return;
-    const t = e.touches ? e.touches[0] : e;
-    const dx = t.clientX - touch.current.x0;
-    const dy = t.clientY - touch.current.y0;
-    if (touch.current.locked == null) {
-      if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy) * 1.5) touch.current.locked = 'x';
-      else if (Math.abs(dy) > 8) touch.current.locked = 'y';
-    }
-    if (touch.current.locked === 'x') setDrag({ dx, active: true });
-  };
-  const onUp = () => {
-    if (touch.current.locked === 'x') {
-      const dx = drag.dx;
-      if (dx < -70 && idx < seeds.length - 1) setIdx(idx + 1);
-      else if (dx > 70 && idx > 0) setIdx(idx - 1);
-    }
-    touch.current = { x0: 0, y0: 0, locked: null };
-    setDrag({ dx: 0, active: false });
-  };
-
-  const seed = seeds[idx];
-
-  return (
-    <div style={{
-      width: '100%', height: '100%', background: Cv.DARKEST,
-      display: 'flex', flexDirection: 'column', overflow: 'hidden',
-      fontFamily: 'm6x11plus, monospace', color: Cv.WHITE,
-    }}>
-      <div onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}
-           style={{ touchAction: 'pan-y' }}>
-        <TopBar seed={seed} filter={filter} />
-      </div>
-      <div style={{
-        flex: 1, minHeight: 0, position: 'relative',
-        transform: drag.active ? `translateX(${drag.dx * 0.25}px) rotate(${drag.dx * 0.015}deg)` : 'none',
-        transition: drag.active ? 'none' : 'transform 260ms cubic-bezier(.33,1,.4,1)',
-      }}>
-        <SeedBody key={seed.seed} seed={seed} filter={filter} />
-      </div>
-      {/* Seed dots */}
-      <div style={{ position: 'absolute', bottom: 4, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 5, zIndex: 40 }}>
-        {seeds.map((_, i) => (
-          <div key={i} style={{ width: 6, height: 6, borderRadius: 3, background: i === idx ? Cv.GOLD : Cv.DARK_GREY }} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-window.SeedDetailV2 = SeedDetailV2;

package/assets/Balatro Seed Curator (DesignsV2)/src/v2/SeedOGCard.jsx

@@ -1,251 +0,0 @@
-// SeedOGCard — 1200×630 social-preview rollup.
-//   /seed/[seed]/og.png renders this server-side.
-//
-// Design rule (from pifreak): DON'T SHOW OFF CARDS THAT AREN'T THERE.
-// The point of posting a seed is showing off the JOKERS YOU FOUND, splayed
-// out like a Balatro poker hand. Unmatched clauses get a tiny stat line,
-// not a grayed-out sprite.
-//
-// Splay math: mirrors Balatro `cardarea.lua` hand positioning —
-//   rotate = (i - center) * spread°   (≈6° per card, clamped)
-//   y      = abs(i - center) * arcDip  (arc dip, not a straight line)
-//   ambient_tilt: ~0.2 per Balatro/card.lua — each card gets a unique
-//     phase (i/1.14212) and a gentle sin/cos wobble. Pure CSS anim.
-//
-// Score columns: red SHOULD line has room for per-clause `+N` pills so
-// the share card doubles as a scoring preview.
-
-const Co = window.JimboColor;
-
-// Balatro rarity palette
-const RARITY_COLOR = {
-  Common:    '#009dff',
-  Uncommon:  '#3bc47e',
-  Rare:      '#fe5f55',
-  Legendary: '#b26cbd',
-};
-
-// Inject ambient_tilt keyframes once (Balatro card.lua: G.TIMERS.REAL*1.56 + id/1.35 drift)
-(function injectOgKf(){
-  if (document.getElementById('og-card-kf')) return;
-  const s = document.createElement('style');
-  s.id = 'og-card-kf';
-  s.textContent = `
-    @keyframes ogTilt0 { 0%,100% { transform: var(--base) rotate(var(--r, 0deg)) translateY(var(--ty, 0px)); }
-                         50%     { transform: var(--base) rotate(calc(var(--r, 0deg) + 1.2deg)) translateY(calc(var(--ty, 0px) - 2px)); } }
-    @keyframes ogTilt1 { 0%,100% { transform: var(--base) rotate(var(--r, 0deg)) translateY(var(--ty, 0px)); }
-                         50%     { transform: var(--base) rotate(calc(var(--r, 0deg) - 1.4deg)) translateY(calc(var(--ty, 0px) + 2px)); } }
-    @keyframes ogTilt2 { 0%,100% { transform: var(--base) rotate(var(--r, 0deg)) translateY(var(--ty, 0px)); }
-                         50%     { transform: var(--base) rotate(calc(var(--r, 0deg) + 0.9deg)) translateY(calc(var(--ty, 0px) - 1px)); } }
-    @keyframes ogTilt3 { 0%,100% { transform: var(--base) rotate(var(--r, 0deg)) translateY(var(--ty, 0px)); }
-                         50%     { transform: var(--base) rotate(calc(var(--r, 0deg) - 0.7deg)) translateY(calc(var(--ty, 0px) + 1.5px)); } }
-  `;
-  document.head.appendChild(s);
-})();
-
-// One splayed card in the hand. Includes ambient tilt + per-card phase.
-function FannedCard({ sprite, label, score, frame, rotate, yOff, zIndex, phase }) {
-  const tiltKf = ['ogTilt0','ogTilt1','ogTilt2','ogTilt3'][phase % 4];
-  return (
-    <div style={{
-      position: 'relative',
-      marginLeft: -14,  // cards overlap like a hand
-      zIndex,
-      animation: `${tiltKf} ${4 + (phase % 3)}s ease-in-out infinite`,
-      animationDelay: `${phase * 0.37}s`,
-      ['--base']: 'translate(0,0)',
-      ['--r']: `${rotate}deg`,
-      ['--ty']: `${yOff}px`,
-      transformOrigin: '50% 110%', // pivot below card, like holding from bottom
-      transform: `translate(0,0) rotate(${rotate}deg) translateY(${yOff}px)`,
-    }}>
-      <div style={{
-        padding: 6, borderRadius: 8,
-        border: `4px solid ${frame || Co.GOLD}`,
-        background: `${Co.DARKEST}`,
-        boxShadow: `0 6px 0 rgba(0,0,0,.55), 0 0 18px ${frame || Co.GOLD}55`,
-        position: 'relative',
-      }}>
-        {sprite}
-        {score != null && (
-          <div style={{
-            position: 'absolute', top: -14, right: -14,
-            minWidth: 34, padding: '2px 8px', height: 30,
-            background: Co.RED, border: `3px solid ${Co.DARKEST}`, borderRadius: 15,
-            color: Co.WHITE, fontSize: 18, lineHeight: '22px', textAlign: 'center',
-            textShadow: '1px 1px 0 rgba(0,0,0,.8)', letterSpacing: 1,
-          }}>+{score}</div>
-        )}
-        {label && (
-          <div style={{
-            position: 'absolute', left: 0, right: 0, bottom: -26, textAlign: 'center',
-            fontSize: 13, color: frame || Co.GOLD_TEXT, letterSpacing: 2,
-            textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
-          }}>{label}</div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function SeedOGCard({ seed, filter }) {
-  const must = filter.must || [];
-  const should = filter.should || [];
-  const allMustHit = must.every(c => (seed.score?.totals[c.id] || 0) > 0);
-
-  // Collect actual HITS across MUST + SHOULD to render as the hand.
-  // Each entry: { value, edition, rarity, score, kind, clauseId }
-  const hand = [];
-  for (const c of must) {
-    const matches = seed.score?.matches?.[c.id] || [];
-    if (!matches.length) continue;
-    const m = matches[0];
-    hand.push({
-      kind: 'must', value: m.value, edition: m.edition, clauseId: c.id,
-      frame: Co.BLUE, label: c.label || m.value, score: null,
-      sheet: c.type === 'joker' || c.type === 'souljoker' ? 'jokers' :
-             c.type === 'voucher' ? 'vouchers' :
-             c.type.includes('tag') ? 'tags' :
-             c.type === 'boss' ? 'blinds' : 'jokers',
-    });
-  }
-  for (const c of should) {
-    const matches = seed.score?.matches?.[c.id] || [];
-    if (!matches.length) continue;
-    const m = matches[0];
-    const rarity = c.rarity || window.jokerRarity?.(m.value) || 'Common';
-    hand.push({
-      kind: 'should', value: m.value, edition: m.edition, clauseId: c.id,
-      frame: RARITY_COLOR[rarity], label: c.label && c.label !== 'Any Rare' ? c.label : m.value,
-      score: (c.score || 1) * (seed.score.totals[c.id] || 1),
-      sheet: 'jokers',
-    });
-  }
-
-  // Un-matched SHOULD clauses go in a tiny "didn't hit" score line (no big art).
-  const unmatched = should.filter(c => !(seed.score?.totals[c.id] > 0));
-
-  // Splay math — Balatro hand fan.
-  const n = hand.length;
-  const center = (n - 1) / 2;
-  const spread = Math.min(8, 44 / Math.max(1, n));   // degrees per card, clamp so 8 cards look right
-  const arcDip = 3.5;                                 // px per step of arc
-  const mkFan = (i) => {
-    const off = i - center;
-    return { rotate: off * spread, yOff: Math.abs(off) * arcDip, zIndex: 100 - Math.round(Math.abs(off) * 10) };
-  };
-
-  // Sprite renderer for a hand entry
-  const renderSprite = (h, size = 96) => {
-    const w = size, hh = h.sheet === 'tags' || h.sheet === 'blinds' ? size : Math.round(size * 95 / 71);
-    if (h.sheet === 'blinds') return <BossChip name={h.value} size={hh} />;
-    return <Sprite sheet={h.sheet} name={h.value} width={w} height={hh} />;
-  };
-
-  return (
-    <div style={{
-      width: 1200, height: 630, position: 'relative', overflow: 'hidden',
-      background: `radial-gradient(ellipse at top left, #2d4a38 0%, #0f1a13 70%)`,
-      fontFamily: 'm6x11plus, monospace', color: Co.WHITE,
-    }}>
-      {/* Felt texture overlay */}
-      <div style={{
-        position: 'absolute', inset: 0, opacity: 0.08,
-        backgroundImage: 'repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 3px)',
-      }} />
-
-      {/* Top strip — filter name + branding */}
-      <div style={{ position: 'absolute', top: 28, left: 40, right: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
-        <div style={{ minWidth: 0, flex: 1 }}>
-          <div style={{ fontSize: 16, color: Co.GOLD, letterSpacing: 3, textShadow: '2px 2px 0 rgba(0,0,0,.8)' }}>FILTER</div>
-          <div style={{ fontSize: 28, color: Co.WHITE, letterSpacing: 1, textShadow: '2px 2px 0 rgba(0,0,0,.8)',
-                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 760 }}>
-            {filter.name}
-          </div>
-        </div>
-        <div style={{ fontSize: 16, color: Co.GREY, letterSpacing: 3 }}>Balatro Seed Curator</div>
-      </div>
-
-      {/* Seed code — big, LEFT */}
-      <div style={{ position: 'absolute', top: 96, left: 40 }}>
-        <div style={{ fontSize: 18, color: Co.GREY, letterSpacing: 4 }}>SEED</div>
-        <div style={{ fontSize: 108, color: Co.WHITE, letterSpacing: 10, lineHeight: 1, marginTop: 4, textShadow: `3px 4px 0 ${Co.BLACK}` }}>{seed.seed}</div>
-        <div style={{ display: 'flex', gap: 16, marginTop: 8, fontSize: 20, color: Co.GREY, letterSpacing: 2 }}>
-          <span>{seed.deck} Deck</span>
-          <span style={{ color: Co.PANEL_EDGE }}>·</span>
-          <span>{seed.stake} Stake</span>
-          <span style={{ color: Co.PANEL_EDGE }}>·</span>
-          <span style={{ color: allMustHit ? Co.BLUE : Co.RED }}>
-            {allMustHit ? '✓ must complete' : '✗ must incomplete'}
-          </span>
-        </div>
-      </div>
-
-      {/* Score — big number, RIGHT */}
-      <div style={{ position: 'absolute', top: 96, right: 40, textAlign: 'right' }}>
-        <div style={{ fontSize: 18, color: Co.GREY, letterSpacing: 4 }}>SCORE</div>
-        <div style={{ fontSize: 140, color: Co.RED, letterSpacing: 4, lineHeight: 1, marginTop: 4, textShadow: `4px 6px 0 ${Co.BLACK}` }}>
-          {seed.score.totalScore}
-        </div>
-      </div>
-
-      {/* THE HAND — splayed rainbow poker-hand of everything that hit. */}
-      <div style={{
-        position: 'absolute', left: 40, right: 40, bottom: 78,
-        display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
-        paddingLeft: 14,  // compensate first card's -14 marginLeft
-      }}>
-        {hand.map((h, i) => {
-          const fan = mkFan(i);
-          return (
-            <FannedCard
-              key={h.clauseId + ':' + i}
-              sprite={renderSprite(h, 96)}
-              label={h.label}
-              score={h.kind === 'should' ? h.score : null}
-              frame={h.frame}
-              rotate={fan.rotate}
-              yOff={fan.yOff}
-              zIndex={fan.zIndex}
-              phase={i}
-            />
-          );
-        })}
-        {hand.length === 0 && (
-          <div style={{ fontSize: 22, color: Co.GREY, letterSpacing: 3, padding: 40 }}>
-            no hits — try a different seed
-          </div>
-        )}
-      </div>
-
-      {/* SHOULD score line — unmatched clauses get tiny sad-face stat pills here.
-          Room preserved so this reads as a proper scoring readout, not just art. */}
-      {unmatched.length > 0 && (
-        <div style={{
-          position: 'absolute', left: 40, right: 40, bottom: 30,
-          display: 'flex', alignItems: 'center', gap: 10,
-        }}>
-          <div style={{
-            fontSize: 12, letterSpacing: 3, padding: '3px 10px',
-            background: Co.DARK_RED, color: Co.WHITE, borderRadius: 3,
-            textShadow: '1px 1px 0 rgba(0,0,0,.8)',
-          }}>MISSED</div>
-          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
-            {unmatched.map(c => (
-              <div key={c.id} style={{
-                fontSize: 12, color: Co.GREY, letterSpacing: 1.5,
-                padding: '2px 8px', border: `1px dashed ${Co.GREY}`, borderRadius: 3,
-              }}>
-                {c.label || c.value} <span style={{ color: Co.DARK_RED }}>+{c.score || 1}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-window.SeedOGCard = SeedOGCard;
-window.RARITY_COLOR = RARITY_COLOR;