const ICONS: Record<string, string> = {
  fireball: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <radialGradient id="fbCore" cx="50%" cy="62%" r="60%">
          <stop offset="0%" stop-color="#fff6c0"/>
          <stop offset="40%" stop-color="#ffc23d"/>
          <stop offset="78%" stop-color="#ff7b1f"/>
          <stop offset="100%" stop-color="#d43d17"/>
        </radialGradient>
        <linearGradient id="fbFlame" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="#ff8a2a"/>
          <stop offset="100%" stop-color="#ffdf6b"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="42" r="21" fill="#ff8020" opacity="0.16"/>
      <path d="M32 3 C38 12 45 17 45 27 C45 34 41 38 37 40 L27 40 C23 38 19 34 19 27 C19 17 26 12 32 3 Z" fill="url(#fbFlame)" opacity="0.95"/>
      <path d="M32 12 C35 17 39 20 39 26 C39 31 36 34 32 35 C28 34 25 31 25 26 C25 20 29 17 32 12 Z" fill="#fff2b0" opacity="0.9"/>
      <circle cx="32" cy="43" r="14" fill="url(#fbCore)" stroke="#8a3014" stroke-width="2"/>
      <ellipse cx="27" cy="38" rx="5" ry="3.2" fill="#fff8d8" opacity="0.7" transform="rotate(-25 27 38)"/>
      <circle cx="13" cy="22" r="1.6" fill="#ffd75e"/>
      <circle cx="50" cy="15" r="1.3" fill="#ffd75e"/>
      <circle cx="52" cy="27" r="1.8" fill="#ffb347"/>
      <circle cx="15" cy="38" r="1.2" fill="#ffb347"/>
    </svg>`,

  teleport: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="tpRing" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#59e0ff"/>
          <stop offset="100%" stop-color="#8f6bff"/>
        </linearGradient>
        <radialGradient id="tpGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#59e0ff" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#59e0ff" stop-opacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="32" r="27" fill="url(#tpGlow)"/>
      <circle cx="32" cy="32" r="23" fill="none" stroke="url(#tpRing)" stroke-width="3.5" stroke-dasharray="11 7" stroke-linecap="round"/>
      <circle cx="32" cy="32" r="15" fill="none" stroke="url(#tpRing)" stroke-width="2.5" stroke-dasharray="8 6" stroke-linecap="round" opacity="0.75" transform="rotate(28 32 32)"/>
      <path d="M32 21 L40 33 L35 33 L35 43 L29 43 L29 33 L24 33 Z" fill="#eafcff" stroke="#2b7f9e" stroke-width="1.6" stroke-linejoin="round"/>
      <path d="M49 10 l2.1 4 4 2.1 -4 2.1 -2.1 4 -2.1 -4 -4 -2.1 4 -2.1 Z" fill="#aef2ff"/>
      <path d="M13 43 l1.7 3.2 3.2 1.7 -3.2 1.7 -1.7 3.2 -1.7 -3.2 -3.2 -1.7 3.2 -1.7 Z" fill="#cbb2ff"/>
    </svg>`,

  chainlightning: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="clBolt" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fff8c8"/>
          <stop offset="45%" stop-color="#ffd83d"/>
          <stop offset="100%" stop-color="#ff9d1f"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="25" fill="#ffd83d" opacity="0.12"/>
      <path d="M37 3 L17 33 L28 33 L23 61 L47 27 L34 27 Z" fill="url(#clBolt)" stroke="#7a4a08" stroke-width="2" stroke-linejoin="round"/>
      <path d="M13 10 L8 20 L12 20 L9 29 L17 18 L13 18 Z" fill="#ffd83d" opacity="0.85"/>
      <path d="M52 38 L47 47 L51 47 L48 56 L56 45 L52 45 Z" fill="#ffd83d" opacity="0.85"/>
      <path d="M15 17 Q22 21 22 29" fill="none" stroke="#ffe98a" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.8"/>
      <path d="M49 46 Q42 42 41 34" fill="none" stroke="#ffe98a" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.8"/>
    </svg>`,

  swordRange: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="srBlade" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#f4f9ff"/>
          <stop offset="50%" stop-color="#b9c8d8"/>
          <stop offset="100%" stop-color="#7e93a8"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="27" fill="#ffcc00" opacity="0.06"/>
      <circle cx="32" cy="32" r="27" fill="none" stroke="#ffcc00" stroke-width="2" stroke-dasharray="6 7" opacity="0.85"/>
      <path d="M32 6 L38 14 L38 36 L26 36 L26 14 Z" fill="url(#srBlade)" stroke="#3c4a58" stroke-width="1.5" stroke-linejoin="round"/>
      <path d="M32 7 L32 36" stroke="#ffffff" stroke-width="1.4" opacity="0.7"/>
      <rect x="21" y="36" width="22" height="5" rx="2" fill="#ffcc00" stroke="#7a5c00" stroke-width="1.2"/>
      <rect x="29.2" y="41" width="5.6" height="11" rx="1.5" fill="#8a5a2b" stroke="#4a2f14" stroke-width="1.2"/>
      <circle cx="32" cy="54.5" r="3.2" fill="#ffcc00" stroke="#7a5c00" stroke-width="1.2"/>
    </svg>`,

  swordDamage: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="sdBlade" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="45%" stop-color="#c8d6e4"/>
          <stop offset="100%" stop-color="#8298ac"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="26" fill="#ff4444" opacity="0.08"/>
      <path d="M56 8 L33.9 37.9 L26.1 30.1 Z" fill="url(#sdBlade)" stroke="#3c4a58" stroke-width="1.5" stroke-linejoin="round"/>
      <path d="M56 8 L30 34" stroke="#ffffff" stroke-width="1.4" opacity="0.75"/>
      <path d="M35.3 42.9 L38.9 39.3 L24.7 25.1 L21.1 28.7 Z" fill="#ffcc00" stroke="#7a5c00" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M31.8 35.8 L23.3 44.3 L19.7 40.7 L28.2 32.2 Z" fill="#8a5a2b" stroke="#4a2f14" stroke-width="1.2" stroke-linejoin="round"/>
      <circle cx="20.3" cy="43.7" r="3.4" fill="#ffcc00" stroke="#7a5c00" stroke-width="1.2"/>
      <path d="M46 11 l1.8 5.2 5.2 1.8 -5.2 1.8 -1.8 5.2 -1.8 -5.2 -5.2 -1.8 5.2 -1.8 Z" fill="#ffffff" opacity="0.9"/>
      <path d="M14 52 l1.2 3.4 3.4 1.2 -3.4 1.2 -1.2 3.4 -1.2 -3.4 -3.4 -1.2 3.4 -1.2 Z" fill="#ffd75e" opacity="0.85"/>
    </svg>`,

  regen: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="rgCross" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#b8ffb0"/>
          <stop offset="100%" stop-color="#2fae3f"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="25" fill="#44cc44" opacity="0.12"/>
      <circle cx="32" cy="32" r="24" fill="none" stroke="#7be27b" stroke-width="1.5" stroke-dasharray="2 5" stroke-linecap="round" opacity="0.7"/>
      <path d="M26 12 h12 v14 h14 v12 h-14 v14 h-12 v-14 h-14 v-12 h14 Z" fill="url(#rgCross)" stroke="#145a1e" stroke-width="2" stroke-linejoin="round"/>
      <path d="M50 12 l1.6 3 3 1.6 -3 1.6 -1.6 3 -1.6 -3 -3 -1.6 3 -1.6 Z" fill="#d6ffd0"/>
      <circle cx="13" cy="17" r="1.8" fill="#b8ffb0"/>
      <circle cx="52" cy="48" r="1.5" fill="#b8ffb0"/>
    </svg>`,

  lifesteal: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="lsDrop" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ff6b7d"/>
          <stop offset="55%" stop-color="#c2274f"/>
          <stop offset="100%" stop-color="#6e1030"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="37" r="24" fill="#c2274f" opacity="0.12"/>
      <path d="M32 6 C38 15 48 23 48 37 A16 16 0 0 1 16 37 C16 23 26 15 32 6 Z" fill="url(#lsDrop)" stroke="#3d0a1c" stroke-width="2"/>
      <path d="M26 27 L29.3 37 L32.6 27 Z" fill="#fff" stroke="#3d0a1c" stroke-width="0.8"/>
      <path d="M33.4 27 L36.7 37 L40 27 Z" fill="#fff" stroke="#3d0a1c" stroke-width="0.8"/>
      <ellipse cx="24" cy="36" rx="3.5" ry="5" fill="#ff9ab0" opacity="0.5" transform="rotate(18 24 36)"/>
      <path d="M4 29 H12 M12 29 L8.5 26 M12 29 L8.5 32" fill="none" stroke="#ff9ab0" stroke-width="2" stroke-linecap="round"/>
      <path d="M60 41 H52 M52 41 L55.5 38 M52 41 L55.5 44" fill="none" stroke="#ff9ab0" stroke-width="2" stroke-linecap="round"/>
    </svg>`,

  shield: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="shBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#6fc3ff"/>
          <stop offset="60%" stop-color="#2e7cd6"/>
          <stop offset="100%" stop-color="#1b4d94"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="26" fill="#3399ff" opacity="0.12"/>
      <path d="M32 5 L53 13 V30 C53 44 45 53 32 59 C19 53 11 44 11 30 V13 Z" fill="url(#shBody)" stroke="#0f2f5c" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M32 10 L48 16 V30 C48 41 42 48 32 53 C22 48 16 41 16 30 V16 Z" fill="none" stroke="#a8dcff" stroke-width="1.5" opacity="0.7"/>
      <path d="M32 10 L32 53" stroke="#a8dcff" stroke-width="1.5" opacity="0.5"/>
      <path d="M47 8 l1.6 3 3 1.6 -3 1.6 -1.6 3 -1.6 -3 -3 -1.6 3 -1.6 Z" fill="#dff1ff"/>
    </svg>`,

  maxHp: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <radialGradient id="vhHeart" cx="35%" cy="30%" r="80%">
          <stop offset="0%" stop-color="#ff8f8f"/>
          <stop offset="55%" stop-color="#e42536"/>
          <stop offset="100%" stop-color="#8c0f1e"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="32" r="26" fill="#e42536" opacity="0.12"/>
      <path d="M32 55 C22 46 9 37 9 24 C9 15 16 9 23.5 9 C27.5 9 30.7 11 32 14.5 C33.3 11 36.5 9 40.5 9 C48 9 55 15 55 24 C55 37 42 46 32 55 Z" fill="url(#vhHeart)" stroke="#4d0812" stroke-width="2.5" stroke-linejoin="round"/>
      <ellipse cx="23" cy="20" rx="6" ry="4" fill="#ffd0d0" opacity="0.6" transform="rotate(-20 23 20)"/>
      <path d="M29 23 h6 v7 h7 v6 h-7 v7 h-6 v-7 h-7 v-6 h7 Z" fill="#fff" opacity="0.92"/>
    </svg>`,

  thorns: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="thThorn" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="#3e7a2a"/>
          <stop offset="100%" stop-color="#9fdc6e"/>
        </linearGradient>
        <path id="thSpike" d="M32 5.5 L36.5 16 L27.5 16 Z"/>
      </defs>
      <circle cx="32" cy="32" r="25" fill="#5a9e3a" opacity="0.1"/>
      <g fill="url(#thThorn)" stroke="#1e3d12" stroke-width="1.5" stroke-linejoin="round">
        <use href="#thSpike"/>
        <use href="#thSpike" transform="rotate(45 32 32)"/>
        <use href="#thSpike" transform="rotate(90 32 32)"/>
        <use href="#thSpike" transform="rotate(135 32 32)"/>
        <use href="#thSpike" transform="rotate(180 32 32)"/>
        <use href="#thSpike" transform="rotate(225 32 32)"/>
        <use href="#thSpike" transform="rotate(270 32 32)"/>
        <use href="#thSpike" transform="rotate(315 32 32)"/>
      </g>
      <circle cx="32" cy="32" r="13" fill="none" stroke="#2f5c1e" stroke-width="5.5"/>
      <circle cx="32" cy="32" r="13" fill="none" stroke="#78b954" stroke-width="1.5" opacity="0.6"/>
    </svg>`,

  speed: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="spBoot" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ffe08a"/>
          <stop offset="100%" stop-color="#d99a2b"/>
        </linearGradient>
      </defs>
      <circle cx="34" cy="32" r="26" fill="#ffe08a" opacity="0.08"/>
      <path d="M4 18 H15" stroke="#ffe08a" stroke-width="3" stroke-linecap="round" opacity="0.85"/>
      <path d="M2 28 H12" stroke="#ffe08a" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
      <path d="M6 38 H14" stroke="#ffe08a" stroke-width="3" stroke-linecap="round" opacity="0.55"/>
      <path d="M23 10 h11 v20 c0 2.5 1 4 3.5 5 l9.5 3.5 c5 1.8 8 5.2 8 9.5 v4 h-32 Z" fill="url(#spBoot)" stroke="#6e4a12" stroke-width="2" stroke-linejoin="round"/>
      <rect x="20.5" y="5" width="16" height="6.5" rx="2.5" fill="#ffcf5e" stroke="#6e4a12" stroke-width="2"/>
      <path d="M27 48 h24" stroke="#6e4a12" stroke-width="2" opacity="0.6"/>
    </svg>`,

  aura: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="auRing" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#7fe3ff"/>
          <stop offset="100%" stop-color="#3a7bd6"/>
        </linearGradient>
        <radialGradient id="auGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#7fe3ff" stop-opacity="0.35"/>
          <stop offset="70%" stop-color="#3a7bd6" stop-opacity="0.12"/>
          <stop offset="100%" stop-color="#3a7bd6" stop-opacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="32" r="28" fill="url(#auGlow)"/>
      <circle cx="32" cy="32" r="24" fill="none" stroke="url(#auRing)" stroke-width="3.5"/>
      <circle cx="32" cy="32" r="16" fill="none" stroke="#7fe3ff" stroke-width="1.8" stroke-dasharray="5 6" opacity="0.8"/>
      <circle cx="32" cy="32" r="8" fill="none" stroke="#a8ecff" stroke-width="1.5" opacity="0.7"/>
      <path d="M54 12 l1.8 3.4 3.4 1.8 -3.4 1.8 -1.8 3.4 -1.8 -3.4 -3.4 -1.8 3.4 -1.8 Z" fill="#a8ecff"/>
      <path d="M10 46 l1.4 2.6 2.6 1.4 -2.6 1.4 -1.4 2.6 -1.4 -2.6 -2.6 -1.4 2.6 -1.4 Z" fill="#7fe3ff" opacity="0.9"/>
    </svg>`,

  boomerang: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="bmWood" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#e8a94e"/>
          <stop offset="55%" stop-color="#b26b25"/>
          <stop offset="100%" stop-color="#7c4715"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="26" fill="#e8a94e" opacity="0.1"/>
      <circle cx="32" cy="32" r="24" fill="none" stroke="#e8a94e" stroke-width="1.5" stroke-dasharray="2 6" stroke-linecap="round" opacity="0.6"/>
      <path d="M44 13 C51 21 51 30 45 36 C39.5 41.5 31 40 27 34 L25 36.5 C28.5 45 40 47.5 47 42.5 C55 37 56 23.5 50 15.5 L44 13 Z"
        fill="url(#bmWood)" stroke="#4a2a0c" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M45 16 C50 22.5 50 29 45 34 C41 38 34.5 37 31 32.5" fill="none" stroke="#ffd98a" stroke-width="1.6" opacity="0.75"/>
      <path d="M20 44 l1.8 3.2 3.2 1.8 -3.2 1.8 -1.8 3.2 -1.8 -3.2 -3.2 -1.8 3.2 -1.8 Z" fill="#ffd98a"/>
    </svg>`,

  trap: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="trJaw" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#c9d4e0"/>
          <stop offset="60%" stop-color="#7e93a8"/>
          <stop offset="100%" stop-color="#4a5a6c"/>
        </linearGradient>
      </defs>
      <circle cx="32" cy="34" r="25" fill="#7e93a8" opacity="0.1"/>
      <path d="M10 24 A22 22 0 0 1 54 24 L54 30 L10 30 Z" fill="url(#trJaw)" stroke="#2a3440" stroke-width="2" stroke-linejoin="round"/>
      <path d="M10 26 A22 22 0 0 1 54 26 L54 24 L10 24 Z" fill="#eef4fa" opacity="0.6"/>
      <g fill="#eef4fa" stroke="#2a3440" stroke-width="1.4">
        <path d="M13 30 l2.4 7 -4.8 0 Z"/>
        <path d="M23 30 l2.4 8 -4.8 0 Z"/>
        <path d="M33 30 l2.4 8 -4.8 0 Z"/>
        <path d="M43 30 l2.4 8 -4.8 0 Z"/>
        <path d="M53 30 l2.4 7 -4.8 0 Z"/>
      </g>
      <path d="M20 40 h24" stroke="#2a3440" stroke-width="2" opacity="0.7"/>
      <path d="M15 12 l1.6 3 3 1.6 -3 1.6 -1.6 3 -1.6 -3 -3 -1.6 3 -1.6 Z" fill="#ffcc00"/>
      <circle cx="50" cy="13" r="1.6" fill="#eef4fa"/>
    </svg>`,

  gascloud: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
      <defs>
        <radialGradient id="gcPuff" cx="40%" cy="35%" r="75%">
          <stop offset="0%" stop-color="#b8f28a"/>
          <stop offset="55%" stop-color="#5cae3a"/>
          <stop offset="100%" stop-color="#2f6b1c"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="38" r="25" fill="#5cae3a" opacity="0.12"/>
      <g fill="url(#gcPuff)" stroke="#1c3d10" stroke-width="2" stroke-linejoin="round">
        <circle cx="24" cy="40" r="11"/>
        <circle cx="40" cy="36" r="13"/>
        <circle cx="32" cy="28" r="10"/>
        <circle cx="44" cy="47" r="7"/>
        <circle cx="18" cy="46" r="6"/>
      </g>
      <g fill="#c9f7a0" opacity="0.55">
        <circle cx="21" cy="37" r="3.4"/>
        <circle cx="37" cy="33" r="3.8"/>
        <circle cx="30" cy="25" r="3"/>
      </g>
      <circle cx="50" cy="14" r="1.6" fill="#c9f7a0"/>
      <circle cx="12" cy="20" r="1.4" fill="#b8f28a"/>
    </svg>`,
};

export function skillIcon(id: string): string {
  return ICONS[id] ?? '';
}
