// Avatares — personagens em SVG cartoon, tema espacial
// Cadetes humanos + alienígenas amigáveis + criaturas espaciais. Plus Bit (mascote) e Geo (Terra).

window.Avatars = (function() {

  // ---------- Cadetes humanos (com capacete) ----------
  const Luna = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="#fb7185" />
      <ellipse cx="50" cy="48" rx="32" ry="30" fill="#fff5f7" />
      <ellipse cx="50" cy="54" rx="22" ry="24" fill="#fde2c7" />
      <circle cx="32" cy="40" r="6" fill="#7c2d12" />
      <circle cx="68" cy="40" r="6" fill="#7c2d12" />
      <circle cx="38" cy="32" r="5" fill="#7c2d12" />
      <circle cx="62" cy="32" r="5" fill="#7c2d12" />
      <circle cx="42" cy="54" r="3.5" fill="#1e293b" />
      <circle cx="58" cy="54" r="3.5" fill="#1e293b" />
      <circle cx="43" cy="53" r="1.2" fill="#fff" />
      <circle cx="59" cy="53" r="1.2" fill="#fff" />
      <path d="M 43 64 Q 50 70 57 64" stroke="#be123c" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <circle cx="36" cy="62" r="3" fill="#fda4af" opacity="0.7" />
      <circle cx="64" cy="62" r="3" fill="#fda4af" opacity="0.7" />
      <line x1="50" y1="10" x2="50" y2="4" stroke="#be123c" strokeWidth="2" />
      <circle cx="50" cy="4" r="2.5" fill="#fbbf24" />
    </svg>
  );

  const Teo = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="#3b82f6" />
      <ellipse cx="50" cy="48" rx="32" ry="30" fill="#dbeafe" />
      <ellipse cx="50" cy="54" rx="22" ry="24" fill="#92400e" />
      <path d="M 28 40 Q 50 24 72 40 L 72 46 Q 50 34 28 46 Z" fill="#1c1917" />
      <circle cx="42" cy="54" r="3.5" fill="#0c0a09" />
      <circle cx="58" cy="54" r="3.5" fill="#0c0a09" />
      <circle cx="43" cy="53" r="1.2" fill="#fff" />
      <circle cx="59" cy="53" r="1.2" fill="#fff" />
      <path d="M 43 64 Q 50 70 57 64" stroke="#fbbf24" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <circle cx="36" cy="62" r="3" fill="#dc2626" opacity="0.4" />
      <circle cx="64" cy="62" r="3" fill="#dc2626" opacity="0.4" />
      <line x1="50" y1="10" x2="50" y2="4" stroke="#1d4ed8" strokeWidth="2" />
      <circle cx="50" cy="4" r="2.5" fill="#22d3ee" />
    </svg>
  );

  const Iris = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="#10b981" />
      <ellipse cx="50" cy="48" rx="32" ry="30" fill="#d1fae5" />
      <ellipse cx="50" cy="54" rx="22" ry="24" fill="#fcd9b6" />
      <path d="M 28 40 Q 50 20 72 40 L 72 52 L 78 72 L 70 74 L 65 52 Q 50 42 35 52 L 30 74 L 22 72 L 28 52 Z" fill="#92400e" />
      <path d="M 32 38 Q 50 28 68 38 L 64 46 Q 50 40 36 46 Z" fill="#7c2d12" />
      <circle cx="42" cy="56" r="3.5" fill="#1e293b" />
      <circle cx="58" cy="56" r="3.5" fill="#1e293b" />
      <circle cx="43" cy="55" r="1.2" fill="#fff" />
      <circle cx="59" cy="55" r="1.2" fill="#fff" />
      <path d="M 42 66 Q 50 72 58 66" stroke="#be185d" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <circle cx="36" cy="64" r="3" fill="#fb7185" opacity="0.6" />
      <circle cx="64" cy="64" r="3" fill="#fb7185" opacity="0.6" />
      <line x1="50" y1="10" x2="50" y2="4" stroke="#047857" strokeWidth="2" />
      <circle cx="50" cy="4" r="2.5" fill="#fb7185" />
    </svg>
  );

  const Kai = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="#f97316" />
      <ellipse cx="50" cy="48" rx="32" ry="30" fill="#ffedd5" />
      <ellipse cx="50" cy="54" rx="22" ry="24" fill="#fde2c7" />
      <path d="M 30 42 L 32 30 L 38 40 L 42 26 L 48 40 L 52 28 L 58 40 L 62 26 L 68 40 L 70 30 L 70 46 Q 50 38 30 46 Z" fill="#fbbf24" />
      <circle cx="42" cy="56" r="3.5" fill="#1e293b" />
      <circle cx="58" cy="56" r="3.5" fill="#1e293b" />
      <circle cx="43" cy="55" r="1.2" fill="#fff" />
      <circle cx="59" cy="55" r="1.2" fill="#fff" />
      <path d="M 41 64 Q 50 72 59 64 Q 50 68 41 64 Z" fill="#7c2d12" />
      <path d="M 43 66 L 57 66" stroke="#fff" strokeWidth="1.5" />
      <circle cx="36" cy="64" r="3" fill="#fda4af" opacity="0.7" />
      <circle cx="64" cy="64" r="3" fill="#fda4af" opacity="0.7" />
      <line x1="50" y1="10" x2="50" y2="4" stroke="#c2410c" strokeWidth="2" />
      <circle cx="50" cy="4" r="2.5" fill="#10b981" />
    </svg>
  );

  // Nova: Stella (capacete roxo, cabelo trançado)
  const Stella = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="#a855f7" />
      <ellipse cx="50" cy="48" rx="32" ry="30" fill="#f3e8ff" />
      <ellipse cx="50" cy="54" rx="22" ry="24" fill="#7c2d12" />
      <path d="M 28 38 Q 50 22 72 38 L 70 48 L 64 50 Q 50 38 36 50 L 30 48 Z" fill="#0f172a" />
      <circle cx="26" cy="62" r="4" fill="#0f172a" />
      <circle cx="74" cy="62" r="4" fill="#0f172a" />
      <line x1="26" y1="58" x2="26" y2="50" stroke="#0f172a" strokeWidth="3" />
      <line x1="74" y1="58" x2="74" y2="50" stroke="#0f172a" strokeWidth="3" />
      <circle cx="42" cy="56" r="3.5" fill="#1e293b" />
      <circle cx="58" cy="56" r="3.5" fill="#1e293b" />
      <circle cx="43" cy="55" r="1.2" fill="#fff" />
      <circle cx="59" cy="55" r="1.2" fill="#fff" />
      <path d="M 43 66 Q 50 72 57 66" stroke="#be185d" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <circle cx="36" cy="64" r="3" fill="#f472b6" opacity="0.7" />
      <circle cx="64" cy="64" r="3" fill="#f472b6" opacity="0.7" />
      <line x1="50" y1="10" x2="50" y2="4" stroke="#7e22ce" strokeWidth="2" />
      <circle cx="50" cy="4" r="2.5" fill="#fbbf24" />
    </svg>
  );

  // Nova: Nico (capacete amarelo, óculos)
  const Nico = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="#fbbf24" />
      <ellipse cx="50" cy="48" rx="32" ry="30" fill="#fef9c3" />
      <ellipse cx="50" cy="54" rx="22" ry="24" fill="#a16207" />
      <path d="M 30 38 Q 50 26 70 38 L 68 44 Q 50 36 32 44 Z" fill="#451a03" />
      {/* Óculos */}
      <circle cx="42" cy="55" r="6" fill="none" stroke="#0f172a" strokeWidth="2" />
      <circle cx="58" cy="55" r="6" fill="none" stroke="#0f172a" strokeWidth="2" />
      <line x1="48" y1="55" x2="52" y2="55" stroke="#0f172a" strokeWidth="2" />
      <circle cx="42" cy="55" r="2.5" fill="#1e293b" />
      <circle cx="58" cy="55" r="2.5" fill="#1e293b" />
      <circle cx="43" cy="54" r="1" fill="#fff" />
      <circle cx="59" cy="54" r="1" fill="#fff" />
      <path d="M 43 66 Q 50 72 57 66" stroke="#7c2d12" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <circle cx="34" cy="64" r="3" fill="#dc2626" opacity="0.5" />
      <circle cx="66" cy="64" r="3" fill="#dc2626" opacity="0.5" />
      <line x1="50" y1="10" x2="50" y2="4" stroke="#a16207" strokeWidth="2" />
      <circle cx="50" cy="4" r="2.5" fill="#22d3ee" />
    </svg>
  );

  // ---------- Alienígenas amigáveis ----------
  // Zip — alien verde de 3 olhos
  const Zip = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      {/* Bolha do capacete */}
      <circle cx="50" cy="50" r="42" fill="#22d3ee" opacity="0.25" stroke="#22d3ee" strokeWidth="2" />
      {/* Cabeça verde */}
      <ellipse cx="50" cy="58" rx="26" ry="28" fill="#4ade80" />
      <ellipse cx="50" cy="44" rx="22" ry="14" fill="#86efac" />
      {/* Antenas */}
      <line x1="38" y1="32" x2="32" y2="20" stroke="#15803d" strokeWidth="2.5" />
      <line x1="62" y1="32" x2="68" y2="20" stroke="#15803d" strokeWidth="2.5" />
      <circle cx="32" cy="20" r="3.5" fill="#fbbf24" />
      <circle cx="68" cy="20" r="3.5" fill="#fb7185" />
      {/* 3 olhos */}
      <circle cx="38" cy="54" r="5" fill="#fff" />
      <circle cx="62" cy="54" r="5" fill="#fff" />
      <circle cx="50" cy="46" r="4" fill="#fff" />
      <circle cx="38" cy="55" r="2.5" fill="#0f172a" />
      <circle cx="62" cy="55" r="2.5" fill="#0f172a" />
      <circle cx="50" cy="47" r="2" fill="#0f172a" />
      <circle cx="38.8" cy="54.2" r="0.9" fill="#fff" />
      <circle cx="62.8" cy="54.2" r="0.9" fill="#fff" />
      {/* Sorriso */}
      <path d="M 40 70 Q 50 78 60 70" stroke="#15803d" strokeWidth="2.5" fill="#15803d" strokeLinecap="round" />
      <path d="M 42 71 L 58 71" stroke="#fff" strokeWidth="1.2" />
      {/* Bochechas */}
      <circle cx="32" cy="66" r="3" fill="#fb7185" opacity="0.6" />
      <circle cx="68" cy="66" r="3" fill="#fb7185" opacity="0.6" />
    </svg>
  );

  // Mira — alienígena rosa fofa, formato gota
  const Mira = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="42" fill="#f472b6" opacity="0.2" stroke="#f472b6" strokeWidth="2" />
      <path d="M 50 18 Q 26 36 26 64 Q 26 86 50 86 Q 74 86 74 64 Q 74 36 50 18 Z" fill="#f0abfc" />
      <path d="M 50 24 Q 32 38 32 60 Q 32 70 40 70 Q 38 50 50 32 Z" fill="#fbcfe8" opacity="0.7" />
      {/* Olhos grandes */}
      <ellipse cx="40" cy="52" rx="6" ry="8" fill="#fff" />
      <ellipse cx="60" cy="52" rx="6" ry="8" fill="#fff" />
      <ellipse cx="40" cy="54" rx="3.5" ry="5" fill="#581c87" />
      <ellipse cx="60" cy="54" rx="3.5" ry="5" fill="#581c87" />
      <circle cx="41.5" cy="51" r="1.5" fill="#fff" />
      <circle cx="61.5" cy="51" r="1.5" fill="#fff" />
      {/* Sorrisinho */}
      <path d="M 44 70 Q 50 74 56 70" stroke="#a21caf" strokeWidth="2" fill="none" strokeLinecap="round" />
      {/* Brilhos */}
      <circle cx="30" cy="36" r="2" fill="#fff" opacity="0.8" />
      <circle cx="70" cy="40" r="1.5" fill="#fff" opacity="0.8" />
    </svg>
  );

  // Bloop — polvo espacial roxo
  const Bloop = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="42" fill="#a855f7" opacity="0.18" stroke="#a855f7" strokeWidth="2" />
      <ellipse cx="50" cy="44" rx="28" ry="24" fill="#c084fc" />
      <ellipse cx="50" cy="38" rx="24" ry="14" fill="#e9d5ff" opacity="0.6" />
      {/* Tentáculos */}
      <path d="M 24 56 Q 22 68 28 76 Q 30 70 26 60 Z" fill="#a855f7" />
      <path d="M 36 64 Q 34 76 40 84 Q 42 76 38 66 Z" fill="#a855f7" />
      <path d="M 50 68 Q 50 80 50 86 Q 52 78 50 70 Z" fill="#a855f7" />
      <path d="M 64 64 Q 66 76 60 84 Q 58 76 62 66 Z" fill="#a855f7" />
      <path d="M 76 56 Q 78 68 72 76 Q 70 70 74 60 Z" fill="#a855f7" />
      {/* Olhos */}
      <circle cx="40" cy="40" r="6" fill="#fff" />
      <circle cx="60" cy="40" r="6" fill="#fff" />
      <circle cx="40" cy="41" r="3" fill="#1e1b4b" />
      <circle cx="60" cy="41" r="3" fill="#1e1b4b" />
      <circle cx="41" cy="40" r="1" fill="#fff" />
      <circle cx="61" cy="40" r="1" fill="#fff" />
      {/* Boca */}
      <ellipse cx="50" cy="52" rx="5" ry="3" fill="#581c87" />
      <ellipse cx="50" cy="51" rx="3" ry="1.5" fill="#fb7185" />
    </svg>
  );

  // ---------- Criaturas espaciais ----------
  // Cometa — cometa com rosto
  const Cometa = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      {/* Cauda */}
      <path d="M 70 60 L 92 80 L 88 84 L 66 64 Z" fill="#fbbf24" opacity="0.6" />
      <path d="M 65 66 L 86 88 L 80 90 L 60 70 Z" fill="#f97316" opacity="0.5" />
      <path d="M 60 70 L 78 92 L 72 92 L 56 74 Z" fill="#fb7185" opacity="0.4" />
      {/* Núcleo */}
      <circle cx="42" cy="42" r="32" fill="#fef3c7" />
      <circle cx="42" cy="42" r="28" fill="#fde68a" />
      <circle cx="42" cy="42" r="22" fill="#fbbf24" />
      {/* Olhos */}
      <circle cx="34" cy="40" r="4" fill="#fff" />
      <circle cx="50" cy="40" r="4" fill="#fff" />
      <circle cx="34" cy="41" r="2" fill="#0f172a" />
      <circle cx="50" cy="41" r="2" fill="#0f172a" />
      <circle cx="35" cy="40" r="0.8" fill="#fff" />
      <circle cx="51" cy="40" r="0.8" fill="#fff" />
      {/* Sorriso */}
      <path d="M 32 50 Q 42 56 52 50" stroke="#7c2d12" strokeWidth="2" fill="none" strokeLinecap="round" />
      {/* Bochechas */}
      <circle cx="28" cy="48" r="2.5" fill="#fb7185" opacity="0.6" />
      <circle cx="56" cy="48" r="2.5" fill="#fb7185" opacity="0.6" />
      {/* Brilhos */}
      <circle cx="20" cy="20" r="1.5" fill="#fff" />
      <circle cx="60" cy="18" r="2" fill="#fff" />
    </svg>
  );

  // Lua — Luinha
  const Luinha = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="42" fill="#f1f5f9" />
      <circle cx="50" cy="50" r="38" fill="#e2e8f0" />
      {/* Crateras */}
      <circle cx="32" cy="36" r="6" fill="#cbd5e1" />
      <circle cx="64" cy="32" r="4" fill="#cbd5e1" />
      <circle cx="72" cy="60" r="5" fill="#cbd5e1" />
      <circle cx="28" cy="64" r="4" fill="#cbd5e1" />
      <circle cx="44" cy="74" r="3" fill="#cbd5e1" />
      {/* Olhos */}
      <circle cx="40" cy="48" r="4" fill="#fff" />
      <circle cx="58" cy="48" r="4" fill="#fff" />
      <circle cx="40" cy="49" r="2" fill="#1e293b" />
      <circle cx="58" cy="49" r="2" fill="#1e293b" />
      <circle cx="41" cy="48" r="0.8" fill="#fff" />
      <circle cx="59" cy="48" r="0.8" fill="#fff" />
      {/* Sorriso */}
      <path d="M 40 58 Q 49 64 58 58" stroke="#475569" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      <circle cx="32" cy="56" r="2.5" fill="#fda4af" opacity="0.7" />
      <circle cx="66" cy="56" r="2.5" fill="#fda4af" opacity="0.7" />
    </svg>
  );

  // Foguete — Pequeno foguetinho com rosto
  const Foguete = ({ size = 80 }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      {/* Estrelas de fundo */}
      <circle cx="14" cy="20" r="1.5" fill="#fbbf24" />
      <circle cx="86" cy="24" r="1" fill="#fff" />
      <circle cx="20" cy="76" r="1" fill="#fff" />
      {/* Corpo do foguete */}
      <path d="M 50 12 Q 30 30 30 60 L 30 78 L 70 78 L 70 60 Q 70 30 50 12 Z" fill="#f1f5f9" />
      <path d="M 50 12 Q 30 30 30 60 L 36 60 Q 36 32 50 18 Z" fill="#fff" />
      {/* Bico */}
      <path d="M 50 12 Q 60 28 70 60 Q 60 24 50 12 Z" fill="#fb7185" />
      {/* Janela com rosto */}
      <circle cx="50" cy="46" r="14" fill="#22d3ee" />
      <circle cx="50" cy="46" r="11" fill="#67e8f9" />
      <circle cx="46" cy="44" r="2" fill="#0f172a" />
      <circle cx="54" cy="44" r="2" fill="#0f172a" />
      <circle cx="46.5" cy="43.5" r="0.6" fill="#fff" />
      <circle cx="54.5" cy="43.5" r="0.6" fill="#fff" />
      <path d="M 46 50 Q 50 53 54 50" stroke="#0f172a" strokeWidth="1.5" fill="none" strokeLinecap="round" />
      {/* Aletas */}
      <path d="M 30 60 L 18 80 L 30 78 Z" fill="#dc2626" />
      <path d="M 70 60 L 82 80 L 70 78 Z" fill="#dc2626" />
      {/* Chamas */}
      <path d="M 40 80 Q 38 92 44 88 Q 46 96 50 88 Q 54 96 56 88 Q 62 92 60 80 Z" fill="#fbbf24" />
      <path d="M 44 82 Q 44 88 48 88 Q 50 92 52 88 Q 56 88 56 82 Z" fill="#fb7185" />
    </svg>
  );

  // ---------- Mascote Bit ----------
  const Bit = ({ size = 80, mood = 'happy' }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <line x1="35" y1="20" x2="30" y2="8" stroke="#64748b" strokeWidth="2" />
      <line x1="65" y1="20" x2="70" y2="8" stroke="#64748b" strokeWidth="2" />
      <circle cx="30" cy="8" r="3" fill="#fbbf24" />
      <circle cx="70" cy="8" r="3" fill="#22d3ee" />
      <rect x="22" y="22" width="56" height="48" rx="14" fill="#e0e7ff" stroke="#6366f1" strokeWidth="3" />
      <rect x="30" y="32" width="40" height="22" rx="4" fill="#0f172a" />
      {mood === 'happy' && (
        <>
          <path d="M 36 44 Q 40 38 44 44" stroke="#22d3ee" strokeWidth="2.5" fill="none" strokeLinecap="round" />
          <path d="M 56 44 Q 60 38 64 44" stroke="#22d3ee" strokeWidth="2.5" fill="none" strokeLinecap="round" />
        </>
      )}
      {mood === 'sad' && (
        <>
          <path d="M 37 46 Q 40 42 43 46" stroke="#fb7185" strokeWidth="2" fill="none" strokeLinecap="round" />
          <path d="M 57 46 Q 60 42 63 46" stroke="#fb7185" strokeWidth="2" fill="none" strokeLinecap="round" />
        </>
      )}
      {mood === 'wow' && (
        <>
          <circle cx="40" cy="43" r="3.5" fill="#fbbf24" />
          <circle cx="60" cy="43" r="3.5" fill="#fbbf24" />
          <text x="40" y="48" fontSize="6" textAnchor="middle" fill="#0f172a">!</text>
          <text x="60" y="48" fontSize="6" textAnchor="middle" fill="#0f172a">!</text>
        </>
      )}
      {mood === 'party' && (
        <>
          <text x="40" y="48" fontSize="14" textAnchor="middle">★</text>
          <text x="60" y="48" fontSize="14" textAnchor="middle">★</text>
        </>
      )}
      <rect x="42" y="60" width="16" height="3" rx="1.5" fill="#6366f1" />
      <rect x="6" y="38" width="14" height="18" rx="2" fill="#1e293b" />
      <line x1="13" y1="38" x2="13" y2="56" stroke="#22d3ee" strokeWidth="1" />
      <rect x="80" y="38" width="14" height="18" rx="2" fill="#1e293b" />
      <line x1="87" y1="38" x2="87" y2="56" stroke="#22d3ee" strokeWidth="1" />
      <rect x="38" y="70" width="24" height="14" rx="3" fill="#94a3b8" />
      <circle cx="44" cy="86" r="4" fill="#475569" />
      <circle cx="56" cy="86" r="4" fill="#475569" />
    </svg>
  );

  const Geo = ({ size = 80, mood = 'happy' }) => (
    <svg width={size} height={size} viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="42" fill="#3b82f6" />
      <path d="M 18 38 Q 28 32 38 38 L 36 50 L 28 56 L 20 50 Z" fill="#15803d" />
      <path d="M 46 28 Q 58 30 64 38 L 60 48 L 50 44 Z" fill="#15803d" />
      <path d="M 44 58 Q 56 56 68 62 L 64 74 L 54 76 L 46 70 Z" fill="#15803d" />
      <path d="M 72 46 Q 80 48 84 56 L 80 64 L 72 60 Z" fill="#15803d" />
      <ellipse cx="35" cy="22" rx="8" ry="3" fill="#fff" opacity="0.7" />
      <ellipse cx="68" cy="76" rx="7" ry="2.5" fill="#fff" opacity="0.7" />
      <circle cx="38" cy="48" r="3.5" fill="#fff" />
      <circle cx="62" cy="48" r="3.5" fill="#fff" />
      <circle cx="38" cy="49" r="1.8" fill="#0f172a" />
      <circle cx="62" cy="49" r="1.8" fill="#0f172a" />
      <path d="M 40 60 Q 50 68 60 60" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round" />
    </svg>
  );

  const list = [
    { id: 'luna', name: 'Luna', component: Luna, color: '#fb7185', kind: 'Cadete' },
    { id: 'teo', name: 'Téo', component: Teo, color: '#3b82f6', kind: 'Cadete' },
    { id: 'iris', name: 'Íris', component: Iris, color: '#10b981', kind: 'Cadete' },
    { id: 'kai', name: 'Kai', component: Kai, color: '#f97316', kind: 'Cadete' },
    { id: 'stella', name: 'Stella', component: Stella, color: '#a855f7', kind: 'Cadete' },
    { id: 'nico', name: 'Nico', component: Nico, color: '#fbbf24', kind: 'Cadete' },
    { id: 'zip', name: 'Zip', component: Zip, color: '#4ade80', kind: 'Alien' },
    { id: 'mira', name: 'Mira', component: Mira, color: '#f472b6', kind: 'Alien' },
    { id: 'bloop', name: 'Bloop', component: Bloop, color: '#a855f7', kind: 'Alien' },
    { id: 'cometa', name: 'Cometa', component: Cometa, color: '#fbbf24', kind: 'Espacial' },
    { id: 'luinha', name: 'Luinha', component: Luinha, color: '#cbd5e1', kind: 'Espacial' },
    { id: 'foguete', name: 'Foguetinho', component: Foguete, color: '#fb7185', kind: 'Espacial' }
  ];

  function get(id) {
    return list.find(a => a.id === id) || list[0];
  }

  // Patentes — evoluem com estrelas conquistadas
  const ranks = [
    { min: 0,  title: 'Recruta',          short: 'Recruta',  emoji: '🌱', color: '#94a3b8', ring: '#475569' },
    { min: 1,  title: 'Cadete Iniciante', short: 'Cadete',   emoji: '⭐', color: '#fbbf24', ring: '#f59e0b' },
    { min: 4,  title: 'Cadete Espacial',  short: 'Espacial', emoji: '🚀', color: '#38bdf8', ring: '#0284c7' },
    { min: 8,  title: 'Piloto da Frota',  short: 'Piloto',   emoji: '🛰️', color: '#a78bfa', ring: '#7c3aed' },
    { min: 12, title: 'Tenente Cósmico',  short: 'Tenente',  emoji: '🌟', color: '#34d399', ring: '#059669' },
    { min: 16, title: 'Capitão Estelar',  short: 'Capitão',  emoji: '💫', color: '#fb7185', ring: '#e11d48' },
    { min: 21, title: 'Comandante da Frota Terra', short: 'Comandante', emoji: '👑', color: '#fde047', ring: '#eab308' }
  ];

  function getRank(stars) {
    const s = Number.isFinite(stars) ? stars : 0;
    let r = ranks[0];
    for (const x of ranks) if (s >= x.min) r = x;
    const next = ranks.find(x => x.min > s);
    return { ...r, next };
  }

  // Avatar com aro de patente + emoji da patente
  const RankedAvatar = ({ avatarId, stars = 0, size = 100 }) => {
    const av = get(avatarId);
    const Comp = av.component;
    const rank = getRank(stars);
    const ringW = Math.max(3, Math.round(size * 0.04));
    const wrapSize = size + ringW * 4;
    return (
      <div style={{ position: 'relative', width: wrapSize, height: wrapSize, display: 'inline-block' }}>
        <div style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          border: `${ringW}px solid ${rank.ring}`,
          boxShadow: `0 0 ${ringW * 3}px ${rank.color}66`,
          background: `radial-gradient(circle, ${rank.color}22 0%, transparent 70%)`
        }} />
        <div style={{
          position: 'absolute', top: ringW * 2, left: ringW * 2,
          width: size, height: size
        }}>
          <Comp size={size} />
        </div>
        <div style={{
          position: 'absolute', bottom: -2, right: -2,
          background: rank.color, color: '#0b1023',
          width: ringW * 6, height: ringW * 6, borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: ringW * 3.5, border: `${ringW}px solid #0b1023`,
          boxShadow: `0 0 ${ringW * 2}px ${rank.color}aa`
        }}>{rank.emoji}</div>
      </div>
    );
  };

  return { Luna, Teo, Iris, Kai, Stella, Nico, Zip, Mira, Bloop, Cometa, Luinha, Foguete, Bit, Geo, list, get, getRank, ranks, RankedAvatar };
})();
