// ─── AYR — components/DataIcon.jsx ───────────────────────────────────────────
// Ícones animados por canvas + DRAWERS. Sem dependências externas.
// ─────────────────────────────────────────────────────────────────────────────

const {useEffect,useRef}=React;

const TAU=Math.PI*2;
const DRAWERS={

  quake:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const shake=Math.sin(t*12)*2.5*Math.max(0,Math.sin(t*0.7));
    ctx.save();ctx.translate(shake*0.5,0);
    ctx.strokeStyle=`${col}18`;ctx.lineWidth=1;
    ctx.strokeRect(w*0.28,h*0.22,w*0.18,h*(0.65-0.22));
    ctx.beginPath();ctx.moveTo(w*0.24,h*0.22);ctx.lineTo(w*0.37,h*0.08);ctx.lineTo(w*0.50,h*0.22);ctx.stroke();
    ctx.restore();
    const mid=h*0.50;
    ctx.beginPath();ctx.strokeStyle=`${col}35`;ctx.lineWidth=0.8;ctx.moveTo(w*0.06,mid);ctx.lineTo(w*0.94,mid);ctx.stroke();
    const pulse=1+Math.sin(t*0.5)*0.15;
    ctx.strokeStyle=col;ctx.lineWidth=2.5;ctx.shadowColor=col;ctx.shadowBlur=12*pulse;
    ctx.beginPath();
    [[0.06,0],[0.24,0],[0.28,-0.38],[0.32,0.52],[0.36,-0.60],[0.40,0.70],[0.44,-0.45],[0.48,0.32],[0.52,-0.20],[0.56,0.10],[0.60,0],[0.94,0]]
      .forEach(([nx,ny],i)=>{const x=nx*w+Math.sin(t*12+nx*5)*shake*0.5,y=mid+ny*h*0.36;i===0?ctx.moveTo(x,y):ctx.lineTo(x,y);});
    ctx.stroke();ctx.shadowBlur=0;
    const crG=ctx.createLinearGradient(w*0.5,mid,w*0.5,h*0.92);
    crG.addColorStop(0,`${col}cc`);crG.addColorStop(1,`${col}00`);
    ctx.strokeStyle=crG;ctx.lineWidth=3+shake;ctx.shadowColor=col;ctx.shadowBlur=8;
    ctx.beginPath();ctx.moveTo(w*0.5,mid);ctx.lineTo(w*0.5+4,h*0.72);ctx.lineTo(w*0.5-3,h*0.85);ctx.lineTo(w*0.5+2,h*0.94);ctx.stroke();ctx.shadowBlur=0;
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.fillText("M 6.8",w-38,11);
  },

  fire:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const flicker=Math.sin(t*3.1)*0.06+Math.sin(t*7.3)*0.03;
    const skyG=ctx.createLinearGradient(0,0,0,h*0.70);
    skyG.addColorStop(0,`${col}55`);skyG.addColorStop(0.5,`${col}30`);skyG.addColorStop(1,`${col}10`);
    ctx.fillStyle=skyG;ctx.fillRect(0,0,w,h);
    ctx.fillStyle=`${col}35`;ctx.fillRect(0,h*0.78,w,h*0.22);
    const drawTree=(tx,th,col2,strokeCol)=>{
      ctx.fillStyle=col2;ctx.fillRect(tx-3,h*0.78-th*0.18,6,th*0.20);
      [[0,0.78,0.55],[0.16,0.52,0.42],[0.30,0.30,0.30]].forEach(([yOff,tw2,th2])=>{
        ctx.fillStyle=col2;ctx.beginPath();
        ctx.moveTo(tx,h*(0.78-th2)-yOff*th);ctx.lineTo(tx-tw2*0.5*th,h*0.78-yOff*th);ctx.lineTo(tx+tw2*0.5*th,h*0.78-yOff*th);
        ctx.closePath();ctx.fill();
        if(strokeCol){ctx.strokeStyle=strokeCol;ctx.lineWidth=0.8;ctx.stroke();}
      });
    };
    const bgCol=`${col}45`,bgStroke=`${col}60`;
    [0.04,0.10,0.16,0.76,0.82,0.88,0.94].forEach((tx,i)=>drawTree(tx*w,h*(0.28+i%2*0.06),bgCol,bgStroke));
    [0.28,0.68].forEach((tx)=>{
      const sz=h*0.38;drawTree(tx*w,sz,`${col}55`,`${col}70`);
      ctx.beginPath();ctx.moveTo(tx*w-sz*0.25,h*0.78);
      ctx.bezierCurveTo(tx*w-sz*0.3,h*0.78-sz*0.3,tx*w,h*0.78-sz*0.6,tx*w,h*0.78-sz*0.7);
      ctx.bezierCurveTo(tx*w,h*0.78-sz*0.6,tx*w+sz*0.3,h*0.78-sz*0.3,tx*w+sz*0.25,h*0.78);
      ctx.closePath();
      const mf=ctx.createLinearGradient(tx*w,h*0.78-sz*0.7,tx*w,h*0.78);
      mf.addColorStop(0,`rgba(255,255,180,${0.6+flicker})`);mf.addColorStop(0.4,`${col}cc`);mf.addColorStop(1,`${col}20`);
      ctx.fillStyle=mf;ctx.shadowColor=col;ctx.shadowBlur=12;ctx.fill();ctx.shadowBlur=0;
    });
    const tx2=w*0.50,ty=h*0.78,ts=h*0.60,treeCol="#1a0808";
    ctx.fillStyle=treeCol;ctx.fillRect(tx2-ts*0.06,ty-ts*0.08,ts*0.12,ts*0.20);
    [[0,0.82,0.62],[0.18,0.54,0.46],[0.32,0.30,0.34]].forEach(([yOff,tw,th])=>{
      ctx.fillStyle=treeCol;ctx.beginPath();
      ctx.moveTo(tx2,ty-ts*th-ts*yOff);ctx.lineTo(tx2-ts*tw*0.5,ty-ts*yOff);ctx.lineTo(tx2+ts*tw*0.5,ty-ts*yOff);
      ctx.closePath();ctx.fill();ctx.strokeStyle=`${col}70`;ctx.lineWidth=1;ctx.stroke();
    });
    [[tx2,ts*0.72,ts*1.05,0,0.95],[tx2-ts*0.14,ts*0.46,ts*0.78,1.2,0.80],[tx2+ts*0.10,ts*0.40,ts*0.65,2.3,0.75]].forEach(([fx,fw,fh,ph,alpha])=>{
      ctx.beginPath();ctx.moveTo(fx-fw*0.5,ty);
      ctx.bezierCurveTo(fx-fw*0.65,ty-fh*0.25,fx-fw*0.55,ty-fh*0.48,fx-fw*0.08,ty-fh*0.58);
      ctx.bezierCurveTo(fx-fw*0.18,ty-fh*0.70,fx-fw*0.12,ty-fh*0.82,fx,ty-fh*(0.92+Math.sin(t*2.8+ph)*0.06));
      ctx.bezierCurveTo(fx+fw*0.12,ty-fh*0.82,fx+fw*0.18,ty-fh*0.68,fx+fw*0.10,ty-fh*0.55);
      ctx.bezierCurveTo(fx+fw*0.58,ty-fh*0.40,fx+fw*0.65,ty-fh*0.18,fx+fw*0.5,ty);ctx.closePath();
      const fg=ctx.createLinearGradient(fx,ty-fh,fx,ty);
      fg.addColorStop(0,`rgba(255,255,220,${alpha*0.9})`);fg.addColorStop(0.15,`rgba(255,200,50,${alpha})`);
      fg.addColorStop(0.40,`${col}${Math.round(alpha*255).toString(16).padStart(2,"0")}`);fg.addColorStop(0.75,`#ff440099`);fg.addColorStop(1,`${col}15`);
      ctx.fillStyle=fg;ctx.shadowColor=col;ctx.shadowBlur=28*alpha*(1+flicker);ctx.fill();ctx.shadowBlur=0;
    });
    for(let e=0;e<10;e++){const age=((t*0.12+e*0.55)%2)/2,ex=tx2+Math.sin(e*1.7+t*0.4)*ts*0.5,ey=ty-age*ts*1.2,ea=0.9-age*0.85;ctx.fillStyle=`rgba(255,180,50,${ea})`;ctx.shadowColor=col;ctx.shadowBlur=6;ctx.beginPath();ctx.arc(ex,ey,2-age*1.5,0,TAU);ctx.fill();ctx.shadowBlur=0;}
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.fillText(`${Math.round(42+Math.sin(t*0.1)*2)}\u00b0C`,w-34,11);
  },

  flood:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);const cx=w/2;
    const waterY=h*0.56-Math.sin(t*0.8)*3;
    const hx=cx-w*0.22,hy=h*0.12,hw=w*0.44,hh=h*0.42;
    ctx.strokeStyle=`${col}50`;ctx.lineWidth=2;ctx.strokeRect(hx,hy,hw,hh);
    ctx.beginPath();ctx.moveTo(hx-6,hy);ctx.lineTo(cx,h*0.02);ctx.lineTo(hx+hw+6,hy);ctx.stroke();
    ctx.strokeRect(cx-w*0.06,hy+hh*0.55,w*0.12,hh*0.45);
    ctx.strokeRect(hx+w*0.04,hy+hh*0.15,w*0.10,h*0.08);
    ctx.strokeRect(hx+hw-w*0.14,hy+hh*0.15,w*0.10,h*0.08);
    ctx.fillStyle=`${col}25`;ctx.fillRect(0,waterY,w,h-waterY);
    [h*0.62,h*0.70,waterY].forEach((wl,li)=>{
      ctx.beginPath();
      for(let x=0;x<=w;x+=2){const y=wl+Math.sin((x/w)*TAU*2.5+t*(0.12-li*0.03))*(5-li*1.5)+Math.sin((x/w)*TAU*4-t*0.09)*2;x===0?ctx.moveTo(x,y):ctx.lineTo(x,y);}
      ctx.lineTo(w,h);ctx.lineTo(0,h);ctx.closePath();
      ctx.fillStyle=`${col}${["40","62","90"][li]}`;ctx.fill();
    });
    ctx.strokeStyle=`${col}cc`;ctx.lineWidth=2;ctx.shadowColor=col;ctx.shadowBlur=8;
    ctx.beginPath();
    for(let x=0;x<=w;x+=2){const y=waterY+Math.sin((x/w)*TAU*2.5+t*0.12)*5+Math.sin((x/w)*TAU*4-t*0.09)*2;x===0?ctx.moveTo(x,y):ctx.lineTo(x,y);}
    ctx.stroke();ctx.shadowBlur=0;
    ctx.strokeStyle=`${col}cc`;ctx.lineWidth=1.5;ctx.shadowColor=col;ctx.shadowBlur=5;
    ctx.beginPath();ctx.moveTo(w*0.88,h*0.16);ctx.lineTo(w*0.88,waterY-4);ctx.stroke();
    ctx.beginPath();ctx.moveTo(w*0.84,h*0.22);ctx.lineTo(w*0.88,h*0.16);ctx.lineTo(w*0.92,h*0.22);ctx.stroke();ctx.shadowBlur=0;
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.fillText(`+${(0.9+Math.sin(t*0.05)*0.1).toFixed(1)}m`,3,11);
  },

  blackout:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);const cx=w/2;
    const pulse=0.6+Math.sin(t*3.7)*0.4;
    ctx.fillStyle="#020508";ctx.fillRect(0,0,w,h);
    [[0.00,0.52,0.09],[0.07,0.38,0.08],[0.14,0.50,0.07],[0.19,0.34,0.09],[0.55,0.42,0.08],[0.62,0.30,0.08],[0.70,0.48,0.07],[0.78,0.36,0.09],[0.88,0.50,0.08]].forEach(([bx,by,bw],bi)=>{
      ctx.fillStyle="#070c12";ctx.fillRect(bx*w,by*h,bw*w,h*(1-by));
      ctx.strokeStyle=`${col}12`;ctx.lineWidth=0.5;ctx.strokeRect(bx*w,by*h,bw*w,h*(1-by));
      const cols=Math.max(1,Math.floor(bw*w/9)),rows=Math.max(1,Math.floor(h*(1-by)/12));
      const pw=bw*w/(cols*2+1),ph=h*(1-by)/(rows*2+1);
      for(let r=0;r<rows;r++)for(let c=0;c<cols;c++){const seed=bi*100+r*10+c,isOn=Math.sin(t*2.3+seed*1.7)>0.85;ctx.fillStyle=isOn?`${col}80`:"#0c1015";ctx.fillRect(bx*w+pw+c*pw*2,by*h+ph+r*ph*2,pw*0.8,ph*0.8);}
    });
    const winX=w*0.35,winY=h*0.40;
    const candleGlow=ctx.createRadialGradient(winX+7,winY+9,0,winX+7,winY+9,60);
    candleGlow.addColorStop(0,`${col}${Math.round(pulse*80).toString(16).padStart(2,"0")}`);candleGlow.addColorStop(1,`${col}00`);
    ctx.fillStyle=candleGlow;ctx.fillRect(0,0,w,h);
    ctx.fillStyle=`${col}${Math.round(pulse*255).toString(16).padStart(2,"0")}`;ctx.shadowColor=col;ctx.shadowBlur=18*pulse;ctx.fillRect(winX,winY,14,18);ctx.shadowBlur=0;
    const bp=[[cx+w*0.06,h*0.08],[cx-w*0.08,h*0.48],[cx+w*0.04,h*0.48],[cx-w*0.10,h*0.92],[cx+w*0.16,h*0.44],[cx+w*0.03,h*0.44]];
    ctx.save();ctx.beginPath();ctx.rect(0,0,cx,h);ctx.clip();
    ctx.beginPath();bp.forEach(([x,y],i)=>i===0?ctx.moveTo(x,y):ctx.lineTo(x,y));ctx.closePath();
    ctx.fillStyle=`${col}${Math.round((0.55+pulse*0.4)*255).toString(16).padStart(2,"0")}`;ctx.shadowColor=col;ctx.shadowBlur=20*pulse;ctx.fill();ctx.restore();ctx.shadowBlur=0;
    ctx.save();ctx.beginPath();ctx.rect(cx,0,w,h);ctx.clip();
    ctx.beginPath();bp.forEach(([x,y],i)=>i===0?ctx.moveTo(x,y):ctx.lineTo(x,y));ctx.closePath();
    ctx.fillStyle=`${col}18`;ctx.fill();ctx.restore();
    ctx.strokeStyle=`${col}50`;ctx.lineWidth=1;ctx.beginPath();bp.forEach(([x,y],i)=>i===0?ctx.moveTo(x,y):ctx.lineTo(x,y));ctx.closePath();ctx.stroke();
    ctx.strokeStyle=`rgba(255,50,50,${0.5+pulse*0.5})`;ctx.lineWidth=1.5;ctx.shadowColor="#ff3333";ctx.shadowBlur=8*pulse;ctx.beginPath();ctx.moveTo(cx,h*0.04);ctx.lineTo(cx,h*0.96);ctx.stroke();ctx.shadowBlur=0;
    const sparkY=h*0.48+Math.sin(t*8)*4;
    ctx.fillStyle=`rgba(255,200,50,${pulse})`;ctx.shadowColor="white";ctx.shadowBlur=12*pulse;ctx.beginPath();ctx.arc(cx,sparkY,2+pulse*2,0,TAU);ctx.fill();ctx.shadowBlur=0;
    [0.08,0.14,0.82,0.90,0.30,0.70].forEach((sx,i)=>{const alpha=0.2+Math.sin(t*1.5+i*2.1)*0.5;if(alpha>0){ctx.fillStyle=`rgba(255,255,255,${alpha})`;ctx.beginPath();ctx.arc(sx*w,(0.04+i%3*0.05)*h,0.9,0,TAU);ctx.fill();}});
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.fillText("00:00 kWh",3,11);
  },

  pandemic:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);const cx=w/2,cy=h*0.48;
    const rot=t*0.03,pulse=1+Math.sin(t*0.4)*0.06;
    ctx.fillStyle=`${col}12`;ctx.beginPath();ctx.arc(cx,h*0.80,h*0.055,0,TAU);ctx.fill();
    ctx.fillRect(cx-w*0.06,h*0.855,w*0.12,h*0.10);
    ctx.strokeStyle=`${col}20`;ctx.lineWidth=1.5;ctx.beginPath();ctx.arc(cx,h*0.808,h*0.028,0.2,Math.PI-0.2);ctx.stroke();
    const vr=h*0.30*pulse;
    const glow=ctx.createRadialGradient(cx,cy,vr*0.5,cx,cy,vr*1.6);
    glow.addColorStop(0,`${col}20`);glow.addColorStop(1,`${col}00`);
    ctx.fillStyle=glow;ctx.fillRect(0,0,w,h);
    const vbg=ctx.createRadialGradient(cx-vr*0.15,cy-vr*0.15,0,cx,cy,vr);
    vbg.addColorStop(0,`${col}80`);vbg.addColorStop(0.6,`${col}50`);vbg.addColorStop(1,`${col}22`);
    ctx.fillStyle=vbg;ctx.shadowColor=col;ctx.shadowBlur=18;ctx.beginPath();ctx.arc(cx,cy,vr,0,TAU);ctx.fill();ctx.shadowBlur=0;
    ctx.strokeStyle=`${col}cc`;ctx.lineWidth=1.5;ctx.stroke();
    for(let i=0;i<12;i++){const a=rot+(i/12)*TAU,sL=vr*(0.42+(i%2)*0.10),x1=cx+vr*Math.cos(a),y1=cy+vr*Math.sin(a),x2=cx+(vr+sL)*Math.cos(a),y2=cy+(vr+sL)*Math.sin(a);ctx.strokeStyle=`${col}dd`;ctx.lineWidth=2;ctx.shadowColor=col;ctx.shadowBlur=6;ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();ctx.fillStyle=col;ctx.beginPath();ctx.arc(x2,y2,3,0,TAU);ctx.fill();ctx.shadowBlur=0;}
    for(let i=0;i<5;i++){const a=rot*0.5+i*TAU/5;ctx.fillStyle=`${col}40`;ctx.beginPath();ctx.arc(cx+vr*0.42*Math.cos(a),cy+vr*0.42*Math.sin(a),vr*0.12,0,TAU);ctx.fill();}
    ctx.font="bold 9px monospace";ctx.fillStyle="#ff4444";ctx.shadowColor="#ff4444";ctx.shadowBlur=4;ctx.fillText(`R\u2080 ${(2.4+Math.sin(t*0.03)*0.2).toFixed(1)}`,3,11);ctx.shadowBlur=0;
  },

  civil:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const run=Math.sin(t*2.0);
    [[0.02,0.22,0.16,0.56],[0.55,0.18,0.18,0.60],[0.75,0.26,0.14,0.52]].forEach(([bx,by,bw,bh])=>{ctx.fillStyle=`${col}10`;ctx.fillRect(bx*w,by*h,bw*w,bh*h);ctx.strokeStyle=`${col}20`;ctx.lineWidth=0.6;ctx.strokeRect(bx*w,by*h,bw*w,bh*h);});
    const wglow=ctx.createRadialGradient(w*0.14,h*0.30,0,w*0.14,h*0.30,22);wglow.addColorStop(0,`${col}60`);wglow.addColorStop(1,`${col}00`);ctx.fillStyle=wglow;ctx.fillRect(0,0,w,h);
    ctx.fillStyle=`${col}10`;ctx.fillRect(0,h*0.76,w,h*0.24);ctx.strokeStyle=`${col}20`;ctx.lineWidth=0.6;ctx.beginPath();ctx.moveTo(0,h*0.76);ctx.lineTo(w,h*0.76);ctx.stroke();
    [{x:0.12,raised:true,lean:0.12},{x:0.24,raised:true,lean:-0.08},{x:0.38,raised:true,lean:0.05},{x:0.52,raised:false,lean:-0.10},{x:0.65,raised:true,lean:0.08}].forEach(({x,raised,lean},i)=>{
      const px=x*w,py=h*0.76,sc=h*0.46,phase=Math.sin(t*2.0+i*1.1);
      ctx.shadowColor=col;ctx.shadowBlur=i===2?14:8;ctx.fillStyle=col;
      ctx.save();ctx.translate(px,py);ctx.rotate(lean+phase*0.04);
      ctx.beginPath();ctx.arc(0,-sc*0.88,sc*0.09,0,TAU);ctx.fill();
      ctx.fillRect(-sc*0.07,-sc*0.79,sc*0.14,sc*0.30);
      ctx.save();ctx.translate(-sc*0.04,-sc*0.65);ctx.rotate(raised?-1.1+phase*0.15:-0.3+phase*0.10);
      ctx.fillRect(-sc*0.04,-sc*0.22,sc*0.07,sc*0.22);
      if(raised){ctx.save();ctx.translate(0,-sc*0.22);ctx.rotate(0.1+phase*0.08);ctx.fillStyle=`${col}cc`;ctx.fillRect(-sc*0.025,-sc*0.42,sc*0.05,sc*0.42);ctx.shadowColor=col;ctx.shadowBlur=6;ctx.fillRect(-sc*0.03,-sc*0.44,sc*0.06,sc*0.04);ctx.shadowBlur=0;ctx.restore();}
      ctx.restore();
      ctx.save();ctx.translate(sc*0.04,-sc*0.65);ctx.rotate(0.4-phase*0.10);ctx.fillStyle=col;ctx.fillRect(-sc*0.04,0,sc*0.07,sc*0.20);ctx.restore();
      const legP=phase*0.35;
      ctx.save();ctx.translate(-sc*0.06,-sc*0.49);ctx.rotate(legP);ctx.fillRect(-sc*0.04,0,sc*0.07,sc*0.28);ctx.restore();
      ctx.save();ctx.translate(sc*0.06,-sc*0.49);ctx.rotate(-legP);ctx.fillRect(-sc*0.04,0,sc*0.07,sc*0.28);ctx.restore();
      ctx.restore();ctx.shadowBlur=0;
    });
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.shadowBlur=0;ctx.fillText(`IDX ${Math.round(68+Math.sin(t*0.4)*4)}`,3,11);
  },

  chemical:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);const cx=w*0.18,cy=h*0.5;
    for(let i=0;i<4;i++){const r=(t*14+i*16)%68,a=1-r/68;ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2);ctx.strokeStyle=`${col}${Math.round(a*90).toString(16).padStart(2,'0')}`;ctx.lineWidth=1;ctx.stroke();}
    for(let p=0;p<36;p++){const s=p*137.5,px=cx+((s*0.37+t*(8+(p%4)))%(w*0.9)),py=cy+Math.sin(s+t*(0.5+p*0.03))*(h*0.35)*(p/36);
      ctx.beginPath();ctx.arc(px%w,py,1+(p%3)*0.5,0,Math.PI*2);ctx.fillStyle=`${col}${Math.round(Math.max(0,(0.2+(1-px/w)*0.5))*180).toString(16).padStart(2,'0')}`;ctx.fill();}
    const ppm=Math.abs(Math.round(180+Math.sin(t*0.5)*40+t*8)%480);
    ctx.font="bold 8px monospace";ctx.fillStyle=ppm>200?"#ff4444":col;ctx.shadowColor=ctx.fillStyle;ctx.shadowBlur=5;ctx.fillText(`${ppm} ppm`,w-46,10);
  },

  tsunami:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const cx=w/2;
    const skyG=ctx.createLinearGradient(0,0,0,h*0.55);
    skyG.addColorStop(0,`${col}15`);skyG.addColorStop(1,`${col}05`);
    ctx.fillStyle=skyG;ctx.fillRect(0,0,w,h*0.55);
    ctx.fillStyle=`${col}18`;ctx.fillRect(0,h*0.72,w,h*0.28);
    [[0.05,0.58,0.07,0.14],[0.15,0.52,0.06,0.20],[0.25,0.56,0.08,0.16],[0.72,0.54,0.06,0.18],[0.82,0.58,0.07,0.14]].forEach(([bx,by,bw,bh])=>{
      ctx.fillStyle=`${col}20`;ctx.fillRect(bx*w,by*h,bw*w,bh*h);
      ctx.strokeStyle=`${col}35`;ctx.lineWidth=0.5;ctx.strokeRect(bx*w,by*h,bw*w,bh*h);
    });
    const drawback=Math.max(0,Math.sin(t*0.08)*0.5+0.5);
    ctx.fillStyle=`${col}12`;ctx.fillRect(w*0.55,h*0.60,w*0.45*drawback,h*0.12);
    const waveX=(t*22)%(w*2.5)-w*0.8;
    const waveH=h*0.52,waveW=w*0.55;
    ctx.beginPath();
    ctx.moveTo(waveX-waveW*0.5,h*0.72);
    ctx.bezierCurveTo(waveX-waveW*0.3,h*0.72,waveX-waveW*0.1,h*0.72-waveH*0.15,waveX,h*0.72-waveH*0.85);
    ctx.bezierCurveTo(waveX+waveW*0.05,h*0.72-waveH,waveX+waveW*0.15,h*0.72-waveH*0.95,waveX+waveW*0.25,h*0.72-waveH*0.3);
    ctx.bezierCurveTo(waveX+waveW*0.35,h*0.72-waveH*0.1,waveX+waveW*0.5,h*0.72,waveX+waveW*0.6,h*0.72);
    ctx.lineTo(waveX+waveW*0.6,h);ctx.lineTo(waveX-waveW*0.5,h);ctx.closePath();
    const wg=ctx.createLinearGradient(waveX,h*0.72-waveH,waveX,h*0.72);
    wg.addColorStop(0,`${col}ee`);wg.addColorStop(0.3,`${col}cc`);wg.addColorStop(0.7,`${col}88`);wg.addColorStop(1,`${col}44`);
    ctx.fillStyle=wg;ctx.shadowColor=col;ctx.shadowBlur=20;ctx.fill();ctx.shadowBlur=0;
    ctx.beginPath();
    ctx.moveTo(waveX-waveW*0.05,h*0.72-waveH*0.78);
    ctx.bezierCurveTo(waveX+waveW*0.05,h*0.72-waveH*1.02,waveX+waveW*0.18,h*0.72-waveH*0.88,waveX+waveW*0.28,h*0.72-waveH*0.25);
    ctx.strokeStyle=`rgba(255,255,255,0.85)`;ctx.lineWidth=3;ctx.shadowColor="white";ctx.shadowBlur=8;ctx.stroke();ctx.shadowBlur=0;
    for(let i=0;i<12;i++){
      const sa=(t*0.15+i*0.7)%2,sx=waveX+Math.sin(i*1.3)*waveW*0.18,sy=(h*0.72-waveH*0.8)-sa*h*0.15;
      if(sa<1){ctx.fillStyle=`rgba(255,255,255,${0.7-sa*0.6})`;ctx.beginPath();ctx.arc(sx,sy,1.5-sa,0,TAU);ctx.fill();}
    }
    const wl=h*0.72-Math.sin(t*0.05)*h*0.04;
    ctx.beginPath();ctx.strokeStyle=`${col}88`;ctx.lineWidth=1.5;
    for(let x=0;x<=w;x+=2){const y=wl+Math.sin(x/w*TAU*3+t*0.1)*4;x===0?ctx.moveTo(x,y):ctx.lineTo(x,y);}
    ctx.stroke();
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.shadowColor=col;ctx.shadowBlur=4;ctx.fillText("↑ 18.4m",w-46,11);ctx.shadowBlur=0;
  },

  winter:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const skyG=ctx.createLinearGradient(0,0,0,h);
    skyG.addColorStop(0,`${col}08`);skyG.addColorStop(0.5,`${col}18`);skyG.addColorStop(1,`${col}35`);
    ctx.fillStyle=skyG;ctx.fillRect(0,0,w,h);
    ctx.fillStyle=`${col}55`;ctx.fillRect(0,h*0.76,w,h*0.24);
    ctx.beginPath();ctx.fillStyle=`${col}40`;
    ctx.moveTo(0,h*0.76);
    for(let x=0;x<=w;x+=4){ctx.lineTo(x,h*0.76-Math.sin(x/w*Math.PI*6)*h*0.04-h*0.015);}
    ctx.lineTo(w,h);ctx.lineTo(0,h);ctx.closePath();ctx.fill();
    [[0.08,0.52,0.14],[0.55,0.48,0.16],[0.78,0.54,0.12]].forEach(([bx,by,bw])=>{
      const bh=h*0.24,bxp=bx*w,byp=by*h;
      ctx.fillStyle=`${col}12`;ctx.fillRect(bxp,byp,bw*w,bh);
      ctx.strokeStyle=`${col}28`;ctx.lineWidth=0.8;ctx.strokeRect(bxp,byp,bw*w,bh);
      ctx.beginPath();ctx.fillStyle=`${col}20`;
      ctx.moveTo(bxp-4,byp);ctx.lineTo(bxp+bw*w/2,byp-h*0.09);ctx.lineTo(bxp+bw*w+4,byp);ctx.closePath();ctx.fill();
      ctx.strokeStyle=`${col}30`;ctx.lineWidth=0.8;ctx.stroke();
      ctx.beginPath();ctx.fillStyle=`${col}45`;
      ctx.moveTo(bxp,byp);ctx.lineTo(bxp+bw*w/2,byp-h*0.09+h*0.015);ctx.lineTo(bxp+bw*w,byp);ctx.closePath();ctx.fill();
      const wx=bxp+bw*w*0.35,wy=byp+bh*0.35,pulse=0.5+Math.sin(t*1.2)*0.3;
      const wglow=ctx.createRadialGradient(wx+6,wy+6,0,wx+6,wy+6,20);
      wglow.addColorStop(0,`rgba(255,200,80,${pulse*0.6})`);wglow.addColorStop(1,'rgba(255,200,80,0)');
      ctx.fillStyle=wglow;ctx.fillRect(bxp-10,byp,bw*w+20,bh+20);
      ctx.fillStyle=`rgba(255,200,80,${0.6+pulse*0.3})`;ctx.shadowColor='rgba(255,200,80,0.8)';ctx.shadowBlur=8;
      ctx.fillRect(wx,wy,12,10);ctx.shadowBlur=0;
    });
    for(let i=0;i<35;i++){
      const phase=((t*0.18+i*0.29)%1);
      const sx=((i*w/35+t*45+i*7)%(w+60))-30;
      const sy=phase*h*1.4-h*0.2;
      const len=8+i%5*3,alpha=0.15+i%4*0.12;
      ctx.strokeStyle=`rgba(255,255,255,${alpha})`;ctx.lineWidth=0.8+i%3*0.4;
      ctx.beginPath();ctx.moveTo(sx,sy);ctx.lineTo(sx-len*0.35,sy+len);ctx.stroke();
    }
    for(let i=0;i<18;i++){
      const phase=((t*0.12+i*0.17)%1);
      const fx=((i*w/18+t*18+i*13)%(w+20))-10;
      const fy=phase*h;
      const fr=1.5+i%4*0.8,alpha=0.4+i%3*0.2;
      ctx.fillStyle=`rgba(255,255,255,${alpha})`;ctx.beginPath();ctx.arc(fx,fy,fr,0,TAU);ctx.fill();
    }
    const zero=h*0.36;
    ctx.setLineDash([3,3]);ctx.strokeStyle=`${col}40`;ctx.lineWidth=0.8;
    ctx.beginPath();ctx.moveTo(0,zero);ctx.lineTo(w,zero);ctx.stroke();ctx.setLineDash([]);
    ctx.font="6px monospace";ctx.fillStyle=`${col}60`;ctx.fillText("0°C",2,zero-3);
    const temp=-8+Math.sin(t*0.06)*2;
    ctx.font="bold 9px monospace";ctx.fillStyle=col;ctx.shadowColor=col;ctx.shadowBlur=4;
    ctx.fillText(`${temp.toFixed(1)}°C`,w-38,11);ctx.shadowBlur=0;
  },

  nuclear:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const cx=w*0.42,cy=h*0.5;
    const skyG=ctx.createRadialGradient(cx,h*0.65,0,cx,h*0.65,w*0.9);
    skyG.addColorStop(0,`${col}35`);skyG.addColorStop(0.5,`${col}15`);skyG.addColorStop(1,`${col}04`);
    ctx.fillStyle=skyG;ctx.fillRect(0,0,w,h);
    ctx.fillStyle=`${col}20`;ctx.fillRect(0,h*0.78,w,h*0.22);
    for(let i=0;i<3;i++){
      const age=((t*0.07+i*0.33)%1);
      const r=age*w*0.9,alpha=0.5-age*0.45;
      ctx.beginPath();ctx.ellipse(cx,h*0.78,r,r*0.15,0,0,TAU);
      ctx.strokeStyle=`${col}${Math.round(alpha*255).toString(16).padStart(2,'0')}`;ctx.lineWidth=2-age;ctx.stroke();
    }
    const stemH=h*0.38,stemW=w*0.06;
    const stemG=ctx.createLinearGradient(cx-stemW,h*0.78,cx+stemW,h*0.78);
    stemG.addColorStop(0,`${col}40`);stemG.addColorStop(0.5,`${col}80`);stemG.addColorStop(1,`${col}40`);
    ctx.beginPath();
    ctx.moveTo(cx-stemW,h*0.78);
    ctx.bezierCurveTo(cx-stemW*0.5,h*0.78-stemH*0.3,cx-stemW*1.5,h*0.78-stemH*0.7,cx-stemW*0.3,h*0.78-stemH);
    ctx.lineTo(cx+stemW*0.3,h*0.78-stemH);
    ctx.bezierCurveTo(cx+stemW*1.5,h*0.78-stemH*0.7,cx+stemW*0.5,h*0.78-stemH*0.3,cx+stemW,h*0.78);
    ctx.closePath();ctx.fillStyle=stemG;ctx.fill();
    const capY=h*0.78-stemH,capR=w*0.28;
    const pulse=1+Math.sin(t*0.08)*0.04;
    const capG=ctx.createRadialGradient(cx,capY-capR*0.3*pulse,capR*0.1,cx,capY,capR*pulse);
    capG.addColorStop(0,`${col}ff`);capG.addColorStop(0.3,`${col}cc`);capG.addColorStop(0.6,`${col}88`);capG.addColorStop(1,`${col}22`);
    ctx.beginPath();ctx.ellipse(cx,capY,capR*pulse,capR*0.55*pulse,0,Math.PI,TAU);
    ctx.fillStyle=capG;ctx.shadowColor=col;ctx.shadowBlur=30;ctx.fill();ctx.shadowBlur=0;
    ctx.beginPath();ctx.ellipse(cx,capY,capR*pulse,capR*0.2*pulse,0,0,TAU);
    ctx.fillStyle=`${col}55`;ctx.fill();
    for(let i=0;i<8;i++){
      const a=(t*0.04+i/8)*TAU,rx=cx+capR*pulse*Math.cos(a),ry=capY+capR*0.15*Math.sin(a);
      ctx.beginPath();ctx.arc(rx,ry,3+i%3,0,TAU);ctx.fillStyle=`${col}${60+i*10}`;ctx.shadowColor=col;ctx.shadowBlur=5;ctx.fill();ctx.shadowBlur=0;
    }
    const rsx=w*0.82,rsy=h*0.22,rr=h*0.09,pulse2=0.5+Math.sin(t*0.12)*0.5;
    ctx.fillStyle=`${col}${Math.round(pulse2*180).toString(16).padStart(2,'0')}`;
    ctx.shadowColor=col;ctx.shadowBlur=12*pulse2;
    ctx.beginPath();ctx.arc(rsx,rsy,rr,0,TAU);ctx.fill();
    [0,TAU/3,TAU*2/3].forEach(a=>{ctx.beginPath();ctx.moveTo(rsx,rsy);ctx.arc(rsx,rsy,rr*0.9,a+0.3,a+TAU/3-0.3);ctx.lineTo(rsx,rsy);ctx.fillStyle="#08100a";ctx.fill();});
    ctx.beginPath();ctx.arc(rsx,rsy,rr*0.25,0,TAU);ctx.fillStyle="#08100a";ctx.fill();ctx.shadowBlur=0;
    const spks=[0.12,0.22,0.31,0.39,0.44,0.55,0.62,0.70,0.78,0.85,0.92];
    const gx=w*0.52,gy=h*0.88,gw=w*0.44,gmid=gy;
    ctx.beginPath();ctx.strokeStyle=`${col}50`;ctx.lineWidth=1;ctx.moveTo(gx,gmid);
    spks.forEach(sp=>{const sx=gx+sp*gw,intensity=0.3+Math.abs(Math.sin(sp*17+t*0.15))*0.7;ctx.lineTo(sx,gmid-h*intensity*0.06);ctx.lineTo(sx,gmid);});
    ctx.lineTo(gx+gw,gmid);ctx.stroke();
    const usv=Math.min(9.99,(0.08+Math.abs(Math.sin(t*0.08+1))*0.8+t*0.003)%9.99).toFixed(2);
    ctx.font="bold 9px monospace";ctx.fillStyle=parseFloat(usv)>1?"#ff4444":col;ctx.shadowColor=ctx.fillStyle;ctx.shadowBlur=5;
    ctx.fillText(`${usv}μSv/h`,2,11);ctx.shadowBlur=0;
  },

  cyber:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    ctx.fillStyle="#020508";ctx.fillRect(0,0,w,h);
    const cols=Math.floor(w/8);
    const chars="01アイウエオカキクケコサシスセソABCDEF<>{}[]|/\\!@#$%^&";
    for(let c=0;c<cols;c++){
      const colSeed=c*137.5;
      const speed=0.04+((colSeed*0.037)%0.06);
      const phase=(t*speed+colSeed*0.13)%1;
      const colH=Math.floor(4+((colSeed*0.07)%6));
      const cx2=c*8+4;
      for(let r=0;r<colH;r++){
        const charPhase=(phase+r/colH)%1;
        const cy2=charPhase*h*1.4-h*0.2+r*9;
        if(cy2<0||cy2>h)continue;
        const brightness=r===0?1:1-(r/colH)*0.7;
        const charIdx=Math.floor((t*10+c*7+r*3)%chars.length);
        if(r===0){ctx.fillStyle=`rgba(255,255,255,${brightness*0.95})`;ctx.shadowColor=col;ctx.shadowBlur=8;}
        else{ctx.fillStyle=`${col}${Math.round(brightness*200).toString(16).padStart(2,'00')}`;ctx.shadowBlur=0;}
        ctx.font=`${r===0?'bold ':''} 7px monospace`;
        ctx.fillText(chars[charIdx],cx2-3,cy2);
      }
    }
    ctx.shadowBlur=0;
    const sx=w*0.18,sy=h*0.08,sw=w*0.64,sh=h*0.62;
    ctx.fillStyle="rgba(0,0,0,0.85)";ctx.fillRect(sx,sy,sw,sh);
    ctx.strokeStyle=`${col}44`;ctx.lineWidth=1.5;ctx.strokeRect(sx,sy,sw,sh);
    const glitch=Math.sin(t*8.3)>0.6;
    if(glitch){for(let g=0;g<3;g++){const gy=sy+Math.random()*sh,gh=2+Math.random()*6;ctx.fillStyle=`${col}40`;ctx.fillRect(sx,gy,sw,gh);ctx.fillStyle=`rgba(255,0,100,0.3)`;ctx.fillRect(sx,gy,sw*0.6,gh*0.5);}}
    const statusRows=[["NETWORK","OFFLINE"],["POWER GRID","FAILING"],["WATER SYS","ERROR"],["BANKING","DOWN"]];
    const statusCols=["#ff3333","#ff6600","#ff4444","#ff2255"];
    const statusY=[0,0.28,0.56,0.84];
    for(let i=0;i<4;i++){
      const ly=sy+sh*0.12+statusY[i]*sh*0.78;
      ctx.font="6px monospace";ctx.fillStyle=col+"60";ctx.fillText(statusRows[i][0],sx+6,ly);
      const sc=statusCols[i],pulse=0.6+Math.sin(t*2+i)*0.4;
      ctx.fillStyle=sc+Math.round(pulse*220).toString(16).padStart(2,"0");
      ctx.shadowColor=sc;ctx.shadowBlur=6*pulse;
      ctx.font="bold 6px monospace";ctx.fillText(statusRows[i][1],sx+sw*0.55,ly);ctx.shadowBlur=0;
    }
    const bPulse=0.5+Math.sin(t*3)*0.5;
    ctx.strokeStyle=`rgba(255,50,50,${bPulse})`;ctx.lineWidth=1.5;ctx.setLineDash([3,2]);
    ctx.beginPath();ctx.moveTo(sx,sy+sh*0.5);ctx.lineTo(sx+sw,sy+sh*0.5);ctx.stroke();ctx.setLineDash([]);
    ctx.font="bold 7px monospace";ctx.fillStyle=`rgba(255,50,50,${bPulse})`;ctx.shadowColor="#ff3333";ctx.shadowBlur=8*bPulse;
    ctx.fillText("◆ BREACH DETECTED",sx+6,sy+sh*0.5-3);ctx.shadowBlur=0;
    const rps=Math.round(1200+Math.max(0,(t*0.08%20)-8)*8200);
    ctx.font="bold 9px monospace";ctx.fillStyle=rps>4000?"#ff4444":col;ctx.shadowColor=ctx.fillStyle;ctx.shadowBlur=5;
    ctx.fillText(`${rps.toLocaleString()}/s`,w-62,11);ctx.shadowBlur=0;
  },

  drought:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const exp=[90,70,65,45,30,10,5,8,25,60,80,95],act=[85,60,40,20,12,3,1,2,10,20,28,40];
    const bw=(w-8)/12-2;
    [0,1,2,3,4,5,6,7,8,9,10,11].forEach(i=>{
      const x=4+i*(bw+2),eH=(exp[i]/100)*(h-10),aH=(act[i]/100)*(h-10);
      ctx.fillStyle=`${col}15`;ctx.fillRect(x,h-8-eH,bw,eH);
      const bc=i<5?col:i<8?"#ff9800":"#ff4444";
      ctx.fillStyle=`${bc}99`;ctx.shadowColor=i>=8?bc:"transparent";ctx.shadowBlur=i>=9?6:0;
      ctx.fillRect(x+1,h-8-aH,bw-2,aH);ctx.shadowBlur=0;
    });
    ctx.beginPath();ctx.strokeStyle=`${col}25`;ctx.lineWidth=0.7;ctx.moveTo(3,h-8);ctx.lineTo(w-3,h-8);ctx.stroke();
    ctx.font="bold 8px monospace";ctx.fillStyle="#ff4444";ctx.shadowColor="#ff4444";ctx.shadowBlur=5;ctx.fillText(`-${Math.round(56+Math.sin(t*0.3)*2)}%`,w-30,10);
  },

  war:(ctx,w,h,t,col)=>{
    ctx.clearRect(0,0,w,h);
    const cx=w*0.32,cy=h*0.46,maxR=Math.min(w*0.28,h*0.42);
    ctx.fillStyle="#030608";ctx.fillRect(0,0,w,h);
    ctx.fillStyle=`${col}12`;ctx.fillRect(0,h*0.74,w,h*0.26);
    [[0.55,0.48,0.10,0.26],[0.68,0.42,0.08,0.32],[0.80,0.50,0.09,0.24],[0.90,0.45,0.08,0.29]].forEach(([bx,by,bw,bh])=>{
      ctx.fillStyle=`${col}18`;
      ctx.beginPath();
      const pts2=[[bx*w,by*h+bh*h],[bx*w+bw*w*0.2,by*h+bh*h*0.7],[bx*w+bw*w*0.4,by*h+bh*h*0.85],[bx*w+bw*w*0.6,by*h],[bx*w+bw*w*0.8,by*h+bh*h*0.4],[bx*w+bw*w,by*h+bh*h]];
      pts2.forEach(([px,py],i)=>i===0?ctx.moveTo(px,py):ctx.lineTo(px,py));
      ctx.lineTo((bx+bw)*w,h*0.74);ctx.closePath();ctx.fill();
    });
    for(let f=0;f<4;f++){
      const fx=(0.55+f*0.12)*w,fy=h*0.74,flicker=Math.sin(t*4+f*2.1)*0.15;
      const fg=ctx.createRadialGradient(fx,fy,0,fx,fy-h*0.08,h*0.12);
      fg.addColorStop(0,`rgba(255,150,30,${0.9+flicker})`);fg.addColorStop(0.5,`${col}88`);fg.addColorStop(1,`${col}00`);
      ctx.fillStyle=fg;ctx.beginPath();ctx.ellipse(fx,fy,h*0.04,h*0.1,0,0,TAU);ctx.fill();
    }
    [0.35,0.65,1].forEach(f=>{ctx.beginPath();ctx.arc(cx,cy,maxR*f,0,TAU);ctx.strokeStyle=`${col}22`;ctx.lineWidth=0.8;ctx.stroke();});
    ctx.strokeStyle=`${col}15`;ctx.lineWidth=0.6;
    ctx.beginPath();ctx.moveTo(cx-maxR,cy);ctx.lineTo(cx+maxR,cy);ctx.moveTo(cx,cy-maxR);ctx.lineTo(cx,cy+maxR);ctx.stroke();
    const ang=(t*0.12)%TAU;
    for(let da=0;da<TAU*0.35;da+=0.03){
      const a=ang-da,al=(TAU*0.35-da)/(TAU*0.35)*0.5;
      ctx.beginPath();ctx.moveTo(cx,cy);ctx.arc(cx,cy,maxR,a-0.04,a);ctx.closePath();
      ctx.fillStyle=`${col}${Math.round(al*255).toString(16).padStart(2,'0')}`;ctx.fill();
    }
    ctx.beginPath();ctx.strokeStyle=`${col}dd`;ctx.lineWidth=1.5;ctx.shadowColor=col;ctx.shadowBlur=8;
    ctx.moveTo(cx,cy);ctx.lineTo(cx+maxR*Math.cos(ang),cy+maxR*Math.sin(ang));ctx.stroke();ctx.shadowBlur=0;
    const targets=[{a:0.8,r:0.55},{a:2.3,r:0.78},{a:3.6,r:0.42},{a:4.9,r:0.68},{a:5.8,r:0.35}];
    targets.forEach(b=>{
      const diff=((ang-b.a)+TAU*4)%TAU;
      if(diff<TAU*0.45){
        const fade=1-diff/(TAU*0.45);
        const bx=cx+maxR*b.r*Math.cos(b.a),by=cy+maxR*b.r*Math.sin(b.a);
        ctx.beginPath();ctx.arc(bx,by,3,0,TAU);
        ctx.fillStyle=`${col}${Math.round(fade*220).toString(16).padStart(2,'0')}`;
        ctx.shadowColor=col;ctx.shadowBlur=10*fade;ctx.fill();ctx.shadowBlur=0;
        if(fade>0.3){ctx.beginPath();ctx.arc(bx,by,6,0,TAU);ctx.strokeStyle=`${col}${Math.round(fade*80).toString(16).padStart(2,'0')}`;ctx.lineWidth=1;ctx.stroke();}
      }
    });
    ctx.beginPath();ctx.arc(cx,cy,3,0,TAU);ctx.fillStyle=col;ctx.shadowColor=col;ctx.shadowBlur=8;ctx.fill();ctx.shadowBlur=0;
    const expPhase=((t*0.07)%1);
    if(expPhase<0.6){
      const ex=w*0.78,ey=h*0.52,er=h*0.14*Math.sin(expPhase/0.6*Math.PI);
      const eg=ctx.createRadialGradient(ex,ey,0,ex,ey,er);
      eg.addColorStop(0,`rgba(255,255,180,${0.95-expPhase})`);
      eg.addColorStop(0.3,`rgba(255,120,20,${0.8-expPhase})`);
      eg.addColorStop(0.6,`${col}${Math.round((0.5-expPhase*0.7)*255).toString(16).padStart(2,'0')}`);
      eg.addColorStop(1,`${col}00`);
      ctx.fillStyle=eg;ctx.shadowColor=col;ctx.shadowBlur=20*(1-expPhase);
      ctx.beginPath();ctx.arc(ex,ey,er,0,TAU);ctx.fill();ctx.shadowBlur=0;
      for(let d=0;d<6;d++){const da=d/6*TAU+expPhase*2,dr=er*0.8;ctx.fillStyle=`${col}${Math.round((0.6-expPhase)*255).toString(16).padStart(2,'0')}`;ctx.beginPath();ctx.arc(ex+dr*Math.cos(da),ey+dr*Math.sin(da),2,0,TAU);ctx.fill();}
    }
    ctx.font="7px monospace";ctx.fillStyle=`${col}80`;ctx.shadowBlur=0;
    ctx.fillText(String.fromCharCode(9654)+" "+Math.round(240+Math.sin(t*0.05)*15)+"km",w-48,11);
  },
};

function DataIcon({id,color,width=80,height=44}){
  const ref=useRef(null),animRef=useRef(null),t0=useRef(null);
  useEffect(()=>{
    const canvas=ref.current;if(!canvas)return;
    const ctx=canvas.getContext("2d");
    const draw=DRAWERS[id];if(!draw)return;
    const loop=ts=>{if(!t0.current)t0.current=ts;draw(ctx,canvas.width,canvas.height,(ts-t0.current)/1000*0.1,color);animRef.current=requestAnimationFrame(loop);};
    animRef.current=requestAnimationFrame(loop);
    return()=>cancelAnimationFrame(animRef.current);
  },[id,color]);
  return <canvas ref={ref} width={width} height={height} style={{display:"block",width,height}}/>;
}