/* ═══════════════════════════════════════════════════════════════════════
   O GRAMADO — o campo, os 11 espaços e o banco de 7
   ═══════════════════════════════════════════════════════════════════════

   Nasceu em 22/09/2026, com o pedido do Boss: *"em SQUAD BUILDER, quero
   trocar o estádio [...] vamos adicionar a função de adicionar 7 cartas no
   banco, mas o banco não conta para o over, só os titulares"* e *"modo
   draft vai usar o mesmo gramado do squadbuilder"*.

   UMA FOLHA SÓ PRAS DUAS TELAS, e isso é a decisão que mais importa aqui.
   Antes o SQUAD BUILDER e o MODO DRAFT desenhavam o campo cada um do seu
   jeito (o draft até reaproveitava a classe `.sb-pitch`, mas tinha o
   próprio banco em `.dft-bench`). Duas receitas do mesmo componente é como
   um app fica com duas caras: um dia mexem numa e esquecem a outra. É a
   mesma lição do `botao-arte.css`, de 21/09.

   ═══════════════════════════════════════════════════════════════════════
   O CAMPO É UMA ARTE, E OS NÚMEROS SÃO MEDIDOS
   ═══════════════════════════════════════════════════════════════════════

   Até 22/09 o campo era desenhado em CSS (um degradê listrado com duas
   linhas brancas). A arte do Boss existia desde 15/09 em
   `img/campo/campo.webp` e NUNCA tinha sido ligada em lugar nenhum.

   O `inset` do `.sb-gramado` aqui embaixo NÃO é chute e não foi copiado na
   mão: ele sai do `ferramentas/campo.py`, que MEDE na arte onde está a
   linha branca que contorna o gramado, e imprime esta linha pronta.

       cima 7.64%   baixo 91.19%   esquerda 10.22%   direita 89.58%
       (arte de 22/09/2026, 1360x2280)

   ⚠️ TROCOU A ARTE? Rode o `campo.py` de novo e cole o número que ele der.
   A arte nova pode ter a moldura mais grossa, e aí o goleiro cai em cima
   da arquibancada.

   ⚠️ E A CARTA É 19% DO GRAMADO, nunca da imagem. Ela era 16,5% até 22/09,
   quando o Boss disse que estavam *"muito pequenas"*. O teto não é gosto: é
   a fileira MAIS APERTADA de todas as 34 formações (205 pares de vizinhos
   medidos). Pra crescer, o `_layout` teve que abrir o espalhamento antes:

       antes   centrais a 19% · lateral em 11%  ->  carta 16,5%
       agora   centrais a 20% · lateral em 10%  ->  carta 19%  (+32% de área)

   Mais que isso não cabe: quem aperta passa a ser a linha de CINCO
   defensores (5-2-2-1), e cinco cartas em 80% de largura dão 20% pra cada,
   e ponto. Quem refaz esta conta é `testes/tamanho-das-cartas.test.mjs`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── O CAMPO ──────────────────────────────────────────────────────────── */

#screen-squad .sb-pitch,
#screen-draft .sb-pitch {
  position: relative;
  width: 100%; max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 68 / 114;
  border-radius: 16px;
  overflow: hidden;
  /* a arte inteira, sem corte e sem repetir. O `cover` cortaria a moldura
     neon desenhada na beirada, e aí o canto arredondado do CSS brigaria
     com o canto desenhado. */
  background: #04140a var(--campo, none) center / 100% 100% no-repeat;
  border: 1px solid rgba(0, 200, 75, 0.30);
  box-shadow: var(--brilho-forte, 0 8px 32px rgba(0,0,0,.6));
}
/* As marcações que o CSS antigo desenhava por cima saem de cena: agora elas
   estão DENTRO da arte, e duas linhas do meio no mesmo campo é o tipo de
   coisa que ninguém nota na hora e incomoda pra sempre. */
#screen-squad .sb-pitch::before,
#screen-squad .sb-pitch::after,
#screen-draft .sb-pitch::before,
#screen-draft .sb-pitch::after { content: none; }
#screen-squad .sb-mid,
#screen-draft .sb-mid { display: none; }

/* O RETÂNGULO JOGÁVEL. É ele o pai dos 11 espaços, e é por isso que os
   `left:%` e `top:%` que o JS escreve caem no lugar certo: eles passam a
   ser porcentagem DO GRAMADO, e não da imagem com moldura. */
.sb-gramado {
  position: absolute;
  inset: 7.64% 10.42% 8.81% 10.22%;
  pointer-events: none;   /* o vão entre as cartas não recebe toque */
}
.sb-gramado > * { pointer-events: auto; }

/* ── OS 11 ESPAÇOS ────────────────────────────────────────────────────── */

#screen-squad .sb-slot,
#screen-draft .sb-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  /* 19% E O MAXIMO QUE CABE, medido nas 34 formacoes (22/09). A fileira
     mais apertada de todas passou a ter 20% depois que o `_layout` abriu o
     espalhamento, entao sobra 1% de respiro. O porque esta no
     `legado/js/06-squad-builder.js`, no bloco O ESPALHAMENTO.
     ⚠️ Mexeu? O teste `testes/tamanho-das-cartas.test.mjs` refaz a conta. */
  width: 19%;
  max-width: 92px;
  /* QUADRADO, decisão do Boss em 16/09: a imagem da carta é 300x300, e
     quadrada ela aparece inteira. Em 3/4 o topo da carta era cortado. */
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(1, 10, 4, 0.42);
  border: 1.5px dashed rgba(160, 255, 195, 0.45);
  border-radius: 9px;
  cursor: pointer;
  transition: transform .14s, border-color .15s, background .15s;
}
#screen-squad .sb-slot:hover,
#screen-draft .sb-slot:hover {
  border-color: var(--boss-ouro);
  background: rgba(232, 183, 58, 0.16);
  transform: translate(-50%, -50%) scale(1.06);
}
#screen-squad .sb-slot.filled,
#screen-draft .sb-slot.filled {
  border-style: solid; border-color: transparent; background: transparent;
}
/* O ESCOLHIDO PRA TROCA. O anel dourado é o que responde ao primeiro toque
   do "toca em quem vai trocar, toca no outro": sem ele o primeiro toque
   parece não ter feito nada. */
#screen-squad .sb-slot.sb-slot-sel,
#screen-draft .sb-slot.sb-slot-sel {
  border-color: var(--boss-ouro);
  box-shadow: 0 0 0 2px var(--boss-ouro), 0 0 18px rgba(232,183,58,.55);
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 6;
}
#screen-squad .sb-slot-card,
#screen-draft .sb-slot-card {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 18%;
  border-radius: 7px;
}
/* A POSIÇÃO no espaço vazio. Em Barlow Condensed e não na fonte antiga:
   é o mesmo alfabeto do resto do app novo. */
#screen-squad .sb-slot-emptypos,
#screen-draft .sb-slot-emptypos {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: rgba(220, 245, 230, 0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* ── O BANCO DE 7 ─────────────────────────────────────────────────────── */

/* Ele fica IMEDIATAMENTE depois do gramado (pedido do Boss), e por isso é
   uma faixa larga e baixa: quem acabou de olhar o campo tem que ver o banco
   sem rolar a tela de novo. */
.sb-banco-wrap {
  width: 100%; max-width: 460px;
  margin: 10px auto 0;
}
.sb-banco-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 7px;
}
.sb-banco-titulo {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--boss-ouro);
}
.sb-banco-conta {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--texto-fraco);
}
/* SETE NUMA LINHA SÓ, sempre. `1fr` em vez de largura fixa porque num
   celular de 320 sete quadrados de tamanho fixo estouram a linha e o
   sétimo cai sozinho embaixo - e banco com 6+1 lê como erro. */
.sb-banco {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.sb-banco-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(1, 14, 4, 0.66);
  border: 1.5px dashed rgba(160, 255, 195, 0.35);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .14s, border-color .15s, background .15s;
}
.sb-banco-slot:active { transform: scale(0.94); }
.sb-banco-slot:hover { border-color: var(--boss-ouro); background: rgba(232,183,58,.12); }
.sb-banco-slot.filled { border-style: solid; border-color: rgba(0,200,75,.35); background: #04140a; }
.sb-banco-slot.sel {
  border-color: var(--boss-ouro);
  box-shadow: 0 0 0 2px var(--boss-ouro), 0 0 14px rgba(232,183,58,.5);
}
.sb-banco-carta {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 18%;
}
.sb-banco-vazio {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: rgba(200, 235, 215, 0.55);
}
/* O RÓTULO da posição, por cima da carta. Fundo chapado e não sombra: sobre
   a arte de uma carta dourada, texto com sombra some. */
.sb-banco-pos {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1px 0;
  background: rgba(1, 8, 3, 0.82);
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.5rem; letter-spacing: 0.06em; line-height: 1.3;
  color: var(--texto-forte);
  text-align: center;
  white-space: nowrap; overflow: hidden;
}

/* A LINHA QUE EXPLICA O BANCO. Ela existe porque sem ela a primeira
   pergunta de todo mundo seria "por que o over não subiu?", e a resposta
   tem que estar do lado da causa, não num (i) que ninguém abre. */
.sb-banco-nota {
  margin-top: 7px;
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 10px;
  background: rgba(0, 200, 75, 0.07);
  border: 1px solid var(--borda-fraca);
  border-radius: 9px;
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: 0.68rem; line-height: 1.35;
  color: var(--texto);
}
.sb-banco-nota svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--boss-verde); margin-top: 1px; }
.sb-banco-nota b { color: var(--texto-forte); font-weight: 700; }

/* ── O PAINEL DO LADO, NA ROUPA NOVA ──────────────────────────────────── */

#screen-squad .sb-side {
  background: var(--fundo-carta);
  border: 1px solid var(--borda);
  border-radius: var(--canto-g);
  box-shadow: var(--brilho-verde, none);
  padding: 16px;
}
#screen-squad .sb-side-h {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.2rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto-forte);
}
#screen-squad .sb-count {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--boss-ouro);
  margin-bottom: 14px;
}
#screen-squad .sb-emblem-lbl {
  font-family: var(--fonte-texto); font-size: 0.72rem; line-height: 1.35;
  color: var(--texto-fraco); margin-bottom: 7px;
}
#screen-squad .sb-emb-chip {
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.8rem;
  color: var(--texto); background: rgba(255,255,255,.04);
  border: 1px solid var(--borda-fraca); border-radius: var(--canto-p);
}
#screen-squad .sb-emb-chip.active {
  background: var(--boss-ouro); border-color: var(--boss-ouro); color: #0a0f0c;
}
#screen-squad .sb-generate {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #0a0f0c;
  background: linear-gradient(135deg, #f3c94a, var(--boss-ouro));
  border: none; border-radius: var(--canto-m);
  padding: 14px 0;
  box-shadow: 0 6px 22px rgba(232,183,58,.30);
}
#screen-squad .sb-act,
#screen-squad .sb-ract {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--texto);
  background: rgba(0, 200, 75, 0.08);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
  transition: transform .12s, border-color .15s, background .15s;
}
#screen-squad .sb-act:active,
#screen-squad .sb-ract:active { transform: scale(0.97); }
#screen-squad .sb-act:hover,
#screen-squad .sb-ract:hover {
  color: var(--texto-forte); border-color: var(--boss-ouro);
  background: rgba(232,183,58,.12);
}
#screen-squad .sb-tip {
  font-family: var(--fonte-texto); font-size: 0.7rem; color: var(--texto-fraco);
}
#screen-squad .sb-clear {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--texto-fraco);
}

/* ── A FAIXA DA BONOXS ────────────────────────────────────────────────── */

/* O patrocínio continua com o amarelo dele (é a marca da BONOXS, não a do
   Boss), mas a caixa vira a do app novo: mesmo canto, mesma borda. */
#screen-squad .sb-spon,
#screen-draft .dft-spon {
  border-radius: var(--canto-m);
  border: 1px solid rgba(255, 214, 0, 0.28);
  background: rgba(255, 214, 0, 0.06);
}
#screen-squad .sb-spon-txt {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.05em; color: var(--texto);
}
#screen-squad .sb-spon-txt b { color: #ffe600; font-weight: 800; }

/* ── O SELETOR DE FORMAÇÃO ────────────────────────────────────────────── */

#screen-squad .sb-form-select {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto-forte);
  background: linear-gradient(135deg, rgba(0,200,75,0.16), rgba(0,200,75,0.05));
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.18);
}
#screen-squad .sb-form-box,
#screen-squad .sb-picker-box,
#screen-squad .sb-report-box {
  background: linear-gradient(165deg, #06180c, #020a04);
  border: 1px solid var(--borda);
  border-radius: var(--canto-g);
}
#screen-squad .sb-form-opt {
  font-family: var(--fonte-rotulo); font-weight: 700; font-size: 0.78rem;
  color: var(--texto); background: rgba(255,255,255,.04);
  border: 1px solid var(--borda-fraca); border-radius: var(--canto-p);
}
#screen-squad .sb-form-opt.active {
  background: var(--boss-ouro); border-color: var(--boss-ouro); color: #0a0f0c;
}

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

@media (max-width: 820px) {
  #screen-squad .sb-side { position: static; margin-top: 14px; }
}
/* Num celular estreito o banco precisa de cada pixel: o vão cai pra 3 px e
   o rótulo encolhe, mas os SETE continuam na mesma linha. */
@media (max-width: 360px) {
  .sb-banco { gap: 3px; }
  .sb-banco-pos { font-size: 0.45rem; }
  .sb-banco-vazio { font-size: 0.64rem; }
}