// CAOS — 14 sigilos (palo violeta)
// 1 PERTURBACIÓN · 2 FLUCTUACIÓN · 3 RUIDO · 4 AZAR · 5 DIVERGENCIA
// 6 TURBULENCIA · 7 AVALANCHA · 8 INCERTIDUMBRE · 9 ENTROPÍA · 10 CISNE NEGRO
// 11 EXPLORADOR · 12 MUTANTE · 13 CISNE NEGRA · 14 DEMONIO

const C_SVG = ({ children, size = 300 }) => (
  <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%">{children}</svg>
);
const _cr = (s) => {
  let a = s >>> 0;
  return () => {
    a = (a + 0x6D2B79F5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
};
const Arr_ = ({ id, color }) => (
  <marker id={id} markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M 0 0 L 6 3 L 0 6 Z" fill={color}/></marker>
);

// 1 · PERTURBACIÓN — arrow striking a baseline, ripples spread
const Sigil_PERTURBACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2 + 20;
  return <C_SVG size={size}>
    <defs><Arr_ id="acp1" color={color}/></defs>
    <line x1={20} y1={cy} x2={size-20} y2={cy} stroke={color} strokeWidth={1}/>
    {/* incoming arrow */}
    <line x1={cx-60} y1={cy-90} x2={cx-6} y2={cy-8} stroke={color} strokeWidth={1.6} markerEnd="url(#acp1)"/>
    {/* impact point */}
    <circle cx={cx} cy={cy} r={5} fill={color}/>
    {/* ripples — wave */}
    <path d={Array.from({length:60}).map((_,i)=>{
      const x = cx-100 + i*3.4;
      const dx = x - cx;
      const env = Math.exp(-Math.abs(dx)*0.025);
      const y = cy + Math.sin(dx*0.18)*16*env;
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={1}/>
    {/* concentric */}
    {[16, 32, 50].map((r,i)=>(<circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={color} strokeWidth={0.4} opacity={0.5-i*0.1}/>))}
  </C_SVG>;
};

// 2 · FLUCTUACIÓN — small bump growing on equilibrium curve
const Sigil_FLUCTUACION = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <C_SVG size={size}>
    <line x1={30} y1={cy+40} x2={size-30} y2={cy+40} stroke={color} strokeWidth={0.4} strokeDasharray="3 3" opacity={0.5}/>
    <text x={size-30} y={cy+34} fontSize={9} fill={color} textAnchor="end" fontFamily="serif" fontStyle="italic" opacity={0.65}>equilibrio</text>
    {/* time evolution: 4 snapshots of growing bump */}
    {[0, 1, 2, 3].map(k => {
      const amp = 8 + k*22;
      const y0 = cy + 40 - 6 - k*32;
      const path = Array.from({length:60}).map((_,i)=>{
        const x = 30 + (i/59)*(size-60);
        const dx = x - cx;
        const env = Math.exp(-(dx*dx)/(400+k*200));
        const y = y0 - amp*env;
        return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
      }).join(' ');
      return <path key={k} d={path} fill="none" stroke={color} strokeWidth={0.7+k*0.25} opacity={0.4+k*0.15}/>;
    })}
    {/* time arrow */}
    <line x1={20} y1={cy+30} x2={20} y2={cy-90} stroke={color} strokeWidth={0.5} markerEnd="url(#acp2)" opacity={0.7}/>
    <defs><Arr_ id="acp2" color={color}/></defs>
    <text x={14} y={cy-50} fontSize={8} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.7} transform={`rotate(-90 14 ${cy-50})`}>t</text>
  </C_SVG>;
};

// 3 · RUIDO — clean signal + noisy version overlaid
const Sigil_RUIDO = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const r = _cr(3);
  return <C_SVG size={size}>
    {/* clean sine */}
    <path d={Array.from({length:120}).map((_,i)=>{
      const x = 25 + (i/119)*(size-50);
      const y = cy - 25 + Math.sin(i*0.18)*20;
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={1.2} opacity={0.85}/>
    {/* noisy version below */}
    <path d={Array.from({length:200}).map((_,i)=>{
      const x = 25 + (i/199)*(size-50);
      const y = cy + 45 + Math.sin(i*0.18)*20 + (r()-0.5)*22;
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={0.5} opacity={0.85}/>
    <text x={25} y={cy-55} fontSize={9} fill={color} fontFamily="monospace" letterSpacing="2" opacity={0.7}>S</text>
    <text x={25} y={cy+15} fontSize={9} fill={color} fontFamily="monospace" letterSpacing="2" opacity={0.7}>S+N</text>
  </C_SVG>;
};

// 4 · AZAR — scattered dice in random positions
const Sigil_AZAR = ({ color, size = 300 }) => {
  const r = _cr(4);
  const dice = Array.from({length:6}).map((_,i)=>({
    x: 50 + r()*200, y: 50 + r()*200, rot: r()*60-30,
    face: 1 + Math.floor(r()*6),
  }));
  const faces = {
    1: [[0,0]],
    2: [[-6,-6],[6,6]],
    3: [[-6,-6],[0,0],[6,6]],
    4: [[-6,-6],[-6,6],[6,-6],[6,6]],
    5: [[-6,-6],[-6,6],[0,0],[6,-6],[6,6]],
    6: [[-6,-7],[-6,0],[-6,7],[6,-7],[6,0],[6,7]],
  };
  return <C_SVG size={size}>
    {dice.map((d,i)=>(
      <g key={i} transform={`translate(${d.x} ${d.y}) rotate(${d.rot})`}>
        <rect x={-22} y={-22} width={44} height={44} rx={5} fill="#000" stroke={color} strokeWidth={1.2}/>
        {faces[d.face].map(([px,py],k)=>(<circle key={k} cx={px} cy={py} r={2.5} fill={color}/>))}
      </g>
    ))}
  </C_SVG>;
};

// 5 · DIVERGENCIA — two trajectories splitting exponentially
const Sigil_DIVERGENCIA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const path = (sign) => Array.from({length:80}).map((_,i)=>{
    const t = i/79;
    const x = 30 + t*(size-60);
    const y = cy - sign*Math.exp(t*3.2)*4;
    return `${i===0?'M':'L'} ${x.toFixed(1)} ${Math.max(20,Math.min(size-20,y)).toFixed(1)}`;
  }).join(' ');
  return <C_SVG size={size}>
    <line x1={20} y1={cy} x2={size-20} y2={cy} stroke={color} strokeWidth={0.3} opacity={0.4}/>
    <path d={path(1)} fill="none" stroke={color} strokeWidth={1.4}/>
    <path d={path(-1)} fill="none" stroke={color} strokeWidth={1.4}/>
    {/* common start */}
    <circle cx={32} cy={cy-2} r={3} fill={color}/>
    <circle cx={32} cy={cy+2} r={3} fill={color}/>
    {/* gap indicator */}
    <line x1={size-26} y1={cy-86} x2={size-26} y2={cy+86} stroke={color} strokeWidth={0.4} strokeDasharray="2 2" opacity={0.7}/>
    <text x={size-30} y={cy} fontSize={11} fill={color} textAnchor="end" fontFamily="serif" fontStyle="italic" opacity={0.85}>e^λt</text>
  </C_SVG>;
};

// 6 · TURBULENCIA — cascade of eddies (Kolmogorov)
const Sigil_TURBULENCIA = ({ color, size = 300 }) => {
  const cx = size/2;
  return <C_SVG size={size}>
    {/* large eddy */}
    {[60, 40, 22, 14, 8].map((rr,k)=>{
      const x = 50 + k*55;
      const y = size/2 + (k%2 ? -28 : 28);
      return <g key={k}>
        <circle cx={x} cy={y} r={rr} fill="none" stroke={color} strokeWidth={0.8 + (5-k)*0.15}/>
        <path d={`M ${x} ${y-rr} A ${rr} ${rr} 0 0 1 ${x+rr*0.86} ${y-rr*0.5}`} fill="none" stroke={color} strokeWidth={1.2}/>
        {/* small eddies within */}
        {k < 4 && Array.from({length:4}).map((_,i)=>{
          const a = (i/4)*Math.PI*2;
          const px = x + Math.cos(a)*rr*0.6;
          const py = y + Math.sin(a)*rr*0.6;
          return <circle key={i} cx={px} cy={py} r={rr*0.18} fill="none" stroke={color} strokeWidth={0.4} opacity={0.7}/>;
        })}
      </g>;
    })}
    {/* energy cascade arrow */}
    <line x1={30} y1={size-22} x2={size-22} y2={size-22} stroke={color} strokeWidth={0.6} opacity={0.7} markerEnd="url(#acp6)"/>
    <defs><Arr_ id="acp6" color={color}/></defs>
    <text x={cx} y={size-8} fontSize={8} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.65}>escalas decrecientes</text>
  </C_SVG>;
};

// 7 · AVALANCHA — sand pile + power-law dist inset
const Sigil_AVALANCHA = ({ color, size = 300 }) => {
  const cx = size/2;
  return <C_SVG size={size}>
    {/* pile profile */}
    <path d={`M 30 ${size-30} L ${cx} 80 L ${size-30} ${size-30} Z`} fill={color} fillOpacity={0.12} stroke={color} strokeWidth={1.2}/>
    {/* sliding region */}
    <path d={`M ${cx-50} ${size-30} L ${cx+10} 130`} stroke={color} strokeWidth={2}/>
    {/* falling grains */}
    {[[-30, size-90, 2.5],[-22, size-70, 2],[-50, size-50, 2.5],[-15, size-100, 2],[-40, size-110, 3]].map(([dx,y,r],i)=>(
      <circle key={i} cx={cx+dx} cy={y} r={r} fill={color}/>
    ))}
    {/* single grain at top causing it */}
    <circle cx={cx} cy={70} r={3} fill={color}/>
    <line x1={cx} y1={62} x2={cx} y2={48} stroke={color} strokeWidth={0.5} strokeDasharray="1 2" opacity={0.6}/>
    {/* power-law inset bottom right */}
    <g transform={`translate(${size-110} ${size-90})`}>
      <rect x={-4} y={-4} width={90} height={70} fill="#000" stroke={color} strokeWidth={0.4} opacity={0.7}/>
      <line x1={0} y1={60} x2={80} y2={60} stroke={color} strokeWidth={0.4}/>
      <line x1={0} y1={60} x2={0} y2={0} stroke={color} strokeWidth={0.4}/>
      <path d={Array.from({length:30}).map((_,i)=>{
        const x = i*2.5+2;
        const y = 60 - 56/(1+Math.pow(x/8, 1.5));
        return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
      }).join(' ')} fill="none" stroke={color} strokeWidth={0.8}/>
      <text x={6} y={10} fontSize={6} fill={color} fontFamily="monospace" letterSpacing="1" opacity={0.7}>P(s)~s^-α</text>
    </g>
  </C_SVG>;
};

// 8 · INCERTIDUMBRE — blurred question mark / cloud
const Sigil_INCERTIDUMBRE = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <C_SVG size={size}>
    {/* probability cloud */}
    {Array.from({length:6}).map((_,i)=>{
      const r = 70 + i*10;
      return <circle key={i} cx={cx} cy={cy} r={r} fill={color} fillOpacity={0.04 - i*0.005}/>;
    })}
    {/* superposition of multiple possible '?' */}
    {[-12, -4, 4, 12].map((dx, i) => (
      <g key={i} opacity={0.4} transform={`translate(${dx} 0)`}>
        <path d={`M ${cx-22} ${cy-30} A 22 22 0 1 1 ${cx+8} ${cy-10} L ${cx+5} ${cy+15}`}
          fill="none" stroke={color} strokeWidth={1.4}/>
        <circle cx={cx+5} cy={cy+35} r={3} fill={color}/>
      </g>
    ))}
    {/* x-axis */}
    <line x1={cx-100} y1={cy+70} x2={cx+100} y2={cy+70} stroke={color} strokeWidth={0.3} opacity={0.5}/>
    {/* gaussian below */}
    <path d={Array.from({length:60}).map((_,i)=>{
      const x = cx-100 + (i/59)*200;
      const t = (x-cx)/30;
      const y = cy + 70 - 22*Math.exp(-t*t);
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill="none" stroke={color} strokeWidth={1}/>
    <line x1={cx-30} y1={cy+78} x2={cx+30} y2={cy+78} stroke={color} strokeWidth={0.5} markerEnd="url(#acp8)" markerStart="url(#acp8)" opacity={0.7}/>
    <defs><Arr_ id="acp8" color={color}/></defs>
    <text x={cx} y={cy+92} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">σ</text>
  </C_SVG>;
};

// 9 · ENTROPÍA — ordered (left) → spreading (right) with arrow
const Sigil_ENTROPIA = ({ color, size = 300 }) => {
  const cx = size/2;
  const r = _cr(9);
  return <C_SVG size={size}>
    <defs><Arr_ id="acp9" color={color}/></defs>
    {/* left box — ordered cluster */}
    <rect x={20} y={50} width={100} height={size-100} fill="none" stroke={color} strokeWidth={0.7} opacity={0.5}/>
    {(() => {
      const pts = [];
      const a = 16;
      for (let i = 0; i < 4; i++) for (let j = 0; j < 4; j++) {
        pts.push([35 + i*a*1.2, 90 + j*a*1.2]);
      }
      return pts.map(([x,y],i)=>(<circle key={i} cx={x} cy={y} r={2.5} fill={color}/>));
    })()}
    {/* arrow */}
    <line x1={cx-30} y1={size/2} x2={cx+30} y2={size/2} stroke={color} strokeWidth={1.4} markerEnd="url(#acp9)"/>
    <text x={cx} y={size/2 - 12} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">t</text>
    {/* right box — spread */}
    <rect x={size-120} y={50} width={100} height={size-100} fill="none" stroke={color} strokeWidth={0.7} opacity={0.5}/>
    {Array.from({length:16}).map((_,i)=>(
      <circle key={i} cx={size-120+10 + r()*82} cy={60 + r()*(size-120)} r={2.5} fill={color}/>
    ))}
    <text x={70} y={42} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>S₀</text>
    <text x={size-70} y={42} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic" opacity={0.7}>S↑</text>
  </C_SVG>;
};

// 10 · CISNE NEGRO — many points clustered + one black outlier
const Sigil_CISNE_NEGRO = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const r = _cr(10);
  return <C_SVG size={size}>
    {/* axes */}
    <line x1={30} y1={size-40} x2={size-20} y2={size-40} stroke={color} strokeWidth={0.4} opacity={0.5}/>
    <line x1={40} y1={30} x2={40} y2={size-30} stroke={color} strokeWidth={0.4} opacity={0.5}/>
    {/* gaussian-ish cluster */}
    {Array.from({length:60}).map((_,i)=>{
      const x = cx + (r()-0.5)*70;
      const y = cy + 20 + (r()-0.5)*50;
      return <circle key={i} cx={x} cy={y} r={2} fill={color} opacity={0.7}/>;
    })}
    {/* expected region */}
    <ellipse cx={cx} cy={cy+20} rx={75} ry={36} fill="none" stroke={color} strokeWidth={0.5} strokeDasharray="3 3" opacity={0.6}/>
    {/* the outlier */}
    <circle cx={size-50} cy={50} r={7} fill={color}/>
    <circle cx={size-50} cy={50} r={14} fill="none" stroke={color} strokeWidth={1}/>
    <line x1={size-50} y1={56} x2={size-50} y2={cy+15} stroke={color} strokeWidth={0.3} strokeDasharray="2 3" opacity={0.5}/>
    <text x={size-50} y={36} fontSize={9} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">★</text>
  </C_SVG>;
};

// 11 · EL EXPLORADOR — random walk path on grid
const Sigil_EXPLORADOR = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  const r = _cr(11);
  // start at center, take 80 steps
  const pts = [[cx, cy]];
  for (let i = 0; i < 80; i++) {
    const last = pts[pts.length-1];
    const d = Math.floor(r()*4);
    const dx = [12, -12, 0, 0][d];
    const dy = [0, 0, 12, -12][d];
    pts.push([last[0]+dx, last[1]+dy]);
  }
  return <C_SVG size={size}>
    {/* grid */}
    {Array.from({length:11}).map((_,i)=>(
      <line key={`v${i}`} x1={30+i*24} y1={30} x2={30+i*24} y2={size-30} stroke={color} strokeWidth={0.2} opacity={0.25}/>
    ))}
    {Array.from({length:11}).map((_,i)=>(
      <line key={`h${i}`} x1={30} y1={30+i*24} x2={size-30} y2={30+i*24} stroke={color} strokeWidth={0.2} opacity={0.25}/>
    ))}
    {/* path */}
    <path d={pts.map(([x,y],i)=>`${i===0?'M':'L'} ${x} ${y}`).join(' ')} fill="none" stroke={color} strokeWidth={1.4}/>
    <circle cx={pts[0][0]} cy={pts[0][1]} r={4} fill={color}/>
    <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r={5} fill={color}/>
    <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r={10} fill="none" stroke={color} strokeWidth={0.6}/>
  </C_SVG>;
};

// 12 · EL MUTANTE — phylogeny with one new highlighted branch
const Sigil_MUTANTE = ({ color, size = 300 }) => {
  const cx = size/2;
  return <C_SVG size={size}>
    {/* trunk */}
    <line x1={cx} y1={size-30} x2={cx} y2={size-100} stroke={color} strokeWidth={1.4}/>
    {/* first split */}
    <line x1={cx} y1={size-100} x2={cx-40} y2={size-150} stroke={color} strokeWidth={1.2}/>
    <line x1={cx} y1={size-100} x2={cx+40} y2={size-150} stroke={color} strokeWidth={1.2}/>
    {/* second split left */}
    <line x1={cx-40} y1={size-150} x2={cx-70} y2={size-200} stroke={color} strokeWidth={1}/>
    <line x1={cx-40} y1={size-150} x2={cx-15} y2={size-200} stroke={color} strokeWidth={1}/>
    {/* second split right */}
    <line x1={cx+40} y1={size-150} x2={cx+10} y2={size-200} stroke={color} strokeWidth={1}/>
    <line x1={cx+40} y1={size-150} x2={cx+70} y2={size-200} stroke={color} strokeWidth={1}/>
    {/* THE MUTANT — extra branch off existing */}
    <line x1={cx+70} y1={size-200} x2={cx+95} y2={size-250} stroke={color} strokeWidth={2}/>
    <circle cx={cx+95} cy={size-250} r={6} fill={color}/>
    <circle cx={cx+95} cy={size-250} r={14} fill="none" stroke={color} strokeWidth={0.5}/>
    <text x={cx+105} y={size-258} fontSize={9} fill={color} fontFamily="serif" fontStyle="italic">★</text>
    {/* other leaf circles */}
    {[[-70, -200],[-15, -200],[10, -200],[70, -200]].map(([dx,dy],i)=>(
      <circle key={i} cx={cx+dx} cy={size+dy} r={3} fill={color} opacity={0.7}/>
    ))}
    {/* DNA hint */}
    <text x={cx+10} y={size-114} fontSize={7} fill={color} fontFamily="monospace" letterSpacing="2" opacity={0.6}>ATCG</text>
  </C_SVG>;
};

// 13 · LA CISNE NEGRA (Reina) — dramatic distribution tail highlighted
const Sigil_LA_CISNE_NEGRA = ({ color, size = 300 }) => {
  const cx = size/2, cy = size/2;
  return <C_SVG size={size}>
    {/* axes */}
    <line x1={30} y1={size-50} x2={size-20} y2={size-50} stroke={color} strokeWidth={0.4} opacity={0.5}/>
    <line x1={40} y1={30} x2={40} y2={size-50} stroke={color} strokeWidth={0.4} opacity={0.5}/>
    {/* fat-tail distribution */}
    <path d={Array.from({length:80}).map((_,i)=>{
      const t = i/79;
      const x = 40 + t*(size-60);
      const v = Math.pow(Math.max(0.05, 1 - t*1.4), 2.5);
      const y = (size-50) - v*150;
      return `${i===0?'M':'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
    }).join(' ')} fill={color} fillOpacity={0.15} stroke={color} strokeWidth={1.4}/>
    {/* tail highlight */}
    <rect x={size-100} y={size-100} width={80} height={50} fill="none" stroke={color} strokeWidth={1.4} strokeDasharray="4 2"/>
    <text x={size-60} y={size-108} fontSize={10} fill={color} textAnchor="middle" fontFamily="serif" fontStyle="italic">cola</text>
    {/* crown */}
    <g transform={`translate(${cx} 50)`}>
      <path d="M -22 14 L -22 -2 L -14 -10 L -7 -2 L 0 -14 L 7 -2 L 14 -10 L 22 -2 L 22 14 Z" fill="none" stroke={color} strokeWidth={1.4}/>
      <circle cx={0} cy={-14} r={2.5} fill={color}/>
      <circle cx={-14} cy={-10} r={2} fill={color}/>
      <circle cx={14} cy={-10} r={2} fill={color}/>
    </g>
  </C_SVG>;
};

// 14 · EL DEMONIO (Rey) — Maxwell's demon sorting hot/cold
const Sigil_DEMONIO = ({ color, size = 300 }) => {
  const cx = size/2;
  const r = _cr(14);
  return <C_SVG size={size}>
    <defs><Arr_ id="acp14" color={color}/></defs>
    {/* two chambers */}
    <rect x={30} y={50} width={size-60} height={size-100} fill="none" stroke={color} strokeWidth={1}/>
    {/* divider with gate */}
    <line x1={cx} y1={50} x2={cx} y2={size/2-12} stroke={color} strokeWidth={1.2}/>
    <line x1={cx} y1={size/2+12} x2={cx} y2={size-50} stroke={color} strokeWidth={1.2}/>
    {/* the demon (eye) at the gate */}
    <circle cx={cx} cy={size/2} r={10} fill="#000" stroke={color} strokeWidth={1.4}/>
    <circle cx={cx} cy={size/2} r={4} fill={color}/>
    {/* hot particles right (clustered upper) */}
    {Array.from({length:14}).map((_,i)=>{
      const x = cx + 20 + r()*(size-100)*0.5;
      const y = 60 + r()*(size-120);
      return <g key={i}>
        <circle cx={x} cy={y} r={2.5} fill={color}/>
        {/* fast wiggle */}
        <line x1={x} y1={y-2} x2={x+r()*6-3} y2={y-8} stroke={color} strokeWidth={0.3} opacity={0.6}/>
      </g>;
    })}
    {/* cold particles left (clustered lower) */}
    {Array.from({length:14}).map((_,i)=>{
      const x = 40 + r()*(size-100)*0.5;
      const y = 60 + r()*(size-120);
      return <circle key={i} cx={x} cy={y} r={2.5} fill={color} opacity={0.5}/>;
    })}
    {/* gate arrows */}
    <line x1={cx-12} y1={size/2-1} x2={cx+12} y2={size/2-1} stroke={color} strokeWidth={0.6} markerEnd="url(#acp14)" opacity={0.7}/>
    <text x={cx-30} y={70} fontSize={9} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.6} textAnchor="end">frío</text>
    <text x={cx+30} y={70} fontSize={9} fill={color} fontFamily="serif" fontStyle="italic" opacity={0.85}>caliente</text>
  </C_SVG>;
};

Object.assign(PILOT_SIGILS, {
  'PERTURBACIÓN':   Sigil_PERTURBACION,
  'FLUCTUACIÓN':    Sigil_FLUCTUACION,
  'RUIDO':          Sigil_RUIDO,
  'AZAR':           Sigil_AZAR,
  'DIVERGENCIA':    Sigil_DIVERGENCIA,
  'TURBULENCIA':    Sigil_TURBULENCIA,
  'AVALANCHA':      Sigil_AVALANCHA,
  'INCERTIDUMBRE':  Sigil_INCERTIDUMBRE,
  'ENTROPÍA':       Sigil_ENTROPIA,
  'CISNE NEGRO':    Sigil_CISNE_NEGRO,
  'EL EXPLORADOR':  Sigil_EXPLORADOR,
  'EL MUTANTE':     Sigil_MUTANTE,
  'LA CISNE NEGRA': Sigil_LA_CISNE_NEGRA,
  'EL DEMONIO':     Sigil_DEMONIO,
});