/* WOAH! — Icon, DjLogo, Cocktail SVG components */

const Icon = ({ name, size = 18, color = 'currentColor', stroke = 2 }) => {
  const s = { width: size, height: size, color };
  const p = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', viewBox: '0 0 24 24' };
  switch (name) {
    case 'arrow': return <svg {...p} style={s}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'globe': return <svg {...p} style={s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>;
    case 'menu': return <svg {...p} style={s}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case 'speaker': return <svg {...p} style={s}><path d="M11 5L6 9H3v6h3l5 4V5z"/><path d="M15.5 8.5a5 5 0 010 7M18 6a8 8 0 010 12"/></svg>;
    case 'speakerOff': return <svg {...p} style={s}><path d="M11 5L6 9H3v6h3l5 4V5z"/><path d="M22 9l-6 6M16 9l6 6"/></svg>;
    case 'upload': return <svg {...p} style={s}><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>;
    case 'play': return <svg {...p} style={s} fill="currentColor" stroke="none"><path d="M6 4l14 8-14 8z"/></svg>;
    case 'pause': return <svg {...p} style={s} fill="currentColor" stroke="none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>;
    case 'volume': return <svg {...p} style={s}><path d="M11 5L6 9H3v6h3l5 4V5z"/><path d="M15.5 8.5a5 5 0 010 7"/></svg>;
    case 'volumeLow': return <svg {...p} style={s}><path d="M11 5L6 9H3v6h3l5 4V5z"/><path d="M15.5 10a3 3 0 010 4"/></svg>;
    case 'volumeOff': return <svg {...p} style={s}><path d="M11 5L6 9H3v6h3l5 4V5z"/></svg>;
    case 'fullscreen': return <svg {...p} style={s}><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg>;
    case 'chevronL': return <svg {...p} style={s}><path d="M15 18l-6-6 6-6"/></svg>;
    case 'chevronR': return <svg {...p} style={s}><path d="M9 18l6-6-6-6"/></svg>;
    case 'x': return <svg {...p} style={s}><path d="M6 6l12 12M6 18L18 6"/></svg>;
    case 'instagram': return <svg {...p} style={s}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>;
    case 'twitter': return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{color}}><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>;
    case 'discord': return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{color}}><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/></svg>;
    case 'twitch': return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{color}}><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>;
    case 'spotify': return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{color}}><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0m5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.84-.179-.959-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.361 1.02m1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2m.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3"/></svg>;
    case 'zap': return <svg {...p} style={s}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>;
    case 'wine': return <svg {...p} style={s}><path d="M8 22h8M12 15v7M5 3h14l-1 7a6 6 0 0 1-12 0z"/></svg>;
    case 'sparkles': return <svg {...p} style={s}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6zM19 14l.7 1.8L21 16l-1.3.5L19 18l-.5-1.5L17 16l1.5-.7zM5 4l.7 1.8L7 6l-1.3.5L5 8l-.5-1.5L3 6l1.5-.7z"/></svg>;
    case 'heart': return <svg {...p} style={s}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
    case 'moon': return <svg {...p} style={s}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>;
    case 'calendar': return <svg {...p} style={s}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'crown': return <svg {...p} style={s}><path d="M3 18h18M3 7l5 5 4-7 4 7 5-5v11H3z"/></svg>;
    case 'trophy': return <svg {...p} style={s}><path d="M8 21h8M12 17v4M7 4h10v6a5 5 0 0 1-10 0zM5 4h2v3a3 3 0 0 1-3-3zM17 4h2a3 3 0 0 1-3 3V4z"/></svg>;
    case 'camera': return <svg {...p} style={s}><path d="M3 7h4l2-3h6l2 3h4v13H3z"/><circle cx="12" cy="13" r="4"/></svg>;
    case 'shield': return <svg {...p} style={s}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/></svg>;
    case 'star': return <svg {...p} style={s}><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.5L6 22l1.5-7.2L2 10l7.1-1.1z"/></svg>;
    case 'dices': return <svg {...p} style={s}><rect x="3" y="3" width="14" height="14" rx="2"/><rect x="9" y="9" width="12" height="12" rx="2"/><circle cx="7" cy="7" r="0.9" fill="currentColor"/><circle cx="13" cy="13" r="0.9" fill="currentColor"/><circle cx="15" cy="15" r="0.9" fill="currentColor"/></svg>;
    case 'megaphone': return <svg {...p} style={s}><path d="M3 11v3a2 2 0 0 0 2 2h2l3 5h2v-15l-3 5H5a2 2 0 0 0-2 2z"/><path d="M14 5a7 7 0 0 1 0 14"/></svg>;
    case 'music': return <svg {...p} style={s}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>;
    case 'lock': return <svg {...p} style={s}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    default: return null;
  }
};

/* === DJ LOGO — real PNG art === */
const DjLogo = ({ id, size = 140 }) => {
  const cfg = {
    gaia:      { c1:'#FF2E97', c2:'#8B5CF6' },
    aemilia:   { c1:'#5DD3FF', c2:'#FF2E97' },
    reyalex:   { c1:'#FF6BCB', c2:'#00F0FF' },
    khangomon: { c1:'#FF3B3B', c2:'#FFD700' },
    rekse:     { c1:'#5DD3FF', c2:'#FF6BCB' },
    alec:      { c1:'#FF3B3B', c2:'#FF0033' },
    rin:       { c1:'#8B5CF6', c2:'#FF3B3B' },
    kiwi:      { c1:'#A4DD3A', c2:'#FFD700' },
    iris:      { c1:'#8B5CF6', c2:'#5DD3FF' },
  }[id] || { c1:'#FF2E97', c2:'#00F0FF' };
  const { c1, c2 } = cfg;
  return (
    <div className="dj-logo dj-logo--img" style={{
      width: size, height: size, position:'relative',
      display:'flex', alignItems:'center', justifyContent:'center'
    }}>
      <span aria-hidden="true" style={{
        position:'absolute', inset:'-8%',
        background:`radial-gradient(circle at 50% 55%, ${c1}55 0%, ${c2}33 35%, transparent 70%)`,
        filter:'blur(14px)', borderRadius:'50%', zIndex:0,
      }}/>
      <img src={(window.v||((p)=>p))(`logos/${id}.png`)} alt={`${id} logo`} loading="lazy"
        style={{
          position:'relative', zIndex:1,
          width:'100%', height:'100%', objectFit:'contain',
          filter:`drop-shadow(0 0 12px ${c1}88) drop-shadow(0 0 24px ${c2}55)`
        }}/>
    </div>
  );
};

/* legacy (unused in active build) */
const _DjLogoLegacy = ({ id, size = 140 }) => {
  const cfg = {
    gaia:      { glyph:'狐', sub:'Gaia',     mono:'GA', c1:'#FF2E97', c2:'#8B5CF6', shape:'mask' },
    aemilia:   { glyph:'蝶', sub:'Aemilia',  mono:'AE', c1:'#5DD3FF', c2:'#FF2E97', shape:'butterfly' },
    reyalex:   { glyph:'猫', sub:'Rey Alex', mono:'RA', c1:'#FF6BCB', c2:'#00F0FF', shape:'cat' },
    khangomon: { glyph:'柴', sub:'Khango XIV', mono:'KX', c1:'#FF3B3B', c2:'#FFD700', shape:'shiba' },
    rekse:     { glyph:'桜', sub:'Rekse',    mono:'RN', c1:'#5DD3FF', c2:'#FF6BCB', shape:'kitty' },
    alec:      { glyph:'髑', sub:'Marston',  mono:'AM', c1:'#FF3B3B', c2:'#0a0a14', shape:'skull' },
    rin:       { glyph:'月', sub:'Rin Tsukii', mono:'RT', c1:'#8B5CF6', c2:'#FF3B3B', shape:'flame' },
    kiwi:      { glyph:'実', sub:'Kiwi',     mono:'KW', c1:'#A4DD3A', c2:'#FFD700', shape:'splash' },
    iris:      { glyph:'星', sub:'Iris',     mono:'IS', c1:'#8B5CF6', c2:'#5DD3FF', shape:'galaxy' },
  }[id] || { glyph:'?', sub:'?', mono:'??', c1:'#FF2E97', c2:'#00F0FF', shape:'mask' };

  const { glyph, sub, mono, c1, c2, shape } = cfg;
  const id2 = `g-${id}`;
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" className="dj-logo">
      <defs>
        <radialGradient id={id2} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={c1} stopOpacity="0.9"/>
          <stop offset="60%" stopColor={c2} stopOpacity="0.4"/>
          <stop offset="100%" stopColor="transparent"/>
        </radialGradient>
        <linearGradient id={`${id2}-l`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={c1}/>
          <stop offset="100%" stopColor={c2}/>
        </linearGradient>
      </defs>

      <circle cx="100" cy="100" r="95" fill={`url(#${id2})`} opacity="0.55"/>

      {/* shape backplate */}
      {shape === 'mask' && (
        <g>
          <path d="M100 30 L160 70 L155 130 L100 175 L45 130 L40 70 Z" fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2.5" opacity=".7"/>
          <path d="M70 80 L85 88 M115 88 L130 80 M85 110 Q100 120 115 110" fill="none" stroke={c1} strokeWidth="2.5" strokeLinecap="round"/>
        </g>
      )}
      {shape === 'butterfly' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2">
          <path d="M100 60 Q60 40 40 80 Q40 120 100 110 Q160 120 160 80 Q140 40 100 60 Z"/>
          <line x1="100" y1="60" x2="100" y2="150"/>
          <circle cx="60" cy="80" r="6" fill={c1} opacity=".5"/>
          <circle cx="140" cy="80" r="6" fill={c2} opacity=".5"/>
        </g>
      )}
      {shape === 'cat' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2.5">
          <path d="M55 90 L50 50 L80 75"/>
          <path d="M145 90 L150 50 L120 75"/>
          <circle cx="100" cy="105" r="50"/>
          <circle cx="85" cy="100" r="4" fill={c1}/>
          <circle cx="115" cy="100" r="4" fill={c1}/>
        </g>
      )}
      {shape === 'shiba' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2.5">
          <polygon points="100,40 60,80 60,140 100,170 140,140 140,80" />
          <line x1="60" y1="80" x2="140" y2="140"/>
          <line x1="60" y1="140" x2="140" y2="80"/>
        </g>
      )}
      {shape === 'kitty' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2.5">
          <circle cx="100" cy="105" r="48"/>
          <path d="M65 75 L75 50 L88 75"/>
          <path d="M135 75 L125 50 L112 75"/>
          <circle cx="100" cy="100" r="22" fill="none" stroke={c1} strokeDasharray="3 3"/>
        </g>
      )}
      {shape === 'skull' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2.5">
          <path d="M70 60 Q100 40 130 60 L135 130 L115 130 L100 145 L85 130 L65 130 Z"/>
          <circle cx="85" cy="95" r="10" fill={c1} opacity=".5"/>
          <circle cx="115" cy="95" r="10" fill={c1} opacity=".5"/>
          <path d="M93 120 L100 130 L107 120" stroke={c1}/>
        </g>
      )}
      {shape === 'flame' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2.5">
          <path d="M100 50 Q70 90 90 130 Q100 110 100 130 Q110 110 110 130 Q130 90 100 50 Z"/>
          <path d="M85 130 Q100 150 115 130" stroke={c2}/>
        </g>
      )}
      {shape === 'splash' && (
        <g fill={`url(#${id2}-l)`} opacity=".4">
          <circle cx="80" cy="90" r="32"/>
          <circle cx="125" cy="115" r="20"/>
          <circle cx="105" cy="60" r="14"/>
          <circle cx="55" cy="125" r="10"/>
          <circle cx="155" cy="80" r="8"/>
        </g>
      )}
      {shape === 'galaxy' && (
        <g fill="none" stroke={`url(#${id2}-l)`} strokeWidth="2">
          <ellipse cx="100" cy="100" rx="70" ry="25" transform="rotate(-25 100 100)"/>
          <ellipse cx="100" cy="100" rx="50" ry="14" transform="rotate(-25 100 100)" stroke={c1}/>
          <circle cx="100" cy="100" r="8" fill={c2}/>
          <circle cx="60" cy="70" r="1.5" fill={c1}/>
          <circle cx="140" cy="130" r="1.5" fill={c2}/>
          <circle cx="160" cy="80" r="1" fill={c1}/>
          <circle cx="40" cy="120" r="1" fill={c2}/>
        </g>
      )}

      <text x="100" y="115" textAnchor="middle" fontFamily="'Bebas Neue', sans-serif" fontSize="80"
        fill={`url(#${id2}-l)`} opacity="0.85" style={{letterSpacing:'-2px'}}>
        {glyph}
      </text>
      <text x="100" y="155" textAnchor="middle" fontFamily="'Bebas Neue', sans-serif" fontSize="22"
        fill="#fff" letterSpacing="3" opacity=".95">
        {sub.toUpperCase()}
      </text>
      <text x="100" y="178" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="9"
        fill={c1} letterSpacing="3" opacity=".7">
        // {mono} · WOAH!
      </text>
    </svg>
  );
};

/* === COCKTAIL SVG === */
const Cocktail = ({ kind, c1, c2, glass, extras = [] }) => {
  const gid = `cg-${kind}`;
  // Glass shapes
  let shape;
  if (glass === 'martini') {
    shape = (<g>
      <path d="M50 70 L150 70 L100 130 Z" fill={`url(#${gid})`} opacity=".88"/>
      <path d="M40 60 L160 60 L100 135 Z" fill="none" stroke="rgba(255,255,255,.85)" strokeWidth="1.4"/>
      <line x1="100" y1="135" x2="100" y2="170" stroke="rgba(255,255,255,.7)" strokeWidth="1.4"/>
      <ellipse cx="100" cy="172" rx="22" ry="3" stroke="rgba(255,255,255,.7)" strokeWidth="1.4" fill="none"/>
    </g>);
  } else if (glass === 'highball') {
    shape = (<g>
      <rect x="68" y="55" width="64" height="115" rx="3" fill={`url(#${gid})`} opacity=".85"/>
      <rect x="64" y="48" width="72" height="125" rx="4" fill="none" stroke="rgba(255,255,255,.85)" strokeWidth="1.4"/>
      <ellipse cx="100" cy="55" rx="32" ry="4" fill="rgba(255,255,255,.15)"/>
    </g>);
  } else if (glass === 'shot') {
    shape = (<g>
      <rect x="78" y="80" width="44" height="80" rx="2" fill={`url(#${gid})`} opacity=".88"/>
      <path d="M74 70 L74 165 Q74 168 78 168 L122 168 Q126 168 126 165 L126 70 Z" fill="none" stroke="rgba(255,255,255,.85)" strokeWidth="1.4"/>
    </g>);
  } else if (glass === 'coupe') {
    shape = (<g>
      <path d="M55 75 Q55 110 100 115 Q145 110 145 75 Z" fill={`url(#${gid})`} opacity=".88"/>
      <path d="M48 70 Q48 115 100 122 Q152 115 152 70" fill="none" stroke="rgba(255,255,255,.85)" strokeWidth="1.4"/>
      <line x1="100" y1="122" x2="100" y2="160" stroke="rgba(255,255,255,.7)" strokeWidth="1.4"/>
      <ellipse cx="100" cy="162" rx="20" ry="3" stroke="rgba(255,255,255,.7)" strokeWidth="1.4" fill="none"/>
    </g>);
  } else if (glass === 'can') {
    shape = (<g>
      <rect x="72" y="50" width="56" height="125" rx="6" fill={`url(#${gid})`} opacity=".9"/>
      <rect x="72" y="50" width="56" height="125" rx="6" fill="none" stroke="rgba(255,255,255,.85)" strokeWidth="1.4"/>
      <rect x="72" y="50" width="56" height="14" rx="6" fill="rgba(0,0,0,.3)"/>
      <text x="100" y="115" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill="rgba(255,255,255,.6)" letterSpacing="2">POWA</text>
    </g>);
  }

  return (
    <svg viewBox="0 0 200 200" className="cocktail-svg">
      <defs>
        <linearGradient id={gid} x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor={c1} stopOpacity=".95"/>
          <stop offset="100%" stopColor={c2} stopOpacity=".95"/>
        </linearGradient>
        <radialGradient id={`${gid}-h`} cx="50%" cy="60%" r="55%">
          <stop offset="0%" stopColor={c1} stopOpacity=".55"/>
          <stop offset="100%" stopColor="transparent"/>
        </radialGradient>
      </defs>
      {/* halo */}
      <circle cx="100" cy="100" r="80" fill={`url(#${gid}-h)`}/>
      {shape}

      {/* extras */}
      {extras.includes('ice') && (<g>
        <rect x="82" y="82" width="10" height="10" fill="rgba(255,255,255,.4)" stroke="rgba(255,255,255,.7)" strokeWidth=".7"/>
        <rect x="105" y="92" width="9" height="9" fill="rgba(255,255,255,.35)" stroke="rgba(255,255,255,.7)" strokeWidth=".7"/>
      </g>)}
      {extras.includes('lime') && (<g>
        <circle cx="135" cy="58" r="9" fill="#A4DD3A"/>
        <circle cx="135" cy="58" r="6" fill="#D4F08A" opacity=".7"/>
      </g>)}
      {extras.includes('flower') && (<g transform="translate(132 60)">
        <circle r="5" fill={c1}/>
        <circle cx="6" cy="-3" r="3.5" fill="#FF6BCB"/>
        <circle cx="-6" cy="-2" r="3.5" fill="#FFB6E1"/>
        <circle cx="3" cy="5" r="3" fill="#FF6BCB"/>
      </g>)}
      {extras.includes('bubbles') && (Array.from({length:6}).map((_,i)=>(
        <circle key={i} cx={75+i*9+(i%2?5:0)} cy={150-i*8} r={1.5+i*0.3} fill="rgba(255,255,255,.6)"/>
      )))}
      {extras.includes('steam') && (<g opacity=".6">
        <path d="M85 50 Q90 35 85 20" stroke="rgba(255,255,255,.5)" strokeWidth="2" fill="none"/>
        <path d="M100 50 Q95 30 100 15" stroke="rgba(255,255,255,.4)" strokeWidth="2" fill="none"/>
        <path d="M115 50 Q120 35 115 20" stroke="rgba(255,255,255,.5)" strokeWidth="2" fill="none"/>
      </g>)}
      {extras.includes('spark') && (<g>
        <text x="40" y="50" fontSize="14" fill={c1} opacity=".9">✦</text>
        <text x="155" y="60" fontSize="10" fill={c2} opacity=".9">✧</text>
        <text x="160" y="140" fontSize="12" fill={c1} opacity=".9">✦</text>
      </g>)}
      {extras.includes('glitch') && (<g opacity=".6">
        <rect x="78" y="100" width="44" height="2" fill={c1}/>
        <rect x="80" y="125" width="40" height="2" fill={c2}/>
        <rect x="76" y="140" width="48" height="2" fill={c1}/>
      </g>)}
    </svg>
  );
};

Object.assign(window, { Icon, DjLogo, Cocktail });