// Astrological-sigil library for the Wandering Wizards UI kit.
//
// Two layers:
//   1. <SigSprite /> — renders one hidden <svg> with every <symbol> the page
//      needs. Mount once at the top of the tree.
//   2. <Sig name="..." /> — a tiny <svg><use/></svg> wrapper for inline icons.
//   3. The big game-sigil components (SigilSun/Moon/Magic/Pokemon/Riftbound/OnePiece)
//      are kept as standalone full-size SVGs for hero/game card art.

function SigSprite() {
  return (
    <svg width="0" height="0" style={{position: 'absolute', overflow: 'hidden'}} aria-hidden="true">
      <defs>
        {/* Brand mark — eight-point star (replaces ✦) */}
        <symbol id="sig-brand" viewBox="0 0 24 24">
          <path d="M12 2 L13 11 L22 12 L13 13 L12 22 L11 13 L2 12 L11 11 Z" />
        </symbol>

        {/* Compass diamond — small 4-point compass (replaces ◈ ◆) */}
        <symbol id="sig-compass" viewBox="0 0 24 24">
          <path d="M12 3 L21 12 L12 21 L3 12 Z" />
          <path d="M12 8 L15 12 L12 16 L9 12 Z" />
          <circle cx="12" cy="12" r="0.8" fill="currentColor" stroke="none" />
        </symbol>

        {/* Diamond outline (replaces ◇) */}
        <symbol id="sig-diamond" viewBox="0 0 24 24">
          <path d="M12 4 L20 12 L12 20 L4 12 Z" />
        </symbol>

        {/* Scrying lens — search (replaces ⌕) */}
        <symbol id="sig-lens" viewBox="0 0 24 24">
          <circle cx="11" cy="11" r="6" />
          <line x1="15.5" y1="15.5" x2="20" y2="20" />
          <circle cx="11" cy="11" r="0.8" fill="currentColor" stroke="none" />
        </symbol>

        {/* Vault chest — cart (replaces ⛁) */}
        <symbol id="sig-vault" viewBox="0 0 24 24">
          <rect x="3" y="8" width="18" height="12" rx="1" />
          <path d="M3 12 Q12 6 21 12" />
          <circle cx="12" cy="13" r="0.8" fill="currentColor" stroke="none" />
          <line x1="12" y1="13" x2="12" y2="16" />
        </symbol>

        {/* Heart sigil — wishlist (replaces ♡) */}
        <symbol id="sig-heart" viewBox="0 0 24 24">
          <path d="M12 20 C 4 14, 4 6, 8 5 C 10 5, 12 7, 12 9 C 12 7, 14 5, 16 5 C 20 6, 20 14, 12 20 Z" />
          <circle cx="12" cy="11" r="0.6" fill="currentColor" stroke="none" />
        </symbol>

        {/* User moon — sign-in (replaces ◔) */}
        <symbol id="sig-user" viewBox="0 0 24 24">
          <circle cx="12" cy="9" r="4" />
          <path d="M4 21 Q4 14 12 14 Q20 14 20 21" />
        </symbol>

        {/* Shield — accessories (replaces ⛨) */}
        <symbol id="sig-shield" viewBox="0 0 24 24">
          <path d="M12 3 L19 6 V12 Q19 18 12 21 Q5 18 5 12 V6 Z" />
          <path d="M9 12 L11 14 L15 9" />
        </symbol>

        {/* Crown — tournaments (replaces ♛) */}
        <symbol id="sig-crown" viewBox="0 0 24 24">
          <path d="M3 18 L4 8 L9 13 L12 5 L15 13 L20 8 L21 18 Z" />
          <line x1="3" y1="20" x2="21" y2="20" />
          <circle cx="4" cy="8" r="1" fill="currentColor" stroke="none" />
          <circle cx="20" cy="8" r="1" fill="currentColor" stroke="none" />
          <circle cx="12" cy="5" r="1" fill="currentColor" stroke="none" />
        </symbol>

        {/* Mystery orb (replaces ⚯) */}
        <symbol id="sig-mystery" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="12" cy="12" r="0.9" fill="currentColor" stroke="none" />
          <line x1="12" y1="2"  x2="12" y2="4" />
          <line x1="12" y1="20" x2="12" y2="22" />
        </symbol>

        {/* Game sigils — small versions for inline use */}
        <symbol id="sig-magic" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <path d="M12 5 L9 12 L11.5 12 L9 19 L15 11 L12.5 11 L15 5 Z" />
        </symbol>
        <symbol id="sig-poke" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <line x1="3" y1="12" x2="9" y2="12" />
          <line x1="15" y1="12" x2="21" y2="12" />
          <circle cx="12" cy="12" r="2.5" />
        </symbol>
        <symbol id="sig-rift" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12 Q7 8 12 12 T 21 12" />
        </symbol>
        <symbol id="sig-op" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <line x1="5"  y1="5"  x2="19" y2="19" />
          <line x1="19" y1="5"  x2="5"  y2="19" />
        </symbol>

        {/* X / close (replaces ✕) */}
        <symbol id="sig-close" viewBox="0 0 24 24">
          <line x1="6" y1="6" x2="18" y2="18" />
          <line x1="18" y1="6" x2="6" y2="18" />
        </symbol>

        {/* Clock — events (replaces ⏰) */}
        <symbol id="sig-clock" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <path d="M12 7 L12 12 L16 14" />
        </symbol>

        {/* Coin / treasure — currency (replaces 💵) */}
        <symbol id="sig-coin" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="6" />
          <path d="M10 9 L14 9 M10 12 L14 12 M10 15 L14 15" />
        </symbol>

        {/* Bolt — Pokémon-league flavor */}
        <symbol id="sig-bolt" viewBox="0 0 24 24">
          <path d="M13 3 L6 13 L11 13 L10 21 L18 10 L13 10 Z" />
        </symbol>

        {/* Discord chat (replaces ◈ for socials) */}
        <symbol id="sig-discord" viewBox="0 0 24 24">
          <path d="M5 6 Q4 6 4 7 V16 Q4 17 5 17 H8 L8 20 L12 17 H19 Q20 17 20 16 V7 Q20 6 19 6 Z" />
          <circle cx="9" cy="11.5" r="1" fill="currentColor" stroke="none" />
          <circle cx="15" cy="11.5" r="1" fill="currentColor" stroke="none" />
        </symbol>

        {/* Instagram — concentric circles (replaces ⌾) */}
        <symbol id="sig-insta" viewBox="0 0 24 24">
          <rect x="4" y="4" width="16" height="16" rx="4" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17" cy="7" r="0.8" fill="currentColor" stroke="none" />
        </symbol>

        {/* Play triangle (replaces ▶) */}
        <symbol id="sig-play" viewBox="0 0 24 24">
          <path d="M7 5 L19 12 L7 19 Z" />
        </symbol>

        {/* Music note (replaces ♪) */}
        <symbol id="sig-music" viewBox="0 0 24 24">
          <path d="M9 17 V6 L19 4 V15" />
          <circle cx="7" cy="17" r="2" />
          <circle cx="17" cy="15" r="2" />
        </symbol>

        {/* X (social) (replaces ✕ for X / Twitter) */}
        <symbol id="sig-x" viewBox="0 0 24 24">
          <line x1="4" y1="4" x2="20" y2="20" />
          <line x1="20" y1="4" x2="4" y2="20" />
        </symbol>

        {/* Facebook f */}
        <symbol id="sig-facebook" viewBox="0 0 24 24">
          <path d="M14 6 V4 H17 V0.5" />
          <path d="M10 21 V10 H7 V14 H10 V21" />
          <path d="M10 14 V21 M10 14 H14 M14 14 L14 10 H17 V6 H14 Q10 6 10 10 Z" />
        </symbol>
      </defs>
    </svg>
  );
}

function Sig({ name, size = 16, stroke = 1.3, style = {}, className = '' }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={{flexShrink: 0, ...style}}
      aria-hidden="true"
    >
      <use href={`#sig-${name}`} />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────────
// Full-size game-card emblems (kept as-is from previous turn)
// ───────────────────────────────────────────────────────────────

function SigilSun() {
  return (
    <svg className="sigil-svg" viewBox="0 0 100 100" aria-hidden="true">
      <circle className="thin" cx="50" cy="50" r="44" strokeDasharray="1.5 3" />
      {[...Array(12)].map((_, i) => {
        const a = (i * 30) * Math.PI / 180;
        const x1 = 50 + Math.cos(a) * 30, y1 = 50 + Math.sin(a) * 30;
        const x2 = 50 + Math.cos(a) * 38, y2 = 50 + Math.sin(a) * 38;
        return <line key={i} className="ring" x1={x1} y1={y1} x2={x2} y2={y2} />;
      })}
      <circle className="ring" cx="50" cy="50" r="22" />
      <circle className="thin" cx="50" cy="50" r="16" />
      <path className="ring" d="M50 36 L52 49 L64 50 L52 51 L50 64 L48 51 L36 50 L48 49 Z" />
      <circle className="dot" cx="50" cy="6"  r="1.2" />
      <circle className="dot" cx="50" cy="94" r="1.2" />
      <circle className="dot" cx="6"  cy="50" r="1.2" />
      <circle className="dot" cx="94" cy="50" r="1.2" />
      <path className="filigree" d="M16 16 Q22 14 24 22 M84 16 Q78 14 76 22 M16 84 Q22 86 24 78 M84 84 Q78 86 76 78" />
      <circle className="dot" cx="50" cy="50" r="2" />
    </svg>
  );
}

function SigilMoon() {
  return (
    <svg className="sigil-svg" viewBox="0 0 100 100" aria-hidden="true">
      <circle className="thin" cx="50" cy="50" r="44" strokeDasharray="1.5 3" />
      <circle className="dim" cx="50" cy="50" r="34" />
      <path className="ring" d="M58 24 A 28 28 0 1 0 58 76 A 22 22 0 1 1 58 24 Z" />
      <circle className="filigree" cx="44" cy="42" r="1.6" />
      <circle className="filigree" cx="38" cy="56" r="1.2" />
      <path className="filigree" d="M40 64 Q44 68 50 66" />
      <circle className="dot" cx="78" cy="22" r="1.4" />
      <circle className="dot" cx="22" cy="78" r="1.4" />
      <circle className="dot" cx="50" cy="6"  r="1" />
      <circle className="dot" cx="6"  cy="50" r="1" />
      <circle className="dot" cx="94" cy="50" r="1" />
      <circle className="dot" cx="50" cy="94" r="1" />
    </svg>
  );
}

function SigilMagic() {
  return (
    <svg className="sigil-svg" viewBox="0 0 100 100" aria-hidden="true">
      <circle className="thin" cx="50" cy="50" r="46" strokeDasharray="1 2" />
      <circle className="ring" cx="50" cy="50" r="34" />
      <circle className="dim"  cx="50" cy="50" r="24" />
      <path className="ring" d="M50 22 L42 50 L48 50 L42 72 L62 46 L54 46 L62 22 Z" strokeWidth="1.6" />
      <circle className="dot" cx="50" cy="16" r="1.4" />
      <circle className="dot" cx="50" cy="84" r="1.4" />
      <circle className="dot" cx="16" cy="50" r="1.2" />
      <circle className="dot" cx="84" cy="50" r="1.2" />
    </svg>
  );
}

function SigilPokemon() {
  return (
    <svg className="sigil-svg" viewBox="0 0 100 100" aria-hidden="true">
      <circle className="thin" cx="50" cy="50" r="46" strokeDasharray="1 2" />
      <circle className="ring" cx="50" cy="50" r="34" />
      <line className="ring" x1="16" y1="50" x2="38" y2="50" strokeWidth="1.6" />
      <line className="ring" x1="62" y1="50" x2="84" y2="50" strokeWidth="1.6" />
      <circle className="ring" cx="50" cy="50" r="9" strokeWidth="1.6" />
      <circle className="dot" cx="50" cy="50" r="2.5" />
      <path className="ring" d="M52 26 L42 44 L48 44 L46 60" strokeWidth="1.4" />
      <circle className="dot" cx="50" cy="10" r="1.4" />
      <circle className="dot" cx="50" cy="90" r="1.4" />
    </svg>
  );
}

function SigilRiftbound() {
  return (
    <svg className="sigil-svg" viewBox="0 0 100 100" aria-hidden="true">
      <circle className="thin" cx="50" cy="50" r="46" strokeDasharray="1 2" />
      <circle className="ring" cx="50" cy="50" r="34" />
      <path className="ring" d="M18 50 Q34 38 50 50 T 82 50" strokeWidth="1.6" />
      <path className="dim"  d="M18 56 Q34 44 50 56 T 82 56" />
      <line className="dim" x1="50" y1="22" x2="50" y2="78" strokeWidth="1" />
      <circle className="dot" cx="32" cy="42" r="1" />
      <circle className="dot" cx="68" cy="42" r="1" />
      <circle className="dot" cx="40" cy="64" r="0.9" />
      <circle className="dot" cx="62" cy="64" r="0.9" />
      <circle className="dot" cx="50" cy="50" r="2.5" />
    </svg>
  );
}

function SigilOnePiece() {
  return (
    <svg className="sigil-svg" viewBox="0 0 100 100" aria-hidden="true">
      <circle className="thin" cx="50" cy="50" r="46" strokeDasharray="1 2" />
      <circle className="ring" cx="50" cy="50" r="34" />
      <line className="dim" x1="22" y1="22" x2="78" y2="78" strokeWidth="1.4" />
      <line className="dim" x1="78" y1="22" x2="22" y2="78" strokeWidth="1.4" />
      <circle className="dot" cx="22" cy="22" r="1.4" />
      <circle className="dot" cx="78" cy="22" r="1.4" />
      <circle className="dot" cx="22" cy="78" r="1.4" />
      <circle className="dot" cx="78" cy="78" r="1.4" />
      <path className="ring" d="M40 40 Q40 32 50 32 Q60 32 60 40 L60 52 Q60 58 56 60 L56 64 L44 64 L44 60 Q40 58 40 52 Z" />
      <circle className="dot" cx="46" cy="46" r="1.6" />
      <circle className="dot" cx="54" cy="46" r="1.6" />
      <path className="thin" d="M46 54 Q50 57 54 54" />
      <line className="thin" x1="46" y1="60" x2="46" y2="64" />
      <line className="thin" x1="50" y1="60" x2="50" y2="64" />
      <line className="thin" x1="54" y1="60" x2="54" y2="64" />
    </svg>
  );
}

Object.assign(window, {
  Sig, SigSprite,
  SigilSun, SigilMoon, SigilMagic, SigilPokemon, SigilRiftbound, SigilOnePiece,
});