// CyberX Battle Pass — Additional mobile screens

// ─────────────────────────────────────────────────────────────
// SCREEN: Level Unlock Moment (full screen overlay)
// ─────────────────────────────────────────────────────────────
function UnlockScreen({ level = 20, isPremium = true, isLegend = false, rewardKind = 'hoodie', rewardName = 'ХУДИ CYBERX' }) {
  const t = isLegend ? TIERS.legend : tierFor(level);
  const isReallyLegend = level >= 30;

  return (
    <PhoneFrame>
      {/* Aurora / dark background */}
      <div style={{ position: 'absolute', inset: 0, background: CX.black, overflow: 'hidden' }}>
        {/* Tier gradient ambient */}
        <div style={{
          position: 'absolute', inset: 0,
          background: isReallyLegend
            ? `radial-gradient(circle at 50% 35%, ${CX.legend}55, transparent 50%),
               radial-gradient(circle at 30% 70%, ${CX.legendHi}33, transparent 50%),
               radial-gradient(circle at 70% 80%, #6366F133, transparent 50%)`
            : `radial-gradient(circle at 50% 40%, ${t.color}44, transparent 55%),
               radial-gradient(circle at 30% 75%, ${t.color}22, transparent 50%)`,
        }}/>
        {/* Particles */}
        {Array.from({ length: 60 }).map((_, i) => {
          const seed = i * 2654435761 % 1000;
          const left = (seed % 100);
          const top = ((seed * 31) % 100);
          const sz = ((seed * 17) % 4) + 1.5;
          const op = (((seed * 7) % 70) + 30) / 100;
          return (
            <div key={i} style={{
              position: 'absolute', left: `${left}%`, top: `${top}%`,
              width: sz, height: sz, borderRadius: '50%',
              background: i % 3 === 0 ? t.hi : '#fff',
              opacity: op,
              boxShadow: `0 0 ${sz * 3}px ${i % 3 === 0 ? t.color : '#fff'}`,
            }}/>
          );
        })}
        {/* Sparkle rays */}
        <svg style={{ position: 'absolute', top: 110, left: 0, right: 0, margin: 'auto', width: 375, height: 380 }} viewBox="0 0 375 380">
          {Array.from({ length: 14 }).map((_, i) => {
            const a = (i / 14) * Math.PI * 2;
            const x1 = 187.5 + Math.cos(a) * 60;
            const y1 = 190 + Math.sin(a) * 60;
            const x2 = 187.5 + Math.cos(a) * 180;
            const y2 = 190 + Math.sin(a) * 180;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
              stroke={t.hi} strokeOpacity="0.18" strokeWidth="1" />;
          })}
        </svg>
      </div>

      <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* close X */}
        <div style={{ position: 'absolute', top: 56, right: 16, zIndex: 10,
          width: 36, height: 36, borderRadius: 18,
          background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(8px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2 L12 12 M12 2 L2 12" stroke="#fff" strokeWidth="2" strokeLinecap="round"/></svg>
        </div>

        {/* Small uppercase header */}
        <div style={{ paddingTop: 86, textAlign: 'center' }}>
          <Display size={11} color={t.hi} tracking={0.36}>{isReallyLegend ? 'LEGEND ▲ TIER' : t.name + ' ▲ TIER'}</Display>
        </div>

        {/* HUGE level number */}
        <div style={{ position: 'relative', marginTop: 24, textAlign: 'center' }}>
          {/* halo */}
          <div style={{
            position: 'absolute', inset: 0, margin: 'auto',
            width: 240, height: 240, borderRadius: '50%',
            background: `radial-gradient(circle, ${t.color}66, transparent 70%)`,
            filter: 'blur(14px)',
          }}/>
          <div style={{
            position: 'relative',
            fontFamily: FONT_DISPLAY,
            fontSize: 200, lineHeight: 0.9,
            fontWeight: 700,
            letterSpacing: '-0.04em',
            background: isReallyLegend
              ? `linear-gradient(135deg, ${CX.legend} 0%, #fff 35%, ${CX.legendHi} 70%, ${CX.legend} 100%)`
              : `linear-gradient(180deg, ${t.hi} 0%, ${t.color} 60%, ${t.color} 100%)`,
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            textShadow: `0 0 24px ${t.color}99`,
            filter: `drop-shadow(0 4px 24px ${t.color}88)`,
          }}>{level}</div>
        </div>

        {/* unlocked text */}
        <div style={{ textAlign: 'center', marginTop: -10 }}>
          <Display size={20} color={CX.white} tracking={0.18}>УРОВЕНЬ {level} ВЗЯТ</Display>
          <div style={{
            marginTop: 4, fontFamily: FONT_BODY, fontSize: 13, color: CX.textSec, letterSpacing: '0.06em',
          }}>{isReallyLegend ? 'ПОШЁЛ. ТЫ — LEGEND.' : 'ПОШЁЛ! ЗАБИРАЙ НАГРАДУ.'}</div>
        </div>

        {/* Reward card */}
        <div style={{
          margin: '28px 32px 0', padding: 18, borderRadius: 16,
          background: `linear-gradient(160deg, ${t.color}22, ${CX.card}cc)`,
          border: `1.5px solid ${t.color}77`,
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
          boxShadow: `0 0 36px ${t.color}55`,
          textAlign: 'center', position: 'relative',
        }}>
          {isPremium && (
            <div style={{ position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)' }}>
              <Chip color={CX.premiumGold} filled><PremiumStar size={10}/> PREMIUM REWARD</Chip>
            </div>
          )}
          <div style={{ marginTop: isPremium ? 8 : 0 }}>
            <RewardIcon kind={rewardKind} size={88} tier={t.color}/>
          </div>
          <Display size={20} color={CX.white} tracking={0.1} style={{ display: 'block', marginTop: 8 }}>{rewardName}</Display>
          <div style={{
            marginTop: 4, fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute, letterSpacing: 0.3,
          }}>Подарок ждёт у админа на стойке клуба</div>
        </div>

        {/* Buttons */}
        <div style={{ marginTop: 'auto', marginBottom: 110, padding: '0 24px' }}>
          <CTAButton label="ЗАБРАТЬ НАГРАДУ" color={CX.red}/>
          <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
            <div style={{ flex: 1,
              padding: '12px', borderRadius: 8,
              background: 'rgba(255,255,255,0.06)', border: `1px solid ${CX.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              fontFamily: FONT_DISPLAY, fontSize: 12, letterSpacing: '0.12em', color: CX.white,
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><path d="M11 1 L1 7 L5 8.5 L6.5 13 Z" stroke="#3b82f6" fill="#3b82f6" strokeLinejoin="round" strokeWidth="1.4"/></svg>
              <span>ШАРНУТЬ В TG</span>
            </div>
            <div style={{ flex: 1,
              padding: '12px', borderRadius: 8,
              background: 'rgba(255,255,255,0.06)', border: `1px solid ${CX.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              fontFamily: FONT_DISPLAY, fontSize: 12, letterSpacing: '0.12em', color: CX.white,
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="12" height="12" rx="2" fill="#0077FF"/><text x="7" y="11" textAnchor="middle" fontFamily="Inter,sans-serif" fontSize="9" fontWeight="700" fill="#fff">VK</text></svg>
              <span>В ВК</span>
            </div>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// SCREEN: Premium Pass Purchase
// ─────────────────────────────────────────────────────────────
function PremiumPurchaseScreen({ active = false }) {
  const bonuses = [
    { icon: '⭐', text: 'Эксклюзивные награды на всех 30 уровнях' },
    { icon: '⚡', text: '+50% XP бонус ко всем заданиям' },
    { icon: '👑', text: 'Аватар-рамка и значок Premium' },
    { icon: '🏆', text: 'Доступ к закрытым турнирам' },
    { icon: '🎂', text: 'Главный приз 30 ур.: ДР под ключ' },
  ];

  return (
    <PhoneFrame>
      <CXBackground accent={CX.premiumGold}/>
      {/* gold ambient */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 400,
        background: `radial-gradient(ellipse at top, ${CX.premiumGold}26, transparent 70%)`,
      }}/>
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 110, scrollbarWidth: 'none' }}>
        <CXHeader title="PREMIUM BATTLE PASS" back/>

        {/* hero */}
        <div style={{ padding: '8px 16px 0', textAlign: 'center' }}>
          <div style={{
            display: 'inline-block', padding: '4px 12px', borderRadius: 4,
            background: `${CX.premiumGold}22`, border: `1px solid ${CX.premiumGold}55`,
            fontFamily: FONT_DISPLAY, fontSize: 11, letterSpacing: '0.24em', color: CX.premiumGold,
          }}>СЕЗОН 1 • ОПЕРАЦИЯ COPPER</div>

          {/* Big premium logo */}
          <div style={{ marginTop: 22, marginBottom: 8, position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: 0, margin: 'auto', width: 220, height: 120,
              background: `radial-gradient(ellipse, ${CX.premiumGold}55, transparent 70%)`,
              filter: 'blur(12px)',
            }}/>
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
              <PremiumStar size={64}/>
            </div>
          </div>

          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 36, lineHeight: 0.95,
            background: `linear-gradient(180deg, #FFE177, ${CX.premiumGold} 60%, #B8860B)`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            letterSpacing: '0.04em',
            marginTop: 6,
          }}>PREMIUM</div>
          <div style={{
            fontFamily: FONT_DISPLAY, fontSize: 24, color: CX.white,
            letterSpacing: '0.16em', marginTop: -2,
          }}>BATTLE PASS</div>

          <div style={{
            marginTop: 14, fontFamily: FONT_BODY, fontSize: 13, color: CX.textSec, lineHeight: 1.5, padding: '0 8px',
          }}>
            Плати не «чтобы выиграть» — плати, чтобы выжать максимум из каждого часа, проведённого в CyberX.
          </div>
        </div>

        {/* bonuses */}
        <div style={{ padding: '20px 16px 0' }}>
          {bonuses.map((b, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', marginTop: i === 0 ? 0 : 8, borderRadius: 10,
              background: CX.card, border: `1px solid ${CX.line}`,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 8, flexShrink: 0,
                background: `${CX.premiumGold}1F`, border: `1px solid ${CX.premiumGold}44`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 18,
              }}>{b.icon}</div>
              <div style={{ flex: 1, fontFamily: FONT_BODY, fontSize: 13, color: CX.white, fontWeight: 500, lineHeight: 1.35 }}>
                {b.text}
              </div>
            </div>
          ))}
        </div>

        {/* Price */}
        <div style={{
          margin: '20px 16px 0', padding: 18, borderRadius: 14,
          background: `linear-gradient(160deg, ${CX.card}, ${CX.black})`,
          border: `1px solid ${CX.premiumGold}33`,
          boxShadow: `0 0 24px ${CX.premiumGold}22`,
          textAlign: 'center',
        }}>
          <div style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute, letterSpacing: 0.5, textTransform: 'uppercase' }}>
            Цена за сезон (90 дней)
          </div>
          <div style={{ marginTop: 4, display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
            <span style={{ fontFamily: FONT_DISPLAY, fontSize: 56, color: CX.white, letterSpacing: '0.02em', lineHeight: 1 }}>
              <MonoNum n={1490}/>
            </span>
            <span style={{ fontFamily: FONT_DISPLAY, fontSize: 32, color: CX.premiumGold }}>₽</span>
          </div>
          <div style={{ marginTop: 6, fontFamily: FONT_BODY, fontSize: 12, color: CX.textSec }}>
            ≈ <span style={{ color: CX.white, fontWeight: 600 }}>16 ₽ в день</span> за всё это
          </div>
          {active ? (
            <div style={{
              marginTop: 14, padding: '12px', borderRadius: 8,
              background: `${CX.green}1F`, border: `1px solid ${CX.green}66`,
              fontFamily: FONT_DISPLAY, fontSize: 12, letterSpacing: '0.12em', color: CX.green,
            }}>
              ✓ PREMIUM АКТИВЕН ДО 12.08.2026
            </div>
          ) : (
            <CTAButton label="АКТИВИРОВАТЬ PREMIUM — 1 490 ₽" color={CX.premiumGold}/>
          )}
          <div style={{
            marginTop: 8, fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute,
          }}>Куплен у <span style={{ color: CX.white }}>67 игроков клуба</span> в этом сезоне</div>
        </div>

        {/* Comparison */}
        <div style={{ padding: '20px 16px 0' }}>
          <Display size={14} color={CX.white} tracking={0.14} style={{ display: 'block', marginBottom: 10 }}>FREE vs PREMIUM</Display>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ flex: 1, padding: 12, borderRadius: 10, background: CX.card, border: `1px solid ${CX.line}` }}>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 12, color: CX.textSec, letterSpacing: '0.18em' }}>FREE</div>
              <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontFamily: FONT_BODY, fontSize: 11.5, color: CX.textSec, lineHeight: 1.55 }}>
                <li>• 30 уровней</li>
                <li>• Базовые награды</li>
                <li>• 1 стикер CyberX</li>
                <li>• 500 бонусов</li>
                <li style={{ color: CX.textMute }}>• Без буста XP</li>
              </ul>
            </div>
            <div style={{
              flex: 1, padding: 12, borderRadius: 10,
              background: `linear-gradient(160deg, ${CX.premiumGold}11, ${CX.card})`,
              border: `1.5px solid ${CX.premiumGold}66`,
              boxShadow: `0 0 16px ${CX.premiumGold}22`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <PremiumStar size={11}/>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 12, color: CX.premiumGold, letterSpacing: '0.18em' }}>PREMIUM</div>
              </div>
              <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontFamily: FONT_BODY, fontSize: 11.5, color: CX.white, lineHeight: 1.55, fontWeight: 500 }}>
                <li>• Всё из Free</li>
                <li>• Худи + футболка + коврик</li>
                <li>• +50% XP буст</li>
                <li>• <span style={{ color: CX.premiumGold }}>ДР под ключ на 30 ур.</span></li>
                <li>• 2500 бонусов</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <BottomNav active="pass"/>
    </PhoneFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// SCREEN: Tasks list
// ─────────────────────────────────────────────────────────────
function TasksScreen({ variant = 'full' }) {
  const filters = ['Все', 'Ежедневные', 'Еженедельные', 'Сезонные', 'Steam'];

  const todayTasks = [
    { icon: 'time', title: 'Закрепись за ПК', desc: '2 часа подряд в один день', xp: 150, progress: '1ч 36м', max: '2ч', deadline: 'до 23:59', tier: CX.green },
    { icon: 'morning', title: 'Утренняя сессия', desc: 'Сыграй до 12:00', xp: 100, progress: null, max: null, deadline: 'до 12:00', tier: CX.green, done: true },
    { icon: 'bar', title: 'Возьми Pepsi в баре', desc: 'Чек ≥ 250₽ через POS', xp: 80, progress: null, max: null, deadline: 'до 23:59', tier: CX.green },
  ];
  const weekTasks = [
    { icon: 'challenge', title: 'Сломай 50 черепов в CS2', desc: 'Headshot kills, любые карты', xp: 250, progress: 32, max: 50, deadline: 'осталось 3 дня', tier: CX.amber, steam: true },
    { icon: 'tournament', title: 'Ввяжись в турнир', desc: 'Регнись на любой формат', xp: 350, progress: 0, max: 1, deadline: 'осталось 4 дня', tier: CX.amber },
    { icon: 'night', title: 'Ночная сессия 4ч', desc: 'С 23:00 до 6:00', xp: 200, progress: '1ч 12м', max: '4ч', deadline: 'осталось 2 часа', tier: CX.danger, expiring: true },
  ];
  const seasonTasks = [
    { icon: 'referral', title: 'Инвайтни друга', desc: 'Друг должен пополнить на 500₽+', xp: 500, progress: 0, max: 1, deadline: '∞ до конца сезона', tier: CX.legend },
    { icon: 'topup', title: 'Пополни на 5000₽', desc: 'Любым способом за сезон', xp: 500, progress: 3200, max: 5000, deadline: '∞ до конца сезона', tier: CX.legend },
    { icon: 'social', title: 'Запостись с CyberX', desc: 'Тэгни @cyberx.club в ВК/TG', xp: 300, progress: null, max: null, deadline: '∞ до конца сезона', tier: CX.legend, done: true },
  ];

  const empty = variant === 'empty';
  const allDone = variant === 'done';

  const tasksFor = (list) => allDone ? list.map(t => ({ ...t, done: true, progress: null })) : list;

  return (
    <PhoneFrame>
      <CXBackground accent={CX.red}/>
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 100, scrollbarWidth: 'none' }}>
        <CXHeader title="ЗАДАНИЯ" sub={`${empty ? 0 : allDone ? 9 : 8} задач • +${empty ? 0 : 2580} XP в банке`} back/>

        {/* Filter chips */}
        <div style={{
          display: 'flex', gap: 6, padding: '4px 16px', overflowX: 'auto',
          scrollbarWidth: 'none',
        }}>
          {filters.map((f, i) => (
            <div key={f} style={{
              flexShrink: 0,
              padding: '7px 14px', borderRadius: 999,
              background: i === 0 ? CX.red : CX.card,
              border: `1px solid ${i === 0 ? CX.red : CX.line}`,
              fontFamily: FONT_BODY, fontSize: 12, fontWeight: 600,
              color: i === 0 ? CX.white : CX.textSec, letterSpacing: 0.2,
            }}>{f}</div>
          ))}
        </div>

        {empty ? (
          <div style={{ padding: '60px 32px 0', textAlign: 'center' }}>
            <div style={{
              width: 140, height: 140, margin: '0 auto', borderRadius: '50%',
              background: `radial-gradient(circle, ${CX.green}22, transparent 70%)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `2px solid ${CX.green}55`,
              boxShadow: `0 0 32px ${CX.green}44`,
            }}>
              <svg width="60" height="60" viewBox="0 0 60 60">
                <circle cx="30" cy="30" r="22" fill={`${CX.green}33`} stroke={CX.green} strokeWidth="2"/>
                <path d="M18 30 L26 38 L42 22" stroke={CX.green} strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <div style={{ marginTop: 24 }}>
              <Display size={22} color={CX.white} tracking={0.1}>ВСЁ ВЗЯТО!</Display>
            </div>
            <div style={{ marginTop: 8, fontFamily: FONT_BODY, fontSize: 14, color: CX.textSec, lineHeight: 1.5, padding: '0 12px' }}>
              Все задания на сегодня выполнены. Можешь спокойно рашить катки — XP всё равно капает за каждый час.
            </div>
            <div style={{
              marginTop: 24, padding: '12px 16px', borderRadius: 10,
              background: CX.card, border: `1px solid ${CX.line}`, display: 'inline-flex', gap: 12, alignItems: 'center',
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill={CX.amber}><path d="M14 2 L4 14 L11 14 L9 22 L20 10 L13 10 Z"/></svg>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute, textTransform: 'uppercase', letterSpacing: 0.5 }}>Следующая партия в</div>
                <div style={{ fontFamily: FONT_MONO, fontSize: 16, color: CX.white, fontWeight: 600, marginTop: 1 }}>04:23:18</div>
              </div>
            </div>
          </div>
        ) : (
          <>
            <SectionLabel label={`Сегодня • ${todayTasks.filter(t=>t.done || allDone).length}/${todayTasks.length}`}/>
            <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {tasksFor(todayTasks).map((t, i) => <TaskCard key={i} {...t}/>)}
            </div>
            <SectionLabel label={`На этой неделе • ${weekTasks.filter(t=>t.done || allDone).length}/${weekTasks.length}`}/>
            <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {tasksFor(weekTasks).map((t, i) => <TaskCard key={i} {...t}/>)}
            </div>
            <SectionLabel label={`До конца сезона • ${seasonTasks.filter(t=>t.done || allDone).length}/${seasonTasks.length}`}/>
            <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {tasksFor(seasonTasks).map((t, i) => <TaskCard key={i} {...t}/>)}
            </div>
            {allDone && (
              <div style={{
                margin: '20px 16px 0', padding: 16, borderRadius: 12,
                background: `linear-gradient(135deg, ${CX.green}22, ${CX.amber}11)`,
                border: `1px solid ${CX.green}77`, textAlign: 'center',
              }}>
                <Display size={16} color={CX.green} tracking={0.16}>ВЕЗДЕ ГАЛОЧКИ. ИДИ ОТДОХНИ.</Display>
                <div style={{ marginTop: 6, fontFamily: FONT_MONO, fontSize: 12, color: CX.white }}>
                  +2 580 XP в банк сезона
                </div>
              </div>
            )}
          </>
        )}
      </div>
      <BottomNav active="pass"/>
    </PhoneFrame>
  );
}

function SectionLabel({ label }) {
  return (
    <div style={{
      padding: '16px 16px 8px',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <Display size={11} color={CX.textMute} tracking={0.24}>{label}</Display>
      <div style={{ flex: 1, height: 1, background: CX.line }}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SCREEN: Leaderboard
// ─────────────────────────────────────────────────────────────
function LeaderboardScreen() {
  const top3 = [
    { rank: 1, nick: 'WRAITH_42', level: 30, xp: 30000, prem: true, initials: 'WR' },
    { rank: 2, nick: 'NEON_K', level: 29, xp: 27450, prem: true, initials: 'NK' },
    { rank: 3, nick: 'ZED_HVH', level: 28, xp: 25800, prem: false, initials: 'ZD' },
  ];
  const rest = [
    { rank: 4, nick: 'CHRONIC', level: 27, xp: 24100, prem: true, initials: 'CH' },
    { rank: 5, nick: 'BOMBL4', level: 26, xp: 22950, prem: true, initials: 'BL' },
    { rank: 6, nick: 's1mple_kpsk', level: 25, xp: 21800, prem: false, initials: 's1' },
    { rank: 7, nick: 'KEKW_77', level: 24, xp: 20300, prem: true, initials: 'KK' },
    { rank: 8, nick: 'MIRA_DST', level: 23, xp: 19100, prem: false, initials: 'MR' },
    { rank: 9, nick: 'ARMADA', level: 22, xp: 18250, prem: true, initials: 'AR' },
  ];

  return (
    <PhoneFrame>
      <CXBackground accent={CX.gold}/>
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 130, scrollbarWidth: 'none' }}>
        <CXHeader title="ЛИДЕРЫ СЕЗОНА" sub="Топ-100 • CyberX Копейск" back/>

        {/* Toggle */}
        <div style={{ padding: '4px 16px', display: 'flex', gap: 6 }}>
          {['Топ-100', 'Друзья'].map((l, i) => (
            <div key={l} style={{
              flex: 1, padding: '8px', borderRadius: 8, textAlign: 'center',
              background: i === 0 ? CX.card : 'transparent',
              border: `1px solid ${i === 0 ? CX.lineHi : CX.line}`,
              fontFamily: FONT_DISPLAY, fontSize: 11, letterSpacing: '0.16em', color: i === 0 ? CX.white : CX.textMute,
            }}>{l}</div>
          ))}
        </div>

        {/* Podium */}
        <div style={{ padding: '24px 16px 0', display: 'flex', alignItems: 'flex-end', gap: 8, justifyContent: 'center' }}>
          {[top3[1], top3[0], top3[2]].map(p => {
            const t = tierFor(p.level);
            const heightBoost = p.rank === 1 ? 28 : 0;
            const podiumColors = { 1: CX.premiumGold, 2: CX.silver, 3: CX.bronze };
            const pc = podiumColors[p.rank];
            return (
              <div key={p.rank} style={{ flex: 1, textAlign: 'center' }}>
                <div style={{
                  marginBottom: 8,
                  display: 'flex', justifyContent: 'center', position: 'relative',
                }}>
                  <Avatar size={p.rank === 1 ? 76 : 60} tier={t} initials={p.initials}/>
                  {p.rank === 1 && (
                    <svg width="30" height="22" viewBox="0 0 30 22" style={{
                      position: 'absolute', top: -16, left: '50%', transform: 'translateX(-50%)',
                      filter: `drop-shadow(0 0 4px ${CX.premiumGold}aa)`,
                    }}><path d="M3 18 L5 4 L11 12 L15 2 L19 12 L25 4 L27 18 Z" fill={CX.premiumGold} stroke="#3a2700" strokeWidth="0.8"/></svg>
                  )}
                </div>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 13, color: CX.white, letterSpacing: '0.05em' }}>
                  {p.nick}
                  {p.prem && <PremiumStar size={9}/>}
                </div>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 11, color: t.hi, letterSpacing: '0.14em', marginTop: 2 }}>УР. {p.level}</div>
                <div style={{
                  marginTop: 8, height: 70 + heightBoost, borderRadius: '8px 8px 0 0',
                  background: `linear-gradient(180deg, ${pc}, ${pc}66 60%, transparent)`,
                  border: `1px solid ${pc}77`, borderBottom: 'none',
                  boxShadow: `0 0 16px ${pc}44`,
                  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
                  paddingTop: 6, position: 'relative',
                }}>
                  <span style={{ fontFamily: FONT_DISPLAY, fontSize: 28, color: '#0D0F14', fontWeight: 700, lineHeight: 1, letterSpacing: '0.02em' }}>
                    {p.rank}
                  </span>
                  <div style={{
                    position: 'absolute', bottom: 6, left: 0, right: 0, textAlign: 'center',
                    fontFamily: FONT_MONO, fontSize: 10, color: '#0D0F14', fontWeight: 600,
                  }}><MonoNum n={p.xp}/></div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Rest list */}
        <div style={{ padding: '8px 16px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {rest.map(p => {
            const t = tierFor(p.level);
            return (
              <div key={p.rank} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 12px', borderRadius: 10,
                background: CX.card, border: `1px solid ${CX.line}`,
              }}>
                <div style={{
                  width: 28, textAlign: 'center',
                  fontFamily: FONT_DISPLAY, fontSize: 16, color: CX.textSec, letterSpacing: '0.04em',
                }}>{p.rank}</div>
                <Avatar size={36} tier={t} initials={p.initials}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ fontFamily: FONT_DISPLAY, fontSize: 13, color: CX.white, letterSpacing: '0.04em' }}>{p.nick}</span>
                    {p.prem && <PremiumStar size={9}/>}
                  </div>
                  <div style={{ fontFamily: FONT_BODY, fontSize: 10.5, color: t.hi, letterSpacing: 0.3, marginTop: 1 }}>
                    {t.name} • УР. {p.level}
                  </div>
                </div>
                <div style={{ fontFamily: FONT_MONO, fontSize: 12, color: CX.white, fontWeight: 600 }}>
                  <MonoNum n={p.xp}/> <span style={{ color: CX.textMute, fontSize: 10 }}>XP</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Sticky "you" */}
      <div style={{
        position: 'absolute', bottom: 78, left: 12, right: 12,
        padding: '10px 12px', borderRadius: 10,
        background: `linear-gradient(180deg, ${CX.red}33, ${CX.card})`,
        border: `1.5px solid ${CX.red}88`,
        boxShadow: `0 0 16px ${CX.red}55, 0 -8px 24px rgba(13,15,20,0.6)`,
        backdropFilter: 'blur(12px)',
        display: 'flex', alignItems: 'center', gap: 10,
        zIndex: 15,
      }}>
        <div style={{ width: 28, textAlign: 'center', fontFamily: FONT_DISPLAY, fontSize: 16, color: CX.red, fontWeight: 700 }}>34</div>
        <Avatar size={36} tier={TIERS.knight} initials="TZ"/>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: FONT_DISPLAY, fontSize: 13, color: CX.white, letterSpacing: '0.04em' }}>ТЫ • TENZ_RU</div>
          <div style={{ fontFamily: FONT_BODY, fontSize: 10.5, color: CX.textSec, marginTop: 1 }}>
            До 33-го места: <span style={{ color: CX.amber, fontFamily: FONT_MONO }}><MonoNum n={420}/> XP</span> ↑
          </div>
        </div>
        <div style={{ fontFamily: FONT_MONO, fontSize: 12, color: CX.white, fontWeight: 600 }}>
          <MonoNum n={3500}/>
        </div>
      </div>

      <BottomNav active="tops"/>
    </PhoneFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// SCREEN: Reward detail (Level 20 modal)
// ─────────────────────────────────────────────────────────────
function RewardDetailScreen({ level = 20, unlocked = true, hasPremium = true }) {
  const t = tierFor(level);
  return (
    <PhoneFrame>
      <CXBackground accent={t.color}/>
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 100, scrollbarWidth: 'none' }}>
        <CXHeader title={`НАГРАДА УРОВНЯ ${level}`} sub={t.name} back/>

        {/* Hero card */}
        <div style={{ margin: '4px 16px 0', padding: 20, borderRadius: 16,
          background: `linear-gradient(160deg, ${t.color}33, ${CX.card})`,
          border: `1.5px solid ${t.color}99`,
          boxShadow: `0 0 28px ${t.color}55`,
          textAlign: 'center', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -40, right: -30, width: 180, height: 180,
            background: `radial-gradient(circle, ${t.color}55, transparent 70%)`,
            filter: 'blur(20px)',
          }}/>
          <div style={{ position: 'relative' }}>
            <Display size={11} color={t.hi} tracking={0.32}>{t.name} TIER</Display>
            <div style={{
              fontFamily: FONT_DISPLAY,
              fontSize: 100, lineHeight: 1, fontWeight: 700,
              background: `linear-gradient(180deg, ${t.hi}, ${t.color})`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              filter: `drop-shadow(0 0 16px ${t.color}88)`,
              marginTop: 4, letterSpacing: '-0.02em',
            }}>{level}</div>
            <div style={{ marginTop: 4 }}>
              <RewardIcon kind="hoodie" size={96} tier={t.color}/>
            </div>
            <Display size={20} color={CX.white} tracking={0.06} style={{ display: 'block', marginTop: 6 }}>ХУДИ CYBERX</Display>
            <div style={{ fontFamily: FONT_BODY, fontSize: 11.5, color: CX.textSec, marginTop: 3 }}>чёрный, лого на груди, S1 на спине</div>

            <div style={{ marginTop: 14 }}>
              {unlocked ? (
                <CTAButton label="ЗАБРАТЬ НАГРАДУ" color={CX.red}/>
              ) : (
                <div style={{
                  margin: '0 8px', padding: '12px', borderRadius: 8,
                  background: 'rgba(255,255,255,0.04)', border: `1px solid ${CX.line}`,
                }}>
                  <div style={{ fontFamily: FONT_BODY, fontSize: 11, color: CX.textMute, textTransform: 'uppercase', letterSpacing: 0.4 }}>До открытия</div>
                  <div style={{ fontFamily: FONT_DISPLAY, fontSize: 22, color: CX.amber, marginTop: 2 }}>
                    <MonoNum n={1500}/> <span style={{ fontSize: 14, color: CX.textSec }}>XP</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Comparison */}
        <div style={{ padding: '20px 16px 0' }}>
          <Display size={14} color={CX.white} tracking={0.14} style={{ display: 'block', marginBottom: 10 }}>НА ЭТОМ УРОВНЕ ДАЮТ</Display>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ flex: 1, padding: 12, borderRadius: 10, background: CX.card, border: `1px solid ${CX.line}` }}>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 12, color: CX.textSec, letterSpacing: '0.18em' }}>FREE</div>
              <div style={{ marginTop: 10, fontFamily: FONT_BODY, fontSize: 12, color: CX.textSec, lineHeight: 1.6 }}>
                <div>• 800 бонусов на счёт</div>
                <div>• Стикер «Knight»</div>
                <div>• Аватар-рамка серебро</div>
              </div>
            </div>
            <div style={{ flex: 1, padding: 12, borderRadius: 10,
              background: `linear-gradient(160deg, ${CX.premiumGold}11, ${CX.card})`,
              border: `1.5px solid ${CX.premiumGold}66`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <PremiumStar size={11}/>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 12, color: CX.premiumGold, letterSpacing: '0.18em' }}>PREMIUM</div>
              </div>
              <div style={{ marginTop: 10, fontFamily: FONT_BODY, fontSize: 12, color: CX.white, lineHeight: 1.6, fontWeight: 500 }}>
                <div>• <span style={{ color: CX.premiumGold }}>Худи CyberX S1</span></div>
                <div>• 1500 бонусов</div>
                <div>• +3 часа BOOTCAMP</div>
                <div>• Закрытый турнир-инвайт</div>
              </div>
            </div>
          </div>
        </div>

        {!hasPremium && (
          <div style={{ padding: '16px 16px 0' }}>
            <div style={{
              padding: 14, borderRadius: 12,
              background: `linear-gradient(135deg, rgba(255,215,0,0.1), rgba(184,134,11,0.04))`,
              border: `1px solid ${CX.premiumGold}66`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <PremiumStar size={18}/>
                <Display size={13} color={CX.premiumGold} tracking={0.14}>АКТИВИРУЙ PREMIUM</Display>
              </div>
              <div style={{ fontFamily: FONT_BODY, fontSize: 12, color: CX.textSec, marginTop: 6 }}>
                За 1490₽ заберёшь худи + всё остальное по треку. Шмотки уже лежат на складе.
              </div>
              <CTAButton label="АКТИВИРОВАТЬ — 1 490 ₽" color={CX.premiumGold}/>
            </div>
          </div>
        )}

        <div style={{
          padding: '16px', textAlign: 'center',
          fontFamily: FONT_BODY, fontSize: 13, color: CX.red, fontWeight: 600,
        }}>Все награды сезона →</div>
      </div>
      <BottomNav active="pass"/>
    </PhoneFrame>
  );
}

// ─────────────────────────────────────────────────────────────
// SCREEN: Level 30 — Legend Reward
// ─────────────────────────────────────────────────────────────
function Level30Screen() {
  const t = TIERS.legend;
  const prizes = [
    { ic: '🎂', t: 'День рождения в клубе под ключ', s: 'Зона на 12 человек, 4 часа, без доплат' },
    { ic: '🎁', t: 'Полный мерч-пакет S1', s: 'Худи + футболка + коврик + 4 стикера' },
    { ic: '⚡', t: '10 часов BOOTCAMP', s: 'Тренировки с тренером CyberX' },
    { ic: '💎', t: '2 500 бонусов', s: 'На счёт мгновенно' },
    { ic: '👑', t: 'Статус «Legend S1» навсегда', s: 'Никто не заберёт' },
  ];
  const hallOfFame = [
    { rank: 1, nick: 'WRAITH_42', initials: 'WR' },
    { rank: 2, nick: 'NEON_K', initials: 'NK' },
    { rank: 3, nick: 'ZED_HVH', initials: 'ZD' },
    { rank: 4, nick: 'CHRONIC', initials: 'CH' },
    { rank: 5, nick: 'BOMBL4', initials: 'BL' },
  ];

  return (
    <PhoneFrame>
      {/* Aurora background */}
      <div style={{ position: 'absolute', inset: 0, background: CX.black, overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(ellipse 80% 60% at 30% 20%, ${CX.legend}55, transparent 60%),
            radial-gradient(ellipse 70% 50% at 80% 40%, ${CX.legendHi}33, transparent 60%),
            radial-gradient(ellipse 90% 40% at 50% 80%, #6366F144, transparent 60%)
          `,
        }}/>
        {Array.from({ length: 80 }).map((_, i) => {
          const seed = i * 2654435761 % 1000;
          const left = (seed % 100);
          const top = ((seed * 31) % 100);
          const sz = ((seed * 17) % 3) + 1;
          return (
            <div key={i} style={{
              position: 'absolute', left: `${left}%`, top: `${top}%`,
              width: sz, height: sz, borderRadius: '50%',
              background: i % 4 === 0 ? CX.legendHi : '#fff',
              opacity: 0.6,
              boxShadow: `0 0 ${sz * 3}px ${i % 4 === 0 ? CX.legendHi : '#fff'}`,
            }}/>
          );
        })}
      </div>

      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 100, scrollbarWidth: 'none' }}>
        <CXHeader title="LEGEND TIER • УРОВЕНЬ 30" back/>

        {/* HUGE 30 */}
        <div style={{ textAlign: 'center', marginTop: 8, position: 'relative' }}>
          <Display size={13} color={CX.legendHi} tracking={0.32}>FINAL TIER • ГЛАВНЫЙ ПРИЗ</Display>
          <div style={{
            position: 'relative', marginTop: 8,
            fontFamily: FONT_DISPLAY, fontSize: 180, lineHeight: 0.85,
            fontWeight: 700,
            background: `linear-gradient(135deg, ${CX.legend} 0%, #fff 30%, ${CX.legendHi} 55%, ${CX.legend} 80%, #6366F1 100%)`,
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            filter: `drop-shadow(0 0 32px ${CX.legend}88)`,
            letterSpacing: '-0.04em',
          }}>30</div>
        </div>

        {/* Prize list */}
        <div style={{ padding: '20px 16px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {prizes.map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '14px 14px',
              borderRadius: 12,
              background: `linear-gradient(135deg, ${CX.legend}11, ${CX.card})`,
              border: `1px solid ${CX.legend}33`,
              backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                background: `linear-gradient(135deg, ${CX.legend}33, ${CX.legendHi}22)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20, border: `1px solid ${CX.legend}66`,
              }}>{p.ic}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: FONT_BODY, fontWeight: 600, fontSize: 13, color: CX.white, lineHeight: 1.2 }}>{p.t}</div>
                <div style={{ fontFamily: FONT_BODY, fontSize: 11.5, color: CX.textSec, marginTop: 3, lineHeight: 1.35 }}>{p.s}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Hall of Fame */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <Display size={14} color={CX.legendHi} tracking={0.16}>ЗАЛ СЛАВЫ</Display>
            <div style={{ flex: 1, height: 1, background: `${CX.legend}44` }}/>
            <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: CX.textMute }}>топ-5 пришедших к 30</span>
          </div>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'space-between' }}>
            {hallOfFame.map(p => (
              <div key={p.rank} style={{ flex: 1, textAlign: 'center' }}>
                <Avatar size={48} tier={TIERS.legend} initials={p.initials}/>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 10.5, color: CX.white, letterSpacing: '0.04em', marginTop: 4, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>{p.nick}</div>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 9, color: CX.legendHi, letterSpacing: '0.12em', marginTop: 1 }}>#{p.rank}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <BottomNav active="pass"/>
    </PhoneFrame>
  );
}

Object.assign(window, {
  UnlockScreen, PremiumPurchaseScreen, TasksScreen, LeaderboardScreen, RewardDetailScreen, Level30Screen,
});