/* legado cabeca, linha 2141 do index.html original.
Gerado pelo divisor. Nao editar a mao: quando esta tela
for remodelada, este arquivo some inteiro. */
@media (max-width: 760px) {
html, body { overflow-x: hidden; max-width: 100%; }
.screen { padding: 16px 12px 40px !important; }
#screen-lobby.screen, .screen { padding-top: 16px !important; }
body.bc-active .screen { padding-top: 52px !important; }
.btn { font-size: 0.78rem; padding: 9px 12px; }
.page-title { font-size: 1.25rem !important; }
/* ── Cabeçalhos das telas: empilham e centralizam ── */
.tier-header { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; justify-content: center; }
.tier-header > div { flex-wrap: wrap; justify-content: center; }
/* ── LOBBY ── */
.lobby-header-wrap { margin-bottom: 8px; }
.app-logo-text { font-size: 2.1rem !important; }
.lobby-subtitle { font-size: 0.68rem !important; letter-spacing: 2px; text-align: center; }
.lobby-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.main-btn { min-height: 100px !important; padding: 14px 14px !important; }
.main-btn .btn-title { font-size: 1.1rem !important; }
.main-btn .btn-desc { font-size: 0.78rem; }
.main-btn .btn-bg-icon { font-size: 3rem !important; right: 8px !important; }
/* NOTÍCIAS usa o mesmo tamanho dos demais botões no mobile (sem override) */
#lobby-quick-actions { flex-wrap: wrap; justify-content: center !important; margin-top: 14px; }
/* Seletor de tema (agora no header do lobby, em fluxo) */
#viewer-theme-picker { margin: 12px auto 4px !important; }
/* ── TIER LIST → empilhada (rótulo em cima, cartas embaixo) ── */
#capture-tier, #vip-tier-capture { padding: 10px !important; }
.tier-row { flex-direction: column !important; min-height: 0 !important; }
.tier-label-box { width: 100% !important; min-width: 0 !important; padding: 6px 8px !important; background: rgba(0,0,0,0.35); }
.tier-label-text { font-size: 1.35rem !important; padding: 2px !important; }
.tier-content { min-height: 0 !important; gap: 6px !important; padding: 8px !important; justify-content: center; }
.card-container { width: 76px !important; }
.tier-search-wrap input, .tier-search-wrap input:focus { width: 100% !important; }
.tier-filter-combo { flex-wrap: wrap; width: 100%; }
#screen-tier-view select, #screen-tier-view .tier-search-wrap { width: 100% !important; max-width: 100% !important; }
/* ── TOP 10 → pódio reduzido + grade 3 colunas ── */
#capture-top10 { padding: 10px !important; }
.podium-container { gap: 7px !important; min-height: 0 !important; margin-bottom: 22px !important; padding-top: 30px; flex-wrap: nowrap; }
.rank-1 { width: 37vw !important; height: 53vw !important; }
.rank-2, .rank-3 { width: 28vw !important; height: 40vw !important; }
.rank-1 .rank-badge { width: 34px; height: 34px; font-size: 1.2rem; top:-17px; }
.grid-container { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; }
.grid-slot { width: 100% !important; height: auto !important; aspect-ratio: 125 / 178; }
.dock-container { gap: 8px !important; padding: 12px !important; }
.dock-slot { width: 78px !important; height: 112px !important; }
/* ── MONTAR → filtros e painel empilhados ── */
.montar-filter-bar { padding: 12px !important; gap: 10px !important; }
.montar-field { width: 100% !important; }
.montar-field select,
.montar-field input[type="text"],
.montar-field input[type="number"],
#montar-search { width: 100% !important; }
.montar-field-row { width: 100%; }
.montar-frag-range { width: 100%; }
.montar-frag-range input { flex: 1; width: auto !important; }
.montar-layout { grid-template-columns: 1fr !important; }
.montar-right { position: static !important; }
.montar-results-grid { max-height: none !important; justify-content: center; }
.montar-card-item { width: 88px !important; }
.montar-card-img { width: 82px !important; }
/* ── PLAYSTYLES → 2 colunas + painel full-screen empilhado ── */
/* (22/09) as colunas agora são 3, e a regra mora no 02-principal.css */
.ps-panel-overlay { justify-content: stretch !important; }
.ps-panel-box { width: 100vw !important; }
.ps-panel-hdr { padding: 14px 16px !important; }
.ps-panel-body { grid-template-columns: 1fr !important; padding: 18px !important; gap: 16px !important; }
.ps-panel-left { order: -1; }
.ps-panel-card-img { width: 60% !important; max-width: 220px; margin: 0 auto; }
/* ── MODO LIVE → cabeçalho empilhado, controles que quebram linha ── */
.live-header { flex-direction: column !important; gap: 10px !important; padding: 14px 12px !important; }
.live-event-badge { font-size: 1.6rem !important; letter-spacing: 2px; text-align: center; }
.live-controls { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
.live-nav-hint { display: none; }
}
/* Telefones estreitos: playstyles em 1 coluna confortável */
@media (max-width: 430px) {
/* (22/09) as colunas agora são 3, e a regra mora no 02-principal.css */
.montar-card-item { width: 80px !important; }
.montar-card-img { width: 74px !important; }
}
/* ═══════════════════════════════════════
ÁREA VIP — botão premium (roxo) + tela EM BREVE
═══════════════════════════════════════ */
body.theme-copa .main-btn.vip-btn, .main-btn.vip-btn {
border: 1.5px solid rgba(178,110,255,0.55);
background: linear-gradient(135deg,#100320 0%,#1d0a33 55%,#10061f 100%);
box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 36px rgba(150,80,255,0.28), inset 0 1px 0 rgba(200,150,255,0.14);
}
.vip-btn .btn-bg-icon { color:#c9a3ff; opacity:0.16; }
.vip-btn .btn-category { color:#d9b3ff; opacity:0.85; }
.vip-btn .btn-category::before { background:#d9b3ff; }
.vip-btn .btn-title { color:#e9d4ff; text-shadow:0 0 26px rgba(180,110,255,0.7), 0 2px 4px rgba(0,0,0,0.9); }
.vip-btn .btn-desc { color:#a888d0; }
body.theme-copa .main-btn.vip-btn:hover, .main-btn.vip-btn:hover { border-color:#c9a3ff; box-shadow:0 20px 50px rgba(0,0,0,0.7), 0 0 46px rgba(150,80,255,0.4); }
.vip-btn::after {
content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
background:linear-gradient(100deg, transparent, rgba(210,160,255,0.22), transparent);
transform:skewX(-18deg); animation:vip-shine 3.6s ease-in-out infinite; pointer-events:none;
}
@keyframes vip-shine { 0%{left:-60%;} 55%{left:130%;} 100%{left:130%;} }
.vip-ribbon {
position:absolute; top:14px; right:14px; z-index:3;
font-family:var(--font-tech); font-weight:700; font-size:0.62rem; letter-spacing:2px;
padding:4px 12px; border-radius:20px; text-transform:uppercase;
background:linear-gradient(135deg,#b06eff,#7a3fd0); color:#fff; box-shadow:0 0 16px rgba(150,80,255,0.6);
}
@media (prefers-reduced-motion: reduce) { .vip-btn::after { animation:none; } }
/* ═══════════════════════════════════════
BONOXS — botão patrocínio (amarelo)
═══════════════════════════════════════ */
body.theme-copa .main-btn.bonoxs-btn, .main-btn.bonoxs-btn {
border: 1.5px solid #caa900;
background: linear-gradient(135deg,#ffe600 0%,#ffd200 100%);
box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 34px rgba(255,214,0,0.32), inset 0 1px 0 rgba(255,255,255,0.4);
}
.bonoxs-btn .btn-category { color:#6b5900; opacity:0.95; }
.bonoxs-btn .btn-category::before { background:#6b5900; }
.bonoxs-btn .btn-title { color:#141200; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bonoxs-btn .bonoxs-logo { height:1.55em; width:auto; display:inline-block; }
.bonoxs-btn .btn-desc { color:#3a3100; opacity:0.9; }
.bonoxs-btn .bonoxs-off { position:absolute; top:12px; right:14px; z-index:3; font-family:var(--font-tech); font-weight:700; font-size:0.52rem; letter-spacing:1.5px; color:#7a6600; text-transform:uppercase; }
body.theme-copa .main-btn.bonoxs-btn:hover, .main-btn.bonoxs-btn:hover { border-color:#fff07a; box-shadow:0 20px 50px rgba(0,0,0,0.55), 0 0 48px rgba(255,214,0,0.55); }
.bonoxs-btn::after {
content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
transform:skewX(-18deg); animation:vip-shine 3.6s ease-in-out infinite; pointer-events:none;
}
@media (prefers-reduced-motion: reduce) { .bonoxs-btn::after { animation:none; } }
/* ═══ BOSS TAÇA · viewer · 03/09/2026 · redesenho 04/09/2026 ═══
O ADM tem o CSS dele, separado — sao dois arquivos que nao conversam.
A COR MANDA NA LEITURA: dourado e a BOSS TACA (titulo de secao, taca,
patente, premiacao, o que e conquista); ciano e o que se toca (chip
ligado, botao, campo). Antes os dois estavam misturados e a tela
parecia duas telas coladas. */
#screen-boss-taca, #screen-boss-taca-lista, #screen-boss-taca-camp,
#screen-boss-taca-jog, #screen-boss-taca-partida, #screen-boss-taca-rank
{ justify-content:flex-start; padding-top:24px; }
.bt-wrap { width:100%; max-width:760px; margin:0 auto; padding:0 16px 48px; box-sizing:border-box;
display:flex; flex-direction:column; gap:14px; }
.bt-recarregar { margin-left:auto; width:40px; height:40px; border-radius:10px; flex:none;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#c9d4e0;
font-size:1.2rem; cursor:pointer; }
.bt-recarregar:hover { border-color:var(--text-color); color:#fff; }
.bt-recarregar.girando { animation:btGira .6s linear; }
@keyframes btGira { to { transform:rotate(360deg); } }
.bt-temporada { font-family:var(--font-tech); font-size:.72rem; letter-spacing:2px; color:#7a8698; text-transform:uppercase; }
/* ═══ OS TRES BOTOES DO HUB (remodelados em 22/09/2026) ═══════════
Eles viraram botao com arte, e a receita do visual mora no
`css/telas/botao-arte.css` — as caixas (faixa e quadro) sao as
MESMAS do COMPARAR e das TIER LISTS. Aqui fica so o que e desta
tela: a grade da dupla e a pilula do canto.
O que saiu: `.bt-participe` e `.bt-duo-btn`, que davam altura e
padding pro botao do legado. Altura agora vem da proporcao da arte,
e cravar uma altura aqui seria justamente o que estica a imagem. */
.bt-duo { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:11px; }
/* A PILULA DO CANTO: e ela que grita "tem coisa aberta AGORA".
Continua `absolute`, e por isso ela NAO esta na lista dos tres
textos que o botao-arte.css levanta — e de proposito: la a lista
e positiva, entao enfeite de tela continua com o posicionamento
que a tela deu. */
.bt-participe-selo { position:absolute; top:11px; right:11px; z-index:2;
font-family:var(--fonte-rotulo,sans-serif); font-weight:700;
font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
padding:5px 11px; border-radius:999px; color:var(--boss-amarelo,#f0d24d);
background:rgba(6,16,8,.82); border:1px solid rgba(232,183,58,.55);
box-shadow:0 2px 10px rgba(0,0,0,.6); }
.bt-participe-selo.off { color:var(--texto-fraco,#7c8a80);
background:rgba(6,16,8,.78); border-color:rgba(255,255,255,.14); }
/* O PULSO fica, e agora e dourado por fora da arte. Ele so acende
quando tem inscricao aberta de verdade (a classe `tem` vem do
_renderHub), entao nao e enfeite: e o unico aviso de que existe
campeonato aceitando gente AGORA. */
.bt-participe.tem.pulsa { animation:btPulsa 2.6s ease-in-out infinite; }
@keyframes btPulsa { 0%,100%{ box-shadow:0 0 0 rgba(232,183,58,0); }
50%{ box-shadow:0 0 22px rgba(232,183,58,.42); } }
@media (prefers-reduced-motion: reduce){ .bt-participe.pulsa{ animation:none; } }
/* O ranking vazio e a primeira coisa que quem chega ve enquanto a
temporada nao anda. Merecia desenho, nao uma frase cinza no vazio. */
.bt-rk-zero { padding:28px 16px 24px; display:flex; flex-direction:column;
align-items:center; text-align:center; gap:11px; }
.bt-rk-zero svg { width:78px; height:78px; color:var(--gold); opacity:.45; }
.bt-rk-zero-t { font-family:var(--font-title); font-size:1.02rem; letter-spacing:1.8px; color:#ffe9ac; }
.bt-rk-zero-s { font-family:var(--font-body); font-size:.86rem; color:#7a8698;
line-height:1.6; max-width:36ch; }
/* ── cards dos campeonatos ── */
.bt-lista-sub { font-family:var(--font-body); font-size:.85rem; color:#8593a4;
line-height:1.6; max-width:62ch; }
.bt-lista-sub b { color:#c9d4e0; }
.bt-lista { display:flex; flex-direction:column; gap:14px; }
.bt-vazio { padding:30px 16px; text-align:center; font-family:var(--font-body); color:#7a8698; line-height:1.6; }
.bt-vazio b { color:#ff8a6c; }
.bt-card { border-radius:16px; overflow:hidden; cursor:pointer; background:var(--lobby-btn-bg);
border:1px solid var(--glass-border); transition:border-color .2s; }
.bt-card:hover { border-color:var(--text-color); }
.bt-card-capa { width:100%; aspect-ratio:16/7; object-fit:cover; display:block; }
.bt-card-body { padding:14px 16px 16px; }
.bt-card-topo { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; min-height:16px; }
.bt-bonoxs { height:13px; width:auto; opacity:.9; flex:none; }
.bt-tag { font-family:var(--font-tech); font-size:.6rem; letter-spacing:1.6px; padding:3px 8px;
border-radius:6px; background:rgba(255,255,255,.08); color:#c9d4e0; }
.bt-tag.gratis { background:rgba(0,200,75,.16); color:#6dffb8; }
.bt-tag.novo { background:rgba(255,90,60,.16); color:#ff8a6c; }
.bt-card-nome { font-family:var(--font-title); font-size:1.35rem; letter-spacing:1px; color:#fff; line-height:1.1; }
.bt-card-prazo { font-family:var(--font-tech); font-size:.8rem; color:var(--text-color); margin-top:6px; }
.bt-card-abertura { font-family:var(--font-tech); font-size:.8rem; color:#c2a35c; margin-top:4px; }
/* a premiacao e o destaque do card — pedido do Boss */
.bt-premio { margin-top:10px; padding:10px 12px; border-radius:10px;
background:rgba(232,183,58,.10); border:1px solid rgba(232,183,58,.4);
font-family:var(--font-title); font-size:1.05rem; color:#ffe9ac; letter-spacing:.5px; }
.bt-premio span { display:block; font-family:var(--font-tech); font-size:.6rem; letter-spacing:2px;
color:#c2a35c; margin-bottom:2px; }
.bt-campeao { margin-top:10px; font-family:var(--font-tech); font-size:.82rem; color:#dfe8f2;
display:flex; align-items:center; gap:7px; }
.bt-campeao b { color:var(--gold); }
.bt-campeao .bt-taca-svg { width:18px; height:18px; flex:none; color:var(--gold); }
.bt-cta { display:block; margin-top:12px; text-align:center; padding:13px; border-radius:10px;
text-decoration:none; background:var(--text-color); color:#050810;
font-family:var(--font-title); font-size:1rem; letter-spacing:2px; }
/* ── pagina do campeonato ── */
.bt-camp-capa { width:100%; aspect-ratio:16/7; object-fit:cover; border-radius:14px; display:block; }
/* O frame e 16:7 e por padrao PREENCHE (corta o que sobra). Arte que nao
foi feita nessa proporcao — um logo quadrado, por exemplo — perde as
bordas. Com `cabe` ela entra inteira e o que falta vira fundo. Quem
escolhe e o Boss, campeonato a campeonato, la no ADM. */
.bt-camp-capa.cabe, .bt-card-capa.cabe { object-fit:contain; background:rgba(255,255,255,.035); }
.bt-tag.st-inscricoes { background:rgba(0,200,75,.16); color:#6dffb8; }
.bt-tag.st-andamento { background:rgba(255,200,0,.16); color:var(--gold); }
.bt-tag.st-finalizado { background:rgba(255,255,255,.08); color:#9fb0c2; }
.bt-campeao-box { text-align:center; padding:18px; border-radius:14px;
background:rgba(232,183,58,.08); border:1px solid rgba(232,183,58,.35); }
.bt-campeao-k { font-family:var(--font-tech); font-size:.7rem; letter-spacing:3px; color:#c2a35c;
display:flex; align-items:center; justify-content:center; gap:8px; }
.bt-campeao-k .bt-taca-svg { color:var(--gold); }
.bt-campeao-n { font-family:var(--font-main); font-size:1.8rem; letter-spacing:2px; color:#ffe9ac; margin-top:6px; }
.bt-sec { border-radius:12px; padding:14px; background:rgba(255,255,255,.03); border:1px solid var(--glass-border); }
.bt-sec-t { font-family:var(--font-tech); font-size:.68rem; letter-spacing:2px; color:var(--gold); margin-bottom:6px; }
.bt-sec-b { font-family:var(--font-body); font-size:.9rem; color:#c9d4e0; line-height:1.6; }
.bt-sec-dica { font-family:var(--font-tech); font-size:.58rem; letter-spacing:.6px;
color:#6b7888; margin:-2px 0 9px; }
/* O REGULAMENTO em PDF. E coisa pra TOCAR, entao segue a regra da casa:
dourado e a identidade da BOSS TACA, o que se toca leva a cor do app.
Largura cheia porque no celular ele e o unico botao da aba. */
.bt-regul { display:flex; align-items:center; justify-content:center; gap:9px;
padding:14px 16px; border-radius:12px; text-decoration:none; cursor:pointer;
background:var(--primary-glow); border:1px solid var(--text-color);
color:var(--text-color); font-family:var(--font-tech);
font-size:.72rem; letter-spacing:1.5px; }
.bt-regul:hover { background:var(--text-color); color:#07121a; }
.bt-regul-s { font-family:var(--font-body); font-size:.72rem;
letter-spacing:0; color:#7a8698; text-align:center; margin-top:7px; }
/* ═══ AS ABAS da pagina do campeonato ═══
Antes capa, tags, prazo, premiacao, campeao, info, regras, tabela e
chave eram um scroll so: quem entrava pra ver a chave passava por seis
blocos antes de achar. Agora o cabecalho fica em cima e o resto e aba. */
.bt-abas { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
border-bottom:1px solid rgba(255,255,255,.1); }
.bt-abas::-webkit-scrollbar { display:none; }
.bt-aba { flex:1; min-width:max-content; padding:12px 14px; cursor:pointer; white-space:nowrap;
background:transparent; border:none; border-bottom:2px solid transparent; color:#7a8698;
font-family:var(--font-tech); font-size:.68rem; letter-spacing:1.6px; }
.bt-aba:hover { color:#c9d4e0; }
.bt-aba.on { color:var(--gold); border-bottom-color:var(--gold); }
/* ═══ RANKING — abre junto com a tela, nao atras de um botao ═══
Por isso ele precisa de moldura propria: sem ela vira um monte de
linha solta grudada nos botoes de cima. */
/* Repintado em 22/09/2026: o mesmo cartao escuro de borda verde do
resto do app, com o ouro so no titulo e no que e conquista. */
.bt-rk-bloco { border-radius:16px; padding:16px 14px 14px; margin-top:2px;
background:var(--fundo-carta,rgba(0,10,4,.88));
border:1px solid var(--borda,rgba(0,200,75,.35)); display:flex; flex-direction:column; gap:11px; }
/* quebra em vez de cortar: "RANKING DA TEMPORADA" + "1039 competidores"
nao cabem lado a lado em 375px */
.bt-rk-cab { display:flex; align-items:baseline; justify-content:space-between;
gap:4px 10px; flex-wrap:wrap; }
.bt-rk-cab-t { font-family:var(--fonte-titulo,sans-serif); font-weight:700; font-size:1.2rem;
letter-spacing:.03em; text-transform:uppercase; color:var(--boss-amarelo,#f0d24d); }
.bt-rk-cab-s { font-family:var(--fonte-texto,sans-serif); font-size:.68rem;
letter-spacing:.2px; color:var(--texto-fraco,#7c8a80); flex:none; }
.bt-rk-topo { display:flex; gap:9px; }
.bt-rk-busca { flex:1; min-width:0; padding:11px 13px; border-radius:10px;
background:rgba(1,10,4,.85); border:1px solid var(--borda-fraca,rgba(255,255,255,.09));
color:var(--texto-forte,#fff); font-family:var(--fonte-texto,sans-serif); font-size:.9rem; }
.bt-rk-busca:focus { outline:none; border-color:var(--boss-verde,#00c84b); }
.bt-rk-meu { flex:none; padding:0 15px; border-radius:10px; cursor:pointer;
background:rgba(232,183,58,.14); border:1px solid rgba(232,183,58,.5);
color:var(--boss-amarelo,#f0d24d); font-family:var(--fonte-rotulo,sans-serif);
font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.bt-rk-meu:hover { background:rgba(232,183,58,.24); border-color:var(--boss-ouro,#e8b73a); }
/* os chips rolam na horizontal: com 7 rankings nao cabe em 375px */
/* TODOS os rankings na primeira tela, e todos do MESMO tamanho.
Com overflow-x, o que sobrava pra direita simplesmente nao existia.
Com flex:auto, o APROVEITAMENTO virava um chip do tamanho de tres.
A grade de 6 colunas resolve os dois: as tres primeiras ocupam 2
colunas cada (uma fileira), as duas ultimas ocupam 3 cada (outra
fileira). Duas fileiras cheias, nenhum buraco, nenhum gigante. */
.bt-chips { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; padding-bottom:2px; }
.bt-chip { grid-column:span 2; min-width:0; padding:9px 6px; border-radius:20px; cursor:pointer;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
background:rgba(255,255,255,.04); border:1px solid var(--borda-fraca,rgba(255,255,255,.09));
color:var(--texto-fraco,#7c8a80); font-family:var(--fonte-rotulo,sans-serif);
font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.bt-chip:nth-child(4), .bt-chip:nth-child(5) { grid-column:span 3; }
@media (max-width:360px){ .bt-chip { font-size:.54rem; letter-spacing:.05em; } }
.bt-chip.on { background:rgba(0,200,75,.14); border-color:var(--boss-verde,#00c84b);
color:var(--boss-verde,#00c84b); }
/* o podio tem que ter formato de podio: o 1o e mais alto e mais quente */
.bt-podio { display:flex; align-items:flex-end; justify-content:center; gap:7px; margin:2px 0 4px; }
.bt-pod { flex:1; min-width:0; text-align:center; padding:13px 6px 12px; border-radius:14px; cursor:pointer;
background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
border:1px solid var(--glass-border); transition:transform .15s, border-color .2s; }
.bt-pod:hover { transform:translateY(-3px); }
.bt-pod.p1 { padding-top:24px; padding-bottom:16px; border-color:rgba(232,183,58,.55);
background:linear-gradient(170deg,rgba(232,183,58,.20),rgba(232,183,58,.04));
box-shadow:0 0 28px -8px rgba(232,183,58,.6); }
.bt-pod.p2 { border-color:rgba(224,230,237,.3); }
.bt-pod.p3 { border-color:rgba(205,127,50,.35); }
.bt-pod-m { line-height:0; display:flex; justify-content:center; }
.bt-medalha-svg { width:32px; height:32px; }
.bt-pod.p1 .bt-medalha-svg { width:40px; height:40px; }
.bt-pod.p1 .bt-pod-m { color:var(--gold,#e8b73a); }
.bt-pod.p2 .bt-pod-m { color:#e0e6ed; }
.bt-pod.p3 .bt-pod-m { color:#cd7f32; }
.bt-pod-n { font-family:var(--font-title); font-size:.86rem; color:#fff; margin-top:7px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-pod.p1 .bt-pod-n { font-size:1rem; color:#ffe9ac; }
.bt-pod-v { font-family:var(--font-tech); font-size:.78rem; color:var(--gold); margin-top:3px; }
.bt-pod-v small { color:#8a7440; font-size:.58rem; }
.bt-rk-lista { display:flex; flex-direction:column; gap:4px; }
.bt-rk-linha { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; cursor:pointer;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
transition:border-color .2s, background .2s; }
.bt-rk-linha:hover { border-color:rgba(232,183,58,.5); background:rgba(232,183,58,.06); }
.bt-rk-pos { font-family:var(--font-title); font-size:.9rem; color:#6b7888; width:28px; flex:none; text-align:center; }
.bt-rk-nome { flex:1; min-width:0; font-family:var(--font-title); font-size:.98rem; color:#fff;
display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bt-rk-val { font-family:var(--font-tech); font-size:.86rem; color:var(--gold); flex:none; }
.bt-rk-val small { color:#5f6d7d; font-size:.66rem; }
/* SEM NOME: os 7 últimos dígitos do UID de jogo, em mono — pra
diferenciar um dos 125 "SEM NOME" de um campeonato sem virar o
número de 18 dígitos inteiro. Mesma régua do ADM. */
.bt-uid-curto { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:.72rem; color:#8b9bab; }
/* os degraus tem nome (VER TOP 25, VER TOP 100, VER TODOS) — "carregar
mais 25" nao diz onde voce esta na lista; "VER TOP 100" diz */
.bt-carregar { width:100%; margin-top:10px; padding:12px; border-radius:10px; cursor:pointer;
background:rgba(232,183,58,.07); border:1px solid rgba(232,183,58,.32); color:#f0cd6a;
font-family:var(--font-tech); font-size:.7rem; letter-spacing:1.8px; }
.bt-carregar:hover { border-color:var(--gold); background:rgba(232,183,58,.14); color:#ffe9ac; }
/* ═══ A PATENTE ═══
O unico selo que sobrou do lado do nome. A escada se le na COR: de
baixo pro topo ela vai esquentando, e as quatro de cima acendem —
da pra bater o olho na lista e ver quem e quem sem ler palavra.
(O selo BRIGA PRA TOP 10 que dividia esse espaco era emprestado das
tier lists de carta e nao dizia nada de torneio.) */
/* As BADGES de patente ganharam o acabamento da carta: degrade na
propria cor, borda viva e um brilho por baixo. O canto arredondado
deixou de ser pilula (border-radius 20) e virou o mesmo 6px dos
selos da carta — pilula colorida solta e o que da cara de template. */
.bt-badge { font-style:normal; display:inline-flex; align-items:center; line-height:1;
font-family:var(--font-tech); font-size:.5rem; letter-spacing:1.4px; white-space:nowrap;
padding:4px 9px; border-radius:6px;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#9fb0c2; }
.pat-ESTREANTE { background:linear-gradient(160deg,rgba(143,160,178,.20),rgba(143,160,178,.05));
border-color:rgba(143,160,178,.42); color:#a8b7c7; }
.pat-BRONZE { background:linear-gradient(160deg,rgba(205,127,50,.26),rgba(205,127,50,.06));
border-color:rgba(205,127,50,.55); color:#e09a56; }
.pat-PRATA { background:linear-gradient(160deg,rgba(224,230,237,.22),rgba(224,230,237,.05));
border-color:rgba(224,230,237,.5); color:#eef2f7; }
.pat-OURO { background:linear-gradient(160deg,rgba(232,183,58,.26),rgba(232,183,58,.06));
border-color:rgba(232,183,58,.6); color:#f0cd6a; }
.pat-PLATINA { background:linear-gradient(160deg,rgba(127,227,220,.24),rgba(127,227,220,.05));
border-color:rgba(127,227,220,.55); color:#9ff0ea; }
.pat-DIAMANTE { background:linear-gradient(160deg,rgba(0,242,255,.24),rgba(0,242,255,.05));
border-color:rgba(0,242,255,.55); color:#4df5ff; }
.pat-BRABO { background:linear-gradient(160deg,rgba(176,107,255,.30),rgba(176,107,255,.07));
border-color:rgba(176,107,255,.65); color:#c99bff; box-shadow:0 0 10px -2px rgba(176,107,255,.55); }
.pat-MONSTRO { background:linear-gradient(160deg,rgba(255,122,89,.30),rgba(255,122,89,.07));
border-color:rgba(255,122,89,.65); color:#ff9d80; box-shadow:0 0 10px -2px rgba(255,122,89,.55); }
.pat-LENDA { background:linear-gradient(160deg,rgba(255,90,60,.34),rgba(255,90,60,.08));
border-color:rgba(255,90,60,.7); color:#ff8f75; box-shadow:0 0 12px -2px rgba(255,90,60,.6); }
.pat-BOSS { background:linear-gradient(135deg,#e8b73a,#ff5a3c); border-color:#ffd77a;
color:#180c02; font-weight:700; box-shadow:0 0 16px -3px rgba(232,183,58,.85); }
/* a faixa de RESULTADOS: acesa nas primeiras 24h, some sozinha depois */
.bt-faixa { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin:0 0 14px; padding:13px 15px; border-radius:13px;
border:1px solid rgba(232,183,58,.45);
background:linear-gradient(135deg,rgba(232,183,58,.16),rgba(232,183,58,.04) 62%);
animation:bt-faixa-entra .45s ease-out; }
@keyframes bt-faixa-entra { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.bt-faixa-selo { font-family:var(--font-tech); font-size:.52rem; letter-spacing:2px;
color:#180c02; background:var(--gold,#e8b73a); padding:5px 9px; border-radius:5px; white-space:nowrap; }
.bt-faixa-txt { flex:1; min-width:150px; display:flex; flex-direction:column; gap:2px; }
.bt-faixa-camp { font-family:var(--font-title); font-size:1rem; color:#fff; font-style:normal; }
.bt-faixa-quando { font-family:var(--font-tech); font-size:.5rem; letter-spacing:1.4px; color:#8b9bab; }
.bt-faixa-corpo { font-size:.84rem; color:#dfe8f2; margin-top:3px; }
.bt-faixa-corpo b { color:var(--gold,#e8b73a); font-style:normal; }
.bt-faixa-bt { background:var(--gold,#e8b73a); color:#180c02; border:none; cursor:pointer;
font-family:var(--font-tech); font-size:.56rem; letter-spacing:1.4px;
padding:9px 13px; border-radius:8px; white-space:nowrap; }
/* o confronto do caminho destacado: aceso, com a barra dourada do lado */
.bt-vc.no-caminho { background:rgba(232,183,58,.10); box-shadow:inset 3px 0 0 var(--gold,#e8b73a); }
.bt-vc.no-caminho .bt-vc-p { color:var(--gold,#e8b73a); }
.bt-campanha-bloco { padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.bt-campanha-bloco:last-child { border-bottom:none; }
.bt-camp-queda { font-size:.8rem; color:#9fb0c2; line-height:1.55; margin-top:3px; }
.bt-camp-queda b { color:var(--gold,#e8b73a); font-style:normal; }
.bt-link-nome { background:none; border:none; padding:0; cursor:pointer;
color:#fff; font:inherit; text-decoration:underline; text-underline-offset:2px; }
.bt-caminho-bt { margin-top:7px; }
/* o pódio compacto, dentro do card em CAMPEÕES */
.bt-mpod { display:flex; flex-direction:column; gap:1px; margin-top:9px;
border-top:1px solid rgba(232,183,58,.22); padding-top:8px; }
.bt-mpod-l { display:flex; align-items:center; gap:8px; padding:3px 0; }
.bt-mpod-l svg { width:17px; height:17px; flex:none; }
.bt-mpod-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--font-title); font-size:.88rem; color:#dfe8f2; }
.bt-mpod-p { font-family:var(--font-tech); font-size:.62rem; letter-spacing:.8px; color:#8b9bab; }
.bt-mpod-p::after { content:' pts'; font-size:.52rem; }
.bt-mpod-l.lugar-1 .bt-mpod-n { color:var(--gold,#e8b73a); }
.bt-mpod-l.lugar-1 .bt-mpod-p { color:var(--gold,#e8b73a); }
/* ═══ O PÓDIO DO CAMPEONATO ═══
Quatro linhas, do ouro ao quarto lugar, com os pontos DAQUELE
torneio. A medalha é SVG desenhado, como o resto da identidade. */
.bt-cpod { margin:14px 0 4px; border-radius:14px; overflow:hidden;
border:1px solid rgba(232,183,58,.28);
background:linear-gradient(160deg,rgba(232,183,58,.08),rgba(9,12,20,.9) 62%); }
.bt-cpod-t { display:flex; align-items:center; gap:7px; padding:11px 14px 9px;
font-family:var(--font-tech); font-size:.6rem; letter-spacing:2px; color:var(--gold,#e8b73a);
border-bottom:1px solid rgba(232,183,58,.2); }
.bt-cpod-t svg { width:15px; height:15px; }
.bt-cpod-l { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
padding:10px 14px; background:transparent; border:none; cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.05); }
.bt-cpod-l:last-of-type { border-bottom:none; }
.bt-cpod-l:hover { background:rgba(255,255,255,.04); }
.bt-cpod-m { display:flex; width:22px; }
.bt-cpod-m svg { width:22px; height:22px; }
.bt-cpod-n { flex:1; font-family:var(--font-title); font-size:1rem; color:#fff; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-cpod-c { font-family:var(--font-tech); font-size:.54rem; letter-spacing:1.1px; color:#8b9bab; }
.bt-cpod-p { font-family:var(--font-tech); font-size:.56rem; letter-spacing:1px; color:#9fb0c2; }
.bt-cpod-p b { font-family:var(--font-title); font-size:1.05rem; color:var(--gold,#e8b73a); }
.bt-cpod-l.lugar-1 .bt-cpod-n { color:var(--gold,#e8b73a); }
.bt-cpod-rodape { padding:9px 14px 11px; font-size:.72rem; color:#8b9bab; line-height:1.5;
border-top:1px solid rgba(255,255,255,.06); }
.bt-cpod-artes { display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 13px; }
.bt-cpod-artes .bt-exp-bt { flex:1 1 auto; }
/* ═══ A CARTA DO JOGADOR ═══
Gramática de carta de FC Mobile, que é o que o público do canal lê
de cabeça: número gigante no canto, a "posição" embaixo dele, o
escudo do lado, o nome numa faixa e os atributos numa fileira.
A cor não é escolha de design: é a PATENTE. Cada uma pinta a moldura,
o número e a faixa do nome — do cinza do ESTREANTE ao fogo do BOSS.
Por isso `--pat` é uma variável: o resto do bloco não sabe (nem
precisa saber) qual patente está desenhando. */
.pat-carta-ESTREANTE { --pat:#8fa0b2; --pat2:#5c6b7a; }
.pat-carta-BRONZE { --pat:#cd7f32; --pat2:#8a4f1c; }
.pat-carta-PRATA { --pat:#e0e6ed; --pat2:#96a3b3; }
.pat-carta-OURO { --pat:#e8b73a; --pat2:#a67c15; }
.pat-carta-PLATINA { --pat:#7fe3dc; --pat2:#3d8f8a; }
.pat-carta-DIAMANTE { --pat:#00f2ff; --pat2:#0b8f99; }
.pat-carta-BRABO { --pat:#b06bff; --pat2:#6b2fb0; }
.pat-carta-MONSTRO { --pat:#ff7a59; --pat2:#a83b22; }
.pat-carta-LENDA { --pat:#ff5a3c; --pat2:#a32a16; }
.pat-carta-BOSS { --pat:#ffd77a; --pat2:#ff5a3c; }
/* O `background` de baixo usa color-mix, que celular mais antigo nao
entende — e quando o navegador nao entende uma declaracao inteira ele
IGNORA a linha e a carta ficava sem fundo, "torta". A linha de cima
e o fallback: um degrade plano na cor da patente, que todo mundo le. */
.bt-carta { position:relative; overflow:hidden; border-radius:14px;
padding:16px 16px 13px; margin-bottom:14px;
border:1.5px solid var(--pat);
background:linear-gradient(157deg, var(--pat2) 0%, #080b12 58%);
background:
radial-gradient(120% 80% at 78% 0%, color-mix(in srgb, var(--pat) 26%, transparent) 0%, transparent 58%),
linear-gradient(157deg, color-mix(in srgb, var(--pat2) 34%, #0b0f18) 0%, #080b12 64%);
box-shadow:0 0 0 1px rgba(0,0,0,.5) inset, 0 10px 30px -14px var(--pat); }
/* o brilho diagonal que toda carta boa tem — é o que tira o ar de caixa */
.bt-carta::after { content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(114deg, transparent 38%, rgba(255,255,255,.07) 47%, transparent 56%); }
.bt-carta-corpo { display:flex; align-items:flex-start; gap:14px; }
.bt-carta-esq { display:flex; flex-direction:column; align-items:center; min-width:88px; }
.bt-carta-ovr { font-family:var(--font-title); font-size:3.5rem; line-height:.86;
color:var(--pat); text-shadow:0 2px 14px color-mix(in srgb, var(--pat) 55%, transparent); }
.bt-carta-pat { font-family:var(--font-tech); font-size:.62rem; letter-spacing:2.6px;
color:var(--pat); margin-top:4px; }
.bt-carta-risco { width:46px; height:1px; margin:8px 0 7px;
background:linear-gradient(90deg, transparent, var(--pat), transparent); }
.bt-carta-rank { font-family:var(--font-title); font-size:1.15rem; color:#fff; line-height:1;
display:flex; flex-direction:column; align-items:center; gap:3px; }
.bt-carta-rank span { font-family:var(--font-tech); font-size:.46rem; letter-spacing:1.6px; color:#8b9bab; }
.bt-carta-escudo { flex:1; display:flex; align-items:center; justify-content:center; padding-top:4px; }
.bt-carta-escudo img { width:118px; height:118px; border-radius:16px; object-fit:cover;
filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.bt-carta-nome { margin:12px 0 0; padding:9px 0 8px; text-align:center;
font-family:var(--font-title); font-size:1.45rem; letter-spacing:1px; color:#fff;
text-transform:uppercase; line-height:1.05;
border-top:1px solid var(--pat); border-bottom:1px solid var(--pat);
border-top:1px solid color-mix(in srgb, var(--pat) 45%, transparent);
border-bottom:1px solid color-mix(in srgb, var(--pat) 45%, transparent); }
.bt-carta-nome .bt-uid-curto { font-size:.7rem; color:#9fb0c2; letter-spacing:0; }
.bt-carta-bloco { padding:11px 0 2px; }
.bt-troca-img { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.bt-troca-img label { cursor:pointer; }
.bt-carta-linha { height:1px; margin:12px 0 4px;
background:linear-gradient(90deg, transparent, var(--pat), transparent); opacity:.4;
background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pat) 32%, transparent), transparent); }
.bt-carta-attrs span i { display:block; font-style:normal; margin-top:2px; color:#a9b6c4; }
.bt-carta-nota { margin-top:11px; padding-top:9px; font-size:.68rem; line-height:1.5; color:#7d8b9b;
text-align:center; border-top:1px solid rgba(255,255,255,.06); }
.bt-carta-nota b { color:var(--pat); font-style:normal; }
.bt-carta-attrs { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:3px 0; }
.bt-carta-attrs > div { display:flex; flex-direction:column; align-items:center; gap:3px; }
.bt-carta-attrs b { font-family:var(--font-title); font-size:1.2rem; color:#fff; line-height:1; }
.bt-carta-attrs span { font-family:var(--font-tech); font-size:.46rem; letter-spacing:1.3px; color:#8b9bab; }
@media (max-width:380px){
.bt-carta-ovr { font-size:3rem; }
.bt-carta-escudo img { width:96px; height:96px; }
.bt-carta-attrs b { font-size:1.05rem; }
}
.bt-carta-selos { display:flex; flex-wrap:wrap; gap:5px; justify-content:center;
padding-top:11px; margin-top:9px;
border-top:1px solid rgba(255,255,255,.14);
border-top:1px solid color-mix(in srgb, var(--pat) 28%, transparent); }
/* ═══ CARD DO JOGADOR ═══ */
.bt-cj { border-radius:18px; padding:18px 16px;
background:linear-gradient(160deg,rgba(20,26,40,.96),rgba(9,12,20,.98));
border:1.5px solid rgba(255,255,255,.14); }
.pat-borda-BRABO { border-color:rgba(176,107,255,.5); }
.pat-borda-MONSTRO { border-color:rgba(255,122,89,.5); }
.pat-borda-LENDA { border-color:rgba(255,90,60,.55); }
.pat-borda-BOSS { border-color:#e8b73a; box-shadow:0 0 34px -6px rgba(232,183,58,.5); }
/* a posicao e o numero grande e o nome vem ao lado: antes eram cinco
linhas centralizadas do mesmo tamanho e o olho nao sabia onde comecar */
.bt-cj-topo { display:flex; align-items:center; gap:14px; }
.bt-cj-rank { flex:none; width:66px; text-align:center; padding:9px 0; border-radius:12px;
background:rgba(232,183,58,.08); border:1px solid rgba(232,183,58,.28); }
.bt-cj-rank b { display:block; font-family:var(--font-title); font-size:1.9rem; line-height:1; color:var(--gold); }
.bt-cj-rank span { display:block; font-family:var(--font-tech); font-size:.44rem; letter-spacing:1.2px;
color:#8a7440; margin-top:5px; }
.bt-cj-id { flex:1; min-width:0; }
.bt-cj-nome { font-family:var(--font-main); font-size:1.75rem; letter-spacing:1px; color:#fff;
line-height:1.05; word-break:break-word; }
.bt-cj-pat { margin-top:8px; font-size:.56rem; padding:4px 11px; }
/* A ESCADA DA PATENTE: o "faltam 188 pontos" solto nao dizia se ele
estava no comeco ou no fim do degrau. A barra diz. */
/* a escada da patente: de onde ele saiu, onde esta, pra onde vai */
.bt-escada { margin:14px 0 4px; }
.bt-escada-trilho { display:flex; align-items:center; gap:9px; }
.bt-escada-barra { flex:1; min-width:60px; position:relative; height:8px; border-radius:20px;
background:rgba(255,255,255,.07); overflow:visible; }
.bt-escada-barra > i { display:block; height:100%; border-radius:20px;
background:linear-gradient(90deg, rgba(232,183,58,.5), var(--gold,#e8b73a)); }
.bt-escada-falta { position:absolute; left:50%; top:-20px; transform:translateX(-50%);
font-family:var(--font-tech); font-size:.5rem; letter-spacing:1px; color:#9fb0c2;
white-space:nowrap; font-style:normal; }
.bt-escada-pra { opacity:.55; }
.bt-escada-topo { display:flex; align-items:center; gap:8px; justify-content:center;
color:var(--gold,#e8b73a); font-size:.84rem; }
.bt-escada-topo b { font-family:var(--font-title); font-style:normal; }
.bt-escada-topo svg { width:18px; height:18px; }
.bt-cj-escada { margin-top:16px; }
.bt-cj-escada-l { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.bt-cj-escada-l > span { font-family:var(--font-tech); font-size:.6rem; color:#7a8698; letter-spacing:.5px; }
.bt-cj-escada-l > span b { color:#dfe8f2; font-family:var(--font-title); }
.bt-cj-barra { height:6px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.07); }
.bt-cj-barra i { display:block; height:100%; border-radius:6px;
background:linear-gradient(90deg,rgba(232,183,58,.55),#e8b73a); }
.bt-cj-duo { display:flex; gap:10px; margin-top:16px; }
.bt-cj-box { flex:1; padding:12px 8px; border-radius:12px; text-align:center;
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.bt-cj-box span { display:block; font-family:var(--font-tech); font-size:.52rem; letter-spacing:1.4px; color:#7a8698; }
.bt-cj-box b { display:block; font-family:var(--font-title); font-size:1.6rem; color:var(--gold); margin-top:3px; }
.bt-cj-nums { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }
.bt-cj-nums div { padding:7px 4px; border-radius:9px; text-align:center; background:rgba(255,255,255,.03); }
.bt-cj-nums b { display:block; font-family:var(--font-title); font-size:1.05rem; color:#fff; }
.bt-cj-nums span { font-family:var(--font-tech); font-size:.52rem; letter-spacing:1px; color:#7a8698; }
/* A CAMPANHA no card: uma linha por campeonato que ele jogou, o nome
de um lado e até onde chegou do outro — dourado porque é conquista,
a mesma régua da BOSS TAÇA em todo o resto da tela. */
.bt-campanha-l { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
padding:8px 2px; border-bottom:1px solid rgba(255,255,255,.06); }
.bt-campanha-l:last-child { border-bottom:none; }
.bt-campanha-l b { font-family:var(--font-title); font-size:.92rem; color:#dfe8f2; font-style:normal; }
.bt-campanha-l span { font-family:var(--font-tech); font-size:.66rem; letter-spacing:.8px;
color:var(--gold); flex:none; text-align:right; }
/* HISTORICO: o placar na frente, o adversario em cima e o campeonato
embaixo dele. Antes era campeonato | placar | adversario, tres colunas
disputando a mesma linha — em 375px nao cabia nenhuma inteira. */
.bt-hist { display:flex; align-items:center; gap:11px; padding:9px 2px; cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.06); }
.bt-hist:hover { background:rgba(255,255,255,.03); }
.bt-hist-placar { flex:none; min-width:54px; text-align:center; padding:4px 8px; border-radius:7px;
font-family:var(--font-title); font-size:.95rem;
background:rgba(255,255,255,.05); color:#8fa0b2; }
.bt-hist-placar.v { color:#6dffb8; background:rgba(0,200,75,.14); }
.bt-hist-placar.d { color:#ff8a6c; background:rgba(255,90,60,.12); }
.bt-hist-meio { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bt-hist-meio b { font-family:var(--font-title); font-size:.95rem; color:#fff;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-hist-meio span { font-family:var(--font-tech); font-size:.57rem; letter-spacing:.5px; color:#6b7888;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-hist-seta { flex:none; color:#4c5867; font-size:1.1rem; }
/* ═══ CHAVE ═══ */
.bt-vf { margin-bottom:16px; }
.bt-vf:last-child { margin-bottom:0; }
.bt-vf-t { font-family:var(--font-tech); font-size:.62rem; letter-spacing:2px; color:var(--gold); margin-bottom:7px; }
.bt-vf-lista { display:flex; flex-direction:column; gap:4px; }
.bt-vc { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px;
background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
transition:border-color .2s, background .2s; }
/* a LINHA INTEIRA abre a ficha: a lupa de 12px que fazia isso antes era
alvo de mosquito no celular */
.bt-vc.tem-ficha { cursor:pointer; }
.bt-vc.tem-ficha:hover { border-color:rgba(232,183,58,.45); background:rgba(232,183,58,.05); }
.bt-vc-l { flex:1; min-width:0; font-family:var(--font-title); font-size:.9rem; color:#9fb0c2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.bt-vc-l:last-child { text-align:right; }
.bt-vc-l.venceu { color:var(--gold); }
.bt-vc-p { flex:none; text-align:center; padding:3px 10px; border-radius:7px;
font-family:var(--font-title); font-size:.95rem; color:#fff; background:rgba(255,255,255,.06); }
.bt-vc-p i { font-style:normal; color:#5f6d7d; margin:0 3px; }
.bt-vc-p em { display:block; font-style:normal; font-family:var(--font-tech);
font-size:.52rem; letter-spacing:.8px; color:#8a7440; }
.bt-slot-vazio { font-style:normal; color:#4c5867; font-family:var(--font-tech); font-size:.7rem; }
.bt-chave-nota { font-family:var(--font-body); font-size:.78rem; color:#8fa0b2; margin-bottom:10px; }
.bt-vf-t.dobravel { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bt-vf-t.dobravel:hover { color:#ffe9ac; }
.bt-vf-n { font-family:var(--font-tech); font-size:.58rem; color:#7a8698; letter-spacing:1px; }
/* ═══ DEGRAU 3 · a ficha da partida ═══ */
.bt-pt-camp { font-family:var(--font-tech); font-size:.62rem; letter-spacing:2px; color:#7a8698;
text-align:center; margin-bottom:10px; }
.bt-pt-duelo { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:20px; }
.bt-pt-lado { flex:1; min-width:0; text-align:center; font-family:var(--font-title); font-size:1.15rem;
color:#c9d4e0; cursor:pointer; word-break:break-word; }
.bt-pt-lado.venceu { color:var(--gold); }
.bt-pt-x { flex:none; color:#4c5867; font-family:var(--font-tech); }
.bt-pt-bloco { padding:16px 14px; border-radius:14px; margin-bottom:12px; text-align:center;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.bt-pt-placar { font-family:var(--font-main); font-size:2.6rem; color:#fff; line-height:1; letter-spacing:2px; }
.bt-pt-placar i { font-style:normal; color:#4c5867; font-size:1.5rem; margin:0 6px; }
.bt-pt-data { font-family:var(--font-tech); font-size:.68rem; letter-spacing:.8px; color:#7a8698; margin-top:8px; }
/* A FIACAO: de onde cada lado veio e pra onde o vencedor segue —
sem print e sem frase de origem, é o que sobrou pra explicar o
confronto na ficha. */
.bt-pt-fiacao { margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.bt-pt-fiacao-l { font-family:var(--font-body); font-size:.82rem; line-height:1.5; color:#8fa0b2; }
.bt-pt-fiacao-l b { color:#c9d4e0; font-family:var(--font-title); font-style:normal; }
/* A TABELA (liga/grupos) saiu do modelo novo — só mata-mata existe,
`_htmlTabelas` devolve vazio sempre — e as classes .bt-tab-* que só
serviam a ela saíram daqui também: nada mais gera esse HTML. */
/* ═══ EM BREVE · a BOSS TAÇA enquanto não está no ar ═══ */
.bt-eb-selo { display:inline-block; font-family:var(--font-tech); font-size:.6rem; letter-spacing:3px;
padding:5px 14px; border-radius:20px; margin-bottom:14px;
background:rgba(232,183,58,.14); border:1px solid rgba(232,183,58,.45); color:var(--gold); }
.bt-eb-tit { font-family:var(--font-main); font-size:2.1rem; line-height:1.05; letter-spacing:1px;
color:#fff; margin-bottom:10px; }
.bt-eb-sub { font-family:var(--font-body); font-size:.9rem; line-height:1.6; color:#8fa0b2; margin-bottom:20px; }
.bt-eb-lista { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.bt-eb-item { padding:13px 15px; border-radius:12px;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
border-left:3px solid rgba(232,183,58,.55); }
.bt-eb-item b { display:block; font-family:var(--font-tech); font-size:.66rem; letter-spacing:1.6px;
color:var(--gold); margin-bottom:3px; }
.bt-eb-item span { font-family:var(--font-body); font-size:.82rem; line-height:1.5; color:#9fb0c2; }
/* o sino: o único botão da tela, então ele é o que salta */
.bt-eb-sino { display:block; width:100%; text-align:center; cursor:pointer; padding:20px 16px;
border-radius:16px; background:linear-gradient(160deg,rgba(232,183,58,.16),rgba(232,183,58,.06));
border:1.5px solid rgba(232,183,58,.5); transition:transform .15s, border-color .2s;
animation:btEbPulso 2.6s ease-in-out infinite; }
.bt-eb-sino:hover { transform:translateY(-2px); border-color:var(--gold); }
.bt-eb-sino:active { transform:translateY(0); }
.bt-eb-sino .bt-eb-sino-i { display:block; font-size:2rem; line-height:1; margin-bottom:8px; }
.bt-eb-sino b { display:block; font-family:var(--font-tech); font-size:.78rem; letter-spacing:2px;
color:var(--gold); margin-bottom:6px; }
.bt-eb-sino small { display:block; font-family:var(--font-body); font-size:.76rem; line-height:1.5;
color:#9fb0c2; }
/* já ativado: para de pulsar e vira confirmação, não convite */
.bt-eb-sino.ligado { cursor:default; animation:none;
background:rgba(0,200,120,.08); border-color:rgba(0,200,120,.45); }
.bt-eb-sino.ligado:hover { transform:none; border-color:rgba(0,200,120,.45); }
.bt-eb-sino.ligado b { color:#6dffb8; }
@keyframes btEbPulso {
0%,100% { box-shadow:0 0 0 0 rgba(232,183,58,.22); }
50% { box-shadow:0 0 26px 2px rgba(232,183,58,.18); }
}
@media (prefers-reduced-motion: reduce) { .bt-eb-sino { animation:none; } }
.bt-eb-rodape { text-align:center; font-family:var(--font-body); font-size:.78rem;
color:#5f6d7d; margin-top:20px; }
.bt-eb-rodape b { color:#8fa0b2; }
/* ═══ DEGRAU 4 · selos, taças, sequências e o card exportável ═══ */
.bt-taca-svg { width:26px; height:26px; display:block; }
/* uma taca por linha, com o nome do campeonato do lado: com 3 tacas na
fileira antiga e os nomes soltos embaixo, ninguem sabia qual e qual */
/* a galeria de troféus: um por coluna, com o nome embaixo */
.bt-galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
gap:10px; margin-top:10px; }
.bt-trofeu { display:flex; flex-direction:column; align-items:center; gap:7px;
padding:14px 8px 12px; border-radius:12px;
background:linear-gradient(170deg, rgba(232,183,58,.14), rgba(232,183,58,.03) 70%);
border:1px solid rgba(232,183,58,.3); }
.bt-trofeu-svg { width:46px; height:52px; filter:drop-shadow(0 4px 10px rgba(232,183,58,.35)); }
.bt-trofeu span { font-family:var(--font-tech); font-size:.52rem; letter-spacing:.9px;
color:#e9d7a6; text-align:center; line-height:1.45; }
.bt-taca-l { display:flex; align-items:center; gap:10px; padding:9px 2px;
border-bottom:1px solid rgba(255,255,255,.06); }
.bt-taca-l:last-child { border-bottom:none; }
.bt-taca-l .bt-taca-svg { flex:none; color:var(--gold); }
.bt-taca-l span { font-family:var(--font-title); font-size:.94rem; color:#dfe8f2; line-height:1.3; }
.bt-selos { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
/* OS SELOS.
Eram seis cores diferentes numa carta so — roxo, ciano, verde, laranja
— e e exatamente isso que da o ar de template: cor sem significado.
Aqui a cor virou HIERARQUIA. Tem tres niveis e mais nenhum:
CONQUISTA (campeao, vice, lider) dourado cheio, so quem levantou
FEITO (invicto, 100%, ...) contorno dourado fino
o resto cinza discreto
Assim bate o olho e se sabe o que vale mais, sem ler. */
.bt-selo { font-family:var(--font-tech); font-size:.54rem; letter-spacing:1.3px;
padding:5px 10px; border-radius:5px; background:rgba(255,255,255,.04); color:#8b9bab;
border:1px solid rgba(255,255,255,.1); text-transform:uppercase; }
.selo-campeao, .selo-vice {
background:linear-gradient(135deg,#e8b73a,#c9922a); color:#170d01;
border-color:#f0cd6a; font-weight:700;
box-shadow:0 2px 10px -3px rgba(232,183,58,.75); }
.selo-vice { background:linear-gradient(135deg,#dfe6ee,#aab6c4); border-color:#eef2f7; color:#141a22; }
.selo-lider, .selo-invicto, .selo-cempor, .selo-implacavel, .selo-naocedeu, .selo-semsusto {
background:rgba(232,183,58,.07); color:#f0cd6a; border-color:rgba(232,183,58,.4); }
/* ARTILHEIRO e GOLEADA eram sobre GOL, que sumiu do modelo — a cor de
cada um passou pro selo novo que ocupa o lugar dela na mesma régua.
MURALHA e NÃO TOMOU GOL saem sem substituto direto: quem cobre a
mesma ideia de "não deu susto" é o SEM SUSTO, com cor nova. */
.bt-exportar { display:flex; gap:8px; }
.bt-exp-bt { flex:1; padding:13px 8px; border-radius:11px; cursor:pointer;
background:var(--lobby-btn-bg); border:1px solid var(--glass-border); color:var(--text-color);
font-family:var(--font-tech); font-size:.64rem; letter-spacing:1.2px; }
.bt-exp-bt:hover { border-color:var(--text-color); }
/* Tela MEMBROS BOSS FC — vitrine */
#screen-vip { justify-content:flex-start; padding-top:24px; }
.mb-wrap { width:100%; max-width:900px; display:flex; flex-direction:column; align-items:center; gap:22px; padding-bottom:40px; }
.mb-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; margin-top:6px; }
.mb-hero-gem { font-size:4.2rem; line-height:1; filter:drop-shadow(0 0 30px rgba(180,110,255,0.6)); animation:vip-float 3.5s ease-in-out infinite; }
@keyframes vip-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.mb-hero-title { font-family:var(--font-main); font-size:2.4rem; letter-spacing:3px; color:#fff; line-height:1.05; text-shadow:0 2px 10px rgba(0,0,0,0.8); }
.mb-hero-title span { color:#e9d4ff; text-shadow:0 0 30px rgba(180,110,255,0.7); }
.mb-hero-sub { font-family:var(--font-tech); font-size:0.95rem; color:#b79fd8; letter-spacing:1px; }
/* ── redesign: emblema, ✅, vitrine, benefícios em lista ── */
.mb-vitrine { display:flex; flex-direction:column; align-items:center; gap:22px; width:100%; }
.mb-crest { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:2px;
background:radial-gradient(circle at 50% 34%, rgba(200,150,255,0.28), rgba(20,8,34,0.9) 68%);
border:1.5px solid rgba(200,150,255,0.45); box-shadow:0 0 34px rgba(150,80,255,0.42), inset 0 0 22px rgba(150,80,255,0.25);
animation:vip-float 3.5s ease-in-out infinite; }
.mb-crest::before { content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(245,197,24,0.35); }
.mb-crest span { font-size:2.7rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.mb-vip-check { margin-left:auto; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
background:radial-gradient(circle at 50% 35%, rgba(60,220,130,0.28), rgba(6,26,14,0.85)); border:1.5px solid rgba(60,220,130,0.55);
box-shadow:0 0 14px rgba(40,200,120,0.45); animation:mb-vpulse 2.4s ease-in-out infinite; }
@keyframes mb-vpulse { 0%,100%{ box-shadow:0 0 12px rgba(40,200,120,0.35); } 50%{ box-shadow:0 0 22px rgba(40,200,120,0.6); } }
.mb-benef-hero { position:relative; width:100%; border-radius:14px; padding:16px; background:linear-gradient(135deg,rgba(26,16,2,0.85),rgba(20,8,34,0.85));
border:1.5px solid rgba(255,215,0,0.45); box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 30px rgba(255,200,0,0.12); }
.mb-benef-star { position:absolute; top:12px; right:12px; font-family:var(--font-tech); font-weight:700; font-size:0.6rem; letter-spacing:1.5px; padding:4px 10px; border-radius:14px; text-transform:uppercase; background:linear-gradient(135deg,#FFD700,#b8860b); color:#1a1200; box-shadow:0 0 14px rgba(255,215,0,0.4); }
.mb-benef-hero-name { font-family:var(--font-main); font-size:1.25rem; letter-spacing:0.5px; color:var(--gold); text-shadow:0 0 18px rgba(255,200,0,0.35); }
.mb-benef-hero-desc { font-family:var(--font-tech); font-size:0.86rem; color:#cdbce8; line-height:1.4; margin-top:4px; }
.mb-benef-list { display:flex; flex-direction:column; gap:9px; width:100%; }
.mb-benef-row { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(178,110,255,0.22); border-radius:12px; padding:12px 14px; }
.mb-benef-ic { font-size:1.2rem; width:26px; text-align:center; }
.mb-benef-tx { flex:1; }
.mb-benef-nm { font-family:var(--font-main); font-size:0.82rem; letter-spacing:0.4px; color:#fff; }
.mb-benef-ds { font-family:var(--font-tech); font-size:0.72rem; color:#9a8fb8; }
.mb-benef-lock { font-size:0.9rem; opacity:0.5; }
.mb-benef-soon .mb-benef-nm { color:#b3a6d0; }
.mb-benef-tag { font-size:0.55rem; color:var(--gold); letter-spacing:1px; }
.mb-ajuda-link { margin-top:6px; background:none; border:none; font-family:var(--font-tech); font-weight:600; font-size:0.8rem; letter-spacing:1px; color:#8a7fb0; text-decoration:underline dotted; cursor:pointer; }
.mb-ajuda-link:hover { color:#d9b3ff; }
.mb-perks { font-family:var(--font-tech); font-size:0.8rem; color:#9a8fb8; line-height:1.6; text-align:center; max-width:440px; }
.mb-perks b { color:#d9b3ff; font-weight:600; white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .mb-crest, .mb-vip-check { animation:none; } }
/* ── lobby VIP (membro verificado) ── */
.mb-home { flex-direction:column; gap:14px; width:100%; }
.mb-home-head { text-align:center; margin-top:2px; }
.mb-home-kick { font-family:var(--font-tech); font-weight:700; letter-spacing:4px; font-size:0.6rem; color:#d9b3ff; text-transform:uppercase; }
.mb-home-name { font-family:var(--font-main); font-size:1.3rem; letter-spacing:1.5px; color:#fff; margin-top:3px; }
.mb-home-name span { color:#d9b3ff; text-shadow:0 0 22px rgba(180,110,255,0.6); }
.mb-home-divider { height:1px; margin:6px 4px 8px; background:linear-gradient(90deg,transparent,rgba(245,197,24,0.5),transparent); }
.mb-top-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:6px 0 2px; }
.mb-top-btn { font-family:var(--font-tech); font-weight:700; font-size:0.72rem; letter-spacing:1px; cursor:pointer; padding:9px 14px; border-radius:11px; border:1px solid rgba(178,110,255,0.4); background:rgba(20,10,36,0.6); color:#d9b3ff; display:inline-flex; align-items:center; gap:6px; transition:0.18s; }
.mb-top-btn:hover { border-color:#c9a3ff; color:#fff; transform:translateY(-1px); }
.mb-top-btn.mb-top-gold { border-color:rgba(255,215,0,0.5); color:var(--gold); background:rgba(26,16,2,0.6); }
.mb-top-btn.mb-top-gold:hover { border-color:var(--gold); color:var(--gold); }
/* Menu VIP no padrão do LOBBY (ícone de traço, mesma linguagem do app),
mas em GRADE DE DUAS COLUNAS — o Boss pediu em 18/08 que a Área VIP
tivesse cara de "menu principal dentro do VIP": o herói ocupando a
linha inteira e as outras quatro em duplas. Isso substitui de propósito
o "um por linha" de 16/08; não é regressão. */
.mb-lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mb-lobby-grid .main-btn { min-height:120px; padding:18px 18px; }
.mb-lobby-grid .main-btn.mb-hero-btn { grid-column:1 / -1; min-height:128px; padding:22px 26px; }
.mb-lobby-grid .btn-title { line-height:1.02; }
/* Em tela estreita a dupla fica apertada: a descrição sai e sobra o essencial
(categoria + nome), que é o que o dedo procura. O herói mantém a dele. */
@media (max-width:560px){
.mb-lobby-grid { gap:10px; }
.mb-lobby-grid .main-btn { min-height:104px; padding:14px 13px; }
.mb-lobby-grid .main-btn:not(.mb-hero-btn) .btn-desc { display:none; }
.mb-lobby-grid .main-btn:not(.mb-hero-btn) .btn-title { font-size:1rem; }
}
/* Ações rápidas do topo: SÓ o emoji (o rótulo vive no title) */
.mb-ico { width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.25rem; line-height:1;
display:flex; align-items:center; justify-content:center; transition:.16s;
border:1px solid rgba(178,110,255,0.4); background:rgba(20,10,36,0.6); }
.mb-ico:hover { border-color:var(--gold); background:rgba(245,197,24,.12); transform:translateY(-2px); }
/* ── Sub-telas dos botões de topo (PALPITE · ENTRE NA LIGA) ──
Mesmo esqueleto da CARTEIRA VIP: vivem dentro do .mb-wrap e trocam de
lugar com o lobby, então não mexem no histórico nem no VOLTAR. */
.mb-sub { width:100%; display:flex; flex-direction:column; gap:14px; animation:brIn .3s ease; }
.mb-sub-head { display:flex; align-items:center; gap:10px; }
.mb-sub-back { background:none; border:1px solid rgba(255,255,255,.2); color:#fff; padding:8px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
.mb-sub-title { font-size:1.35rem; font-weight:900; color:var(--gold,#ffe600); letter-spacing:1px; }
.mb-sub-lead { color:#c7d3cc; font-size:1rem; line-height:1.5; }
.mb-sub-card { background:rgba(10,23,16,.62); border:1px solid rgba(0,200,75,.26); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.mb-sub-lbl { font-family:var(--font-tech); font-weight:800; font-size:.7rem; letter-spacing:2px; color:#8fbfa3; }
.mb-sub-input, .mb-sub-area { width:100%; box-sizing:border-box; padding:13px; border-radius:12px; border:1px solid rgba(0,200,75,.35);
background:#0d1117; color:#fff; font-family:var(--font-tech); font-size:1rem; }
.mb-sub-input:focus, .mb-sub-area:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,197,24,.15); }
.mb-sub-area { min-height:110px; resize:vertical; line-height:1.45; }
.mb-sub-msg { background:#0d1117; border:1px dashed rgba(255,255,255,.22); border-radius:12px; padding:13px;
font-family:var(--font-tech); font-size:.9rem; color:#cfd8e3; line-height:1.55; white-space:pre-wrap; }
.mb-sub-msg b { color:var(--gold,#ffe600); }
.mb-sub-bt { width:100%; padding:16px; border:none; border-radius:14px; font-weight:900; font-size:1.05rem; letter-spacing:.5px; cursor:pointer; }
.mb-sub-bt.zap { background:linear-gradient(135deg,#25d366,#128c7e); color:#04120a; }
.mb-sub-bt.mail { background:linear-gradient(90deg,var(--primary,#00c84b),var(--gold,#ffe600)); color:#04120a; }
.mb-sub-bt2 { width:100%; padding:13px; border-radius:12px; cursor:pointer; font-family:var(--font-tech); font-weight:700;
font-size:.8rem; letter-spacing:1px; color:#c7d3cc; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); }
.mb-sub-bt2:hover { color:#fff; border-color:var(--gold); }
.mb-sub-nota { color:#8a978f; font-size:.82rem; line-height:1.5; text-align:center; }
/* Validade do acesso */
.mb-validade { display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 8px;
padding:9px 14px; border-radius:12px; font-family:var(--font-tech); font-size:0.78rem; line-height:1.4;
text-align:center; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); color:#c3cbd8; }
.mb-validade b { color:#fff; }
.mb-validade.perto { background:rgba(255,196,0,.1); border-color:rgba(255,196,0,.45); color:#ffd97a; }
.mb-validade.perto b { color:#ffe08a; }
.mb-validade.venceu { background:rgba(255,71,87,.1); border-color:rgba(255,71,87,.45); color:#ff9aa4; }
.mb-renovar { font-family:var(--font-tech); font-weight:800; font-size:.7rem; letter-spacing:.8px;
color:#1a1400; background:linear-gradient(135deg,#ffe600,#ffce00); border:none; border-radius:9px;
padding:7px 12px; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.mb-renovar:hover { filter:brightness(1.07); }
/* Ritual dos 4 passos com ✅ persistente */
.mb-ritual { display:flex; flex-direction:column; gap:5px; margin:12px 0 4px; text-align:left; }
.mb-passo { display:flex; align-items:center; gap:9px; font-family:var(--font-tech); font-size:.82rem;
color:#9aa3b2; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.03);
border:1px solid var(--glass-border); transition:.18s; }
.mb-passo span { font-size:.95rem; line-height:1; flex-shrink:0; }
.mb-passo.ok { color:#8fe3c4; border-color:rgba(47,227,138,.35); background:rgba(47,227,138,.07);
text-decoration:line-through; text-decoration-color:rgba(143,227,196,.5); }
.mb-btn-1toque { background:linear-gradient(135deg,#ffe600,#ffb300) !important; }
.mb-card { position:relative; overflow:hidden; border-radius:15px; padding:16px 14px 15px; min-height:118px; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; cursor:pointer; transition:0.2s;
background:linear-gradient(135deg,#100320,#1d0a33 55%,#10061f); border:1.5px solid rgba(178,110,255,0.5);
box-shadow:0 8px 26px rgba(0,0,0,0.6), 0 0 26px rgba(150,80,255,0.16), inset 0 1px 0 rgba(200,150,255,0.12); }
.mb-card:hover { transform:translateY(-3px); border-color:#c9a3ff; box-shadow:0 16px 40px rgba(0,0,0,0.7), 0 0 38px rgba(150,80,255,0.34); }
.mb-card-bg { position:absolute; right:6px; top:2px; font-size:3.2rem; opacity:0.14; line-height:1; }
.mb-card-cat { position:relative; padding-left:12px; font-family:var(--font-tech); font-weight:700; letter-spacing:2px; font-size:0.55rem; color:#d9b3ff; opacity:0.9; text-transform:uppercase; }
.mb-card-cat::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:2px; background:#d9b3ff; }
.mb-card-ttl { font-family:var(--font-main); font-size:1rem; letter-spacing:0.5px; color:#e9d4ff; text-shadow:0 0 20px rgba(180,110,255,0.5); line-height:1.02; }
.mb-card-desc { font-family:var(--font-tech); font-size:0.62rem; color:#a888d0; line-height:1.25; }
.mb-card::after { content:''; position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(210,160,255,0.20),transparent); transform:skewX(-18deg); animation:vip-shine 3.6s ease-in-out infinite; }
.mb-card-hero { grid-column:1/-1; min-height:130px; border-color:rgba(255,215,0,0.55); background:linear-gradient(135deg,#1a1002 0%,#1d0a33 60%,#10061f 100%); box-shadow:0 12px 34px rgba(0,0,0,0.66), 0 0 34px rgba(255,200,0,0.16); }
.mb-card-hero .mb-card-cat { color:#ffe066; }
.mb-card-hero .mb-card-cat::before { background:#ffe066; }
.mb-card-hero .mb-card-ttl { font-size:1.4rem; color:#fff; text-shadow:0 0 24px rgba(255,200,0,0.4); }
.mb-card-hero .mb-card-bg { font-size:3.9rem; opacity:0.16; }
.mb-card-ribbon { position:absolute; top:11px; right:11px; z-index:3; font-family:var(--font-tech); font-weight:700; font-size:0.52rem; letter-spacing:1.5px; padding:4px 10px; border-radius:14px; text-transform:uppercase; }
.mb-ribbon-top { background:linear-gradient(135deg,#FFD700,#b8860b); color:#1a1200; box-shadow:0 0 14px rgba(255,215,0,0.5); }
.mb-ribbon-soon { background:rgba(178,110,255,0.2); color:#d9b3ff; border:1px solid rgba(178,110,255,0.45); }
.mb-card-soon { opacity:0.72; filter:saturate(0.75); }
.mb-card-soon::after { animation:none; }
/* ── resultado do VERIFICAR ── */
#mb-code-main { display:flex; flex-direction:column; gap:14px; }
.mb-verify-result { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:6px 2px 2px; }
.mb-vr-spin { font-size:2.4rem; }
.mb-vr-party { font-size:2.8rem; }
.mb-vr-mag { font-size:2.3rem; }
.mb-vr-title { font-family:var(--font-main); font-size:1.1rem; letter-spacing:0.5px; color:#fff; }
.mb-vr-title.mb-vr-ok { color:#7dffb8; }
.mb-vr-txt { font-family:var(--font-tech); font-size:0.9rem; color:#b9abda; line-height:1.45; }
.mb-vr-bar { width:100%; height:9px; border-radius:6px; background:rgba(255,255,255,0.08); overflow:hidden; position:relative; margin-top:2px; }
.mb-vr-bar::before { content:''; position:absolute; top:0; height:100%; width:42%; border-radius:6px; background:linear-gradient(90deg,transparent,#b26eff,#d9b3ff,transparent); animation:mb-vr-sweep 1.15s ease-in-out infinite; }
@keyframes mb-vr-sweep { 0%{ left:-42%; } 100%{ left:100%; } }
.mb-vr-go { width:100%; margin-top:4px; }
.mb-vr-btn { width:100%; font-family:var(--font-main); font-size:0.82rem; letter-spacing:0.6px; padding:13px; border-radius:12px; cursor:pointer; border:1.5px solid transparent; }
.mb-vr-retry { color:#cdbcf0; background:rgba(255,255,255,0.05); border-color:rgba(178,110,255,0.35); }
.mb-vr-retry.mb-vr-cooldown { opacity:0.55; cursor:wait; }
.mb-vr-quero { color:#1a1200; background:linear-gradient(135deg,#ffe066,#d4a017); border-color:rgba(255,220,80,0.7); }
.mb-vr-codigo { color:#d9b3ff; background:rgba(20,10,36,0.6); border-color:rgba(178,110,255,0.4); }
.mb-vr-or { font-family:var(--font-tech); font-size:0.62rem; letter-spacing:1px; color:#7d719f; text-transform:uppercase; }
.mb-btn-gold {
font-family:var(--font-main); font-size:1.05rem; letter-spacing:1.5px; cursor:pointer;
padding:18px 30px; border-radius:14px; border:1.5px solid rgba(255,220,80,0.7);
background:linear-gradient(135deg,#ffe066 0%,#f5c518 45%,#d4a017 100%); color:#1a1200;
box-shadow:0 8px 28px rgba(0,0,0,0.6), 0 0 30px rgba(255,200,0,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
transition:all 0.22s cubic-bezier(0.23,1,0.32,1);
}
.mb-btn-gold:hover { transform:translateY(-3px); filter:brightness(1.08); box-shadow:0 14px 36px rgba(0,0,0,0.7), 0 0 44px rgba(255,200,0,0.45); }
.mb-btn-gold.mb-btn-outline { background:rgba(20,14,0,0.6); color:var(--gold); border-color:rgba(255,215,0,0.55); box-shadow:0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(255,200,0,0.15); }
.mb-benef-title { font-family:var(--font-tech); font-size:0.78rem; letter-spacing:4px; color:#8a7fb0; text-transform:uppercase; margin-top:10px; }
.mb-benef-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; width:100%; }
.mb-benef-card {
position:relative; background:rgba(14,6,26,0.75); border:1px solid rgba(178,110,255,0.28);
border-radius:14px; padding:20px 18px 18px; display:flex; flex-direction:column; gap:8px;
box-shadow:0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(200,150,255,0.08);
}
.mb-benef-card.mb-destaque { grid-column:1/-1; border:1.5px solid rgba(255,215,0,0.5); background:linear-gradient(135deg,rgba(26,16,2,0.85),rgba(20,8,34,0.85)); box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 30px rgba(255,200,0,0.12); }
.mb-benef-badge { position:absolute; top:12px; right:12px; font-family:var(--font-tech); font-weight:700; font-size:0.6rem; letter-spacing:2px; padding:4px 10px; border-radius:20px; text-transform:uppercase; background:linear-gradient(135deg,#FFD700,#b8860b); color:#1a1200; box-shadow:0 0 14px rgba(255,215,0,0.4); }
.mb-benef-badge.mb-badge-breve { background:rgba(178,110,255,0.18); color:#d9b3ff; border:1px solid rgba(178,110,255,0.4); box-shadow:none; }
.mb-benef-icon { font-size:2rem; line-height:1; }
.mb-benef-name { font-family:var(--font-main); font-size:1.05rem; letter-spacing:1px; color:#fff; }
.mb-destaque .mb-benef-name { color:var(--gold); font-size:1.25rem; text-shadow:0 0 18px rgba(255,200,0,0.35); }
.mb-benef-desc { font-family:var(--font-tech); font-size:0.85rem; color:#9a8fb8; line-height:1.45; }
/* Tela do código — BEM-VINDO, IRMÃO */
.mb-overlay { position:fixed; inset:0; background:rgba(2,0,8,0.88); backdrop-filter:blur(8px); z-index:99998; display:none; align-items:center; justify-content:center; padding:18px; }
.mb-overlay.open { display:flex; }
.mb-code-box { position:relative; width:100%; max-width:480px; background:linear-gradient(160deg,#140826,#0a0414); border:1.5px solid rgba(178,110,255,0.45); border-radius:20px; padding:30px 26px 24px; box-shadow:0 40px 100px rgba(0,0,0,0.9), 0 0 40px rgba(150,80,255,0.2); display:flex; flex-direction:column; gap:14px; text-align:center; max-height:92vh; overflow-y:auto; }
.mb-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(0,0,0,0.5); color:#fff; font-size:0.95rem; cursor:pointer; }
.mb-close:hover { background:var(--danger); border-color:var(--danger); }
.mb-code-title { font-family:var(--font-main); font-size:1.5rem; letter-spacing:2px; color:#fff; margin-top:4px; }
.mb-code-sub { font-family:var(--font-tech); font-size:0.72rem; letter-spacing:3px; color:#b79fd8; text-transform:uppercase; }
.mb-code-value { font-family:var(--font-main); font-size:2.1rem; letter-spacing:5px; color:var(--gold); background:rgba(0,0,0,0.45); border:2px dashed rgba(255,215,0,0.5); border-radius:12px; padding:14px 10px; text-shadow:0 0 22px rgba(255,200,0,0.4); }
.mb-steps { display:flex; flex-direction:column; gap:7px; text-align:left; font-family:var(--font-tech); font-size:0.9rem; color:#c9bfe0; line-height:1.45; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:14px 16px; }
.mb-steps b { color:var(--gold); }
.mb-code-btns { display:flex; flex-direction:column; gap:10px; }
.mb-code-btns .mb-btn-gold { width:100%; padding:15px 20px; font-size:0.95rem; }
.mb-btn-verify { font-family:var(--font-main); font-size:1rem; letter-spacing:1.5px; cursor:pointer; width:100%; padding:16px 20px; border-radius:14px; border:1.5px solid rgba(60,220,130,0.65); background:linear-gradient(135deg,#2fd576,#15803d); color:#04150a; box-shadow:0 8px 26px rgba(0,0,0,0.6), 0 0 26px rgba(40,200,120,0.3); transition:all 0.22s; }
.mb-btn-verify:hover { transform:translateY(-2px); filter:brightness(1.08); }
.mb-hint { font-family:var(--font-tech); font-size:0.78rem; color:#8a7fb0; line-height:1.5; }
.mb-member-banner { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px 20px; border-radius:14px; border:1.5px solid rgba(60,220,130,0.55); background:linear-gradient(135deg,rgba(6,30,16,0.85),rgba(10,24,10,0.85)); font-family:var(--font-main); font-size:1rem; letter-spacing:1.5px; color:#7dffb8; box-shadow:0 8px 26px rgba(0,0,0,0.55), 0 0 26px rgba(40,200,120,0.2); }
.mb-member-banner b { font-family:var(--font-tech); font-weight:600; font-size:0.82rem; letter-spacing:1px; color:#9fd8b8; }
.mb-member-check { font-size:1.3rem; line-height:1; }
.mb-btn-ajuda { font-family:var(--font-tech); font-weight:700; font-size:0.82rem; letter-spacing:2px; cursor:pointer; padding:10px 26px; border-radius:22px; border:1px solid rgba(178,110,255,0.4); background:rgba(20,10,36,0.6); color:#d9b3ff; transition:all 0.2s; }
.mb-btn-ajuda:hover { border-color:var(--gold); color:var(--gold); }
.mb-vip-toggle { font-family:var(--font-tech); font-size:0.8rem; color:#8a7fb0; cursor:pointer; text-decoration:underline dotted; padding-top:4px; }
.mb-vip-toggle:hover { color:#d9b3ff; }
.mb-vip-row { display:flex; gap:8px; }
.mb-vip-row input { flex:1; min-width:0; padding:15px 12px; border-radius:11px; border:1.5px solid rgba(255,210,90,0.5); background:rgba(0,0,0,0.5); color:var(--gold); font-family:var(--font-main); font-size:1.05rem; letter-spacing:2px; text-transform:uppercase; text-align:center; outline:none; }
.mb-vip-row input:focus { border-color:#c9a3ff; box-shadow:0 0 0 2px rgba(150,80,255,0.25); }
.mb-btn-vip-usar, .mb-codigo-entrar { font-family:var(--font-main); font-size:0.9rem; letter-spacing:1px; cursor:pointer; padding:13px 20px; border-radius:10px; border:1.5px solid rgba(255,220,80,0.7); background:linear-gradient(135deg,#ffe066,#d4a017); color:#1a1200; }
.mb-btn-vip-usar:disabled, .mb-codigo-entrar:disabled { opacity:0.5; cursor:wait; }
.mb-codigo-obter { margin-top:2px; padding:15px; border-radius:12px; border:1.5px solid rgba(255,225,120,0.85); background:linear-gradient(135deg,#ffe680,#e0a91a); color:#1a1200; font-family:var(--font-main); font-size:1.08rem; letter-spacing:1px; cursor:pointer; box-shadow:0 0 22px rgba(255,200,60,0.5), 0 4px 14px rgba(0,0,0,0.4); animation:obter-pulse 2.2s ease-in-out infinite; }
.mb-codigo-obter:hover { filter:brightness(1.06); }
@keyframes obter-pulse { 0%,100% { box-shadow:0 0 16px rgba(255,200,60,0.4), 0 4px 14px rgba(0,0,0,0.4); } 50% { box-shadow:0 0 34px rgba(255,215,90,0.8), 0 4px 16px rgba(0,0,0,0.45); } }
@media (prefers-reduced-motion: reduce) { .mb-codigo-obter { animation:none; } }
/* Os dois blocos da vitrine: MEMBRO e QUERO ENTRAR. Mesma moldura da
.mb-codigo-box antiga, mas agora cada um com titulo proprio - a porta
paga deixa de ser rodape da caixa de codigo e vira bloco. */
.mb-bloco { display:flex; flex-direction:column; gap:10px; padding:16px 14px; margin-top:14px;
border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
.mb-bloco-ttl { text-align:center; font-family:var(--font-tech); font-size:.8rem; font-weight:800;
letter-spacing:1.6px; text-transform:uppercase; color:var(--gold,#e8b73a); }
.mb-bloco-entrar { border-color:rgba(255,225,120,.35); }
.mb-bloco-link { background:none; border:none; cursor:pointer; padding:4px;
font-family:var(--font-tech); font-size:.76rem; letter-spacing:.6px;
color:#8a7fb0; text-decoration:underline; }
.mb-bloco-link:hover { color:#c9bde8; }
/* Os 3 passos do OBTER CÓDIGO (16/09/2026). A StreamVIP passou a entregar o
código na hora, então a tela conta o caminho inteiro em vez de
"eu te mando o código". Mesma fonte e tamanho da nota de baixo. */
.mb-como-funciona { list-style:none; margin:10px 0 6px; padding:0 4px; display:flex; flex-direction:column; gap:6px; text-align:left; }
.mb-como-funciona li { font-family:var(--font-tech); font-size:.78rem; line-height:1.35; color:#cfd6e0; }
.mb-como-funciona li b { color:var(--gold); margin-right:4px; }
.mb-bloco-nota { text-align:center; font-family:var(--font-tech); font-size:.72rem;
letter-spacing:.5px; color:#8b98a8; line-height:1.5; }
.mb-ajuda-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.mb-ajuda-hint { font-family:var(--font-tech); font-size:0.78rem; color:#9a8fbf; text-align:center; }
@media (prefers-reduced-motion: reduce) { .mb-hero-gem { animation:none; } }
@media (max-width:760px) {
.mb-hero-title { font-size:1.9rem; }
.mb-code-value { font-size:1.7rem; letter-spacing:4px; }
}