/* legado corpo, linha 23989 do index.html original.
Gerado pelo divisor. Nao editar a mao: quando esta tela
for remodelada, este arquivo some inteiro. */
#pwa-install-btn {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 99999; display: none; align-items: center; gap: 10px;
padding: 15px 32px; border-radius: 999px;
border: 1.5px solid rgba(0,242,255,0.12); cursor: pointer;
background: linear-gradient(135deg, rgba(0,242,255,0.12), rgba(5,5,8,.95));
backdrop-filter: blur(10px);
color: #00f2ff;
font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 17px;
letter-spacing: .4px; white-space: nowrap;
box-shadow: 0 0 22px rgba(0,242,255,0.12), 0 4px 22px rgba(0,0,0,.85);
animation: pwaBlink 1.9s ease-in-out infinite;
}
#pwa-install-btn.show { display: inline-flex; }
@keyframes pwaBlink {
0%, 100% { box-shadow: 0 0 18px rgba(0,242,255,0.12), 0 4px 22px rgba(0,0,0,.85); }
50% { box-shadow: 0 0 42px rgba(0,242,255,0.12), 0 4px 22px rgba(0,0,0,.85); }
}
#pwa-ios-modal {
position: fixed; inset: 0; z-index: 100000; display: none;
align-items: center; justify-content: center; padding: 24px;
background: rgba(0,0,0,.82); backdrop-filter: blur(8px);
}
#pwa-ios-modal.show { display: flex; }
#pwa-ios-card {
max-width: 320px; width: 100%;
background: rgba(10,18,28,.97);
border: 1px solid rgba(0,242,255,0.12);
border-radius: 16px; padding: 26px 24px; text-align: center;
font-family: 'Chakra Petch', sans-serif; color: #c5c6c7;
}
#pwa-ios-card h3 {
font-family: 'Teko', sans-serif; color: #00f2ff;
margin: 0 0 14px; font-size: 23px; letter-spacing: 1px;
}
#pwa-ios-card p { font-size: 13.5px; line-height: 1.65; color: #8899aa; margin: 8px 0; }
#pwa-ios-card strong { color: #c5c6c7; }
#pwa-ios-close {
margin-top: 18px; padding: 10px 28px; border-radius: 999px;
border: 1px solid rgba(0,242,255,0.12); background: transparent;
color: #00f2ff; font-weight: 700; cursor: pointer;
font-family: 'Chakra Petch', sans-serif; font-size: 14px; letter-spacing: .4px;
}
/* ═══════════════════════════════════════════════════════════════════════
REPAGINADA 16/08/2026 — APROVADA E EM USO
Acompanha as 3 mudanças cosméticas desta data:
1. tipografia → família Barlow (Condensed nos títulos, Semi Condensed
nos rótulos, Barlow no texto) no lugar de Teko/Russo One/Chakra
Petch/Rajdhani;
2. menos brilho → alfa dos halos ciano derrubado (via --primary-glow
e --lobby-btn-glow, que cobrem 39 sombras, + 95 halos escritos na
mão limitados a 0.12); ouro puro #FFD700 → #e8b73a dessaturado;
3. os 16 emoji do menu viraram SVG de traço.
Nada aqui mexe em posição, tamanho de caixa ou comportamento — é tudo
cosmético. Versão anterior em _BACKUP\index.antes-tipografia-glow-icones-16ago.html
═══════════════════════════════════════════════════════════════════════ */
/* Teko e Russo One "pesam" muito no peso 400; a Barlow Condensed no mesmo peso
sairia fina demais. Devolve o peso onde a fonte é de título. */
body { font-weight: 500; letter-spacing: 0.1px; }
.btn-title, .page-title, .tier-label-text, .main-btn .btn-title,
h1, h2, h3, h4, .bh-title span, .cf-cmp-cardhead .nm { font-weight: 700; }
.btn-category, .btn-desc { font-weight: 500; }
/* O ícone é marca d'água (opacity .07, font-size 5.5rem): o traço precisa ser
fino nesse tamanho, senão vira borrão. */
.main-btn .btn-bg-icon svg { width: 1em; height: 1em; display: block; }
.main-btn .btn-bg-icon { opacity: 0.10; }
.main-btn:hover .btn-bg-icon { opacity: 0.18; }
.main-btn.btn-hero .btn-bg-icon { opacity: 0.09; }
.main-btn.btn-hero:hover .btn-bg-icon { opacity: 0.16; }
/* ── 16/08 · DISCIPLINA DO ACENTO NO LOBBY ────────────────────────────────
Antes, os 6 módulos comuns (notícias, comparar, tier lists, top 10, montar,
playstyles) vinham todos com a borda na cor do tema — no copa, verde. Somado
ao VIP (roxo), à Bonoxs (dourada) e à Arena (vermelha), davam 4 cores brigando
sem nenhuma diferença de tamanho pra dizer quem manda.
Agora: os comuns ficam com borda NEUTRA e só quem precisa destacar mantém cor
própria — VIP e Bonoxs (patrocínio). O hover continua acendendo na cor do tema,
porque aí a cor tem função: dizer "você está aqui".
Não mexo em --lobby-btn-border (13 usos espalhados, incluindo botões redondos);
a regra é mirada só nos tiles do lobby. */
#screen-lobby .main-btn:not(.vip-btn):not(.bonoxs-btn):not([data-mod="arena"]) {
border-color: rgba(255,255,255,0.10);
}
/* ── 16/08 (2ª rodada) · NITIDEZ ──────────────────────────────────────────
O que deixava o app com cara de "borrado":
1. o grão a 0.5 (desligado lá em cima);
2. os títulos com DUAS sombras — um halo colorido de 20px e uma sombra
preta de 10px de desfoque. Sombra desfocada embaixo de letra a 1.4rem
engorda o traço e come o contorno;
3. backdrop-filter: blur(5px) em TODO .btn — desfocar o que está atrás de
um botão pequeno só suja a borda dele.
Aqui a sombra vira curta e dura (1px, sem halo), que ainda garante leitura
por cima de imagem, e o blur sai dos botões pequenos. Os painéis grandes
(modais, cabeçalhos) mantêm o blur, onde ele tem função de separar camada. */
.main-btn .btn-title,
.tier-label-text,
.page-title {
text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}
.btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.app-logo, .app-logo img { text-shadow: none !important; filter: none !important; }
/* renderização de texto mais firme em tela de celular */
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
/* ── 16/08 · LOGO MENOR NO CELULAR ────────────────────────────────────────
A logo ocupava 84px de altura numa dobra de 812px. Em 52px ela continua
perfeitamente legível e devolve 32px pro conteúdo. Só no celular: no
desktop sobra espaço de sobra e ela segue no tamanho cheio. */
/* ── 16/08 · SELO "ATUALIZADO" ────────────────────────────────────────────
Era .62rem em #4a5a6a, no canto, quase invisível. Agora tem peso de selo,
com a bolinha piscando devagar. Continua no canto pra não roubar a dobra. */
#viewer-freshness {
position: absolute; top: 10px; left: 14px; z-index: 2; pointer-events: none;
display: flex; align-items: center; gap: 5px;
font-family: var(--font-tech, sans-serif); font-size: .6rem; font-weight: 600;
letter-spacing: 1.1px; color: var(--text-color); opacity: .8;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
border-radius: 100px; padding: 3px 9px 3px 7px; white-space: nowrap;
}
#viewer-freshness i {
width: 5px; height: 5px; border-radius: 50%; background: #2fe38a; flex: none;
box-shadow: 0 0 6px rgba(47,227,138,.9); animation: freshPulse 2.4s ease-in-out infinite;
}
@keyframes freshPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* ── 16/08 · SELO DO ACERVO (441 cartas + critério + autoria) ─────────────── */
/* Compacto de propósito: a versão de duas linhas custava 85px da primeira dobra e
empurrava 2 módulos pra fora num celular de 360x740. Aqui o número continua com
peso de selo e a nota cabe em uma linha só. */
#viewer-acervo { width: 100%; text-align: center; margin-top: 4px; }
#viewer-acervo .acv-num {
display: inline-flex; align-items: baseline; gap: 6px;
font-family: var(--font-tech, sans-serif); font-size: .66rem; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
background: color-mix(in srgb, var(--gold) 10%, transparent);
border-radius: 100px; padding: 4px 12px;
}
#viewer-acervo .acv-num b { font-family: var(--font-title, sans-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: .5px; }
#viewer-acervo .acv-nota {
font-family: var(--font-tech, sans-serif); font-size: .62rem; line-height: 1.3;
color: #8a95a3; margin: 5px auto 0; max-width: 340px; letter-spacing: .2px;
}
/* ── 18/08/2026 · a linha de ações do lobby ──────────────────────────────────
O contador "441 CARTAS AVALIADAS" virou o botão NOTA DO SEU TIME (que leva pro
ranking dos inscritos). Quando o Boss está em live, o BOSS EM LIVE entra ao lado
dele — mesma pílula, mesmo peso, só menores pra caberem juntos. */
#viewer-acervo .acv-acoes { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* ── 29/08/2026 · o botão deixou de parecer selo ────────────────────────────
Ele nasceu como cópia da .acv-num (a classe do SELO "441 CARTAS AVALIADAS"),
e por isso era uma pílula dourada sem ícone e sem seta: a única coisa tocável
do lobby que não parecia tocável. Agora veste a mesma roupa da .btn que o app
inteiro usa — canto de 6px, fundo #1e2830 — mais o ícone de escudo. Fica irmão
da fileira de botões logo abaixo dele. */
#viewer-acervo .acv-btn {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-body, sans-serif); font-size: .78rem; font-weight: 700;
letter-spacing: .5px; text-transform: uppercase; color: var(--gold);
border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
background: #1e2830;
border-radius: 6px; padding: 9px 18px; cursor: pointer;
transition: background .2s, box-shadow .2s, transform .2s;
}
#viewer-acervo .acv-btn svg { width: 15px; height: 15px; flex: none; }
#viewer-acervo .acv-btn:hover { background: #2a3540; box-shadow: 0 0 12px rgba(232,183,58,.18); transform: translateY(-2px); }
#viewer-acervo .acv-btn:active { transform: scale(.97); }
/* a live muda só a cor e a borda: mesmo fundo, mesma forma, pra nunca destoarem */
#viewer-acervo .acv-live {
color: #ff4757; border-color: rgba(255,71,87,.5);
animation: live-pulse 2s ease-in-out infinite;
}
#viewer-acervo .acv-live:hover { background: #33161d; box-shadow: 0 0 12px rgba(255,71,87,.22); }
/* em live os dois dividem a linha: encolhem juntos, sem mudar de estilo */
#viewer-acervo .acv-acoes.dupla .acv-btn { font-size: .7rem; letter-spacing: .2px; padding: 8px 11px; }
#viewer-acervo .acv-acoes.dupla .acv-btn svg { width: 14px; height: 14px; }
/* ── o que é a live de hoje ── */
#live-hoje { position: fixed; inset: 0; z-index: 9000; background: rgba(2,4,9,.94); display: none;
align-items: center; justify-content: center; padding: 20px; }
#live-hoje.on { display: flex; }
#live-hoje .lh-box { width: 100%; max-width: 400px; background: #0b1020; border: 1px solid rgba(255,71,87,.4);
border-radius: 16px; overflow: hidden; text-align: center; }
#live-hoje .lh-capa { width: 100%; display: block; }
#live-hoje .lh-corpo { padding: 22px 20px 20px; }
#live-hoje .lh-selo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-tech, sans-serif);
font-size: .62rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #ff4757;
border: 1px solid rgba(255,71,87,.45); border-radius: 100px; padding: 5px 13px; }
#live-hoje .lh-selo i { width: 7px; height: 7px; border-radius: 50%; background: #ff4757; display: inline-block;
animation: live-pulse 2s ease-in-out infinite; }
#live-hoje .lh-tit { font-family: var(--font-title, sans-serif); font-size: 1.5rem; line-height: 1.15; color: #fff; margin-top: 14px; }
#live-hoje .lh-sub { font-family: var(--font-tech, sans-serif); font-size: .8rem; color: #8a95a3; margin-top: 8px; }
#live-hoje .lh-tema { font-family: var(--font-tech, sans-serif); font-size: .95rem; line-height: 1.55; color: #e6ecf5;
margin-top: 14px; white-space: pre-wrap; }
#live-hoje .lh-acoes { display: flex; gap: 9px; margin-top: 20px; }
#live-hoje .lh-btn { flex: 1; border: none; border-radius: 10px; padding: 14px 10px; cursor: pointer;
font-family: var(--font-title, sans-serif); font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; }
#live-hoje .lh-assistir { background: linear-gradient(135deg, #b3121f, #ff3b47); color: #fff; }
#live-hoje .lh-depois { background: none; border: 1px solid rgba(255,255,255,.14); color: #98a3b3; }
/* ── 16/08 · CONVITE PRO TOUR (substitui a tela SOBRE na 1ª visita) ───────── */
#viewer-tour-convite {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 9500;
display: flex; align-items: center; gap: 10px;
background: rgba(12,14,20,.97); border: 1px solid rgba(255,255,255,.14);
border-radius: 14px; padding: 10px 10px 10px 16px;
box-shadow: 0 14px 40px rgba(0,0,0,.75);
font-family: var(--font-tech, sans-serif); font-size: .8rem; color: #c9d2dc;
max-width: calc(100vw - 24px);
}
#viewer-tour-convite #tour-ver {
background: var(--text-color); color: #06080d; border: none; border-radius: 9px;
padding: 9px 14px; min-height: 40px; font-family: var(--font-tech, sans-serif);
font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; cursor: pointer; white-space: nowrap;
}
#viewer-tour-convite #tour-nao {
background: none; border: none; color: #6c7683; font-size: 1rem; cursor: pointer;
width: 40px; height: 40px; flex: none;
}
#viewer-tour-convite #tour-nao:hover { color: #fff; }
@media (max-width: 420px) {
#viewer-tour-convite { font-size: .74rem; gap: 6px; padding-left: 12px; }
}
/* ── 16/08 · O AVISO DE TELA CHEIA DO CHROME ──────────────────────────────
O botão ⛶ chama a Fullscreen API, e o Chrome do Android SEMPRE mostra o
aviso "para sair da tela cheia, arraste de cima para baixo". Esse aviso é
do navegador: nenhuma API da página apaga, esconde ou encurta ele.
A saída é não precisar da API — o manifest passou a pedir
"display": "fullscreen", então o app INSTALADO já abre sem barra nenhuma.
Quando isso acontece, o botão ⛶ não tem mais função e some daqui, pra
ninguém acionar o aviso à toa. No navegador comum (não instalado) ele
continua existindo, porque ali ainda é o único jeito de ir a tela cheia. */
@media (display-mode: fullscreen) {
#btn-circle-fs { display: none !important; }
/* Sem barra de status, o topo da tela é área livre — e em celular com entalhe
(notch/furo da câmera) o conteúdo entraria por baixo dele. Empurra tudo pelo
tamanho real do entalhe; em aparelho sem entalhe, env() devolve 0 e nada muda.
Vai no BODY e não nas telas porque cada tela tem seu próprio padding-top
(16, 52, 56px) — mexer em cada uma quebraria os espaçamentos já ajustados.
O box-sizing:border-box global evita que isso crie rolagem extra.
Os botões flutuantes (config e ⛶) já compensavam safe-area por conta própria. */
body { padding-top: env(safe-area-inset-top, 0px); }
}
/* ── 16/08 (3ª rodada) · RESPIRO NO CELULAR ───────────────────────────────
Na 2ª rodada eu apertei demais pra ganhar dobra: a logo tinha caído pra 52px,
sobravam 4px entre a fila de emojis e os módulos, e os módulos tinham só 8px
entre si — ficavam praticamente colados.
Medidas de agora (375x812): logo 66px, 20px entre a fila e a grade, 14px
entre os módulos. O cabeçalho vai a ~215px, ainda bem abaixo dos 251px
originais, e os 8 módulos continuam cabendo na primeira dobra. */
@media (max-width: 760px) {
.app-logo img { max-height: 66px; }
.app-logo { font-size: 2.8rem; max-height: 80px; }
.lobby-header-wrap { margin-bottom: 4px; }
/* a fila de emojis descola dos módulos */
#viewer-quick-row { margin-bottom: 20px !important; }
/* e os módulos descolam entre si */
#lobby-grid { gap: 14px !important; }
}