/* ═══════════════════════════════════════════════════════════════════════
   MODO DRAFT — a roupa nova
   ═══════════════════════════════════════════════════════════════════════

   Pedido do Boss em 22/09: *"vamos aprimorar todo layout do MODO DRAFT
   para estética nova do BOSS APP, bem enfeitada como estamos fazendo nessa
   atualização [...] e as telas do jogo simulado e o demais deve seguir na
   estética do NOVO BOSS APP"*.

   O QUE ESTA FOLHA FAZ, E O QUE ELA NAO FAZ
   ═════════════════════════════════════════
   Ela troca a CASCA: cor, letra, borda, canto e brilho. Nao encosta em
   nenhuma conta. O sorteio por balde de evento, o capitao, as azaradas, a
   nota viva, o mundial simulado e os recordes continuam exatamente as
   mesmas linhas do `legado/js/07-draft.js` - conta que ja bate continua a
   mesma conta.

   O campo e o banco NAO estao aqui: eles moram no `gramado.css`, porque
   sao os MESMOS do SQUAD BUILDER. Esta folha e so o resto do draft: a
   abertura, as formacoes, o sorteio das tres, a nota, o mundial e o fim.

   O VOCABULARIO (todos do `css/tokens.css`)
     letra grande  Barlow Condensed 800, caixa alta, espacada
     letra de rotulo  Barlow Semi Condensed 600/700
     texto corrido  Barlow 400, caixa normal (nunca caixa alta: bloco de
                    texto todo em maiuscula nao se le, se olha)
     caixa         fundo quase preto, borda verde fraca, canto 18, e uma
                   linha de luz na borda de cima
     destaque      o ouro #e8b73a. Um destaque por tela, nunca dois.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A CAIXA PADRAO DO DRAFT ──────────────────────────────────────────── */

#screen-draft .dft-intro-hero,
#screen-draft .dft-nota-box,
#screen-draft .dft-end-box,
#screen-draft .dft-chv-wrap,
#screen-draft .dft-rec {
  background: linear-gradient(165deg, rgba(6,24,12,0.96), rgba(2,10,4,0.98));
  border: 1px solid var(--borda);
  border-radius: var(--canto-g);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.16), 0 10px 34px rgba(0,0,0,0.6);
}

/* ── A ABERTURA ───────────────────────────────────────────────────────── */

/* O dado de emoji saiu em 22/09 e entrou o DESENHO DO PROPRIO BOTAO do
   MODO DRAFT, o mesmo do `icones.js`. Regra do Boss (16/09): emoji de
   celular e cara de IA, e a tela que explica um botao usa a arte dele. */
#screen-draft .dft-intro-ic {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin: 0 auto 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(0,200,75,0.22), rgba(0,200,75,0.04));
  border: 1px solid var(--borda);
}
#screen-draft .dft-ic-svg { width: 34px; height: 34px; color: var(--boss-verde); }
#screen-draft .dft-intro-ttl {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 2.3rem; letter-spacing: 0.05em; line-height: 1;
  color: var(--texto-forte); text-transform: uppercase;
}
#screen-draft .dft-intro-ttl span { color: var(--boss-ouro); }
#screen-draft .dft-intro-sub {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.07em; line-height: 1.5;
  color: var(--texto); text-transform: uppercase;
}
#screen-draft .dft-intro-sub b { color: var(--boss-verde); }
#screen-draft .dft-intro-txt {
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: 0.82rem; line-height: 1.5; letter-spacing: 0;
  color: var(--texto); text-transform: none;
}
#screen-draft .dft-intro-txt b { color: var(--texto-forte); font-weight: 700; }
#screen-draft .dft-intro-note {
  font-family: var(--fonte-texto); font-size: 0.68rem; color: var(--texto-fraco);
}

/* O BOTAO GRANDE. Um por tela: ele e o unico dourado cheio da abertura. */
#screen-draft .dft-cta,
#screen-draft .dft-finalize,
#screen-draft .dft-end-again {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #0a0f0c;
  background: linear-gradient(135deg, #f3c94a, var(--boss-ouro));
  border: none; border-radius: var(--canto-m);
  padding: 14px 30px;
  box-shadow: 0 8px 26px rgba(232,183,58,0.30);
  transition: transform .12s, filter .15s;
}
#screen-draft .dft-cta:active,
#screen-draft .dft-finalize:active,
#screen-draft .dft-end-again:active { transform: scale(0.97); }
#screen-draft .dft-fin-svg { width: 19px; height: 19px; }
/* Desabilitado tem que PARECER desabilitado: o FINALIZAR so acende com os
   11 em campo, e dourado apagado ainda parece clicavel. */
#screen-draft .dft-finalize:disabled {
  background: rgba(255,255,255,0.05);
  color: var(--texto-fraco);
  box-shadow: none;
  border: 1px solid var(--borda-fraca);
}

/* ── AS ESCOLHAS (dificuldade e tatica) ───────────────────────────────── */

#screen-draft .dft-esc { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
#screen-draft .dft-esc button {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--canto-m);
  padding: 9px 14px;
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
}
#screen-draft .dft-esc button:active { transform: scale(0.96); }
#screen-draft .dft-esc button.on,
#screen-draft .dft-esc button.active {
  background: var(--boss-ouro); border-color: var(--boss-ouro); color: #0a0f0c;
}

/* ── AS FORMACOES ─────────────────────────────────────────────────────── */

#screen-draft .dft-h2 {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.35rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto-forte);
}
#screen-draft .dft-p {
  font-family: var(--fonte-texto); font-size: 0.78rem; line-height: 1.4;
  color: var(--texto-fraco); text-transform: none;
}
#screen-draft .dft-form-opt {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  padding: 13px 15px;
  background: linear-gradient(135deg, rgba(0,200,75,0.10), rgba(0,200,75,0.03));
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
}
#screen-draft .dft-form-opt:active { transform: scale(0.98); }
#screen-draft .dft-form-opt:hover { border-color: var(--boss-ouro); background: rgba(232,183,58,0.10); }
#screen-draft .dfo-name {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.32rem; letter-spacing: 0.04em; line-height: 1;
  color: var(--texto-forte);
}
#screen-draft .dfo-pos {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.64rem; letter-spacing: 0.1em;
  color: var(--texto-fraco); text-transform: uppercase;
}

/* ── A NOTA VIVA ──────────────────────────────────────────────────────── */

/* Ela deixou de ser um numero solto e virou um MOSTRADOR: o numero grande
   em Barlow Condensed, o rotulo pequeno do lado, e a barra embaixo. */
#screen-draft .dft-nv {
  background: rgba(1,10,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);
  padding: 9px 12px;
}
#screen-draft .dft-nv-lbl {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.6rem; letter-spacing: 0.12em; color: var(--texto-fraco);
  text-transform: uppercase;
}
#screen-draft .dft-nv-num {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.9rem; line-height: 1; letter-spacing: 0.02em;
  color: var(--boss-ouro);
}
#screen-draft .dft-progress {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.05em; color: var(--texto-fraco);
}
#screen-draft .dft-nv-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.07);
}
#screen-draft .dft-nv-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--boss-verde), var(--boss-ouro));
}

/* ── O SORTEIO DAS TRES ───────────────────────────────────────────────── */

/* A folha sobe DE BAIXO PRA CIMA, como a busca da ÁREA VIP. Foi o que o
   Boss aprovou em 20/09, e é o gesto que o polegar alcança. */
#screen-draft ~ .dft-reveal .dft-reveal-box,
.dft-reveal .dft-reveal-box {
  background: linear-gradient(165deg, #06180c, #020a04);
  border: 1px solid var(--borda);
  border-radius: var(--canto-g) var(--canto-g) 0 0;
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.18), 0 -12px 40px rgba(0,0,0,0.75);
}
.dft-reveal-head {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto);
}
.dft-reveal-head b { color: var(--boss-ouro); }
.dft-reroll {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto);
  background: rgba(0,200,75,0.10);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
  box-shadow: inset 0 1px 0 rgba(120,255,175,0.14);
}
.dft-reroll span { color: var(--texto-fraco); font-weight: 500; }
.drc-name {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.03em; color: var(--texto-forte);
}
.drc-cat {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── A NOTA FINAL ─────────────────────────────────────────────────────── */

#screen-draft .dft-nota-lbl {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-fraco);
}
#screen-draft .dft-nota-num {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 5.2rem; line-height: 0.92; letter-spacing: 0.01em;
  color: var(--boss-ouro);
  text-shadow: 0 0 34px rgba(232,183,58,0.35);
}
#screen-draft .dft-nota-msg {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texto-forte);
}
/* A FRASE DO BOSS. Ela é a voz dele na tela, então ganha destaque de
   citação: a barra dourada na esquerda e o texto em caixa normal. */
#screen-draft .dft-boss {
  text-align: left;
  padding: 11px 13px;
  background: rgba(232,183,58,0.07);
  border: 1px solid rgba(232,183,58,0.28);
  border-left: 3px solid var(--boss-ouro);
  border-radius: var(--canto-m);
}
#screen-draft .dft-boss-quem {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--boss-ouro);
}
#screen-draft .dft-boss-txt {
  font-family: var(--fonte-texto); font-weight: 400;
  font-size: 0.84rem; line-height: 1.45; letter-spacing: 0;
  color: var(--texto-forte); text-transform: none;
}
#screen-draft .dft-tat-ttl {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-fraco);
}
#screen-draft .dft-tat-desc {
  font-family: var(--fonte-texto); font-size: 0.76rem; line-height: 1.4;
  color: var(--texto); text-transform: none;
}

/* ── O MUNDIAL SIMULADO ───────────────────────────────────────────────── */

#screen-draft .dft-chv-fase {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-fraco);
}
#screen-draft .dft-chv-time {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 0.98rem; letter-spacing: 0.04em; color: var(--texto-forte);
}
#screen-draft .dft-chv-vs {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.6rem; letter-spacing: 0.1em; color: var(--boss-ouro);
}
#screen-draft .dft-chv-res {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.25rem; letter-spacing: 0.04em; color: var(--texto-forte);
}
/* O campinho do confronto usa a MESMA arte do gramado grande: sem isso o
   mundial pareceria de outro app. */
#screen-draft .dcp-campo {
  background: #04140a var(--campo, none) center / 100% 100% no-repeat;
  border: 1px solid rgba(0,200,75,0.30);
  border-radius: var(--canto-m);
}
/* As linhas que o CSS antigo desenhava por cima saem: elas ja estao na arte. */
#screen-draft .dcp-linha,
#screen-draft .dcp-circulo,
#screen-draft .dcp-area { display: none; }
#screen-draft .dcp-placar {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.6rem; letter-spacing: 0.06em; color: var(--texto-forte);
}
#screen-draft .dft-clock,
#screen-draft .dcp-relogio {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--boss-verde);
}

/* ── O FIM ────────────────────────────────────────────────────────────── */

#screen-draft .dft-end-ttl {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 2rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--boss-ouro); line-height: 1.02;
}
#screen-draft .dft-end-sub {
  font-family: var(--fonte-rotulo); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.06em; color: var(--texto);
}
#screen-draft .dft-end-exp {
  font-family: var(--fonte-texto); font-size: 0.78rem; line-height: 1.45;
  color: var(--texto-fraco); text-transform: none;
}
#screen-draft .dft-end-menu,
#screen-draft .dft-copy {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--texto);
  background: rgba(0,200,75,0.08);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
}

/* ── OS RECORDES ──────────────────────────────────────────────────────── */

#screen-draft .dft-rec { padding: 12px 14px; }
#screen-draft .dft-hist-ttl {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-fraco);
}
#screen-draft .dft-hist-nota {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 1.3rem; color: var(--boss-ouro);
}
#screen-draft .dft-hist-txt,
#screen-draft .dft-hist-data {
  font-family: var(--fonte-texto); font-size: 0.72rem; color: var(--texto-fraco);
  text-transform: none;
}

/* ── A BARRA DE CIMA ──────────────────────────────────────────────────── */

#screen-draft .dft-head .btn {
  font-family: var(--fonte-rotulo); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--texto);
  background: rgba(0,200,75,0.08);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
}
#screen-draft .dft-som {
  background: rgba(0,200,75,0.08);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
}
#screen-draft .dft-vol {
  background: linear-gradient(165deg, #06180c, #020a04);
  border: 1px solid var(--borda);
  border-radius: var(--canto-m);
}
#screen-draft .dft-vol-ttl {
  font-family: var(--fonte-rotulo); font-weight: 800;
  font-size: 0.62rem; letter-spacing: 0.12em; color: var(--boss-ouro);
  text-transform: uppercase;
}

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

/* A montagem vira UMA coluna: campo, banco, FINALIZAR. É a ordem em que a
   mão trabalha, e é o pedido do Boss de o banco vir logo após o gramado. */
@media (max-width: 820px) {
  #screen-draft .dft-build-grid { display: flex; flex-direction: column; gap: 10px; }
  #screen-draft .dft-finalize { width: 100%; margin-top: 10px; }
}
@media (max-width: 360px) {
  #screen-draft .dft-intro-ttl { font-size: 2rem; }
  #screen-draft .dft-nota-num { font-size: 4.4rem; }
}