/* ═══════════════════════════════════════════════════════════════════════
   TOP 10 — a roupa nova
   ═══════════════════════════════════════════════════════════════════════

   Pedido do Boss em 22/09: *"TOP 10, aplicar nos botões e layout a estética
   do BOSS APP"*.

   É o mesmo tratamento que as NOTÍCIAS levaram em 21/09: TROCA A ROUPA e
   não encosta no miolo. O suspense (as cartas vêm borradas e a pessoa
   revela uma a uma), as cinco animações de revelação, o arrastar pra
   reordenar, os filtros de obtenção e o histórico continuam sendo o mesmo
   código do `UI.loadTop10View()`.

   Quem move os botões pra folha de OPÇÕES é o `js/telas/top10.js`, e o
   porquê de cada um está lá.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── OS DOIS QUE FICAM NA TELA ────────────────────────────────────────── */

#screen-top10-view .t10-essenciais {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%;
}
/* ⚠️ AS TRES NUMA LINHA SO ATE 375. As bases sao 96 e 104 porque, somadas
   ao OPCOES (96) e aos dois vaos (16), dao 312: cabe folgado no iPhone SE
   novo e ainda cabe em 320, que e o pior caso da regua. Com 130 e 150, o
   OPCOES caia sozinho numa segunda linha e o cabecalho ficava com dois
   andares so de botao. */
#screen-top10-view #top10-filter-select {
  flex: 1 1 96px; min-width: 0;
  height: 44px;
  padding: 0 12px;
  background: rgba(1, 14, 4, 0.72);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-forte);
}
/* O REVELAR TUDO é a AÇÃO da tela, então é ele o dourado. No legado ele era
   `btn-danger`, vermelho: vermelho no app do Boss quer dizer erro ou
   eliminado, e revelar não é nenhum dos dois. */
#screen-top10-view .t10-revelar {
  flex: 1 1 104px;
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo) !important; font-weight: 800 !important;
  font-size: 0.98rem !important; letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: #0a0f0c !important;
  background: linear-gradient(135deg, #f3c94a, var(--boss-ouro)) !important;
  border: none !important;
  border-radius: var(--canto-m) !important;
  box-shadow: 0 6px 20px rgba(232,183,58,0.28);
}
/* O ⚙️ virou OPÇÕES, com a palavra escrita.
   ⚠️ O `width: auto` não é enfeite: o `.btn-eye-toggle` do legado é um botão
   quadrado de largura CRAVADA (ele era só uma engrenagem). Com a palavra
   dentro, o texto vazava e o botão media 40 px com 43 px de conteúdo. */
#screen-top10-view .t10-opcoes {
  flex: 0 0 auto;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  height: 44px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px;
  background: linear-gradient(135deg, rgba(0,200,75,0.14), rgba(0,200,75,0.04)) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--canto-m) !important;
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.16);
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.74rem !important; letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--texto-forte) !important;
}
#screen-top10-view .t10-opcoes svg { width: 16px; height: 16px; color: var(--boss-verde); }

/* ── A JANELA DE OPÇÕES ───────────────────────────────────────────────
   A caixa em si e a receita do `css/telas/janela.css`, a MESMA do MERCADO
   DE FRAG: centrada, com X no canto, topo e pe parados. Aqui fica so o que
   e dos controles do legado que moram dentro dela. */

/* CADA OPÇÃO É UMA LINHA COM NOME ESCRITO. Era um emoji sem palavra
   nenhuma; agora é desenho + nome + o que ele faz. */
.t10-linha {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-m);
}
.t10-linha-ic { flex: 0 0 auto; display: flex; }
.t10-linha-ic svg { width: 21px; height: 21px; color: var(--boss-verde); }
.t10-linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t10-linha-txt b {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto-forte);
}
.t10-linha-txt small {
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: 0.68rem; line-height: 1.3; letter-spacing: 0;
  color: var(--texto-fraco); text-transform: none;
}
.t10-linha-vaga { flex: 0 0 auto; position: relative; }
/* O botão do legado vira um alvo redondo e limpo: o nome dele já está
   escrito na linha, então ele não precisa dizer nada. */
#t10-janela .t10-alvo {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,200,75,0.10) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--canto-m) !important;
}
#t10-janela .t10-alvo::after {
  content: ''; width: 9px; height: 9px;
  border-right: 2px solid var(--boss-ouro);
  border-top: 2px solid var(--boss-ouro);
  transform: rotate(45deg) translate(-1px, 1px);
}

/* A gaveta do legado, aberta dentro da folha. */
#t10-janela .t10-gaveta-aberta {
  display: flex !important; flex-wrap: wrap; gap: 8px;
  width: 100%; margin: 0 !important; padding: 0 !important;
  border: none !important;
}
#t10-janela #sel-reveal-anim {
  flex: 1 1 100%;
  height: 42px; padding: 0 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-m);
  font-family: var(--fonte-texto); font-size: 0.86rem;
  color: var(--texto-forte);
}
/* OS LIGA/DESLIGA com o nome escrito. */
#t10-janela .t10-liga {
  flex: 1 1 calc(50% - 4px);
  min-height: 40px;
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.68rem !important; letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--texto) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--borda-fraca) !important;
  border-radius: var(--canto-m) !important;
}
#t10-janela .t10-liga.on,
#t10-janela .t10-liga.active {
  color: #0a0f0c !important;
  background: var(--boss-ouro) !important;
  border-color: var(--boss-ouro) !important;
}
#t10-janela .t10-obtencao { flex: 1 1 100%; }
#t10-janela .t10-obt-rot {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-fraco);
}
#t10-janela .top10-filter-chip {
  font-family: var(--fonte-rotulo) !important; font-weight: 600 !important;
  font-size: 0.66rem !important; letter-spacing: 0.04em !important;
  color: var(--texto-forte) !important;
  background: rgba(0,200,75,0.10) !important;
  border: 1px solid var(--borda) !important;
  border-radius: 999px !important;
}
#t10-janela .top10-filter-chip.excluded {
  color: var(--texto-fraco) !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--borda-fraca) !important;
  text-decoration: line-through;
}
/* O painel de tema abre POR CIMA, e dentro da folha ele precisa vencer a
   linha em que mora - senão ele nasce atrás dela e o toque parece morto.
   É a mesma armadilha de empilhamento de 14/09 (z-index 5000 vs 5200). */
#t10-janela .tier-theme-panel {
  z-index: 10; right: 0; left: auto;
  background: linear-gradient(165deg, #06180c, #020a04) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--canto-m) !important;
}
#t10-janela .tier-theme-panel-title {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.62rem; letter-spacing: 0.12em; color: var(--boss-ouro);
  text-transform: uppercase;
}

/* ── O PÓDIO E A DICA ─────────────────────────────────────────────────── */

/* A dica da primeira visita, na caixa do app novo e sem o emoji da mãozinha
   virar o assunto dela. */
#screen-top10-view .t10-dica {
  background: rgba(232,183,58,0.07);
  border: 1px solid rgba(232,183,58,0.28);
  border-radius: var(--canto-m);
}
#screen-top10-view .t10-dica b {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.8rem; letter-spacing: 0.05em; color: var(--boss-ouro);
  text-transform: uppercase;
}
#screen-top10-view .t10-dica span {
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: 0.74rem; line-height: 1.4; letter-spacing: 0;
  color: var(--texto); text-transform: none;
}
#screen-top10-view .top10-filter-warning {
  font-family: var(--fonte-texto); font-size: 0.72rem; line-height: 1.4;
  color: var(--texto-fraco); text-transform: none;
}
/* O NÚMERO DA POSIÇÃO no pódio, no alfabeto do app. */
#screen-top10-view .rank-badge {
  font-family: var(--fonte-titulo); font-weight: 800;
  letter-spacing: 0.02em;
}

/* ── O CELULAR ────────────────────────────────────────────────────────── */

@media (max-width: 360px) {
  #screen-top10-view .t10-opcoes span { display: none; }
  #screen-top10-view .t10-revelar { font-size: 0.88rem !important; }
  #t10-janela .t10-liga { flex-basis: 100%; }
}