/* legado corpo, linha 20087 do index.html original.
   Gerado pelo divisor. Nao editar a mao: quando esta tela
   for remodelada, este arquivo some inteiro. */

/* ═══ TIER LISTS — o hub (remodelado em 21/09/2026) ═══════════════════════
   Os dois botões viraram botão com arte, e a receita do visual deles mora no
   `css/telas/botao-arte.css`, do app novo. Aqui fica só a GRADE e a linha de
   explicação, que é o que pertence a esta tela.

   Um por linha, e largo: "TIER DE POSIÇÕES" não cabe numa linha só em botão
   de meia tela (139 px num celular de 320), e título em duas linhas desiguala
   a fileira.

   O que saiu daqui: `.tl-choose .main-btn` (o botão do legado, que não é mais
   usado) e a família `.tl-card*` inteira, que era de uma versão anterior
   desta tela e já não estava escrita em lugar nenhum do HTML. */
.tl-sub { font-family:var(--fonte-texto,sans-serif); color:var(--texto-fraco,#7c8a80);
    font-size:0.86rem; line-height:1.35; letter-spacing:.2px; margin:0 0 16px; }
.tl-choose { display:grid; grid-template-columns:1fr; gap:11px; }

/* ═══ BONOXS — hub ═══ */
.bnx-h2-chip { background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:9px; padding:7px 11px; display:inline-flex; box-shadow:0 4px 14px rgba(255,214,0,.3); }
.bnx-h2-chip img { height:19px; width:auto; display:block; }
.bnx-ad { display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:16px; margin-bottom:24px;
    background:linear-gradient(135deg, rgba(255,230,0,.14), rgba(255,210,0,.05)); border:1px solid rgba(255,214,0,.42); }
.bnx-ad-head { display:flex; align-items:center; gap:12px; }
.bnx-ad-badge { background:linear-gradient(135deg,#ffe600,#ffd200); border-radius:10px; padding:9px 13px; flex-shrink:0; box-shadow:0 4px 16px rgba(255,214,0,.3); }
.bnx-ad-badge img { height:18px; display:block; }
.bnx-ad-lbl { font-family:var(--font-tech); color:#c9a338; font-size:0.66rem; letter-spacing:1px; text-transform:uppercase; line-height:1.4; }
.bnx-ad-lbl b { color:#ffe600; }
.bnx-ad-title { font-family:var(--font-title); color:var(--text-color); font-size:1.15rem; letter-spacing:.5px; line-height:1.3; }
.bnx-ad-title b { color:#ffe600; }
.bnx-ad-cta { align-self:flex-start; text-decoration:none; font-family:var(--font-tech); font-weight:800; font-size:0.84rem; letter-spacing:1px;
    color:#141200; background:linear-gradient(135deg,#ffe600,#ffd200); padding:12px 22px; border-radius:10px; transition:.2s; white-space:nowrap; box-shadow:0 4px 16px rgba(255,214,0,.28); }
.bnx-ad-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
/* Um modo por linha, igual TIER LISTS e VER E COMPARAR. Lado a lado o título
   "SQUAD BUILDER" quebrava em duas linhas no celular e os dois cards ficavam
   apertados; empilhado cada um respira e usa a largura toda. */
.bnx-modes { display:grid; grid-template-columns:1fr; gap:14px; }
.bnx-modes .main-btn { min-height:128px; padding:22px 26px; }
.bnx-modes .btn-title { line-height:1.02; }
.bnx-soon { opacity:.82; }
@media (max-width:560px){ .tl-choose { gap:10px; } }