/* ═══════════════════════════════════════════════════════════════════════
   TIER LIST ABERTA — a barra de cima, as faixas e os campos na janela
   ═══════════════════════════════════════════════════════════════════════

   O porquê de cada decisão está no `js/telas/tier.js`. Aqui é só a roupa.

       ANDAR 1   a busca, o seletor, COMPARAR e FILTROS. Fica.
       ANDAR 2   as faixas (BRIGA PRA TOP 10 → NÃO USARIA) com as cartas.
       A JANELA  usa a receita de `css/telas/janela.css`, a mesma do
                 MERCADO FRAG. Aqui só fica o que é dos campos do legado.

   ⚠️ A FAIXA DA CATEGORIA (23/09/2026). Antes a cor da categoria era o
   FUNDO CHAPADO da faixa e o nome ia em branco por cima: em amarelo não
   lia, e em vermelho gritava. Agora a faixa é escura, e a cor pinta o que
   tem de ler: o nome, o desenho da avaliação (a coroa, o joinha) e o fio
   da borda. Contraste vem do escuro, identidade vem da cor.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ANDAR 1: A BARRA QUE FICA ────────────────────────────────────────── */

.tl-topo {
  width: 100%; max-width: 1200px;
  display: flex; flex-direction: column; gap: 8px;
  margin: 2px 0 6px;
}
.tl-busca {
  display: flex; align-items: center; gap: 9px;
  padding: 0 13px;
  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);
}
.tl-busca > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--boss-verde); }
.tl-busca-vaga { flex: 1; min-width: 0; display: flex; }
/* ⚠️ é o MESMO `<input id="tier-search">` do legado, movido com o `oninput`
   dele. Muda só a casca: a moldura agora é a da linha inteira. */
#screen-tier-view input.tl-campo-busca,
#screen-tier-view input.tl-campo-busca:focus {
  flex: 1; min-width: 0; width: 100% !important;
  height: 44px !important; padding: 0 !important;
  background: none !important; border: none !important; outline: none; box-shadow: none !important;
  font-family: var(--fonte-texto); font-size: 0.92rem;
  color: var(--texto-forte);
}
#screen-tier-view input.tl-campo-busca::placeholder { color: var(--texto-fraco); }

.tl-linha { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.tl-sel-vaga { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-acoes-vaga { flex: 0 0 auto; display: flex; gap: 8px; margin-left: auto; }

/* o seletor da tier (o evento, ou o "adicionar posição") */
#screen-tier-view .tl-sel-vaga select {
  flex: 1 1 160px; min-width: 0; width: auto !important;
  height: 44px !important;
  padding: 0 36px 0 13px !important;
  background: rgba(1, 14, 4, 0.72) !important;
  border: 1px solid var(--borda) !important;
  border-radius: var(--canto-m) !important;
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
  font-family: var(--fonte-titulo) !important; font-weight: 700 !important;
  font-size: 1rem !important; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-forte) !important;
}
#screen-tier-view .tl-sel-vaga select:focus { border-color: var(--boss-ouro) !important; outline: none; }
#screen-tier-view #tier-pos-primary-wrap { flex: 1 1 100%; }
#screen-tier-view #tier-pos-primary-wrap select { flex: 1 1 160px; }

/* as etiquetas das posições escolhidas, na cor do app */
#screen-tier-view .tier-pos-tag {
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em;
  color: #0a0f0c;
  background: var(--boss-ouro); border-color: var(--boss-ouro);
  box-shadow: none; border-radius: var(--canto-p);
}
#screen-tier-view .tier-pos-tag .tier-pos-tag-x { color: #0a0f0c; background: rgba(0,0,0,0.18); }

/* COMPARAR e FILTROS, a par: o mesmo botão do MERCADO FRAG */
#screen-tier-view .btn.tl-botao {
  height: 44px; margin: 0;
  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) !important;
  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;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, border-color .15s, background .15s;
}
#screen-tier-view .btn.tl-botao:active { transform: scale(0.96); }
#screen-tier-view .btn.tl-botao svg { width: 16px; height: 16px; color: var(--boss-verde); }
/* ligado (o COMPARAR marcando cartas, o FILTROS com filtro vivo) vira dourado */
#screen-tier-view .btn.tl-botao.active,
#screen-tier-view .btn.tl-botao.tem {
  border-color: var(--boss-ouro) !important;
  background: rgba(232,183,58,0.12) !important;
  color: var(--texto-forte) !important;
}
#screen-tier-view .btn.tl-botao.active svg,
#screen-tier-view .btn.tl-botao.tem svg { color: var(--boss-ouro); }
.tl-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--boss-ouro); color: #0a0f0c;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0;
}
/* `hidden` perde pro display:inline-flex de cima; sem esta linha a bolinha
   mostra um 0 o tempo todo */
.tl-n[hidden] { display: none; }

/* a fileira do legado ficou vazia (tudo subiu pro tl-topo) e some; o painel
   também: os campos moram na janela agora */
#screen-tier-view .tier-filter-combo.tl-combo-vazio,
#screen-tier-view #tier-filtros-panel.tl-painel-vazio { display: none !important; }

/* FIXAR e CONTROLES, os dois que ficaram na barra do cabeçalho */
#screen-tier-view #btn-tier-sticky,
#screen-tier-view #btn-tier-eye {
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.62rem !important; letter-spacing: 0.08em !important;
  padding: 0 10px !important; height: 30px !important;
  color: var(--texto) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--borda-fraca) !important;
  border-radius: var(--canto-p) !important;
}

/* o aviso de ordenação, na fonte do app */
#screen-tier-view .tier-aviso-ordem {
  font-family: var(--fonte-texto); font-size: 0.8rem; line-height: 1.5;
  color: var(--texto-fraco); letter-spacing: 0;
}
#screen-tier-view .tier-aviso-ordem b { color: var(--boss-amarelo); }
#screen-tier-view .tier-aviso-ordem .tao-ic svg { width: 14px; height: 14px; color: var(--boss-ouro); display: block; }

/* ── OS CHIPS DO QUE ESTÁ FILTRADO (vivem na tela, fora da janela) ───── */

#screen-tier-view .tier-chips-ativos { padding: 6px 0 4px; max-width: 1200px; }
#screen-tier-view .tier-chip-f {
  height: 32px; padding: 0 6px 0 10px;
  border-radius: 999px;
  background: rgba(0,200,75,0.12); border: 1px solid var(--borda);
  font-family: var(--fonte-rotulo); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--texto);
}
#screen-tier-view .tier-chip-f b { color: var(--texto-forte); }
#screen-tier-view .tier-chip-f .tchip-svg { width: 14px; height: 14px; color: var(--boss-verde); flex: 0 0 auto; }
#screen-tier-view .tier-chip-f button { background: rgba(0,0,0,0.35); color: var(--texto); }
#screen-tier-view .tier-chip-f button:hover { background: var(--boss-vermelho); color: #fff; }
#screen-tier-view .tier-chip-f.tchip-modo { background: rgba(255,255,255,0.05); border-color: var(--borda-fraca); color: var(--texto-fraco); }
#screen-tier-view .tier-chip-limpar {
  height: 32px; border-radius: 999px;
  background: rgba(255,71,87,0.12); border: 1px solid rgba(255,71,87,0.42); color: #ff8f99;
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.08em;
}

/* ── ANDAR 2: AS FAIXAS ───────────────────────────────────────────────── */

#capture-tier {
  background: rgba(1, 10, 4, 0.55);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-g);
  box-shadow: none;
}
#capture-tier .tier-row {
  background: rgba(0, 10, 4, 0.5);
  border: 1px solid var(--borda-fraca);
  border-radius: 12px;
  margin-bottom: 8px;
}
/* no app não se reordena faixa: a alça de arrastar sai de vista */
#capture-tier .tier-row-drag-handle { display: none; }

/* A FAIXA: escura, com a cor da categoria no nome, no desenho e no fio.
   `--cat` e `--cat-fraco` são escritas pelo legado em cada faixa. */
#capture-tier .tier-label-box {
  --cat: #e8b73a; --cat-fraco: rgba(232,183,58,0.16);
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 10px 12px !important;
  background: linear-gradient(90deg, var(--cat-fraco), rgba(1,10,4,0.35) 70%);
  border-left: 4px solid var(--cat);
  border-radius: 10px 0 0 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#capture-tier .tier-label-ico {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cat);
  background: var(--cat-fraco);
  border: 1px solid var(--cat);
  box-shadow: 0 0 14px -4px var(--cat);
}
#capture-tier .tier-label-ico-svg { width: 20px; height: 20px; display: block; }
#capture-tier .tier-label-stack { align-items: flex-start; }
#capture-tier .tier-label-text {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.35rem !important; line-height: 1; letter-spacing: 0.05em;
  color: var(--cat);
  text-align: left; padding: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}
#capture-tier .tier-count {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto); text-shadow: none;
  margin-top: 4px; padding: 0;
}
#capture-tier .tier-count.vazia { opacity: 0.6; }
#capture-tier .tier-content { background: transparent; }

/* no celular a faixa fica em cima das cartas, largura inteira */
@media (max-width: 760px) {
  #capture-tier .tier-label-box { border-radius: 10px 10px 0 0; border-left-width: 0; border-bottom: 1px solid var(--cat-fraco); }
  #capture-tier .tier-label-text { font-size: 1.2rem !important; }
}
/* no computador ela é a coluna da esquerda, com o desenho em cima do nome */
@media (min-width: 761px) {
  #capture-tier .tier-label-box { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
  #capture-tier .tier-label-ico { width: 46px; height: 46px; }
  #capture-tier .tier-label-ico-svg { width: 26px; height: 26px; }
  #capture-tier .tier-label-stack { align-items: center; }
  #capture-tier .tier-label-text { text-align: center; font-size: 1.5rem !important; }
}

/* ── OS CAMPOS DO LEGADO, DENTRO DA JANELA ────────────────────────────── */

#tl-janela .tl-campo { width: 100%; display: flex; flex-direction: column; gap: 6px; }
#tl-janela .tl-campo + .tl-campo { margin-top: 12px; }
/* ⚠️ O legado dá `flex:1` a todo input[type=number]. Dentro de uma caixa em
   COLUNA isso vira flex-basis 0 e o campo encolhe pra 18px, ignorando a
   altura. O de OVER escapava porque mora numa linha. */
#tl-janela .tl-campo > input,
#tl-janela .tl-campo > select { flex: 0 0 auto; }
#tl-janela .tl-casca-vazia { display: none !important; }
/* grupo com UM campo só: quem nomeia é o título do grupo */
#tl-janela .bx-grupo-um .tl-rot { display: none; }
#tl-janela .tl-rot {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-fraco);
}
#tl-janela select,
#tl-janela input[type="text"],
#tl-janela input[type="number"] {
  width: 100% !important; min-width: 0;
  height: 44px !important;
  padding: 0 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--borda-fraca) !important;
  border-radius: var(--canto-m) !important;
  color: var(--texto-forte) !important;
  font-family: var(--fonte-texto) !important; font-size: 0.88rem !important;
  box-shadow: none !important;
}
#tl-janela select:focus,
#tl-janela input:focus { border-color: var(--boss-ouro) !important; outline: none; }
#tl-janela .tl-faixa { display: flex; align-items: center; gap: 8px; }
#tl-janela .tl-faixa .sep { color: var(--texto-fraco); font-family: var(--fonte-rotulo); font-size: 0.7rem; }

/* as posições dentro do evento: chips, o ligado em dourado */
#tl-janela .tier-pos-chips { gap: 6px; }
#tl-janela .tier-pos-chip-btn {
  padding: 9px 12px; min-height: 40px;
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--texto);
  background: rgba(255,255,255,0.04); border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-p);
}
#tl-janela .tier-pos-chip-btn.active {
  color: #0a0f0c; background: var(--boss-ouro); border-color: var(--boss-ouro);
  box-shadow: none; font-weight: 800;
}

/* o botão que abre a escolha de playstyles: um filtro entre dez, não a
   ação principal (a principal é o VER AS CARTAS do pé, o único dourado) */
#tl-janela .tps-abrir {
  min-height: 44px; border-radius: var(--canto-m);
  background: rgba(0,200,75,0.08); border: 1px solid var(--borda); color: var(--texto);
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
}
#tl-janela .tps-abrir.on { border-color: var(--boss-ouro); background: rgba(232,183,58,0.12); color: var(--texto-forte); }
#tl-janela .tps-mini-mais { font-family: var(--fonte-rotulo); color: var(--texto-fraco); }

/* a grade de atributos do legado, só repintada */
#tl-janela .attrf-il-lbl { font-family: var(--fonte-rotulo); font-weight: 600; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--texto-fraco); }
#tl-janela .attrf-seg button,
#tl-janela .attrf-seg .attrf-op,
#tl-janela .attrf-inline button {
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.66rem !important; letter-spacing: 0.04em !important;
  color: var(--texto) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--borda-fraca) !important;
  border-radius: var(--canto-p) !important;
  box-shadow: none !important;
}
#tl-janela .attrf-seg button.active,
#tl-janela .attrf-seg .attrf-op.active,
#tl-janela .attrf-inline button.active,
#tl-janela .attrf-inline .on {
  color: #0a0f0c !important;
  background: var(--boss-ouro) !important;
  border-color: var(--boss-ouro) !important;
}
#tl-janela .attrf-wr-select { height: 40px !important; }

/* o que aparece NA CARTA: os cinco botões de exibição do legado */
#tl-janela .filtros-btn-grid { gap: 8px; }
#tl-janela .filtros-btn-grid .btn {
  height: 44px !important; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-rotulo) !important; font-weight: 700 !important;
  font-size: 0.72rem !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;
  box-shadow: none !important;
}
#tl-janela .filtros-btn-grid .btn.active {
  color: var(--texto-forte) !important;
  border-color: var(--boss-ouro) !important;
  background: rgba(232,183,58,0.12) !important;
}
/* o LIMPAR do legado não entra: quem limpa é o LIMPAR TUDO do topo da janela */
#tl-janela #btn-resetar-filtros { display: none !important; }