/* =====================================================================
   Modo Atleta — a casca.

   A ideia: NOITE DE JOGO VISTA DO TÚNEL. Fundo de arquibancada escura,
   um halo de refletor no alto, e o âmbar de holofote reservado para UMA
   coisa só — você.

   ⚠️ O âmbar (--ambar) só aparece no que é SEU: seu overall, seu nome no
   XI, seu gol na narração, o botão da sua vez. Se ele pintar qualquer
   número, para de significar e a tela vira painel de planilha.

   Hierarquia de número, de propósito — hoje a crítica era "os dados não
   aparecem". Três tamanhos, nunca mais:
     --n-heroi (54px) — um por tela, a resposta da pergunta que o jogador
                        abriu o app para fazer
     --n-forte (27px) — o placar, os totais da temporada
     --n-apoio (16px) — referência, comparação, letra miúda
   ===================================================================== */

:root {
  --noite: #06131A;
  --piso: #0D212A;
  --piso-alto: #15303B;
  --piso-fundo: #0A1A22;
  --giz: #EAF1EE;
  --giz-medio: #A9BCC1;
  --giz-fraco: #7A8E95;
  --ambar: #F2B134;
  --ambar-fundo: rgba(242, 177, 52, 0.13);
  --relva: #35B57A;
  --sangue: #E06055;
  --linha: rgba(234, 241, 238, 0.11);
  --linha-forte: rgba(234, 241, 238, 0.2);

  --n-heroi: 54px;
  --n-forte: 27px;
  --n-apoio: 16px;

  --cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio: 14px;
  --gutter: 16px;
}

* { box-sizing: border-box; }

html { background: var(--noite); }

body {
  margin: 0;
  font-family: var(--texto);
  color: var(--giz);
  background:
    radial-gradient(130% 48% at 50% -8%, rgba(242, 177, 52, 0.11), transparent 62%),
    radial-gradient(90% 40% at 50% 0%, rgba(120, 190, 220, 0.07), transparent 70%),
    var(--noite);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px var(--gutter) 108px;
}

button { font-family: inherit; }

/* ───────────────────────── o cabeçalho (a carta) ─────────────────────
   A carta é a identidade do jogador. Era uma linha de texto; agora é a
   peça que diz, de relance, quem você é e onde está. */

.carta {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background:
    linear-gradient(145deg, rgba(242, 177, 52, 0.09), transparent 46%),
    linear-gradient(180deg, var(--piso-alto), var(--piso));
  overflow: hidden;
}

.carta::after {
  /* o brilho de refletor que corta a carta na diagonal */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 54%, rgba(255, 255, 255, 0.045) 61%, transparent 68%);
  pointer-events: none;
}

.carta-ovr {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
  padding-right: 14px;
  border-right: 1px solid var(--linha);
}

.carta-ovr b {
  font-family: var(--cond);
  font-size: var(--n-heroi);
  font-weight: 700;
  line-height: 0.88;
  color: var(--ambar);
  letter-spacing: -0.02em;
}

.carta-ovr span {
  margin-top: 4px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--giz-fraco);
  text-transform: uppercase;
}

.carta-corpo { min-width: 0; }

.carta-nome {
  margin: 0;
  font-family: var(--cond);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.carta-linha {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--giz-medio);
}

.carta-linha .escudo { flex: none; }

.carta-clube {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carta-pos {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--giz);
  background: rgba(234, 241, 238, 0.11);
  text-transform: uppercase;
}

/* ───────────────────────── escudos e selos ───────────────────────── */

.escudo {
  flex: none;
  object-fit: contain;
  vertical-align: middle;
  /* ⚠️ muitos escudos reais são escuros; a sombra clara os separa do
     fundo petróleo sem alterar a arte */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.escudo-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 7px;
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--giz);
}

.selo-pais {
  display: inline-flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  vertical-align: middle;
}

.selo-pais i { width: 5px; height: 100%; }

.selo-pais b {
  padding: 0 6px;
  align-self: stretch;
  display: flex;
  align-items: center;
  background: rgba(6, 19, 26, 0.72);
}

/* ───────────────────────── seções e ajuda ───────────────────────── */

.secao-titulo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 26px 0 11px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--giz-fraco);
}

.secao-titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linha);
}

/* ⚠️ a explicação é <details>: ela ensina quem precisa e sai do caminho
   de quem já sabe. Texto de ajuda sempre visível vira ruído em 2 dias. */
.ajuda {
  margin: 9px 0 0;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: rgba(13, 33, 42, 0.6);
}

.ajuda > summary {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--giz-medio);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ajuda > summary::-webkit-details-marker { display: none; }

.ajuda > summary::before {
  content: "?";
  flex: none;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  color: var(--noite);
  background: var(--giz-medio);
}

.ajuda[open] > summary { border-bottom: 1px solid var(--linha); }

.ajuda p {
  margin: 0;
  padding: 11px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--giz-medio);
}

.ajuda p + p { padding-top: 0; }

.aviso {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--giz-medio);
}

.vazio {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--linha-forte);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--giz-fraco);
  text-align: center;
}

/* ───────────────────────── o quadro de escalação ───────────────────── */

.quadro {
  padding: 17px 16px 19px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--piso), var(--piso-fundo));
}

.quadro-rodada {
  margin: 0 0 12px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--giz-fraco);
  text-align: center;
}

/* o confronto com escudo dos dois lados */
.confronto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.confronto-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.confronto-nome {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
  color: var(--giz);
  overflow-wrap: anywhere;
}

.confronto-nome i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--giz-fraco);
}

.confronto-x {
  font-family: var(--cond);
  font-size: 19px;
  color: var(--giz-fraco);
}

.confronto-casa {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--giz-fraco);
}

/* o veredicto: a frase que o jogador abriu o app para ler */
.veredicto {
  margin: 0;
  padding: 13px 12px;
  border-radius: 10px;
  font-family: var(--cond);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.veredicto.escalado {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid rgba(242, 177, 52, 0.34);
}

.veredicto.fora {
  color: var(--giz-medio);
  background: rgba(234, 241, 238, 0.05);
  border: 1px solid var(--linha);
}

.motivo {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.58;
  color: var(--giz-medio);
}

.motivo strong { color: var(--giz); font-weight: 600; }

/* ── a disputa pela vaga: você contra quem está na sua frente ───────
   ⚠️ O dono pediu o motivo com NOME. Mostrar os dois números lado a
   lado transforma "não joguei" numa meta: falta tanto. */
.duelo {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: rgba(6, 19, 26, 0.45);
}

.duelo-topo {
  display: flex;
  justify-content: space-between;
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--giz-fraco);
  margin-bottom: 8px;
}

.duelo-par {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  font-size: 13.5px;
}

.duelo-par b {
  font-family: var(--cond);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
}

.duelo-par .eu { color: var(--ambar); }
.duelo-par .ele { color: var(--giz); }

.duelo-trilha {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: rgba(234, 241, 238, 0.1);
  overflow: hidden;
  margin-bottom: 4px;
}

.duelo-trilha i { display: block; height: 100%; border-radius: 3px; }
.duelo-trilha.eu i { background: var(--ambar); }
.duelo-trilha.ele i { background: var(--giz-medio); }

.duelo-falta {
  margin: 9px 0 0;
  font-size: 12.5px;
  color: var(--giz-fraco);
}

/* ───────────────────────── o XI ───────────────────────── */

.xi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  background: var(--linha);
}

.xi li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--piso-fundo);
  min-width: 0;
}

.xi li span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xi .pos {
  flex: none;
  width: 30px;
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--giz-fraco);
}

/* ⚠️ São ONZE nomes em duas colunas: sem isto a última célula fica vazia
   e o fundo do vão (que é a cor da linha) aparece como um retângulo
   solto, que se lê como defeito. */
.xi li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.xi li.voce {
  background: var(--ambar-fundo);
  font-weight: 600;
}

.xi li.voce span:last-child { color: var(--ambar); }
.xi li.voce .pos { color: rgba(242, 177, 52, 0.75); }

/* ───────────────────────── condição e atributos ─────────────────────
   A barra agora carrega REFERÊNCIA: o tracinho mostra o que se espera
   neste clube. "46" sozinho não diz se é bom. */

.cond { display: grid; gap: 10px; }

.cond-linha {
  display: grid;
  grid-template-columns: 94px 1fr 34px;
  gap: 10px;
  align-items: center;
}

.cond-nome { font-size: 13px; color: var(--giz-medio); }

.cond-barra {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: rgba(234, 241, 238, 0.09);
  overflow: hidden;
}

.cond-barra i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--giz-medio);
  transition: width 0.4s ease;
}

.cond-barra.bom i { background: var(--relva); }
.cond-barra.ruim i { background: var(--sangue); }
.cond-barra.minha i { background: var(--ambar); }

.cond-barra u {
  /* a marca de referência */
  position: absolute;
  top: -2px;
  width: 2px;
  height: 11px;
  background: var(--giz);
  opacity: 0.55;
  text-decoration: none;
}

.cond-val {
  font-family: var(--cond);
  font-size: var(--n-apoio);
  font-weight: 600;
  text-align: right;
  color: var(--giz);
}

/* ───────────────────────── números ─────────────────────────
   ⚠️ Antes todo número tinha o mesmo peso e a tela parecia planilha.
   Aqui o número é grande e o rótulo é pequeno — na ordem da leitura. */

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  background: var(--linha);
}

.numeros-4 { grid-template-columns: repeat(4, 1fr); }

.numeros > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 13px 4px 11px;
  background: var(--piso-fundo);
}

.numeros b {
  font-family: var(--cond);
  font-size: var(--n-forte);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.numeros span {
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--giz-fraco);
  text-align: center;
}

.numeros i {
  font-style: normal;
  font-size: 11px;
  color: var(--giz-fraco);
}

.nota-otima { color: var(--ambar); }
.nota-boa { color: var(--relva); }
.nota-ma { color: var(--sangue); }

/* uma métrica herói, para a resposta principal de uma tela */
.heroi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 12px 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--piso-alto), var(--piso-fundo));
}

.heroi b {
  font-family: var(--cond);
  font-size: var(--n-heroi);
  font-weight: 700;
  line-height: 0.9;
  color: var(--ambar);
}

.heroi span {
  margin-top: 7px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--giz-fraco);
}

/* ───────────────────────── a partida ao vivo ───────────────────────── */

.aovivo {
  padding: 16px 14px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--piso), var(--piso-fundo));
}

.aovivo-confronto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.av-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.av-nome {
  font-family: var(--cond);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--giz-medio);
  overflow-wrap: anywhere;
}

.av-placar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cond);
  font-weight: 700;
}

.av-placar b {
  font-size: 46px;
  line-height: 1;
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.av-placar i {
  font-style: normal;
  font-size: 20px;
  color: var(--giz-fraco);
}

.av-relogio {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 15px 0 13px;
}

.av-barra {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(234, 241, 238, 0.1);
  overflow: hidden;
}

.av-barra i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(242, 177, 52, 0.55), var(--ambar));
}

.av-min {
  flex: none;
  min-width: 42px;
  font-family: var(--cond);
  font-size: 21px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--giz);
}

.av-narracao {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 132px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  background: var(--linha);
}

.av-ev {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.42;
  background: var(--piso-fundo);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.av-ev.entrou { opacity: 1; transform: none; }

.av-ev-min {
  flex: none;
  width: 29px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  color: var(--giz-fraco);
  font-variant-numeric: tabular-nums;
}

.av-ev.ev-fraco { color: var(--giz-fraco); }
.av-ev.ev-meu { color: var(--giz); }

.av-ev.ev-gol-meu {
  font-family: var(--cond);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ambar);
  background: var(--ambar-fundo);
}

.av-ev.ev-gol-meu .av-ev-min { color: var(--ambar); font-size: 15px; }
.av-ev.ev-gol { color: var(--relva); }
.av-ev.ev-contra { color: var(--giz-medio); background: rgba(224, 96, 85, 0.08); }
.av-ev.ev-anulado { color: var(--giz-fraco); text-decoration: line-through var(--giz-fraco) 1px; }
.av-ev.ev-lesao { color: var(--sangue); }
.av-ev.ev-banco { color: var(--giz); font-style: italic; }
.av-ev.ev-banco-nao { color: var(--giz-medio); font-style: italic; background: rgba(234, 241, 238, 0.045); }

.av-sua {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-radius: 9px;
  font-size: 13px;
  text-align: center;
  background: rgba(234, 241, 238, 0.05);
  color: var(--giz-medio);
}

.av-sua b { color: var(--ambar); font-weight: 600; }
.av-sua .av-voce { font-weight: 600; color: var(--giz); }
.av-sua .av-fraco { color: var(--giz-fraco); }

.av-ctrl { display: flex; gap: 8px; margin-top: 13px; }

.av-ctrl > button {
  flex: 1;
  padding: 10px 6px;
  border: 1px solid var(--linha-forte);
  border-radius: 9px;
  font-family: var(--cond);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--giz-medio);
  background: transparent;
  cursor: pointer;
}

.av-ctrl > button[aria-pressed="true"] {
  color: var(--noite);
  background: var(--giz);
  border-color: var(--giz);
}

.av-fim { width: 100%; }

.av-fim-t {
  margin: 4px 0 11px;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* ───────────────────────── troféus ───────────────────────── */

.trofeus {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trofeus li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--piso-fundo);
}

.trofeus li.maior {
  border-color: rgba(242, 177, 52, 0.4);
  background: linear-gradient(100deg, var(--ambar-fundo), var(--piso-fundo) 72%);
}

.trofeu-img {
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.trofeu-nome {
  font-family: var(--cond);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.trofeus li.maior .trofeu-nome { color: var(--ambar); }

.trofeu-onde {
  display: block;
  font-family: var(--texto);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--giz-fraco);
  margin-top: 2px;
}

.trofeu-idade {
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  color: var(--giz-fraco);
  white-space: nowrap;
}

/* ───────────────────────── a tabela da liga ───────────────────────── */

.tabela-liga {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela-liga th {
  padding: 7px 6px;
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  color: var(--giz-fraco);
  border-bottom: 1px solid var(--linha);
}

.tabela-liga td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(234, 241, 238, 0.055);
}

.tabela-liga .num {
  text-align: right;
  font-family: var(--cond);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tabela-liga .clube-cel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tabela-liga .clube-cel span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabela-liga tr.meu td {
  background: var(--ambar-fundo);
  color: var(--ambar);
  font-weight: 600;
}

.tabela-liga tr.meu .clube-cel span { color: var(--ambar); }

/* ───────────────────────── carreira ───────────────────────── */

.temporadas {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.temporadas th {
  padding: 7px 5px;
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--giz-fraco);
  border-bottom: 1px solid var(--linha);
}

.temporadas td {
  padding: 8px 5px;
  border-bottom: 1px solid rgba(234, 241, 238, 0.055);
  vertical-align: middle;
}

.temporadas .num {
  text-align: right;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.temporadas tr.troca td {
  padding: 13px 5px 6px;
  border-bottom: 1px solid var(--linha-forte);
}

.troca-clube {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cond);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--giz);
}

.troca-clube i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--giz-fraco);
  margin-left: auto;
  text-transform: none;
}

.marco-chip {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--giz-medio);
  background: rgba(234, 241, 238, 0.08);
}

.marco-chip.maior {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid rgba(242, 177, 52, 0.3);
}

/* a trilha de clubes */
.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilha li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 6px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  font-size: 12.5px;
  background: var(--piso-fundo);
}

.trilha li.atual {
  border-color: rgba(242, 177, 52, 0.42);
  color: var(--ambar);
  background: var(--ambar-fundo);
}

/* ───────────────────────── a linha do overall ─────────────────────────
   Uma leitura por temporada. Mostra o arco da carreira num relance. */

.evolucao {
  padding: 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--piso-fundo);
}

.evolucao svg { display: block; width: 100%; height: 88px; overflow: visible; }

.evolucao-legenda {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--giz-fraco);
}

/* ───────────────────────── formulário e botões ───────────────────────── */

.campo { margin-bottom: 17px; }

.campo > label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--giz-fraco);
}

.campo input,
.campo select {
  width: 100%;
  padding: 13px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  font-family: var(--texto);
  font-size: 16px;      /* ⚠️ 16px evita o zoom automático do iOS */
  color: var(--giz);
  background: var(--piso-fundo);
  appearance: none;
}

.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--giz-medio) 50%),
    linear-gradient(135deg, var(--giz-medio) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.campo input:focus,
.campo select:focus {
  outline: 2px solid var(--ambar);
  outline-offset: 1px;
  border-color: transparent;
}

.escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.escolha {
  padding: 12px 8px;
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  font-family: var(--cond);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--giz-medio);
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.escolha[aria-pressed="true"] {
  color: var(--ambar);
  border-color: rgba(242, 177, 52, 0.52);
  background: var(--ambar-fundo);
}

/* proposta de clube: vira um cartão com escudo, não um botão de texto */
.proposta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-bottom: 9px;
  padding: 13px;
  border: 1px solid var(--linha-forte);
  border-radius: 11px;
  text-align: left;
  color: var(--giz);
  background: var(--piso-fundo);
  cursor: pointer;
}

.proposta:hover { border-color: var(--ambar); }

.proposta-nome {
  font-family: var(--cond);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.12;
}

.proposta-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--texto);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--giz-fraco);
}

.proposta-nivel {
  text-align: center;
  font-family: var(--cond);
}

.proposta-nivel b {
  display: block;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.proposta-nivel span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--giz-fraco);
}

.proposta.sobe .proposta-nivel b { color: var(--relva); }
.proposta.desce .proposta-nivel b { color: var(--ambar); }

.treinos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px;
}

.treino {
  padding: 11px 7px;
  border: 1px solid var(--linha);
  border-radius: 9px;
  font-size: 13px;
  color: var(--giz-medio);
  background: transparent;
  cursor: pointer;
}

.treino[aria-pressed="true"] {
  color: var(--ambar);
  border-color: rgba(242, 177, 52, 0.5);
  background: var(--ambar-fundo);
  font-weight: 600;
}

.acao {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  border: 0;
  border-radius: 11px;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1A1206;
  background: linear-gradient(180deg, #F7C256, var(--ambar));
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.acao:active { transform: translateY(1px); box-shadow: none; }

.acao.secundaria {
  color: var(--giz-medio);
  background: transparent;
  border: 1px solid var(--linha-forte);
  box-shadow: none;
  font-size: 15px;
}

/* ───────────────────────── as abas ───────────────────────── */

.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  padding: 7px var(--gutter) calc(7px + env(safe-area-inset-bottom));
  gap: 6px;
  border-top: 1px solid var(--linha);
  background: rgba(6, 19, 26, 0.93);
  backdrop-filter: blur(11px);
}

.abas > button {
  flex: 1;
  /* ⚠️ 44px é o alvo de toque mínimo, e com CINCO abas em 375px cada
     uma tem só 64px de largura — a altura é o que resta para acertar.
     Estava em 38px. O dono já sentiu isso no 38 Brasil, onde o botão
     principal tinha 30px e "não pegava". */
  min-height: 44px;
  padding: 11px 3px;
  border: 0;
  border-radius: 9px;
  font-family: var(--cond);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--giz-fraco);
  background: transparent;
  cursor: pointer;
}

.abas > button[aria-current="true"] {
  color: var(--ambar);
  background: var(--ambar-fundo);
}

.oculto { display: none !important; }

/* ───────────────────────── abertura (primeira vez) ─────────────────── */

.abertura-logo {
  margin: 10px 0 4px;
  font-family: var(--cond);
  font-size: 40px;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.abertura-logo b { display: block; color: var(--ambar); }

.abertura-sub {
  margin: 0 0 22px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--giz-medio);
}

.passos {
  display: grid;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: p;
}

.passos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: var(--piso-fundo);
  counter-increment: p;
}

.passos li::before {
  content: counter(p);
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 700;
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid rgba(242, 177, 52, 0.34);
}

/* ⚠️ o <b> e o <span> são DOIS filhos da grade: sem prendê-los na coluna
   2, o título vai para a direita e o texto desce para debaixo do número. */
.passos b,
.passos span { grid-column: 2; }

.passos b {
  display: block;
  font-family: var(--cond);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.passos span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--giz-medio);
}

/* ───────────────────────── telas largas ─────────────────────────
   Celular manda (70% dos jogadores do 38 estão no app), mas no desktop
   a coluna única esticada fica pobre. */

@media (min-width: 720px) {
  .app { max-width: 720px; padding-bottom: 32px; }
  /* ⚠️ No desktop a barra vai para o TOPO, grudada. Para `sticky` grudar
     no topo, a <nav> precisa estar no início do fluxo — por isso ela vem
     antes do <main> no HTML. No celular ela é `fixed` no rodapé, e lá a
     ordem no HTML não importa. */
  .abas {
    position: sticky;
    top: 0;
    bottom: auto;
    max-width: 720px;
    margin: 0 auto;
    border-top: 0;
    border-bottom: 1px solid var(--linha);
    border-radius: 0 0 12px 12px;
    padding-bottom: 7px;
  }
  .xi { grid-template-columns: repeat(3, 1fr); }
  .av-placar b { font-size: 56px; }
  .av-narracao { min-height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}