/* ═══════════════════════════════════════════════════════════════════════
   O CABEÇALHO DE TODAS AS TELAS
   ═══════════════════════════════════════════════════════════════════════

   O par do `js/nucleo/cabecalho.js`. Desenha duas peças:

     .cb-barra    a linha de cima (voltar + nome + o que a tela já tinha)
     .cb-capa     o bloco tipográfico (BOSS FC · NOME · risco · descrição)

   ⚠️ ESTE ARQUIVO PINTA POR CIMA DO LEGADO, então quase toda regra precisa
   vencer uma que já existe (`.tier-header`, `.qz-head`, `.sb-head`...). A
   força vem de `.cb-barra` estar na MESMA elemento que a classe antiga -
   duas classes no mesmo seletor ganham de uma - e não de `!important`.

   `!important` está proibido aqui pelo mesmo motivo de sempre neste app: o
   legado liga e desliga coisas pelo `style` inline, e `!important` vence o
   inline. Foi o que prendeu a pílula do BOSS EM LIVE na tela em 15/09.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A BARRA ──────────────────────────────────────────────────────────── */
/* ⚠️ (0,3,0) DE PROPOSITO. O `.tier-header` do legado pinta um PAINEL
   (fundo escuro, borda verde, sombra) com uma regra mais forte que a minha,
   e o BUGADOS, a TIER ESPECIAL e o MEU TOP 10 ficaram com uma "moldura" na
   barra - o Boss viu. A barra da ÁREA VIP não tem painel, e é o modelo. */
.screen .tier-header.cb-barra, .screen .cb-barra {
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
  border-bottom: 1px solid var(--borda, rgba(255,255,255,0.08));
  border-radius: 0;
}
.cb-barra {
  display: flex;
  align-items: center;
  /* ⚠️ `flex-start` E OBRIGATORIO AQUI. O `.tier-header` do legado nasce com
     `justify-content: space-between`, e era isso que jogava o `< VOLTAR` num
     canto, o nome no meio e o ⓘ no outro canto - o Boss viu em 16/09 e pediu
     *"< VOLTAR E O NOME na parte superior do lado esquerdo, e ao lado do nome
     da aba, deve ter o [i]"*. Os tres grudam na esquerda; o que sobrar da
     tela (filtros, som, DESFAZER) vai pra direita pelo `margin-left: auto`
     logo abaixo. */
  justify-content: flex-start;
  gap: var(--e2, 8px);
  flex-wrap: wrap;
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--e2, 8px);
  padding: 0 0 var(--e2, 8px);
  box-sizing: border-box;
  border-bottom: 1px solid var(--borda, rgba(255,255,255,0.08));
  background: none;
}

/* ═══ O VOLTAR E O NOME SAO DEFINIDOS UMA VEZ SO, AQUI ═══════════════════
   As tres barras do app usam estas duas classes:

     .tier-header  da AREA VIP ....... `.av-voltar cb-voltar` + `.av-topo-nome cb-nome`
     .av-tela-topo das telas de dentro `.av-tela-voltar cb-voltar` + `.av-tela-nome cb-nome`
     .cb-barra     das outras 23 ..... criadas pelo componente

   ⚠️ ISTO NASCEU DE UM ERRO MEU. Cada uma tinha a SUA copia dos mesmos
   valores, e copia diverge: o nome das telas de dentro estava 1.15rem
   BRANCO enquanto as outras tinham 0.95rem cinza, e o Boss viu
   (*"o VOLTAR com o restante que e importante esta num formato
   diferente"*). Enquanto forem tres regras, elas vao divergir de novo.
   ═══════════════════════════════════════════════════════════════════════ */
.cb-voltar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: auto;
  min-height: 44px;
  padding: 0 var(--e2, 8px) 0 0;
  background: none;
  border: 0;
  border-radius: var(--canto-p, 8px);
  color: var(--texto-fraco, #8fbfa3);
  font-family: var(--fonte-rotulo, inherit);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  flex: 0 0 auto;
  transition: color .12s, transform .12s;
}
.cb-voltar:hover { color: var(--texto-forte, #fff); background: none; }
.cb-voltar:active { transform: scale(0.97); }

.cb-nome {
  min-width: 0;
  margin: 0;
  font-family: var(--fonte-titulo, inherit);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--texto-fraco, #8fbfa3);
  text-transform: uppercase;
  text-align: left;
  text-shadow: none;
}
.cb-nome em { font-style: normal; color: var(--boss-ouro, #e8b73a); }

/* dentro da barra do componente ele ainda precisa vencer o `.btn` do legado */
.cb-barra .cb-voltar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: auto;
  min-height: 40px;
  padding: 6px 10px 6px 2px;
  background: none;
  border: 0;
  border-radius: var(--canto-p, 8px);
  color: var(--texto-fraco, #8fbfa3);
  /* medidos no `.av-voltar` da ÁREA VIP, que é o modelo: 0.78rem e peso
     normal. Estava 0.82rem/600 e ficava mais gordo que o dela. */
  font-family: var(--fonte-rotulo, inherit);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  flex: 0 0 auto;
  transition: color .12s, transform .12s;
}
.cb-barra .cb-voltar:hover { color: var(--texto-forte, #fff); background: none; }
.cb-barra .cb-voltar:active { transform: scale(0.97); }
.cb-voltar-ico {
  width: 15px; height: 15px; flex: 0 0 15px;
  transform: rotate(180deg);
}

/* O NOME DA TELA na barra. */
/* ⚠️ `0 1 auto` e nao `1 1 auto`: o nome NAO cresce, senao ele empurra o ⓘ
   pro fim da linha e os dois deixam de parecer um par. */
.cb-barra .cb-nome {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O que a tela traz alem desses tres (o logo da BONOXS, o som do quiz, o
   DESFAZER da tier) simplesmente segue na fila, depois do ⓘ. Nada de
   `margin-left: auto`: empurrar um item pro canto oposto e o que fazia a
   barra parecer tres coisas soltas em vez de um cabecalho. */

/* O título do legado sai de cena, mas continua no DOM: o JS da tela escreve
   nele por id e leria `null` se eu removesse. */
.cb-barra [data-cb-oculto] { display: none; }

/* O que a tela já tinha na barra (o ⓘ, o logo da BONOXS, o som do QUEM É A
   CARTA, o DESFAZER da tier) continua ali, só encolhe pra caber. */
.cb-barra > :not(.cb-voltar):not(.cb-nome) { flex: 0 0 auto; }
.cb-barra .boss-info-btn {
  width: 30px; height: 30px;
  font-size: 0.95rem;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
/* O ⓘ virou DESENHO em 22/09 (o glifo do sistema muda de cara em cada
   aparelho). 17px dentro do botão de 30: o círculo do desenho fica do mesmo
   tamanho que o glifo tinha, então nenhuma barra mudou de altura. */
.cb-barra .boss-info-btn .cb-ico-ajuda {
  width: 17px; height: 17px;
  display: block;
}

/* ── A CAPA ───────────────────────────────────────────────────────────── */
/* ⚠️ O "BOSS FC" VERDE SAIU DAQUI EM 16/09, a pedido do Boss: *"quero
   remover esse texto verde escrito BOSS FC e subir o cabeçalho para ficar um
   pouco mais próximo do < VOLTAR"*. Ele existia como assinatura, mas a barra
   logo acima já diz o nome da tela - eram duas linhas pequenas antes do
   título, e o título é quem manda.

   ⚠️ E OS NÚMEROS DAQUI SÃO OS MESMOS DA ÁREA VIP, um a um. Ela é o modelo
   aprovado, e "parecido" não serve: o Boss cobrou *"quero inclusive com a
   fonte que tá no cabeçalho escrito AREA VIP"*. Mexeu em um, mexe no outro
   (o `.av-cabecalho` do `css/telas/area-vip.css`). */
.cb-capa {
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--e4, 16px);
  padding: 0 0 var(--e2, 8px);
  box-sizing: border-box;
  text-align: center;
}
.cb-titulo {
  margin: 0;
  font-family: var(--fonte-titulo, inherit);
  font-weight: 700;
  /* o mesmo `clamp` da ÁREA VIP: num 320 o título não pode empurrar a tela,
     num 430 ele pode crescer, e no meio quem decide é a largura */
  font-size: clamp(2.6rem, 14vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--texto-forte, #fff);
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0,0,0,0.75);
  overflow-wrap: anywhere;        /* "RANKING POR ATRIBUTO" em 320 */
}
.cb-risco {
  width: 54px; height: 2px;
  margin: var(--e3, 12px) auto;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--boss-ouro, #e8b73a), transparent);
}
.cb-lead {
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--fonte-texto, inherit);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto, #c7d3cc);
}

/* ── OS AJUSTES POR TELA ───────────────────────────────────────────────
   Cada um destes existe porque a tela tinha uma regra própria que brigava
   com a barra. Estão escritos um a um, com o porquê, em vez de um seletor
   grande que "resolve tudo" e some com a razão. */

/* O MERCADO FRAG põe a barra de filtro DENTRO do cabeçalho. Ela precisa
   poder ocupar a linha inteira quando não couber ao lado do nome. */
#screen-montar .cb-barra { max-width: 1400px; }
#screen-montar .cb-capa { max-width: 1400px; }

/* A TIER LIST e o TOP 10 têm ferramentas demais pra caber numa linha só;
   deixar quebrar é melhor que espremer o nome até virar reticências. */
#screen-tier-view .cb-barra,
#screen-top10-view .cb-barra { max-width: 1200px; row-gap: 6px; }
#screen-tier-view .cb-capa,
#screen-top10-view .cb-capa { max-width: 1200px; }

/* O SQUAD BUILDER e o MODO DRAFT carregam o logo da BONOXS na barra, e ele
   é o pagamento do patrocínio: não encolhe e não sai. */
.cb-barra .sb-brand img,
.cb-barra .dft-brand img { height: 22px; width: auto; display: block; }

/* O QUEM É A CARTA abre a caixa de volume a partir do botão de som, que
   está dentro da barra. `position: relative` na barra é o que segura ela. */
#screen-quiz .cb-barra { position: relative; }

/* Em tela cheia (a tier e o top 10 têm um modo assim) o cabeçalho sai
   inteiro: a regra do legado já esconde a barra, e a capa vai junto. */
.fullscreen-mode .cb-capa { display: none; }

/* ── O CELULAR ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .cb-barra { gap: 6px; }
  /* ⚠️ o NOME NAO encolhe no celular: a barra da ÁREA VIP não encolhe, e o
     Boss quer as duas iguais. Quem dá espaço num 320 é o VOLTAR, que perde a
     palavra e fica só a seta (a regra logo abaixo). */
  .cb-capa { margin-bottom: var(--e4, 16px); }
  .cb-lead { font-size: 0.84rem; }
}

/* ⚠️ 320 px é o pior caso do app e é onde o nome da barra some primeiro.
   Abaixo desta largura o VOLTAR vira só a seta: a palavra "Voltar" custa
   58 px, e 58 px em 320 é o que decide se o nome da tela cabe. A seta
   sozinha continua sendo alvo de dedo de 40 px. */
@media (max-width: 360px) {
  .cb-barra .cb-voltar span { display: none; }
  .cb-barra .cb-voltar { padding-right: 4px; }
  .cb-voltar-ico { width: 17px; height: 17px; flex: 0 0 17px; }
}

/* ── A PRATELEIRA DOS GAMES ───────────────────────────────────────────
   A tela é do app novo (`js/telas/games.js`), então o cabeçalho dela já
   nasce no formato: a `.gm-head` é vestida com `.cb-barra` pelo
   componente, e o que está aqui é só o corpo. */
.gm-wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 20px 16px 0; box-sizing: border-box; }
.gm-lista { display: flex; flex-direction: column; gap: var(--e3, 12px); }
/* 23/09: os jogos viraram o botão com arte (css/telas/botao-arte.css). O
   título aqui é menor que o das TIER LISTS: "CABEÇADINHA DO BOSS" tem 19
   letras e, no tamanho de lá, quebrava em duas linhas num celular de 320
   e, com a arte, encostava no queixo do Boss. O EM BREVE fica apagado. */
.gm-lista .boss-cartao.faixa .titulo { font-size: 1.55rem; }
/* A caixa dos GAMES: 1200x470, a média das três molduras de 23/09. Mais
   deitada que a faixa das TIER LISTS (1200x487): a marreta veio em 2,63 e
   esticar até 2,46 passaria dos 6% que o olho aceita. Bate com a CAIXA do
   `ferramentas/arte-vazada.py`. */
.gm-lista .boss-cartao.faixa { aspect-ratio: 1200 / 470; }

/* ── A ARTE QUE VAZA ────────────────────────────────────────────────────
   Pedido dele: a marreta e a bola saindo da moldura. O botão deixa de
   cortar o que passa dele, e a arte é um elemento maior que o botão, com a
   sobra fixa do `arte-vazada.py`: 12% da altura em cima e embaixo, 3% da
   largura nos lados. Mexeu num, mexe no outro.
   O véu ganha canto redondo porque agora nada recorta ele: sem isso, o
   escuro do pé apareceria nos cantos, fora da moldura desenhada. E ele
   para ANTES da linha neon (4,5% em cima e embaixo, 1,8% nos lados): a
   caixa inclui o brilho de fora da moldura, e o escuro do pé por cima
   dele apagava a linha de baixo (visto na primeira tela, 23/09). */
.boss-cartao.vaza { overflow: visible; }
.boss-cartao-vaza {
  position: absolute; left: -3%; right: -3%; top: -12%; bottom: -12%;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  pointer-events: none; z-index: 0;
}
.boss-cartao.vaza::before { z-index: 1; border-radius: 12px; inset: 4.5% 1.8%; }
.boss-cartao.vaza > .rotulo,
.boss-cartao.vaza > .titulo,
.boss-cartao.vaza > .desc { z-index: 2; }
.gm-lista .boss-cartao.gm-embreve { opacity: .55; cursor: default; }
@media (max-width: 400px) {
  .gm-lista .boss-cartao.faixa .titulo { font-size: 1.3rem; }
}
.gm-jogo {
  display: flex; align-items: center; gap: var(--e3, 12px);
  width: 100%; min-height: 76px; padding: var(--e3, 12px) var(--e4, 16px);
  border: 1px solid var(--borda, rgba(255,255,255,0.1));
  border-radius: var(--canto-m, 12px);
  background: rgba(0,200,75,0.07);
  color: var(--texto, #c7d3cc); cursor: pointer; text-align: left;
  transition: transform .12s, border-color .12s;
}
.gm-jogo:active { transform: scale(0.99); }
.gm-embreve { background: rgba(255,255,255,0.03); cursor: default; }
.gm-ico { flex: 0 0 34px; color: var(--boss-ouro, #e8b73a); display: flex; }
.gm-ico svg { width: 30px; height: 30px; }
.gm-embreve .gm-ico { color: var(--texto-fraco, #8fbfa3); opacity: .55; }
.gm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-nome {
  font-family: var(--fonte-titulo, inherit); font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0.03em;
  color: var(--texto-forte, #fff); text-transform: uppercase;
}
.gm-embreve .gm-nome { color: var(--texto-fraco, #8fbfa3); }
.gm-desc { font-size: 0.8rem; line-height: 1.4; color: var(--texto-fraco, #8fbfa3); }
.gm-selo {
  flex: 0 0 auto;
  font-family: var(--fonte-rotulo, inherit); font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--boss-ouro, #e8b73a);
  border: 1px solid rgba(232,183,58,0.45); border-radius: 999px;
  padding: 5px 10px; white-space: nowrap;
}
.gm-embreve .gm-selo { color: var(--texto-fraco, #8fbfa3); border-color: var(--borda, rgba(255,255,255,0.12)); }
/* o título do legado dentro da barra: o componente esconde, este é o meu */
.gm-head .gm-title { margin: 0; }


/* A fileira de ferramentas que desce pra baixo do título: o seletor de
   posição e o REVELAR TUDO do TOP 10. São os MESMOS elementos do legado,
   só mudaram de pai, então os `onclick` e os `id` vieram junto. */
.cb-ferramentas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; width: 100%; max-width: 1200px;
  margin: 0 auto var(--e4, 16px); padding: 0 16px; box-sizing: border-box;
}
.cb-ferramentas select { max-width: 58vw; }