/* ═══════════════════════════════════════════════════════════════════════
   O BOTÃO COM ARTE — a receita, num lugar só
   ═══════════════════════════════════════════════════════════════════════

   Nasceu em 21/09/2026, quando o segundo menu (TIER LISTS) pediu o mesmo
   botão que o primeiro (COMPARAR) tinha ganhado de manhã. A primeira versão
   morava dentro do `VerComparar._injectCSS()`, no legado. Copiar aquilo pro
   segundo menu criaria duas receitas do mesmo botão, e um dia uma das duas
   ficaria pra trás: é assim que um app fica com duas caras.

   QUEM USA
     o hub do COMPARAR      (legado/js/04-app-principal.js, VerComparar)
     o hub das TIER LISTS   (legado/telas.html, .tl-choose)

   A RECEITA VEIO DO `.mn-cartao` (css/telas/menu.css), e cada regra dela
   custou uma entrega reprovada:

     - a caixa é a PROPORÇÃO DA ARTE. Altura fixa mais `cover` corta a
       beirada da imagem, e a moldura desenhada na arte nunca coincide com a
       borda do botão ("cortado e não arredondado", 14/09).
     - `min-width: 0`, senão a maior palavra de dentro decide a largura da
       coluna e duas colunas ficam diferentes.
     - com arte, o app não desenha NADA em volta: a moldura já vem desenhada.
       Fica só o recorte de 8 px, que é a rede pro dia em que chegar uma arte
       de canto reto.

   ⚠️ AS TRÊS PROPORÇÕES SÃO CRAVADAS, E BATEM COM A TABELA `GRUPOS` DO
   `ferramentas/arte.py`. Mexeu lá, mexe aqui:

       .quadro    640 x 457    os 4 do COMPARAR
       .heroi    1200 x 476    o COMPARAR grande
       .faixa    1200 x 487    os 2 da TIER LISTS

   Cravadas, e não herdadas da arte, porque a caixa precisa valer também pro
   botão SEM arte: dá pra trocar uma arte de cada vez, e enquanto ela não
   existe o botão mostra o desenho traçado.
   ═══════════════════════════════════════════════════════════════════════ */

.boss-cartao {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 11px; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--borda, rgba(0,200,75,.35));
  border-radius: 14px;
  background-color: #04140a;
  background-image: var(--arte, none);
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  box-shadow: var(--brilho-forte, 0 8px 32px rgba(0,0,0,.6));
  transition: transform .14s, border-color .15s;
}
.boss-cartao:active { transform: scale(0.98); }

/* ── AS TRÊS CAIXAS ───────────────────────────────────────────────────── */
.boss-cartao.quadro { aspect-ratio: 640 / 457; }
.boss-cartao.heroi  { aspect-ratio: 1200 / 476; padding: 13px 15px; }
.boss-cartao.faixa  { aspect-ratio: 1200 / 487; padding: 13px 15px; }

/* ── O VÉU ─────────────────────────────────────────────────────────────
   Mais forte que o do menu (26% em vez de 34%, fechando em 0,88 em vez de
   0,80), e o motivo é medida: as artes destes menus têm a moldura verde neon
   acesa ATÉ EMBAIXO, então o pé do cartão é a parte MAIS CLARA da imagem,
   justo onde o texto mora. No menu o pé é escuro e o véu de lá bastava. */
.boss-cartao::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%, transparent 26%,
    rgba(0,0,0,0.34) 55%, rgba(0,0,0,0.76) 82%, rgba(0,0,0,0.88) 100%);
}

/* com arte, o app não desenha nada em volta dela */
.boss-cartao.com-arte {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 8px;
}

/* ── O DESENHO TRAÇADO ─────────────────────────────────────────────────
   Segura o lugar enquanto a arte não chega, e some sozinho quando ela
   acende. É o que permite entregar uma arte de cada vez. */
.boss-cartao-ico {
  position: absolute; right: -10px; top: -8px;
  width: 64px; height: 64px; opacity: 0.12;
  color: var(--boss-verde, #00c84b);
  pointer-events: none;
}
.boss-cartao-ico svg { width: 100%; height: 100%; }
.boss-cartao.com-arte .boss-cartao-ico { display: none; }

/* SÓ OS TRÊS TEXTOS GANHAM `position: relative`, e a lista é POSITIVA de
   propósito (22/09/2026). A primeira versão dizia
   `> :not(.boss-cartao-ico):not(.vc-selo-novo)`, copiando o menu, e cada tela
   nova obrigava a acrescentar mais um `:not(...)`: o selo da BOSS TAÇA seria
   o terceiro. Esquecer um item dessa lista tem consequência grande — o
   elemento perde o `absolute`, vira um bloco dentro da coluna e estoura a
   altura do cartão inteiro (aconteceu no menu, com o ícone).
   Nomeando quem SOBE, qualquer enfeite que uma tela pendure aqui dentro
   continua com o posicionamento que ela deu, sem precisar avisar ninguém. */
.boss-cartao > .rotulo,
.boss-cartao > .titulo,
.boss-cartao > .desc {
  position: relative; display: block;
}

/* ── OS TEXTOS ─────────────────────────────────────────────────────────
   O rótulo é AMARELO, e não verde como no menu: a arte destes menus é verde
   acesa no pé, e verde em cima de verde não lê. A sombra é o cinto de
   segurança: se um dia chegar uma arte clara, o texto continua legível sem
   mexer em CSS nenhum. */
.boss-cartao .rotulo {
  font-family: var(--fonte-rotulo, sans-serif); font-weight: 700;
  font-size: 0.58rem; letter-spacing: 0.16em;
  color: var(--boss-amarelo, #f0d24d); text-transform: uppercase;
  margin-bottom: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.boss-cartao .titulo {
  font-family: var(--fonte-titulo, sans-serif); font-weight: 700;
  font-size: 1.15rem; line-height: 1; letter-spacing: 0.02em;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 2px 7px rgba(0,0,0,.9);
}
.boss-cartao .desc {
  font-family: var(--fonte-texto, sans-serif);
  font-size: 0.66rem; line-height: 1.2; color: #e7efe9;
  margin-top: 3px; text-shadow: 0 1px 5px rgba(0,0,0,.95);
}
.boss-cartao.heroi .titulo,
.boss-cartao.faixa .titulo { font-size: 2rem; }
.boss-cartao.heroi .desc,
.boss-cartao.faixa .desc { font-size: 0.74rem; max-width: 90%; }

@media (max-width: 400px) {
  .boss-cartao .rotulo { font-size: 0.52rem; }
  .boss-cartao .titulo { font-size: 1rem; }
  .boss-cartao .desc   { font-size: 0.6rem; }
  .boss-cartao.heroi .titulo,
  .boss-cartao.faixa .titulo { font-size: 1.7rem; }
  .boss-cartao.heroi .desc,
  .boss-cartao.faixa .desc { font-size: 0.68rem; }
}

/* ── O SELO NOVO ───────────────────────────────────────────────────────
   Acende sozinho por 24h, nunca escrito na mão. Mora no cartão do O QUE
   MUDOU, e a classe vem do legado (`vc-selo-novo`), por isso o nome antigo
   continua aqui: renomear ela quebraria quem acende. */
.boss-cartao .vc-selo-novo {
  position: absolute; top: 10px; right: 10px;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: var(--boss-vermelho, #ff4757); color: #fff;
  font-family: var(--fonte-titulo, sans-serif); font-size: 0.76rem;
  align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(255,71,87,.55);
}