// mascots.jsx — 13 original named companions with rarity + theme packs.
// All characters are original archetypes (no protected IP).
// Each mascot ships a full "theme pack": palette, background pattern, accent.

const MASCOTS = [
  // ── Starter / common (5) — current set ───────────────────────
  { id: 'spectr', name: 'Спектр',  type: 'Хамелеон-кристалл', power: 'Меняет цвет под зону', rarity: 'common',   color: '#A78BFA', glow: '#A78BFA',
    pack: 'starter', theme: { accent: '#A78BFA', bgA: '#1a0b2e', bgB: '#2d1645', tint: 'violet' },
    archetype: 'Универсал' },
  { id: 'lumen',  name: 'Люмен',   type: 'Искорка',           power: 'Сверкает от +XP',     rarity: 'common',   color: '#FBBF24', glow: '#FBBF24',
    pack: 'starter', theme: { accent: '#FBBF24', bgA: '#1a1208', bgB: '#3d2a0a', tint: 'amber' },
    archetype: 'Энергия' },
  { id: 'orion',  name: 'Орион',   type: 'Кото-астронавт',    power: 'Парит к высотам',     rarity: 'rare',     color: '#60A5FA', glow: '#60A5FA',
    pack: 'starter', theme: { accent: '#60A5FA', bgA: '#0a1428', bgB: '#15264d', tint: 'cosmic' },
    archetype: 'Большие цели', unlock: { kind: 'level', need: 3, label: 'Уровень 3+' } },
  { id: 'balbot', name: 'Бал-Бот', type: 'Дрон-архитектор',   power: 'Строит баланс жизни', rarity: 'rare',     color: '#22D3A3', glow: '#22D3A3',
    pack: 'starter', theme: { accent: '#22D3A3', bgA: '#0a1f1a', bgB: '#0f3a30', tint: 'mint' },
    archetype: 'Продуктивность' },
  { id: 'zhar',   name: 'Жар',     type: 'Феникс',            power: 'Пламя растёт с уровнем', rarity: 'epic', color: '#FB923C', glow: '#F472B6',
    pack: 'starter', theme: { accent: '#FB923C', bgA: '#2d0e1f', bgB: '#4d1a14', tint: 'ember' },
    archetype: 'Возрождение', unlock: { kind: 'streak', need: 14, label: 'Стрик 14 дней' } },

  // ── Premium (4) — pop-culture archetypes ───────────────────
  { id: 'mimi',   name: 'Мими',     type: 'Сердечный котёнок',   power: 'Мягко напомнит о близких', rarity: 'epic',     color: '#F472B6', glow: '#F472B6',
    pack: 'premium', theme: { accent: '#F472B6', bgA: '#2d0f2a', bgB: '#52204a', tint: 'rose' },
    archetype: 'Семья и уют', unlock: { kind: 'wishes_done', need: 5, label: '5 завершённых желаний' } },
  { id: 'vortex', name: 'Вихрь',   type: 'Гепард-спринтер',     power: '+5 XP за фитнес-привычки',  rarity: 'epic',     color: '#22D3A3', glow: '#34D399',
    pack: 'premium', theme: { accent: '#22D3A3', bgA: '#0a1a14', bgB: '#13402e', tint: 'jade' },
    archetype: 'Фитнес и скорость', unlock: { kind: 'streak', need: 30, label: 'Стрик 30 дней' } },
  { id: 'magnat', name: 'Магнат',  type: 'Утка-инвестор',       power: 'Советы по финансам',         rarity: 'legendary', color: '#FBBF24', glow: '#FBBF24',
    pack: 'premium', theme: { accent: '#FBBF24', bgA: '#1f1a08', bgB: '#4d3a0a', tint: 'gold' },
    archetype: 'Финансы',  unlock: { kind: 'finance_wishes_done', need: 3, label: '3 финансовых цели закрыто' } },
  { id: 'noir',   name: 'Нуар',     type: 'Кот в цилиндре',       power: 'Ритуалы и поздний фокус',  rarity: 'rare',     color: '#8B5CF6', glow: '#8B5CF6',
    pack: 'premium', theme: { accent: '#8B5CF6', bgA: '#0a0a14', bgB: '#1f1a36', tint: 'noir' },
    archetype: 'Креатив и ритуалы' },

  // ── Battle / legendary (4) ───────────────────────────────
  { id: 'champion', name: 'Чемпион', type: 'Альпинист в кепке',    power: 'Лестница уровней быстрее', rarity: 'legendary', color: '#EF4444', glow: '#F87171',
    pack: 'battle', theme: { accent: '#EF4444', bgA: '#1f0a0a', bgB: '#4a0f0f', tint: 'crimson' },
    archetype: 'Длинные цели', unlock: { kind: 'level', need: 5, label: 'Уровень 5+' } },
  { id: 'widow',   name: 'Стальная Вдова', type: 'Крылатый воин', power: 'Жёстко держит дедлайны',  rarity: 'legendary', color: '#A78BFA', glow: '#C084FC',
    pack: 'battle', theme: { accent: '#A78BFA', bgA: '#0f0a1f', bgB: '#2a1a4a', tint: 'royal' },
    archetype: 'Дисциплина', unlock: { kind: 'streak', need: 60, label: 'Стрик 60 дней' } },
  { id: 'demon',   name: 'Адский Бухгалтер', type: 'Рогатый менеджер', power: 'Адская очередь задач', rarity: 'epic', color: '#DC2626', glow: '#F472B6',
    pack: 'battle', theme: { accent: '#DC2626', bgA: '#1a0510', bgB: '#3d0a1f', tint: 'infernal' },
    archetype: 'Жёсткая продуктивность' },
  { id: 'spark',   name: 'Искра',    type: 'Рысь-электрик',         power: 'Утренние челленджи',     rarity: 'rare',     color: '#FCD34D', glow: '#FBBF24',
    pack: 'battle', theme: { accent: '#FCD34D', bgA: '#1f1a05', bgB: '#3d3408', tint: 'volt' },
    archetype: 'Утренняя энергия' },
];

const MASCOT_BY_ID = Object.fromEntries(MASCOTS.map(m => [m.id, m]));

const PACK_META = {
  starter: { name: 'Стартер Пак',  count: 5, price: 'Бесплатно',     color1: '#22D3A3', color2: '#60A5FA', desc: '5 базовых компаньонов' },
  premium: { name: 'Премиум Пак',  count: 5, price: '500 XP',         color1: '#FBBF24', color2: '#F472B6', desc: '5 редких героев под нишу' },
  battle:  { name: 'Баттл Пак',    count: 5, price: 'Стрик 21 день',  color1: '#EF4444', color2: '#8B5CF6', desc: 'Эпики и легенды' },
};

const RARITY_META = {
  common:    { label: 'Common',    glow: '#94A3B8' },
  rare:      { label: 'Rare',      glow: '#60A5FA' },
  epic:      { label: 'Epic',      glow: '#A78BFA' },
  legendary: { label: 'Legendary', glow: '#FBBF24' },
};

// ── CSS ──────────────────────────────────────────────────────
const __MASCOT_CSS = `
@keyframes m-breath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes m-blink  { 0%, 92%, 100% { transform: scaleY(1); } 95%, 97% { transform: scaleY(0.05); } }
@keyframes m-bounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes m-cheer  { 0% { transform: rotate(-6deg) scale(1); } 25% { transform: rotate(6deg) scale(1.06); } 50% { transform: rotate(-4deg) scale(1.1); } 75% { transform: rotate(4deg) scale(1.06); } 100% { transform: rotate(-6deg) scale(1); } }
@keyframes m-meditate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes m-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes m-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes m-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
@keyframes m-float    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1px, -6px); } }
@keyframes m-flame    { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(1.2); opacity: 0.75; } }
@keyframes m-screen-blink { 0%, 90%, 100% { opacity: 1; } 92%, 96% { opacity: 0.4; } }
@keyframes m-sparkle  { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-30px) scale(0.4); opacity: 0; } }
@keyframes m-aura     { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.18); } }
@keyframes m-z        { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-16px) translateX(8px); } }
@keyframes m-bob-side { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes m-wave-arm { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(15deg); } }

.mascot-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.mascot-aura {
  position: absolute; inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--m-glow), transparent 60%);
  filter: blur(18px);
  opacity: 0.5;
  pointer-events: none;
  animation: m-aura 3.6s ease-in-out infinite;
  z-index: 0;
}
.mascot-svg { position: relative; z-index: 1; }
.mascot-body { transform-origin: center bottom; animation: m-breath 3.6s ease-in-out infinite; }
.mascot-wrap[data-emotion="excited"] .mascot-body  { animation: m-bounce 0.9s ease-in-out infinite; }
.mascot-wrap[data-emotion="celebrate"] .mascot-body{ animation: m-cheer 0.8s ease-in-out infinite; }
.mascot-wrap[data-emotion="focus"] .mascot-body    { animation: m-meditate 4s ease-in-out infinite; }
.mascot-wrap[data-emotion="celebrate"] .mascot-aura{ animation: m-aura 1.2s ease-in-out infinite; opacity: 0.9; }
.mascot-eyelid { animation: m-blink 5.2s ease-in-out infinite; }

.mascot-spectr-body  { animation: m-breath 3.6s ease-in-out infinite, m-hue 8s linear infinite; }
.mascot-lumen-body   { animation: m-breath 3.6s ease-in-out infinite, m-twinkle 2s ease-in-out infinite; }
.mascot-lumen-ray    { transform-origin: 51px 51px; animation: m-spin-slow 14s linear infinite; }
.mascot-orion-body   { animation: m-breath 3.6s ease-in-out infinite, m-float 5s ease-in-out infinite; }
.mascot-balbot-screen{ animation: m-screen-blink 4s ease-in-out infinite; }
.mascot-balbot-blueprint { transform-origin: 51px 50px; animation: m-spin-slow 18s linear infinite; }
.mascot-zhar-flame   { transform-origin: 51px 96px; animation: m-flame 0.9s ease-in-out infinite; }
.mascot-vortex-body  { animation: m-breath 3.6s ease-in-out infinite, m-bob-side 1.2s ease-in-out infinite; }
.mascot-wave-arm     { transform-origin: 30% 50%; animation: m-wave-arm 1.4s ease-in-out infinite; }

.mascot-sparkle-overlay {
  position: absolute; pointer-events: none;
  font-family: var(--font-mono); font-weight: 700;
  color: var(--gold); font-size: 18px;
  text-shadow: 0 0 8px var(--gold);
  animation: m-sparkle 1.2s ease-out forwards;
}
.mascot-z {
  position: absolute; top: 4%; right: 6%;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--text-tertiary);
  animation: m-z 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mascot-body, .mascot-eyelid, .mascot-spectr-body, .mascot-lumen-body,
  .mascot-lumen-ray, .mascot-orion-body, .mascot-balbot-screen,
  .mascot-balbot-blueprint, .mascot-zhar-flame, .mascot-vortex-body,
  .mascot-wave-arm, .mascot-aura {
    animation: none !important;
  }
}

/* Mascot picker modal */
.mascot-picker {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: 1040px; width: calc(100% - 48px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: var(--shadow-pop);
  animation: badge-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mascot-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-card));
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 12px 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.mascot-card[data-active="1"] {
  border-color: var(--m-glow, var(--accent));
  box-shadow: 0 0 calc(24px * var(--glow-mult)) var(--m-glow, var(--accent)),
              inset 0 0 0 1px var(--m-glow, var(--accent));
}
.mascot-card[data-locked="1"] {
  opacity: 0.55;
  filter: grayscale(0.7);
  cursor: not-allowed;
}
.mascot-card:not([data-locked="1"]):hover { transform: translateY(-4px); border-color: var(--m-glow, var(--accent)); }
.mascot-card .ribbon {
  position: absolute; top: 8px; right: 8px;
  background: var(--m-glow);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.mascot-card .rarity-tag {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: rgba(0,0,0,0.4);
  color: var(--m-glow, var(--accent));
  border: 1px solid var(--m-glow, var(--accent));
}
.mascot-card .locked-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.6);
  border-radius: var(--r-lg);
  font-family: var(--font-mono); font-size: 11px;
  color: #fff;
  text-align: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  z-index: 3;
}
.mascot-card .locked-overlay b { color: var(--m-glow); display: block; margin-bottom: 4px; font-size: 13px; }
`;
if (typeof document !== 'undefined' && !document.getElementById('mascot-css')) {
  const s = document.createElement('style');
  s.id = 'mascot-css';
  s.textContent = __MASCOT_CSS;
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// Mascot bodies (102×102 viewBox). Geometric shapes only.
// ─────────────────────────────────────────────────────────────

function BodySpectr({ emotion }) {
  return (
    <g className="mascot-spectr-body" style={{ transformOrigin: 'center bottom' }}>
      <defs>
        <linearGradient id="spectr-g" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#A78BFA" /><stop offset="50%" stopColor="#22D3A3" /><stop offset="100%" stopColor="#F472B6" />
        </linearGradient>
      </defs>
      <path d="M22 70 Q12 64 18 56 Q8 48 16 42" stroke="url(#spectr-g)" strokeWidth="6" fill="none" strokeLinecap="round" />
      <polygon points="51,18 86,52 51,86 16,52" fill="url(#spectr-g)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5" />
      <polygon points="51,18 86,52 51,52" fill="rgba(255,255,255,0.18)" />
      <polygon points="51,52 86,52 51,86" fill="rgba(0,0,0,0.18)" />
      <polygon points="51,18 56,8 46,8" fill="url(#spectr-g)" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
      <circle cx="40" cy="48" r="5" fill="#14142A" /><circle cx="62" cy="48" r="5" fill="#14142A" />
      <ellipse className="mascot-eyelid" cx="40" cy="48" rx="5.4" ry="5.4" fill="url(#spectr-g)" style={{ transformOrigin: '40px 48px' }} />
      <ellipse className="mascot-eyelid" cx="62" cy="48" rx="5.4" ry="5.4" fill="url(#spectr-g)" style={{ transformOrigin: '62px 48px' }} />
      <circle cx="41.5" cy="46.5" r="1.6" fill="#fff" /><circle cx="63.5" cy="46.5" r="1.6" fill="#fff" />
      <path d={emotion === 'celebrate' ? 'M45 62 Q51 70 57 62' : 'M45 62 Q51 65 57 62'}
            stroke="#14142A" strokeWidth="2" fill={emotion === 'celebrate' ? '#14142A' : 'none'} strokeLinecap="round" />
    </g>
  );
}

function BodyLumen({ emotion }) {
  return (
    <g>
      <g className="mascot-lumen-ray">
        <polygon points="51,8 53,42 51,42 49,42" fill="#FBBF24" opacity="0.75" />
        <polygon points="51,94 53,60 51,60 49,60" fill="#FBBF24" opacity="0.75" />
        <polygon points="8,51 42,49 42,51 42,53" fill="#FBBF24" opacity="0.75" />
        <polygon points="94,51 60,49 60,51 60,53" fill="#FBBF24" opacity="0.75" />
      </g>
      <g className="mascot-lumen-body" style={{ transformOrigin: 'center' }}>
        <defs>
          <radialGradient id="lumen-g" cx="40%" cy="35%">
            <stop offset="0%" stopColor="#FEF3C7" /><stop offset="50%" stopColor="#FBBF24" /><stop offset="100%" stopColor="#F59E0B" />
          </radialGradient>
        </defs>
        <polygon points="51,22 60,46 84,51 60,56 51,80 42,56 18,51 42,46" fill="url(#lumen-g)" stroke="#fff" strokeWidth="1.4" strokeLinejoin="round" />
        <circle cx="44" cy="48" r="3" fill="#14142A" /><circle cx="58" cy="48" r="3" fill="#14142A" />
        <ellipse className="mascot-eyelid" cx="44" cy="48" rx="3.2" ry="3.2" fill="#FBBF24" style={{ transformOrigin: '44px 48px' }} />
        <ellipse className="mascot-eyelid" cx="58" cy="48" rx="3.2" ry="3.2" fill="#FBBF24" style={{ transformOrigin: '58px 48px' }} />
        <circle cx="44.8" cy="47" r="1" fill="#fff" /><circle cx="58.8" cy="47" r="1" fill="#fff" />
        <path d={emotion === 'celebrate' ? 'M46 58 Q51 65 56 58' : 'M46 58 Q51 61 56 58'}
              stroke="#14142A" strokeWidth="1.8" fill={emotion === 'celebrate' ? '#14142A' : 'none'} strokeLinecap="round" />
        <circle cx="38" cy="55" r="2.6" fill="#F472B6" opacity="0.5" /><circle cx="64" cy="55" r="2.6" fill="#F472B6" opacity="0.5" />
      </g>
    </g>
  );
}

function BodyOrion({ emotion }) {
  return (
    <g className="mascot-orion-body" style={{ transformOrigin: 'center' }}>
      <defs>
        <radialGradient id="orion-helm" cx="35%" cy="30%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.6)" />
          <stop offset="60%" stopColor="rgba(96, 165, 250, 0.18)" />
          <stop offset="100%" stopColor="rgba(96, 165, 250, 0.35)" />
        </radialGradient>
      </defs>
      <rect x="68" y="50" width="14" height="20" rx="3" fill="#60A5FA" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
      <circle cx="75" cy="56" r="2" fill="#22D3A3" /><circle cx="75" cy="64" r="2" fill="#F472B6" />
      <circle cx="51" cy="52" r="32" fill="url(#orion-helm)" stroke="rgba(255,255,255,0.5)" strokeWidth="2" />
      <ellipse cx="51" cy="82" rx="28" ry="4" fill="none" stroke="#60A5FA" strokeWidth="3" />
      <line x1="51" y1="20" x2="51" y2="12" stroke="#60A5FA" strokeWidth="2" strokeLinecap="round" />
      <circle cx="51" cy="10" r="3" fill="#FBBF24" stroke="#fff" strokeWidth="1" />
      <polygon points="36,38 30,28 42,32" fill="#1F2937" stroke="rgba(255,255,255,0.25)" strokeWidth="0.8" />
      <polygon points="66,38 72,28 60,32" fill="#1F2937" stroke="rgba(255,255,255,0.25)" strokeWidth="0.8" />
      <ellipse cx="51" cy="52" rx="22" ry="20" fill="#374151" stroke="rgba(255,255,255,0.18)" strokeWidth="1" />
      <ellipse cx="42" cy="50" rx="3.4" ry="4.4" fill="#22D3A3" /><ellipse cx="60" cy="50" rx="3.4" ry="4.4" fill="#22D3A3" />
      <ellipse className="mascot-eyelid" cx="42" cy="50" rx="3.6" ry="4.6" fill="#374151" style={{ transformOrigin: '42px 50px' }} />
      <ellipse className="mascot-eyelid" cx="60" cy="50" rx="3.6" ry="4.6" fill="#374151" style={{ transformOrigin: '60px 50px' }} />
      <circle cx="43" cy="48.5" r="1.1" fill="#fff" /><circle cx="61" cy="48.5" r="1.1" fill="#fff" />
      <path d="M48 56 L54 56 L51 60 Z" fill="#F472B6" />
      <line x1="32" y1="58" x2="42" y2="60" stroke="#9CA3AF" strokeWidth="0.8" strokeLinecap="round" />
      <line x1="70" y1="58" x2="60" y2="60" stroke="#9CA3AF" strokeWidth="0.8" strokeLinecap="round" />
      <path d={emotion === 'celebrate' ? 'M48 64 Q51 70 54 64' : 'M48 63 Q51 66 54 63'}
            stroke="#fff" strokeWidth="1.4" fill={emotion === 'celebrate' ? '#F472B6' : 'none'} strokeLinecap="round" />
      <ellipse cx="35" cy="35" rx="8" ry="14" fill="#fff" opacity="0.18" transform="rotate(-20 35 35)" />
    </g>
  );
}

function BodyBalbot({ emotion }) {
  return (
    <g>
      <g className="mascot-body">
        <g className="mascot-balbot-blueprint">
          <circle cx="51" cy="50" r="36" fill="none" stroke="#22D3A3" strokeWidth="0.6" strokeDasharray="2 3" opacity="0.5" />
          <polygon points="51,18 70,40 51,62 32,40" fill="none" stroke="#22D3A3" strokeWidth="0.6" opacity="0.5" />
        </g>
        <line x1="40" y1="14" x2="40" y2="6" stroke="#22D3A3" strokeWidth="1.6" strokeLinecap="round" />
        <line x1="62" y1="14" x2="62" y2="6" stroke="#22D3A3" strokeWidth="1.6" strokeLinecap="round" />
        <circle cx="40" cy="5" r="2" fill="#F472B6" /><circle cx="62" cy="5" r="2" fill="#FBBF24" />
        <rect x="24" y="20" width="54" height="48" rx="14" fill="#1F2937" stroke="rgba(34, 211, 163, 0.8)" strokeWidth="1.6" />
        <rect className="mascot-balbot-screen" x="32" y="32" width="38" height="22" rx="6" fill="#0F172A" stroke="rgba(34, 211, 163, 0.6)" strokeWidth="1" />
        <ellipse cx="42" cy="44" rx="2.8" ry="3.4" fill="#22D3A3" /><ellipse cx="60" cy="44" rx="2.8" ry="3.4" fill="#22D3A3" />
        <ellipse className="mascot-eyelid" cx="42" cy="44" rx="3" ry="3.6" fill="#0F172A" style={{ transformOrigin: '42px 44px' }} />
        <ellipse className="mascot-eyelid" cx="60" cy="44" rx="3" ry="3.6" fill="#0F172A" style={{ transformOrigin: '60px 44px' }} />
        <path d={emotion === 'celebrate' ? 'M46 49 Q51 53 56 49' : 'M46 48 Q51 50 56 48'}
              stroke="#22D3A3" strokeWidth="1.4" fill="none" strokeLinecap="round" />
        <ellipse cx="51" cy="80" rx="30" ry="6" fill="none" stroke="#22D3A3" strokeWidth="1.4" opacity="0.7" />
        <ellipse cx="51" cy="82" rx="22" ry="3" fill="#22D3A3" opacity="0.2" />
        <rect x="14" y="42" width="10" height="6" rx="2" fill="#1F2937" stroke="rgba(34, 211, 163, 0.6)" strokeWidth="1" />
        <rect x="78" y="42" width="10" height="6" rx="2" fill="#1F2937" stroke="rgba(34, 211, 163, 0.6)" strokeWidth="1" />
      </g>
    </g>
  );
}

function BodyZhar({ emotion, growth = 1 }) {
  return (
    <g className="mascot-body">
      <g className="mascot-zhar-flame">
        <path d="M51 96 Q44 88 47 78 Q40 84 42 76 Q44 70 51 70" fill="#FB923C" opacity="0.85" />
        <path d="M51 96 Q58 88 55 78 Q62 84 60 76 Q58 70 51 70" fill="#F472B6" opacity="0.65" />
        <path d="M51 92 Q48 85 51 78 Q54 85 51 92" fill="#FBBF24" opacity="0.9" />
      </g>
      <path d={`M22 ${52 - growth * 4} Q8 38 14 28 Q22 32 32 50`} fill="#F472B6" stroke="rgba(255,255,255,0.4)" strokeWidth="1" opacity="0.85" />
      <path d={`M80 ${52 - growth * 4} Q94 38 88 28 Q80 32 70 50`} fill="#F472B6" stroke="rgba(255,255,255,0.4)" strokeWidth="1" opacity="0.85" />
      <defs>
        <linearGradient id="zhar-body" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#FBBF24" /><stop offset="50%" stopColor="#FB923C" /><stop offset="100%" stopColor="#F472B6" />
        </linearGradient>
      </defs>
      <ellipse cx="51" cy="50" rx="22" ry="24" fill="url(#zhar-body)" stroke="rgba(255,255,255,0.4)" strokeWidth="1.4" />
      <polygon points="51,24 47,14 55,14" fill="#FBBF24" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
      <polygon points="51,24 44,18 50,12" fill="#FB923C" />
      <ellipse cx="43" cy="46" rx="3.2" ry="4.2" fill="#14142A" /><ellipse cx="59" cy="46" rx="3.2" ry="4.2" fill="#14142A" />
      <ellipse className="mascot-eyelid" cx="43" cy="46" rx="3.4" ry="4.4" fill="#FB923C" style={{ transformOrigin: '43px 46px' }} />
      <ellipse className="mascot-eyelid" cx="59" cy="46" rx="3.4" ry="4.4" fill="#FB923C" style={{ transformOrigin: '59px 46px' }} />
      <circle cx="44" cy="44.5" r="1.1" fill="#fff" /><circle cx="60" cy="44.5" r="1.1" fill="#fff" />
      <polygon points="48,54 54,54 51,60" fill="#F59E0B" stroke="rgba(255,255,255,0.3)" strokeWidth="0.8" />
      <path d={emotion === 'celebrate' ? 'M46 64 Q51 70 56 64' : 'M46 62 Q51 65 56 62'}
            stroke="#14142A" strokeWidth="1.6" fill={emotion === 'celebrate' ? '#14142A' : 'none'} strokeLinecap="round" />
    </g>
  );
}

// ── NEW MASCOTS ─────────────────────────────────────────────

// Мими — pastel kitty with heart eye (original)
function BodyMimi({ emotion }) {
  return (
    <g className="mascot-body">
      {/* body */}
      <ellipse cx="51" cy="60" rx="30" ry="32" fill="#FBCFE8" stroke="#F472B6" strokeWidth="1.6" />
      {/* ears */}
      <polygon points="28,40 22,22 38,32" fill="#FBCFE8" stroke="#F472B6" strokeWidth="1.2" />
      <polygon points="74,40 80,22 64,32" fill="#FBCFE8" stroke="#F472B6" strokeWidth="1.2" />
      <polygon points="29,38 26,28 35,32" fill="#F472B6" />
      <polygon points="73,38 76,28 67,32" fill="#F472B6" />
      {/* belly */}
      <ellipse cx="51" cy="66" rx="20" ry="22" fill="#FCE7F3" />
      {/* heart eye left */}
      <path d="M38 50 L42 46 L46 50 L42 56 Z" fill="#F472B6" />
      <circle cx="40" cy="48" r="1" fill="#fff" />
      {/* normal right eye */}
      <ellipse cx="62" cy="51" rx="3" ry="4" fill="#14142A" />
      <ellipse className="mascot-eyelid" cx="62" cy="51" rx="3.2" ry="4.2" fill="#FCE7F3" style={{ transformOrigin: '62px 51px' }} />
      <circle cx="63" cy="49.5" r="1" fill="#fff" />
      {/* nose */}
      <path d="M48 58 L54 58 L51 62 Z" fill="#F472B6" />
      {/* mouth */}
      <path d={emotion === 'celebrate' ? 'M44 65 Q51 73 58 65' : 'M44 64 Q51 67 58 64'}
            stroke="#14142A" strokeWidth="1.6" fill={emotion === 'celebrate' ? '#F472B6' : 'none'} strokeLinecap="round" />
      {/* cheeks */}
      <circle cx="34" cy="62" r="3" fill="#EC4899" opacity="0.5" />
      <circle cx="68" cy="62" r="3" fill="#EC4899" opacity="0.5" />
      {/* whiskers */}
      <line x1="22" y1="60" x2="32" y2="62" stroke="#A78BFA" strokeWidth="0.8" />
      <line x1="22" y1="63" x2="32" y2="64" stroke="#A78BFA" strokeWidth="0.8" />
      <line x1="80" y1="60" x2="70" y2="62" stroke="#A78BFA" strokeWidth="0.8" />
      <line x1="80" y1="63" x2="70" y2="64" stroke="#A78BFA" strokeWidth="0.8" />
    </g>
  );
}

// Вихрь — cheetah-sprinter (silhouette with running pose stripes)
function BodyVortex({ emotion }) {
  return (
    <g className="mascot-vortex-body">
      {/* speed streak */}
      <path d="M5 60 Q14 56 22 60" stroke="#22D3A3" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.6" />
      <path d="M5 68 Q14 64 22 68" stroke="#22D3A3" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.4" />
      {/* body */}
      <ellipse cx="54" cy="56" rx="26" ry="22" fill="#FCD34D" stroke="#22D3A3" strokeWidth="1.6" />
      {/* spots */}
      <circle cx="44" cy="50" r="2" fill="#1F2937" /><circle cx="58" cy="46" r="2" fill="#1F2937" />
      <circle cx="64" cy="58" r="2" fill="#1F2937" /><circle cx="50" cy="64" r="2" fill="#1F2937" />
      {/* head */}
      <circle cx="54" cy="40" r="16" fill="#FCD34D" stroke="#22D3A3" strokeWidth="1.4" />
      <polygon points="42,28 38,18 50,26" fill="#FCD34D" stroke="#22D3A3" strokeWidth="1" />
      <polygon points="66,28 70,18 58,26" fill="#FCD34D" stroke="#22D3A3" strokeWidth="1" />
      {/* eyes */}
      <ellipse cx="48" cy="40" rx="2.6" ry="3.4" fill="#14142A" />
      <ellipse cx="60" cy="40" rx="2.6" ry="3.4" fill="#14142A" />
      <ellipse className="mascot-eyelid" cx="48" cy="40" rx="2.8" ry="3.6" fill="#FCD34D" style={{ transformOrigin: '48px 40px' }} />
      <ellipse className="mascot-eyelid" cx="60" cy="40" rx="2.8" ry="3.6" fill="#FCD34D" style={{ transformOrigin: '60px 40px' }} />
      <circle cx="48.6" cy="39" r="0.8" fill="#fff" /><circle cx="60.6" cy="39" r="0.8" fill="#fff" />
      {/* tear-stripe under eyes */}
      <path d="M46 44 L43 50" stroke="#1F2937" strokeWidth="1" strokeLinecap="round" />
      <path d="M62 44 L65 50" stroke="#1F2937" strokeWidth="1" strokeLinecap="round" />
      {/* nose */}
      <path d="M52 46 L56 46 L54 49 Z" fill="#1F2937" />
      <path d={emotion === 'celebrate' ? 'M50 52 Q54 56 58 52' : 'M50 51 Q54 53 58 51'}
            stroke="#1F2937" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      {/* legs/feet — running pose */}
      <rect x="38" y="74" width="8" height="10" rx="2" fill="#22D3A3" />
      <rect x="58" y="74" width="8" height="10" rx="2" fill="#22D3A3" />
      <ellipse cx="42" cy="86" rx="6" ry="3" fill="#1F2937" />
      <ellipse cx="62" cy="86" rx="6" ry="3" fill="#1F2937" />
    </g>
  );
}

// Магнат — banker duck in top hat
function BodyMagnat({ emotion }) {
  return (
    <g className="mascot-body">
      {/* top hat */}
      <rect x="34" y="8" width="34" height="6" rx="1" fill="#1F2937" />
      <rect x="38" y="14" width="26" height="14" fill="#1F2937" />
      <rect x="38" y="22" width="26" height="3" fill="#FBBF24" />
      {/* body */}
      <ellipse cx="51" cy="58" rx="28" ry="30" fill="#FCD34D" stroke="#F59E0B" strokeWidth="1.6" />
      {/* belly */}
      <ellipse cx="51" cy="66" rx="18" ry="20" fill="#FEF3C7" />
      {/* beak */}
      <ellipse cx="51" cy="56" rx="11" ry="6" fill="#F59E0B" stroke="rgba(0,0,0,0.3)" strokeWidth="0.6" />
      <line x1="40" y1="56" x2="62" y2="56" stroke="#1F2937" strokeWidth="0.8" />
      {/* monocle right */}
      <circle cx="62" cy="44" r="6" fill="rgba(255,255,255,0.25)" stroke="#FBBF24" strokeWidth="1.4" />
      <line x1="68" y1="44" x2="74" y2="50" stroke="#FBBF24" strokeWidth="1" />
      {/* eyes */}
      <circle cx="42" cy="44" r="2.6" fill="#14142A" />
      <circle cx="62" cy="44" r="2.6" fill="#14142A" />
      <circle className="mascot-eyelid" cx="42" cy="44" r="2.8" fill="#FCD34D" style={{ transformOrigin: '42px 44px' }} />
      <circle className="mascot-eyelid" cx="62" cy="44" r="2.8" fill="#FCD34D" style={{ transformOrigin: '62px 44px' }} />
      <circle cx="42.6" cy="43" r="0.9" fill="#fff" /><circle cx="62.6" cy="43" r="0.9" fill="#fff" />
      {/* coin in hand */}
      <circle cx="22" cy="68" r="9" fill="#FBBF24" stroke="#F59E0B" strokeWidth="1.4" />
      <text x="22" y="72" textAnchor="middle" fontFamily="serif" fontSize="11" fontWeight="700" fill="#1F2937">$</text>
      {/* mustache */}
      <path d="M42 60 Q46 64 50 60 Q54 64 58 60" stroke="#92400E" strokeWidth="2" fill="none" strokeLinecap="round" />
    </g>
  );
}

// Нуар — cat in top hat (noir style)
function BodyNoir({ emotion }) {
  return (
    <g className="mascot-body">
      {/* smoke */}
      <ellipse cx="25" cy="22" rx="8" ry="4" fill="#8B5CF6" opacity="0.3" />
      <ellipse cx="30" cy="14" rx="6" ry="3" fill="#A78BFA" opacity="0.2" />
      {/* top hat */}
      <rect x="34" y="8" width="34" height="4" rx="1" fill="#0F172A" />
      <rect x="38" y="12" width="26" height="16" fill="#0F172A" />
      <rect x="38" y="20" width="26" height="3" fill="#8B5CF6" />
      {/* body */}
      <ellipse cx="51" cy="60" rx="28" ry="30" fill="#0F172A" stroke="#8B5CF6" strokeWidth="1.6" />
      {/* ears outside hat */}
      <polygon points="32,38 28,30 38,34" fill="#0F172A" stroke="#8B5CF6" strokeWidth="1.2" />
      <polygon points="70,38 74,30 64,34" fill="#0F172A" stroke="#8B5CF6" strokeWidth="1.2" />
      {/* eyes */}
      <ellipse cx="42" cy="50" rx="3.4" ry="4.4" fill="#FBBF24" />
      <ellipse cx="60" cy="50" rx="3.4" ry="4.4" fill="#FBBF24" />
      <ellipse className="mascot-eyelid" cx="42" cy="50" rx="3.6" ry="4.6" fill="#0F172A" style={{ transformOrigin: '42px 50px' }} />
      <ellipse className="mascot-eyelid" cx="60" cy="50" rx="3.6" ry="4.6" fill="#0F172A" style={{ transformOrigin: '60px 50px' }} />
      {/* slit pupils */}
      <line x1="42" y1="47" x2="42" y2="53" stroke="#0F172A" strokeWidth="1.6" strokeLinecap="round" />
      <line x1="60" y1="47" x2="60" y2="53" stroke="#0F172A" strokeWidth="1.6" strokeLinecap="round" />
      {/* nose */}
      <path d="M48 58 L54 58 L51 62 Z" fill="#8B5CF6" />
      {/* mouth */}
      <path d={emotion === 'celebrate' ? 'M46 66 Q51 72 56 66' : 'M46 65 Q51 68 56 65'}
            stroke="#FBBF24" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      {/* whiskers */}
      <line x1="26" y1="60" x2="36" y2="62" stroke="#8B5CF6" strokeWidth="0.8" />
      <line x1="76" y1="60" x2="66" y2="62" stroke="#8B5CF6" strokeWidth="0.8" />
      {/* bowtie */}
      <polygon points="44,76 48,72 48,80" fill="#8B5CF6" />
      <polygon points="58,76 54,72 54,80" fill="#8B5CF6" />
      <rect x="48" y="74" width="6" height="4" fill="#FBBF24" />
    </g>
  );
}

// Чемпион — mountaineer in red cap
function BodyChampion({ emotion }) {
  return (
    <g className="mascot-body">
      {/* body */}
      <rect x="32" y="48" width="38" height="32" rx="8" fill="#EF4444" stroke="#7F1D1D" strokeWidth="1.4" />
      {/* face — round head */}
      <circle cx="51" cy="40" r="22" fill="#FECACA" stroke="#7F1D1D" strokeWidth="1.4" />
      {/* cap */}
      <path d="M32 32 Q34 16 51 16 Q68 16 70 32 L70 36 L32 36 Z" fill="#EF4444" stroke="#7F1D1D" strokeWidth="1.4" />
      <ellipse cx="40" cy="36" rx="14" ry="4" fill="#EF4444" />
      <circle cx="51" cy="22" r="6" fill="#FECACA" stroke="#7F1D1D" strokeWidth="1.4" />
      <text x="51" y="26" textAnchor="middle" fontFamily="sans-serif" fontSize="10" fontWeight="800" fill="#EF4444">Ч</text>
      {/* eyes */}
      <circle cx="44" cy="42" r="2.6" fill="#14142A" />
      <circle cx="58" cy="42" r="2.6" fill="#14142A" />
      <circle className="mascot-eyelid" cx="44" cy="42" r="2.8" fill="#FECACA" style={{ transformOrigin: '44px 42px' }} />
      <circle className="mascot-eyelid" cx="58" cy="42" r="2.8" fill="#FECACA" style={{ transformOrigin: '58px 42px' }} />
      <circle cx="44.6" cy="41" r="0.9" fill="#fff" /><circle cx="58.6" cy="41" r="0.9" fill="#fff" />
      {/* mustache */}
      <path d="M42 50 Q47 52 51 50 Q55 52 60 50" stroke="#7F1D1D" strokeWidth="2.4" fill="none" strokeLinecap="round" />
      {/* nose */}
      <ellipse cx="51" cy="48" rx="2.2" ry="1.6" fill="#F87171" />
      {/* mouth */}
      <path d={emotion === 'celebrate' ? 'M46 56 Q51 60 56 56' : 'M48 56 Q51 58 54 56'}
            stroke="#7F1D1D" strokeWidth="1.4" fill={emotion === 'celebrate' ? '#7F1D1D' : 'none'} strokeLinecap="round" />
      {/* arms — raised */}
      <rect x="20" y="50" width="10" height="14" rx="3" fill="#FECACA" stroke="#7F1D1D" strokeWidth="1" />
      <rect x="72" y="50" width="10" height="14" rx="3" fill="#FECACA" stroke="#7F1D1D" strokeWidth="1" />
    </g>
  );
}

// Стальная Вдова — winged warrior silhouette
function BodyWidow({ emotion }) {
  return (
    <g className="mascot-body">
      {/* wings */}
      <path d="M28 50 Q8 38 12 22 Q24 32 36 48" fill="#1F2937" stroke="#A78BFA" strokeWidth="1.4" />
      <path d="M74 50 Q94 38 90 22 Q78 32 66 48" fill="#1F2937" stroke="#A78BFA" strokeWidth="1.4" />
      <path d="M30 54 Q14 56 16 46" fill="none" stroke="#A78BFA" strokeWidth="1" opacity="0.6" />
      <path d="M72 54 Q88 56 86 46" fill="none" stroke="#A78BFA" strokeWidth="1" opacity="0.6" />
      {/* helmet/head */}
      <path d="M38 26 Q40 14 51 14 Q62 14 64 26 L64 50 L38 50 Z" fill="#1F2937" stroke="#A78BFA" strokeWidth="1.6" />
      {/* glowing eye slits */}
      <rect x="40" y="32" width="9" height="4" rx="1" fill="#A78BFA" />
      <rect x="53" y="32" width="9" height="4" rx="1" fill="#A78BFA" />
      {/* crown spikes */}
      <polygon points="44,14 46,4 48,14" fill="#A78BFA" />
      <polygon points="50,14 52,2 54,14" fill="#A78BFA" />
      <polygon points="56,14 58,4 60,14" fill="#A78BFA" />
      {/* armor body */}
      <path d="M36 50 L66 50 L70 82 L32 82 Z" fill="#1F2937" stroke="#A78BFA" strokeWidth="1.4" />
      <path d="M51 50 L51 82" stroke="#A78BFA" strokeWidth="1.2" />
      <circle cx="44" cy="62" r="3" fill="#A78BFA" />
      <circle cx="58" cy="62" r="3" fill="#A78BFA" />
      <polygon points="51,68 47,76 55,76" fill="#A78BFA" />
      {/* sword hilt */}
      <line x1="72" y1="56" x2="84" y2="40" stroke="#A78BFA" strokeWidth="2" strokeLinecap="round" />
      <circle cx="84" cy="40" r="2.5" fill="#FBBF24" />
    </g>
  );
}

// Адский Бухгалтер — devil with calculator
function BodyDemon({ emotion }) {
  return (
    <g className="mascot-body">
      {/* horns */}
      <polygon points="32,22 28,4 38,16" fill="#DC2626" stroke="#7F1D1D" strokeWidth="1.4" />
      <polygon points="70,22 74,4 64,16" fill="#DC2626" stroke="#7F1D1D" strokeWidth="1.4" />
      {/* head */}
      <circle cx="51" cy="40" r="24" fill="#DC2626" stroke="#7F1D1D" strokeWidth="1.6" />
      {/* eyes */}
      <ellipse cx="42" cy="38" rx="3.6" ry="4.4" fill="#FBBF24" />
      <ellipse cx="60" cy="38" rx="3.6" ry="4.4" fill="#FBBF24" />
      <ellipse className="mascot-eyelid" cx="42" cy="38" rx="3.8" ry="4.6" fill="#DC2626" style={{ transformOrigin: '42px 38px' }} />
      <ellipse className="mascot-eyelid" cx="60" cy="38" rx="3.8" ry="4.6" fill="#DC2626" style={{ transformOrigin: '60px 38px' }} />
      <line x1="42" y1="35" x2="42" y2="41" stroke="#14142A" strokeWidth="1.8" strokeLinecap="round" />
      <line x1="60" y1="35" x2="60" y2="41" stroke="#14142A" strokeWidth="1.8" strokeLinecap="round" />
      {/* nose / smirk */}
      <path d={emotion === 'celebrate' ? 'M44 52 Q51 60 58 52' : 'M44 52 Q51 56 58 52'}
            stroke="#7F1D1D" strokeWidth="1.6" fill={emotion === 'celebrate' ? '#7F1D1D' : 'none'} strokeLinecap="round" />
      {/* fang */}
      <polygon points="48,52 50,58 52,52" fill="#fff" />
      <polygon points="52,52 54,58 56,52" fill="#fff" />
      {/* body */}
      <rect x="32" y="62" width="38" height="28" rx="6" fill="#7F1D1D" stroke="#DC2626" strokeWidth="1.4" />
      {/* calculator */}
      <rect x="38" y="68" width="26" height="18" rx="2" fill="#1F2937" stroke="#FBBF24" strokeWidth="0.8" />
      <rect x="40" y="70" width="22" height="5" rx="1" fill="#FBBF24" />
      <text x="60" y="74.5" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="4" fill="#1F2937">666.66</text>
      <circle cx="44" cy="80" r="1.2" fill="#FBBF24" />
      <circle cx="48" cy="80" r="1.2" fill="#FBBF24" />
      <circle cx="52" cy="80" r="1.2" fill="#FBBF24" />
      <circle cx="56" cy="80" r="1.2" fill="#FBBF24" />
      {/* trident-tail */}
      <path d="M70 90 Q80 90 84 82" stroke="#7F1D1D" strokeWidth="2" fill="none" strokeLinecap="round" />
      <polygon points="84,82 80,76 82,80 84,76 86,80 88,76 84,82" fill="#FBBF24" />
    </g>
  );
}

// Искра — electric lynx
function BodySpark({ emotion }) {
  return (
    <g className="mascot-body">
      {/* electric bolts behind */}
      <polygon points="14,30 22,40 18,40 24,52 14,42 18,42" fill="#FBBF24" opacity="0.7" />
      <polygon points="88,30 80,40 84,40 78,52 88,42 84,42" fill="#FBBF24" opacity="0.7" />
      {/* body */}
      <ellipse cx="51" cy="60" rx="26" ry="26" fill="#FCD34D" stroke="#F59E0B" strokeWidth="1.6" />
      {/* ears with tufts */}
      <polygon points="32,38 26,18 40,32" fill="#FCD34D" stroke="#F59E0B" strokeWidth="1.4" />
      <polygon points="70,38 76,18 62,32" fill="#FCD34D" stroke="#F59E0B" strokeWidth="1.4" />
      <line x1="26" y1="18" x2="22" y2="8" stroke="#1F2937" strokeWidth="1.4" strokeLinecap="round" />
      <line x1="76" y1="18" x2="80" y2="8" stroke="#1F2937" strokeWidth="1.4" strokeLinecap="round" />
      {/* face dark */}
      <ellipse cx="51" cy="58" rx="20" ry="18" fill="#1F2937" />
      {/* eyes — glowing */}
      <ellipse cx="42" cy="54" rx="3.6" ry="4.4" fill="#FBBF24" />
      <ellipse cx="60" cy="54" rx="3.6" ry="4.4" fill="#FBBF24" />
      <ellipse className="mascot-eyelid" cx="42" cy="54" rx="3.8" ry="4.6" fill="#1F2937" style={{ transformOrigin: '42px 54px' }} />
      <ellipse className="mascot-eyelid" cx="60" cy="54" rx="3.8" ry="4.6" fill="#1F2937" style={{ transformOrigin: '60px 54px' }} />
      <circle cx="42.6" cy="53" r="0.9" fill="#fff" /><circle cx="60.6" cy="53" r="0.9" fill="#fff" />
      {/* mustache whiskers */}
      <line x1="24" y1="60" x2="36" y2="62" stroke="#F59E0B" strokeWidth="1" />
      <line x1="78" y1="60" x2="66" y2="62" stroke="#F59E0B" strokeWidth="1" />
      {/* nose */}
      <path d="M48 62 L54 62 L51 66 Z" fill="#FBBF24" />
      <path d={emotion === 'celebrate' ? 'M46 70 Q51 76 56 70' : 'M46 70 Q51 72 56 70'}
            stroke="#FBBF24" strokeWidth="1.4" fill="none" strokeLinecap="round" />
    </g>
  );
}

const RENDERERS = {
  spectr: BodySpectr, lumen: BodyLumen, orion: BodyOrion, balbot: BodyBalbot, zhar: BodyZhar,
  mimi: BodyMimi, vortex: BodyVortex, magnat: BodyMagnat, noir: BodyNoir,
  champion: BodyChampion, widow: BodyWidow, demon: BodyDemon, spark: BodySpark,
};

function Mascot({ id = 'spectr', emotion = 'idle', size = 120, level = 4, aura = true }) {
  const def = MASCOT_BY_ID[id] || MASCOTS[0];
  const Body = RENDERERS[id] || BodySpectr;
  const growth = Math.min(1, (level + 1) / 9);
  const [sparkles, setSparkles] = React.useState([]);
  const sparkRef = React.useRef(0);

  React.useEffect(() => {
    if (emotion !== 'excited' && emotion !== 'celebrate') return;
    const count = emotion === 'celebrate' ? 6 : 3;
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push({
        id: sparkRef.current++,
        x: 20 + Math.random() * 60,
        y: 20 + Math.random() * 40,
        delay: i * 0.12,
        glyph: ['✦','✧','✨','⭐','★'][i % 5],
      });
    }
    setSparkles(arr);
    const t = setTimeout(() => setSparkles([]), 1400);
    return () => clearTimeout(t);
  }, [emotion]);

  return (
    <div className="mascot-wrap" data-emotion={emotion}
         style={{ width: size, height: size, '--m-glow': def.glow, '--m-color': def.color }}>
      {aura && <div className="mascot-aura" />}
      <svg className="mascot-svg" viewBox="0 0 102 102" width={size} height={size}
           style={{ filter: `drop-shadow(0 0 calc(8px * var(--glow-mult, 1)) ${def.glow}) drop-shadow(0 0 calc(20px * var(--glow-mult, 1)) ${def.glow}66)` }}>
        <Body emotion={emotion} growth={growth} />
      </svg>
      {emotion === 'sleepy' && <span className="mascot-z">z</span>}
      {sparkles.map(s => (
        <span key={s.id} className="mascot-sparkle-overlay" style={{ left: `${s.x}%`, top: `${s.y}%`, animationDelay: `${s.delay}s` }}>
          {s.glyph}
        </span>
      ))}
    </div>
  );
}

// ── Picker with all 13 + lock states ─────────────────────────
function MascotPicker({ value, onChange, onClose, unlockedIds = [] }) {
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="mascot-picker" onClick={(e) => e.stopPropagation()}>
        <div className="row" style={{ marginBottom: 6 }}>
          <div>
            <div className="eyebrow">Коллекция компаньонов</div>
            <div className="ttl-lg mt-2">Выбери проводника · {unlockedIds.length} из {MASCOTS.length}</div>
            <p className="dim2 mt-2" style={{ fontSize: 13, maxWidth: 620 }}>
              Каждый герой меняет тему всего приложения. Заблокированные открываются через достижения или паки.
            </p>
          </div>
          <div style={{ flex: 1 }}></div>
          <button className="btn ghost" onClick={onClose}>Закрыть</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginTop: 18 }}>
          {MASCOTS.map(m => {
            const locked = !unlockedIds.includes(m.id);
            const rar = RARITY_META[m.rarity];
            return (
              <div key={m.id} className="mascot-card"
                   data-active={value === m.id ? '1' : '0'}
                   data-locked={locked ? '1' : '0'}
                   style={{ '--m-glow': locked ? rar.glow : m.glow }}
                   onClick={() => { if (!locked) onChange(m.id); }}>
                <span className="rarity-tag">{rar.label}</span>
                {value === m.id && !locked && <span className="ribbon">Активен</span>}
                <div style={{ display: 'grid', placeItems: 'center', minHeight: 110 }}>
                  <Mascot id={m.id} size={96} emotion="idle" aura />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, marginTop: 10, letterSpacing: '-0.01em' }}>
                  {m.name}
                </div>
                <div className="dim" style={{ fontSize: 10.5, marginTop: 2 }}>«{m.type}»</div>
                <div className="dim2" style={{ fontSize: 11, marginTop: 6, minHeight: 28 }}>{m.power}</div>
                {!locked && (
                  <button className="btn primary"
                          style={{ width: '100%', justifyContent: 'center', fontSize: 11, marginTop: 8, padding: '6px 8px',
                                   background: m.color, borderColor: m.color,
                                   boxShadow: `0 0 calc(16px * var(--glow-mult)) ${m.glow}66` }}
                          onClick={(e) => { e.stopPropagation(); onChange(m.id); onClose(); }}>
                    {value === m.id ? '✓ Активен' : 'Выбрать'}
                  </button>
                )}
                {locked && (
                  <div className="locked-overlay">
                    <div>
                      <b>🔒 Заблокирован</b>
                      <div>{m.unlock?.label || 'Найди в Премиум-паке'}</div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MASCOTS, MASCOT_BY_ID, PACK_META, RARITY_META, Mascot, MascotPicker });