// Storefront screens 2: Game page, Checkout, Success, Account
const { useState: uS_s2, useEffect: uE_s2, useMemo: uM_s2 } = React;

// ============== 3. GAME PAGE ==============
function ScreenGame({ goto, mobile, currentGameSlug }) {
  const game = MOCK_GAMES.find(g => g.slug === currentGameSlug) || MOCK_GAMES[0];
  const [tab, setTab] = uS_s2('shop');
  const [selectedProduct, setSelectedProduct] = uS_s2(game.products[2] || game.products[0]);

  const tabs = [
    { id: 'shop',   label: 'Магазин',   icon: <IconCart size={14}/> },
    { id: 'buy',    label: 'Покупка',   icon: <IconBolt size={14}/> },
    { id: 'guides', label: 'Гайды',     icon: <IconBook size={14}/> },
    { id: 'forum',  label: 'Обсуждения', icon: <IconChat size={14}/> },
    { id: 'news',   label: 'Новости',   icon: <IconNews size={14}/> },
  ];

  return (
    <div style={{background:'var(--bg)', minHeight:'100%'}}>
      <StorefrontHeader goto={goto} mobile={mobile} currentScreen="game"/>
      {/* Hero */}
      <section style={{position:'relative', height: mobile? 220 : 320, overflow:'hidden'}}>
        <GameCover slug={game.slug} accent={game.accent} accent2={game.accent2}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.7))'}}/>
        <div style={{position:'absolute', bottom: 0, left: 0, right: 0, padding: mobile?'16px':'24px 32px', maxWidth: 1280, margin:'0 auto'}}>
          <div style={{display:'flex', alignItems:'flex-end', gap: mobile?12:20}}>
            <div style={{width: mobile?64:96, height: mobile?64:96, borderRadius:'var(--r-6)', background:'#fff', flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'var(--shadow-lg)', overflow:'hidden'}}>
              <GameCover slug={game.slug} accent={game.accent} accent2={game.accent2}/>
            </div>
            <div style={{flex:1, color:'#fff'}}>
              <div className="badge badge-brand" style={{marginBottom:8}}>{game.genre}</div>
              <h1 className="display" style={{fontSize: mobile?22:36, fontWeight:800, margin:0, letterSpacing:'-0.02em', textShadow:'0 2px 12px rgba(0,0,0,0.4)'}}>{game.title}</h1>
              <div style={{fontSize:13, opacity:0.9, marginTop:4, display:'flex', gap:12, alignItems:'center', flexWrap:'wrap'}}>
                <span>{game.dev}</span>
                <span style={{display:'flex', alignItems:'center', gap:4}}><IconStar size={12} fill="var(--brand-500)" stroke={0}/> {game.rating}</span>
                {!mobile && <><span>iOS · Android</span></>}
              </div>
            </div>
            {!mobile && (
              <div style={{display:'flex', gap: 8}}>
                <button className="btn btn-accent btn-lg"><IconPlay size={14}/> Играть</button>
                <button className="btn btn-secondary btn-lg" style={{background:'rgba(255,255,255,.9)'}}><IconHeart size={14}/></button>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Tabs */}
      <div style={{borderBottom:'1px solid var(--border)', background:'var(--surface)', position:'sticky', top: mobile? 56 : 60, zIndex: 20}}>
        <div className="scroll-thin" style={{maxWidth:1280, margin:'0 auto', padding: mobile?'0 16px':'0 32px', overflowX:'auto'}}>
          <div className="tabs" style={{borderBottom:'none', flexWrap:'nowrap'}}>
            {tabs.map(t => (
              <button key={t.id} className={'tab' + (tab===t.id?' active':'')} onClick={()=>setTab(t.id)} style={{whiteSpace:'nowrap', display:'flex', gap:6, alignItems:'center'}}>
                {t.icon}{t.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      <div style={{maxWidth:1280, margin:'0 auto', padding: mobile?'16px':'24px 32px', display:'flex', gap: 24, flexDirection: mobile?'column':'row'}}>
        <div style={{flex:1, minWidth:0}}>
          {/* SHOP */}
          {tab === 'shop' && (
            <>
              <h2 className="display" style={{fontSize: mobile?20:24, fontWeight:700, margin:'0 0 16px', letterSpacing:'-0.02em'}}>Топ-апы</h2>
              <div style={{display:'grid', gridTemplateColumns: mobile?'repeat(2,1fr)':'repeat(3,1fr)', gap: 12, marginBottom: 32}}>
                {game.products.filter(p=>p.type==='topup').map(p => (
                  <button key={p.id} onClick={()=>{setSelectedProduct(p); setTab('buy');}} className="card lift" style={{padding: 14, textAlign:'left', display:'flex', flexDirection:'column', gap: 8, position:'relative'}}>
                    {p.badge && <div style={{position:'absolute', top:8, right:8}} className={p.badge.startsWith('−')?'badge badge-danger':'badge badge-brand'}>{p.badge}</div>}
                    <div style={{width: 40, height: 40, borderRadius:'var(--r-3)', background: game.accent+'18', color: game.accent, display:'flex', alignItems:'center', justifyContent:'center'}}>
                      <IconBolt size={20}/>
                    </div>
                    <div style={{fontWeight:600, fontSize:14, marginTop: 4}}>{p.name}</div>
                    <div style={{display:'flex', alignItems:'baseline', gap:6}}>
                      <span style={{fontSize:18, fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(p.price)} ₽</span>
                      {p.was && <span style={{fontSize:12, color:'var(--text-muted)', textDecoration:'line-through'}} className="tnum">{fmtNum(p.was)} ₽</span>}
                    </div>
                  </button>
                ))}
              </div>
              {game.products.some(p=>p.type==='sub') && <>
                <h2 className="display" style={{fontSize: mobile?20:24, fontWeight:700, margin:'0 0 16px', letterSpacing:'-0.02em'}}>Подписки</h2>
                <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'repeat(2,1fr)', gap: 12}}>
                  {game.products.filter(p=>p.type==='sub').map(p => (
                    <button key={p.id} onClick={()=>{setSelectedProduct(p); setTab('buy');}} className="card lift" style={{padding: 16, textAlign:'left', display:'flex', gap:12, alignItems:'center'}}>
                      <div style={{width:48, height:48, borderRadius:'var(--r-4)', background: 'linear-gradient(135deg, '+game.accent+', '+game.accent2+')', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
                        <IconShield size={22}/>
                      </div>
                      <div style={{flex:1}}>
                        <div style={{fontWeight:600, fontSize:14}}>{p.name}</div>
                        <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>Автопродление, отмена в 1 клик</div>
                      </div>
                      <div style={{textAlign:'right'}}>
                        <div style={{fontSize:18, fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(p.price)} ₽</div>
                        <div style={{fontSize:11, color:'var(--text-muted)'}}>/{p.period}</div>
                      </div>
                    </button>
                  ))}
                </div>
              </>}
            </>
          )}
          {/* BUY */}
          {tab === 'buy' && <BuyTab game={game} product={selectedProduct} onCheckout={()=>goto('checkout')} mobile={mobile}/>}
          {/* GUIDES */}
          {tab === 'guides' && (
            <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'repeat(2,1fr)', gap: 12}}>
              {[
                ['Как быстро прокачаться до 30 уровня', '8 мин', game.accent],
                ['Лучшие стратегии в PvP-аренах', '12 мин', game.accent2],
                ['Гайд по новому персонажу: Авирра', '6 мин', game.accent],
                ['Как фармить ресурсы эффективно', '10 мин', game.accent2],
              ].map(([t,m,c],i) => (
                <button key={i} className="card lift" style={{padding:0, overflow:'hidden', textAlign:'left'}}>
                  <div style={{height: 120, background:`linear-gradient(135deg, ${c}, ${c}aa)`, position:'relative'}}>
                    <div style={{position:'absolute', bottom:8, right:8, background:'rgba(0,0,0,.6)', color:'#fff', fontSize:11, padding:'3px 8px', borderRadius:'var(--r-3)'}}>{m}</div>
                    <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff'}}><IconPlay size={32}/></div>
                  </div>
                  <div style={{padding: 14}}>
                    <div style={{fontWeight:600, fontSize:14}}>{t}</div>
                    <div style={{fontSize:12, color:'var(--text-muted)', marginTop:4}}>Команда {game.dev}</div>
                  </div>
                </button>
              ))}
            </div>
          )}
          {/* FORUM */}
          {tab === 'forum' && (
            <div style={{display:'flex', flexDirection:'column', gap: 12}}>
              {[
                ['Krongor92', 'Кто-нибудь прошёл рейд на Драконьей башне? Застрял на 4 этапе.', 47, 12, '2 ч'],
                ['Aliana_RPG', 'Подскажите, какой пропуск выгоднее купить — VIP или обычный? Качаю DPS.', 89, 24, '5 ч'],
                ['DemoPlayer', 'Распродажа кристаллов на этой неделе — кто-то уже взял 3000-пак?', 32, 8, '1 д'],
              ].map(([u,t,l,r,ago],i) => (
                <div key={i} className="card" style={{padding: 16, display:'flex', gap: 12}}>
                  <Avatar name={u} accent={game.accent}/>
                  <div style={{flex:1}}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:4}}>
                      <span style={{fontWeight:600, fontSize:13}}>{u}</span>
                      <span style={{fontSize:12, color:'var(--text-muted)'}}>{ago} назад</span>
                    </div>
                    <p style={{margin:0, fontSize:14, lineHeight:1.5}}>{t}</p>
                    <div style={{display:'flex', gap: 12, marginTop: 10, fontSize:12, color:'var(--text-muted)'}}>
                      <button style={{display:'flex', gap:4, alignItems:'center'}}><IconHeart size={14}/> {l}</button>
                      <button style={{display:'flex', gap:4, alignItems:'center'}}><IconChat size={14}/> {r} ответов</button>
                    </div>
                  </div>
                </div>
              ))}
              <div className="card" style={{padding: 14, textAlign:'center', borderStyle:'dashed', background:'var(--n-25)', cursor:'pointer'}}>
                <span style={{color:'var(--text-muted)', fontSize:13}}>Войдите, чтобы оставить пост</span>
              </div>
            </div>
          )}
          {/* NEWS */}
          {tab === 'news' && (
            <div style={{display:'flex', flexDirection:'column', gap: 16}}>
              {[
                ['Обновление 2.4: Новый рейд и баланс DPS', '01 мая 2026', 'Готовы прыгнуть в Драконью башню? В этом обновлении мы добавили новый 5-этапный рейд, переработали баланс…'],
                ['Открытие сезона: «Эра Молний»', '24 апр 2026', 'Стартовал новый соревновательный сезон с эксклюзивными наградами и обновлёнными правилами PvP-арен.'],
                ['Праздничные скидки до 50%', '14 апр 2026', 'На этой неделе действуют скидки на ключевые наборы кристаллов и боевой пропуск. Не пропустите.'],
              ].map(([t,d,p],i) => (
                <article key={i} className="card" style={{padding:0, overflow:'hidden'}}>
                  <div style={{height: mobile?140:180, background:`linear-gradient(135deg, ${game.accent}, ${game.accent2})`, position:'relative'}}>
                    <GameCover slug={game.slug} accent={game.accent} accent2={game.accent2}/>
                  </div>
                  <div style={{padding: 20}}>
                    <div style={{fontSize:12, color:'var(--text-muted)', marginBottom:6}}>{d}</div>
                    <h3 style={{fontSize: 18, fontWeight:700, margin:'0 0 8px'}}>{t}</h3>
                    <p style={{margin:0, fontSize:14, lineHeight:1.6, color:'var(--text-soft)'}}>{p}</p>
                  </div>
                </article>
              ))}
            </div>
          )}
        </div>

        {/* Sticky right buy */}
        {!mobile && tab === 'shop' && (
          <aside style={{width: 320, flexShrink:0}}>
            <div className="card" style={{padding: 16, position:'sticky', top: 130}}>
              <div style={{fontSize:12, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600, marginBottom:12}}>Быстрая покупка</div>
              <div style={{padding: 14, background:'var(--n-50)', borderRadius:'var(--r-4)', marginBottom:12}}>
                <div style={{fontSize:11, color:'var(--text-muted)', marginBottom:4}}>Хит продаж</div>
                <div style={{fontWeight:600, fontSize:14, marginBottom: 8}}>{game.products[2]?.name || game.products[0].name}</div>
                <div style={{fontSize:24, fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(game.products[2]?.price || game.products[0].price)} ₽</div>
              </div>
              <button onClick={()=>{ setSelectedProduct(game.products[2] || game.products[0]); setTab('buy'); }} className="btn btn-accent btn-lg" style={{width:'100%'}}>
                Купить сейчас
              </button>
              <div style={{display:'flex', gap:6, marginTop:12, flexWrap:'wrap'}}>
                <PayLogo kind="mir" size={18}/><PayLogo kind="sbp" size={18}/><PayLogo kind="sberpay" size={18}/><PayLogo kind="yandexpay" size={18}/>
              </div>
              <div style={{fontSize:11, color:'var(--text-muted)', marginTop:12, lineHeight:1.5, display:'flex', gap:6, alignItems:'flex-start'}}>
                <IconReceipt size={12} style={{flexShrink:0, marginTop:1}}/>
                Чек по 54-ФЗ автоматически на e-mail. Доставка в игру за 30 секунд.
              </div>
            </div>
          </aside>
        )}
      </div>
      {/* Mobile sticky CTA */}
      {mobile && tab !== 'buy' && tab !== 'forum' && (
        <div style={{position:'sticky', bottom:0, background:'var(--surface)', borderTop:'1px solid var(--border)', padding: 12, display:'flex', gap:10, alignItems:'center', zIndex: 25}}>
          <div style={{flex:1}}>
            <div style={{fontSize:11, color:'var(--text-muted)'}}>Хит</div>
            <div style={{fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(game.products[2]?.price || game.products[0].price)} ₽</div>
          </div>
          <button onClick={()=>{setSelectedProduct(game.products[2] || game.products[0]); setTab('buy');}} className="btn btn-accent" style={{flex:1.2}}>Купить сейчас</button>
        </div>
      )}
      <StorefrontFooter mobile={mobile}/>
    </div>
  );
}

function BuyTab({ game, product, onCheckout, mobile }) {
  const [ingameId, setIngameId] = uS_s2('');
  const validId = /^[A-Z]{2}-\d{6,}$/.test(ingameId);
  const charPreview = validId ? { name: 'Игрок_42', level: 25 } : null;
  return (
    <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'1.5fr 1fr', gap:24}}>
      <div>
        <h2 className="display" style={{fontSize: mobile?20:24, fontWeight:700, margin:'0 0 6px', letterSpacing:'-0.02em'}}>Быстрая покупка</h2>
        <p style={{fontSize:13, color:'var(--text-muted)', marginTop:0, marginBottom: 24}}>Введите свой in-game ID, выберите товар — мы доставим за 30 секунд.</p>

        <div style={{marginBottom: 20}}>
          <label style={{fontSize:12, fontWeight:600, color:'var(--n-700)', display:'block', marginBottom:6, textTransform:'uppercase', letterSpacing:'0.05em'}}>1. Ваш ID в игре</label>
          <div style={{position:'relative'}}>
            <input className="input" placeholder="AC-1234567" value={ingameId} onChange={e=>setIngameId(e.target.value.toUpperCase())} style={{fontFamily:'var(--font-mono)', letterSpacing:'0.05em'}}/>
            {validId && <IconCheck style={{position:'absolute', right:12, top:'50%', transform:'translateY(-50%)', color:'var(--success)'}}/>}
          </div>
          <button style={{fontSize:12, color:'var(--info)', marginTop:6, fontWeight:500}}>Я не знаю свой ID →</button>
        </div>

        {charPreview && (
          <div className="card" style={{padding: 14, marginBottom: 20, background:'var(--success-bg)', borderColor:'#A7F3D0', display:'flex', alignItems:'center', gap: 12}}>
            <Avatar name={charPreview.name} accent={game.accent}/>
            <div style={{flex:1}}>
              <div style={{fontSize:11, color:'#047857', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em'}}>Кому отправляем</div>
              <div style={{fontWeight:600, fontSize:14}}>{charPreview.name} · Уровень {charPreview.level}</div>
            </div>
            <IconCheck size={20} style={{color:'var(--success)'}}/>
          </div>
        )}

        <div>
          <label style={{fontSize:12, fontWeight:600, color:'var(--n-700)', display:'block', marginBottom:6, textTransform:'uppercase', letterSpacing:'0.05em'}}>2. Что отправляем</label>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {game.products.slice(0,4).map(p => (
              <label key={p.id} className="card" style={{padding: 12, display:'flex', alignItems:'center', gap: 12, cursor:'pointer', borderColor: product?.id===p.id ? 'var(--n-900)' : 'var(--border)', borderWidth: product?.id===p.id?2:1}}>
                <input type="radio" checked={product?.id===p.id} readOnly style={{accentColor:'var(--n-900)'}}/>
                <div style={{flex:1}}>
                  <div style={{fontWeight:600, fontSize:14}}>{p.name}</div>
                  <div style={{fontSize:11, color:'var(--text-muted)'}}>{p.type==='sub'?`Подписка / ${p.period}`:'Разовая покупка'}</div>
                </div>
                <div style={{fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(p.price)} ₽</div>
              </label>
            ))}
          </div>
        </div>
      </div>

      <aside>
        <div className="card" style={{padding: 16, position: mobile?'static':'sticky', top: 130}}>
          <div style={{fontSize:12, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600, marginBottom:8}}>Итого</div>
          <div style={{fontSize:14, marginBottom:12}}>{product?.name}</div>
          <div style={{fontSize: 32, fontWeight:800, fontFamily:'var(--font-display)', letterSpacing:'-0.02em'}} className="tnum">{fmtNum(product?.price || 0)} ₽</div>
          <div style={{fontSize:12, color:'var(--text-muted)', marginBottom: 16}}>в том числе НДС</div>
          <button onClick={onCheckout} disabled={!validId} className="btn btn-accent btn-lg" style={{width:'100%', opacity: validId?1:0.4, cursor: validId?'pointer':'not-allowed'}}>
            Оплатить {fmtNum(product?.price || 0)} ₽
          </button>
          <div style={{fontSize:11, color:'var(--text-muted)', marginTop:12, lineHeight:1.5}}>
            Нажимая «Оплатить», вы соглашаетесь с офертой и обработкой ПДн по 152-ФЗ.
          </div>
        </div>
      </aside>
    </div>
  );
}

// ============== 4. CHECKOUT (3 steps) ==============
function ScreenCheckout({ goto, mobile }) {
  const [step, setStep] = uS_s2(1);
  const [ingameId, setIngameId] = uS_s2('AC-7782341');
  const [method, setMethod] = uS_s2('mir');
  const [email, setEmail] = uS_s2('demo@example.com');
  const [agree152, setAgree152] = uS_s2(true);
  const [agree54, setAgree54] = uS_s2(true);
  const [promo, setPromo] = uS_s2('');
  const [paying, setPaying] = uS_s2(false);
  const product = MOCK_GAMES[0].products[2]; // 1200 Кристаллов
  const game = MOCK_GAMES[0];
  const validId = /^[A-Z]{2}-\d{6,}$/.test(ingameId);
  const promoOk = promo.toLowerCase() === 'demo10';
  const total = Math.round(product.price * (promoOk ? 0.9 : 1));

  const handlePay = () => {
    setPaying(true);
    setTimeout(() => goto('success'), 1800);
  };

  const Steps = () => (
    <div style={{display:'flex', alignItems:'center', gap: mobile?6:12, marginBottom: 24}}>
      {[1,2,3].map(n => (
        <Fragment key={n}>
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            <div style={{
              width: 28, height: 28, borderRadius:'50%',
              background: step >= n ? 'var(--n-900)' : 'var(--n-150)',
              color: step >= n ? '#fff' : 'var(--text-muted)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:13, fontWeight:700, flexShrink:0,
            }}>
              {step > n ? <IconCheck size={14}/> : n}
            </div>
            {!mobile && <span style={{fontSize:13, fontWeight: step===n?600:500, color: step>=n?'var(--text)':'var(--text-muted)'}}>
              {n===1?'In-game ID':n===2?'Способ оплаты':'Подтверждение'}
            </span>}
          </div>
          {n<3 && <div style={{flex:1, height:2, background: step>n ? 'var(--n-900)' : 'var(--n-150)'}}/>}
        </Fragment>
      ))}
    </div>
  );

  return (
    <div style={{background:'var(--bg)', minHeight:'100%'}}>
      <StorefrontHeader goto={goto} mobile={mobile} currentScreen=""/>
      <div style={{maxWidth: 960, margin:'0 auto', padding: mobile?'16px':'32px'}}>
        <button onClick={()=>goto('game', game.slug)} className="btn btn-ghost btn-sm" style={{marginBottom: 16}}>
          <IconChevL size={14}/> Вернуться в магазин
        </button>
        <h1 className="display" style={{fontSize: mobile?24:32, fontWeight:700, margin:'0 0 24px', letterSpacing:'-0.02em'}}>Оформление заказа</h1>

        <Steps/>

        <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 360px', gap: 24}}>
          <div>
            {step === 1 && (
              <div className="card" style={{padding: 24}}>
                <h3 style={{margin:'0 0 4px', fontSize:18, fontWeight:700}}>Введите ID в {game.title}</h3>
                <p style={{margin:'0 0 20px', fontSize:13, color:'var(--text-muted)'}}>Это идентификатор вашего персонажа. Найти его можно в настройках игры.</p>
                <label style={{fontSize:12, fontWeight:600, marginBottom:6, display:'block'}}>In-game ID</label>
                <input className="input" placeholder="AC-1234567" value={ingameId} onChange={e=>setIngameId(e.target.value.toUpperCase())} style={{fontFamily:'var(--font-mono)', letterSpacing:'0.05em', marginBottom: 16}}/>
                {validId && (
                  <div style={{padding:12, background:'var(--success-bg)', borderRadius:'var(--r-4)', marginBottom: 16, display:'flex', gap:12, alignItems:'center'}}>
                    <Avatar name="Игрок 42" accent={game.accent}/>
                    <div style={{flex:1}}>
                      <div style={{fontSize:11, color:'#047857', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em'}}>Куда уйдёт товар</div>
                      <div style={{fontWeight:600, fontSize:14}}>Игрок_42 · Уровень 25 · Сервер RU-1</div>
                    </div>
                    <IconCheck style={{color:'var(--success)'}} size={18}/>
                  </div>
                )}
                <button onClick={()=>setStep(2)} disabled={!validId} className="btn btn-primary btn-lg" style={{width:'100%', opacity:validId?1:0.4, cursor:validId?'pointer':'not-allowed'}}>
                  Продолжить <IconArrowR size={14}/>
                </button>
              </div>
            )}
            {step === 2 && (
              <div className="card" style={{padding: 24}}>
                <h3 style={{margin:'0 0 4px', fontSize:18, fontWeight:700}}>Способ оплаты</h3>
                <p style={{margin:'0 0 20px', fontSize:13, color:'var(--text-muted)'}}>Все методы безопасны и проходят через ЮKassa.</p>
                <div style={{display:'grid', gridTemplateColumns: mobile?'1fr 1fr':'repeat(2,1fr)', gap: 10}}>
                  {[
                    ['mir','Мир','Карта Visa/MC/Мир',<PayLogo kind="mir"/>],
                    ['sbp','СБП','Банковским переводом',<PayLogo kind="sbp"/>],
                    ['sberpay','SberPay','Через приложение Сбера',<PayLogo kind="sberpay"/>],
                    ['yandexpay','Yandex Pay','Yandex кошелёк',<PayLogo kind="yandexpay"/>],
                  ].map(([k,n,d,logo]) => (
                    <button key={k} onClick={()=>setMethod(k)} className="card" style={{
                      padding: 14, textAlign:'left', cursor:'pointer',
                      borderColor: method===k ? 'var(--n-900)' : 'var(--border)',
                      borderWidth: method===k ? 2 : 1,
                      background: method===k ? 'var(--n-50)' : 'var(--surface)',
                    }}>
                      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 8}}>
                        {logo}
                        {method===k && <IconCheck size={16} style={{color:'var(--n-900)'}}/>}
                      </div>
                      <div style={{fontWeight:600, fontSize:14}}>{n}</div>
                      <div style={{fontSize:11, color:'var(--text-muted)', marginTop:2}}>{d}</div>
                    </button>
                  ))}
                </div>
                <div style={{marginTop: 20, display:'flex', gap:8}}>
                  <button onClick={()=>setStep(1)} className="btn btn-secondary"><IconChevL size={14}/> Назад</button>
                  <button onClick={()=>setStep(3)} className="btn btn-primary btn-lg" style={{flex:1}}>Продолжить <IconArrowR size={14}/></button>
                </div>
              </div>
            )}
            {step === 3 && (
              <div className="card" style={{padding: 24}}>
                <h3 style={{margin:'0 0 20px', fontSize:18, fontWeight:700}}>Подтверждение и оплата</h3>

                {method === 'mir' && (
                  <div style={{display:'flex', flexDirection:'column', gap:12, marginBottom: 16}}>
                    <input className="input" placeholder="Номер карты" defaultValue="2200 •••• •••• 4421" style={{fontFamily:'var(--font-mono)'}}/>
                    <div style={{display:'flex', gap:12}}>
                      <input className="input" placeholder="ММ/ГГ" defaultValue="12/28" style={{fontFamily:'var(--font-mono)', flex:1}}/>
                      <input className="input" placeholder="CVV" type="password" defaultValue="•••" style={{fontFamily:'var(--font-mono)', flex:1}}/>
                    </div>
                  </div>
                )}
                {method === 'sbp' && (
                  <div style={{padding: 24, background:'var(--n-50)', borderRadius:'var(--r-4)', display:'flex', gap:16, alignItems:'center', marginBottom: 16}}>
                    <div style={{width: 100, height: 100, background:'#fff', border:'1px solid var(--border)', borderRadius:'var(--r-4)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                      <IconQrCode size={56} style={{color:'var(--n-900)'}}/>
                    </div>
                    <div style={{fontSize:13, color:'var(--text-soft)', lineHeight:1.5}}>
                      Отсканируйте QR-код в приложении вашего банка или нажмите «Оплатить» — мы откроем ваше банковское приложение.
                    </div>
                  </div>
                )}
                {(method === 'sberpay' || method === 'yandexpay') && (
                  <div style={{padding: 16, background:'var(--n-50)', borderRadius:'var(--r-4)', marginBottom: 16, fontSize:13, color:'var(--text-soft)'}}>
                    После нажатия «Оплатить» вы будете перенаправлены в приложение {method==='sberpay'?'Сбера':'Яндекса'} для подтверждения.
                  </div>
                )}

                <label style={{fontSize:12, fontWeight:600, marginBottom:6, display:'block'}}>E-mail для чека (54-ФЗ)</label>
                <div style={{position:'relative', marginBottom: 16}}>
                  <IconMail style={{position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:'var(--n-400)'}}/>
                  <input className="input" value={email} onChange={e=>setEmail(e.target.value)} style={{paddingLeft:36}}/>
                </div>

                <label style={{fontSize:12, fontWeight:600, marginBottom:6, display:'block'}}>Промокод</label>
                <div style={{display:'flex', gap:8, marginBottom: 16}}>
                  <input className="input" placeholder="DEMO10" value={promo} onChange={e=>setPromo(e.target.value)} style={{flex:1, textTransform:'uppercase'}}/>
                  {promoOk && <span className="badge badge-success" style={{alignSelf:'center'}}>−10% применено</span>}
                </div>

                <div style={{display:'flex', flexDirection:'column', gap: 8, padding: 12, background:'var(--n-50)', borderRadius:'var(--r-4)', marginBottom: 16}}>
                  <label style={{fontSize:12, display:'flex', gap:8, alignItems:'flex-start', cursor:'pointer'}}>
                    <input type="checkbox" checked={agree152} onChange={e=>setAgree152(e.target.checked)} style={{marginTop:2, accentColor:'var(--n-900)'}}/>
                    <span>Согласен с обработкой персональных данных по <strong>152-ФЗ</strong> и публичной офертой</span>
                  </label>
                  <label style={{fontSize:12, display:'flex', gap:8, alignItems:'flex-start', cursor:'pointer'}}>
                    <input type="checkbox" checked={agree54} onChange={e=>setAgree54(e.target.checked)} style={{marginTop:2, accentColor:'var(--n-900)'}}/>
                    <span>Согласен на отправку фискального чека по <strong>54-ФЗ</strong> на e-mail</span>
                  </label>
                </div>

                <div style={{display:'flex', gap:8}}>
                  <button onClick={()=>setStep(2)} className="btn btn-secondary" disabled={paying}><IconChevL size={14}/> Назад</button>
                  <button onClick={handlePay} disabled={!agree152 || !agree54 || paying} className="btn btn-accent btn-lg" style={{flex:1, opacity:(agree152&&agree54&&!paying)?1:0.5}}>
                    {paying ? <><div className="spin" style={{width:14, height:14, border:'2px solid currentColor', borderRightColor:'transparent', borderRadius:'50%', animation:'spin 0.7s linear infinite'}}/> Обработка...</> : <>Оплатить {fmtNum(total)} ₽ <IconLock size={14}/></>}
                  </button>
                </div>
                <style>{`@keyframes spin { to {transform: rotate(360deg);} }`}</style>
              </div>
            )}
          </div>

          {/* Order summary */}
          <aside>
            <div className="card" style={{padding: 16, position: mobile?'static':'sticky', top: 80}}>
              <div style={{fontSize:12, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600, marginBottom:12}}>Ваш заказ</div>
              <div style={{display:'flex', gap: 12, marginBottom:16, paddingBottom: 16, borderBottom:'1px solid var(--border)'}}>
                <div style={{width:56, height:56, borderRadius:'var(--r-3)', overflow:'hidden', flexShrink:0}}>
                  <GameCover slug={game.slug} accent={game.accent} accent2={game.accent2}/>
                </div>
                <div style={{flex:1}}>
                  <div style={{fontSize:11, color:'var(--text-muted)'}}>{game.title}</div>
                  <div style={{fontWeight:600, fontSize:14}}>{product.name}</div>
                  <div style={{fontSize:11, color:'var(--text-muted)', marginTop:2}}>ID: {ingameId}</div>
                </div>
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:8, fontSize:13, marginBottom: 16}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>Товар</span><span className="tnum">{fmtNum(product.price)} ₽</span></div>
                {promoOk && <div style={{display:'flex', justifyContent:'space-between', color:'var(--success)'}}><span>Промокод DEMO10</span><span className="tnum">−{fmtNum(product.price - total)} ₽</span></div>}
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>Комиссия</span><span style={{color:'var(--text-muted)'}}>0 ₽</span></div>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', paddingTop:12, borderTop:'1px solid var(--border)'}}>
                <span style={{fontWeight:600}}>Итого</span>
                <span style={{fontSize:24, fontWeight:800, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(total)} ₽</span>
              </div>
              <div style={{marginTop:16, padding:12, background:'var(--brand-50)', borderRadius:'var(--r-4)', fontSize:11, color:'var(--brand-800)', display:'flex', gap:8, alignItems:'flex-start'}}>
                <IconShield2 size={14} style={{flexShrink:0, marginTop:1}}/>
                <span>Платёж проходит через <strong>ЮKassa</strong>. Чек по 54-ФЗ автоматически на e-mail.</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

// ============== 5. SUCCESS ==============
function ScreenSuccess({ goto, mobile, webhookState='ok' }) {
  const [stage, setStage] = uS_s2(0);
  const product = MOCK_GAMES[0].products[2];
  const game = MOCK_GAMES[0];
  uE_s2(()=>{
    if (webhookState === 'ok') {
      const t1 = setTimeout(()=>setStage(1), 700);
      const t2 = setTimeout(()=>setStage(2), 1800);
      const t3 = setTimeout(()=>setStage(3), 2900);
      return ()=>{clearTimeout(t1); clearTimeout(t2); clearTimeout(t3);};
    }
    if (webhookState === 'pending') {
      const t1 = setTimeout(()=>setStage(1), 700);
      const t2 = setTimeout(()=>setStage(2), 1800);
      return ()=>{clearTimeout(t1); clearTimeout(t2);};
    }
  }, [webhookState]);

  const steps = [
    { label:'Платёж проведён', sub:'ЮKassa подтвердила', done: stage>=1, icon: <IconCheck size={14}/> },
    { label:'Webhook отправлен',  sub:'Сигнал в игру', done: stage>=2, icon: <IconWebhook size={14}/> },
    { label: webhookState==='fail'?'Webhook не доставлен':'Доставлено в игру', sub: webhookState==='fail'?'Перезапуск через 12 сек...':'Товар уже в инвентаре', done: stage>=3 && webhookState!=='fail', error: webhookState==='fail' && stage>=3, icon: <IconBox size={14}/> },
  ];

  return (
    <div style={{background:'var(--bg)', minHeight:'100%'}}>
      <StorefrontHeader goto={goto} mobile={mobile} currentScreen=""/>
      <div style={{maxWidth: 720, margin:'0 auto', padding: mobile?'24px 16px':'48px 32px'}}>
        <div className="card" style={{padding: mobile?24:40, textAlign:'center'}}>
          <div style={{
            width: 80, height: 80, borderRadius:'50%',
            background: webhookState==='fail' ? 'var(--danger-bg)' : 'var(--success-bg)',
            color: webhookState==='fail' ? 'var(--danger)' : 'var(--success)',
            display:'flex', alignItems:'center', justifyContent:'center',
            margin:'0 auto 20px', position:'relative',
          }}>
            <IconCheck size={40} stroke={2.5}/>
            <svg style={{position:'absolute', inset:-4}} viewBox="0 0 88 88">
              <circle cx="44" cy="44" r="42" fill="none" stroke={webhookState==='fail'?'var(--danger)':'var(--success)'} strokeWidth="2" strokeDasharray="264" strokeDashoffset="0" style={{animation:'dash 1.2s ease-out'}}/>
            </svg>
          </div>
          <h1 className="display" style={{fontSize: mobile?24:32, fontWeight:800, margin:'0 0 8px', letterSpacing:'-0.02em'}}>Платёж успешен!</h1>
          <p style={{margin:0, color:'var(--text-soft)', fontSize:14}}>Чек отправлен на demo@example.com</p>

          <div className="card" style={{padding:16, marginTop:24, background:'var(--n-25)', textAlign:'left'}}>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
              <div style={{width:48, height:48, borderRadius:'var(--r-3)', overflow:'hidden'}}>
                <GameCover slug={game.slug} accent={game.accent} accent2={game.accent2}/>
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:14}}>{product.name}</div>
                <div style={{fontSize:12, color:'var(--text-muted)'}}>{game.title} · ID: AC-7782341</div>
              </div>
              <div style={{fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(product.price)} ₽</div>
            </div>

            <div style={{paddingTop:16, borderTop:'1px solid var(--border)'}}>
              <div style={{fontSize:11, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Доставка в игру</div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                {steps.map((s,i) => (
                  <div key={i} style={{display:'flex', alignItems:'center', gap:12}}>
                    <div style={{
                      width:28, height:28, borderRadius:'50%',
                      background: s.done ? 'var(--success)' : s.error ? 'var(--danger)' : 'var(--n-150)',
                      color: (s.done||s.error) ? '#fff' : 'var(--text-muted)',
                      display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                      transition: 'all .25s',
                    }}>
                      {s.done ? <IconCheck size={14} stroke={2.5}/> : s.error ? <IconX size={14} stroke={2.5}/> : (i === stage ? <div style={{width:8, height:8, background:'currentColor', borderRadius:'50%', animation:'pulse 1.2s infinite'}}/> : s.icon)}
                    </div>
                    <div style={{flex:1}}>
                      <div style={{fontSize:13, fontWeight:600, color: (s.done||s.error)?'var(--text)':'var(--text-muted)'}}>{s.label}</div>
                      <div style={{fontSize:11, color:'var(--text-muted)'}}>{s.sub}</div>
                    </div>
                    {i === stage && !s.done && !s.error && <div style={{fontSize:11, color:'var(--info)', fontWeight:500}}>в процессе</div>}
                  </div>
                ))}
              </div>
              <style>{`@keyframes pulse { 0%,100% {transform:scale(1); opacity:1;} 50% {transform:scale(1.4); opacity:0.5;} } @keyframes dash { from {stroke-dashoffset: 264;} }`}</style>
            </div>
          </div>

          <div style={{display:'flex', gap:8, marginTop:24, flexDirection: mobile?'column':'row'}}>
            <button onClick={()=>goto('account')} className="btn btn-secondary btn-lg" style={{flex:1}}><IconReceipt size={14}/> История покупок</button>
            <button onClick={()=>goto('catalog')} className="btn btn-primary btn-lg" style={{flex:1}}>В каталог <IconArrowR size={14}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============== 6. ACCOUNT ==============
function ScreenAccount({ goto, mobile }) {
  const [section, setSection] = uS_s2('subs');
  const [confirmCancel, setConfirmCancel] = uS_s2(null);

  const sections = [
    { id:'games', label:'Мои игры', icon:<IconHome size={14}/> },
    { id:'subs',  label:'Подписки', icon:<IconRefresh size={14}/> },
    { id:'orders',label:'Покупки',  icon:<IconReceipt size={14}/> },
    { id:'fav',   label:'Избранное',icon:<IconHeart size={14}/> },
    { id:'ids',   label:'In-game IDs', icon:<IconUser size={14}/> },
    { id:'cards', label:'Карты',    icon:<IconCard size={14}/> },
  ];

  const subs = [
    { game: MOCK_GAMES[0], product: MOCK_GAMES[0].products[5], next: '21 мая 2026', status:'active' },
    { game: MOCK_GAMES[5], product: MOCK_GAMES[5].products[1], next: '12 мар 2027', status:'active' },
    { game: MOCK_GAMES[4], product: MOCK_GAMES[4].products[0], next: '—', status:'cancel', cancelDate:'2 мая 2026' },
  ];

  return (
    <div style={{background:'var(--bg)', minHeight:'100%'}}>
      <StorefrontHeader goto={goto} mobile={mobile} currentScreen="account"/>
      <div style={{maxWidth: 1200, margin:'0 auto', padding: mobile?'16px':'32px'}}>
        <div style={{display:'flex', alignItems:'center', gap:16, marginBottom: 24}}>
          <Avatar name="Игрок Демо" size={mobile?44:56} accent="var(--n-900)"/>
          <div>
            <h1 className="display" style={{fontSize: mobile?20:28, fontWeight:700, margin:0, letterSpacing:'-0.02em'}}>Игрок Демо</h1>
            <div style={{fontSize:13, color:'var(--text-muted)'}}>demo@example.com · С 12 янв 2025</div>
          </div>
        </div>

        <div style={{display:'flex', gap: 24, flexDirection: mobile?'column':'row'}}>
          <aside style={{width: mobile?'100%':220, flexShrink:0}}>
            <nav style={{display:'flex', flexDirection: mobile?'row':'column', gap: 2, overflowX: mobile?'auto':'visible'}}>
              {sections.map(s => (
                <button key={s.id} onClick={()=>setSection(s.id)} style={{
                  display:'flex', alignItems:'center', gap:10,
                  padding: mobile?'8px 12px':'10px 12px',
                  borderRadius:'var(--r-3)',
                  background: section===s.id ? 'var(--n-100)' : 'transparent',
                  color: section===s.id ? 'var(--text)' : 'var(--text-soft)',
                  fontWeight: section===s.id ? 600 : 500,
                  fontSize:13, whiteSpace:'nowrap', textAlign:'left',
                }}>
                  {s.icon}{s.label}
                </button>
              ))}
            </nav>
          </aside>
          <div style={{flex:1, minWidth:0}}>
            {section === 'subs' && (
              <>
                <h2 className="display" style={{fontSize:20, fontWeight:700, margin:'0 0 12px'}}>Активные подписки</h2>
                <div style={{display:'flex', flexDirection:'column', gap:12}}>
                  {subs.map((s,i) => (
                    <div key={i} className="card" style={{padding:16, display:'flex', gap: 14, alignItems:'center', flexWrap:'wrap'}}>
                      <div style={{width:48, height:48, borderRadius:'var(--r-3)', overflow:'hidden', flexShrink:0}}>
                        <GameCover slug={s.game.slug} accent={s.game.accent} accent2={s.game.accent2}/>
                      </div>
                      <div style={{flex:1, minWidth: 200}}>
                        <div style={{fontWeight:600, fontSize:14}}>{s.product.name}</div>
                        <div style={{fontSize:12, color:'var(--text-muted)', marginTop:2}}>{s.game.title}</div>
                        {s.status === 'active' ? (
                          <div style={{fontSize:12, color:'var(--text-soft)', marginTop:6, display:'flex', alignItems:'center', gap:6}}>
                            <IconClock size={12}/> Следующее списание <strong>{s.next}</strong> · {fmtNum(s.product.price)} ₽
                          </div>
                        ) : (
                          <div style={{fontSize:12, color:'var(--warning)', marginTop:6}}>Отменена {s.cancelDate} · доступ до конца периода</div>
                        )}
                      </div>
                      <div style={{display:'flex', gap:8}}>
                        {s.status === 'active' ? <>
                          <button onClick={()=>setConfirmCancel(i)} className="btn btn-secondary btn-sm">Отменить</button>
                          <button className="btn btn-ghost btn-sm">Управлять</button>
                        </> : <span className="badge">Отменена</span>}
                      </div>
                    </div>
                  ))}
                </div>
                <div className="card" style={{padding: 14, marginTop:16, background:'var(--info-bg)', borderColor:'#BFDBFE', display:'flex', gap:12, alignItems:'flex-start', fontSize:12, color:'#1E40AF', lineHeight:1.5}}>
                  <IconInfo size={16} style={{flexShrink:0, marginTop:1}}/>
                  <span><strong>ст. 26.1 ЗоЗПП:</strong> Отмена подписки в один клик — это право, гарантированное законом. Никаких писем в поддержку.</span>
                </div>

                {/* Cancel modal */}
                {confirmCancel !== null && (
                  <div style={{position:'fixed', inset:0, background:'rgba(15,23,42,.5)', display:'flex', alignItems:'center', justifyContent:'center', zIndex: 100, padding:16}} onClick={()=>setConfirmCancel(null)}>
                    <div className="card" style={{padding:24, maxWidth: 420, width:'100%'}} onClick={e=>e.stopPropagation()}>
                      <h3 style={{margin:'0 0 8px', fontSize:18, fontWeight:700}}>Отменить подписку?</h3>
                      <p style={{margin:'0 0 20px', fontSize:14, color:'var(--text-soft)'}}>Доступ сохранится до <strong>{subs[confirmCancel].next}</strong>. Никаких удержаний.</p>
                      <div style={{display:'flex', gap:8}}>
                        <button onClick={()=>setConfirmCancel(null)} className="btn btn-secondary" style={{flex:1}}>Передумать</button>
                        <button onClick={()=>setConfirmCancel(null)} className="btn btn-destructive" style={{flex:1}}>Да, отменить</button>
                      </div>
                    </div>
                  </div>
                )}
              </>
            )}
            {section === 'games' && (
              <div style={{display:'grid', gridTemplateColumns: mobile?'1fr 1fr':'repeat(3, 1fr)', gap:12}}>
                {MOCK_GAMES.slice(0,6).map(g => (
                  <button key={g.slug} onClick={()=>goto('game', g.slug)} className="card lift" style={{padding:0, overflow:'hidden', textAlign:'left'}}>
                    <div style={{aspectRatio:'16/9'}}><GameCover slug={g.slug} accent={g.accent} accent2={g.accent2}/></div>
                    <div style={{padding:12}}>
                      <div style={{fontWeight:600, fontSize:13}}>{g.title}</div>
                      <div style={{fontSize:11, color:'var(--text-muted)', marginTop:4}}>3 покупки · последняя 12 апр</div>
                    </div>
                  </button>
                ))}
              </div>
            )}
            {section === 'orders' && (
              <div className="card" style={{padding:0, overflow:'hidden'}}>
                <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
                  <thead style={{background:'var(--n-50)', textAlign:'left'}}>
                    <tr>
                      <th style={{padding:'10px 14px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--text-muted)'}}>Дата</th>
                      <th style={{padding:'10px 14px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--text-muted)'}}>Игра / товар</th>
                      <th style={{padding:'10px 14px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--text-muted)', textAlign:'right'}}>Сумма</th>
                      <th style={{padding:'10px 14px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--text-muted)'}}>Статус</th>
                      {!mobile && <th style={{padding:'10px 14px', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--text-muted)'}}>Чек</th>}
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ['03 мая', MOCK_GAMES[0], '1200 Кристаллов', 1690, 'paid'],
                      ['28 апр', MOCK_GAMES[5], 'Premium 1 год', 3990, 'paid'],
                      ['12 апр', MOCK_GAMES[0], 'Боевой пропуск', 590, 'paid'],
                      ['10 апр', MOCK_GAMES[2], 'Топливо ×100', 199, 'paid'],
                      ['02 апр', MOCK_GAMES[4], 'Без рекламы', 199, 'refund'],
                    ].map(([d,g,p,s,st],i) => (
                      <tr key={i} style={{borderTop:'1px solid var(--border)'}}>
                        <td style={{padding:'10px 14px', color:'var(--text-muted)'}} className="tnum">{d}</td>
                        <td style={{padding:'10px 14px'}}><strong>{g.title}</strong> · {p}</td>
                        <td style={{padding:'10px 14px', textAlign:'right', fontWeight:600}} className="tnum">{fmtNum(s)} ₽</td>
                        <td style={{padding:'10px 14px'}}><span className={'badge ' + (st==='refund'?'badge-warning':'badge-success')}>{st==='refund'?'Возврат':'Оплачено'}</span></td>
                        {!mobile && <td style={{padding:'10px 14px'}}><button className="btn btn-ghost btn-sm"><IconExternal size={12}/> ОФД</button></td>}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            {section === 'ids' && (
              <div style={{display:'flex', flexDirection:'column', gap:8}}>
                {[
                  ['AC-7782341', MOCK_GAMES[0]],
                  ['FC-pro-9921', MOCK_GAMES[5]],
                  ['KR-441098',  MOCK_GAMES[3]],
                ].map(([id,g],i) => (
                  <div key={i} className="card" style={{padding:14, display:'flex', alignItems:'center', gap:12}}>
                    <div style={{width:36, height:36, borderRadius:'var(--r-3)', overflow:'hidden'}}>
                      <GameCover slug={g.slug} accent={g.accent} accent2={g.accent2}/>
                    </div>
                    <div style={{flex:1}}>
                      <div style={{fontWeight:600, fontSize:14}}>{g.title}</div>
                      <div style={{fontSize:12, color:'var(--text-muted)', fontFamily:'var(--font-mono)'}}>{id}</div>
                    </div>
                    <button className="btn btn-ghost btn-sm"><IconCopy size={14}/></button>
                    <button className="btn btn-ghost btn-sm"><IconX size={14}/></button>
                  </div>
                ))}
                <button className="card lift" style={{padding:14, borderStyle:'dashed', display:'flex', alignItems:'center', gap:8, color:'var(--text-soft)', fontSize:13, justifyContent:'center'}}>
                  <IconPlus size={14}/> Добавить ID
                </button>
              </div>
            )}
            {(section === 'fav' || section === 'cards') && (
              <div className="card" style={{padding:48, textAlign:'center'}}>
                <div style={{fontSize:32, marginBottom:8}}>{section==='fav'?'❤':'💳'}</div>
                <div style={{fontWeight:600, marginBottom:4}}>Пока пусто</div>
                <div style={{fontSize:13, color:'var(--text-muted)'}}>Добавьте {section==='fav'?'игры в избранное':'карту для быстрой оплаты'}</div>
              </div>
            )}
          </div>
        </div>
      </div>
      <StorefrontFooter mobile={mobile}/>
    </div>
  );
}

window.ScreenGame = ScreenGame;
window.ScreenCheckout = ScreenCheckout;
window.ScreenSuccess = ScreenSuccess;
window.ScreenAccount = ScreenAccount;