/* eslint-disable */
// ザコ敵5種 + 中ボス14体 (各章2体) SVG定義

const EnemyDefs = () => (
  <defs>
    <linearGradient id="z-purple" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#9D4ED4" />
      <stop offset="100%" stopColor="#4A1D5C" />
    </linearGradient>
    <linearGradient id="z-dark" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#3D1A4A" />
      <stop offset="100%" stopColor="#1A0A2A" />
    </linearGradient>
    <linearGradient id="z-magenta" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#FF6FC8" />
      <stop offset="100%" stopColor="#D4264E" />
    </linearGradient>
    <linearGradient id="z-cyan" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#9BF0FF" />
      <stop offset="100%" stopColor="#00C8FF" />
    </linearGradient>
    <linearGradient id="z-mars" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#C9743A" />
      <stop offset="100%" stopColor="#6B3A1F" />
    </linearGradient>
    <linearGradient id="z-gold" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#FFD86A" />
      <stop offset="100%" stopColor="#C9912C" />
    </linearGradient>
    <radialGradient id="z-eye">
      <stop offset="0%" stopColor="#FFE600" />
      <stop offset="100%" stopColor="#FF3CAA" />
    </radialGradient>
  </defs>
);

// ─── ザコ敵5種 (viewBox -200 -40 400 480) ───

// Z1: ポチ・ドローン(球体偵察機) - 浮遊
const Zako1 = () => (
  <svg viewBox="-200 -40 400 480" width="100%" height="100%">
    <EnemyDefs/>
    <ellipse cx="0" cy="380" rx="80" ry="10" fill="#9D4ED4" opacity="0.3"/>
    <circle cx="0" cy="200" r="100" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="0" cy="180" r="80" fill="url(#z-dark)"/>
    <circle cx="0" cy="200" r="36" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    <circle cx="-8" cy="194" r="10" fill="#fff" opacity="0.9"/>
    {/* antenna */}
    <rect x="-4" y="80" width="8" height="40" fill="#1A0A2A"/>
    <circle cx="0" cy="76" r="8" fill="#FF3CAA"/>
    {/* hover rim */}
    <ellipse cx="0" cy="290" rx="110" ry="14" fill="none" stroke="#FF3CAA" strokeWidth="2" opacity="0.7"/>
    <ellipse cx="0" cy="290" rx="130" ry="18" fill="none" stroke="#9D4ED4" strokeWidth="1" opacity="0.4"/>
    {/* side panels */}
    <rect x="-95" y="195" width="20" height="10" fill="#FF3CAA"/>
    <rect x="75" y="195" width="20" height="10" fill="#FF3CAA"/>
  </svg>
);

// Z2: ナノ・ビット(矩形3連、地上)
const Zako2 = () => (
  <svg viewBox="-200 -40 400 480" width="100%" height="100%">
    <EnemyDefs/>
    <ellipse cx="0" cy="380" rx="140" ry="10" fill="#9D4ED4" opacity="0.3"/>
    {/* center bot */}
    <rect x="-50" y="180" width="100" height="200" rx="6" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-32" y="200" width="64" height="40" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="-25" y="208" width="22" height="24" fill="#1A0A2A"/>
    <rect x="3" y="208" width="22" height="24" fill="#1A0A2A"/>
    <rect x="-40" y="260" width="80" height="6" fill="#FF3CAA"/>
    <rect x="-40" y="272" width="80" height="6" fill="#FF3CAA"/>
    <rect x="-40" y="284" width="80" height="6" fill="#FF3CAA"/>
    {/* side bits */}
    <rect x="-130" y="240" width="50" height="120" rx="4" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="-118" y="260" width="26" height="14" fill="url(#z-eye)"/>
    <rect x="80" y="240" width="50" height="120" rx="4" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="92" y="260" width="26" height="14" fill="url(#z-eye)"/>
    {/* tracks */}
    <rect x="-145" y="350" width="80" height="14" rx="6" fill="#1A0A2A"/>
    <rect x="-50" y="370" width="100" height="14" rx="6" fill="#1A0A2A"/>
    <rect x="65" y="350" width="80" height="14" rx="6" fill="#1A0A2A"/>
  </svg>
);

// Z3: パイロ・ボム(球体・トゲ・赤)
const Zako3 = () => (
  <svg viewBox="-200 -40 400 480" width="100%" height="100%">
    <EnemyDefs/>
    <ellipse cx="0" cy="380" rx="120" ry="12" fill="#CC1A00" opacity="0.3"/>
    {/* spikes */}
    {[0,30,60,90,120,150,180,210,240,270,300,330].map(a=>{
      const r1=110, r2=145, rad=a*Math.PI/180;
      return <path key={a} d={`M ${Math.cos(rad)*r1} ${200+Math.sin(rad)*r1} L ${Math.cos(rad)*r2} ${200+Math.sin(rad)*r2} L ${Math.cos((a+15)*Math.PI/180)*r1} ${200+Math.sin((a+15)*Math.PI/180)*r1} Z`}
                fill="#1A0A2A" stroke="#CC1A00" strokeWidth="1"/>;
    })}
    <circle cx="0" cy="200" r="110" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="0" cy="200" r="80" fill="url(#z-dark)"/>
    {/* fuse */}
    <path d="M 0 90 Q 30 60 50 30" stroke="#FFD86A" strokeWidth="4" fill="none"/>
    <circle cx="50" cy="30" r="12" fill="#FFD86A" filter="blur(2px)"/>
    {/* angry eyes */}
    <path d="M -45 190 L -15 200 L -45 210 Z" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    <path d="M 45 190 L 15 200 L 45 210 Z" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* mouth */}
    <path d="M -25 240 L 25 240 L 18 260 L -18 260 Z" fill="#1A0A2A"/>
    <path d="M -15 248 L -10 254 L -5 248 L 0 254 L 5 248 L 10 254 L 15 248" stroke="#FF3CAA" strokeWidth="2" fill="none"/>
  </svg>
);

// Z4: シルエ・ゴースト(影系)
const Zako4 = () => (
  <svg viewBox="-200 -40 400 480" width="100%" height="100%">
    <EnemyDefs/>
    <ellipse cx="0" cy="380" rx="100" ry="14" fill="#9D4ED4" opacity="0.5"/>
    {/* wavy ghost body */}
    <path d="M -90 380 Q -100 200 0 100 Q 100 200 90 380 Q 70 360 50 380 Q 30 360 10 380 Q -10 360 -30 380 Q -50 360 -70 380 Q -80 370 -90 380 Z"
          fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3" opacity="0.85"/>
    <path d="M -60 380 Q -70 220 0 130 Q 70 220 60 380 Q 50 370 40 380 Q 20 370 0 380 Q -20 370 -40 380 Q -50 370 -60 380 Z"
          fill="url(#z-dark)" opacity="0.7"/>
    {/* eye sockets */}
    <ellipse cx="-26" cy="220" rx="14" ry="20" fill="#1A0A2A"/>
    <ellipse cx="26" cy="220" rx="14" ry="20" fill="#1A0A2A"/>
    <circle cx="-26" cy="220" r="6" fill="#FF3CAA"/>
    <circle cx="26" cy="220" r="6" fill="#FF3CAA"/>
    {/* hollow chest */}
    <circle cx="0" cy="280" r="14" fill="#FF3CAA" opacity="0.7"/>
    {/* floating wisps */}
    <circle cx="-110" cy="240" r="8" fill="#9D4ED4" opacity="0.4"/>
    <circle cx="120" cy="280" r="6" fill="#FF3CAA" opacity="0.5"/>
    <circle cx="-90" cy="320" r="5" fill="#9D4ED4" opacity="0.5"/>
  </svg>
);

// Z5: クラッシャー(ヒューマノイド型雑兵)
const Zako5 = () => (
  <svg viewBox="-200 -40 400 480" width="100%" height="100%">
    <EnemyDefs/>
    <ellipse cx="0" cy="380" rx="110" ry="12" fill="#9D4ED4" opacity="0.3"/>
    {/* legs */}
    <rect x="-50" y="270" width="32" height="100" rx="4" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="18" y="270" width="32" height="100" rx="4" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-60" y="360" width="50" height="20" rx="3" fill="#1A0A2A"/>
    <rect x="10" y="360" width="50" height="20" rx="3" fill="#1A0A2A"/>
    {/* torso */}
    <path d="M -70 150 L 70 150 L 80 280 L -80 280 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-30" y="180" width="60" height="80" fill="url(#z-dark)"/>
    <circle cx="0" cy="220" r="14" fill="#FF3CAA"/>
    {/* arms */}
    <rect x="-110" y="160" width="34" height="160" rx="6" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="76" y="160" width="34" height="160" rx="6" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    {/* hammer fists */}
    <rect x="-122" y="300" width="58" height="40" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="64" y="300" width="58" height="40" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    {/* head */}
    <rect x="-36" y="80" width="72" height="60" rx="6" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-26" y="100" width="52" height="14" fill="url(#z-eye)"/>
    {/* horns */}
    <path d="M -36 90 L -56 60 L -28 80 Z" fill="#1A0A2A"/>
    <path d="M 36 90 L 56 60 L 28 80 Z" fill="#1A0A2A"/>
  </svg>
);

// ─── 中ボス14体 (各章2体, viewBox -250 -20 500 540) ───
// 各章のテーマカラーを引用

const Mid = ({theme, children}) => (
  <svg viewBox="-250 -20 500 540" width="100%" height="100%">
    <EnemyDefs/>
    <ellipse cx="0" cy="500" rx="170" ry="14" fill={theme} opacity="0.35"/>
    {children}
  </svg>
);

// CH1 月面 ─────────────────
// M1-1: ルナ・ガード(月面警備、メタリックスリム)
const Mid1A = () => (
  <Mid theme="#9D4ED4">
    {/* legs */}
    <rect x="-60" y="320" width="40" height="170" rx="4" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="20" y="320" width="40" height="170" rx="4" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-70" y="470" width="60" height="20" fill="#1A0A2A"/>
    <rect x="10" y="470" width="60" height="20" fill="#1A0A2A"/>
    {/* torso */}
    <path d="M -90 180 L 90 180 L 110 340 L -110 340 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -60 200 L 60 200 L 75 320 L -75 320 Z" fill="url(#z-dark)"/>
    <circle cx="0" cy="260" r="20" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* shield arm */}
    <rect x="-160" y="200" width="40" height="160" rx="6" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -200 240 L -120 240 L -110 340 L -210 340 Z" fill="#9D4ED4" stroke="#1A0A2A" strokeWidth="3"/>
    {/* spear arm */}
    <rect x="120" y="200" width="40" height="160" rx="6" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="135" y="80" width="10" height="280" fill="#1A0A2A"/>
    <path d="M 140 60 L 130 90 L 150 90 Z" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* head — visored */}
    <path d="M -50 110 L 50 110 L 70 160 L 60 200 L -60 200 L -70 160 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-44" y="148" width="88" height="14" fill="url(#z-eye)"/>
    <path d="M -50 110 L -10 80 L 10 80 L 50 110 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
  </Mid>
);
// M1-2: クレーター・クロウ(クレーターから出現、爪型)
const Mid1B = () => (
  <Mid theme="#9D4ED4">
    {/* body — crab-like */}
    <ellipse cx="0" cy="320" rx="140" ry="80" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <ellipse cx="0" cy="300" rx="100" ry="50" fill="url(#z-dark)"/>
    {/* claws */}
    <path d="M -180 240 L -120 200 L -90 240 L -130 280 L -180 290 L -200 270 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -200 240 L -220 180 L -240 220 L -200 260 Z" fill="#1A0A2A" stroke="#1A0A2A" strokeWidth="2"/>
    <path d="M -200 250 L -200 290 L -240 280 L -230 260 Z" fill="#1A0A2A"/>
    <path d="M 180 240 L 120 200 L 90 240 L 130 280 L 180 290 L 200 270 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 200 240 L 220 180 L 240 220 L 200 260 Z" fill="#1A0A2A"/>
    <path d="M 200 250 L 200 290 L 240 280 L 230 260 Z" fill="#1A0A2A"/>
    {/* legs */}
    <path d="M -100 360 L -150 460 M -50 380 L -80 470 M 50 380 L 80 470 M 100 360 L 150 460" stroke="#1A0A2A" strokeWidth="10" strokeLinecap="round"/>
    {/* eyes */}
    <circle cx="-30" cy="290" r="14" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    <circle cx="30" cy="290" r="14" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* antenna stalks */}
    <path d="M -30 250 L -40 200 M 30 250 L 40 200" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="-40" cy="195" r="6" fill="#FF3CAA"/>
    <circle cx="40" cy="195" r="6" fill="#FF3CAA"/>
  </Mid>
);

// CH2 火星 ─────────────────
// M2-1: 砂塵バギー
const Mid2A = () => (
  <Mid theme="#C9743A">
    {/* wheels */}
    <circle cx="-150" cy="430" r="50" fill="#1A0A2A" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="-150" cy="430" r="22" fill="#9D4ED4"/>
    <circle cx="150" cy="430" r="50" fill="#1A0A2A" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="150" cy="430" r="22" fill="#9D4ED4"/>
    {/* chassis */}
    <path d="M -200 380 L 200 380 L 180 280 L 80 240 L -80 240 L -180 280 Z" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -120 250 L 120 250 L 100 200 L -100 200 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-80" y="210" width="160" height="30" fill="url(#z-eye)"/>
    {/* gun on top */}
    <rect x="-15" y="140" width="30" height="80" fill="#1A0A2A"/>
    <rect x="-30" y="110" width="60" height="40" rx="4" fill="#1A0A2A" stroke="#CC1A00" strokeWidth="2"/>
    <circle cx="0" cy="130" r="8" fill="url(#z-magenta)"/>
    {/* exhaust */}
    <path d="M -200 320 L -240 310 L -240 340 L -200 350 Z" fill="#1A0A2A"/>
    <circle cx="-250" cy="325" r="8" fill="#FFD86A" opacity="0.6"/>
  </Mid>
);
// M2-2: 戦闘パイロット(歩兵+ライフル)
const Mid2B = () => (
  <Mid theme="#C9743A">
    {/* legs */}
    <path d="M -40 290 L -20 290 L -20 490 L -50 490 Z" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 40 290 L 20 290 L 20 490 L 50 490 Z" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-58" y="475" width="40" height="20" fill="#1A0A2A"/>
    <rect x="18" y="475" width="40" height="20" fill="#1A0A2A"/>
    {/* torso */}
    <path d="M -70 160 L 70 160 L 80 310 L -80 310 Z" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -50 180 L 50 180 L 60 290 L -60 290 Z" fill="url(#z-dark)"/>
    <rect x="-30" y="200" width="60" height="20" fill="url(#z-magenta)"/>
    <rect x="-30" y="230" width="60" height="10" fill="#FFD86A"/>
    {/* rifle */}
    <rect x="-180" y="250" width="120" height="20" fill="#1A0A2A"/>
    <rect x="-60" y="245" width="40" height="30" fill="#1A0A2A"/>
    <circle cx="-185" cy="260" r="8" fill="url(#z-magenta)"/>
    {/* arms */}
    <rect x="-100" y="180" width="32" height="100" rx="6" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="68" y="180" width="32" height="100" rx="6" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
    {/* head — helmet w/ visor */}
    <path d="M -44 90 L 44 90 L 60 140 L 50 180 L -50 180 L -60 140 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-38" y="128" width="76" height="14" fill="url(#z-eye)"/>
    <path d="M -50 90 L 0 60 L 50 90 L 30 110 L -30 110 Z" fill="url(#z-mars)" stroke="#1A0A2A" strokeWidth="3"/>
  </Mid>
);

// CH3 木星 ─────────────────
// M3-1: 海賊スカウト
const Mid3A = () => (
  <Mid theme="#D4264E">
    {/* legs */}
    <path d="M -50 280 L -10 280 L -20 470 L -60 470 Z" fill="#1A0A2A" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 50 280 L 10 280 L 20 470 L 60 470 Z" fill="#1A0A2A" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-68" y="455" width="50" height="22" rx="3" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="18" y="455" width="50" height="22" rx="3" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* torso */}
    <path d="M -70 130 L 70 130 L 90 300 L -90 300 Z" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -30 150 L 30 150 L 20 260 L -20 260 Z" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* belt */}
    <rect x="-80" y="260" width="160" height="14" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* arms */}
    <rect x="-110" y="160" width="32" height="140" rx="6" fill="#1A0A2A"/>
    <rect x="78" y="160" width="32" height="140" rx="6" fill="#1A0A2A"/>
    {/* sword */}
    <rect x="100" y="280" width="6" height="40" fill="url(#z-gold)"/>
    <path d="M 102 280 Q 130 240 140 180 L 134 178 Q 124 230 100 278 Z" fill="#E5E5F0" stroke="#1A0A2A" strokeWidth="2"/>
    {/* head — bandana */}
    <path d="M -44 80 L 44 80 L 60 130 L 50 170 L -50 170 L -60 130 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -60 90 L 60 90 L 70 110 L -70 110 Z" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="-36" y="124" width="72" height="12" fill="url(#z-eye)"/>
    {/* eye patch */}
    <path d="M 10 130 L 50 122 L 50 142 L 10 138 Z" fill="#1A0A2A"/>
  </Mid>
);
// M3-2: 嵐の渦・タービン
const Mid3B = () => (
  <Mid theme="#D4264E">
    {/* center sphere */}
    <circle cx="0" cy="280" r="100" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="0" cy="280" r="70" fill="url(#z-magenta)" opacity="0.9"/>
    <circle cx="0" cy="280" r="40" fill="url(#z-gold)"/>
    <circle cx="0" cy="280" r="18" fill="#1A0A2A"/>
    {/* turbine blades */}
    {[0,72,144,216,288].map(a=>{
      const rad=a*Math.PI/180;
      const x=Math.cos(rad)*100, y=280+Math.sin(rad)*100;
      const x2=Math.cos(rad)*180, y2=280+Math.sin(rad)*180;
      return <g key={a} transform={`rotate(${a+20} 0 280)`}>
        <path d="M 100 0 L 180 -40 L 200 0 L 180 40 L 100 0 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
        <rect x="160" y="-8" width="40" height="16" fill="url(#z-magenta)"/>
      </g>;
    })}
    {/* vortex spirals around */}
    <path d="M -180 280 Q -120 200 -60 250" stroke="url(#z-magenta)" strokeWidth="4" fill="none" opacity="0.6"/>
    <path d="M 180 280 Q 120 360 60 310" stroke="url(#z-magenta)" strokeWidth="4" fill="none" opacity="0.6"/>
  </Mid>
);

// CH4 土星 ─────────────────
// M4-1: シャドウ・ホロウ(影、空洞)
const Mid4A = () => (
  <Mid theme="#9D4ED4">
    <path d="M -80 480 Q -110 320 -90 200 Q -40 110 0 100 Q 40 110 90 200 Q 110 320 80 480 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3" opacity="0.9"/>
    <path d="M -50 480 Q -80 320 -60 220 Q -20 150 0 145 Q 20 150 60 220 Q 80 320 50 480 Z" fill="url(#z-dark)"/>
    {/* hollow eye */}
    <circle cx="0" cy="220" r="40" fill="#1A0A2A"/>
    <circle cx="0" cy="220" r="22" fill="url(#z-magenta)"/>
    <circle cx="-6" cy="216" r="8" fill="#fff" opacity="0.8"/>
    {/* horn */}
    <path d="M 0 100 L -16 60 L 0 80 L 16 60 Z" fill="#1A0A2A"/>
    {/* arms — wisps */}
    <path d="M -90 280 Q -160 320 -180 400" stroke="url(#z-purple)" strokeWidth="20" strokeLinecap="round" fill="none" opacity="0.85"/>
    <path d="M 90 280 Q 160 320 180 400" stroke="url(#z-purple)" strokeWidth="20" strokeLinecap="round" fill="none" opacity="0.85"/>
  </Mid>
);
// M4-2: ミラージュ・スパイ(分身する密偵)
const Mid4B = () => (
  <Mid theme="#9D4ED4">
    {/* doubles behind */}
    <g opacity="0.4">
      <path d="M -150 220 L -90 220 L -100 480 L -160 480 Z" fill="url(#z-purple)"/>
      <circle cx="-125" cy="180" r="32" fill="url(#z-dark)"/>
    </g>
    <g opacity="0.6">
      <path d="M 80 230 L 140 230 L 130 480 L 70 480 Z" fill="url(#z-purple)"/>
      <circle cx="105" cy="190" r="32" fill="url(#z-dark)"/>
    </g>
    {/* main */}
    <path d="M -45 250 L 45 250 L 60 480 L -60 480 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -35 270 L 35 270 L 45 460 L -45 460 Z" fill="url(#z-purple)"/>
    {/* arms thin */}
    <path d="M -55 270 L -80 410 L -65 410 L -40 290 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="2"/>
    <path d="M 55 270 L 80 410 L 65 410 L 40 290 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* head */}
    <ellipse cx="0" cy="200" rx="42" ry="48" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    {/* mask */}
    <path d="M -32 200 L 32 200 L 28 230 L -28 230 Z" fill="#E5E5F0" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="-26" y="208" width="22" height="6" fill="#1A0A2A"/>
    <rect x="4" y="208" width="22" height="6" fill="#1A0A2A"/>
    {/* hood */}
    <path d="M -42 200 Q -40 150 0 140 Q 40 150 42 200 L 32 220 Q 0 200 -32 220 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
  </Mid>
);

// CH5 天王星 ─────────────────
// M5-1: 衛星ドローン群(リング装備)
const Mid5A = () => (
  <Mid theme="#9D4ED4">
    {/* central drone */}
    <circle cx="0" cy="260" r="80" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="0" cy="260" r="60" fill="url(#z-dark)"/>
    {/* ring around */}
    <ellipse cx="0" cy="260" rx="170" ry="30" fill="none" stroke="url(#z-gold)" strokeWidth="5" opacity="0.85"/>
    <ellipse cx="0" cy="260" rx="170" ry="30" fill="none" stroke="#FF3CAA" strokeWidth="2"/>
    {/* eye */}
    <circle cx="0" cy="260" r="28" fill="url(#z-eye)" stroke="#1A0A2A" strokeWidth="2"/>
    <circle cx="-6" cy="254" r="10" fill="#fff" opacity="0.8"/>
    {/* satellite kids */}
    <circle cx="-170" cy="250" r="14" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2"/>
    <circle cx="170" cy="270" r="14" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2"/>
    <circle cx="-100" cy="370" r="10" fill="#FF3CAA"/>
    <circle cx="100" cy="380" r="10" fill="#FF3CAA"/>
  </Mid>
);
// M5-2: ジオ・カット(図形系)
const Mid5B = () => (
  <Mid theme="#9D4ED4">
    {/* hexagon body */}
    <path d="M 0 130 L 130 200 L 130 360 L 0 430 L -130 360 L -130 200 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 0 170 L 90 220 L 90 340 L 0 390 L -90 340 L -90 220 Z" fill="url(#z-dark)"/>
    {/* center triangle */}
    <path d="M 0 220 L 60 320 L -60 320 Z" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
    <circle cx="0" cy="290" r="14" fill="url(#z-eye)"/>
    {/* floating shapes */}
    <rect x="-180" y="200" width="30" height="30" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2" transform="rotate(20 -165 215)"/>
    <circle cx="170" cy="220" r="18" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2"/>
    <path d="M -180 380 L -150 350 L -120 380 L -150 410 Z" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
    <path d="M 130 380 L 170 380 L 150 410 Z" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="2"/>
  </Mid>
);

// CH6 海王星 ─────────────────
// M6-1: 帝国親衛兵
const Mid6A = () => (
  <Mid theme="#1A0A2A">
    {/* legs */}
    <path d="M -50 280 L -10 280 L -20 490 L -60 490 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 50 280 L 10 280 L 20 490 L 60 490 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-66" y="478" width="50" height="20" fill="#CC1A00" stroke="#1A0A2A" strokeWidth="2"/>
    <rect x="16" y="478" width="50" height="20" fill="#CC1A00" stroke="#1A0A2A" strokeWidth="2"/>
    {/* cape */}
    <path d="M -100 200 L -160 460 L 160 460 L 100 200 Z" fill="#CC1A00" stroke="#1A0A2A" strokeWidth="3" opacity="0.85"/>
    {/* torso */}
    <path d="M -70 160 L 70 160 L 90 300 L -90 300 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -50 180 L 50 180 L 60 280 L -60 280 Z" fill="#1A0A2A"/>
    <circle cx="0" cy="230" r="16" fill="#CC1A00" stroke="#1A0A2A" strokeWidth="2"/>
    {/* shoulder spikes */}
    <path d="M -130 160 L -70 160 L -80 220 L -140 220 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 130 160 L 70 160 L 80 220 L 140 220 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    {/* halberd */}
    <rect x="150" y="60" width="10" height="380" fill="#1A0A2A"/>
    <path d="M 155 40 L 130 90 L 180 90 Z" fill="#CC1A00" stroke="#1A0A2A" strokeWidth="2"/>
    <path d="M 145 80 L 165 80 L 175 105 L 135 105 Z" fill="url(#z-gold)" stroke="#1A0A2A" strokeWidth="2"/>
    {/* head */}
    <path d="M -44 90 L 44 90 L 60 140 L 50 180 L -50 180 L -60 140 Z" fill="#1A0A2A" stroke="#1A0A2A" strokeWidth="3"/>
    <rect x="-38" y="128" width="76" height="12" fill="#CC1A00"/>
    {/* horns */}
    <path d="M -40 90 L -64 50 L -50 80 Z" fill="#1A0A2A" stroke="#CC1A00" strokeWidth="2"/>
    <path d="M 40 90 L 64 50 L 50 80 Z" fill="#1A0A2A" stroke="#CC1A00" strokeWidth="2"/>
  </Mid>
);
// M6-2: 天体ブレイカー(惑星機)
const Mid6B = () => (
  <Mid theme="#1A0A2A">
    {/* main planet body */}
    <circle cx="0" cy="280" r="140" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <ellipse cx="0" cy="280" rx="140" ry="30" fill="none" stroke="#CC1A00" strokeWidth="6"/>
    <ellipse cx="0" cy="280" rx="140" ry="30" fill="none" stroke="url(#z-gold)" strokeWidth="2"/>
    {/* core eye */}
    <circle cx="0" cy="270" r="36" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="0" cy="270" r="18" fill="#CC1A00"/>
    <circle cx="-6" cy="266" r="6" fill="#fff" opacity="0.8"/>
    {/* surface craters */}
    <circle cx="-60" cy="200" r="14" fill="#1A0A2A" opacity="0.6"/>
    <circle cx="80" cy="350" r="20" fill="#1A0A2A" opacity="0.6"/>
    <circle cx="-90" cy="370" r="12" fill="#1A0A2A" opacity="0.6"/>
    {/* mechanical claws below */}
    <path d="M -120 380 L -160 480 L -130 480 L -100 400 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M 120 380 L 160 480 L 130 480 L 100 400 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
  </Mid>
);

// CH7 暗黒星雲 ─────────────────
// M7-1: 闇の使徒
const Mid7A = () => (
  <Mid theme="#9D4ED4">
    {/* aura */}
    <circle cx="0" cy="270" r="230" fill="#9D4ED4" opacity="0.15"/>
    {/* cape */}
    <path d="M -110 220 L -180 480 L 180 480 L 110 220 Z" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -80 240 L -120 460 L 120 460 L 80 240 Z" fill="#050010"/>
    {/* core */}
    <circle cx="0" cy="320" r="30" fill="url(#z-magenta)" stroke="#1A0A2A" strokeWidth="3"/>
    <circle cx="0" cy="320" r="14" fill="#fff"/>
    {/* head — masked */}
    <ellipse cx="0" cy="180" rx="56" ry="62" fill="url(#z-dark)" stroke="#1A0A2A" strokeWidth="3"/>
    <path d="M -40 180 L 40 180 L 50 230 L -50 230 Z" fill="#FF3CAA"/>
    <rect x="-30" y="190" width="22" height="6" fill="#1A0A2A"/>
    <rect x="8" y="190" width="22" height="6" fill="#1A0A2A"/>
    {/* crown */}
    <path d="M -56 180 L -40 130 L -20 165 L 0 120 L 20 165 L 40 130 L 56 180 Z" fill="url(#z-purple)" stroke="#1A0A2A" strokeWidth="3"/>
  </Mid>
);
// M7-2: ネビュラ・コア(エネルギー体)
const Mid7B = () => (
  <Mid theme="#FF3CAA">
    <radialGradient id="neb-glow">
      <stop offset="0%" stopColor="#fff"/>
      <stop offset="30%" stopColor="#FF3CAA"/>
      <stop offset="100%" stopColor="#9D4ED4" stopOpacity="0"/>
    </radialGradient>
    <circle cx="0" cy="280" r="200" fill="url(#neb-glow)" opacity="0.6"/>
    <circle cx="0" cy="280" r="100" fill="url(#z-magenta)" stroke="#fff" strokeWidth="3"/>
    <circle cx="0" cy="280" r="60" fill="#fff" opacity="0.9"/>
    <circle cx="0" cy="280" r="20" fill="#1A0A2A"/>
    {/* energy arms */}
    {[0,72,144,216,288].map(a=>{
      const rad=a*Math.PI/180;
      const x1=Math.cos(rad)*100, y1=280+Math.sin(rad)*100;
      const x2=Math.cos(rad)*200, y2=280+Math.sin(rad)*200;
      return <path key={a} d={`M ${x1} ${y1} Q ${(x1+x2)/2 + Math.cos((a+90)*Math.PI/180)*30} ${(y1+y2)/2 + Math.sin((a+90)*Math.PI/180)*30} ${x2} ${y2}`}
                stroke="url(#z-magenta)" strokeWidth="14" strokeLinecap="round" fill="none" opacity="0.85"/>;
    })}
    {/* sparkles */}
    <circle cx="-120" cy="180" r="6" fill="#fff"/>
    <circle cx="140" cy="200" r="5" fill="#fff"/>
    <circle cx="100" cy="400" r="6" fill="#fff"/>
    <circle cx="-130" cy="380" r="5" fill="#fff"/>
  </Mid>
);

window.ZAKO = [Zako1, Zako2, Zako3, Zako4, Zako5];
window.MIDS = [
  [Mid1A, Mid1B], [Mid2A, Mid2B], [Mid3A, Mid3B], [Mid4A, Mid4B],
  [Mid5A, Mid5B], [Mid6A, Mid6B], [Mid7A, Mid7B]
];
