// ============================================================
// HUNGRY HOLE 3D — premium low-poly prop library (70+ props)
// Flat two-tone facet shading. Exposes: Prop, PROP_DEF, shade
// ============================================================
const { useMemo: useMemoP } = React;

function shade(hex, amt) {
  if (!hex || hex[0] !== '#') return hex;
  const h = hex.replace('#', '');
  const n = h.length === 3 ? h.split('').map(x => x + x).join('') : h;
  let r = parseInt(n.slice(0, 2), 16), g = parseInt(n.slice(2, 4), 16), b = parseInt(n.slice(4, 6), 16);
  const f = (v) => Math.max(0, Math.min(255, Math.round(v + amt * 255)));
  return `rgb(${f(r)},${f(g)},${f(b)})`;
}

// canonical color · edibility tier (1 small,2 med,3 large) · intrinsic w/h
const PROP_DEF = {
  // ----- Sunny Town / generic -----
  cube:{c:'#FF8A5B',tier:1,w:44,h:44}, crate:{c:'#C8924E',tier:2,w:48,h:46}, cone:{c:'#FF6B6B',tier:1,w:40,h:48},
  sphere:{c:'#5BC8FF',tier:1,w:42,h:42}, ball:{c:'#FFC93C',tier:1,w:42,h:42}, bench:{c:'#B07A43',tier:2,w:62,h:40},
  house:{c:'#FFC04B',tier:3,w:66,h:66}, car:{c:'#FF6B6B',tier:2,w:66,h:42}, bus:{c:'#FFB627',tier:3,w:78,h:46},
  tree:{c:'#2FB86B',tier:2,w:50,h:62}, mailbox:{c:'#2F7BF6',tier:1,w:36,h:50}, hydrant:{c:'#FF5B5B',tier:1,w:30,h:44},
  lamp:{c:'#44506B',tier:2,w:30,h:64}, bin:{c:'#5A6577',tier:1,w:36,h:44}, sign:{c:'#22C9A0',tier:1,w:40,h:48},
  bush:{c:'#34B86A',tier:1,w:46,h:36}, fence:{c:'#C99A63',tier:1,w:54,h:38}, flowerbed:{c:'#FF6FA8',tier:2,w:56,h:34},
  dog:{c:'#C98A52',tier:1,w:46,h:38}, bike:{c:'#2F7BF6',tier:2,w:54,h:44}, barrel:{c:'#A9743F',tier:2,w:42,h:50},
  // ----- Candy Park -----
  donut:{c:'#FF8FC7',tier:1,w:44,h:44}, lollipop:{c:'#FF5FA9',tier:1,w:34,h:56}, icecream:{c:'#FFD9B0',tier:1,w:38,h:60},
  cupcake:{c:'#FFA8D0',tier:1,w:42,h:48}, candycane:{c:'#FF6B6B',tier:1,w:32,h:54}, gummy:{c:'#22C9A0',tier:1,w:36,h:38},
  cookie:{c:'#C98A52',tier:1,w:42,h:42}, gumball:{c:'#7C5CFC',tier:1,w:36,h:36}, popcorn:{c:'#FFE08A',tier:2,w:46,h:50},
  cottoncandy:{c:'#FF9ECB',tier:1,w:46,h:52}, cake:{c:'#FFE6EC',tier:3,w:64,h:58},
  // ----- Beach Bay -----
  umbrella:{c:'#FF6B6B',tier:2,w:58,h:58}, sandcastle:{c:'#F2D89B',tier:3,w:62,h:56}, beachball:{c:'#FFFFFF',tier:1,w:42,h:42},
  bucket:{c:'#FF8A3C',tier:1,w:38,h:40}, flipflop:{c:'#22A6F2',tier:1,w:36,h:44}, crab:{c:'#FF6B4A',tier:1,w:46,h:34},
  starfish:{c:'#FFB627',tier:1,w:42,h:42}, surfboard:{c:'#22C9A0',tier:2,w:34,h:64}, lifering:{c:'#FF6B6B',tier:1,w:44,h:44},
  palm:{c:'#22C9A0',tier:2,w:52,h:66}, boat:{c:'#22A6F2',tier:3,w:70,h:46}, coconut:{c:'#6B4A2B',tier:1,w:34,h:34}, shell:{c:'#FFD2E0',tier:1,w:40,h:36},
  // ----- Frost Village -----
  snowman:{c:'#FFFFFF',tier:2,w:46,h:62}, gift:{c:'#FF6B6B',tier:1,w:44,h:44}, pine:{c:'#2E9E6B',tier:2,w:50,h:64},
  igloo:{c:'#E8F2FB',tier:3,w:66,h:48}, snowball:{c:'#FFFFFF',tier:1,w:38,h:38}, mitten:{c:'#FF6B6B',tier:1,w:38,h:44},
  bell:{c:'#FFC93C',tier:1,w:38,h:42}, sled:{c:'#C44E4E',tier:2,w:56,h:38}, lantern:{c:'#FFB627',tier:1,w:32,h:48},
  penguin:{c:'#2B3550',tier:1,w:38,h:48}, icecube:{c:'#BFE9FF',tier:1,w:40,h:40},
  // ----- Dino Valley -----
  egg:{c:'#FFE3B0',tier:1,w:38,h:48}, bone:{c:'#EDE6D0',tier:1,w:46,h:30}, skull:{c:'#EDE6D0',tier:2,w:46,h:44},
  fern:{c:'#2FB86B',tier:1,w:48,h:50}, boulder:{c:'#8B8579',tier:2,w:52,h:44}, mushroom:{c:'#FF6B6B',tier:1,w:42,h:46},
  ammonite:{c:'#C98A52',tier:1,w:42,h:42}, amber:{c:'#FFB627',tier:1,w:36,h:44}, dino:{c:'#6FB84A',tier:3,w:66,h:60},
  vine:{c:'#2E9E6B',tier:1,w:38,h:56}, statue:{c:'#9AA6B5',tier:3,w:52,h:64},
  // ----- Neon Port -----
  robot:{c:'#9AA6D6',tier:2,w:48,h:58}, neon:{c:'#21E6FF',tier:2,w:56,h:52}, rocket:{c:'#FF6B6B',tier:2,w:40,h:66},
  drone:{c:'#7C5CFC',tier:1,w:52,h:38}, arcade:{c:'#7C5CFC',tier:3,w:50,h:64}, satellite:{c:'#BFC8E0',tier:2,w:54,h:46},
  console:{c:'#2B3550',tier:1,w:44,h:34}, speaker:{c:'#44506B',tier:2,w:42,h:56}, hologram:{c:'#21E6FF',tier:1,w:40,h:50},
  server:{c:'#3A4straight',tier:2,w:42,h:60}, crystal:{c:'#B27BFF',tier:1,w:38,h:52}, capsule:{c:'#FF6B6B',tier:2,w:40,h:54}, balloon:{c:'#7C5CFC',tier:1,w:38,h:54},
  rock:{c:'#8B8579',tier:2,w:50,h:42},
};
// fix stray token
PROP_DEF.server.c = '#44506B';

function Prop({ type = 'cube', size = 44, gold = false, avoid = false, color, style = {} }) {
  const def = PROP_DEF[type] || PROP_DEF.cube;
  const base = gold ? '#FFC93C' : avoid ? '#FF5B5B' : (color || def.c);
  const L = shade(base, 0.18), LL = shade(base, 0.30), D = shade(base, -0.14), E = shade(base, -0.26), DD = shade(base, -0.4);
  const W = def.w, H = def.h, sc = size / Math.max(W, H);
  const wood = '#B07A43', woodD = '#8A5E32', woodL = '#C99560';

  const wrap = (kids, glow) => (
    <div style={{ width: size, height: size, position: 'relative', transform: `scale(${sc})`, transformOrigin: 'center bottom',
      filter: gold ? 'drop-shadow(0 0 9px rgba(255,201,60,0.75)) drop-shadow(0 4px 4px rgba(0,0,0,0.2))' : 'drop-shadow(0 5px 4px rgba(0,0,0,0.22)) drop-shadow(0 1px 0 rgba(255,255,255,0.25))', ...style }}>
      {/* contact shadow */}
      <div style={{ position: 'absolute', left: '50%', bottom: -2, transform: 'translateX(-50%)', width: W * 0.78, height: W * 0.2, borderRadius: '50%', background: 'rgba(0,0,0,0.28)', filter: 'blur(3px)' }} />
      <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', overflow: 'visible', position: 'relative' }}>{kids}</svg>
      {/* soft top sheen for dimensionality */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', mixBlendMode: 'soft-light', opacity: 0.5,
        background: 'radial-gradient(60% 45% at 36% 22%, rgba(255,255,255,0.9), transparent 70%)' }} />
      {gold && <div style={{ position: 'absolute', inset: '-12%', borderRadius: '50%', pointerEvents: 'none', background: 'radial-gradient(circle, rgba(255,210,74,0.4), transparent 70%)' }} />}
    </div>
  );
  // shared spec highlight dot
  const spec = (x, y, r) => <ellipse cx={x} cy={y} rx={r} ry={r * 0.7} fill="#fff" opacity="0.45" />;
  // faceted box: front + lighter top facet + darker right facet
  const boxFace = (x, y, w, h, r = 5) => <>
    <rect x={x} y={y} width={w} height={h} rx={r} fill={base} />
    <rect x={x} y={y} width={w} height={h * 0.34} rx={r} fill={L} />
    <rect x={x + w * 0.7} y={y + 2} width={w * 0.3} height={h - 4} rx={r} fill={D} opacity="0.55" />
  </>;
  const ball = (cx, cy, rx, ry, c = base) => <>
    <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill={c} />
    <path d={`M${cx - rx} ${cy} A ${rx} ${ry} 0 0 0 ${cx + rx} ${cy} Z`} fill={shade(c, -0.13)} opacity="0.6" />
    <ellipse cx={cx - rx * 0.34} cy={cy - ry * 0.34} rx={rx * 0.32} ry={ry * 0.26} fill="#fff" opacity="0.4" />
  </>;
  const cyl = (x, y, w, h, c = base) => <>
    <rect x={x} y={y + 5} width={w} height={h - 8} fill={c} />
    <rect x={x} y={y + 5} width={w * 0.34} height={h - 8} fill={shade(c, 0.16)} />
    <ellipse cx={x + w / 2} cy={y + h - 3} rx={w / 2} ry="5" fill={shade(c, -0.2)} />
    <ellipse cx={x + w / 2} cy={y + 5} rx={w / 2} ry="5" fill={shade(c, 0.24)} />
  </>;

  switch (type) {
    case 'cube': case 'crate': case 'icecube': case 'console': return wrap(<>
      {boxFace(4, H * 0.16, W - 8, H * 0.8)}
      {type === 'crate' && <><path d={`M4 ${H*0.5} h${W-8} M${W*0.3} ${H*0.16} v${H*0.8} M${W*0.7} ${H*0.16} v${H*0.8}`} stroke={E} strokeWidth="3" opacity="0.5"/></>}
      {type === 'icecube' && <rect x={W*0.2} y={H*0.28} width={W*0.3} height={H*0.3} rx="3" fill="#fff" opacity="0.5"/>}
      {type === 'console' && <><rect x={W*0.16} y={H*0.34} width={W*0.3} height={H*0.12} rx="3" fill="#21E6FF"/><circle cx={W*0.72} cy={H*0.6} r="4" fill="#FF6B6B"/></>}
      {spec(W * 0.3, H * 0.3, 4)}
    </>);
    case 'cone': return wrap(<>
      <ellipse cx={W/2} cy={H-5} rx={W/2-2} ry="5" fill={E}/>
      <path d={`M${W/2} 3 L${W-4} ${H-5} L4 ${H-5} Z`} fill={base}/>
      <path d={`M${W/2} 3 L${W/2} ${H-5} L4 ${H-5} Z`} fill={L}/>
      <path d={`M${W/2} 3 L${W-4} ${H-5} L${W/2} ${H-5} Z`} fill={D} opacity="0.5"/>
    </>);
    case 'sphere': case 'ball': case 'beachball': case 'snowball': case 'gumball': case 'coconut': return wrap(<>
      {ball(W/2, H/2, W/2-2, H/2-2)}
      {type === 'ball' && <path d={`M4 ${H/2} q ${W/2-4} -14 ${W-8} 0`} stroke="#fff" strokeWidth="3" fill="none" opacity="0.6"/>}
      {type === 'beachball' && <><path d={`M${W/2} 3 L${W/2} ${H-3}`} stroke="#FF6B6B" strokeWidth="3" opacity="0.7"/><path d={`M3 ${H/2} h${W-6}`} stroke="#22A6F2" strokeWidth="3" opacity="0.7"/></>}
      {type === 'coconut' && <><circle cx={W*0.4} cy={H*0.4} r="2.5" fill={DD}/><circle cx={W*0.6} cy={H*0.4} r="2.5" fill={DD}/></>}
    </>);
    case 'bench': return wrap(<>
      {/* legs */}
      <rect x={W*0.12} y={H*0.6} width="6" height={H*0.4} rx="2" fill={woodD}/>
      <rect x={W*0.82} y={H*0.6} width="6" height={H*0.4} rx="2" fill={woodD}/>
      {/* seat slats */}
      <rect x="4" y={H*0.5} width={W-8} height="8" rx="3" fill={wood}/>
      <rect x="4" y={H*0.5} width={W-8} height="3" rx="2" fill={woodL}/>
      {/* backrest slats */}
      <rect x="6" y={H*0.18} width={W-12} height="7" rx="3" fill={wood}/>
      <rect x="6" y={H*0.18} width={W-12} height="3" rx="2" fill={woodL}/>
      <rect x="6" y={H*0.32} width={W-12} height="7" rx="3" fill={wood}/>
      <rect x="6" y={H*0.32} width={W-12} height="3" rx="2" fill={woodL}/>
      {/* arm posts */}
      <rect x={W*0.1} y={H*0.2} width="6" height={H*0.4} rx="3" fill={woodD}/>
      <rect x={W*0.84} y={H*0.2} width="6" height={H*0.4} rx="3" fill={woodD}/>
    </>);
    case 'barrel': case 'bin': case 'bucket': case 'speaker': case 'lantern': return wrap(<>
      {cyl(type==='lantern'?W*0.2:4, H*0.16, type==='lantern'?W*0.6:W-8, H*0.84)}
      {type === 'barrel' && <><path d={`M5 ${H*0.4} h${W-10} M5 ${H*0.7} h${W-10}`} stroke={E} strokeWidth="3" opacity="0.6"/></>}
      {type === 'bin' && <rect x="3" y={H*0.12} width={W-6} height="6" rx="3" fill={shade(base,-0.2)}/>}
      {type === 'speaker' && <><circle cx={W/2} cy={H*0.4} r={W*0.22} fill={shade(base,-0.3)}/><circle cx={W/2} cy={H*0.72} r={W*0.14} fill={shade(base,-0.3)}/></>}
      {type === 'lantern' && <rect x={W*0.28} y={H*0.3} width={W*0.44} height={H*0.4} rx="3" fill="#FFE9A8" opacity="0.9"/>}
    </>);
    case 'house': return wrap(<>
      <rect x="8" y={H*0.42} width={W-16} height={H*0.54} rx="5" fill={base}/>
      <rect x="8" y={H*0.42} width={(W-16)*0.32} height={H*0.54} rx="5" fill={L}/>
      <path d={`M2 ${H*0.46} L${W/2} 4 L${W-2} ${H*0.46} Z`} fill="#E8654E"/>
      <path d={`M${W/2} 4 L${W-2} ${H*0.46} L${W/2} ${H*0.46} Z`} fill="#C44E3A"/>
      <rect x={W/2-8} y={H*0.62} width="16" height={H*0.34} rx="3" fill={shade(base,-0.32)}/>
      <rect x={W*0.2} y={H*0.56} width="10" height="10" rx="2" fill="#CFE8FF"/>
    </>);
    case 'car': return wrap(<>
      <rect x="4" y={H*0.34} width={W-8} height={H*0.42} rx="12" fill={base}/>
      <rect x="4" y={H*0.34} width={W-8} height={H*0.2} rx="12" fill={L}/>
      <rect x={W*0.26} y={H*0.1} width={W*0.46} height={H*0.34} rx="9" fill={shade(base,0.08)}/>
      <rect x={W*0.3} y={H*0.16} width={W*0.4} height={H*0.22} rx="5" fill="#CFE8FF"/>
      <circle cx={W*0.27} cy={H*0.78} r="9" fill="#2A3142"/><circle cx={W*0.73} cy={H*0.78} r="9" fill="#2A3142"/>
      <circle cx={W*0.27} cy={H*0.78} r="4" fill="#6B7689"/><circle cx={W*0.73} cy={H*0.78} r="4" fill="#6B7689"/>
      <circle cx={W*0.92} cy={H*0.5} r="3" fill="#FFE08A"/>
    </>);
    case 'bus': return wrap(<>
      <rect x="3" y={H*0.2} width={W-6} height={H*0.6} rx="9" fill={base}/>
      <rect x="3" y={H*0.2} width={W-6} height={H*0.16} rx="9" fill={L}/>
      {[0.16,0.36,0.56,0.76].map((p,i)=><rect key={i} x={W*p} y={H*0.3} width={W*0.14} height={H*0.22} rx="3" fill="#CFE8FF"/>)}
      <circle cx={W*0.24} cy={H*0.82} r="9" fill="#2A3142"/><circle cx={W*0.76} cy={H*0.82} r="9" fill="#2A3142"/>
    </>);
    case 'tree': case 'bush': return wrap(<>
      {type==='tree' && <rect x={W/2-5} y={H*0.62} width="10" height={H*0.4} rx="3" fill="#8B5E3C"/>}
      <ellipse cx={W/2} cy={type==='tree'?H*0.34:H*0.5} rx={W/2-2} ry={type==='tree'?H*0.34:H*0.46} fill={base}/>
      <path d={`M${W*0.06} ${type==='tree'?H*0.34:H*0.5} A ${W/2-2} ${type==='tree'?H*0.34:H*0.46} 0 0 0 ${W*0.94} ${type==='tree'?H*0.34:H*0.5} Z`} fill={D} opacity="0.5"/>
      <ellipse cx={W*0.36} cy={type==='tree'?H*0.24:H*0.4} rx={W*0.2} ry={H*0.14} fill={LL} opacity="0.7"/>
    </>);
    case 'pine': return wrap(<>
      <rect x={W/2-4} y={H*0.8} width="8" height={H*0.2} rx="2" fill="#8B5E3C"/>
      {[[0.02,0.44],[0.24,0.66],[0.46,0.86]].map(([t,b],i)=><React.Fragment key={i}><path d={`M${W/2} ${H*t} L${W-6} ${H*b} L6 ${H*b} Z`} fill={base}/><path d={`M${W/2} ${H*t} L${W/2} ${H*b} L6 ${H*b} Z`} fill={L}/></React.Fragment>)}
    </>);
    case 'palm': return wrap(<>
      <path d={`M${W/2} ${H} q -8 ${-H*0.55} -3 ${-H*0.74}`} stroke="#A9743F" strokeWidth="9" fill="none" strokeLinecap="round"/>
      <path d={`M${W/2} ${H} q -8 ${-H*0.55} -3 ${-H*0.74}`} stroke="#C99560" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {[-72,-36,0,36,72].map((a,i)=><ellipse key={i} cx={W/2-2} cy={H*0.2} rx={W*0.42} ry="8" fill={i%2?D:base} transform={`rotate(${a} ${W/2-2} ${H*0.2})`}/>)}
      <circle cx={W/2} cy={H*0.2} r="5" fill="#8B5E3C"/>
    </>);
    case 'mailbox': return wrap(<>
      <rect x={W*0.42} y={H*0.4} width="6" height={H*0.6} fill={shade(base,-0.3)}/>
      <rect x="4" y={H*0.16} width={W-8} height={H*0.34} rx="9" fill={base}/>
      <rect x="4" y={H*0.16} width={W-8} height={H*0.14} rx="9" fill={L}/>
      <rect x={W*0.18} y={H*0.26} width={W*0.4} height="6" rx="3" fill="#fff" opacity="0.8"/>
      <rect x={W*0.7} y={H*0.2} width="5" height={H*0.16} fill="#FF5B5B"/>
    </>);
    case 'hydrant': return wrap(<>
      <rect x={W*0.3} y={H*0.3} width={W*0.4} height={H*0.66} rx="6" fill={base}/>
      <rect x={W*0.3} y={H*0.3} width={W*0.16} height={H*0.66} rx="6" fill={L}/>
      <ellipse cx={W/2} cy={H*0.26} rx={W*0.26} ry={H*0.1} fill={base}/>
      <circle cx={W/2} cy={H*0.2} r={W*0.12} fill={D}/>
      <rect x="3" y={H*0.46} width={W-6} height="6" rx="3" fill={E}/>
    </>);
    case 'lamp': return wrap(<>
      <rect x={W/2-3} y={H*0.2} width="6" height={H*0.8} fill="#3A4560"/>
      <ellipse cx={W/2} cy={H} rx={W*0.34} ry="5" fill="#3A4560"/>
      <path d={`M${W*0.2} ${H*0.2} q ${W*0.3} -${H*0.16} ${W*0.6} 0 l-2 8 q -${W*0.28} -${H*0.1} -${W*0.56} 0 Z`} fill="#FFD24A"/>
      <ellipse cx={W/2} cy={H*0.16} rx={W*0.3} ry="6" fill="#FFE9A8"/>
    </>);
    case 'sign': return wrap(<>
      <rect x={W/2-3} y={H*0.3} width="6" height={H*0.7} fill="#8A5E32"/>
      <rect x="4" y={H*0.08} width={W-8} height={H*0.34} rx="5" fill={base}/>
      <rect x="4" y={H*0.08} width={W-8} height={H*0.12} rx="5" fill={L}/>
      <rect x={W*0.18} y={H*0.18} width={W*0.5} height="5" rx="2" fill="#fff" opacity="0.85"/>
      <rect x={W*0.18} y={H*0.28} width={W*0.36} height="5" rx="2" fill="#fff" opacity="0.6"/>
    </>);
    case 'fence': return wrap(<>
      <rect x="4" y={H*0.38} width={W-8} height="7" rx="2" fill={shade(base,0.06)}/>
      <rect x="4" y={H*0.62} width={W-8} height="7" rx="2" fill={shade(base,0.06)}/>
      {[0.1,0.34,0.58,0.82].map((p,i)=><React.Fragment key={i}><path d={`M${W*p} ${H*0.96} L${W*p} ${H*0.22} L${W*p+8} ${H*0.16} L${W*p+8} ${H*0.9} Z`} fill={base}/><path d={`M${W*p+8} ${H*0.16} L${W*p+8} ${H*0.9} L${W*p+11} ${H*0.86} L${W*p+11} ${H*0.13} Z`} fill={D}/></React.Fragment>)}
    </>);
    case 'flowerbed': return wrap(<>
      <rect x="4" y={H*0.5} width={W-8} height={H*0.46} rx="6" fill={woodL}/>
      <rect x="4" y={H*0.5} width={W-8} height={H*0.16} rx="6" fill="#D9B07A"/>
      {[[0.2,'#FF6FA8'],[0.42,'#FFC93C'],[0.64,'#7C5CFC'],[0.82,'#FF6B6B']].map(([p,c],i)=><React.Fragment key={i}><rect x={W*p+2} y={H*0.3} width="3" height={H*0.24} fill="#2FB86B"/>{[0,72,144,216,288].map((a,j)=><ellipse key={j} cx={W*p+3.5} cy={H*0.26} rx="4" ry="2.5" fill={c} transform={`rotate(${a} ${W*p+3.5} ${H*0.26})`}/>)}<circle cx={W*p+3.5} cy={H*0.26} r="2.5" fill="#FFE08A"/></React.Fragment>)}
    </>);
    case 'dog': return wrap(<>
      <ellipse cx={W*0.46} cy={H*0.62} rx={W*0.34} ry={H*0.26} fill={base}/>
      <circle cx={W*0.78} cy={H*0.42} r={W*0.18} fill={base}/>
      <path d={`M${W*0.66} ${H*0.3} l-4 -12 l8 4 Z`} fill={D}/>
      <rect x={W*0.2} y={H*0.78} width="6" height={H*0.2} fill={D}/><rect x={W*0.6} y={H*0.78} width="6" height={H*0.2} fill={D}/>
      <circle cx={W*0.84} cy={H*0.4} r="2.5" fill="#2A3142"/><circle cx={W*0.9} cy={H*0.46} r="2" fill="#2A3142"/>
      <path d={`M${W*0.14} ${H*0.6} q -10 -4 -2 6`} stroke={base} strokeWidth="5" fill="none" strokeLinecap="round"/>
    </>);
    case 'bike': return wrap(<>
      <circle cx={W*0.24} cy={H*0.66} r={W*0.22} fill="none" stroke="#2A3142" strokeWidth="4"/>
      <circle cx={W*0.76} cy={H*0.66} r={W*0.22} fill="none" stroke="#2A3142" strokeWidth="4"/>
      <path d={`M${W*0.24} ${H*0.66} L${W*0.5} ${H*0.66} L${W*0.4} ${H*0.34} L${W*0.76} ${H*0.66} M${W*0.5} ${H*0.66} L${W*0.62} ${H*0.34} L${W*0.4} ${H*0.34}`} fill="none" stroke={base} strokeWidth="4" strokeLinejoin="round"/>
      <rect x={W*0.56} y={H*0.28} width={W*0.16} height="5" rx="2" fill={D}/>
    </>);
    // ---------- Candy ----------
    case 'donut': return wrap(<>
      <circle cx={W/2} cy={H/2} r={W/2-2} fill="#C98A52"/>
      <ellipse cx={W/2} cy={H*0.42} rx={W/2-3} ry={H*0.4} fill={base}/>
      <circle cx={W/2} cy={H/2} r={W*0.15} fill="#fff"/>
      {[0,60,120,180,240,300].map((a,i)=><rect key={i} x={W/2-1} y={H*0.16} width="3" height="6" rx="1.5" fill={['#FF6B6B','#22C9A0','#FFC93C','#7C5CFC'][i%4]} transform={`rotate(${a} ${W/2} ${H/2})`}/>)}
    </>);
    case 'lollipop': return wrap(<>
      <rect x={W/2-2} y={H*0.5} width="4" height={H*0.5} rx="2" fill="#fff"/>
      <circle cx={W/2} cy={H*0.3} r={W*0.42} fill={base}/>
      <path d={`M${W/2} ${H*0.3} m-${W*0.42} 0 a ${W*0.42} ${W*0.42} 0 0 1 ${W*0.84} 0`} fill="none" stroke="#fff" strokeWidth="4" opacity="0.7" strokeLinecap="round" transform={`rotate(40 ${W/2} ${H*0.3})`}/>
      {spec(W*0.38,H*0.2,4)}
    </>);
    case 'icecream': return wrap(<>
      <path d={`M${W*0.24} ${H*0.42} L${W/2} ${H} L${W*0.76} ${H*0.42} Z`} fill="#E0A85C"/>
      <path d={`M${W*0.24} ${H*0.42} L${W/2} ${H} L${W/2} ${H*0.42} Z`} fill="#C98A52"/>
      <circle cx={W/2} cy={H*0.34} r={W*0.3} fill={base}/>
      <circle cx={W*0.38} cy={H*0.28} r={W*0.16} fill="#FF8FC7"/>
      <circle cx={W*0.62} cy={H*0.3} r={W*0.14} fill="#22C9A0"/>
      <circle cx={W/2} cy={H*0.16} r="4" fill="#FF6B6B"/>
    </>);
    case 'cupcake': return wrap(<>
      <path d={`M${W*0.2} ${H*0.52} L${W*0.28} ${H} L${W*0.72} ${H} L${W*0.8} ${H*0.52} Z`} fill="#E08CC0"/>
      {[0.3,0.5,0.7].map((p,i)=><path key={i} d={`M${W*p} ${H*0.52} L${W*p} ${H}`} stroke="#C46FA8" strokeWidth="2"/>)}
      <path d={`M${W*0.16} ${H*0.54} q ${W*0.34} -${H*0.4} ${W*0.68} 0 Z`} fill={base}/>
      <circle cx={W/2} cy={H*0.2} r="4" fill="#FF6B6B"/>
    </>);
    case 'candycane': return wrap(<>
      <path d={`M${W*0.36} ${H} L${W*0.36} ${H*0.3} q 0 -${H*0.28} ${W*0.28} 0`} fill="none" stroke="#fff" strokeWidth="10" strokeLinecap="round"/>
      <path d={`M${W*0.36} ${H} L${W*0.36} ${H*0.3} q 0 -${H*0.28} ${W*0.28} 0`} fill="none" stroke={base} strokeWidth="10" strokeLinecap="round" strokeDasharray="6 6"/>
    </>);
    case 'gummy': return wrap(<>
      <path d={`M${W*0.5} ${H*0.08} q ${W*0.46} 0 ${W*0.4} ${H*0.5} q -${W*0.06} ${H*0.44} -${W*0.4} ${H*0.4} q -${W*0.34} 0 -${W*0.4} -${H*0.4} q -${W*0.06} -${H*0.5} ${W*0.4} -${H*0.5} Z`} fill={base} opacity="0.92"/>
      <circle cx={W*0.4} cy={H*0.4} r="3" fill={DD}/><circle cx={W*0.6} cy={H*0.4} r="3" fill={DD}/>
      {spec(W*0.36,H*0.26,5)}
    </>);
    case 'cookie': return wrap(<>
      {ball(W/2,H/2,W/2-2,H/2-2,'#D9A05C')}
      {[[0.36,0.34],[0.62,0.4],[0.46,0.62],[0.7,0.66],[0.3,0.56]].map(([x,y],i)=><circle key={i} cx={W*x} cy={H*y} r="3" fill="#5A3A1A"/>)}
    </>);
    case 'popcorn': return wrap(<>
      <path d={`M${W*0.24} ${H*0.5} L${W*0.32} ${H} L${W*0.68} ${H} L${W*0.76} ${H*0.5} Z`} fill="#FF5B5B"/>
      {[0.36,0.52,0.68].map((p,i)=><path key={i} d={`M${W*p} ${H*0.5} L${W*p-W*0.02} ${H}`} stroke="#fff" strokeWidth="6"/>)}
      {[[0.3,0.34],[0.5,0.24],[0.7,0.34],[0.4,0.46],[0.62,0.46]].map(([x,y],i)=><circle key={i} cx={W*x} cy={H*y} r={W*0.12} fill={i%2?'#FFF6D6':base}/>)}
    </>);
    case 'cottoncandy': return wrap(<>
      <rect x={W/2-2} y={H*0.5} width="4" height={H*0.5} fill="#E0C9A8"/>
      {[[0.5,0.32,0.4],[0.34,0.4,0.24],[0.66,0.4,0.24],[0.42,0.22,0.2],[0.6,0.24,0.2]].map(([x,y,r],i)=><circle key={i} cx={W*x} cy={H*y} r={W*r} fill={i%2?shade(base,0.12):base}/>)}
    </>);
    case 'cake': return wrap(<>
      <rect x="6" y={H*0.62} width={W-12} height={H*0.34} rx="6" fill={base}/>
      <rect x={W*0.16} y={H*0.4} width={W*0.68} height={H*0.28} rx="6" fill={shade(base,0.06)}/>
      <rect x={W*0.28} y={H*0.22} width={W*0.44} height={H*0.24} rx="6" fill="#fff"/>
      <path d={`M6 ${H*0.68} q ${W*0.12} 14 ${W*0.24} 0 q ${W*0.12} 14 ${W*0.24} 0 q ${W*0.12} 14 ${W*0.24} 0 q ${W*0.12} 14 ${W*0.22} 0`} fill="#FF8FC7"/>
      {[0.4,0.5,0.6].map((p,i)=><React.Fragment key={i}><rect x={W*p-1} y={H*0.1} width="3" height={H*0.14} fill="#FFC93C"/><circle cx={W*p+0.5} cy={H*0.08} r="3" fill="#FF6B6B"/></React.Fragment>)}
    </>);
    // ---------- Beach ----------
    case 'umbrella': return wrap(<>
      <rect x={W/2-2} y={H*0.42} width="4" height={H*0.58} fill="#8B8579"/>
      <path d={`M3 ${H*0.46} A ${W/2-3} ${H*0.42} 0 0 1 ${W-3} ${H*0.46} Z`} fill={base}/>
      {[0.25,0.5,0.75].map((p,i)=><path key={i} d={`M${W*p} ${H*0.46} L${W*(p<0.5?p-0.04:p+0.04)} ${H*0.1}`} stroke="#fff" strokeWidth="0.5"/>)}
      <path d={`M3 ${H*0.46} A ${W/2-3} ${H*0.42} 0 0 1 ${W*0.34} ${H*0.46} Z`} fill="#fff"/>
      <path d={`M${W*0.66} ${H*0.46} A ${W/2-3} ${H*0.42} 0 0 1 ${W-3} ${H*0.46} Z`} fill="#fff"/>
    </>);
    case 'sandcastle': return wrap(<>
      <rect x="6" y={H*0.46} width={W-12} height={H*0.5} rx="3" fill={base}/>
      <rect x="6" y={H*0.46} width={W-12} height={H*0.16} fill={L}/>
      {[0.14,0.5,0.86].map((p,i)=><React.Fragment key={i}><rect x={W*p-7} y={H*0.22} width="14" height={H*0.3} fill={base}/><path d={`M${W*p-9} ${H*0.24} l4 -10 l4 10 l4 -10 l4 10 Z`} fill={base}/></React.Fragment>)}
      <rect x={W*0.44} y={H*0.6} width={W*0.12} height={H*0.36} fill={E}/>
      <path d={`M${W*0.5} ${H*0.12} l10 4 l-10 4 Z`} fill="#FF6B6B"/>
    </>);
    case 'bucket': return wrap(<>
      <path d={`M${W*0.16} ${H*0.28} L${W*0.26} ${H*0.96} L${W*0.74} ${H*0.96} L${W*0.84} ${H*0.28} Z`} fill={base}/>
      <path d={`M${W*0.16} ${H*0.28} L${W*0.26} ${H*0.96} L${W*0.42} ${H*0.96} L${W*0.34} ${H*0.28} Z`} fill={L}/>
      <ellipse cx={W/2} cy={H*0.28} rx={W*0.34} ry="6" fill={shade(base,0.2)}/>
      <path d={`M${W*0.2} ${H*0.28} q ${W*0.3} -${H*0.2} ${W*0.6} 0`} fill="none" stroke={D} strokeWidth="3"/>
    </>);
    case 'flipflop': return wrap(<>
      <ellipse cx={W/2} cy={H*0.56} rx={W*0.34} ry={H*0.42} fill={base}/>
      <ellipse cx={W/2} cy={H*0.56} rx={W*0.24} ry={H*0.32} fill={L}/>
      <path d={`M${W/2} ${H*0.3} L${W*0.36} ${H*0.5} M${W/2} ${H*0.3} L${W*0.64} ${H*0.5}`} stroke="#fff" strokeWidth="4" strokeLinecap="round"/>
    </>);
    case 'crab': return wrap(<>
      <ellipse cx={W/2} cy={H*0.6} rx={W*0.3} ry={H*0.26} fill={base}/>
      <circle cx={W*0.3} cy={H*0.38} r={W*0.14} fill={base}/><circle cx={W*0.7} cy={H*0.38} r={W*0.14} fill={base}/>
      {[0.2,0.8].map((p,i)=><path key={i} d={`M${W*p} ${H*0.6} q ${(p<0.5?-1:1)*W*0.18} -8 ${(p<0.5?-1:1)*W*0.1} 10`} stroke={base} strokeWidth="4" fill="none" strokeLinecap="round"/>)}
      <circle cx={W*0.42} cy={H*0.34} r="3" fill="#2A3142"/><circle cx={W*0.58} cy={H*0.34} r="3" fill="#2A3142"/>
    </>);
    case 'starfish': return wrap(<>
      <path d={`M${W/2} 3 ${[1,2,3,4].map(i=>{const a=i*72*Math.PI/180-Math.PI/2;const r=i%2?W*0.2:W*0.46;return `L${W/2+Math.cos(a)*r} ${H/2+Math.sin(a)*r}`}).join(' ')} Z`} fill={base}/>
      {[0,1,2,3,4].map(i=>{const a=i*72*Math.PI/180-Math.PI/2;return <circle key={i} cx={W/2+Math.cos(a)*W*0.22} cy={H/2+Math.sin(a)*W*0.22} r="2.5" fill={shade(base,-0.2)}/>;})}
    </>);
    case 'surfboard': return wrap(<>
      <path d={`M${W/2} 2 q ${W*0.4} ${H*0.3} 0 ${H*0.96} q -${W*0.4} -${H*0.66} 0 -${H*0.94} Z`} fill={base}/>
      <path d={`M${W/2} 2 q -${W*0.4} ${H*0.3} 0 ${H*0.96} Z`} fill={L}/>
      <rect x={W/2-2} y={H*0.16} width="4" height={H*0.68} rx="2" fill="#fff" opacity="0.7"/>
    </>);
    case 'lifering': case 'shell': return wrap(<>
      {type==='lifering' ? <><circle cx={W/2} cy={H/2} r={W/2-2} fill={base}/><circle cx={W/2} cy={H/2} r={W*0.22} fill="#CFE8FF"/>{[45,135,225,315].map((a,i)=><path key={i} d={`M${W/2} ${H/2}`} />)}{[0,90,180,270].map((a,i)=><rect key={i} x={W/2-W*0.16} y={H*0.04} width={W*0.32} height="8" fill="#fff" transform={`rotate(${a} ${W/2} ${H/2})`}/>)}</>
        : <><path d={`M${W/2} ${H*0.9} L${W*0.1} ${H*0.3} q ${W*0.4} -${H*0.34} ${W*0.8} 0 Z`} fill={base}/>{[0.3,0.5,0.7].map((p,i)=><path key={i} d={`M${W/2} ${H*0.9} L${W*p} ${H*0.3}`} stroke={D} strokeWidth="2"/>)}</>}
    </>);
    case 'boat': return wrap(<>
      <path d={`M4 ${H*0.5} L${W-4} ${H*0.5} L${W-14} ${H*0.88} L14 ${H*0.88} Z`} fill={base}/>
      <path d={`M4 ${H*0.5} L${W-4} ${H*0.5} L${W-4} ${H*0.58} L4 ${H*0.58} Z`} fill={L}/>
      <rect x={W/2-2} y={H*0.1} width="4" height={H*0.42} fill="#8B8579"/>
      <path d={`M${W/2+2} ${H*0.14} L${W*0.82} ${H*0.48} L${W/2+2} ${H*0.48} Z`} fill="#fff"/>
      <path d={`M${W/2-2} ${H*0.18} L${W*0.22} ${H*0.48} L${W/2-2} ${H*0.48} Z`} fill="#FF6B6B"/>
    </>);
    // ---------- Frost ----------
    case 'snowman': return wrap(<>
      <circle cx={W/2} cy={H*0.74} r={W*0.4} fill="#fff"/>
      <circle cx={W/2} cy={H*0.32} r={W*0.3} fill="#fff"/>
      <path d={`M${W*0.18} ${H*0.74} A ${W*0.4} ${W*0.4} 0 0 0 ${W*0.82} ${H*0.74} Z`} fill="#DCE8F5"/>
      <circle cx={W*0.42} cy={H*0.28} r="3" fill="#2A3142"/><circle cx={W*0.58} cy={H*0.28} r="3" fill="#2A3142"/>
      <path d={`M${W/2} ${H*0.34} l8 3 l-8 2 Z`} fill="#FF8A3C"/>
      <rect x={W*0.32} y={H*0.06} width={W*0.36} height="5" fill="#2A3142"/><rect x={W*0.38} y={H*-0.04} width={W*0.24} height={H*0.12} fill="#2A3142"/>
      {[0.6,0.72].map((p,i)=><circle key={i} cx={W/2} cy={H*p} r="2.5" fill="#2A3142"/>)}
    </>);
    case 'gift': return wrap(<>
      <rect x="6" y={H*0.36} width={W-12} height={H*0.6} rx="4" fill={base}/>
      <rect x="6" y={H*0.36} width={(W-12)*0.34} height={H*0.6} rx="4" fill={L}/>
      <rect x="6" y={H*0.3} width={W-12} height={H*0.14} rx="3" fill={shade(base,0.1)}/>
      <rect x={W/2-4} y={H*0.3} width="8" height={H*0.66} fill="#FFE08A"/>
      <path d={`M${W/2} ${H*0.3} q -12 -14 -3 -3 q 9 -11 3 3 Z`} fill="#FFE08A"/>
      <path d={`M${W/2} ${H*0.3} q 12 -14 3 -3 q -9 -11 -3 3 Z`} fill="#FFD24A"/>
    </>);
    case 'mitten': return wrap(<>
      <path d={`M${W*0.3} ${H} L${W*0.28} ${H*0.4} q 0 -${H*0.32} ${W*0.4} -${H*0.2} l0 ${H*0.1} q ${W*0.2} -0.04 ${W*0.2} ${H*0.16} q 0 ${H*0.14} -${W*0.2} ${H*0.16} L${W*0.7} ${H} Z`} fill={base}/>
      <rect x={W*0.26} y={H*0.86} width={W*0.46} height={H*0.14} rx="4" fill="#fff"/>
      <path d={`M${W*0.4} ${H*0.5} q ${W*0.14} -6 ${W*0.24} 0`} stroke="#fff" strokeWidth="3" fill="none"/>
    </>);
    case 'bell': return wrap(<>
      <path d={`M${W*0.2} ${H*0.8} q 0 -${H*0.6} ${W*0.3} -${H*0.6} q ${W*0.3} 0 ${W*0.3} ${H*0.6} Z`} fill={base}/>
      <path d={`M${W*0.2} ${H*0.8} q 0 -${H*0.6} ${W*0.15} -${H*0.6} L${W*0.5} ${H*0.8} Z`} fill={L}/>
      <rect x={W*0.16} y={H*0.78} width={W*0.68} height="7" rx="3" fill={shade(base,0.16)}/>
      <circle cx={W/2} cy={H*0.92} r="4" fill={E}/>
      <circle cx={W/2} cy={H*0.16} r="4" fill={D}/>
    </>);
    case 'sled': return wrap(<>
      <path d={`M6 ${H*0.5} L${W-6} ${H*0.5} L${W-6} ${H*0.66} L6 ${H*0.66} Z`} fill={base}/>
      <path d={`M4 ${H*0.84} q -2 -10 8 -10 L${W-12} ${H*0.74} q 10 0 8 10`} fill="none" stroke={shade(base,-0.2)} strokeWidth="5" strokeLinecap="round"/>
      <rect x={W*0.2} y={H*0.62} width="6" height={H*0.16} fill={E}/><rect x={W*0.74} y={H*0.62} width="6" height={H*0.16} fill={E}/>
    </>);
    case 'penguin': return wrap(<>
      <ellipse cx={W/2} cy={H*0.56} rx={W*0.34} ry={H*0.42} fill="#2B3550"/>
      <ellipse cx={W/2} cy={H*0.62} rx={W*0.22} ry={H*0.32} fill="#fff"/>
      <circle cx={W*0.42} cy={H*0.3} r="3" fill="#fff"/><circle cx={W*0.58} cy={H*0.3} r="3" fill="#fff"/>
      <circle cx={W*0.42} cy={H*0.3} r="1.5" fill="#2A3142"/><circle cx={W*0.58} cy={H*0.3} r="1.5" fill="#2A3142"/>
      <path d={`M${W*0.46} ${H*0.38} l${W*0.08} 0 l-${W*0.04} 6 Z`} fill="#FF8A3C"/>
      <ellipse cx={W*0.38} cy={H*0.94} rx="6" ry="3" fill="#FF8A3C"/><ellipse cx={W*0.62} cy={H*0.94} rx="6" ry="3" fill="#FF8A3C"/>
    </>);
    case 'igloo': return wrap(<>
      <path d={`M4 ${H} A ${W/2-4} ${H*0.86} 0 0 1 ${W-4} ${H} Z`} fill={base}/>
      <path d={`M4 ${H} A ${W/2-4} ${H*0.86} 0 0 1 ${W/2} ${H} Z`} fill="#fff"/>
      <path d={`M${W*0.34} ${H} A ${W*0.16} ${H*0.4} 0 0 1 ${W*0.66} ${H} Z`} fill={shade(base,-0.18)}/>
      {[[0.12,0.66],[0.3,0.4],[0.7,0.4],[0.88,0.66]].map(([x,y],i)=><path key={i} d={`M${W*x} ${H*y} l${W*0.1} -3`} stroke="#C8DCEF" strokeWidth="2"/>)}
    </>);
    // ---------- Dino ----------
    case 'egg': return wrap(<>
      <ellipse cx={W/2} cy={H*0.56} rx={W*0.4} ry={H*0.44} fill={base}/>
      <ellipse cx={W*0.4} cy={H*0.36} rx={W*0.16} ry={H*0.14} fill="#fff" opacity="0.5"/>
      {[[0.3,0.3],[0.6,0.5],[0.4,0.7]].map(([x,y],i)=><circle key={i} cx={W*x} cy={H*y} r="3.5" fill="#C8924E"/>)}
    </>);
    case 'bone': return wrap(<>
      <rect x={W*0.2} y={H*0.4} width={W*0.6} height={H*0.2} rx={H*0.1} fill={base}/>
      {[[0.2,0.3],[0.2,0.7],[0.8,0.3],[0.8,0.7]].map(([x,y],i)=><circle key={i} cx={W*x} cy={H*y} r={H*0.18} fill={base}/>)}
      <rect x={W*0.2} y={H*0.4} width={W*0.6} height={H*0.08} rx={H*0.04} fill={L}/>
    </>);
    case 'skull': return wrap(<>
      <path d={`M${W*0.2} ${H*0.42} q 0 -${H*0.4} ${W*0.3} -${H*0.4} q ${W*0.3} 0 ${W*0.3} ${H*0.4} L${W*0.6} ${H*0.78} L${W*0.4} ${H*0.78} Z`} fill={base}/>
      <rect x={W*0.36} y={H*0.78} width={W*0.28} height={H*0.16} rx="2" fill={base}/>
      {[0.2,0.45,0.7].map((p,i)=><rect key={i} x={W*(0.4+i*0.08)} y={H*0.78} width="3" height={H*0.16} fill={E}/>)}
      <ellipse cx={W*0.38} cy={H*0.4} rx={W*0.1} ry={H*0.1} fill="#2A3142"/><ellipse cx={W*0.62} cy={H*0.4} rx={W*0.1} ry={H*0.1} fill="#2A3142"/>
    </>);
    case 'fern': case 'vine': return wrap(<>
      {[-50,-25,0,25,50].map((a,i)=><React.Fragment key={i}><path d={`M${W/2} ${H} q ${(a/2)} -${H*0.4} ${a*0.5} -${H*0.9}`} stroke={i%2?D:base} strokeWidth="3" fill="none" strokeLinecap="round" transform={`rotate(${a*0.2} ${W/2} ${H})`}/></React.Fragment>)}
      <path d={`M${W/2} ${H} L${W/2} ${H*0.3}`} stroke={shade(base,-0.1)} strokeWidth="4" strokeLinecap="round"/>
    </>);
    case 'boulder': case 'rock': return wrap(<>
      <path d={`M4 ${H-5} L9 ${H*0.42} L${W*0.36} 6 L${W*0.66} ${H*0.2} L${W-5} ${H*0.5} L${W-8} ${H-5} Z`} fill={base}/>
      <path d={`M${W*0.36} 6 L${W*0.66} ${H*0.2} L${W*0.5} ${H*0.5} L9 ${H*0.42} Z`} fill={L}/>
      <path d={`M${W*0.66} ${H*0.2} L${W-5} ${H*0.5} L${W-8} ${H-5} L${W*0.5} ${H*0.5} Z`} fill={D}/>
    </>);
    case 'mushroom': return wrap(<>
      <path d={`M${W*0.36} ${H*0.5} L${W*0.34} ${H} L${W*0.66} ${H} L${W*0.64} ${H*0.5} Z`} fill="#F2E6D0"/>
      <path d={`M${W*0.1} ${H*0.5} q ${W*0.4} -${H*0.5} ${W*0.8} 0 Z`} fill={base}/>
      {[[0.34,0.36],[0.56,0.3],[0.7,0.42],[0.46,0.44]].map(([x,y],i)=><circle key={i} cx={W*x} cy={H*y} r={W*0.07} fill="#fff"/>)}
    </>);
    case 'ammonite': return wrap(<>
      <circle cx={W/2} cy={H/2} r={W/2-2} fill={base}/>
      <path d={`M${W/2} ${H/2} m0 -${W*0.4} a ${W*0.4} ${W*0.4} 0 1 1 -2 0`} fill="none" stroke={D} strokeWidth="3"/>
      <path d={`M${W/2} ${H/2} m0 -${W*0.24} a ${W*0.24} ${W*0.24} 0 1 1 -1 0`} fill="none" stroke={E} strokeWidth="3"/>
      {spec(W*0.36,H*0.34,4)}
    </>);
    case 'amber': case 'crystal': return wrap(<>
      <path d={`M${W/2} 2 L${W-6} ${H*0.34} L${W*0.7} ${H-4} L${W*0.3} ${H-4} L6 ${H*0.34} Z`} fill={base} opacity="0.92"/>
      <path d={`M${W/2} 2 L${W-6} ${H*0.34} L${W/2} ${H*0.4} Z`} fill={LL} opacity="0.8"/>
      <path d={`M${W/2} 2 L6 ${H*0.34} L${W/2} ${H*0.4} Z`} fill={D}/>
      <path d={`M${W/2} ${H*0.4} L${W*0.7} ${H-4} L${W*0.3} ${H-4} Z`} fill={shade(base,-0.05)}/>
    </>);
    case 'dino': return wrap(<>
      <path d={`M4 ${H} q -2 -${H*0.4} 12 -${H*0.5} q 0 -${H*0.4} ${W*0.4} -${H*0.32} q ${W*0.36} 2 ${W*0.4} ${H*0.4} q 4 ${H*0.3} -8 ${H*0.42} Z`} fill={base}/>
      <path d={`M14 ${H*0.5} q 0 -${H*0.4} ${W*0.4} -${H*0.32} L${W*0.5} ${H} Z`} fill={L} opacity="0.5"/>
      <circle cx={W*0.74} cy={H*0.32} r="3" fill="#2A3142"/>
      {[0.3,0.4,0.5].map((p,i)=><path key={i} d={`M${W*p} ${H*0.28} l5 -8 l4 8 Z`} fill={D}/>)}
      <rect x={W*0.2} y={H*0.86} width="7" height={H*0.14} fill={D}/><rect x={W*0.5} y={H*0.86} width="7" height={H*0.14} fill={D}/>
    </>);
    case 'statue': return wrap(<>
      <rect x={W*0.2} y={H*0.84} width={W*0.6} height={H*0.16} rx="2" fill={E}/>
      <path d={`M${W*0.3} ${H*0.84} L${W*0.34} ${H*0.4} q 0 -${H*0.34} ${W*0.16} -${H*0.34} q ${W*0.16} 0 ${W*0.16} ${H*0.34} L${W*0.7} ${H*0.84} Z`} fill={base}/>
      <path d={`M${W*0.3} ${H*0.84} L${W*0.34} ${H*0.4} q 0 -${H*0.34} ${W*0.08} -${H*0.34} L${W*0.46} ${H*0.84} Z`} fill={L}/>
      <circle cx={W/2} cy={H*0.22} r={W*0.12} fill={base}/>
    </>);
    // ---------- Neon ----------
    case 'robot': return wrap(<>
      <rect x="6" y={H*0.32} width={W-12} height={H*0.5} rx="9" fill={base}/>
      <rect x="6" y={H*0.32} width={(W-12)*0.32} height={H*0.5} rx="9" fill={L}/>
      <rect x={W*0.28} y={H*0.08} width={W*0.44} height={H*0.28} rx="7" fill={shade(base,0.06)}/>
      <circle cx={W*0.42} cy={H*0.22} r="3.5" fill="#21E6FF"/><circle cx={W*0.58} cy={H*0.22} r="3.5" fill="#21E6FF"/>
      <rect x={W*0.3} y={H*0.5} width={W*0.4} height="6" rx="3" fill="#21E6FF" opacity="0.9"/>
      <rect x={W*0.5-1} y={H*0.02} width="3" height={H*0.08} fill={D}/><circle cx={W/2} cy={H*0.01} r="3" fill="#FF6B6B"/>
      <rect x={W*0.34} y={H*0.84} width="8" height={H*0.14} fill={E}/><rect x={W*0.58} y={H*0.84} width="8" height={H*0.14} fill={E}/>
    </>);
    case 'neon': case 'hologram': return wrap(<>
      <rect x="6" y="6" width={W-12} height={H-12} rx="9" fill="none" stroke={base} strokeWidth="5"/>
      <rect x="6" y="6" width={W-12} height={H-12} rx="9" fill="none" stroke="#fff" strokeWidth="1.5" opacity="0.6"/>
      <path d={`M${W*0.3} ${H*0.35} L${W*0.3} ${H*0.65} M${W*0.3} ${H*0.5} L${W*0.5} ${H*0.5} M${W*0.5} ${H*0.35} L${W*0.5} ${H*0.65} M${W*0.62} ${H*0.35} L${W*0.62} ${H*0.65} L${W*0.74} ${H*0.65}`} stroke={base} strokeWidth="3" fill="none" strokeLinecap="round"/>
    </>);
    case 'rocket': case 'capsule': return wrap(<>
      <path d={`M${W/2} 2 q ${W/2-4} ${H*0.3} 0 ${H*0.74} q ${-(W/2-4)} ${-H*0.44} 0 ${-H*0.74} Z`} fill={base}/>
      <path d={`M${W/2} 2 q -${W/2-4} ${H*0.3} 0 ${H*0.74} Z`} fill={L}/>
      <circle cx={W/2} cy={H*0.34} r="6" fill="#BDF0FF"/><circle cx={W/2} cy={H*0.34} r="3" fill="#21E6FF"/>
      <path d={`M${W*0.28} ${H*0.62} l-9 ${H*0.16} l9 -3 Z M${W*0.72} ${H*0.62} l9 ${H*0.16} l-9 -3 Z`} fill="#FF8A3C"/>
      {type==='rocket' && <path d={`M${W*0.42} ${H*0.78} q ${W*0.08} ${H*0.18} ${W*0.16} 0`} fill="#FFC93C"/>}
    </>);
    case 'drone': case 'satellite': return wrap(<>
      <rect x={W*0.32} y={H*0.32} width={W*0.36} height={H*0.36} rx="7" fill={base}/>
      <rect x={W*0.32} y={H*0.32} width={W*0.36} height={H*0.14} rx="7" fill={L}/>
      <circle cx="11" cy={H*0.3} r="10" fill="none" stroke={D} strokeWidth="3"/><circle cx={W-11} cy={H*0.3} r="10" fill="none" stroke={D} strokeWidth="3"/>
      <line x1={W*0.32} y1={H*0.4} x2="11" y2={H*0.3} stroke={D} strokeWidth="3"/><line x1={W*0.68} y1={H*0.4} x2={W-11} y2={H*0.3} stroke={D} strokeWidth="3"/>
      <circle cx={W/2} cy={H*0.56} r="4" fill="#21E6FF"/>
      {type==='satellite' && <><rect x="2" y={H*0.46} width={W*0.2} height={H*0.16} fill="#21E6FF" opacity="0.7"/><rect x={W*0.78} y={H*0.46} width={W*0.2} height={H*0.16} fill="#21E6FF" opacity="0.7"/></>}
    </>);
    case 'arcade': return wrap(<>
      <rect x="8" y={H*0.1} width={W-16} height={H*0.86} rx="8" fill={base}/>
      <rect x="8" y={H*0.1} width={(W-16)*0.3} height={H*0.86} rx="8" fill={L}/>
      <rect x={W*0.2} y={H*0.18} width={W*0.6} height={H*0.3} rx="4" fill="#0A1830"/>
      <rect x={W*0.26} y={H*0.24} width={W*0.48} height={H*0.18} rx="2" fill="#21E6FF" opacity="0.85"/>
      <circle cx={W*0.36} cy={H*0.62} r="4" fill="#FF6B6B"/><circle cx={W*0.5} cy={H*0.62} r="4" fill="#FFC93C"/><circle cx={W*0.64} cy={H*0.62} r="4" fill="#22C9A0"/>
    </>);
    case 'speaker2': case 'server': return wrap(<>
      <rect x="8" y={H*0.08} width={W-16} height={H*0.88} rx="6" fill={base}/>
      <rect x="8" y={H*0.08} width={(W-16)*0.3} height={H*0.88} rx="6" fill={L}/>
      {[0.2,0.36,0.52,0.68,0.84].map((p,i)=><React.Fragment key={i}><rect x={W*0.18} y={H*p} width={W*0.64} height={H*0.08} rx="2" fill="#0A1830"/><circle cx={W*0.74} cy={H*(p+0.04)} r="2" fill={i%2?'#21E6FF':'#22C9A0'}/></React.Fragment>)}
    </>);
    case 'balloon': return wrap(<>
      <path d={`M${W/2} ${H*0.62} q -4 8 0 14`} stroke={D} strokeWidth="2" fill="none"/>
      <ellipse cx={W/2} cy={H*0.34} rx={W/2-2} ry={H*0.34} fill={base}/>
      <path d={`M${W/2-4} ${H*0.62} l4 6 l4 -6 Z`} fill={D}/>
      <ellipse cx={W*0.38} cy={H*0.24} rx="5" ry="7" fill="#fff" opacity="0.45"/>
    </>);
    default: return wrap(<>{boxFace(4, H * 0.18, W - 8, H * 0.78)}{spec(W*0.3,H*0.32,4)}</>);
  }
}

Object.assign(window, { Prop, PROP_DEF, shade });