// ============================================
// SETTINGS, SHOP, LEADERBOARD
// ============================================

function SettingsScreen({ navigate }) {
    const [tab, setTab] = React.useState("graphics");
    const [lang, setLang] = React.useState("pt");

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <TopBar navigate={navigate}/>
            <div style={{ position: "absolute", top: 88, left: 48, zIndex: 20 }}>
                <button className="back-btn" onClick={() => navigate("menu")}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.back(14) }}/><span>Menu</span>
                </button>
            </div>
            <div style={{ position: "relative", zIndex: 5, paddingTop: 110, paddingBottom: 40, paddingLeft: 48, paddingRight: 48, maxWidth: 1100, margin: "0 auto", height: "100%", display: "flex", flexDirection: "column" }}>
                <div style={{ marginBottom: 24 }}>
                    <div style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 6 }}>Configurações</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink-100)", letterSpacing: "0.03em", fontWeight: 600 }}>Preferências</div>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 24, flex: 1, minHeight: 0 }}>
                    {/* side nav */}
                    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                        {[
                            ["graphics", "Gráficos", "display"],
                            ["audio", "Áudio", "volume"],
                            ["controls", "Controles", "keyboard"],
                            ["language", "Idioma", "globe"],
                            ["account", "Conta", "user"],
                        ].map(([k,l,ic]) => (
                            <button key={k} onClick={()=>setTab(k)} className={`side-nav-btn ${tab===k?"sel":""}`}>
                                <span dangerouslySetInnerHTML={{ __html: window.Icon[ic](16) }}/>
                                <span>{l}</span>
                                <span style={{ marginLeft: "auto" }} dangerouslySetInnerHTML={{ __html: window.Icon.chevronRight(12) }}/>
                            </button>
                        ))}
                    </div>

                    <div className="panel" style={{ overflowY: "auto" }}>
                        <div className="panel-body" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
                            {tab === "graphics" && (<>
                                <SettingsRow label="Qualidade" desc="Presets gerais de renderização">
                                    <div className="seg"><button className="seg-btn">Baixa</button><button className="seg-btn">Média</button><button className="seg-btn sel">Alta</button><button className="seg-btn">Ultra</button></div>
                                </SettingsRow>
                                <SettingsRow label="Resolução" desc="Resolução da janela do jogo">
                                    <select className="select" style={{ width: 180 }} defaultValue="1920"><option>1280 × 720</option><option>1600 × 900</option><option value="1920">1920 × 1080</option><option>2560 × 1440</option><option>3840 × 2160</option></select>
                                </SettingsRow>
                                <SettingsRow label="Reflexos na mesa" desc="Reflexos em tempo real no feltro">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <SettingsRow label="Sombras de contato" desc="Sombras suaves entre bolas e mesa">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <SettingsRow label="Partículas de giz" desc="Efeito quando tacada aplica efeito">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <SettingsRow label="FPS Máximo" desc="Limite de quadros por segundo">
                                    <div className="seg"><button className="seg-btn">30</button><button className="seg-btn sel">60</button><button className="seg-btn">120</button><button className="seg-btn">Ilimitado</button></div>
                                </SettingsRow>
                                <SettingsRow label="V-Sync" desc="Sincronização vertical">
                                    <label className="toggle"><input type="checkbox"/><span className="toggle-slider"/></label>
                                </SettingsRow>
                            </>)}
                            {tab === "audio" && (<>
                                <SettingsRow label="Volume Geral" desc="Volume mestre do jogo"><div style={{ width: 220 }}><input className="slider" type="range" defaultValue="80"/></div></SettingsRow>
                                <SettingsRow label="Música" desc="Trilha ambiente de fundo"><div style={{ width: 220 }}><input className="slider" type="range" defaultValue="60"/></div></SettingsRow>
                                <SettingsRow label="Efeitos Sonoros" desc="Choque de bolas, tacada, apito"><div style={{ width: 220 }}><input className="slider" type="range" defaultValue="90"/></div></SettingsRow>
                                <SettingsRow label="Vozes do Anunciador" desc="Comentários durante a partida"><div style={{ width: 220 }}><input className="slider" type="range" defaultValue="70"/></div></SettingsRow>
                                <SettingsRow label="Multidão" desc="Aplausos e reações da plateia"><div style={{ width: 220 }}><input className="slider" type="range" defaultValue="50"/></div></SettingsRow>
                                <SettingsRow label="Chat por Voz" desc="Habilitar microfone em partidas online">
                                    <label className="toggle"><input type="checkbox"/><span className="toggle-slider"/></label>
                                </SettingsRow>
                            </>)}
                            {tab === "controls" && (<>
                                <SettingsRow label="Sensibilidade do Mouse" desc="Velocidade de mira"><div style={{ width: 220 }}><input className="slider" type="range" defaultValue="50"/></div></SettingsRow>
                                <SettingsRow label="Inversão Vertical" desc="Inverter eixo Y na câmera">
                                    <label className="toggle"><input type="checkbox"/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <SettingsRow label="Mira Assistida (Arcade)" desc="Linha guia de previsão de trajetória">
                                    <div className="seg"><button className="seg-btn">Off</button><button className="seg-btn sel">Básica</button><button className="seg-btn">Completa</button></div>
                                </SettingsRow>
                                <SettingsRow label="Tacada: Arrastar" desc="Como executar a tacada">
                                    <div className="seg"><button className="seg-btn">Clique</button><button className="seg-btn sel">Ctrl+Arrastar</button><button className="seg-btn">Espaço</button></div>
                                </SettingsRow>
                                <SettingsRow label="Zoom com Roda" desc="Aproximar/afastar com scroll">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <SettingsRow label="Vibração do Gamepad" desc="Feedback háptico">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                            </>)}
                            {tab === "language" && (
                                <div>
                                    <div className="field-label" style={{ marginBottom: 12 }}>Idioma da Interface</div>
                                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
                                        {[["pt","Português (BR)","🇧🇷"],["en","English","🇺🇸"],["es","Español","🇪🇸"],["fr","Français","🇫🇷"],["de","Deutsch","🇩🇪"],["ja","日本語","🇯🇵"]].map(([k,l,f]) => (
                                            <button key={k} onClick={()=>setLang(k)} className={`lang-btn ${lang===k?"sel":""}`}>
                                                <span style={{ fontSize: 22 }}>{f}</span>
                                                <span>{l}</span>
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            )}
                            {tab === "account" && (<>
                                <SettingsRow label="Nickname" desc="Seu nome exibido a outros jogadores">
                                    <input className="input" defaultValue="ShadowCue" style={{ width: 220 }}/>
                                </SettingsRow>
                                <SettingsRow label="E-mail" desc="Para recuperação e notificações">
                                    <input className="input" defaultValue="shadow@mastershot.com" style={{ width: 220 }} type="email"/>
                                </SettingsRow>
                                <SettingsRow label="País" desc="Exibido em rankings">
                                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                                        <CountryFlag code="BR"/>
                                        <select className="select" style={{ width: 180 }}><option>Brasil</option><option>Argentina</option><option>United States</option></select>
                                    </div>
                                </SettingsRow>
                                <SettingsRow label="Perfil público" desc="Outros podem ver suas estatísticas">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <SettingsRow label="Receber convites de amigos" desc="Permitir convites para partidas">
                                    <label className="toggle"><input type="checkbox" defaultChecked/><span className="toggle-slider"/></label>
                                </SettingsRow>
                                <div style={{ paddingTop: 14, borderTop: "1px solid var(--ink-700)", display: "flex", gap: 10 }}>
                                    <button className="btn-ghost">Alterar Senha</button>
                                    <button className="btn-ghost" style={{ color: "var(--loss-bright)", borderColor: "rgba(194,69,58,0.4)" }}>Sair da Conta</button>
                                </div>
                            </>)}
                        </div>
                    </div>
                </div>
            </div>

            <style>{`
                .side-nav-btn {
                    display: flex; align-items: center; gap: 12px;
                    padding: 12px 14px;
                    background: transparent;
                    border: 1px solid transparent;
                    border-radius: var(--r-sm);
                    color: var(--ink-300);
                    cursor: pointer;
                    font-size: 13px;
                    font-weight: 500;
                    letter-spacing: 0.04em;
                    text-align: left;
                    transition: all var(--t-fast);
                }
                .side-nav-btn:hover { color: var(--ink-100); background: var(--ink-900); }
                .side-nav-btn.sel {
                    background: linear-gradient(90deg, rgba(232,185,73,0.1), transparent);
                    color: var(--gold-300);
                    border-color: var(--gold-800);
                }
                .side-nav-btn.sel svg { color: var(--gold-400); }
                .lang-btn {
                    display: flex; align-items: center; gap: 10px;
                    padding: 14px 16px;
                    background: var(--ink-900);
                    border: 1px solid var(--ink-700);
                    border-radius: var(--r-sm);
                    color: var(--ink-200);
                    cursor: pointer;
                    transition: all var(--t-fast);
                    font-size: 13px;
                }
                .lang-btn:hover { border-color: var(--gold-700); }
                .lang-btn.sel { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-600); color: var(--gold-300); }
            `}</style>
        </div>
    );
}

function SettingsRow({ label, desc, children }) {
    return (
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, paddingBottom: 18, borderBottom: "1px solid var(--ink-800)" }}>
            <div>
                <div style={{ fontSize: 14, color: "var(--ink-100)", fontWeight: 500 }}>{label}</div>
                <div style={{ fontSize: 12, color: "var(--ink-400)", marginTop: 2 }}>{desc}</div>
            </div>
            <div style={{ flexShrink: 0 }}>{children}</div>
        </div>
    );
}

// === SHOP ===
function ShopScreen({ navigate }) {
    const { TABLES, CUES } = window.MastershotData;
    const [tab, setTab] = React.useState("tables");
    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <Particles count={8}/>
            <TopBar navigate={navigate}/>
            <div style={{ position: "absolute", top: 88, left: 48, zIndex: 20 }}>
                <button className="back-btn" onClick={() => navigate("menu")}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.back(14) }}/><span>Menu</span>
                </button>
            </div>
            <div style={{ position: "relative", zIndex: 5, paddingTop: 110, paddingBottom: 40, paddingLeft: 48, paddingRight: 48, maxWidth: 1400, margin: "0 auto", height: "100%", display: "flex", flexDirection: "column", gap: 20 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                    <div>
                        <div style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 6 }}>Loja</div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink-100)", letterSpacing: "0.03em", fontWeight: 600 }}>Cosméticos</div>
                    </div>
                    <button className="btn">+ Recarregar Moedas</button>
                </div>
                <div className="tabs">
                    {[["tables","Mesas"],["cues","Tacos"],["avatars","Avatares"],["bundles","Pacotes"]].map(([k,l]) => (
                        <button key={k} className={`tab ${tab===k?"active":""}`} onClick={()=>setTab(k)}>{l}</button>
                    ))}
                </div>
                <div style={{ flex: 1, overflowY: "auto", paddingRight: 8 }}>
                    {tab === "tables" && (
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
                            {TABLES.map(t => <ShopTableCard key={t.id} table={t}/>)}
                        </div>
                    )}
                    {tab === "cues" && (
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
                            {CUES.map(c => (
                                <div key={c.id} className="panel" style={{ padding: 20, opacity: c.unlocked === false ? 0.6 : 1 }}>
                                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                                        <div>
                                            <div style={{ fontFamily: "var(--font-display)", fontSize: 16, color: "var(--ink-100)", fontWeight: 600 }}>{c.name}</div>
                                            <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{c.tier}</div>
                                        </div>
                                        {c.owned && <span className="chip chip-gold">Possui</span>}
                                    </div>
                                    <div style={{ height: 18, background: "linear-gradient(90deg, #3a1d0f 0%, #7a421f 70%, #fce29a 85%, #a89368 100%)", borderRadius: "var(--r-full)", marginBottom: 14, boxShadow: "0 2px 4px rgba(0,0,0,0.4)" }}/>
                                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginBottom: 14 }}>
                                        {[["Força", c.power],["Precisão", c.accuracy],["Efeito", c.spin]].map(([l,v]) => (
                                            <div key={l} style={{ textAlign: "center" }}>
                                                <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--gold-300)" }}>{v}</div>
                                                <div style={{ fontSize: 10, color: "var(--ink-400)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{l}</div>
                                            </div>
                                        ))}
                                    </div>
                                    {!c.owned && (
                                        <button className="btn" style={{ width: "100%" }}>
                                            {c.chips ? `◆ ${c.chips.toLocaleString()}` : `$ ${c.price.toLocaleString()}`}
                                        </button>
                                    )}
                                </div>
                            ))}
                        </div>
                    )}
                    {tab === "avatars" && (
                        <div style={{ padding: 60, textAlign: "center", color: "var(--ink-400)" }}>
                            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--gold-400)", marginBottom: 10 }}>Em breve</div>
                            <div>Novos avatares semanalmente</div>
                        </div>
                    )}
                    {tab === "bundles" && (
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
                            {[
                                { n: "Pacote Cassino Noite", desc: "Mesa Obsidian + Taco Meucci + 10.000 moedas", price: 15000, old: 22500 },
                                { n: "Pacote Lenda Dourada", desc: "Mesa Vegas Gold + Taco Ivory + 5.000 fichas", price: 500, chips: true, old: 800 },
                            ].map((b,i) => (
                                <div key={i} className="panel" style={{ padding: 24, position: "relative", overflow: "hidden" }}>
                                    <div style={{ position: "absolute", top: 12, right: 12, padding: "4px 10px", background: "var(--g-gold)", color: "var(--ink-900)", fontSize: 10, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", borderRadius: "var(--r-full)" }}>-33%</div>
                                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--gold-300)", marginBottom: 6 }}>{b.n}</div>
                                    <div style={{ fontSize: 13, color: "var(--ink-200)", marginBottom: 16 }}>{b.desc}</div>
                                    <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                                        <button className="btn-cta">{b.chips ? "◆" : "$"} {b.price.toLocaleString()}</button>
                                        <span style={{ color: "var(--ink-400)", textDecoration: "line-through", fontSize: 13 }}>{b.chips ? "◆" : "$"} {b.old.toLocaleString()}</span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

function ShopTableCard({ table }) {
    return (
        <div className="panel" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
            <div style={{
                padding: 20,
                background: `linear-gradient(145deg, ${table.rail}, ${shade(table.rail,-0.3)})`,
                position: "relative",
            }}>
                <div style={{
                    aspectRatio: "2/1",
                    background: `radial-gradient(ellipse, ${table.felt}, ${shade(table.felt,-0.3)})`,
                    borderRadius: 6,
                    boxShadow: "inset 0 0 20px rgba(0,0,0,0.6)",
                    position: "relative",
                }}>
                    {[[4,4],[50,3],[96,4],[4,96],[50,97],[96,96]].map(([x,y],i) => (
                        <div key={i} style={{ position: "absolute", left: `${x}%`, top: `${y}%`, transform: "translate(-50%,-50%)", width: 10, height: 10, borderRadius: "50%", background: "#000", boxShadow: "0 0 0 1px rgba(232,185,73,0.3)" }}/>
                    ))}
                </div>
            </div>
            <div style={{ padding: 16, flex: 1, display: "flex", flexDirection: "column", gap: 10 }}>
                <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--ink-100)", fontWeight: 600 }}>{table.name}</div>
                    <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{table.tier}</div>
                </div>
                {table.owned ? (
                    <button className="btn-ghost" style={{ width: "100%" }} disabled>Já possui</button>
                ) : !table.unlocked ? (
                    <button className="btn-ghost" style={{ width: "100%" }}>
                        <span dangerouslySetInnerHTML={{ __html: window.Icon.lock(14) }}/>
                        <span style={{ marginLeft: 6 }}>Desbloqueia Nv. 40</span>
                    </button>
                ) : (
                    <button className="btn" style={{ width: "100%" }}>
                        {table.chips ? `◆ ${table.price.toLocaleString()}` : `$ ${table.price.toLocaleString()}`}
                    </button>
                )}
            </div>
        </div>
    );
}

// === LEADERBOARD ===
function LeaderboardScreen({ navigate }) {
    const { LEADERBOARD } = window.MastershotData;
    const [mode, setMode] = React.useState("global");
    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <Particles count={10}/>
            <TopBar navigate={navigate}/>
            <div style={{ position: "absolute", top: 88, left: 48, zIndex: 20 }}>
                <button className="back-btn" onClick={() => navigate("menu")}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.back(14) }}/><span>Menu</span>
                </button>
            </div>
            <div style={{ position: "relative", zIndex: 5, paddingTop: 110, paddingBottom: 40, paddingLeft: 48, paddingRight: 48, maxWidth: 1100, margin: "0 auto", height: "100%", display: "flex", flexDirection: "column", gap: 20 }}>
                <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
                    <div>
                        <div style={{ fontSize: 12, color: "var(--gold-500)", letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 6 }}>Ranking</div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink-100)", letterSpacing: "0.03em", fontWeight: 600 }}>Top Mundial</div>
                    </div>
                    <div className="seg">
                        {[["global","Global"],["8ball","8-Ball"],["9ball","9-Ball"],["snooker","Snooker"],["carom","Carom"]].map(([k,l])=>(
                            <button key={k} className={`seg-btn ${mode===k?"sel":""}`} onClick={()=>setMode(k)}>{l}</button>
                        ))}
                    </div>
                </div>

                {/* Podium */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, alignItems: "end" }}>
                    {[LEADERBOARD[1], LEADERBOARD[0], LEADERBOARD[2]].map((p, i) => {
                        const pos = [2,1,3][i];
                        const height = [140, 180, 120][i];
                        const medal = ["#c8c8c8", "#f4cf6e", "#b08553"][i];
                        return (
                            <div key={p.rank} style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
                                <Avatar initials={p.avatar} level={p.level} size="lg"/>
                                <div>
                                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--ink-100)", fontWeight: 600 }}>{p.nick}</div>
                                    <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--gold-400)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
                                        <CountryFlag code={p.country} size={14}/> {p.title}
                                    </div>
                                </div>
                                <div style={{
                                    width: "100%", height,
                                    background: `linear-gradient(180deg, ${medal}, ${shade(medal,-0.4)})`,
                                    borderRadius: "var(--r-sm) var(--r-sm) 0 0",
                                    display: "flex", alignItems: "center", justifyContent: "center",
                                    fontFamily: "var(--font-display)", fontSize: pos===1?72:56,
                                    fontWeight: 900,
                                    color: "rgba(0,0,0,0.5)",
                                    textShadow: "0 2px 0 rgba(255,255,255,0.3)",
                                    boxShadow: "inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 8px rgba(0,0,0,0.4)",
                                }}>{pos}</div>
                            </div>
                        );
                    })}
                </div>

                {/* rest */}
                <div style={{ flex: 1, overflowY: "auto", display: "flex", flexDirection: "column", gap: 6 }}>
                    {LEADERBOARD.slice(3).map((p, i) => (
                        <div key={p.rank} className="panel" style={{
                            padding: "12px 18px",
                            display: "grid",
                            gridTemplateColumns: "50px 1fr 160px 100px 100px 100px",
                            gap: 14, alignItems: "center",
                        }}>
                            <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--gold-400)", fontWeight: 700 }}>#{p.rank}</div>
                            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                                <Avatar initials={p.avatar} level={p.level} size="sm"/>
                                <div>
                                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                                        <CountryFlag code={p.country} size={14}/>
                                        <span style={{ fontSize: 14, color: "var(--ink-100)", fontWeight: 500 }}>{p.nick}</span>
                                    </div>
                                    <div style={{ fontSize: 10, color: "var(--gold-500)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{p.title}</div>
                                </div>
                            </div>
                            <div style={{ fontSize: 13, color: "var(--ink-200)" }}>{p.wins.toLocaleString()} vitórias</div>
                            <div><StreakBadge count={p.streak}/></div>
                            <div style={{ fontFamily: "var(--font-mono)", color: "var(--gold-300)", fontSize: 13 }}>ELO {p.elo}</div>
                            <div style={{ textAlign: "right" }}>
                                <button className="btn-ghost" style={{ padding: "6px 12px", fontSize: 11 }}>Desafiar</button>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

Object.assign(window, { SettingsScreen, ShopScreen, LeaderboardScreen });