// Stats screen — My Stats + Leaderboard tabs
// All helper components inlined so no external dependencies

function StatsScreen() {
  const T = window.T;
  const [tab, setTab] = React.useState('my');

  return (
    <Content>
      <AppHeader left={<PageWordmark text="STATS"/>}/>
      <div style={{display:'flex', gap:8, marginBottom:18}}>
        {['my','board'].map(id => (
          <button key={id} onClick={() => setTab(id)} style={{
            flex:1, padding:'10px 0',
            background: tab === id ? 'rgba(232,184,32,0.12)' : 'transparent',
            border:`1px solid ${tab === id ? T.gold600 : T.border}`,
            borderRadius:10, fontFamily:'DM Sans', fontSize:13, fontWeight:700,
            color: tab === id ? T.gold400 : T.textSec, cursor:'pointer',
          }}>{id === 'my' ? 'My Stats' : 'Leaderboard'}</button>
        ))}
      </div>
      {tab === 'my' ? <MyStatsPanel/> : <LeaderboardPanel/>}
    </Content>
  );
}

// ─── My Stats ────────────────────────────────────────────────────
function MyStatsPanel() {
  const T = window.T;
  const [sessions, setSessions] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let mounted = true;
    window.fetchMySessions()
      .then(data => { if (mounted) setSessions(data || []); })
      .catch(e => { if (mounted) setError(e.message || 'Failed to load'); });
    return () => { mounted = false; };
  }, []);

  const stats = React.useMemo(() => {
    if (!sessions) return null;
    const xi = sessions.filter(s => s.mode === 'xi');
    const draft = sessions.filter(s => s.mode === 'draft');

    const xiCorrect = xi.reduce((n, s) => n + (s.metadata?.guessed_count || 0), 0);
    const xiPossible = xi.reduce((n, s) => n + (s.metadata?.total_starters || 22), 0);
    const xiBest = xi.reduce((best, s) => {
      const acc = s.metadata?.total_starters
        ? (s.metadata.guessed_count || 0) / s.metadata.total_starters : 0;
      return acc > (best?.acc || 0) ? { acc, session: s } : best;
    }, null);
    const xiFastest = xi
      .filter(s => s.metadata?.guessed_count === s.metadata?.total_starters)
      .reduce((f, s) => {
        const t = 120 - (s.metadata.time_left || 0);
        return (!f || t < f) ? t : f;
      }, null);

    const draftBest = draft.reduce((best, s) => {
      const c = s.metadata?.combined_score ?? ((s.metadata?.average_rating||0)+(s.metadata?.chemistry||0));
      return Math.max(best, c);
    }, 0);
    const draftAvg = draft.length > 0
      ? Math.round(draft.reduce((sum, s) => {
          return sum + (s.metadata?.combined_score ?? ((s.metadata?.average_rating||0)+(s.metadata?.chemistry||0)));
        }, 0) / draft.length)
      : 0;

    return {
      total: sessions.length,
      xi: {
        total: xi.length,
        avgAcc: xiPossible > 0 ? Math.round((xiCorrect/xiPossible)*100) : 0,
        best: xiBest,
        fastest: xiFastest,
      },
      draft: {
        total: draft.length,
        bestCombined: draftBest,
        avgCombined: draftAvg,
        bestRating: draft.reduce((b, s) => Math.max(b, s.metadata?.average_rating||0), 0),
        bestChem: draft.reduce((b, s) => Math.max(b, s.metadata?.chemistry||0), 0),
      },
    };
  }, [sessions]);

  if (error) return <div style={{color:window.T.red, fontSize:12, padding:16}}>{error}</div>;
  if (!stats) return <div style={{textAlign:'center', padding:'40px 0', color:window.T.textSec, fontSize:13}}>Loading…</div>;
  if (stats.total === 0) return (
    <div style={{textAlign:'center', padding:'60px 20px', background:T.card, borderRadius:18}}>
      <div style={{fontSize:44, marginBottom:14, opacity:0.6}}>📊</div>
      <div style={{fontSize:14, color:T.textSec, lineHeight:1.5}}>
        No games yet.<br/>Head to <span style={{color:T.gold400, fontWeight:600}}>Play</span> to start.
      </div>
    </div>
  );

  return (
    <>
      <SectionLabel size={13} top={4} bottom={10}>Overall</SectionLabel>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:20}}>
        <StatBox label="Total Games" value={stats.total} meta={`Draft: ${stats.draft.total} · XI: ${stats.xi.total}`}/>
        <StatBox label="Favorite Mode" value={stats.xi.total > stats.draft.total ? 'XI' : stats.draft.total > stats.xi.total ? 'DRAFT' : 'EVEN'} meta="Most games played"/>
      </div>

      {stats.xi.total > 0 && <>
        <SectionLabel size={13} top={4} bottom={10}>Name the XI</SectionLabel>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:20}}>
          <StatBox label="Games Played" value={stats.xi.total} meta={`${stats.xi.avgAcc}% avg accuracy`}/>
          <StatBox label="Best Score" value={`${Math.round((stats.xi.best?.acc||0)*100)}%`}
            meta={stats.xi.best ? `${stats.xi.best.session.metadata?.home_club||'?'} vs ${stats.xi.best.session.metadata?.away_club||'?'}` : ''}/>
          <StatBox label="Avg Accuracy" value={stats.xi.avgAcc} tail="%" meta="Across all games"/>
          {stats.xi.fastest !== null && <StatBox label="Fastest Perfect" value={stats.xi.fastest} tail="s" meta="All 22 guessed"/>}
        </div>
      </>}

      {stats.draft.total > 0 && <>
        <SectionLabel size={13} top={4} bottom={10}>Draft</SectionLabel>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:20}}>
          <StatBox label="Best Score" value={stats.draft.bestCombined} meta="Rating + Chem (of 199)"/>
          <StatBox label="Avg Score" value={stats.draft.avgCombined} meta={`${stats.draft.total} games`}/>
          <StatBox label="Best Rating" value={stats.draft.bestRating} color={window.T.greenLt} meta="Peak OVR"/>
          <StatBox label="Best Chem" value={stats.draft.bestChem} tail="%" color={window.T.greenLt} meta="Most linked"/>
        </div>
      </>}

      {sessions.length > 0 && <>
        <SectionLabel size={13} top={4} bottom={10}>Recent Activity</SectionLabel>
        {sessions.slice(0, 5).map(s => <RecentRow key={s.id} session={s}/>)}
      </>}
    </>
  );
}

function StatBox({ label, value, tail, meta, color }) {
  const T = window.T;
  return (
    <div style={{background:T.card, borderRadius:16, padding:16}}>
      <div style={{fontFamily:'DM Sans', fontSize:10, letterSpacing:'0.15em', color:T.textMute, textTransform:'uppercase', marginBottom:6}}>{label}</div>
      <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:30, letterSpacing:'0.04em', color:color||T.gold400, lineHeight:1}}>
        {value}{tail && <span style={{fontSize:18, color:T.textMute}}>{tail}</span>}
      </div>
      <div style={{fontSize:11, color:T.textSec, marginTop:6, minHeight:14}}>{meta}</div>
    </div>
  );
}

function RecentRow({ session }) {
  const T = window.T;
  const meta = session.metadata || {};
  const isXi = session.mode === 'xi';
  const title = isXi
    ? `XI · ${meta.home_club||'?'} vs ${meta.away_club||'?'}`
    : `Draft · ${meta.year||'?'}`;
  const value = isXi
    ? `${meta.guessed_count||0}/${meta.total_starters||'?'}`
    : (meta.combined_score ?? ((meta.average_rating||0)+(meta.chemistry||0))) || '—';
  const d = session.started_at ? new Date(session.started_at) : null;
  const when = d ? (() => {
    const diff = Math.round((new Date() - d) / 60000);
    if (diff < 1) return 'Just now';
    if (diff < 60) return `${diff}m ago`;
    if (diff < 1440) return `${Math.round(diff/60)}h ago`;
    return `${Math.round(diff/1440)}d ago`;
  })() : '';
  return (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 16px', background:T.card, borderRadius:14, marginBottom:8}}>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize:13, fontWeight:600, color:T.text, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{title}</div>
        <div style={{fontSize:11, color:T.textMute, marginTop:2}}>{when}</div>
      </div>
      <div style={{fontWeight:700, fontSize:15, color:T.gold400, marginLeft:12}}>{value}</div>
    </div>
  );
}

// ─── Leaderboard ─────────────────────────────────────────────────
function LeaderboardPanel() {
  const T = window.T;
  const BOARDS = [
    { id:'xi_best',     label:'XI Best',     desc:'Top single-game accuracy' },
    { id:'draft_best',  label:'Draft Best',  desc:'Top single-game score (of 199)' },
    { id:'xi_accuracy', label:'XI Avg',      desc:'Highest avg % correct' },
  ];
  const [board, setBoard] = React.useState('xi_best');
  const [sessions, setSessions] = React.useState(null);
  const [me, setMe] = React.useState(null);
  const [detail, setDetail] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let mounted = true;
    Promise.all([window.getCurrentUser(), window.fetchAllCompletedSessions()])
      .then(([user, sess]) => { if (mounted) { setMe(user); setSessions(sess || []); } })
      .catch(e => { if (mounted) setError(e.message || 'Failed to load'); });
    return () => { mounted = false; };
  }, []);

  const rows = React.useMemo(() => {
    if (!sessions) return null;

    if (board === 'xi_best') {
      const enriched = sessions
        .filter(s => s.mode === 'xi' && s.metadata?.total_starters > 0)
        .map(s => {
          const acc = (s.metadata.guessed_count||0) / s.metadata.total_starters;
          return { session:s, user_id:s.user_id, display_name:s.profile?.display_name||'player',
            pct:Math.round(acc*100), tiebreak:s.metadata.time_left||0,
            sub:`${s.metadata.home_club||'?'} vs ${s.metadata.away_club||'?'}`, value:`${Math.round(acc*100)}%` };
        })
        .sort((a,b) => b.pct !== a.pct ? b.pct - a.pct : b.tiebreak - a.tiebreak);
      return withRanks(enriched, r => `${r.pct}-${r.tiebreak}`);
    }

    if (board === 'draft_best') {
      const enriched = sessions
        .filter(s => s.mode === 'draft')
        .map(s => {
          const c = s.metadata?.combined_score ?? ((s.metadata?.average_rating||0)+(s.metadata?.chemistry||0));
          return { session:s, user_id:s.user_id, display_name:s.profile?.display_name||'player',
            score:c, sub:`${s.metadata?.year||'?'} · ${s.metadata?.formation||'?'}`, value:String(c) };
        })
        .sort((a,b) => b.score - a.score);
      return withRanks(enriched, r => String(r.score));
    }

    if (board === 'xi_accuracy') {
      const byUser = {};
      sessions.filter(s => s.mode === 'xi').forEach(s => {
        const uid = s.user_id;
        if (!byUser[uid]) byUser[uid] = { user_id:uid, display_name:s.profile?.display_name||'player', correct:0, total:0, games:0 };
        byUser[uid].correct += s.metadata?.guessed_count||0;
        byUser[uid].total += s.metadata?.total_starters||22;
        byUser[uid].games++;
      });
      const enriched = Object.values(byUser)
        .filter(u => u.total > 0)
        .map(u => ({ ...u, pct:Math.round((u.correct/u.total)*100), sub:`${u.games} games`, value:`${Math.round((u.correct/u.total)*100)}%`, session:null }))
        .sort((a,b) => b.pct - a.pct);
      return withRanks(enriched, r => String(r.pct));
    }
    return [];
  }, [sessions, board]);

  const cfg = BOARDS.find(b => b.id === board);
  const tappable = board === 'xi_best' || board === 'draft_best';

  if (error) return <div style={{color:T.red, fontSize:12, padding:16}}>{error}</div>;
  if (!sessions) return <div style={{textAlign:'center', padding:'40px 0', color:T.textSec, fontSize:13}}>Loading…</div>;

  const myRow = rows?.find(r => r.user_id === me?.id);

  return (
    <>
      <div className="no-scrollbar" style={{display:'flex', gap:8, marginBottom:12, overflowX:'auto', paddingBottom:4}}>
        {BOARDS.map(b => (
          <button key={b.id} onClick={() => setBoard(b.id)} style={{
            background:board===b.id?'rgba(232,184,32,0.15)':T.card,
            border:`1px solid ${board===b.id?T.gold600:T.border}`,
            borderRadius:100, padding:'7px 14px',
            fontSize:11, fontWeight:600, color:board===b.id?T.gold400:T.textSec,
            whiteSpace:'nowrap', cursor:'pointer', fontFamily:'DM Sans', flexShrink:0,
          }}>{b.label}</button>
        ))}
      </div>
      <div style={{fontSize:11, color:T.textMute, marginBottom:12}}>{cfg.desc}</div>

      {!rows || rows.length === 0 ? (
        <div style={{textAlign:'center', padding:'40px 20px', background:T.card, borderRadius:18}}>
          <div style={{fontSize:40, marginBottom:12, opacity:0.6}}>🏆</div>
          <div style={{fontSize:13, color:T.textSec}}>No scores yet. Play to get on the board.</div>
        </div>
      ) : (
        <>
          {myRow && myRow.rank > 20 && (
            <>
              <LBRow r={myRow} isMe tappable={tappable} onTap={() => myRow.session && setDetail({session:myRow.session, name:myRow.display_name})}/>
              <div style={{textAlign:'center', color:T.textMute, fontSize:10, fontFamily:'DM Sans', letterSpacing:'0.1em', padding:'6px 0 12px'}}>─── TOP 20 ───</div>
            </>
          )}
          {rows.slice(0,20).map((r,i) => (
            <LBRow key={`${r.user_id||r.session?.id}-${i}`} r={r} isMe={r.user_id===me?.id}
              tappable={tappable} onTap={() => r.session && setDetail({session:r.session, name:r.display_name})}/>
          ))}
        </>
      )}

      {detail && <SessionDetailModal session={detail.session} displayName={detail.name} onClose={() => setDetail(null)}/>}
    </>
  );
}

function withRanks(rows, keyFn) {
  let rank = 0, lastKey = null;
  rows.forEach((r,i) => {
    const k = keyFn(r);
    if (k !== lastKey) { rank = i+1; lastKey = k; }
    r.rank = rank;
  });
  return rows;
}

function LBRow({ r, isMe, tappable, onTap }) {
  const T = window.T;
  const top3 = r.rank <= 3;
  const initials = (r.display_name||'P').slice(0,2).toUpperCase();
  return (
    <div onClick={onTap} style={{
      display:'flex', alignItems:'center', gap:12,
      background:isMe?'rgba(232,184,32,0.08)':T.card,
      border:`1px solid ${isMe?T.gold600:'transparent'}`,
      borderRadius:14, padding:'12px 14px', marginBottom:8,
      cursor:tappable?'pointer':'default',
    }}>
      <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:18, width:32, textAlign:'center', color:top3?T.gold400:T.textMute}}>{r.rank}</div>
      <div style={{width:36, height:36, borderRadius:'50%', background:r.rank===1?`linear-gradient(135deg,${T.gold500},${T.gold600})`:T.navy600, display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:13, color:r.rank===1?T.navy900:T.text, flexShrink:0}}>{initials}</div>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize:14, fontWeight:600, color:T.text, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
          {isMe?`You · ${r.display_name}`:r.display_name}
        </div>
        <div style={{fontSize:10.5, color:T.textMute, marginTop:2, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r.sub}</div>
      </div>
      <div style={{display:'flex', alignItems:'center', gap:6}}>
        <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:18, color:T.gold400}}>{r.value}</div>
        {tappable && <div style={{color:T.textMute, fontSize:18}}>›</div>}
      </div>
    </div>
  );
}

// ─── Session detail modal ─────────────────────────────────────────
function SessionDetailModal({ session, displayName, onClose }) {
  const T = window.T;
  const mode = session.mode;
  const meta = session.metadata || {};
  const [guesses, setGuesses] = React.useState(null);
  const [loadingGuesses, setLoadingGuesses] = React.useState(mode === 'xi');

  React.useEffect(() => {
    if (mode !== 'xi') return;
    let mounted = true;
    window.fetchSessionGuesses(session.id)
      .then(rows => { if (mounted) setGuesses(rows); })
      .catch(e => console.error('Failed:', e))
      .finally(() => { if (mounted) setLoadingGuesses(false); });
    return () => { mounted = false; };
  }, [session.id]);

  return (
    <div onClick={onClose} style={{position:'fixed', inset:0, zIndex:100, background:'rgba(0,0,0,0.75)', display:'flex', alignItems:'flex-end', justifyContent:'center'}}>
      <div onClick={e => e.stopPropagation()} className="no-scrollbar" style={{
        background:T.navy900, borderRadius:'20px 20px 0 0', width:'100%', maxWidth:500,
        maxHeight:'85vh', overflowY:'auto',
        padding:'20px 20px max(40px, calc(40px + env(safe-area-inset-bottom)))',
        border:`1px solid ${T.border}`, borderBottom:'none',
      }}>
        <div style={{width:40, height:4, background:T.textMute, borderRadius:100, margin:'0 auto 18px', opacity:0.5}}/>
        <div style={{marginBottom:16}}>
          <div style={{fontSize:10.5, color:T.textMute, fontFamily:'DM Sans', letterSpacing:'0.18em', textTransform:'uppercase'}}>
            {mode==='xi'?'Name the XI · Game detail':'Draft · Squad detail'}
          </div>
          <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:22, color:T.text, marginTop:4}}>{displayName}</div>
        </div>

        {mode === 'xi' ? (
          <>
            <div style={{background:T.card, borderRadius:14, padding:'14px 16px', marginBottom:14}}>
              <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:15, color:T.text}}>{meta.home_club||'?'} vs {meta.away_club||'?'}</div>
              <div style={{fontSize:11, color:T.textSec, marginTop:2}}>{meta.competition} · {meta.match_date?new Date(meta.match_date).getFullYear():''}</div>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, marginBottom:18}}>
              {[
                {label:'Accuracy', value:`${meta.total_starters>0?Math.round(((meta.guessed_count||0)/meta.total_starters)*100):0}%`},
                {label:'Correct', value:`${meta.guessed_count||0}/${meta.total_starters||22}`},
                {label:'Time used', value:`${Math.floor((120-(meta.time_left||0))/60)}:${String((120-(meta.time_left||0))%60).padStart(2,'0')}`},
              ].map(({label,value}) => (
                <div key={label} style={{background:T.card, borderRadius:12, padding:'12px 10px', textAlign:'center'}}>
                  <div style={{fontSize:9, fontFamily:'DM Sans', letterSpacing:'0.15em', color:T.textMute, textTransform:'uppercase'}}>{label}</div>
                  <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:18, color:T.gold400, marginTop:4}}>{value}</div>
                </div>
              ))}
            </div>
            <div style={{fontFamily:'DM Sans', fontSize:10, letterSpacing:'0.18em', color:T.textMute, marginBottom:8, textTransform:'uppercase'}}>Guesses</div>
            {loadingGuesses && <div style={{color:T.textSec, fontSize:12, padding:'12px 0'}}>Loading…</div>}
            {!loadingGuesses && (!guesses||guesses.length===0) && <div style={{color:T.textSec, fontSize:12, padding:'12px 0'}}>No guesses recorded.</div>}
            {!loadingGuesses && guesses?.length > 0 && (
              <div style={{background:T.card, borderRadius:12, overflow:'hidden'}}>
                {guesses.map((g,i) => (
                  <div key={g.id} style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', borderBottom:i<guesses.length-1?`1px solid ${T.border}`:'none'}}>
                    <div style={{width:18, height:18, borderRadius:'50%', background:g.correct?'rgba(55,168,95,0.2)':'rgba(232,122,122,0.15)', border:`1.5px solid ${g.correct?'#37A85F':'#E87A7A'}`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                      {g.correct
                        ? <svg width="10" height="10" viewBox="0 0 24 24" fill="#37A85F"><path d="M9 16.2l-3.5-3.5a1 1 0 011.4-1.4L9 13.4l7.1-7.1a1 1 0 011.4 1.4L9 16.2z"/></svg>
                        : <svg width="10" height="10" viewBox="0 0 24 24" fill="#E87A7A"><path d="M18.3 5.7a1 1 0 00-1.4 0L12 10.6 7.1 5.7a1 1 0 10-1.4 1.4l4.9 4.9-4.9 4.9a1 1 0 101.4 1.4l4.9-4.9 4.9 4.9a1 1 0 001.4-1.4L13.4 12l4.9-4.9a1 1 0 000-1.4z"/></svg>}
                    </div>
                    <div style={{flex:1, fontSize:13, color:T.text, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{g.guess_text}</div>
                    <div style={{fontSize:10, color:T.textMute, fontFamily:'DM Sans'}}>
                      {Math.floor(g.seconds_elapsed/60)}:{String(g.seconds_elapsed%60).padStart(2,'0')}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </>
        ) : (
          <>
            <div style={{background:T.card, borderRadius:14, padding:'16px', marginBottom:14, textAlign:'center'}}>
              <div style={{fontSize:10.5, fontFamily:'DM Sans', letterSpacing:'0.18em', color:T.textMute}}>SCORE</div>
              <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:44, color:T.gold400, lineHeight:1, marginTop:4}}>
                {meta.combined_score||((meta.average_rating||0)+(meta.chemistry||0))}
                <span style={{fontSize:16, color:T.textMute}}> / 199</span>
              </div>
              <div style={{fontSize:11, color:T.textSec, marginTop:8}}>{meta.year||'?'} · {meta.formation||'?'} · {meta.average_rating||0} OVR · {meta.chemistry||0}% chem</div>
            </div>
            {(meta.picks||[]).length === 0
              ? <div style={{color:T.textSec, fontSize:12}}>Squad details not available for older sessions.</div>
              : <div style={{background:T.card, borderRadius:12, overflow:'hidden'}}>
                  {(meta.picks||[]).map((p,i) => (
                    <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', borderBottom:i<meta.picks.length-1?`1px solid ${T.border}`:'none'}}>
                      <div style={{width:42, fontFamily:'DM Sans', fontSize:10, color:T.textSec, flexShrink:0}}>{p.position}</div>
                      <div style={{flex:1, minWidth:0}}>
                        <div style={{fontSize:13, color:T.text, fontWeight:600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p.short_name}</div>
                        <div style={{fontSize:10.5, color:T.textMute, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p.club||''}</div>
                      </div>
                      <div style={{fontFamily:'Bakbak One, sans-serif', fontSize:16, color:T.gold400, width:30, textAlign:'right'}}>{p.overall}</div>
                    </div>
                  ))}
                </div>}
          </>
        )}

        <button onClick={onClose} style={{width:'100%', marginTop:18, padding:'12px', background:T.card, border:`1px solid ${T.border}`, borderRadius:12, color:T.text, fontFamily:'DM Sans', fontSize:13, fontWeight:600, cursor:'pointer'}}>Close</button>
      </div>
    </div>
  );
}

window.StatsScreen = StatsScreen;