// Shared SVG icons for Rune Oracle
const Icon = {
  Yggdrasil: ({ size = 80, color = "#C9A84C" }) => (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
      {/* Roots */}
      <path d="M50 80 Q40 88 25 92 M50 80 Q60 88 75 92 M50 80 Q50 90 50 96 M50 80 Q35 86 18 84 M50 80 Q65 86 82 84" stroke={color} strokeWidth="0.8" opacity="0.7" strokeLinecap="round"/>
      {/* Trunk */}
      <path d="M50 80 L50 45" stroke={color} strokeWidth="1.5"/>
      {/* Branches */}
      <path d="M50 60 Q35 55 22 45 M50 55 Q65 50 78 40 M50 50 Q40 45 28 32 M50 45 Q60 40 72 28 M50 50 L50 18" stroke={color} strokeWidth="0.8" strokeLinecap="round"/>
      {/* Foliage dots */}
      <circle cx="50" cy="14" r="1.5" fill={color}/>
      <circle cx="22" cy="42" r="1" fill={color} opacity="0.7"/>
      <circle cx="78" cy="38" r="1" fill={color} opacity="0.7"/>
      <circle cx="28" cy="29" r="1" fill={color} opacity="0.7"/>
      <circle cx="72" cy="25" r="1" fill={color} opacity="0.7"/>
      {/* Halo ring */}
      <circle cx="50" cy="50" r="42" stroke={color} strokeWidth="0.3" opacity="0.3"/>
      <circle cx="50" cy="50" r="46" stroke={color} strokeWidth="0.3" opacity="0.15"/>
    </svg>
  ),
  Bag: ({ size = 200, color = "#C9A84C" }) => (
    <svg width={size} height={size} viewBox="0 0 200 200" fill="none">
      <defs>
        <radialGradient id="bagFill" cx="50%" cy="60%">
          <stop offset="0%" stopColor="#5A4030"/>
          <stop offset="60%" stopColor="#3D2B1F"/>
          <stop offset="100%" stopColor="#1A1208"/>
        </radialGradient>
      </defs>
      {/* Body */}
      <path d="M55 70 Q40 90 45 130 Q50 170 100 178 Q150 170 155 130 Q160 90 145 70 Z" fill="url(#bagFill)" stroke={color} strokeWidth="1" strokeOpacity="0.5"/>
      {/* Drawstring */}
      <path d="M55 70 Q70 60 100 62 Q130 60 145 70" stroke={color} strokeWidth="1.5" fill="none"/>
      <path d="M60 65 Q72 55 100 56 Q128 55 140 65" stroke={color} strokeWidth="0.8" fill="none" opacity="0.6"/>
      {/* Folds */}
      <path d="M70 90 Q72 130 80 165" stroke="#1A1208" strokeWidth="1" opacity="0.5"/>
      <path d="M130 90 Q128 130 120 165" stroke="#1A1208" strokeWidth="1" opacity="0.5"/>
      {/* String tassel */}
      <path d="M100 56 L100 50 M97 50 L100 56 L103 50" stroke={color} strokeWidth="1"/>
      <circle cx="100" cy="48" r="2" fill={color}/>
    </svg>
  ),
  Read: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 3 L12 21 M5 6 L19 6 M5 18 L19 18 M8 10 L16 10 M8 14 L16 14" stroke={color} strokeWidth="1.2" strokeLinecap="round"/>
      <circle cx="12" cy="12" r="9" stroke={color} strokeWidth="0.6" opacity="0.4"/>
    </svg>
  ),
  Library: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="4" y="5" width="4" height="14" stroke={color} strokeWidth="1.2"/>
      <rect x="10" y="5" width="4" height="14" stroke={color} strokeWidth="1.2"/>
      <rect x="16" y="7" width="4" height="12" stroke={color} strokeWidth="1.2" transform="rotate(8 18 13)"/>
    </svg>
  ),
  Journal: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 4 L5 20 L19 20 L19 4 L7 4 Q5 4 5 6" stroke={color} strokeWidth="1.2"/>
      <path d="M9 9 L15 9 M9 12 L15 12 M9 15 L13 15" stroke={color} strokeWidth="1" strokeLinecap="round"/>
    </svg>
  ),
  Settings: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="3" stroke={color} strokeWidth="1.2"/>
      <path d="M12 2 L12 5 M12 19 L12 22 M2 12 L5 12 M19 12 L22 12 M5 5 L7 7 M17 17 L19 19 M5 19 L7 17 M17 7 L19 5" stroke={color} strokeWidth="1.2" strokeLinecap="round"/>
    </svg>
  ),
  Back: ({ size = 24, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M15 5 L8 12 L15 19" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Search: ({ size = 20, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="10" cy="10" r="6" stroke={color} strokeWidth="1.5"/>
      <path d="M14.5 14.5 L19 19" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  Share: ({ size = 20, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="6" cy="12" r="2.5" stroke={color} strokeWidth="1.2"/>
      <circle cx="18" cy="6" r="2.5" stroke={color} strokeWidth="1.2"/>
      <circle cx="18" cy="18" r="2.5" stroke={color} strokeWidth="1.2"/>
      <path d="M8 11 L16 7 M8 13 L16 17" stroke={color} strokeWidth="1.2"/>
    </svg>
  ),
  Pin: ({ size = 18, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2 L12 14 M9 4 L15 4 L17 8 L13 12 L11 12 L7 8 Z M12 14 L8 22" stroke={color} strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  ),
  Sparkle: ({ size = 16, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M8 1 L9 7 L15 8 L9 9 L8 15 L7 9 L1 8 L7 7 Z" fill={color}/>
    </svg>
  ),
  Flame: ({ size = 60, color = "#C9A84C" }) => (
    <svg width={size} height={size} viewBox="0 0 60 80" fill="none">
      <defs>
        <radialGradient id="flameGrad" cx="50%" cy="70%">
          <stop offset="0%" stopColor="#FFE08A" stopOpacity="0.9"/>
          <stop offset="40%" stopColor="#C9A84C" stopOpacity="0.7"/>
          <stop offset="100%" stopColor="#6B2014" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <ellipse cx="30" cy="55" rx="22" ry="30" fill="url(#flameGrad)"/>
      <path d="M30 20 Q22 35 25 50 Q28 60 30 70 Q32 60 35 50 Q38 35 30 20" fill="#FFC868" opacity="0.6"/>
      <path d="M30 30 Q26 42 28 52 Q30 60 32 52 Q34 42 30 30" fill="#FFE8A8" opacity="0.8"/>
    </svg>
  ),
  Ornament: ({ width = 200, color = "#C9A84C" }) => (
    <svg width={width} height="20" viewBox="0 0 200 20" fill="none">
      <path d="M0 10 L80 10 M120 10 L200 10" stroke={color} strokeWidth="0.8" opacity="0.5"/>
      <path d="M85 10 L100 4 L115 10 L100 16 Z" stroke={color} strokeWidth="0.8" fill="none"/>
      <circle cx="100" cy="10" r="1.5" fill={color}/>
      <circle cx="78" cy="10" r="1" fill={color}/>
      <circle cx="122" cy="10" r="1" fill={color}/>
    </svg>
  ),
  Send: ({ size = 20, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3 12 L21 4 L17 12 L21 20 Z" stroke={color} strokeWidth="1.3" strokeLinejoin="round"/>
      <path d="M3 12 L17 12" stroke={color} strokeWidth="1.3"/>
    </svg>
  ),
  More: ({ size = 20, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="5" cy="12" r="1.5" fill={color}/>
      <circle cx="12" cy="12" r="1.5" fill={color}/>
      <circle cx="19" cy="12" r="1.5" fill={color}/>
    </svg>
  ),
  Check: ({ size = 18, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 12 L10 17 L19 7" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  X: ({ size = 18, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M6 6 L18 18 M18 6 L6 18" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  Trophy: ({ size = 22, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M8 4 L16 4 L16 11 Q16 14 12 14 Q8 14 8 11 Z M5 5 L5 8 Q5 11 8 11 M19 5 L19 8 Q19 11 16 11 M9 14 L9 18 L15 18 L15 14 M7 18 L17 18 L17 20 L7 20 Z" stroke={color} strokeWidth="1.2" strokeLinejoin="round"/>
    </svg>
  )
};

window.Icon = Icon;
